From 5e3c2fea6006415d28d0ef11d599c075ef0b849a Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Fri, 11 Jul 2014 16:16:41 +0200
Subject: [PATCH 1/6] fixed springs not calculating. added example, set inherit
 color to default ON

---
 dist/vis.js                                   | 57980 ++++++++--------
 .../28_world_cup_network_performance.html     | 10053 +++
 lib/network/Network.js                        |     2 +-
 lib/network/mixins/physics/PhysicsMixin.js    |     2 +-
 4 files changed, 39045 insertions(+), 28992 deletions(-)
 create mode 100644 examples/network/28_world_cup_network_performance.html

diff --git a/dist/vis.js b/dist/vis.js
index 40366c50..7c960390 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -81,54 +81,54 @@ return /******/ (function(modules) { // webpackBootstrap
 
   // utils
   exports.util = __webpack_require__(1);
-  exports.DOMutil = __webpack_require__(2);
+  exports.DOMutil = __webpack_require__(8);
 
   // data
-  exports.DataSet = __webpack_require__(3);
-  exports.DataView = __webpack_require__(4);
+  exports.DataSet = __webpack_require__(9);
+  exports.DataView = __webpack_require__(10);
 
   // Graph3d
   exports.Graph3d = __webpack_require__(11);
 
   // Timeline
-  exports.Timeline = __webpack_require__(5);
-  exports.Graph2d = __webpack_require__(7);
+  exports.Timeline = __webpack_require__(17);
+  exports.Graph2d = __webpack_require__(31);
   exports.timeline= {
-    DataStep: __webpack_require__(6),
-    Range: __webpack_require__(8),
-    stack: __webpack_require__(9),
-    TimeStep: __webpack_require__(10),
+    DataStep: __webpack_require__(34),
+    Range: __webpack_require__(18),
+    stack: __webpack_require__(26),
+    TimeStep: __webpack_require__(21),
 
     components: {
       items: {
-        Item: __webpack_require__(22),
-        ItemBox: __webpack_require__(23),
-        ItemPoint: __webpack_require__(24),
-        ItemRange: __webpack_require__(25)
+        Item: __webpack_require__(28),
+        ItemBox: __webpack_require__(29),
+        ItemPoint: __webpack_require__(30),
+        ItemRange: __webpack_require__(27)
       },
 
-      Component: __webpack_require__(12),
-      CurrentTime: __webpack_require__(13),
-      CustomTime: __webpack_require__(14),
-      DataAxis: __webpack_require__(15),
-      GraphGroup: __webpack_require__(16),
-      Group: __webpack_require__(17),
-      ItemSet: __webpack_require__(18),
-      Legend: __webpack_require__(19),
-      LineGraph: __webpack_require__(20),
-      TimeAxis: __webpack_require__(21)
+      Component: __webpack_require__(19),
+      CurrentTime: __webpack_require__(22),
+      CustomTime: __webpack_require__(23),
+      DataAxis: __webpack_require__(33),
+      GraphGroup: __webpack_require__(35),
+      Group: __webpack_require__(25),
+      ItemSet: __webpack_require__(24),
+      Legend: __webpack_require__(36),
+      LineGraph: __webpack_require__(32),
+      TimeAxis: __webpack_require__(20)
     }
   };
 
   // Network
-  exports.Network = __webpack_require__(26);
+  exports.Network = __webpack_require__(37);
   exports.network = {
-    Edge: __webpack_require__(27),
-    Groups: __webpack_require__(28),
-    Images: __webpack_require__(29),
-    Node: __webpack_require__(30),
-    Popup: __webpack_require__(31),
-    dotparser: __webpack_require__(32)
+    Edge: __webpack_require__(43),
+    Groups: __webpack_require__(40),
+    Images: __webpack_require__(41),
+    Node: __webpack_require__(42),
+    Popup: __webpack_require__(44),
+    dotparser: __webpack_require__(39)
   };
 
   // Deprecated since v3.0.0
@@ -145,8 +145,8 @@ 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.
-  var Hammer = __webpack_require__(38);
-  var moment = __webpack_require__(39);
+  var Hammer = __webpack_require__(2);
+  var moment = __webpack_require__(4);
 
   /**
    * Test whether given object is a number
@@ -1420,11465 +1420,10688 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 2 */
 /***/ function(module, exports, __webpack_require__) {
 
-  // DOM utility methods
-
-  /**
-   * this prepares the JSON container for allocating SVG elements
-   * @param JSONcontainer
-   * @private
-   */
-  exports.prepareElements = function(JSONcontainer) {
-    // cleanup the redundant svgElements;
-    for (var elementType in JSONcontainer) {
-      if (JSONcontainer.hasOwnProperty(elementType)) {
-        JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
-        JSONcontainer[elementType].used = [];
-      }
+  // 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__(3);
+    // TODO: throw an error when hammerjs is not available?
+  }
+  else {
+    module.exports = function () {
+      throw Error('hammer.js is only available in a browser, not in node.js.');
     }
-  };
+  }
 
-  /**
-   * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
-   * which to remove the redundant elements.
-   *
-   * @param JSONcontainer
-   * @private
-   */
-  exports.cleanupElements = function(JSONcontainer) {
-    // cleanup the redundant svgElements;
-    for (var elementType in JSONcontainer) {
-      if (JSONcontainer.hasOwnProperty(elementType)) {
-        if (JSONcontainer[elementType].redundant) {
-          for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
-            JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
-          }
-          JSONcontainer[elementType].redundant = [];
-        }
-      }
-    }
-  };
 
-  /**
-   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
-   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /*! Hammer.JS - v1.0.5 - 2013-04-07
+   * http://eightmedia.github.com/hammer.js
    *
-   * @param elementType
-   * @param JSONcontainer
-   * @param svgContainer
-   * @returns {*}
-   * @private
-   */
-  exports.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
-    var element;
-    // allocate SVG element, if it doesnt yet exist, create one.
-    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
-      // check if there is an redundant element
-      if (JSONcontainer[elementType].redundant.length > 0) {
-        element = JSONcontainer[elementType].redundant[0];
-        JSONcontainer[elementType].redundant.shift();
-      }
-      else {
-        // create a new element and add it to the SVG
-        element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
-        svgContainer.appendChild(element);
-      }
-    }
-    else {
-      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
-      element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
-      JSONcontainer[elementType] = {used: [], redundant: []};
-      svgContainer.appendChild(element);
-    }
-    JSONcontainer[elementType].used.push(element);
-    return element;
-  };
+   * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
+   * Licensed under the MIT license */
 
+  (function(window, undefined) {
+      'use strict';
 
   /**
-   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
-   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
-   *
-   * @param elementType
-   * @param JSONcontainer
-   * @param DOMContainer
-   * @returns {*}
-   * @private
+   * Hammer
+   * use this to create instances
+   * @param   {HTMLElement}   element
+   * @param   {Object}        options
+   * @returns {Hammer.Instance}
+   * @constructor
    */
-  exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
-    var element;
-    // allocate SVG element, if it doesnt yet exist, create one.
-    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
-      // check if there is an redundant element
-      if (JSONcontainer[elementType].redundant.length > 0) {
-        element = JSONcontainer[elementType].redundant[0];
-        JSONcontainer[elementType].redundant.shift();
-      }
-      else {
-        // create a new element and add it to the SVG
-        element = document.createElement(elementType);
-        DOMContainer.appendChild(element);
+  var Hammer = function(element, options) {
+      return new Hammer.Instance(element, options || {});
+  };
+
+  // default settings
+  Hammer.defaults = {
+      // add styles and attributes to the element to prevent the browser from doing
+      // its native behavior. this doesnt prevent the scrolling, but cancels
+      // the contextmenu, tap highlighting etc
+      // set to false to disable this
+      stop_browser_behavior: {
+  		// this also triggers onselectstart=false for IE
+          userSelect: 'none',
+  		// this makes the element blocking in IE10 >, you could experiment with the value
+  		// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
+          touchAction: 'none',
+  		touchCallout: 'none',
+          contentZooming: 'none',
+          userDrag: 'none',
+          tapHighlightColor: 'rgba(0,0,0,0)'
       }
-    }
-    else {
-      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
-      element = document.createElement(elementType);
-      JSONcontainer[elementType] = {used: [], redundant: []};
-      DOMContainer.appendChild(element);
-    }
-    JSONcontainer[elementType].used.push(element);
-    return element;
+
+      // more settings are defined per gesture at gestures.js
   };
 
+  // detect touchevents
+  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
+  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
 
+  // dont use mouseevents on mobile devices
+  Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+  Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
 
+  // eventtypes per touchevent (start, move, end)
+  // are filled by Hammer.event.determineEventTypes on setup
+  Hammer.EVENT_TYPES = {};
 
-  /**
-   * draw a point object. this is a seperate function because it can also be called by the legend.
-   * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
-   * as well.
-   *
-   * @param x
-   * @param y
-   * @param group
-   * @param JSONcontainer
-   * @param svgContainer
-   * @returns {*}
-   */
-  exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
-    var point;
-    if (group.options.drawPoints.style == 'circle') {
-      point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
-      point.setAttributeNS(null, "cx", x);
-      point.setAttributeNS(null, "cy", y);
-      point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
-      point.setAttributeNS(null, "class", group.className + " point");
-    }
-    else {
-      point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
-      point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
-      point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
-      point.setAttributeNS(null, "width", group.options.drawPoints.size);
-      point.setAttributeNS(null, "height", group.options.drawPoints.size);
-      point.setAttributeNS(null, "class", group.className + " point");
-    }
-    return point;
-  };
+  // direction defines
+  Hammer.DIRECTION_DOWN = 'down';
+  Hammer.DIRECTION_LEFT = 'left';
+  Hammer.DIRECTION_UP = 'up';
+  Hammer.DIRECTION_RIGHT = 'right';
 
-  /**
-   * draw a bar SVG element centered on the X coordinate
-   *
-   * @param x
-   * @param y
-   * @param className
-   */
-  exports.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
-    var rect = exports.getSVGElement('rect',JSONcontainer, svgContainer);
-    rect.setAttributeNS(null, "x", x - 0.5 * width);
-    rect.setAttributeNS(null, "y", y);
-    rect.setAttributeNS(null, "width", width);
-    rect.setAttributeNS(null, "height", height);
-    rect.setAttributeNS(null, "class", className);
-  };
+  // pointer type
+  Hammer.POINTER_MOUSE = 'mouse';
+  Hammer.POINTER_TOUCH = 'touch';
+  Hammer.POINTER_PEN = 'pen';
 
-/***/ },
-/* 3 */
-/***/ function(module, exports, __webpack_require__) {
+  // touch event defines
+  Hammer.EVENT_START = 'start';
+  Hammer.EVENT_MOVE = 'move';
+  Hammer.EVENT_END = 'end';
 
-  var util = __webpack_require__(1);
+  // hammer document where the base events are added at
+  Hammer.DOCUMENT = document;
+
+  // plugins namespace
+  Hammer.plugins = {};
+
+  // if the window events are set...
+  Hammer.READY = false;
 
   /**
-   * DataSet
-   *
-   * Usage:
-   *     var dataSet = new DataSet({
-   *         fieldId: '_id',
-   *         type: {
-   *             // ...
-   *         }
-   *     });
-   *
-   *     dataSet.add(item);
-   *     dataSet.add(data);
-   *     dataSet.update(item);
-   *     dataSet.update(data);
-   *     dataSet.remove(id);
-   *     dataSet.remove(ids);
-   *     var data = dataSet.get();
-   *     var data = dataSet.get(id);
-   *     var data = dataSet.get(ids);
-   *     var data = dataSet.get(ids, options, data);
-   *     dataSet.clear();
-   *
-   * A data set can:
-   * - add/remove/update data
-   * - gives triggers upon changes in the data
-   * - can  import/export data in various data formats
-   *
-   * @param {Array | DataTable} [data]    Optional array with initial data
-   * @param {Object} [options]   Available options:
-   *                             {String} fieldId Field name of the id in the
-   *                                              items, 'id' by default.
-   *                             {Object.<String, String} type
-   *                                              A map with field names as key,
-   *                                              and the field type as value.
-   * @constructor DataSet
+   * setup events to detect gestures on the document
    */
-  // TODO: add a DataSet constructor DataSet(data, options)
-  function DataSet (data, options) {
-    // correctly read optional arguments
-    if (data && !Array.isArray(data) && !util.isDataTable(data)) {
-      options = data;
-      data = null;
-    }
+  function setup() {
+      if(Hammer.READY) {
+          return;
+      }
 
-    this._options = options || {};
-    this._data = {};                                 // map with data indexed by id
-    this._fieldId = this._options.fieldId || 'id';   // name of the field containing id
-    this._type = {};                                 // internal field types (NOTE: this can differ from this._options.type)
+      // find what eventtypes we add listeners to
+      Hammer.event.determineEventTypes();
 
-    // all variants of a Date are internally stored as Date, so we can convert
-    // from everything to everything (also from ISODate to Number for example)
-    if (this._options.type) {
-      for (var field in this._options.type) {
-        if (this._options.type.hasOwnProperty(field)) {
-          var value = this._options.type[field];
-          if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
-            this._type[field] = 'Date';
-          }
-          else {
-            this._type[field] = value;
+      // Register all gestures inside Hammer.gestures
+      for(var name in Hammer.gestures) {
+          if(Hammer.gestures.hasOwnProperty(name)) {
+              Hammer.detection.register(Hammer.gestures[name]);
           }
-        }
       }
-    }
-
-    // TODO: deprecated since version 1.1.1 (or 2.0.0?)
-    if (this._options.convert) {
-      throw new Error('Option "convert" is deprecated. Use "type" instead.');
-    }
 
-    this._subscribers = {};  // event subscribers
+      // Add touch events on the document
+      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
+      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
 
-    // add initial data when provided
-    if (data) {
-      this.add(data);
-    }
+      // Hammer is ready...!
+      Hammer.READY = true;
   }
 
   /**
-   * Subscribe to an event, add an event listener
-   * @param {String} event        Event name. Available events: 'put', 'update',
-   *                              'remove'
-   * @param {function} callback   Callback method. Called with three parameters:
-   *                                  {String} event
-   *                                  {Object | null} params
-   *                                  {String | Number} senderId
+   * create new hammer instance
+   * all methods should return the instance itself, so it is chainable.
+   * @param   {HTMLElement}       element
+   * @param   {Object}            [options={}]
+   * @returns {Hammer.Instance}
+   * @constructor
    */
-  DataSet.prototype.on = function(event, callback) {
-    var subscribers = this._subscribers[event];
-    if (!subscribers) {
-      subscribers = [];
-      this._subscribers[event] = subscribers;
-    }
+  Hammer.Instance = function(element, options) {
+      var self = this;
 
-    subscribers.push({
-      callback: callback
-    });
-  };
+      // setup HammerJS window events and register all gestures
+      // this also sets up the default options
+      setup();
 
-  // TODO: make this function deprecated (replaced with `on` since version 0.5)
-  DataSet.prototype.subscribe = DataSet.prototype.on;
+      this.element = element;
 
-  /**
-   * Unsubscribe from an event, remove an event listener
-   * @param {String} event
-   * @param {function} callback
-   */
-  DataSet.prototype.off = function(event, callback) {
-    var subscribers = this._subscribers[event];
-    if (subscribers) {
-      this._subscribers[event] = subscribers.filter(function (listener) {
-        return (listener.callback != callback);
+      // start/stop detection option
+      this.enabled = true;
+
+      // merge options
+      this.options = Hammer.utils.extend(
+          Hammer.utils.extend({}, Hammer.defaults),
+          options || {});
+
+      // add some css to the element to prevent the browser from doing its native behavoir
+      if(this.options.stop_browser_behavior) {
+          Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
+      }
+
+      // start detection on touchstart
+      Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
+          if(self.enabled) {
+              Hammer.detection.startDetect(self, ev);
+          }
       });
-    }
+
+      // return instance
+      return this;
   };
 
-  // TODO: make this function deprecated (replaced with `on` since version 0.5)
-  DataSet.prototype.unsubscribe = DataSet.prototype.off;
 
-  /**
-   * Trigger an event
-   * @param {String} event
-   * @param {Object | null} params
-   * @param {String} [senderId]       Optional id of the sender.
-   * @private
-   */
-  DataSet.prototype._trigger = function (event, params, senderId) {
-    if (event == '*') {
-      throw new Error('Cannot trigger event *');
-    }
+  Hammer.Instance.prototype = {
+      /**
+       * bind events to the instance
+       * @param   {String}      gesture
+       * @param   {Function}    handler
+       * @returns {Hammer.Instance}
+       */
+      on: function onEvent(gesture, handler){
+          var gestures = gesture.split(' ');
+          for(var t=0; t<gestures.length; t++) {
+              this.element.addEventListener(gestures[t], handler, false);
+          }
+          return this;
+      },
 
-    var subscribers = [];
-    if (event in this._subscribers) {
-      subscribers = subscribers.concat(this._subscribers[event]);
-    }
-    if ('*' in this._subscribers) {
-      subscribers = subscribers.concat(this._subscribers['*']);
-    }
 
-    for (var i = 0; i < subscribers.length; i++) {
-      var subscriber = subscribers[i];
-      if (subscriber.callback) {
-        subscriber.callback(event, params, senderId || null);
+      /**
+       * unbind events to the instance
+       * @param   {String}      gesture
+       * @param   {Function}    handler
+       * @returns {Hammer.Instance}
+       */
+      off: function offEvent(gesture, handler){
+          var gestures = gesture.split(' ');
+          for(var t=0; t<gestures.length; t++) {
+              this.element.removeEventListener(gestures[t], handler, false);
+          }
+          return this;
+      },
+
+
+      /**
+       * trigger gesture event
+       * @param   {String}      gesture
+       * @param   {Object}      eventData
+       * @returns {Hammer.Instance}
+       */
+      trigger: function triggerEvent(gesture, 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(Hammer.utils.hasParent(eventData.target, element)) {
+              element = eventData.target;
+          }
+
+          element.dispatchEvent(event);
+          return this;
+      },
+
+
+      /**
+       * enable of disable hammer.js detection
+       * @param   {Boolean}   state
+       * @returns {Hammer.Instance}
+       */
+      enable: function enable(state) {
+          this.enabled = state;
+          return this;
       }
-    }
   };
 
   /**
-   * Add data.
-   * Adding an item will fail when there already is an item with the same id.
-   * @param {Object | Array | DataTable} data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} addedIds      Array with the ids of the added items
+   * this holds the last move event,
+   * used to fix empty touchend issue
+   * see the onTouch event for an explanation
+   * @type {Object}
    */
-  DataSet.prototype.add = function (data, senderId) {
-    var addedIds = [],
-        id,
-        me = this;
-
-    if (Array.isArray(data)) {
-      // Array
-      for (var i = 0, len = data.length; i < len; i++) {
-        id = me._addItem(data[i]);
-        addedIds.push(id);
-      }
-    }
-    else if (util.isDataTable(data)) {
-      // Google DataTable
-      var columns = this._getColumnNames(data);
-      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-        var item = {};
-        for (var col = 0, cols = columns.length; col < cols; col++) {
-          var field = columns[col];
-          item[field] = data.getValue(row, col);
-        }
+  var last_move_event = null;
 
-        id = me._addItem(item);
-        addedIds.push(id);
-      }
-    }
-    else if (data instanceof Object) {
-      // Single item
-      id = me._addItem(data);
-      addedIds.push(id);
-    }
-    else {
-      throw new Error('Unknown dataType');
-    }
 
-    if (addedIds.length) {
-      this._trigger('add', {items: addedIds}, senderId);
-    }
+  /**
+   * when the mouse is hold down, this is true
+   * @type {Boolean}
+   */
+  var enable_detect = false;
 
-    return addedIds;
-  };
 
   /**
-   * Update existing items. When an item does not exist, it will be created
-   * @param {Object | Array | DataTable} data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} updatedIds     The ids of the added or updated items
+   * when touch events have been fired, this is true
+   * @type {Boolean}
    */
-  DataSet.prototype.update = function (data, senderId) {
-    var addedIds = [],
-        updatedIds = [],
-        me = this,
-        fieldId = me._fieldId;
+  var touch_triggered = false;
 
-    var addOrUpdate = function (item) {
-      var id = item[fieldId];
-      if (me._data[id]) {
-        // update item
-        id = me._updateItem(item);
-        updatedIds.push(id);
-      }
-      else {
-        // add new item
-        id = me._addItem(item);
-        addedIds.push(id);
-      }
-    };
 
-    if (Array.isArray(data)) {
-      // Array
-      for (var i = 0, len = data.length; i < len; i++) {
-        addOrUpdate(data[i]);
-      }
-    }
-    else if (util.isDataTable(data)) {
-      // Google DataTable
-      var columns = this._getColumnNames(data);
-      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-        var item = {};
-        for (var col = 0, cols = columns.length; col < cols; col++) {
-          var field = columns[col];
-          item[field] = data.getValue(row, col);
-        }
+  Hammer.event = {
+      /**
+       * simple addEventListener
+       * @param   {HTMLElement}   element
+       * @param   {String}        type
+       * @param   {Function}      handler
+       */
+      bindDom: function(element, type, handler) {
+          var types = type.split(' ');
+          for(var t=0; t<types.length; t++) {
+              element.addEventListener(types[t], handler, false);
+          }
+      },
 
-        addOrUpdate(item);
-      }
-    }
-    else if (data instanceof Object) {
-      // Single item
-      addOrUpdate(data);
-    }
-    else {
-      throw new Error('Unknown dataType');
-    }
 
-    if (addedIds.length) {
-      this._trigger('add', {items: addedIds}, senderId);
-    }
-    if (updatedIds.length) {
-      this._trigger('update', {items: updatedIds}, senderId);
-    }
+      /**
+       * touch events with mouse fallback
+       * @param   {HTMLElement}   element
+       * @param   {String}        eventType        like Hammer.EVENT_MOVE
+       * @param   {Function}      handler
+       */
+      onTouch: function onTouch(element, eventType, handler) {
+  		var self = this;
 
-    return addedIds.concat(updatedIds);
-  };
+          this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
+              var sourceEventType = ev.type.toLowerCase();
 
-  /**
-   * Get a data item or multiple items.
-   *
-   * Usage:
-   *
-   *     get()
-   *     get(options: Object)
-   *     get(options: Object, data: Array | DataTable)
-   *
-   *     get(id: Number | String)
-   *     get(id: Number | String, options: Object)
-   *     get(id: Number | String, options: Object, data: Array | DataTable)
-   *
-   *     get(ids: Number[] | String[])
-   *     get(ids: Number[] | String[], options: Object)
-   *     get(ids: Number[] | String[], options: Object, data: Array | DataTable)
-   *
-   * Where:
-   *
-   * {Number | String} id         The id of an item
-   * {Number[] | String{}} ids    An array with ids of items
-   * {Object} options             An Object with options. Available options:
-   *                              {String} [returnType] Type of data to be
-   *                                  returned. Can be 'DataTable' or 'Array' (default)
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] field names to be returned
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * {Array | DataTable} [data]   If provided, items will be appended to this
-   *                              array or table. Required in case of Google
-   *                              DataTable.
-   *
-   * @throws Error
-   */
-  DataSet.prototype.get = function (args) {
-    var me = this;
+              // onmouseup, but when touchend has been fired we do nothing.
+              // this is for touchdevices which also fire a mouseup on touchend
+              if(sourceEventType.match(/mouse/) && touch_triggered) {
+                  return;
+              }
 
-    // parse the arguments
-    var id, ids, options, data;
-    var firstType = util.getType(arguments[0]);
-    if (firstType == 'String' || firstType == 'Number') {
-      // get(id [, options] [, data])
-      id = arguments[0];
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else if (firstType == 'Array') {
-      // get(ids [, options] [, data])
-      ids = arguments[0];
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else {
-      // get([, options] [, data])
-      options = arguments[0];
-      data = arguments[1];
-    }
+              // mousebutton must be down or a touch event
+              else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
+                  sourceEventType.match(/pointerdown/) || // pointerevents touch
+                  (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
+              ){
+                  enable_detect = true;
+              }
 
-    // determine the return type
-    var returnType;
-    if (options && options.returnType) {
-      returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
+              // we are in a touch event, set the touch triggered bool to true,
+              // this for the conflicts that may occur on ios and android
+              if(sourceEventType.match(/touch|pointer/)) {
+                  touch_triggered = true;
+              }
 
-      if (data && (returnType != util.getType(data))) {
-        throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
-            'does not correspond with specified options.type (' + options.type + ')');
-      }
-      if (returnType == 'DataTable' && !util.isDataTable(data)) {
-        throw new Error('Parameter "data" must be a DataTable ' +
-            'when options.type is "DataTable"');
-      }
-    }
-    else if (data) {
-      returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
-    }
-    else {
-      returnType = 'Array';
-    }
+              // count the total touches on the screen
+              var count_touches = 0;
 
-    // build options
-    var type = options && options.type || this._options.type;
-    var filter = options && options.filter;
-    var items = [], item, itemId, i, len;
+              // when touch has been triggered in this detection session
+              // and we are now handling a mouse event, we stop that to prevent conflicts
+              if(enable_detect) {
+                  // update pointerevent
+                  if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
+                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+                  }
+                  // touch
+                  else if(sourceEventType.match(/touch/)) {
+                      count_touches = ev.touches.length;
+                  }
+                  // mouse
+                  else if(!touch_triggered) {
+                      count_touches = sourceEventType.match(/up/) ? 0 : 1;
+                  }
 
-    // convert items
-    if (id != undefined) {
-      // return a single item
-      item = me._getItem(id, type);
-      if (filter && !filter(item)) {
-        item = null;
-      }
-    }
-    else if (ids != undefined) {
-      // return a subset of items
-      for (i = 0, len = ids.length; i < len; i++) {
-        item = me._getItem(ids[i], type);
-        if (!filter || filter(item)) {
-          items.push(item);
-        }
-      }
-    }
-    else {
-      // return all items
-      for (itemId in this._data) {
-        if (this._data.hasOwnProperty(itemId)) {
-          item = me._getItem(itemId, type);
-          if (!filter || filter(item)) {
-            items.push(item);
-          }
-        }
-      }
-    }
+                  // if we are in a end event, but when we remove one touch and
+                  // we still have enough, set eventType to move
+                  if(count_touches > 0 && eventType == Hammer.EVENT_END) {
+                      eventType = Hammer.EVENT_MOVE;
+                  }
+                  // no touches, force the end event
+                  else if(!count_touches) {
+                      eventType = Hammer.EVENT_END;
+                  }
 
-    // order the results
-    if (options && options.order && id == undefined) {
-      this._sort(items, options.order);
-    }
+                  // because touchend has no touches, and we often want to use these in our gestures,
+                  // we send the last move event as our eventData in touchend
+                  if(!count_touches && last_move_event !== null) {
+                      ev = last_move_event;
+                  }
+                  // store the last move event
+                  else {
+                      last_move_event = ev;
+                  }
 
-    // filter fields of the items
-    if (options && options.fields) {
-      var fields = options.fields;
-      if (id != undefined) {
-        item = this._filterFields(item, fields);
-      }
-      else {
-        for (i = 0, len = items.length; i < len; i++) {
-          items[i] = this._filterFields(items[i], fields);
-        }
-      }
-    }
+                  // trigger the handler
+                  handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
 
-    // return the results
-    if (returnType == 'DataTable') {
-      var columns = this._getColumnNames(data);
-      if (id != undefined) {
-        // append a single item to the data table
-        me._appendRow(data, columns, item);
-      }
-      else {
-        // copy the items to the provided data table
-        for (i = 0, len = items.length; i < len; i++) {
-          me._appendRow(data, columns, items[i]);
-        }
-      }
-      return data;
-    }
-    else {
-      // return an array
-      if (id != undefined) {
-        // a single item
-        return item;
-      }
-      else {
-        // multiple items
-        if (data) {
-          // copy the items to the provided array
-          for (i = 0, len = items.length; i < len; i++) {
-            data.push(items[i]);
-          }
-          return data;
-        }
-        else {
-          // just return our array
-          return items;
-        }
-      }
-    }
-  };
+                  // remove pointerevent from list
+                  if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
+                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+                  }
+              }
 
-  /**
-   * Get ids of all items or from a filtered set of items.
-   * @param {Object} [options]    An Object with options. Available options:
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Array} ids
-   */
-  DataSet.prototype.getIds = function (options) {
-    var data = this._data,
-        filter = options && options.filter,
-        order = options && options.order,
-        type = options && options.type || this._options.type,
-        i,
-        len,
-        id,
-        item,
-        items,
-        ids = [];
+              //debug(sourceEventType +" "+ eventType);
 
-    if (filter) {
-      // get filtered items
-      if (order) {
-        // create ordered list
-        items = [];
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = this._getItem(id, type);
-            if (filter(item)) {
-              items.push(item);
-            }
-          }
-        }
+              // on the end we reset everything
+              if(!count_touches) {
+                  last_move_event = null;
+                  enable_detect = false;
+                  touch_triggered = false;
+                  Hammer.PointerEvent.reset();
+              }
+          });
+      },
 
-        this._sort(items, order);
 
-        for (i = 0, len = items.length; i < len; i++) {
-          ids[i] = items[i][this._fieldId];
-        }
-      }
-      else {
-        // create unordered list
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = this._getItem(id, type);
-            if (filter(item)) {
-              ids.push(item[this._fieldId]);
-            }
+      /**
+       * we have different events for each device/browser
+       * determine what we need and set them in the Hammer.EVENT_TYPES constant
+       */
+      determineEventTypes: function determineEventTypes() {
+          // determine the eventtype we want to set
+          var types;
+
+          // pointerEvents magic
+          if(Hammer.HAS_POINTEREVENTS) {
+              types = Hammer.PointerEvent.getEvents();
           }
-        }
-      }
-    }
-    else {
-      // get all items
-      if (order) {
-        // create an ordered list
-        items = [];
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            items.push(data[id]);
+          // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
+          else if(Hammer.NO_MOUSEEVENTS) {
+              types = [
+                  'touchstart',
+                  'touchmove',
+                  'touchend touchcancel'];
+          }
+          // for non pointer events browsers and mixed browsers,
+          // like chrome on windows8 touch laptop
+          else {
+              types = [
+                  'touchstart mousedown',
+                  'touchmove mousemove',
+                  'touchend touchcancel mouseup'];
           }
-        }
 
-        this._sort(items, order);
+          Hammer.EVENT_TYPES[Hammer.EVENT_START]  = types[0];
+          Hammer.EVENT_TYPES[Hammer.EVENT_MOVE]   = types[1];
+          Hammer.EVENT_TYPES[Hammer.EVENT_END]    = types[2];
+      },
 
-        for (i = 0, len = items.length; i < len; i++) {
-          ids[i] = items[i][this._fieldId];
-        }
-      }
-      else {
-        // create unordered list
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = data[id];
-            ids.push(item[this._fieldId]);
+
+      /**
+       * create touchlist depending on the event
+       * @param   {Object}    ev
+       * @param   {String}    eventType   used by the fakemultitouch plugin
+       */
+      getTouchList: function getTouchList(ev/*, eventType*/) {
+          // get the fake pointerEvent touchlist
+          if(Hammer.HAS_POINTEREVENTS) {
+              return Hammer.PointerEvent.getTouchList();
           }
-        }
-      }
-    }
+          // get the touchlist
+          else if(ev.touches) {
+              return ev.touches;
+          }
+          // make fake touchlist from mouse position
+          else {
+              return [{
+                  identifier: 1,
+                  pageX: ev.pageX,
+                  pageY: ev.pageY,
+                  target: ev.target
+              }];
+          }
+      },
 
-    return ids;
-  };
 
-  /**
-   * Returns the DataSet itself. Is overwritten for example by the DataView,
-   * which returns the DataSet it is connected to instead.
-   */
-  DataSet.prototype.getDataSet = function () {
-    return this;
-  };
+      /**
+       * collect event data for Hammer js
+       * @param   {HTMLElement}   element
+       * @param   {String}        eventType        like Hammer.EVENT_MOVE
+       * @param   {Object}        eventData
+       */
+      collectEventData: function collectEventData(element, eventType, ev) {
+          var touches = this.getTouchList(ev, eventType);
 
-  /**
-   * Execute a callback function for every item in the dataset.
-   * @param {function} callback
-   * @param {Object} [options]    Available options:
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] filter fields
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   */
-  DataSet.prototype.forEach = function (callback, options) {
-    var filter = options && options.filter,
-        type = options && options.type || this._options.type,
-        data = this._data,
-        item,
-        id;
+          // find out pointerType
+          var pointerType = Hammer.POINTER_TOUCH;
+          if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
+              pointerType = Hammer.POINTER_MOUSE;
+          }
 
-    if (options && options.order) {
-      // execute forEach on ordered list
-      var items = this.get(options);
+          return {
+              center      : Hammer.utils.getCenter(touches),
+              timeStamp   : new Date().getTime(),
+              target      : ev.target,
+              touches     : touches,
+              eventType   : eventType,
+              pointerType : pointerType,
+              srcEvent    : ev,
 
-      for (var i = 0, len = items.length; i < len; i++) {
-        item = items[i];
-        id = item[this._fieldId];
-        callback(item, id);
-      }
-    }
-    else {
-      // unordered
-      for (id in data) {
-        if (data.hasOwnProperty(id)) {
-          item = this._getItem(id, type);
-          if (!filter || filter(item)) {
-            callback(item, id);
-          }
-        }
-      }
-    }
-  };
+              /**
+               * prevent the browser default actions
+               * mostly used to disable scrolling of the browser
+               */
+              preventDefault: function() {
+                  if(this.srcEvent.preventManipulation) {
+                      this.srcEvent.preventManipulation();
+                  }
 
-  /**
-   * Map every item in the dataset.
-   * @param {function} callback
-   * @param {Object} [options]    Available options:
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] filter fields
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Object[]} mappedItems
-   */
-  DataSet.prototype.map = function (callback, options) {
-    var filter = options && options.filter,
-        type = options && options.type || this._options.type,
-        mappedItems = [],
-        data = this._data,
-        item;
-
-    // convert and filter items
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        item = this._getItem(id, type);
-        if (!filter || filter(item)) {
-          mappedItems.push(callback(item, id));
-        }
-      }
-    }
+                  if(this.srcEvent.preventDefault) {
+                      this.srcEvent.preventDefault();
+                  }
+              },
 
-    // order items
-    if (options && options.order) {
-      this._sort(mappedItems, options.order);
-    }
+              /**
+               * stop bubbling the event up to its parents
+               */
+              stopPropagation: function() {
+                  this.srcEvent.stopPropagation();
+              },
 
-    return mappedItems;
+              /**
+               * immediately stop gesture detection
+               * might be useful after a swipe was detected
+               * @return {*}
+               */
+              stopDetect: function() {
+                  return Hammer.detection.stopDetect();
+              }
+          };
+      }
   };
 
-  /**
-   * Filter the fields of an item
-   * @param {Object} item
-   * @param {String[]} fields     Field names
-   * @return {Object} filteredItem
-   * @private
-   */
-  DataSet.prototype._filterFields = function (item, fields) {
-    var filteredItem = {};
+  Hammer.PointerEvent = {
+      /**
+       * holds all pointers
+       * @type {Object}
+       */
+      pointers: {},
 
-    for (var field in item) {
-      if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
-        filteredItem[field] = item[field];
-      }
-    }
+      /**
+       * get a list of pointers
+       * @returns {Array}     touchlist
+       */
+      getTouchList: function() {
+          var self = this;
+          var touchlist = [];
 
-    return filteredItem;
-  };
+          // we can use forEach since pointerEvents only is in IE10
+          Object.keys(self.pointers).sort().forEach(function(id) {
+              touchlist.push(self.pointers[id]);
+          });
+          return touchlist;
+      },
 
-  /**
-   * Sort the provided array with items
-   * @param {Object[]} items
-   * @param {String | function} order      A field name or custom sort function.
-   * @private
-   */
-  DataSet.prototype._sort = function (items, order) {
-    if (util.isString(order)) {
-      // order by provided field name
-      var name = order; // field name
-      items.sort(function (a, b) {
-        var av = a[name];
-        var bv = b[name];
-        return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
-      });
-    }
-    else if (typeof order === 'function') {
-      // order by sort function
-      items.sort(order);
-    }
-    // TODO: extend order by an Object {field:String, direction:String}
-    //       where direction can be 'asc' or 'desc'
-    else {
-      throw new TypeError('Order must be a function or a string');
-    }
-  };
+      /**
+       * update the position of a pointer
+       * @param   {String}   type             Hammer.EVENT_END
+       * @param   {Object}   pointerEvent
+       */
+      updatePointer: function(type, pointerEvent) {
+          if(type == Hammer.EVENT_END) {
+              this.pointers = {};
+          }
+          else {
+              pointerEvent.identifier = pointerEvent.pointerId;
+              this.pointers[pointerEvent.pointerId] = pointerEvent;
+          }
 
-  /**
-   * Remove an object by pointer or by id
-   * @param {String | Number | Object | Array} id Object or id, or an array with
-   *                                              objects or ids to be removed
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} removedIds
-   */
-  DataSet.prototype.remove = function (id, senderId) {
-    var removedIds = [],
-        i, len, removedId;
+          return Object.keys(this.pointers).length;
+      },
 
-    if (Array.isArray(id)) {
-      for (i = 0, len = id.length; i < len; i++) {
-        removedId = this._remove(id[i]);
-        if (removedId != null) {
-          removedIds.push(removedId);
-        }
-      }
-    }
-    else {
-      removedId = this._remove(id);
-      if (removedId != null) {
-        removedIds.push(removedId);
-      }
-    }
+      /**
+       * check if ev matches pointertype
+       * @param   {String}        pointerType     Hammer.POINTER_MOUSE
+       * @param   {PointerEvent}  ev
+       */
+      matchType: function(pointerType, ev) {
+          if(!ev.pointerType) {
+              return false;
+          }
 
-    if (removedIds.length) {
-      this._trigger('remove', {items: removedIds}, senderId);
-    }
+          var types = {};
+          types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
+          types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
+          types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
+          return types[pointerType];
+      },
 
-    return removedIds;
-  };
 
-  /**
-   * Remove an item by its id
-   * @param {Number | String | Object} id   id or item
-   * @returns {Number | String | null} id
-   * @private
-   */
-  DataSet.prototype._remove = function (id) {
-    if (util.isNumber(id) || util.isString(id)) {
-      if (this._data[id]) {
-        delete this._data[id];
-        return id;
-      }
-    }
-    else if (id instanceof Object) {
-      var itemId = id[this._fieldId];
-      if (itemId && this._data[itemId]) {
-        delete this._data[itemId];
-        return itemId;
+      /**
+       * get events
+       */
+      getEvents: function() {
+          return [
+              'pointerdown MSPointerDown',
+              'pointermove MSPointerMove',
+              'pointerup pointercancel MSPointerUp MSPointerCancel'
+          ];
+      },
+
+      /**
+       * reset the list
+       */
+      reset: function() {
+          this.pointers = {};
       }
-    }
-    return null;
   };
 
-  /**
-   * Clear the data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} removedIds    The ids of all removed items
-   */
-  DataSet.prototype.clear = function (senderId) {
-    var ids = Object.keys(this._data);
 
-    this._data = {};
+  Hammer.utils = {
+      /**
+       * extend method,
+       * also used for cloning when dest is an empty object
+       * @param   {Object}    dest
+       * @param   {Object}    src
+  	 * @parm	{Boolean}	merge		do a merge
+       * @returns {Object}    dest
+       */
+      extend: function extend(dest, src, merge) {
+          for (var key in src) {
+  			if(dest[key] !== undefined && merge) {
+  				continue;
+  			}
+              dest[key] = src[key];
+          }
+          return dest;
+      },
 
-    this._trigger('remove', {items: ids}, senderId);
 
-    return ids;
-  };
+      /**
+       * find if a node is in the given parent
+       * used for event delegation tricks
+       * @param   {HTMLElement}   node
+       * @param   {HTMLElement}   parent
+       * @returns {boolean}       has_parent
+       */
+      hasParent: function(node, parent) {
+          while(node){
+              if(node == parent) {
+                  return true;
+              }
+              node = node.parentNode;
+          }
+          return false;
+      },
 
-  /**
-   * Find the item with maximum value of a specified field
-   * @param {String} field
-   * @return {Object | null} item  Item containing max value, or null if no items
-   */
-  DataSet.prototype.max = function (field) {
-    var data = this._data,
-        max = null,
-        maxField = null;
 
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        var item = data[id];
-        var itemField = item[field];
-        if (itemField != null && (!max || itemField > maxField)) {
-          max = item;
-          maxField = itemField;
-        }
-      }
-    }
+      /**
+       * get the center of all the touches
+       * @param   {Array}     touches
+       * @returns {Object}    center
+       */
+      getCenter: function getCenter(touches) {
+          var valuesX = [], valuesY = [];
 
-    return max;
-  };
+          for(var t= 0,len=touches.length; t<len; t++) {
+              valuesX.push(touches[t].pageX);
+              valuesY.push(touches[t].pageY);
+          }
 
-  /**
-   * Find the item with minimum value of a specified field
-   * @param {String} field
-   * @return {Object | null} item  Item containing max value, or null if no items
-   */
-  DataSet.prototype.min = function (field) {
-    var data = this._data,
-        min = null,
-        minField = null;
+          return {
+              pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
+              pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
+          };
+      },
 
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        var item = data[id];
-        var itemField = item[field];
-        if (itemField != null && (!min || itemField < minField)) {
-          min = item;
-          minField = itemField;
-        }
-      }
-    }
 
-    return min;
-  };
+      /**
+       * calculate the velocity between two points
+       * @param   {Number}    delta_time
+       * @param   {Number}    delta_x
+       * @param   {Number}    delta_y
+       * @returns {Object}    velocity
+       */
+      getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
+          return {
+              x: Math.abs(delta_x / delta_time) || 0,
+              y: Math.abs(delta_y / delta_time) || 0
+          };
+      },
 
-  /**
-   * Find all distinct values of a specified field
-   * @param {String} field
-   * @return {Array} values  Array containing all distinct values. If data items
-   *                         do not contain the specified field are ignored.
-   *                         The returned array is unordered.
-   */
-  DataSet.prototype.distinct = function (field) {
-    var data = this._data;
-    var values = [];
-    var fieldType = this._options.type && this._options.type[field] || null;
-    var count = 0;
-    var i;
 
-    for (var prop in data) {
-      if (data.hasOwnProperty(prop)) {
-        var item = data[prop];
-        var value = item[field];
-        var exists = false;
-        for (i = 0; i < count; i++) {
-          if (values[i] == value) {
-            exists = true;
-            break;
-          }
-        }
-        if (!exists && (value !== undefined)) {
-          values[count] = value;
-          count++;
-        }
-      }
-    }
+      /**
+       * calculate the angle between two coordinates
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {Number}    angle
+       */
+      getAngle: function getAngle(touch1, touch2) {
+          var y = touch2.pageY - touch1.pageY,
+              x = touch2.pageX - touch1.pageX;
+          return Math.atan2(y, x) * 180 / Math.PI;
+      },
 
-    if (fieldType) {
-      for (i = 0; i < values.length; i++) {
-        values[i] = util.convert(values[i], fieldType);
-      }
-    }
 
-    return values;
-  };
+      /**
+       * angle to direction define
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {String}    direction constant, like Hammer.DIRECTION_LEFT
+       */
+      getDirection: function getDirection(touch1, touch2) {
+          var x = Math.abs(touch1.pageX - touch2.pageX),
+              y = Math.abs(touch1.pageY - touch2.pageY);
 
-  /**
-   * Add a single item. Will fail when an item with the same id already exists.
-   * @param {Object} item
-   * @return {String} id
-   * @private
-   */
-  DataSet.prototype._addItem = function (item) {
-    var id = item[this._fieldId];
+          if(x >= y) {
+              return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+          }
+          else {
+              return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+          }
+      },
 
-    if (id != undefined) {
-      // check whether this id is already taken
-      if (this._data[id]) {
-        // item already exists
-        throw new Error('Cannot add item: item with id ' + id + ' already exists');
-      }
-    }
-    else {
-      // generate an id
-      id = util.randomUUID();
-      item[this._fieldId] = id;
-    }
 
-    var d = {};
-    for (var field in item) {
-      if (item.hasOwnProperty(field)) {
-        var fieldType = this._type[field];  // type may be undefined
-        d[field] = util.convert(item[field], fieldType);
-      }
-    }
-    this._data[id] = d;
+      /**
+       * calculate the distance between two touches
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {Number}    distance
+       */
+      getDistance: function getDistance(touch1, touch2) {
+          var x = touch2.pageX - touch1.pageX,
+              y = touch2.pageY - touch1.pageY;
+          return Math.sqrt((x*x) + (y*y));
+      },
 
-    return id;
-  };
 
-  /**
-   * Get an item. Fields can be converted to a specific type
-   * @param {String} id
-   * @param {Object.<String, String>} [types]  field types to convert
-   * @return {Object | null} item
-   * @private
-   */
-  DataSet.prototype._getItem = function (id, types) {
-    var field, value;
+      /**
+       * calculate the scale factor between two touchLists (fingers)
+       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+       * @param   {Array}     start
+       * @param   {Array}     end
+       * @returns {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;
+      },
 
-    // get the item from the dataset
-    var raw = this._data[id];
-    if (!raw) {
-      return null;
-    }
 
-    // convert the items field types
-    var converted = {};
-    if (types) {
-      for (field in raw) {
-        if (raw.hasOwnProperty(field)) {
-          value = raw[field];
-          converted[field] = util.convert(value, types[field]);
-        }
-      }
-    }
-    else {
-      // no field types specified, no converting needed
-      for (field in raw) {
-        if (raw.hasOwnProperty(field)) {
-          value = raw[field];
-          converted[field] = value;
-        }
-      }
-    }
-    return converted;
-  };
+      /**
+       * calculate the rotation degrees between two touchLists (fingers)
+       * @param   {Array}     start
+       * @param   {Array}     end
+       * @returns {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;
+      },
 
-  /**
-   * Update a single item: merge with existing item.
-   * Will fail when the item has no id, or when there does not exist an item
-   * with the same id.
-   * @param {Object} item
-   * @return {String} id
-   * @private
-   */
-  DataSet.prototype._updateItem = function (item) {
-    var id = item[this._fieldId];
-    if (id == undefined) {
-      throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
-    }
-    var d = this._data[id];
-    if (!d) {
-      // item doesn't exist
-      throw new Error('Cannot update item: no item with id ' + id + ' found');
-    }
 
-    // merge with current item
-    for (var field in item) {
-      if (item.hasOwnProperty(field)) {
-        var fieldType = this._type[field];  // type may be undefined
-        d[field] = util.convert(item[field], fieldType);
-      }
-    }
-
-    return id;
-  };
-
-  /**
-   * Get an array with the column names of a Google DataTable
-   * @param {DataTable} dataTable
-   * @return {String[]} columnNames
-   * @private
-   */
-  DataSet.prototype._getColumnNames = function (dataTable) {
-    var columns = [];
-    for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
-      columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
-    }
-    return columns;
-  };
-
-  /**
-   * Append an item as a row to the dataTable
-   * @param dataTable
-   * @param columns
-   * @param item
-   * @private
-   */
-  DataSet.prototype._appendRow = function (dataTable, columns, item) {
-    var row = dataTable.addRow();
-
-    for (var col = 0, cols = columns.length; col < cols; col++) {
-      var field = columns[col];
-      dataTable.setValue(row, col, item[field]);
-    }
-  };
+      /**
+       * boolean if the direction is vertical
+       * @param    {String}    direction
+       * @returns  {Boolean}   is_vertical
+       */
+      isVertical: function isVertical(direction) {
+          return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
+      },
 
-  module.exports = DataSet;
 
+      /**
+       * stop browser default behavior with css props
+       * @param   {HtmlElement}   element
+       * @param   {Object}        css_props
+       */
+      stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
+          var prop,
+              vendors = ['webkit','khtml','moz','ms','o',''];
 
-/***/ },
-/* 4 */
-/***/ function(module, exports, __webpack_require__) {
+          if(!css_props || !element.style) {
+              return;
+          }
 
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
+          // with css properties for modern browsers
+          for(var i = 0; i < vendors.length; i++) {
+              for(var p in css_props) {
+                  if(css_props.hasOwnProperty(p)) {
+                      prop = p;
 
-  /**
-   * DataView
-   *
-   * a dataview offers a filtered view on a dataset or an other dataview.
-   *
-   * @param {DataSet | DataView} data
-   * @param {Object} [options]   Available options: see method get
-   *
-   * @constructor DataView
-   */
-  function DataView (data, options) {
-    this._data = null;
-    this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
-    this._options = options || {};
-    this._fieldId = 'id'; // name of the field containing id
-    this._subscribers = {}; // event subscribers
+                      // vender prefix at the property
+                      if(vendors[i]) {
+                          prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
+                      }
 
-    var me = this;
-    this.listener = function () {
-      me._onEvent.apply(me, arguments);
-    };
+                      // set the style
+                      element.style[prop] = css_props[p];
+                  }
+              }
+          }
 
-    this.setData(data);
-  }
+          // also the disable onselectstart
+          if(css_props.userSelect == 'none') {
+              element.onselectstart = function() {
+                  return false;
+              };
+          }
+      }
+  };
 
-  // TODO: implement a function .config() to dynamically update things like configured filter
-  // and trigger changes accordingly
+  Hammer.detection = {
+      // contains all registred Hammer.gestures in the correct order
+      gestures: [],
 
-  /**
-   * Set a data source for the view
-   * @param {DataSet | DataView} data
-   */
-  DataView.prototype.setData = function (data) {
-    var ids, i, len;
+      // data of the current Hammer.gesture detection session
+      current: null,
 
-    if (this._data) {
-      // unsubscribe from current dataset
-      if (this._data.unsubscribe) {
-        this._data.unsubscribe('*', this.listener);
-      }
+      // the previous Hammer.gesture session data
+      // is a full clone of the previous gesture.current object
+      previous: null,
 
-      // trigger a remove of all items in memory
-      ids = [];
-      for (var id in this._ids) {
-        if (this._ids.hasOwnProperty(id)) {
-          ids.push(id);
-        }
-      }
-      this._ids = {};
-      this._trigger('remove', {items: ids});
-    }
+      // when this becomes true, no gestures are fired
+      stopped: false,
 
-    this._data = data;
 
-    if (this._data) {
-      // update fieldId
-      this._fieldId = this._options.fieldId ||
-          (this._data && this._data.options && this._data.options.fieldId) ||
-          'id';
+      /**
+       * start Hammer.gesture detection
+       * @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;
+          }
 
-      // trigger an add of all added items
-      ids = this._data.getIds({filter: this._options && this._options.filter});
-      for (i = 0, len = ids.length; i < len; i++) {
-        id = ids[i];
-        this._ids[id] = true;
-      }
-      this._trigger('add', {items: ids});
+          this.stopped = false;
 
-      // subscribe to new dataset
-      if (this._data.on) {
-        this._data.on('*', this.listener);
-      }
-    }
-  };
+          this.current = {
+              inst        : inst, // reference to HammerInstance we're working for
+              startEvent  : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
+              lastEvent   : false, // last eventData
+              name        : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
+          };
 
-  /**
-   * Get data from the data view
-   *
-   * Usage:
-   *
-   *     get()
-   *     get(options: Object)
-   *     get(options: Object, data: Array | DataTable)
-   *
-   *     get(id: Number)
-   *     get(id: Number, options: Object)
-   *     get(id: Number, options: Object, data: Array | DataTable)
-   *
-   *     get(ids: Number[])
-   *     get(ids: Number[], options: Object)
-   *     get(ids: Number[], options: Object, data: Array | DataTable)
-   *
-   * Where:
-   *
-   * {Number | String} id         The id of an item
-   * {Number[] | String{}} ids    An array with ids of items
-   * {Object} options             An Object with options. Available options:
-   *                              {String} [type] Type of data to be returned. Can
-   *                                              be 'DataTable' or 'Array' (default)
-   *                              {Object.<String, String>} [convert]
-   *                              {String[]} [fields] field names to be returned
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * {Array | DataTable} [data]   If provided, items will be appended to this
-   *                              array or table. Required in case of Google
-   *                              DataTable.
-   * @param args
-   */
-  DataView.prototype.get = function (args) {
-    var me = this;
+          this.detect(eventData);
+      },
 
-    // parse the arguments
-    var ids, options, data;
-    var firstType = util.getType(arguments[0]);
-    if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
-      // get(id(s) [, options] [, data])
-      ids = arguments[0];  // can be a single id or an array with ids
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else {
-      // get([, options] [, data])
-      options = arguments[0];
-      data = arguments[1];
-    }
 
-    // extend the options with the default options and provided options
-    var viewOptions = util.extend({}, this._options, options);
+      /**
+       * Hammer.gesture detection
+       * @param   {Object}    eventData
+       * @param   {Object}    eventData
+       */
+      detect: function detect(eventData) {
+          if(!this.current || this.stopped) {
+              return;
+          }
 
-    // create a combined filter method when needed
-    if (this._options.filter && options && options.filter) {
-      viewOptions.filter = function (item) {
-        return me._options.filter(item) && options.filter(item);
-      }
-    }
+          // extend event data with calculations about scale, distance etc
+          eventData = this.extendEventData(eventData);
 
-    // build up the call to the linked data set
-    var getArguments = [];
-    if (ids != undefined) {
-      getArguments.push(ids);
-    }
-    getArguments.push(viewOptions);
-    getArguments.push(data);
+          // instance options
+          var inst_options = this.current.inst.options;
 
-    return this._data && this._data.get.apply(this._data, getArguments);
-  };
+          // call Hammer.gesture handlers
+          for(var g=0,len=this.gestures.length; g<len; g++) {
+              var gesture = this.gestures[g];
 
-  /**
-   * Get ids of all items or from a filtered set of items.
-   * @param {Object} [options]    An Object with options. Available options:
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Array} ids
-   */
-  DataView.prototype.getIds = function (options) {
-    var ids;
+              // only when the instance options have enabled this gesture
+              if(!this.stopped && inst_options[gesture.name] !== false) {
+                  // if a handler returns false, we stop with the detection
+                  if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
+                      this.stopDetect();
+                      break;
+                  }
+              }
+          }
 
-    if (this._data) {
-      var defaultFilter = this._options.filter;
-      var filter;
+          // store as previous event event
+          if(this.current) {
+              this.current.lastEvent = eventData;
+          }
 
-      if (options && options.filter) {
-        if (defaultFilter) {
-          filter = function (item) {
-            return defaultFilter(item) && options.filter(item);
+          // endevent, but not the last touch, so dont stop
+          if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
+              this.stopDetect();
           }
-        }
-        else {
-          filter = options.filter;
-        }
-      }
-      else {
-        filter = defaultFilter;
-      }
 
-      ids = this._data.getIds({
-        filter: filter,
-        order: options && options.order
-      });
-    }
-    else {
-      ids = [];
-    }
+          return eventData;
+      },
 
-    return ids;
-  };
 
-  /**
-   * Get the DataSet to which this DataView is connected. In case there is a chain
-   * of multiple DataViews, the root DataSet of this chain is returned.
-   * @return {DataSet} dataSet
-   */
-  DataView.prototype.getDataSet = function () {
-    var dataSet = this;
-    while (dataSet instanceof DataView) {
-      dataSet = dataSet._data;
-    }
-    return dataSet || null;
-  };
+      /**
+       * 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
+       */
+      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 = Hammer.utils.extend({}, this.current);
 
-  /**
-   * Event listener. Will propagate all events from the connected data set to
-   * the subscribers of the DataView, but will filter the items and only trigger
-   * when there are changes in the filtered data set.
-   * @param {String} event
-   * @param {Object | null} params
-   * @param {String} senderId
-   * @private
-   */
-  DataView.prototype._onEvent = function (event, params, senderId) {
-    var i, len, id, item,
-        ids = params && params.items,
-        data = this._data,
-        added = [],
-        updated = [],
-        removed = [];
+          // reset the current
+          this.current = null;
 
-    if (ids && data) {
-      switch (event) {
-        case 'add':
-          // filter the ids of the added items
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            item = this.get(id);
-            if (item) {
-              this._ids[id] = true;
-              added.push(id);
-            }
-          }
+          // stopped!
+          this.stopped = true;
+      },
 
-          break;
 
-        case 'update':
-          // determine the event from the views viewpoint: an updated
-          // item can be added, updated, or removed from this view.
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            item = this.get(id);
+      /**
+       * extend eventData for Hammer.gestures
+       * @param   {Object}   ev
+       * @returns {Object}   ev
+       */
+      extendEventData: function extendEventData(ev) {
+          var startEv = this.current.startEvent;
 
-            if (item) {
-              if (this._ids[id]) {
-                updated.push(id);
-              }
-              else {
-                this._ids[id] = true;
-                added.push(id);
-              }
-            }
-            else {
-              if (this._ids[id]) {
-                delete this._ids[id];
-                removed.push(id);
-              }
-              else {
-                // nothing interesting for me :-(
+          // if the touches change, set the new touches over the startEvent touches
+          // this because touchevents don't have all the touches on touchstart, or the
+          // user must place his fingers at the EXACT same time on the screen, which is not realistic
+          // but, sometimes it happens that both fingers are touching at the EXACT same time
+          if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
+              // extend 1 level deep to get the touchlist with the touch objects
+              startEv.touches = [];
+              for(var i=0,len=ev.touches.length; i<len; i++) {
+                  startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
               }
-            }
           }
 
-          break;
+          var delta_time = ev.timeStamp - startEv.timeStamp,
+              delta_x = ev.center.pageX - startEv.center.pageX,
+              delta_y = ev.center.pageY - startEv.center.pageY,
+              velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
 
-        case 'remove':
-          // filter the ids of the removed items
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            if (this._ids[id]) {
-              delete this._ids[id];
-              removed.push(id);
-            }
-          }
+          Hammer.utils.extend(ev, {
+              deltaTime   : delta_time,
 
-          break;
-      }
+              deltaX      : delta_x,
+              deltaY      : delta_y,
 
-      if (added.length) {
-        this._trigger('add', {items: added}, senderId);
-      }
-      if (updated.length) {
-        this._trigger('update', {items: updated}, senderId);
-      }
-      if (removed.length) {
-        this._trigger('remove', {items: removed}, senderId);
-      }
-    }
-  };
+              velocityX   : velocity.x,
+              velocityY   : velocity.y,
 
-  // copy subscription functionality from DataSet
-  DataView.prototype.on = DataSet.prototype.on;
-  DataView.prototype.off = DataSet.prototype.off;
-  DataView.prototype._trigger = DataSet.prototype._trigger;
+              distance    : Hammer.utils.getDistance(startEv.center, ev.center),
+              angle       : Hammer.utils.getAngle(startEv.center, ev.center),
+              direction   : Hammer.utils.getDirection(startEv.center, ev.center),
 
-  // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
-  DataView.prototype.subscribe = DataView.prototype.on;
-  DataView.prototype.unsubscribe = DataView.prototype.off;
+              scale       : Hammer.utils.getScale(startEv.touches, ev.touches),
+              rotation    : Hammer.utils.getRotation(startEv.touches, ev.touches),
 
-  module.exports = DataView;
+              startEvent  : startEv
+          });
 
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
+          return ev;
+      },
 
-  var Emitter = __webpack_require__(41);
-  var Hammer = __webpack_require__(50);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Range = __webpack_require__(8);
-  var TimeAxis = __webpack_require__(21);
-  var CurrentTime = __webpack_require__(13);
-  var CustomTime = __webpack_require__(14);
-  var ItemSet = __webpack_require__(18);
 
-  /**
-   * Create a timeline visualization
-   * @param {HTMLElement} container
-   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
-   * @param {Object} [options]  See Timeline.setOptions for the available options.
-   * @constructor
-   */
-  function Timeline (container, items, options) {
-    if (!(this instanceof Timeline)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+      /**
+       * register new gesture
+       * @param   {Object}    gesture object, see gestures.js for documentation
+       * @returns {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 me = this;
-    this.defaultOptions = {
-      start: null,
-      end:   null,
+          // extend Hammer default options with the Hammer.gesture options
+          Hammer.utils.extend(Hammer.defaults, options, true);
 
-      autoResize: true,
+          // set its index
+          gesture.index = gesture.index || 1000;
 
-      orientation: 'bottom',
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
-    };
-    this.options = util.deepExtend({}, this.defaultOptions);
+          // add Hammer.gesture to the list
+          this.gestures.push(gesture);
 
-    // Create the DOM, props, and emitter
-    this._create(container);
+          // 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;
+          });
 
-    // all components listed here will be repainted automatically
-    this.components = [];
-
-    this.body = {
-      dom: this.dom,
-      domProps: this.props,
-      emitter: {
-        on: this.on.bind(this),
-        off: this.off.bind(this),
-        emit: this.emit.bind(this)
-      },
-      util: {
-        snap: null, // will be specified after TimeAxis is created
-        toScreen: me._toScreen.bind(me),
-        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
-        toTime: me._toTime.bind(me),
-        toGlobalTime : me._toGlobalTime.bind(me)
+          return this.gestures;
       }
-    };
+  };
 
-    // range
-    this.range = new Range(this.body);
-    this.components.push(this.range);
-    this.body.range = this.range;
 
-    // time axis
-    this.timeAxis = new TimeAxis(this.body);
-    this.components.push(this.timeAxis);
-    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+  Hammer.gestures = Hammer.gestures || {};
 
-    // current time bar
-    this.currentTime = new CurrentTime(this.body);
-    this.components.push(this.currentTime);
+  /**
+   * Custom gestures
+   * ==============================
+   *
+   * Gesture object
+   * --------------------
+   * The object structure of a gesture:
+   *
+   * { name: 'mygesture',
+   *   index: 1337,
+   *   defaults: {
+   *     mygesture_option: true
+   *   }
+   *   handler: function(type, ev, inst) {
+   *     // trigger gesture event
+   *     inst.trigger(this.name, ev);
+   *   }
+   * }
 
-    // custom time bar
-    // Note: time bar will be attached in this.setOptions when selected
-    this.customTime = new CustomTime(this.body);
-    this.components.push(this.customTime);
+   * @param   {String}    name
+   * this should be the name of the gesture, lowercase
+   * it is also being used to disable/enable the gesture per instance config.
+   *
+   * @param   {Number}    [index=1000]
+   * the index of the gesture, where it is going to be in the stack of gestures detection
+   * like when you build an gesture that depends on the drag gesture, it is a good
+   * idea to place it after the index of the drag gesture.
+   *
+   * @param   {Object}    [defaults={}]
+   * the default settings of the gesture. these are added to the instance settings,
+   * and can be overruled per instance. you can also add the name of the gesture,
+   * but this is also added by default (and set to true).
+   *
+   * @param   {Function}  handler
+   * this handles the gesture detection of your custom gesture and receives the
+   * following arguments:
+   *
+   *      @param  {Object}    eventData
+   *      event data containing the following properties:
+   *          timeStamp   {Number}        time the event occurred
+   *          target      {HTMLElement}   target element
+   *          touches     {Array}         touches (fingers, pointers, mouse) on the screen
+   *          pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
+   *          center      {Object}        center position of the touches. contains pageX and pageY
+   *          deltaTime   {Number}        the total time of the touches in the screen
+   *          deltaX      {Number}        the delta on x axis we haved moved
+   *          deltaY      {Number}        the delta on y axis we haved moved
+   *          velocityX   {Number}        the velocity on the x
+   *          velocityY   {Number}        the velocity on y
+   *          angle       {Number}        the angle we are moving
+   *          direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
+   *          distance    {Number}        the distance we haved moved
+   *          scale       {Number}        scaling of the touches, needs 2 touches
+   *          rotation    {Number}        rotation of the touches, needs 2 touches *
+   *          eventType   {String}        matches Hammer.EVENT_START|MOVE|END
+   *          srcEvent    {Object}        the source event, like TouchStart or MouseDown *
+   *          startEvent  {Object}        contains the same properties as above,
+   *                                      but from the first touch. this is used to calculate
+   *                                      distances, deltaTime, scaling etc
+   *
+   *      @param  {Hammer.Instance}    inst
+   *      the instance we are doing the detection for. you can get the options from
+   *      the inst.options object and trigger the gesture event by calling inst.trigger
+   *
+   *
+   * Handle gestures
+   * --------------------
+   * inside the handler you can get/set Hammer.detection.current. This is the current
+   * detection session. It has the following properties
+   *      @param  {String}    name
+   *      contains the name of the gesture we have detected. it has not a real function,
+   *      only to check in other gestures if something is detected.
+   *      like in the drag gesture we set it to 'drag' and in the swipe gesture we can
+   *      check if the current gesture is 'drag' by accessing Hammer.detection.current.name
+   *
+   *      @readonly
+   *      @param  {Hammer.Instance}    inst
+   *      the instance we do the detection for
+   *
+   *      @readonly
+   *      @param  {Object}    startEvent
+   *      contains the properties of the first gesture detection in this session.
+   *      Used for calculations about timing, distance, etc.
+   *
+   *      @readonly
+   *      @param  {Object}    lastEvent
+   *      contains all the properties of the last gesture detect in this session.
+   *
+   * after the gesture detection session has been completed (user has released the screen)
+   * the Hammer.detection.current object is copied into Hammer.detection.previous,
+   * this is usefull for gestures like doubletap, where you need to know if the
+   * previous gesture was a tap
+   *
+   * options that have been set by the instance can be received by calling inst.options
+   *
+   * You can trigger a gesture event by calling inst.trigger("mygesture", event).
+   * The first param is the name of your gesture, the second the event argument
+   *
+   *
+   * Register gestures
+   * --------------------
+   * When an gesture is added to the Hammer.gestures object, it is auto registered
+   * at the setup of the first Hammer instance. You can also call Hammer.detection.register
+   * manually and pass your gesture object as a param
+   *
+   */
 
-    // item set
-    this.itemSet = new ItemSet(this.body);
-    this.components.push(this.itemSet);
+  /**
+   * Hold
+   * Touch stays at the same place for x time
+   * @events  hold
+   */
+  Hammer.gestures.Hold = {
+      name: 'hold',
+      index: 10,
+      defaults: {
+          hold_timeout	: 500,
+          hold_threshold	: 1
+      },
+      timer: null,
+      handler: function holdGesture(ev, inst) {
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  // clear any running timers
+                  clearTimeout(this.timer);
 
-    this.itemsData = null;      // DataSet
-    this.groupsData = null;     // DataSet
+                  // set the gesture so we can check in the timeout if it still is
+                  Hammer.detection.current.name = this.name;
 
-    // apply options
-    if (options) {
-      this.setOptions(options);
-    }
+                  // set timer and if after the timeout it still is hold,
+                  // we trigger the hold event
+                  this.timer = setTimeout(function() {
+                      if(Hammer.detection.current.name == 'hold') {
+                          inst.trigger('hold', ev);
+                      }
+                  }, inst.options.hold_timeout);
+                  break;
 
-    // create itemset
-    if (items) {
-      this.setItems(items);
-    }
-    else {
-      this.redraw();
-    }
-  }
+              // when you move or end we clear the timer
+              case Hammer.EVENT_MOVE:
+                  if(ev.distance > inst.options.hold_threshold) {
+                      clearTimeout(this.timer);
+                  }
+                  break;
+
+              case Hammer.EVENT_END:
+                  clearTimeout(this.timer);
+                  break;
+          }
+      }
+  };
 
-  // turn Timeline into an event emitter
-  Emitter(Timeline.prototype);
 
   /**
-   * Create the main DOM for the Timeline: a root panel containing left, right,
-   * top, bottom, content, and background panel.
-   * @param {Element} container  The container element where the Timeline will
-   *                             be attached.
-   * @private
+   * Tap/DoubleTap
+   * Quick touch at a place or double at the same place
+   * @events  tap, doubletap
    */
-  Timeline.prototype._create = function (container) {
-    this.dom = {};
+  Hammer.gestures.Tap = {
+      name: 'tap',
+      index: 100,
+      defaults: {
+          tap_max_touchtime	: 250,
+          tap_max_distance	: 10,
+  		tap_always			: true,
+          doubletap_distance	: 20,
+          doubletap_interval	: 300
+      },
+      handler: function tapGesture(ev, inst) {
+          if(ev.eventType == Hammer.EVENT_END) {
+              // previous gesture, for the double tap since these are two different gesture detections
+              var prev = Hammer.detection.previous,
+  				did_doubletap = false;
 
-    this.dom.root                 = document.createElement('div');
-    this.dom.background           = document.createElement('div');
-    this.dom.backgroundVertical   = document.createElement('div');
-    this.dom.backgroundHorizontal = document.createElement('div');
-    this.dom.centerContainer      = document.createElement('div');
-    this.dom.leftContainer        = document.createElement('div');
-    this.dom.rightContainer       = document.createElement('div');
-    this.dom.center               = document.createElement('div');
-    this.dom.left                 = document.createElement('div');
-    this.dom.right                = document.createElement('div');
-    this.dom.top                  = document.createElement('div');
-    this.dom.bottom               = document.createElement('div');
-    this.dom.shadowTop            = document.createElement('div');
-    this.dom.shadowBottom         = document.createElement('div');
-    this.dom.shadowTopLeft        = document.createElement('div');
-    this.dom.shadowBottomLeft     = document.createElement('div');
-    this.dom.shadowTopRight       = document.createElement('div');
-    this.dom.shadowBottomRight    = document.createElement('div');
+              // when the touchtime is higher then the max touch time
+              // or when the moving distance is too much
+              if(ev.deltaTime > inst.options.tap_max_touchtime ||
+                  ev.distance > inst.options.tap_max_distance) {
+                  return;
+              }
 
-    this.dom.background.className           = 'vispanel background';
-    this.dom.backgroundVertical.className   = 'vispanel background vertical';
-    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-    this.dom.centerContainer.className      = 'vispanel center';
-    this.dom.leftContainer.className        = 'vispanel left';
-    this.dom.rightContainer.className       = 'vispanel right';
-    this.dom.top.className                  = 'vispanel top';
-    this.dom.bottom.className               = 'vispanel bottom';
-    this.dom.left.className                 = 'content';
-    this.dom.center.className               = 'content';
-    this.dom.right.className                = 'content';
-    this.dom.shadowTop.className            = 'shadow top';
-    this.dom.shadowBottom.className         = 'shadow bottom';
-    this.dom.shadowTopLeft.className        = 'shadow top';
-    this.dom.shadowBottomLeft.className     = 'shadow bottom';
-    this.dom.shadowTopRight.className       = 'shadow top';
-    this.dom.shadowBottomRight.className    = 'shadow bottom';
+              // check if double tap
+              if(prev && prev.name == 'tap' &&
+                  (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
+                  ev.distance < inst.options.doubletap_distance) {
+  				inst.trigger('doubletap', ev);
+  				did_doubletap = true;
+              }
 
-    this.dom.root.appendChild(this.dom.background);
-    this.dom.root.appendChild(this.dom.backgroundVertical);
-    this.dom.root.appendChild(this.dom.backgroundHorizontal);
-    this.dom.root.appendChild(this.dom.centerContainer);
-    this.dom.root.appendChild(this.dom.leftContainer);
-    this.dom.root.appendChild(this.dom.rightContainer);
-    this.dom.root.appendChild(this.dom.top);
-    this.dom.root.appendChild(this.dom.bottom);
+  			// do a single tap
+  			if(!did_doubletap || inst.options.tap_always) {
+  				Hammer.detection.current.name = 'tap';
+  				inst.trigger(Hammer.detection.current.name, ev);
+  			}
+          }
+      }
+  };
 
-    this.dom.centerContainer.appendChild(this.dom.center);
-    this.dom.leftContainer.appendChild(this.dom.left);
-    this.dom.rightContainer.appendChild(this.dom.right);
 
-    this.dom.centerContainer.appendChild(this.dom.shadowTop);
-    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
-    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
-    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
-    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
-    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+  /**
+   * Swipe
+   * triggers swipe events when the end velocity is above the threshold
+   * @events  swipe, swipeleft, swiperight, swipeup, swipedown
+   */
+  Hammer.gestures.Swipe = {
+      name: 'swipe',
+      index: 40,
+      defaults: {
+          // set 0 for unlimited, but this can conflict with transform
+          swipe_max_touches  : 1,
+          swipe_velocity     : 0.7
+      },
+      handler: function swipeGesture(ev, inst) {
+          if(ev.eventType == Hammer.EVENT_END) {
+              // max touches
+              if(inst.options.swipe_max_touches > 0 &&
+                  ev.touches.length > inst.options.swipe_max_touches) {
+                  return;
+              }
 
-    this.on('rangechange', this.redraw.bind(this));
-    this.on('change', this.redraw.bind(this));
-    this.on('touch', this._onTouch.bind(this));
-    this.on('pinch', this._onPinch.bind(this));
-    this.on('dragstart', this._onDragStart.bind(this));
-    this.on('drag', this._onDrag.bind(this));
+              // when the distance we moved is too small we skip this gesture
+              // or we can be already in dragging
+              if(ev.velocityX > inst.options.swipe_velocity ||
+                  ev.velocityY > inst.options.swipe_velocity) {
+                  // trigger swipe events
+                  inst.trigger(this.name, ev);
+                  inst.trigger(this.name + ev.direction, ev);
+              }
+          }
+      }
+  };
 
-    // create event listeners for all interesting events, these events will be
-    // emitted via emitter
-    this.hammer = Hammer(this.dom.root, {
-      prevent_default: true
-    });
-    this.listeners = {};
 
-    var me = this;
-    var events = [
-      'touch', 'pinch',
-      'tap', 'doubletap', 'hold',
-      'dragstart', 'drag', 'dragend',
-      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
-    ];
-    events.forEach(function (event) {
-      var listener = function () {
-        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-        me.emit.apply(me, args);
-      };
-      me.hammer.on(event, listener);
-      me.listeners[event] = listener;
-    });
+  /**
+   * Drag
+   * Move with x fingers (default 1) around on the page. Blocking the scrolling when
+   * moving left and right is a good practice. When all the drag events are blocking
+   * you disable scrolling on that area.
+   * @events  drag, drapleft, dragright, dragup, dragdown
+   */
+  Hammer.gestures.Drag = {
+      name: 'drag',
+      index: 50,
+      defaults: {
+          drag_min_distance : 10,
+          // set 0 for unlimited, but this can conflict with transform
+          drag_max_touches  : 1,
+          // 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
+          drag_block_horizontal   : false,
+          drag_block_vertical     : false,
+          // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
+          // It disallows vertical directions if the initial direction was horizontal, and vice versa.
+          drag_lock_to_axis       : false,
+          // drag lock only kicks in when distance > drag_lock_min_distance
+          // This way, locking occurs only when the distance has become large enough to reliably determine the direction
+          drag_lock_min_distance : 25
+      },
+      triggered: false,
+      handler: function dragGesture(ev, inst) {
+          // current gesture isnt drag, but dragged is true
+          // this means an other gesture is busy. now call dragend
+          if(Hammer.detection.current.name != this.name && this.triggered) {
+              inst.trigger(this.name +'end', ev);
+              this.triggered = false;
+              return;
+          }
 
-    // size properties of each of the panels
-    this.props = {
-      root: {},
-      background: {},
-      centerContainer: {},
-      leftContainer: {},
-      rightContainer: {},
-      center: {},
-      left: {},
-      right: {},
-      top: {},
-      bottom: {},
-      border: {},
-      scrollTop: 0,
-      scrollTopMin: 0
-    };
-    this.touch = {}; // store state information needed for touch events
+          // max touches
+          if(inst.options.drag_max_touches > 0 &&
+              ev.touches.length > inst.options.drag_max_touches) {
+              return;
+          }
 
-    // attach the root panel to the provided container
-    if (!container) throw new Error('No container provided');
-    container.appendChild(this.dom.root);
-  };
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  this.triggered = false;
+                  break;
 
-  /**
-   * Destroy the Timeline, clean up all DOM elements and event listeners.
-   */
-  Timeline.prototype.destroy = function () {
-    // unbind datasets
-    this.clear();
+              case Hammer.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.drag_min_distance &&
+                      Hammer.detection.current.name != this.name) {
+                      return;
+                  }
 
-    // remove all event listeners
-    this.off();
+                  // we are dragging!
+                  Hammer.detection.current.name = this.name;
 
-    // stop checking for changed size
-    this._stopAutoResize();
+                  // lock drag to axis?
+                  if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
+                      ev.drag_locked_to_axis = true;
+                  }
+                  var last_direction = Hammer.detection.current.lastEvent.direction;
+                  if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
+                      // keep direction on the axis that the drag gesture started on
+                      if(Hammer.utils.isVertical(last_direction)) {
+                          ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+                      }
+                      else {
+                          ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+                      }
+                  }
 
-    // remove from DOM
-    if (this.dom.root.parentNode) {
-      this.dom.root.parentNode.removeChild(this.dom.root);
-    }
-    this.dom = null;
+                  // first time, trigger dragstart event
+                  if(!this.triggered) {
+                      inst.trigger(this.name +'start', ev);
+                      this.triggered = true;
+                  }
 
-    // cleanup hammer touch events
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
-      }
-    }
-    this.listeners = null;
-    this.hammer = null;
+                  // trigger normal event
+                  inst.trigger(this.name, ev);
 
-    // give all components the opportunity to cleanup
-    this.components.forEach(function (component) {
-      component.destroy();
-    });
+                  // direction event, like dragdown
+                  inst.trigger(this.name + ev.direction, ev);
 
-    this.body = null;
+                  // block the browser events
+                  if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
+                      (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
+                      ev.preventDefault();
+                  }
+                  break;
+
+              case Hammer.EVENT_END:
+                  // trigger dragend
+                  if(this.triggered) {
+                      inst.trigger(this.name +'end', ev);
+                  }
+
+                  this.triggered = false;
+                  break;
+          }
+      }
   };
 
+
   /**
-   * Set options. Options will be passed to all components loaded in the Timeline.
-   * @param {Object} [options]
-   *                           {String} orientation
-   *                              Vertical orientation for the Timeline,
-   *                              can be 'bottom' (default) or 'top'.
-   *                           {String | Number} width
-   *                              Width for the timeline, a number in pixels or
-   *                              a css string like '1000px' or '75%'. '100%' by default.
-   *                           {String | Number} height
-   *                              Fixed height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'. If undefined,
-   *                              The Timeline will automatically size such that
-   *                              its contents fit.
-   *                           {String | Number} minHeight
-   *                              Minimum height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {String | Number} maxHeight
-   *                              Maximum height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {Number | Date | String} start
-   *                              Start date for the visible window
-   *                           {Number | Date | String} end
-   *                              End date for the visible window
+   * Transform
+   * User want to scale or rotate with 2 fingers
+   * @events  transform, pinch, pinchin, pinchout, rotate
    */
-  Timeline.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the known options
-      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
-      util.selectiveExtend(fields, this.options, options);
-
-      // enable/disable autoResize
-      this._initAutoResize();
-    }
-
-    // propagate options to all components
-    this.components.forEach(function (component) {
-      component.setOptions(options);
-    });
+  Hammer.gestures.Transform = {
+      name: 'transform',
+      index: 45,
+      defaults: {
+          // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
+          transform_min_scale     : 0.01,
+          // rotation in degrees
+          transform_min_rotation  : 1,
+          // prevent default browser behavior when two touches are on the screen
+          // but it makes the element a blocking element
+          // when you are using the transform gesture, it is a good practice to set this true
+          transform_always_block  : false
+      },
+      triggered: false,
+      handler: function transformGesture(ev, inst) {
+          // current gesture isnt drag, but dragged is true
+          // this means an other gesture is busy. now call dragend
+          if(Hammer.detection.current.name != this.name && this.triggered) {
+              inst.trigger(this.name +'end', ev);
+              this.triggered = false;
+              return;
+          }
 
-    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
-    if (options && options.order) {
-      throw new Error('Option order is deprecated. There is no replacement for this feature.');
-    }
+          // atleast multitouch
+          if(ev.touches.length < 2) {
+              return;
+          }
 
-    // redraw everything
-    this.redraw();
-  };
+          // prevent default when two fingers are on the screen
+          if(inst.options.transform_always_block) {
+              ev.preventDefault();
+          }
 
-  /**
-   * Set a custom time bar
-   * @param {Date} time
-   */
-  Timeline.prototype.setCustomTime = function (time) {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  this.triggered = false;
+                  break;
 
-    this.customTime.setCustomTime(time);
-  };
+              case Hammer.EVENT_MOVE:
+                  var scale_threshold = Math.abs(1-ev.scale);
+                  var rotation_threshold = Math.abs(ev.rotation);
 
-  /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
-   */
-  Timeline.prototype.getCustomTime = function() {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+                  // when the distance we moved is too small we skip this gesture
+                  // or we can be already in dragging
+                  if(scale_threshold < inst.options.transform_min_scale &&
+                      rotation_threshold < inst.options.transform_min_rotation) {
+                      return;
+                  }
 
-    return this.customTime.getCustomTime();
-  };
+                  // we are transforming!
+                  Hammer.detection.current.name = this.name;
 
-  /**
-   * Set items
-   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
-   */
-  Timeline.prototype.setItems = function(items) {
-    var initialLoad = (this.itemsData == null);
+                  // first time, trigger dragstart event
+                  if(!this.triggered) {
+                      inst.trigger(this.name +'start', ev);
+                      this.triggered = true;
+                  }
 
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!items) {
-      newDataSet = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      newDataSet = items;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(items, {
-        type: {
-          start: 'Date',
-          end: 'Date'
-        }
-      });
-    }
+                  inst.trigger(this.name, ev); // basic transform event
 
-    // set items
-    this.itemsData = newDataSet;
-    this.itemSet && this.itemSet.setItems(newDataSet);
+                  // trigger rotate event
+                  if(rotation_threshold > inst.options.transform_min_rotation) {
+                      inst.trigger('rotate', ev);
+                  }
 
-    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
-      this.fit();
+                  // trigger pinch event
+                  if(scale_threshold > inst.options.transform_min_scale) {
+                      inst.trigger('pinch', ev);
+                      inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
+                  }
+                  break;
 
-      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
-      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+              case Hammer.EVENT_END:
+                  // trigger dragend
+                  if(this.triggered) {
+                      inst.trigger(this.name +'end', ev);
+                  }
 
-      this.setWindow(start, end);
-    }
+                  this.triggered = false;
+                  break;
+          }
+      }
   };
 
-  /**
-   * Set groups
-   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
-   */
-  Timeline.prototype.setGroups = function(groups) {
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!groups) {
-      newDataSet = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      newDataSet = groups;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(groups);
-    }
-
-    this.groupsData = newDataSet;
-    this.itemSet.setGroups(newDataSet);
-  };
 
   /**
-   * Clear the Timeline. By Default, items, groups and options are cleared.
-   * Example usage:
-   *
-   *     timeline.clear();                // clear items, groups, and options
-   *     timeline.clear({options: true}); // clear options only
-   *
-   * @param {Object} [what]      Optionally specify what to clear. By default:
-   *                             {items: true, groups: true, options: true}
+   * Touch
+   * Called as first, tells the user has touched the screen
+   * @events  touch
    */
-  Timeline.prototype.clear = function(what) {
-    // clear items
-    if (!what || what.items) {
-      this.setItems(null);
-    }
+  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
+          prevent_default: false,
 
-    // clear groups
-    if (!what || what.groups) {
-      this.setGroups(null);
-    }
+          // disable mouse events, so only touch (or pen!) input triggers events
+          prevent_mouseevents: false
+      },
+      handler: function touchGesture(ev, inst) {
+          if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
+              ev.stopDetect();
+              return;
+          }
 
-    // clear options of timeline and of each of the components
-    if (!what || what.options) {
-      this.components.forEach(function (component) {
-        component.setOptions(component.defaultOptions);
-      });
+          if(inst.options.prevent_default) {
+              ev.preventDefault();
+          }
 
-      this.setOptions(this.defaultOptions); // this will also do a redraw
-    }
+          if(ev.eventType ==  Hammer.EVENT_START) {
+              inst.trigger(this.name, ev);
+          }
+      }
   };
 
+
   /**
-   * Set Timeline window such that it fits all items
+   * Release
+   * Called as last, tells the user has released the screen
+   * @events  release
    */
-  Timeline.prototype.fit = function() {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
-
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
+  Hammer.gestures.Release = {
+      name: 'release',
+      index: Infinity,
+      handler: function releaseGesture(ev, inst) {
+          if(ev.eventType ==  Hammer.EVENT_END) {
+              inst.trigger(this.name, ev);
+          }
       }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
-
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
-    }
-
-    this.range.setRange(start, end);
   };
 
-  /**
-   * Get the data range of the item set.
-   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
-   *                                          When no minimum is found, min==null
-   *                                          When no maximum is found, max==null
-   */
-  Timeline.prototype.getItemRange = function() {
-    // calculate min from start filed
-    var dataset = this.itemsData.getDataSet(),
-        min = null,
-        max = null;
-
-    if (dataset) {
-      // calculate the minimum value of the field 'start'
-      var minItem = dataset.min('start');
-      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-      // Note: we convert first to Date and then to number because else
-      // a conversion from ISODate to Number will fail
+  // node export
+  if(typeof module === 'object' && typeof module.exports === 'object'){
+      module.exports = Hammer;
+  }
+  // just window export
+  else {
+      window.Hammer = Hammer;
 
-      // calculate maximum value of fields 'start' and 'end'
-      var maxStartItem = dataset.max('start');
-      if (maxStartItem) {
-        max = util.convert(maxStartItem.start, 'Date').valueOf();
-      }
-      var maxEndItem = dataset.max('end');
-      if (maxEndItem) {
-        if (max == null) {
-          max = util.convert(maxEndItem.end, 'Date').valueOf();
-        }
-        else {
-          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
-        }
+      // requireJS module definition
+      if(typeof window.define === 'function' && window.define.amd) {
+          window.define('hammer', [], function() {
+              return Hammer;
+          });
       }
-    }
+  }
+  })(this);
 
-    return {
-      min: (min != null) ? new Date(min) : null,
-      max: (max != null) ? new Date(max) : null
-    };
-  };
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {Array} [ids] An array with zero or more id's of the items to be
-   *                      selected. If ids is an empty array, all items will be
-   *                      unselected.
-   */
-  Timeline.prototype.setSelection = function(ids) {
-    this.itemSet && this.itemSet.setSelection(ids);
-  };
+  // 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__(5);
 
-  /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
-   */
-  Timeline.prototype.getSelection = function() {
-    return this.itemSet && this.itemSet.getSelection() || [];
-  };
 
-  /**
-   * Set the visible window. Both parameters are optional, you can change only
-   * start or only end. Syntax:
-   *
-   *     TimeLine.setWindow(start, end)
-   *     TimeLine.setWindow(range)
-   *
-   * Where start and end can be a Date, number, or string, and range is an
-   * object with properties start and end.
-   *
-   * @param {Date | Number | String | Object} [start] Start date of visible window
-   * @param {Date | Number | String} [end]   End date of visible window
-   */
-  Timeline.prototype.setWindow = function(start, end) {
-    if (arguments.length == 1) {
-      var range = arguments[0];
-      this.range.setRange(range.start, range.end);
-    }
-    else {
-      this.range.setRange(start, end);
-    }
-  };
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Get the visible window
-   * @return {{start: Date, end: Date}}   Visible range
-   */
-  Timeline.prototype.getWindow = function() {
-    var range = this.range.getRange();
-    return {
-      start: new Date(range.start),
-      end: new Date(range.end)
-    };
-  };
+  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
+  //! version : 2.7.0
+  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+  //! license : MIT
+  //! momentjs.com
 
-  /**
-   * Force a redraw of the Timeline. Can be useful to manually redraw when
-   * option autoResize=false
-   */
-  Timeline.prototype.redraw = function() {
-    var resized = false,
-        options = this.options,
-        props = this.props,
-        dom = this.dom;
+  (function (undefined) {
 
-    if (!dom) return; // when destroyed
+      /************************************
+          Constants
+      ************************************/
 
-    // update class names
-    dom.root.className = 'vis timeline root ' + options.orientation;
+      var moment,
+          VERSION = "2.7.0",
+          // the global-scope this is NOT the global object in Node.js
+          globalScope = typeof global !== 'undefined' ? global : this,
+          oldGlobalMoment,
+          round = Math.round,
+          i,
 
-    // update root width and height options
-    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
-    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
-    dom.root.style.width = util.option.asSize(options.width, '');
+          YEAR = 0,
+          MONTH = 1,
+          DATE = 2,
+          HOUR = 3,
+          MINUTE = 4,
+          SECOND = 5,
+          MILLISECOND = 6,
 
-    // calculate border widths
-    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
-    props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
-    props.border.bottom = props.border.top;
-    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+          // internal storage for language config files
+          languages = {},
 
-    // calculate the heights. If any of the side panels is empty, we set the height to
-    // minus the border width, such that the border will be invisible
-    props.center.height = dom.center.offsetHeight;
-    props.left.height   = dom.left.offsetHeight;
-    props.right.height  = dom.right.offsetHeight;
-    props.top.height    = dom.top.clientHeight    || -props.border.top;
-    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
+          // moment internal properties
+          momentProperties = {
+              _isAMomentObject: null,
+              _i : null,
+              _f : null,
+              _l : null,
+              _strict : null,
+              _tzm : null,
+              _isUTC : null,
+              _offset : null,  // optional. Combine with _isUTC
+              _pf : null,
+              _lang : null  // optional
+          },
 
-    // TODO: compensate borders when any of the panels is empty.
+          // check for nodeJS
+          hasModule = (typeof module !== 'undefined' && module.exports),
 
-    // apply auto height
-    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
-    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
-    var autoHeight = props.top.height + contentHeight + props.bottom.height +
-        borderRootHeight + props.border.top + props.border.bottom;
-    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
+          // ASP.NET json date format regex
+          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
+          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
 
-    // calculate heights of the content panels
-    props.root.height = dom.root.offsetHeight;
-    props.background.height = props.root.height - borderRootHeight;
-    var containerHeight = props.root.height - props.top.height - props.bottom.height -
-        borderRootHeight;
-    props.centerContainer.height  = containerHeight;
-    props.leftContainer.height    = containerHeight;
-    props.rightContainer.height   = props.leftContainer.height;
+          // 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)$/,
 
-    // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
-    props.background.width = props.root.width - borderRootWidth;
-    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
-    props.leftContainer.width = props.left.width;
-    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
-    props.rightContainer.width = props.right.width;
-    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-    props.center.width          = centerWidth;
-    props.centerContainer.width = centerWidth;
-    props.top.width             = centerWidth;
-    props.bottom.width          = centerWidth;
+          // 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|zz?|ZZ?|.)/g,
+          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
 
-    // resize the panels
-    dom.background.style.height           = props.background.height + 'px';
-    dom.backgroundVertical.style.height   = props.background.height + 'px';
-    dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
-    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+          // 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)
+          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
+          parseTokenOrdinal = /\d{1,2}/,
 
-    dom.background.style.width            = props.background.width + 'px';
-    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-    dom.centerContainer.style.width       = props.center.width + 'px';
-    dom.top.style.width                   = props.top.width + 'px';
-    dom.bottom.style.width                = props.bottom.width + 'px';
+          //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
 
-    // reposition the panels
-    dom.background.style.left           = '0';
-    dom.background.style.top            = '0';
-    dom.backgroundVertical.style.left   = props.left.width + 'px';
-    dom.backgroundVertical.style.top    = '0';
-    dom.backgroundHorizontal.style.left = '0';
-    dom.backgroundHorizontal.style.top  = props.top.height + 'px';
-    dom.centerContainer.style.left      = props.left.width + 'px';
-    dom.centerContainer.style.top       = props.top.height + 'px';
-    dom.leftContainer.style.left        = '0';
-    dom.leftContainer.style.top         = props.top.height + 'px';
-    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-    dom.rightContainer.style.top        = props.top.height + 'px';
-    dom.top.style.left                  = props.left.width + 'px';
-    dom.top.style.top                   = '0';
-    dom.bottom.style.left               = props.left.width + 'px';
-    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
-
-    // update the scrollTop, feasible range for the offset can be changed
-    // when the height of the Timeline or of the contents of the center changed
-    this._updateScrollTop();
+          // 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)?)?$/,
 
-    // reposition the scrollable contents
-    var offset = this.props.scrollTop;
-    if (options.orientation == 'bottom') {
-      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-          this.props.border.top - this.props.border.bottom, 0);
-    }
-    dom.center.style.left = '0';
-    dom.center.style.top  = offset + 'px';
-    dom.left.style.left   = '0';
-    dom.left.style.top    = offset + 'px';
-    dom.right.style.left  = '0';
-    dom.right.style.top   = offset + 'px';
+          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
 
-    // show shadows when vertical scrolling is available
-    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
-    dom.shadowTop.style.visibility          = visibilityTop;
-    dom.shadowBottom.style.visibility       = visibilityBottom;
-    dom.shadowTopLeft.style.visibility      = visibilityTop;
-    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
-    dom.shadowTopRight.style.visibility     = visibilityTop;
-    dom.shadowBottomRight.style.visibility  = visibilityBottom;
+          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}/]
+          ],
 
-    // redraw all components
-    this.components.forEach(function (component) {
-      resized = component.redraw() || resized;
-    });
-    if (resized) {
-      // keep repainting until all sizes are settled
-      this.redraw();
-    }
-  };
+          // 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/]
+          ],
 
-  // TODO: deprecated since version 1.1.0, remove some day
-  Timeline.prototype.repaint = function () {
-      throw new Error('Function repaint is deprecated. Use redraw instead.');
-  };
+          // timezone chunker "+10:00" > ["10", "00"] or "-1530" > ["-15", "30"]
+          parseTimezoneChunker = /([\+\-]|\d\d)/gi,
 
-  /**
-   * Convert a position on screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toTime = function(x) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+          // 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
+          },
 
+          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'
+          },
 
-  /**
-   * Convert a position on the global screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toGlobalTime = function(x) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+          camelFunctions = {
+              dayofyear : 'dayOfYear',
+              isoweekday : 'isoWeekday',
+              isoweek : 'isoWeek',
+              weekyear : 'weekYear',
+              isoweekyear : 'isoWeekYear'
+          },
 
-  /**
-   * Convert a datetime (Date object) into a position on the screen
-   * @param {Date}   time A date
-   * @return {int}   x    The position on the screen in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toScreen = function(time) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          // format function strings
+          formatFunctions = {},
 
+          // default relative time thresholds
+          relativeTimeThresholds = {
+            s: 45,   //seconds to minutes
+            m: 45,   //minutes to hours
+            h: 22,   //hours to days
+            dd: 25,  //days to month (month == 1)
+            dm: 45,  //days to months (months > 1)
+            dy: 345  //days to year
+          },
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toGlobalScreen = function(time) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          // tokens to ordinalize and pad
+          ordinalizeTokens = 'DDD w W M D d'.split(' '),
+          paddedTokens = 'M D H h m s w W'.split(' '),
 
+          formatTokenFunctions = {
+              M    : function () {
+                  return this.month() + 1;
+              },
+              MMM  : function (format) {
+                  return this.lang().monthsShort(this, format);
+              },
+              MMMM : function (format) {
+                  return this.lang().months(this, format);
+              },
+              D    : function () {
+                  return this.date();
+              },
+              DDD  : function () {
+                  return this.dayOfYear();
+              },
+              d    : function () {
+                  return this.day();
+              },
+              dd   : function (format) {
+                  return this.lang().weekdaysMin(this, format);
+              },
+              ddd  : function (format) {
+                  return this.lang().weekdaysShort(this, format);
+              },
+              dddd : function (format) {
+                  return this.lang().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.lang().meridiem(this.hours(), this.minutes(), true);
+              },
+              A    : function () {
+                  return this.lang().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.zone(),
+                      b = "+";
+                  if (a < 0) {
+                      a = -a;
+                      b = "-";
+                  }
+                  return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
+              },
+              ZZ   : function () {
+                  var a = -this.zone(),
+                      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.unix();
+              },
+              Q : function () {
+                  return this.quarter();
+              }
+          },
 
-  /**
-   * Initialize watching when option autoResize is true
-   * @private
-   */
-  Timeline.prototype._initAutoResize = function () {
-    if (this.options.autoResize == true) {
-      this._startAutoResize();
-    }
-    else {
-      this._stopAutoResize();
-    }
-  };
+          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
 
-  /**
-   * Watch for changes in the size of the container. On resize, the Panel will
-   * automatically redraw itself.
-   * @private
-   */
-  Timeline.prototype._startAutoResize = function () {
-    var me = this;
+      // 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");
+          }
+      }
 
-    this._stopAutoResize();
+      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._onResize = function() {
-      if (me.options.autoResize != true) {
-        // stop watching when the option autoResize is changed to false
-        me._stopAutoResize();
-        return;
+      function deprecate(msg, fn) {
+          var firstTime = true;
+          function printMsg() {
+              if (moment.suppressDeprecationWarnings === false &&
+                      typeof console !== 'undefined' && console.warn) {
+                  console.warn("Deprecation warning: " + msg);
+              }
+          }
+          return extend(function () {
+              if (firstTime) {
+                  printMsg();
+                  firstTime = false;
+              }
+              return fn.apply(this, arguments);
+          }, fn);
       }
 
-      if (me.dom.root) {
-        // check whether the frame is resized
-        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
-            (me.dom.root.clientHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.clientWidth;
-          me.props.lastHeight = me.dom.root.clientHeight;
+      function padToken(func, count) {
+          return function (a) {
+              return leftZeroFill(func.call(this, a), count);
+          };
+      }
+      function ordinalizeToken(func, period) {
+          return function (a) {
+              return this.lang().ordinal(func.call(this, a), period);
+          };
+      }
 
-          me.emit('change');
-        }
+      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);
 
-    // add event listener to window resize
-    util.addEventListener(window, 'resize', this._onResize);
 
-    this.watchTimer = setInterval(this._onResize, 1000);
-  };
+      /************************************
+          Constructors
+      ************************************/
 
-  /**
-   * Stop watching for a resize of the frame.
-   * @private
-   */
-  Timeline.prototype._stopAutoResize = function () {
-    if (this.watchTimer) {
-      clearInterval(this.watchTimer);
-      this.watchTimer = undefined;
-    }
+      function Language() {
 
-    // remove event listener on window.resize
-    util.removeEventListener(window, 'resize', this._onResize);
-    this._onResize = null;
-  };
+      }
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onTouch = function (event) {
-    this.touch.allowDragging = true;
-  };
+      // Moment prototype object
+      function Moment(config) {
+          checkOverflow(config);
+          extend(this, config);
+      }
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onPinch = function (event) {
-    this.touch.allowDragging = 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;
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onDragStart = function (event) {
-    this.touch.initialScrollTop = this.props.scrollTop;
-  };
+          // 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;
 
-  /**
-   * Move the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onDrag = function (event) {
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.touch.allowDragging) return;
+          this._data = {};
 
-    var delta = event.gesture.deltaY;
+          this._bubble();
+      }
 
-    var oldScrollTop = this._getScrollTop();
-    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+      /************************************
+          Helpers
+      ************************************/
 
-    if (newScrollTop != oldScrollTop) {
-      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
-    }
-  };
 
-  /**
-   * Apply a scrollTop
-   * @param {Number} scrollTop
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Timeline.prototype._setScrollTop = function (scrollTop) {
-    this.props.scrollTop = scrollTop;
-    this._updateScrollTop();
-    return this.props.scrollTop;
-  };
+      function extend(a, b) {
+          for (var i in b) {
+              if (b.hasOwnProperty(i)) {
+                  a[i] = b[i];
+              }
+          }
 
-  /**
-   * Update the current scrollTop when the height of  the containers has been changed
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Timeline.prototype._updateScrollTop = function () {
-    // recalculate the scrollTopMin
-    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
-    if (scrollTopMin != this.props.scrollTopMin) {
-      // in case of bottom orientation, change the scrollTop such that the contents
-      // do not move relative to the time axis at the bottom
-      if (this.options.orientation == 'bottom') {
-        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
-      }
-      this.props.scrollTopMin = scrollTopMin;
-    }
+          if (b.hasOwnProperty("toString")) {
+              a.toString = b.toString;
+          }
 
-    // limit the scrollTop to the feasible scroll range
-    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
-    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
+          if (b.hasOwnProperty("valueOf")) {
+              a.valueOf = b.valueOf;
+          }
 
-    return this.props.scrollTop;
-  };
+          return a;
+      }
 
-  /**
-   * Get the current scrollTop
-   * @returns {number} scrollTop
-   * @private
-   */
-  Timeline.prototype._getScrollTop = function () {
-    return this.props.scrollTop;
-  };
+      function cloneMoment(m) {
+          var result = {}, i;
+          for (i in m) {
+              if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
+                  result[i] = m[i];
+              }
+          }
 
-  module.exports = Timeline;
+          return result;
+      }
 
+      function absRound(number) {
+          if (number < 0) {
+              return Math.ceil(number);
+          } else {
+              return Math.floor(number);
+          }
+      }
 
-/***/ },
-/* 6 */
-/***/ function(module, exports, __webpack_require__) {
+      // 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;
 
-  /**
-   * @constructor  DataStep
-   * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
-   * end data point. The class itself determines the best scale (step size) based on the
-   * provided start Date, end Date, and minimumStep.
-   *
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   *
-   * Alternatively, you can set a scale by hand.
-   * After creation, you can initialize the class by executing first(). Then you
-   * can iterate from the start date to the end date via next(). You can check if
-   * the end date is reached with the function hasNext(). After each step, you can
-   * retrieve the current date via getCurrent().
-   * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
-   * days, to years.
-   *
-   * Version: 1.2
-   *
-   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
-   *                               or new Date(2010, 9, 21, 23, 45, 00)
-   * @param {Date} [end]           The end date
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
-    // variables
-    this.current = 0;
+          while (output.length < targetLength) {
+              output = '0' + output;
+          }
+          return (sign ? (forceSign ? '+' : '') : '-') + output;
+      }
 
-    this.autoScale = true;
-    this.stepIndex = 0;
-    this.step = 1;
-    this.scale = 1;
+      // helper function for _.addTime and _.subtractTime
+      function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) {
+          var milliseconds = duration._milliseconds,
+              days = duration._days,
+              months = duration._months;
+          updateOffset = updateOffset == null ? true : updateOffset;
 
-    this.marginStart;
-    this.marginEnd;
+          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.majorSteps = [1,     2,    5,  10];
-    this.minorSteps = [0.25,  0.5,  1,  2];
+      // check if is an array
+      function isArray(input) {
+          return Object.prototype.toString.call(input) === '[object Array]';
+      }
 
-    this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
-  }
+      function isDate(input) {
+          return  Object.prototype.toString.call(input) === '[object Date]' ||
+                  input instanceof Date;
+      }
 
+      // 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;
+      }
 
+      function normalizeUnits(units) {
+          if (units) {
+              var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
+              units = unitAliases[units] || camelFunctions[lowered] || lowered;
+          }
+          return units;
+      }
 
-  /**
-   * Set a new range
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   * @param {Number} [start]      The start date and time.
-   * @param {Number} [end]        The end date and time.
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
-    this._start = start;
-    this._end = end;
+      function normalizeObjectUnits(inputObject) {
+          var normalizedInput = {},
+              normalizedProp,
+              prop;
 
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
-    }
-    this.setFirst();
-  };
+          for (prop in inputObject) {
+              if (inputObject.hasOwnProperty(prop)) {
+                  normalizedProp = normalizeUnits(prop);
+                  if (normalizedProp) {
+                      normalizedInput[normalizedProp] = inputObject[prop];
+                  }
+              }
+          }
 
-  /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
-   */
-  DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
-    // round to floor
-    var size = this._end - this._start;
-    var safeSize = size * 1.1;
-    var minimumStepValue = minimumStep * (safeSize / containerHeight);
-    var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
+          return normalizedInput;
+      }
 
-    var minorStepIdx = -1;
-    var magnitudefactor = Math.pow(10,orderOfMagnitude);
+      function makeList(field) {
+          var count, setter;
 
-    var start = 0;
-    if (orderOfMagnitude < 0) {
-      start = orderOfMagnitude;
-    }
+          if (field.indexOf('week') === 0) {
+              count = 7;
+              setter = 'day';
+          }
+          else if (field.indexOf('month') === 0) {
+              count = 12;
+              setter = 'month';
+          }
+          else {
+              return;
+          }
 
-    var solutionFound = false;
-    for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
-      magnitudefactor = Math.pow(10,i);
-      for (var j = 0; j < this.minorSteps.length; j++) {
-        var stepSize = magnitudefactor * this.minorSteps[j];
-        if (stepSize >= minimumStepValue) {
-          solutionFound = true;
-          minorStepIdx = j;
-          break;
-        }
-      }
-      if (solutionFound == true) {
-        break;
-      }
-    }
-    this.stepIndex = minorStepIdx;
-    this.scale = magnitudefactor;
-    this.step = magnitudefactor * this.minorSteps[minorStepIdx];
-  };
+          moment[field] = function (format, index) {
+              var i, getter,
+                  method = moment.fn._lang[field],
+                  results = [];
 
+              if (typeof format === 'number') {
+                  index = format;
+                  format = undefined;
+              }
 
-  /**
-   * Set the range iterator to the start date.
-   */
-  DataStep.prototype.first = function() {
-    this.setFirst();
-  };
+              getter = function (i) {
+                  var m = moment().utc().set(setter, i);
+                  return method.call(moment.fn._lang, m, format || '');
+              };
 
-  /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
-   */
-  DataStep.prototype.setFirst = function() {
-    var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
-    var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
+              if (index != null) {
+                  return getter(index);
+              }
+              else {
+                  for (i = 0; i < count; i++) {
+                      results.push(getter(i));
+                  }
+                  return results;
+              }
+          };
+      }
 
-    this.marginEnd = this.roundToMinor(niceEnd);
-    this.marginStart = this.roundToMinor(niceStart);
-    this.marginRange = this.marginEnd - this.marginStart;
+      function toInt(argumentForCoercion) {
+          var coercedNumber = +argumentForCoercion,
+              value = 0;
 
-    this.current = this.marginEnd;
+          if (coercedNumber !== 0 && isFinite(coercedNumber)) {
+              if (coercedNumber >= 0) {
+                  value = Math.floor(coercedNumber);
+              } else {
+                  value = Math.ceil(coercedNumber);
+              }
+          }
 
-  };
+          return value;
+      }
 
-  DataStep.prototype.roundToMinor = function(value) {
-    var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
-    if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
-      return rounded + (this.scale * this.minorSteps[this.stepIndex]);
-    }
-    else {
-      return rounded;
-    }
-  }
+      function daysInMonth(year, month) {
+          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+      }
 
+      function weeksInYear(year, dow, doy) {
+          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
+      }
 
-  /**
-   * Check if the there is a next step
-   * @return {boolean}  true if the current date has not passed the end date
-   */
-  DataStep.prototype.hasNext = function () {
-    return (this.current >= this.marginStart);
-  };
+      function daysInYear(year) {
+          return isLeapYear(year) ? 366 : 365;
+      }
 
-  /**
-   * Do the next step
-   */
-  DataStep.prototype.next = function() {
-    var prev = this.current;
-    this.current -= this.step;
+      function isLeapYear(year) {
+          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+      }
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current == prev) {
-      this.current = this._end;
-    }
-  };
+      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] > 23 ? 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;
 
-  /**
-   * Do the next step
-   */
-  DataStep.prototype.previous = function() {
-    this.current += this.step;
-    this.marginEnd += this.step;
-    this.marginRange = this.marginEnd - this.marginStart;
-  };
+              if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
+                  overflow = DATE;
+              }
 
+              m._pf.overflow = overflow;
+          }
+      }
 
+      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;
 
-  /**
-   * Get the current datetime
-   * @return {String}  current The current date
-   */
-  DataStep.prototype.getCurrent = function() {
-    var toPrecision = '' + Number(this.current).toPrecision(5);
-    for (var i = toPrecision.length-1; i > 0; i--) {
-      if (toPrecision[i] == "0") {
-        toPrecision = toPrecision.slice(0,i);
+              if (m._strict) {
+                  m._isValid = m._isValid &&
+                      m._pf.charsLeftOver === 0 &&
+                      m._pf.unusedTokens.length === 0;
+              }
+          }
+          return m._isValid;
       }
-      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
-        toPrecision = toPrecision.slice(0,i);
-        break;
+
+      function normalizeLanguage(key) {
+          return key ? key.toLowerCase().replace('_', '-') : key;
       }
-      else{
-        break;
+
+      // Return a moment from input, that is local/utc/zone equivalent to model.
+      function makeAs(input, model) {
+          return model._isUTC ? moment(input).zone(model._offset || 0) :
+              moment(input).local();
       }
-    }
 
-    return toPrecision;
-  };
+      /************************************
+          Languages
+      ************************************/
 
 
+      extend(Language.prototype, {
 
-  /**
-   * 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
-   */
-  DataStep.prototype.snap = function(date) {
+          set : function (config) {
+              var prop, i;
+              for (i in config) {
+                  prop = config[i];
+                  if (typeof prop === 'function') {
+                      this[i] = prop;
+                  } else {
+                      this['_' + i] = prop;
+                  }
+              }
+          },
 
-  };
+          _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          months : function (m) {
+              return this._months[m.month()];
+          },
 
-  /**
-   * Check if the current value is a major value (for example when the step
-   * is DAY, a major value is each first day of the MONTH)
-   * @return {boolean} true if current date is major, else false.
-   */
-  DataStep.prototype.isMajor = function() {
-    return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
-  };
+          _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          monthsShort : function (m) {
+              return this._monthsShort[m.month()];
+          },
 
-  module.exports = DataStep;
+          monthsParse : function (monthName) {
+              var i, mom, regex;
 
+              if (!this._monthsParse) {
+                  this._monthsParse = [];
+              }
 
-/***/ },
-/* 7 */
-/***/ function(module, exports, __webpack_require__) {
+              for (i = 0; i < 12; i++) {
+                  // make the regex if we don't have it already
+                  if (!this._monthsParse[i]) {
+                      mom = moment.utc([2000, i]);
+                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
+                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
+                  }
+                  // test the regex
+                  if (this._monthsParse[i].test(monthName)) {
+                      return i;
+                  }
+              }
+          },
 
-  var Emitter = __webpack_require__(41);
-  var Hammer = __webpack_require__(50);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Range = __webpack_require__(8);
-  var TimeAxis = __webpack_require__(21);
-  var CurrentTime = __webpack_require__(13);
-  var CustomTime = __webpack_require__(14);
-  var LineGraph = __webpack_require__(20);
+          _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdays : function (m) {
+              return this._weekdays[m.day()];
+          },
 
-  /**
-   * Create a timeline visualization
-   * @param {HTMLElement} container
-   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
-   * @param {Object} [options]  See Graph2d.setOptions for the available options.
-   * @constructor
-   */
-  function Graph2d (container, items, options, groups) {
-    var me = this;
-    this.defaultOptions = {
-      start: null,
-      end:   null,
+          _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysShort : function (m) {
+              return this._weekdaysShort[m.day()];
+          },
 
-      autoResize: true,
+          _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          weekdaysMin : function (m) {
+              return this._weekdaysMin[m.day()];
+          },
 
-      orientation: 'bottom',
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
-    };
-    this.options = util.deepExtend({}, this.defaultOptions);
+          weekdaysParse : function (weekdayName) {
+              var i, mom, regex;
 
-    // Create the DOM, props, and emitter
-    this._create(container);
+              if (!this._weekdaysParse) {
+                  this._weekdaysParse = [];
+              }
 
-    // all components listed here will be repainted automatically
-    this.components = [];
+              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;
+                  }
+              }
+          },
 
-    this.body = {
-      dom: this.dom,
-      domProps: this.props,
-      emitter: {
-        on: this.on.bind(this),
-        off: this.off.bind(this),
-        emit: this.emit.bind(this)
-      },
-      util: {
-        snap: null, // will be specified after TimeAxis is created
-        toScreen: me._toScreen.bind(me),
-        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
-        toTime: me._toTime.bind(me),
-        toGlobalTime : me._toGlobalTime.bind(me)
-      }
-    };
-
-    // range
-    this.range = new Range(this.body);
-    this.components.push(this.range);
-    this.body.range = this.range;
-
-    // time axis
-    this.timeAxis = new TimeAxis(this.body);
-    this.components.push(this.timeAxis);
-    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
-
-    // current time bar
-    this.currentTime = new CurrentTime(this.body);
-    this.components.push(this.currentTime);
-
-    // custom time bar
-    // Note: time bar will be attached in this.setOptions when selected
-    this.customTime = new CustomTime(this.body);
-    this.components.push(this.customTime);
-
-    // item set
-    this.linegraph = new LineGraph(this.body);
-    this.components.push(this.linegraph);
-
-    this.itemsData = null;      // DataSet
-    this.groupsData = null;     // DataSet
-
-    // apply options
-    if (options) {
-      this.setOptions(options);
-    }
+          _longDateFormat : {
+              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;
+          },
 
-    // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
-    if (groups) {
-      this.setGroups(groups);
-    }
+          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');
+          },
 
-    // create itemset
-    if (items) {
-      this.setItems(items);
-    }
-    else {
-      this.redraw();
-    }
-  }
+          _meridiemParse : /[ap]\.?m?\.?/i,
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'pm' : 'PM';
+              } else {
+                  return isLower ? 'am' : 'AM';
+              }
+          },
 
-  // turn Graph2d into an event emitter
-  Emitter(Graph2d.prototype);
+          _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) {
+              var output = this._calendar[key];
+              return typeof output === 'function' ? output.apply(mom) : output;
+          },
 
-  /**
-   * Create the main DOM for the Graph2d: a root panel containing left, right,
-   * top, bottom, content, and background panel.
-   * @param {Element} container  The container element where the Graph2d will
-   *                             be attached.
-   * @private
-   */
-  Graph2d.prototype._create = function (container) {
-    this.dom = {};
+          _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);
+          },
+          pastFuture : function (diff, output) {
+              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
+              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+          },
 
-    this.dom.root                 = document.createElement('div');
-    this.dom.background           = document.createElement('div');
-    this.dom.backgroundVertical   = document.createElement('div');
-    this.dom.backgroundHorizontalContainer = document.createElement('div');
-    this.dom.centerContainer      = document.createElement('div');
-    this.dom.leftContainer        = document.createElement('div');
-    this.dom.rightContainer       = document.createElement('div');
-    this.dom.backgroundHorizontal = document.createElement('div');
-    this.dom.center               = document.createElement('div');
-    this.dom.left                 = document.createElement('div');
-    this.dom.right                = document.createElement('div');
-    this.dom.top                  = document.createElement('div');
-    this.dom.bottom               = document.createElement('div');
-    this.dom.shadowTop            = document.createElement('div');
-    this.dom.shadowBottom         = document.createElement('div');
-    this.dom.shadowTopLeft        = document.createElement('div');
-    this.dom.shadowBottomLeft     = document.createElement('div');
-    this.dom.shadowTopRight       = document.createElement('div');
-    this.dom.shadowBottomRight    = document.createElement('div');
+          ordinal : function (number) {
+              return this._ordinal.replace("%d", number);
+          },
+          _ordinal : "%d",
 
-    this.dom.background.className           = 'vispanel background';
-    this.dom.backgroundVertical.className   = 'vispanel background vertical';
-    this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
-    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-    this.dom.centerContainer.className      = 'vispanel center';
-    this.dom.leftContainer.className        = 'vispanel left';
-    this.dom.rightContainer.className       = 'vispanel right';
-    this.dom.top.className                  = 'vispanel top';
-    this.dom.bottom.className               = 'vispanel bottom';
-    this.dom.left.className                 = 'content';
-    this.dom.center.className               = 'content';
-    this.dom.right.className                = 'content';
-    this.dom.shadowTop.className            = 'shadow top';
-    this.dom.shadowBottom.className         = 'shadow bottom';
-    this.dom.shadowTopLeft.className        = 'shadow top';
-    this.dom.shadowBottomLeft.className     = 'shadow bottom';
-    this.dom.shadowTopRight.className       = 'shadow top';
-    this.dom.shadowBottomRight.className    = 'shadow bottom';
+          preparse : function (string) {
+              return string;
+          },
 
-    this.dom.root.appendChild(this.dom.background);
-    this.dom.root.appendChild(this.dom.backgroundVertical);
-    this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
-    this.dom.root.appendChild(this.dom.centerContainer);
-    this.dom.root.appendChild(this.dom.leftContainer);
-    this.dom.root.appendChild(this.dom.rightContainer);
-    this.dom.root.appendChild(this.dom.top);
-    this.dom.root.appendChild(this.dom.bottom);
+          postformat : function (string) {
+              return string;
+          },
 
-    this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
-    this.dom.centerContainer.appendChild(this.dom.center);
-    this.dom.leftContainer.appendChild(this.dom.left);
-    this.dom.rightContainer.appendChild(this.dom.right);
+          week : function (mom) {
+              return weekOfYear(mom, this._week.dow, this._week.doy).week;
+          },
 
-    this.dom.centerContainer.appendChild(this.dom.shadowTop);
-    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
-    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
-    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
-    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
-    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+          _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.on('rangechange', this.redraw.bind(this));
-    this.on('change', this.redraw.bind(this));
-    this.on('touch', this._onTouch.bind(this));
-    this.on('pinch', this._onPinch.bind(this));
-    this.on('dragstart', this._onDragStart.bind(this));
-    this.on('drag', this._onDrag.bind(this));
+          _invalidDate: 'Invalid date',
+          invalidDate: function () {
+              return this._invalidDate;
+          }
+      });
 
-    // create event listeners for all interesting events, these events will be
-    // emitted via emitter
-    this.hammer = Hammer(this.dom.root, {
-      prevent_default: true
-    });
-    this.listeners = {};
+      // Loads a language definition into the `languages` cache.  The function
+      // takes a key and optionally values.  If not in the browser and no values
+      // are provided, it will load the language file module.  As a convenience,
+      // this function also returns the language values.
+      function loadLang(key, values) {
+          values.abbr = key;
+          if (!languages[key]) {
+              languages[key] = new Language();
+          }
+          languages[key].set(values);
+          return languages[key];
+      }
 
-    var me = this;
-    var events = [
-      'touch', 'pinch',
-      'tap', 'doubletap', 'hold',
-      'dragstart', 'drag', 'dragend',
-      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
-    ];
-    events.forEach(function (event) {
-      var listener = function () {
-        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-        me.emit.apply(me, args);
-      };
-      me.hammer.on(event, listener);
-      me.listeners[event] = listener;
-    });
+      // Remove a language from the `languages` cache. Mostly useful in tests.
+      function unloadLang(key) {
+          delete languages[key];
+      }
 
-    // size properties of each of the panels
-    this.props = {
-      root: {},
-      background: {},
-      centerContainer: {},
-      leftContainer: {},
-      rightContainer: {},
-      center: {},
-      left: {},
-      right: {},
-      top: {},
-      bottom: {},
-      border: {},
-      scrollTop: 0,
-      scrollTopMin: 0
-    };
-    this.touch = {}; // store state information needed for touch events
+      // Determines which language definition to use and returns it.
+      //
+      // With no parameters, it will return the global language.  If you
+      // pass in a language key, such as 'en', it will return the
+      // definition for 'en', so long as 'en' has already been loaded using
+      // moment.lang.
+      function getLangDefinition(key) {
+          var i = 0, j, lang, next, split,
+              get = function (k) {
+                  if (!languages[k] && hasModule) {
+                      try {
+                          __webpack_require__(6)("./" + k);
+                      } catch (e) { }
+                  }
+                  return languages[k];
+              };
 
-    // attach the root panel to the provided container
-    if (!container) throw new Error('No container provided');
-    container.appendChild(this.dom.root);
-  };
+          if (!key) {
+              return moment.fn._lang;
+          }
 
-  /**
-   * Destroy the Graph2d, clean up all DOM elements and event listeners.
-   */
-  Graph2d.prototype.destroy = function () {
-    // unbind datasets
-    this.clear();
+          if (!isArray(key)) {
+              //short-circuit everything else
+              lang = get(key);
+              if (lang) {
+                  return lang;
+              }
+              key = [key];
+          }
 
-    // remove all event listeners
-    this.off();
+          //pick the language 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
+          while (i < key.length) {
+              split = normalizeLanguage(key[i]).split('-');
+              j = split.length;
+              next = normalizeLanguage(key[i + 1]);
+              next = next ? next.split('-') : null;
+              while (j > 0) {
+                  lang = get(split.slice(0, j).join('-'));
+                  if (lang) {
+                      return lang;
+                  }
+                  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 moment.fn._lang;
+      }
 
-    // stop checking for changed size
-    this._stopAutoResize();
+      /************************************
+          Formatting
+      ************************************/
 
-    // remove from DOM
-    if (this.dom.root.parentNode) {
-      this.dom.root.parentNode.removeChild(this.dom.root);
-    }
-    this.dom = null;
 
-    // cleanup hammer touch events
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
+      function removeFormattingTokens(input) {
+          if (input.match(/\[[\s\S]/)) {
+              return input.replace(/^\[|\]$/g, "");
+          }
+          return input.replace(/\\/g, "");
       }
-    }
-    this.listeners = null;
-    this.hammer = null;
-
-    // give all components the opportunity to cleanup
-    this.components.forEach(function (component) {
-      component.destroy();
-    });
-
-    this.body = null;
-  };
 
-  /**
-   * Set options. Options will be passed to all components loaded in the Graph2d.
-   * @param {Object} [options]
-   *                           {String} orientation
-   *                              Vertical orientation for the Graph2d,
-   *                              can be 'bottom' (default) or 'top'.
-   *                           {String | Number} width
-   *                              Width for the timeline, a number in pixels or
-   *                              a css string like '1000px' or '75%'. '100%' by default.
-   *                           {String | Number} height
-   *                              Fixed height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'. If undefined,
-   *                              The Graph2d will automatically size such that
-   *                              its contents fit.
-   *                           {String | Number} minHeight
-   *                              Minimum height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {String | Number} maxHeight
-   *                              Maximum height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {Number | Date | String} start
-   *                              Start date for the visible window
-   *                           {Number | Date | String} end
-   *                              End date for the visible window
-   */
-  Graph2d.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the known options
-      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
-      util.selectiveExtend(fields, this.options, options);
+      function makeFormatFunction(format) {
+          var array = format.match(formattingTokens), i, length;
 
-      // enable/disable autoResize
-      this._initAutoResize();
-    }
+          for (i = 0, length = array.length; i < length; i++) {
+              if (formatTokenFunctions[array[i]]) {
+                  array[i] = formatTokenFunctions[array[i]];
+              } else {
+                  array[i] = removeFormattingTokens(array[i]);
+              }
+          }
 
-    // propagate options to all components
-    this.components.forEach(function (component) {
-      component.setOptions(options);
-    });
+          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;
+          };
+      }
 
-    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
-    if (options && options.order) {
-      throw new Error('Option order is deprecated. There is no replacement for this feature.');
-    }
+      // format date using native date object
+      function formatMoment(m, format) {
 
-    // redraw everything
-    this.redraw();
-  };
+          if (!m.isValid()) {
+              return m.lang().invalidDate();
+          }
 
-  /**
-   * Set a custom time bar
-   * @param {Date} time
-   */
-  Graph2d.prototype.setCustomTime = function (time) {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+          format = expandFormat(format, m.lang());
 
-    this.customTime.setCustomTime(time);
-  };
+          if (!formatFunctions[format]) {
+              formatFunctions[format] = makeFormatFunction(format);
+          }
 
-  /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
-   */
-  Graph2d.prototype.getCustomTime = function() {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+          return formatFunctions[format](m);
+      }
 
-    return this.customTime.getCustomTime();
-  };
+      function expandFormat(format, lang) {
+          var i = 5;
 
-  /**
-   * Set items
-   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
-   */
-  Graph2d.prototype.setItems = function(items) {
-    var initialLoad = (this.itemsData == null);
+          function replaceLongDateFormatTokens(input) {
+              return lang.longDateFormat(input) || input;
+          }
 
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!items) {
-      newDataSet = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      newDataSet = items;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(items, {
-        type: {
-          start: 'Date',
-          end: 'Date'
-        }
-      });
-    }
+          localFormattingTokens.lastIndex = 0;
+          while (i >= 0 && localFormattingTokens.test(format)) {
+              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
+              localFormattingTokens.lastIndex = 0;
+              i -= 1;
+          }
 
-    // set items
-    this.itemsData = newDataSet;
-    this.linegraph && this.linegraph.setItems(newDataSet);
+          return format;
+      }
 
-    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
-      this.fit();
 
-      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
-      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+      /************************************
+          Parsing
+      ************************************/
 
-      this.setWindow(start, end);
-    }
-  };
 
-  /**
-   * Set groups
-   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
-   */
-  Graph2d.prototype.setGroups = function(groups) {
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!groups) {
-      newDataSet = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      newDataSet = groups;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(groups);
-    }
-
-    this.groupsData = newDataSet;
-    this.linegraph.setGroups(newDataSet);
-  };
-
-  /**
-   * Clear the Graph2d. By Default, items, groups and options are cleared.
-   * Example usage:
-   *
-   *     timeline.clear();                // clear items, groups, and options
-   *     timeline.clear({options: true}); // clear options only
-   *
-   * @param {Object} [what]      Optionally specify what to clear. By default:
-   *                             {items: true, groups: true, options: true}
-   */
-  Graph2d.prototype.clear = function(what) {
-    // clear items
-    if (!what || what.items) {
-      this.setItems(null);
-    }
+      // 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 getLangDefinition(config._l)._meridiemParse;
+          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 parseTokenOrdinal;
+          default :
+              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
+              return a;
+          }
+      }
 
-    // clear groups
-    if (!what || what.groups) {
-      this.setGroups(null);
-    }
+      function timezoneMinutesFromString(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]);
 
-    // clear options of timeline and of each of the components
-    if (!what || what.options) {
-      this.components.forEach(function (component) {
-        component.setOptions(component.defaultOptions);
-      });
+          return parts[0] === '+' ? -minutes : minutes;
+      }
 
-      this.setOptions(this.defaultOptions); // this will also do a redraw
-    }
-  };
+      // function to convert string input to date
+      function addTimeToArrayFromToken(token, input, config) {
+          var a, datePartArray = config._a;
 
-  /**
-   * Set Graph2d window such that it fits all items
-   */
-  Graph2d.prototype.fit = function() {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
+          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 = getLangDefinition(config._l).monthsParse(input);
+              // 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, 10));
+              }
+              break;
+          // DAY OF YEAR
+          case 'DDD' : // fall through to DDDD
+          case 'DDDD' :
+              if (input != null) {
+                  config._dayOfYear = toInt(input);
+              }
 
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
+              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._isPm = getLangDefinition(config._l).isPM(input);
+              break;
+          // 24 HOUR
+          case 'H' : // fall through to hh
+          case 'HH' : // fall through to hh
+          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 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 = timezoneMinutesFromString(input);
+              break;
+          // WEEKDAY - human
+          case 'dd':
+          case 'ddd':
+          case 'dddd':
+              a = getLangDefinition(config._l).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);
+          }
       }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
 
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
-    }
+      function dayOfYearFromWeekInfo(config) {
+          var w, weekYear, week, weekday, dow, doy, temp, lang;
 
-    this.range.setRange(start, end);
-  };
+          w = config._w;
+          if (w.GG != null || w.W != null || w.E != null) {
+              dow = 1;
+              doy = 4;
 
-  /**
-   * Get the data range of the item set.
-   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
-   *                                          When no minimum is found, min==null
-   *                                          When no maximum is found, max==null
-   */
-  Graph2d.prototype.getItemRange = function() {
-    // calculate min from start filed
-    var itemsData = this.itemsData,
-      min = null,
-      max = null;
+              // 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 {
+              lang = getLangDefinition(config._l);
+              dow = lang._week.dow;
+              doy = lang._week.doy;
 
-    if (itemsData) {
-      // calculate the minimum value of the field 'start'
-      var minItem = itemsData.min('start');
-      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-      // Note: we convert first to Date and then to number because else
-      // a conversion from ISODate to Number will fail
+              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
+              week = dfl(w.w, 1);
 
-      // calculate maximum value of fields 'start' and 'end'
-      var maxStartItem = itemsData.max('start');
-      if (maxStartItem) {
-        max = util.convert(maxStartItem.start, 'Date').valueOf();
-      }
-      var maxEndItem = itemsData.max('end');
-      if (maxEndItem) {
-        if (max == null) {
-          max = util.convert(maxEndItem.end, 'Date').valueOf();
-        }
-        else {
-          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
-        }
+              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);
+
+          config._a[YEAR] = temp.year;
+          config._dayOfYear = temp.dayOfYear;
       }
-    }
 
-    return {
-      min: (min != null) ? new Date(min) : null,
-      max: (max != null) ? new Date(max) : null
-    };
-  };
+      // 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;
 
-  /**
-   * Set the visible window. Both parameters are optional, you can change only
-   * start or only end. Syntax:
-   *
-   *     TimeLine.setWindow(start, end)
-   *     TimeLine.setWindow(range)
-   *
-   * Where start and end can be a Date, number, or string, and range is an
-   * object with properties start and end.
-   *
-   * @param {Date | Number | String | Object} [start] Start date of visible window
-   * @param {Date | Number | String} [end]   End date of visible window
-   */
-  Graph2d.prototype.setWindow = function(start, end) {
-    if (arguments.length == 1) {
-      var range = arguments[0];
-      this.range.setRange(range.start, range.end);
-    }
-    else {
-      this.range.setRange(start, end);
-    }
-  };
+          if (config._d) {
+              return;
+          }
 
-  /**
-   * Get the visible window
-   * @return {{start: Date, end: Date}}   Visible range
-   */
-  Graph2d.prototype.getWindow = function() {
-    var range = this.range.getRange();
-    return {
-      start: new Date(range.start),
-      end: new Date(range.end)
-    };
-  };
+          currentDate = currentDateArray(config);
 
-  /**
-   * Force a redraw of the Graph2d. Can be useful to manually redraw when
-   * option autoResize=false
-   */
-  Graph2d.prototype.redraw = function() {
-    var resized = false,
-      options = this.options,
-      props = this.props,
-      dom = this.dom;
+          //compute day of the year from weeks and weekdays
+          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
+              dayOfYearFromWeekInfo(config);
+          }
 
-    if (!dom) return; // when destroyed
+          //if the day of the year is set, figure out what it is
+          if (config._dayOfYear) {
+              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
 
-    // update class names
-    dom.root.className = 'vis timeline root ' + options.orientation;
+              if (config._dayOfYear > daysInYear(yearToUse)) {
+                  config._pf._overflowDayOfYear = true;
+              }
 
-    // update root width and height options
-    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
-    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
-    dom.root.style.width = util.option.asSize(options.width, '');
+              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
+              config._a[MONTH] = date.getUTCMonth();
+              config._a[DATE] = date.getUTCDate();
+          }
 
-    // calculate border widths
-    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
-    props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
-    props.border.bottom = props.border.top;
-    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+          // 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];
+          }
 
-    // calculate the heights. If any of the side panels is empty, we set the height to
-    // minus the border width, such that the border will be invisible
-    props.center.height = dom.center.offsetHeight;
-    props.left.height   = dom.left.offsetHeight;
-    props.right.height  = dom.right.offsetHeight;
-    props.top.height    = dom.top.clientHeight    || -props.border.top;
-    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
+          // 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];
+          }
 
-    // TODO: compensate borders when any of the panels is empty.
+          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
+          // Apply timezone offset from input. The actual zone can be changed
+          // with parseZone.
+          if (config._tzm != null) {
+              config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
+          }
+      }
 
-    // apply auto height
-    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
-    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
-    var autoHeight = props.top.height + contentHeight + props.bottom.height +
-      borderRootHeight + props.border.top + props.border.bottom;
-    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
+      function dateFromObject(config) {
+          var normalizedInput;
 
-    // calculate heights of the content panels
-    props.root.height = dom.root.offsetHeight;
-    props.background.height = props.root.height - borderRootHeight;
-    var containerHeight = props.root.height - props.top.height - props.bottom.height -
-      borderRootHeight;
-    props.centerContainer.height  = containerHeight;
-    props.leftContainer.height    = containerHeight;
-    props.rightContainer.height   = props.leftContainer.height;
+          if (config._d) {
+              return;
+          }
 
-    // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
-    props.background.width = props.root.width - borderRootWidth;
-    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
-    props.leftContainer.width = props.left.width;
-    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
-    props.rightContainer.width = props.right.width;
-    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-    props.center.width          = centerWidth;
-    props.centerContainer.width = centerWidth;
-    props.top.width             = centerWidth;
-    props.bottom.width          = centerWidth;
+          normalizedInput = normalizeObjectUnits(config._i);
+          config._a = [
+              normalizedInput.year,
+              normalizedInput.month,
+              normalizedInput.day,
+              normalizedInput.hour,
+              normalizedInput.minute,
+              normalizedInput.second,
+              normalizedInput.millisecond
+          ];
 
-    // resize the panels
-    dom.background.style.height           = props.background.height + 'px';
-    dom.backgroundVertical.style.height   = props.background.height + 'px';
-    dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
-    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+          dateFromConfig(config);
+      }
 
-    dom.background.style.width            = props.background.width + 'px';
-    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-    dom.backgroundHorizontalContainer.style.width  = props.background.width + 'px';
-    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-    dom.centerContainer.style.width       = props.center.width + 'px';
-    dom.top.style.width                   = props.top.width + 'px';
-    dom.bottom.style.width                = props.bottom.width + 'px';
-
-    // reposition the panels
-    dom.background.style.left           = '0';
-    dom.background.style.top            = '0';
-    dom.backgroundVertical.style.left   = props.left.width + 'px';
-    dom.backgroundVertical.style.top    = '0';
-    dom.backgroundHorizontalContainer.style.left = '0';
-    dom.backgroundHorizontalContainer.style.top  = props.top.height + 'px';
-    dom.centerContainer.style.left      = props.left.width + 'px';
-    dom.centerContainer.style.top       = props.top.height + 'px';
-    dom.leftContainer.style.left        = '0';
-    dom.leftContainer.style.top         = props.top.height + 'px';
-    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-    dom.rightContainer.style.top        = props.top.height + 'px';
-    dom.top.style.left                  = props.left.width + 'px';
-    dom.top.style.top                   = '0';
-    dom.bottom.style.left               = props.left.width + 'px';
-    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
-
-    // update the scrollTop, feasible range for the offset can be changed
-    // when the height of the Graph2d or of the contents of the center changed
-    this._updateScrollTop();
-
-    // reposition the scrollable contents
-    var offset = this.props.scrollTop;
-    if (options.orientation == 'bottom') {
-      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-          this.props.border.top - this.props.border.bottom, 0);
-    }
-    dom.center.style.left = '0';
-    dom.center.style.top  = offset + 'px';
-    dom.backgroundHorizontal.style.left = '0';
-    dom.backgroundHorizontal.style.top  = offset + 'px';
-    dom.left.style.left   = '0';
-    dom.left.style.top    = offset + 'px';
-    dom.right.style.left  = '0';
-    dom.right.style.top   = offset + 'px';
-
-    // show shadows when vertical scrolling is available
-    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
-    dom.shadowTop.style.visibility          = visibilityTop;
-    dom.shadowBottom.style.visibility       = visibilityBottom;
-    dom.shadowTopLeft.style.visibility      = visibilityTop;
-    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
-    dom.shadowTopRight.style.visibility     = visibilityTop;
-    dom.shadowBottomRight.style.visibility  = visibilityBottom;
-
-    // redraw all components
-    this.components.forEach(function (component) {
-      resized = component.redraw() || resized;
-    });
-    if (resized) {
-      // keep redrawing until all sizes are settled
-      this.redraw();
-    }
-  };
+      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()];
+          }
+      }
 
-  /**
-   * Convert a position on screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toTime = function(x) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+      // date from string and format string
+      function makeDateFromStringAndFormat(config) {
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toGlobalTime = function(x) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+          if (config._f === moment.ISO_8601) {
+              parseISO(config);
+              return;
+          }
 
-  /**
-   * Convert a datetime (Date object) into a position on the screen
-   * @param {Date}   time A date
-   * @return {int}   x    The position on the screen in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toScreen = function(time) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          config._a = [];
+          config._pf.empty = true;
 
+          // This array is used to make a Date, either with `new Date` or `Date.UTC`
+          var lang = getLangDefinition(config._l),
+              string = '' + config._i,
+              i, parsedInput, tokens, token, skipped,
+              stringLength = string.length,
+              totalParsedInputLength = 0;
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toGlobalScreen = function(time) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
 
-  /**
-   * Initialize watching when option autoResize is true
-   * @private
-   */
-  Graph2d.prototype._initAutoResize = function () {
-    if (this.options.autoResize == true) {
-      this._startAutoResize();
-    }
-    else {
-      this._stopAutoResize();
-    }
-  };
+          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);
+              }
+          }
 
-  /**
-   * Watch for changes in the size of the container. On resize, the Panel will
-   * automatically redraw itself.
-   * @private
-   */
-  Graph2d.prototype._startAutoResize = function () {
-    var me = this;
+          // add remaining unparsed input length to the string
+          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
+          if (string.length > 0) {
+              config._pf.unusedInput.push(string);
+          }
 
-    this._stopAutoResize();
+          // handle am pm
+          if (config._isPm && config._a[HOUR] < 12) {
+              config._a[HOUR] += 12;
+          }
+          // if is 12 am, change hours to 0
+          if (config._isPm === false && config._a[HOUR] === 12) {
+              config._a[HOUR] = 0;
+          }
 
-    this._onResize = function() {
-      if (me.options.autoResize != true) {
-        // stop watching when the option autoResize is changed to false
-        me._stopAutoResize();
-        return;
+          dateFromConfig(config);
+          checkOverflow(config);
       }
 
-      if (me.dom.root) {
-        // check whether the frame is resized
-        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
-          (me.dom.root.clientHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.clientWidth;
-          me.props.lastHeight = me.dom.root.clientHeight;
+      function unescapeFormat(s) {
+          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
+              return p1 || p2 || p3 || p4;
+          });
+      }
 
-          me.emit('change');
-        }
+      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
+      function regexpEscape(s) {
+          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
       }
-    };
 
-    // add event listener to window resize
-    util.addEventListener(window, 'resize', this._onResize);
+      // date from string and array of format strings
+      function makeDateFromStringAndArray(config) {
+          var tempConfig,
+              bestMoment,
 
-    this.watchTimer = setInterval(this._onResize, 1000);
-  };
+              scoreToBeat,
+              i,
+              currentScore;
 
-  /**
-   * Stop watching for a resize of the frame.
-   * @private
-   */
-  Graph2d.prototype._stopAutoResize = function () {
-    if (this.watchTimer) {
-      clearInterval(this.watchTimer);
-      this.watchTimer = undefined;
-    }
+          if (config._f.length === 0) {
+              config._pf.invalidFormat = true;
+              config._d = new Date(NaN);
+              return;
+          }
 
-    // remove event listener on window.resize
-    util.removeEventListener(window, 'resize', this._onResize);
-    this._onResize = null;
-  };
+          for (i = 0; i < config._f.length; i++) {
+              currentScore = 0;
+              tempConfig = extend({}, config);
+              tempConfig._pf = defaultParsingFlags();
+              tempConfig._f = config._f[i];
+              makeDateFromStringAndFormat(tempConfig);
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onTouch = function (event) {
-    this.touch.allowDragging = true;
-  };
+              if (!isValid(tempConfig)) {
+                  continue;
+              }
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onPinch = function (event) {
-    this.touch.allowDragging = false;
-  };
+              // if there is any input that was not parsed add a penalty for that format
+              currentScore += tempConfig._pf.charsLeftOver;
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onDragStart = function (event) {
-    this.touch.initialScrollTop = this.props.scrollTop;
-  };
+              //or tokens
+              currentScore += tempConfig._pf.unusedTokens.length * 10;
 
-  /**
-   * Move the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onDrag = function (event) {
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.touch.allowDragging) return;
+              tempConfig._pf.score = currentScore;
 
-    var delta = event.gesture.deltaY;
+              if (scoreToBeat == null || currentScore < scoreToBeat) {
+                  scoreToBeat = currentScore;
+                  bestMoment = tempConfig;
+              }
+          }
 
-    var oldScrollTop = this._getScrollTop();
-    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+          extend(config, bestMoment || tempConfig);
+      }
 
-    if (newScrollTop != oldScrollTop) {
-      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
-    }
-  };
+      // date from iso format
+      function parseISO(config) {
+          var i, l,
+              string = config._i,
+              match = isoRegex.exec(string);
 
-  /**
-   * Apply a scrollTop
-   * @param {Number} scrollTop
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Graph2d.prototype._setScrollTop = function (scrollTop) {
-    this.props.scrollTop = scrollTop;
-    this._updateScrollTop();
-    return this.props.scrollTop;
-  };
+          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;
+          }
+      }
 
-  /**
-   * Update the current scrollTop when the height of  the containers has been changed
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Graph2d.prototype._updateScrollTop = function () {
-    // recalculate the scrollTopMin
-    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
-    if (scrollTopMin != this.props.scrollTopMin) {
-      // in case of bottom orientation, change the scrollTop such that the contents
-      // do not move relative to the time axis at the bottom
-      if (this.options.orientation == 'bottom') {
-        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+      // date from iso format or fallback
+      function makeDateFromString(config) {
+          parseISO(config);
+          if (config._isValid === false) {
+              delete config._isValid;
+              moment.createFromInputFallback(config);
+          }
       }
-      this.props.scrollTopMin = scrollTopMin;
-    }
 
-    // limit the scrollTop to the feasible scroll range
-    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
-    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
+      function makeDateFromInput(config) {
+          var input = config._i,
+              matched = aspNetJsonRegex.exec(input);
 
-    return this.props.scrollTop;
-  };
+          if (input === undefined) {
+              config._d = new Date();
+          } else if (matched) {
+              config._d = new Date(+matched[1]);
+          } else if (typeof input === 'string') {
+              makeDateFromString(config);
+          } else if (isArray(input)) {
+              config._a = input.slice(0);
+              dateFromConfig(config);
+          } else if (isDate(input)) {
+              config._d = new Date(+input);
+          } else if (typeof(input) === 'object') {
+              dateFromObject(config);
+          } else if (typeof(input) === 'number') {
+              // from milliseconds
+              config._d = new Date(input);
+          } else {
+              moment.createFromInputFallback(config);
+          }
+      }
 
-  /**
-   * Get the current scrollTop
-   * @returns {number} scrollTop
-   * @private
-   */
-  Graph2d.prototype._getScrollTop = function () {
-    return this.props.scrollTop;
-  };
+      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);
 
-  module.exports = Graph2d;
+          //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;
+      }
 
-/***/ },
-/* 8 */
-/***/ function(module, exports, __webpack_require__) {
+      function parseWeekday(input, language) {
+          if (typeof input === 'string') {
+              if (!isNaN(input)) {
+                  input = parseInt(input, 10);
+              }
+              else {
+                  input = language.weekdaysParse(input);
+                  if (typeof input !== 'number') {
+                      return null;
+                  }
+              }
+          }
+          return input;
+      }
 
-  var util = __webpack_require__(1);
-  var moment = __webpack_require__(39);
-  var Component = __webpack_require__(12);
+      /************************************
+          Relative Time
+      ************************************/
 
-  /**
-   * @constructor Range
-   * A Range controls a numeric range with a start and end value.
-   * The Range adjusts the range based on mouse events or programmatic changes,
-   * and triggers events when the range is changing or has been changed.
-   * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
-   * @param {Object} [options]    See description at Range.setOptions
-   */
-  function Range(body, options) {
-    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
-    this.start = now.clone().add('days', -3).valueOf(); // Number
-    this.end = now.clone().add('days', 4).valueOf();   // Number
 
-    this.body = body;
+      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
+      function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
+          return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+      }
 
-    // default options
-    this.defaultOptions = {
-      start: null,
-      end: null,
-      direction: 'horizontal', // 'horizontal' or 'vertical'
-      moveable: true,
-      zoomable: true,
-      min: null,
-      max: null,
-      zoomMin: 10,                                // milliseconds
-      zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000  // milliseconds
-    };
-    this.options = util.extend({}, this.defaultOptions);
+      function relativeTime(milliseconds, withoutSuffix, lang) {
+          var seconds = round(Math.abs(milliseconds) / 1000),
+              minutes = round(seconds / 60),
+              hours = round(minutes / 60),
+              days = round(hours / 24),
+              years = round(days / 365),
+              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.dd && ['dd', days] ||
+                  days <= relativeTimeThresholds.dm && ['M'] ||
+                  days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
+                  years === 1 && ['y'] || ['yy', years];
+          args[2] = withoutSuffix;
+          args[3] = milliseconds > 0;
+          args[4] = lang;
+          return substituteTimeAgo.apply({}, args);
+      }
 
-    this.props = {
-      touch: {}
-    };
 
-    // drag listeners for dragging
-    this.body.emitter.on('dragstart', this._onDragStart.bind(this));
-    this.body.emitter.on('drag',      this._onDrag.bind(this));
-    this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
+      /************************************
+          Week of Year
+      ************************************/
 
-    // ignore dragging when holding
-    this.body.emitter.on('hold', this._onHold.bind(this));
 
-    // mouse wheel for zooming
-    this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));
-    this.body.emitter.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
-
-    // pinch to zoom
-    this.body.emitter.on('touch', this._onTouch.bind(this));
-    this.body.emitter.on('pinch', this._onPinch.bind(this));
+      // 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;
 
-    this.setOptions(options);
-  }
 
-  Range.prototype = new Component();
+          if (daysToDayOfWeek > end) {
+              daysToDayOfWeek -= 7;
+          }
 
-  /**
-   * Set options for the range controller
-   * @param {Object} options      Available options:
-   *                              {Number | Date | String} start  Start date for the range
-   *                              {Number | Date | String} end    End date for the range
-   *                              {Number} min    Minimum value for start
-   *                              {Number} max    Maximum value for end
-   *                              {Number} zoomMin    Set a minimum value for
-   *                                                  (end - start).
-   *                              {Number} zoomMax    Set a maximum value for
-   *                                                  (end - start).
-   *                              {Boolean} moveable Enable moving of the range
-   *                                                 by dragging. True by default
-   *                              {Boolean} zoomable Enable zooming of the range
-   *                                                 by pinching/scrolling. True by default
-   */
-  Range.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the options that we know
-      var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
-      util.selectiveExtend(fields, this.options, options);
+          if (daysToDayOfWeek < end - 7) {
+              daysToDayOfWeek += 7;
+          }
 
-      if ('start' in options || 'end' in options) {
-        // apply a new range. both start and end are optional
-        this.setRange(options.start, options.end);
+          adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
+          return {
+              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
+              year: adjustedMoment.year()
+          };
       }
-    }
-  };
 
-  /**
-   * Test whether direction has a valid value
-   * @param {String} direction    'horizontal' or 'vertical'
-   */
-  function validateDirection (direction) {
-    if (direction != 'horizontal' && direction != 'vertical') {
-      throw new TypeError('Unknown direction "' + direction + '". ' +
-          'Choose "horizontal" or "vertical".');
-    }
-  }
+      //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;
 
-  /**
-   * Set a new start and end range
-   * @param {Number} [start]
-   * @param {Number} [end]
-   */
-  Range.prototype.setRange = function(start, end) {
-    var changed = this._applyRange(start, end);
-    if (changed) {
-      var params = {
-        start: new Date(this.start),
-        end: new Date(this.end)
-      };
-      this.body.emitter.emit('rangechange', params);
-      this.body.emitter.emit('rangechanged', params);
-    }
-  };
+          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;
 
-  /**
-   * Set a new start and end range. This method is the same as setRange, but
-   * does not trigger a range change and range changed event, and it returns
-   * true when the range is changed
-   * @param {Number} [start]
-   * @param {Number} [end]
-   * @return {Boolean} changed
-   * @private
-   */
-  Range.prototype._applyRange = function(start, end) {
-    var newStart = (start != null) ? util.convert(start, 'Date').valueOf() : this.start,
-        newEnd   = (end != null)   ? util.convert(end, 'Date').valueOf()   : this.end,
-        max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
-        min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
-        diff;
+          return {
+              year: dayOfYear > 0 ? year : year - 1,
+              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
+          };
+      }
 
-    // check for valid number
-    if (isNaN(newStart) || newStart === null) {
-      throw new Error('Invalid start "' + start + '"');
-    }
-    if (isNaN(newEnd) || newEnd === null) {
-      throw new Error('Invalid end "' + end + '"');
-    }
+      /************************************
+          Top Level Functions
+      ************************************/
 
-    // prevent start < end
-    if (newEnd < newStart) {
-      newEnd = newStart;
-    }
+      function makeMoment(config) {
+          var input = config._i,
+              format = config._f;
 
-    // prevent start < min
-    if (min !== null) {
-      if (newStart < min) {
-        diff = (min - newStart);
-        newStart += diff;
-        newEnd += diff;
+          if (input === null || (format === undefined && input === '')) {
+              return moment.invalid({nullInput: true});
+          }
 
-        // prevent end > max
-        if (max != null) {
-          if (newEnd > max) {
-            newEnd = max;
+          if (typeof input === 'string') {
+              config._i = input = getLangDefinition().preparse(input);
           }
-        }
-      }
-    }
 
-    // prevent end > max
-    if (max !== null) {
-      if (newEnd > max) {
-        diff = (newEnd - max);
-        newStart -= diff;
-        newEnd -= diff;
+          if (moment.isMoment(input)) {
+              config = cloneMoment(input);
 
-        // prevent start < min
-        if (min != null) {
-          if (newStart < min) {
-            newStart = min;
+              config._d = new Date(+input._d);
+          } else if (format) {
+              if (isArray(format)) {
+                  makeDateFromStringAndArray(config);
+              } else {
+                  makeDateFromStringAndFormat(config);
+              }
+          } else {
+              makeDateFromInput(config);
           }
-        }
-      }
-    }
-
-    // prevent (end-start) < zoomMin
-    if (this.options.zoomMin !== null) {
-      var zoomMin = parseFloat(this.options.zoomMin);
-      if (zoomMin < 0) {
-        zoomMin = 0;
-      }
-      if ((newEnd - newStart) < zoomMin) {
-        if ((this.end - this.start) === zoomMin) {
-          // ignore this action, we are already zoomed to the minimum
-          newStart = this.start;
-          newEnd = this.end;
-        }
-        else {
-          // zoom to the minimum
-          diff = (zoomMin - (newEnd - newStart));
-          newStart -= diff / 2;
-          newEnd += diff / 2;
-        }
-      }
-    }
 
-    // prevent (end-start) > zoomMax
-    if (this.options.zoomMax !== null) {
-      var zoomMax = parseFloat(this.options.zoomMax);
-      if (zoomMax < 0) {
-        zoomMax = 0;
-      }
-      if ((newEnd - newStart) > zoomMax) {
-        if ((this.end - this.start) === zoomMax) {
-          // ignore this action, we are already zoomed to the maximum
-          newStart = this.start;
-          newEnd = this.end;
-        }
-        else {
-          // zoom to the maximum
-          diff = ((newEnd - newStart) - zoomMax);
-          newStart += diff / 2;
-          newEnd -= diff / 2;
-        }
+          return new Moment(config);
       }
-    }
 
-    var changed = (this.start != newStart || this.end != newEnd);
+      moment = function (input, format, lang, strict) {
+          var c;
 
-    this.start = newStart;
-    this.end = newEnd;
+          if (typeof(lang) === "boolean") {
+              strict = lang;
+              lang = 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 = lang;
+          c._strict = strict;
+          c._isUTC = false;
+          c._pf = defaultParsingFlags();
 
-    return changed;
-  };
+          return makeMoment(c);
+      };
 
-  /**
-   * Retrieve the current range.
-   * @return {Object} An object with start and end properties
-   */
-  Range.prototype.getRange = function() {
-    return {
-      start: this.start,
-      end: this.end
-    };
-  };
+      moment.suppressDeprecationWarnings = false;
 
-  /**
-   * Calculate the conversion offset and scale for current range, based on
-   * the provided width
-   * @param {Number} width
-   * @returns {{offset: number, scale: number}} conversion
-   */
-  Range.prototype.conversion = function (width) {
-    return Range.conversion(this.start, this.end, width);
-  };
+      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);
+      });
 
-  /**
-   * Static method to calculate the conversion offset and scale for a range,
-   * based on the provided start, end, and width
-   * @param {Number} start
-   * @param {Number} end
-   * @param {Number} width
-   * @returns {{offset: number, scale: number}} conversion
-   */
-  Range.conversion = function (start, end, width) {
-    if (width != 0 && (end - start != 0)) {
-      return {
-        offset: start,
-        scale: width / (end - start)
+      // 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;
       }
-    }
-    else {
-      return {
-        offset: 0,
-        scale: 1
-      };
-    }
-  };
 
-  /**
-   * Start dragging horizontally or vertically
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onDragStart = function(event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
+      moment.min = function () {
+          var args = [].slice.call(arguments, 0);
 
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
+          return pickBy('isBefore', args);
+      };
 
-    this.props.touch.start = this.start;
-    this.props.touch.end = this.end;
+      moment.max = function () {
+          var args = [].slice.call(arguments, 0);
 
-    if (this.body.dom.root) {
-      this.body.dom.root.style.cursor = 'move';
-    }
-  };
+          return pickBy('isAfter', args);
+      };
 
-  /**
-   * Perform dragging operation
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onDrag = function (event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
-    var direction = this.options.direction;
-    validateDirection(direction);
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
-    var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
-        interval = (this.props.touch.end - this.props.touch.start),
-        width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
-        diffRange = -delta / width * interval;
-    this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
-    this.body.emitter.emit('rangechange', {
-      start: new Date(this.start),
-      end:   new Date(this.end)
-    });
-  };
+      // creating with utc
+      moment.utc = function (input, format, lang, strict) {
+          var c;
 
-  /**
-   * Stop dragging operation
-   * @param {event} event
-   * @private
-   */
-  Range.prototype._onDragEnd = function (event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
+          if (typeof(lang) === "boolean") {
+              strict = lang;
+              lang = 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 = lang;
+          c._i = input;
+          c._f = format;
+          c._strict = strict;
+          c._pf = defaultParsingFlags();
 
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
+          return makeMoment(c).utc();
+      };
 
-    if (this.body.dom.root) {
-      this.body.dom.root.style.cursor = 'auto';
-    }
+      // creating with unix timestamp (in seconds)
+      moment.unix = function (input) {
+          return moment(input * 1000);
+      };
 
-    // fire a rangechanged event
-    this.body.emitter.emit('rangechanged', {
-      start: new Date(this.start),
-      end:   new Date(this.end)
-    });
-  };
+      // duration
+      moment.duration = function (input, key) {
+          var duration = input,
+              // matching against regexp is expensive, do it on demand
+              match = null,
+              sign,
+              ret,
+              parseIso;
 
-  /**
-   * Event handler for mouse wheel event, used to zoom
-   * Code from http://adomas.org/javascript-mouse-wheel/
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onMouseWheel = function(event) {
-    // only allow zooming when configured as zoomable and moveable
-    if (!(this.options.zoomable && this.options.moveable)) return;
+          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])
+              };
+          }
 
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta / 120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail / 3;
-    }
+          ret = new Duration(duration);
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-      // perform the zoom action. Delta is normally 1 or -1
+          if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
+              ret._lang = input._lang;
+          }
 
-      // adjust a negative delta such that zooming in with delta 0.1
-      // equals zooming out with a delta -0.1
-      var scale;
-      if (delta < 0) {
-        scale = 1 - (delta / 5);
-      }
-      else {
-        scale = 1 / (1 + (delta / 5)) ;
-      }
+          return ret;
+      };
 
-      // calculate center, the date to zoom around
-      var gesture = util.fakeGesture(this, event),
-          pointer = getPointer(gesture.center, this.body.dom.center),
-          pointerDate = this._pointerToDate(pointer);
+      // version number
+      moment.version = VERSION;
 
-      this.zoom(scale, pointerDate);
-    }
+      // default format
+      moment.defaultFormat = isoFormat;
 
-    // Prevent default actions caused by mouse wheel
-    // (else the page and timeline both zoom and scroll)
-    event.preventDefault();
-  };
+      // constant that refers to the ISO standard
+      moment.ISO_8601 = function () {};
 
-  /**
-   * Start of a touch gesture
-   * @private
-   */
-  Range.prototype._onTouch = function (event) {
-    this.props.touch.start = this.start;
-    this.props.touch.end = this.end;
-    this.props.touch.allowDragging = true;
-    this.props.touch.center = null;
-  };
+      // Plugins that add properties should also add the key here (null value),
+      // so we can properly clone ourselves.
+      moment.momentProperties = momentProperties;
 
-  /**
-   * On start of a hold gesture
-   * @private
-   */
-  Range.prototype._onHold = function () {
-    this.props.touch.allowDragging = false;
-  };
-
-  /**
-   * Handle pinch event
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onPinch = function (event) {
-    // only allow zooming when configured as zoomable and moveable
-    if (!(this.options.zoomable && this.options.moveable)) return;
-
-    this.props.touch.allowDragging = false;
-
-    if (event.gesture.touches.length > 1) {
-      if (!this.props.touch.center) {
-        this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
-      }
+      // 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 () {};
 
-      var scale = 1 / event.gesture.scale,
-          initDate = this._pointerToDate(this.props.touch.center);
+      // This function allows you to set a threshold for relative time strings
+      moment.relativeTimeThreshold = function(threshold, limit) {
+        if (relativeTimeThresholds[threshold] === undefined) {
+          return false;
+        }
+        relativeTimeThresholds[threshold] = limit;
+        return true;
+      };
 
-      // calculate new start and end
-      var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
-      var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
+      // This function will load languages and then set the global language.  If
+      // no arguments are passed in, it will simply return the current global
+      // language key.
+      moment.lang = function (key, values) {
+          var r;
+          if (!key) {
+              return moment.fn._lang._abbr;
+          }
+          if (values) {
+              loadLang(normalizeLanguage(key), values);
+          } else if (values === null) {
+              unloadLang(key);
+              key = 'en';
+          } else if (!languages[key]) {
+              getLangDefinition(key);
+          }
+          r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
+          return r._abbr;
+      };
 
-      // apply new range
-      this.setRange(newStart, newEnd);
-    }
-  };
+      // returns language data
+      moment.langData = function (key) {
+          if (key && key._lang && key._lang._abbr) {
+              key = key._lang._abbr;
+          }
+          return getLangDefinition(key);
+      };
 
-  /**
-   * Helper function to calculate the center date for zooming
-   * @param {{x: Number, y: Number}} pointer
-   * @return {number} date
-   * @private
-   */
-  Range.prototype._pointerToDate = function (pointer) {
-    var conversion;
-    var direction = this.options.direction;
+      // compare moment object
+      moment.isMoment = function (obj) {
+          return obj instanceof Moment ||
+              (obj != null &&  obj.hasOwnProperty('_isAMomentObject'));
+      };
 
-    validateDirection(direction);
+      // for typechecking Duration objects
+      moment.isDuration = function (obj) {
+          return obj instanceof Duration;
+      };
 
-    if (direction == 'horizontal') {
-      var width = this.body.domProps.center.width;
-      conversion = this.conversion(width);
-      return pointer.x / conversion.scale + conversion.offset;
-    }
-    else {
-      var height = this.body.domProps.center.height;
-      conversion = this.conversion(height);
-      return pointer.y / conversion.scale + conversion.offset;
-    }
-  };
+      for (i = lists.length - 1; i >= 0; --i) {
+          makeList(lists[i]);
+      }
 
-  /**
-   * Get the pointer location relative to the location of the dom element
-   * @param {{pageX: Number, pageY: Number}} touch
-   * @param {Element} element   HTML DOM element
-   * @return {{x: Number, y: Number}} pointer
-   * @private
-   */
-  function getPointer (touch, element) {
-    return {
-      x: touch.pageX - util.getAbsoluteLeft(element),
-      y: touch.pageY - util.getAbsoluteTop(element)
-    };
-  }
+      moment.normalizeUnits = function (units) {
+          return normalizeUnits(units);
+      };
 
-  /**
-   * Zoom the range the given scale in or out. Start and end date will
-   * be adjusted, and the timeline will be redrawn. You can optionally give a
-   * date around which to zoom.
-   * For example, try scale = 0.9 or 1.1
-   * @param {Number} scale      Scaling factor. Values above 1 will zoom out,
-   *                            values below 1 will zoom in.
-   * @param {Number} [center]   Value representing a date around which will
-   *                            be zoomed.
-   */
-  Range.prototype.zoom = function(scale, center) {
-    // if centerDate is not provided, take it half between start Date and end Date
-    if (center == null) {
-      center = (this.start + this.end) / 2;
-    }
+      moment.invalid = function (flags) {
+          var m = moment.utc(NaN);
+          if (flags != null) {
+              extend(m._pf, flags);
+          }
+          else {
+              m._pf.userInvalidated = true;
+          }
 
-    // calculate new start and end
-    var newStart = center + (this.start - center) * scale;
-    var newEnd = center + (this.end - center) * scale;
+          return m;
+      };
 
-    this.setRange(newStart, newEnd);
-  };
+      moment.parseZone = function () {
+          return moment.apply(null, arguments).parseZone();
+      };
 
-  /**
-   * Move the range with a given delta to the left or right. Start and end
-   * value will be adjusted. For example, try delta = 0.1 or -0.1
-   * @param {Number}  delta     Moving amount. Positive value will move right,
-   *                            negative value will move left
-   */
-  Range.prototype.move = function(delta) {
-    // zoom start Date and end Date relative to the centerDate
-    var diff = (this.end - this.start);
+      moment.parseTwoDigitYear = function (input) {
+          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+      };
 
-    // apply new values
-    var newStart = this.start + diff * delta;
-    var newEnd = this.end + diff * delta;
+      /************************************
+          Moment Prototype
+      ************************************/
 
-    // TODO: reckon with min and max range
 
-    this.start = newStart;
-    this.end = newEnd;
-  };
+      extend(moment.fn = Moment.prototype, {
 
-  /**
-   * Move the range to a new center point
-   * @param {Number} moveTo      New center point of the range
-   */
-  Range.prototype.moveTo = function(moveTo) {
-    var center = (this.start + this.end) / 2;
+          clone : function () {
+              return moment(this);
+          },
 
-    var diff = center - moveTo;
+          valueOf : function () {
+              return +this._d + ((this._offset || 0) * 60000);
+          },
 
-    // calculate new start and end
-    var newStart = this.start - diff;
-    var newEnd = this.end - diff;
+          unix : function () {
+              return Math.floor(+this / 1000);
+          },
 
-    this.setRange(newStart, newEnd);
-  };
+          toString : function () {
+              return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
+          },
 
-  module.exports = Range;
+          toDate : function () {
+              return this._offset ? new Date(+this) : this._d;
+          },
 
+          toISOString : function () {
+              var m = moment(this).utc();
+              if (0 < m.year() && m.year() <= 9999) {
+                  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]');
+              }
+          },
 
-/***/ },
-/* 9 */
-/***/ function(module, exports, __webpack_require__) {
+          toArray : function () {
+              var m = this;
+              return [
+                  m.year(),
+                  m.month(),
+                  m.date(),
+                  m.hours(),
+                  m.minutes(),
+                  m.seconds(),
+                  m.milliseconds()
+              ];
+          },
 
-  // Utility functions for ordering and stacking of items
-  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
+          isValid : function () {
+              return isValid(this);
+          },
 
-  /**
-   * Order items by their start data
-   * @param {Item[]} items
-   */
-  exports.orderByStart = function(items) {
-    items.sort(function (a, b) {
-      return a.data.start - b.data.start;
-    });
-  };
+          isDSTShifted : function () {
 
-  /**
-   * Order items by their end date. If they have no end date, their start date
-   * is used.
-   * @param {Item[]} items
-   */
-  exports.orderByEnd = function(items) {
-    items.sort(function (a, b) {
-      var aTime = ('end' in a.data) ? a.data.end : a.data.start,
-          bTime = ('end' in b.data) ? b.data.end : b.data.start;
+              if (this._a) {
+                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
+              }
 
-      return aTime - bTime;
-    });
-  };
+              return false;
+          },
 
-  /**
-   * Adjust vertical positions of the items such that they don't overlap each
-   * other.
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: number, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   * @param {boolean} [force=false]
-   *            If true, all items will be repositioned. If false (default), only
-   *            items having a top===null will be re-stacked
-   */
-  exports.stack = function(items, margin, force) {
-    var i, iMax;
+          parsingFlags : function () {
+              return extend({}, this._pf);
+          },
 
-    if (force) {
-      // reset top position of all items
-      for (i = 0, iMax = items.length; i < iMax; i++) {
-        items[i].top = null;
-      }
-    }
+          invalidAt: function () {
+              return this._pf.overflow;
+          },
 
-    // calculate new, non-overlapping positions
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      var item = items[i];
-      if (item.top === null) {
-        // initialize top position
-        item.top = margin.axis;
+          utc : function () {
+              return this.zone(0);
+          },
 
-        do {
-          // TODO: optimize checking for overlap. when there is a gap without items,
-          //       you only need to check for items from the next item on, not from zero
-          var collidingItem = null;
-          for (var j = 0, jj = items.length; j < jj; j++) {
-            var other = items[j];
-            if (other.top !== null && other !== item && exports.collision(item, other, margin.item)) {
-              collidingItem = other;
-              break;
-            }
-          }
+          local : function () {
+              this.zone(0);
+              this._isUTC = false;
+              return this;
+          },
 
-          if (collidingItem != null) {
-            // There is a collision. Reposition the items above the colliding element
-            item.top = collidingItem.top + collidingItem.height + margin.item;
-          }
-        } while (collidingItem);
-      }
-    }
-  };
+          format : function (inputString) {
+              var output = formatMoment(this, inputString || moment.defaultFormat);
+              return this.lang().postformat(output);
+          },
 
-  /**
-   * Adjust vertical positions of the items without stacking them
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: number, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   */
-  exports.nostack = function(items, margin) {
-    var i, iMax;
+          add : function (input, val) {
+              var dur;
+              // switch args to support add('s', 1) and add(1, 's')
+              if (typeof input === 'string' && typeof val === 'string') {
+                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
+              } else if (typeof input === 'string') {
+                  dur = moment.duration(+val, input);
+              } else {
+                  dur = moment.duration(input, val);
+              }
+              addOrSubtractDurationFromMoment(this, dur, 1);
+              return this;
+          },
 
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].top = margin.axis;
-    }
-  };
+          subtract : function (input, val) {
+              var dur;
+              // switch args to support subtract('s', 1) and subtract(1, 's')
+              if (typeof input === 'string' && typeof val === 'string') {
+                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
+              } else if (typeof input === 'string') {
+                  dur = moment.duration(+val, input);
+              } else {
+                  dur = moment.duration(input, val);
+              }
+              addOrSubtractDurationFromMoment(this, dur, -1);
+              return this;
+          },
 
-  /**
-   * Test if the two provided items collide
-   * The items must have parameters left, width, top, and height.
-   * @param {Item} a          The first item
-   * @param {Item} b          The second item
-   * @param {Number} margin   A minimum required margin.
-   *                          If margin is provided, the two items will be
-   *                          marked colliding when they overlap or
-   *                          when the margin between the two is smaller than
-   *                          the requested margin.
-   * @return {boolean}        true if a and b collide, else false
-   */
-  exports.collision = function(a, b, margin) {
-    return ((a.left - margin + EPSILON)       < (b.left + b.width) &&
-        (a.left + a.width + margin - EPSILON) > b.left &&
-        (a.top - margin + EPSILON)            < (b.top + b.height) &&
-        (a.top + a.height + margin - EPSILON) > b.top);
-  };
+          diff : function (input, units, asFloat) {
+              var that = makeAs(input, this),
+                  zoneDiff = (this.zone() - that.zone()) * 6e4,
+                  diff, output;
 
+              units = normalizeUnits(units);
 
-/***/ },
-/* 10 */
-/***/ function(module, exports, __webpack_require__) {
+              if (units === 'year' || units === 'month') {
+                  // average number of days in the months in the given dates
+                  diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
+                  // difference in months
+                  output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
+                  // adjust by taking difference in days, average number of days
+                  // and dst in the given months.
+                  output += ((this - moment(this).startOf('month')) -
+                          (that - moment(that).startOf('month'))) / diff;
+                  // same as above but with zones, to negate all dst
+                  output -= ((this.zone() - moment(this).startOf('month').zone()) -
+                          (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
+                  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);
+          },
 
-  var moment = __webpack_require__(39);
+          from : function (time, withoutSuffix) {
+              return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
+          },
 
-  /**
-   * @constructor  TimeStep
-   * The class TimeStep is an iterator for dates. You provide a start date and an
-   * end date. The class itself determines the best scale (step size) based on the
-   * provided start Date, end Date, and minimumStep.
-   *
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   *
-   * Alternatively, you can set a scale by hand.
-   * After creation, you can initialize the class by executing first(). Then you
-   * can iterate from the start date to the end date via next(). You can check if
-   * the end date is reached with the function hasNext(). After each step, you can
-   * retrieve the current date via getCurrent().
-   * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
-   * days, to years.
-   *
-   * Version: 1.2
-   *
-   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
-   *                               or new Date(2010, 9, 21, 23, 45, 00)
-   * @param {Date} [end]           The end date
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  function TimeStep(start, end, minimumStep) {
-    // variables
-    this.current = new Date();
-    this._start = new Date();
-    this._end = new Date();
+          fromNow : function (withoutSuffix) {
+              return this.from(moment(), withoutSuffix);
+          },
 
-    this.autoScale  = true;
-    this.scale = TimeStep.SCALE.DAY;
-    this.step = 1;
+          calendar : function (time) {
+              // We want to compare the start of today, vs this.
+              // Getting start-of-today depends on whether we're zone'd 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.lang().calendar(format, this));
+          },
 
-    // initialize the range
-    this.setRange(start, end, minimumStep);
-  }
+          isLeapYear : function () {
+              return isLeapYear(this.year());
+          },
 
-  /// enum scale
-  TimeStep.SCALE = {
-    MILLISECOND: 1,
-    SECOND: 2,
-    MINUTE: 3,
-    HOUR: 4,
-    DAY: 5,
-    WEEKDAY: 6,
-    MONTH: 7,
-    YEAR: 8
-  };
+          isDST : function () {
+              return (this.zone() < this.clone().month(0).zone() ||
+                  this.zone() < this.clone().month(5).zone());
+          },
 
+          day : function (input) {
+              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
+              if (input != null) {
+                  input = parseWeekday(input, this.lang());
+                  return this.add({ d : input - day });
+              } else {
+                  return day;
+              }
+          },
 
-  /**
-   * Set a new range
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   * @param {Date} [start]      The start date and time.
-   * @param {Date} [end]        The end date and time.
-   * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  TimeStep.prototype.setRange = function(start, end, minimumStep) {
-    if (!(start instanceof Date) || !(end instanceof Date)) {
-      throw  "No legal start or end date in method setRange";
-    }
+          month : makeAccessor('Month', true),
 
-    this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
-    this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
+          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 */
+              }
 
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep);
-    }
-  };
+              // weeks are a special case
+              if (units === 'week') {
+                  this.weekday(0);
+              } else if (units === 'isoWeek') {
+                  this.isoWeekday(1);
+              }
 
-  /**
-   * Set the range iterator to the start date.
-   */
-  TimeStep.prototype.first = function() {
-    this.current = new Date(this._start.valueOf());
-    this.roundToMinor();
-  };
+              // quarters are also special
+              if (units === 'quarter') {
+                  this.month(Math.floor(this.month() / 3) * 3);
+              }
 
-  /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
-   */
-  TimeStep.prototype.roundToMinor = function() {
-    // round to floor
-    // IMPORTANT: we have no breaks in this switch! (this is no bug)
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.scale) {
-      case TimeStep.SCALE.YEAR:
-        this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
-        this.current.setMonth(0);
-      case TimeStep.SCALE.MONTH:        this.current.setDate(1);
-      case TimeStep.SCALE.DAY:          // intentional fall through
-      case TimeStep.SCALE.WEEKDAY:      this.current.setHours(0);
-      case TimeStep.SCALE.HOUR:         this.current.setMinutes(0);
-      case TimeStep.SCALE.MINUTE:       this.current.setSeconds(0);
-      case TimeStep.SCALE.SECOND:       this.current.setMilliseconds(0);
-      //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
-    }
+              return this;
+          },
 
-    if (this.step != 1) {
-      // round down to the first minor value that is a multiple of the current step size
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step);  break;
-        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
-        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
-        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step);  break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
-        default: break;
-      }
-    }
-  };
+          endOf: function (units) {
+              units = normalizeUnits(units);
+              return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
+          },
 
-  /**
-   * Check if the there is a next step
-   * @return {boolean}  true if the current date has not passed the end date
-   */
-  TimeStep.prototype.hasNext = function () {
-    return (this.current.valueOf() <= this._end.valueOf());
-  };
+          isAfter: function (input, units) {
+              units = typeof units !== 'undefined' ? units : 'millisecond';
+              return +this.clone().startOf(units) > +moment(input).startOf(units);
+          },
 
-  /**
-   * Do the next step
-   */
-  TimeStep.prototype.next = function() {
-    var prev = this.current.valueOf();
+          isBefore: function (input, units) {
+              units = typeof units !== 'undefined' ? units : 'millisecond';
+              return +this.clone().startOf(units) < +moment(input).startOf(units);
+          },
 
-    // Two cases, needed to prevent issues with switching daylight savings
-    // (end of March and end of October)
-    if (this.current.getMonth() < 6)   {
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:
+          isSame: function (input, units) {
+              units = units || 'ms';
+              return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
+          },
 
-          this.current = new Date(this.current.valueOf() + this.step); break;
-        case TimeStep.SCALE.SECOND:       this.current = new Date(this.current.valueOf() + this.step * 1000); break;
-        case TimeStep.SCALE.MINUTE:       this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
-        case TimeStep.SCALE.HOUR:
-          this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
-          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
-          var h = this.current.getHours();
-          this.current.setHours(h - (h % this.step));
-          break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
-        default:                      break;
-      }
-    }
-    else {
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  this.current = new Date(this.current.valueOf() + this.step); break;
-        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() + this.step); break;
-        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() + this.step); break;
-        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() + this.step); break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
-        default:                      break;
-      }
-    }
+          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;
+                   }
+           ),
 
-    if (this.step != 1) {
-      // round down to the correct major value
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0);  break;
-        case TimeStep.SCALE.SECOND:       if(this.current.getSeconds() < this.step) this.current.setSeconds(0);  break;
-        case TimeStep.SCALE.MINUTE:       if(this.current.getMinutes() < this.step) this.current.setMinutes(0);  break;
-        case TimeStep.SCALE.HOUR:         if(this.current.getHours() < this.step) this.current.setHours(0);  break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
-        case TimeStep.SCALE.MONTH:        if(this.current.getMonth() < this.step) this.current.setMonth(0);  break;
-        case TimeStep.SCALE.YEAR:         break; // nothing to do for year
-        default:                break;
-      }
-    }
+          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;
+                  }
+          ),
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current.valueOf() == prev) {
-      this.current = new Date(this._end.valueOf());
-    }
-  };
+          // keepTime = true means only change the timezone, without affecting
+          // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
+          // It is possible that 5:31:26 doesn't exist int zone +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.
+          zone : function (input, keepTime) {
+              var offset = this._offset || 0;
+              if (input != null) {
+                  if (typeof input === "string") {
+                      input = timezoneMinutesFromString(input);
+                  }
+                  if (Math.abs(input) < 16) {
+                      input = input * 60;
+                  }
+                  this._offset = input;
+                  this._isUTC = true;
+                  if (offset !== input) {
+                      if (!keepTime || this._changeInProgress) {
+                          addOrSubtractDurationFromMoment(this,
+                                  moment.duration(offset - input, 'm'), 1, false);
+                      } else if (!this._changeInProgress) {
+                          this._changeInProgress = true;
+                          moment.updateOffset(this, true);
+                          this._changeInProgress = null;
+                      }
+                  }
+              } else {
+                  return this._isUTC ? offset : this._d.getTimezoneOffset();
+              }
+              return this;
+          },
 
+          zoneAbbr : function () {
+              return this._isUTC ? "UTC" : "";
+          },
 
-  /**
-   * Get the current datetime
-   * @return {Date}  current The current date
-   */
-  TimeStep.prototype.getCurrent = function() {
-    return this.current;
-  };
+          zoneName : function () {
+              return this._isUTC ? "Coordinated Universal Time" : "";
+          },
 
-  /**
-   * Set a custom scale. Autoscaling will be disabled.
-   * For example setScale(SCALE.MINUTES, 5) will result
-   * in minor steps of 5 minutes, and major steps of an hour.
-   *
-   * @param {TimeStep.SCALE} newScale
-   *                               A scale. Choose from SCALE.MILLISECOND,
-   *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
-   *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
-   *                               SCALE.YEAR.
-   * @param {Number}     newStep   A step size, by default 1. Choose for
-   *                               example 1, 2, 5, or 10.
-   */
-  TimeStep.prototype.setScale = function(newScale, newStep) {
-    this.scale = newScale;
+          parseZone : function () {
+              if (this._tzm) {
+                  this.zone(this._tzm);
+              } else if (typeof this._i === 'string') {
+                  this.zone(this._i);
+              }
+              return this;
+          },
 
-    if (newStep > 0) {
-      this.step = newStep;
-    }
+          hasAlignedHourOffset : function (input) {
+              if (!input) {
+                  input = 0;
+              }
+              else {
+                  input = moment(input).zone();
+              }
 
-    this.autoScale = false;
-  };
+              return (this.zone() - input) % 60 === 0;
+          },
 
-  /**
-   * Enable or disable autoscaling
-   * @param {boolean} enable  If true, autoascaling is set true
-   */
-  TimeStep.prototype.setAutoScale = function (enable) {
-    this.autoScale = enable;
-  };
+          daysInMonth : function () {
+              return daysInMonth(this.year(), this.month());
+          },
 
+          dayOfYear : function (input) {
+              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
+              return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
+          },
 
-  /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
-   */
-  TimeStep.prototype.setMinimumStep = function(minimumStep) {
-    if (minimumStep == undefined) {
-      return;
-    }
+          quarter : function (input) {
+              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
+          },
 
-    var stepYear       = (1000 * 60 * 60 * 24 * 30 * 12);
-    var stepMonth      = (1000 * 60 * 60 * 24 * 30);
-    var stepDay        = (1000 * 60 * 60 * 24);
-    var stepHour       = (1000 * 60 * 60);
-    var stepMinute     = (1000 * 60);
-    var stepSecond     = (1000);
-    var stepMillisecond= (1);
+          weekYear : function (input) {
+              var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
+              return input == null ? year : this.add("y", (input - year));
+          },
 
-    // find the smallest step that is larger than the provided minimumStep
-    if (stepYear*1000 > minimumStep)        {this.scale = TimeStep.SCALE.YEAR;        this.step = 1000;}
-    if (stepYear*500 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 500;}
-    if (stepYear*100 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 100;}
-    if (stepYear*50 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 50;}
-    if (stepYear*10 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 10;}
-    if (stepYear*5 > minimumStep)           {this.scale = TimeStep.SCALE.YEAR;        this.step = 5;}
-    if (stepYear > minimumStep)             {this.scale = TimeStep.SCALE.YEAR;        this.step = 1;}
-    if (stepMonth*3 > minimumStep)          {this.scale = TimeStep.SCALE.MONTH;       this.step = 3;}
-    if (stepMonth > minimumStep)            {this.scale = TimeStep.SCALE.MONTH;       this.step = 1;}
-    if (stepDay*5 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 5;}
-    if (stepDay*2 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 2;}
-    if (stepDay > minimumStep)              {this.scale = TimeStep.SCALE.DAY;         this.step = 1;}
-    if (stepDay/2 > minimumStep)            {this.scale = TimeStep.SCALE.WEEKDAY;     this.step = 1;}
-    if (stepHour*4 > minimumStep)           {this.scale = TimeStep.SCALE.HOUR;        this.step = 4;}
-    if (stepHour > minimumStep)             {this.scale = TimeStep.SCALE.HOUR;        this.step = 1;}
-    if (stepMinute*15 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 15;}
-    if (stepMinute*10 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 10;}
-    if (stepMinute*5 > minimumStep)         {this.scale = TimeStep.SCALE.MINUTE;      this.step = 5;}
-    if (stepMinute > minimumStep)           {this.scale = TimeStep.SCALE.MINUTE;      this.step = 1;}
-    if (stepSecond*15 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 15;}
-    if (stepSecond*10 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 10;}
-    if (stepSecond*5 > minimumStep)         {this.scale = TimeStep.SCALE.SECOND;      this.step = 5;}
-    if (stepSecond > minimumStep)           {this.scale = TimeStep.SCALE.SECOND;      this.step = 1;}
-    if (stepMillisecond*200 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
-    if (stepMillisecond*100 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
-    if (stepMillisecond*50 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
-    if (stepMillisecond*10 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
-    if (stepMillisecond*5 > minimumStep)    {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
-    if (stepMillisecond > minimumStep)      {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
-  };
+          isoWeekYear : function (input) {
+              var year = weekOfYear(this, 1, 4).year;
+              return input == null ? year : this.add("y", (input - year));
+          },
 
-  /**
-   * 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
-   */
-  TimeStep.prototype.snap = function(date) {
-    var clone = new Date(date.valueOf());
+          week : function (input) {
+              var week = this.lang().week(this);
+              return input == null ? week : this.add("d", (input - week) * 7);
+          },
 
-    if (this.scale == TimeStep.SCALE.YEAR) {
-      var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
-      clone.setFullYear(Math.round(year / this.step) * this.step);
-      clone.setMonth(0);
-      clone.setDate(0);
-      clone.setHours(0);
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.MONTH) {
-      if (clone.getDate() > 15) {
-        clone.setDate(1);
-        clone.setMonth(clone.getMonth() + 1);
-        // important: first set Date to 1, after that change the month.
-      }
-      else {
-        clone.setDate(1);
-      }
+          isoWeek : function (input) {
+              var week = weekOfYear(this, 1, 4).week;
+              return input == null ? week : this.add("d", (input - week) * 7);
+          },
 
-      clone.setHours(0);
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.DAY) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 5:
-        case 2:
-          clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
-        default:
-          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
-      }
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.WEEKDAY) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 5:
-        case 2:
-          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
-        default:
-          clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
-      }
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.HOUR) {
-      switch (this.step) {
-        case 4:
-          clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
-        default:
-          clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
-      }
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    } else if (this.scale == TimeStep.SCALE.MINUTE) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 15:
-        case 10:
-          clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
-          clone.setSeconds(0);
-          break;
-        case 5:
-          clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
-        default:
-          clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
-      }
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.SECOND) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 15:
-        case 10:
-          clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
-          clone.setMilliseconds(0);
-          break;
-        case 5:
-          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
-        default:
-          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
-      }
-    }
-    else if (this.scale == TimeStep.SCALE.MILLISECOND) {
-      var step = this.step > 5 ? this.step / 2 : 1;
-      clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
-    }
-    
-    return clone;
-  };
+          weekday : function (input) {
+              var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
+              return input == null ? weekday : this.add("d", input - weekday);
+          },
 
-  /**
-   * Check if the current value is a major value (for example when the step
-   * is DAY, a major value is each first day of the MONTH)
-   * @return {boolean} true if current date is major, else false.
-   */
-  TimeStep.prototype.isMajor = function() {
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:
-        return (this.current.getMilliseconds() == 0);
-      case TimeStep.SCALE.SECOND:
-        return (this.current.getSeconds() == 0);
-      case TimeStep.SCALE.MINUTE:
-        return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
-      // Note: this is no bug. Major label is equal for both minute and hour scale
-      case TimeStep.SCALE.HOUR:
-        return (this.current.getHours() == 0);
-      case TimeStep.SCALE.WEEKDAY: // intentional fall through
-      case TimeStep.SCALE.DAY:
-        return (this.current.getDate() == 1);
-      case TimeStep.SCALE.MONTH:
-        return (this.current.getMonth() == 0);
-      case TimeStep.SCALE.YEAR:
-        return false;
-      default:
-        return false;
-    }
-  };
+          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);
+          },
 
+          isoWeeksInYear : function () {
+              return weeksInYear(this.year(), 1, 4);
+          },
 
-  /**
-   * Returns formatted text for the minor axislabel, depending on the current
-   * date and the scale. For example when scale is MINUTE, the current time is
-   * formatted as "hh:mm".
-   * @param {Date} [date] custom date. if not provided, current date is taken
-   */
-  TimeStep.prototype.getLabelMinor = function(date) {
-    if (date == undefined) {
-      date = this.current;
-    }
+          weeksInYear : function () {
+              var weekInfo = this._lang._week;
+              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
+          },
 
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:  return moment(date).format('SSS');
-      case TimeStep.SCALE.SECOND:       return moment(date).format('s');
-      case TimeStep.SCALE.MINUTE:       return moment(date).format('HH:mm');
-      case TimeStep.SCALE.HOUR:         return moment(date).format('HH:mm');
-      case TimeStep.SCALE.WEEKDAY:      return moment(date).format('ddd D');
-      case TimeStep.SCALE.DAY:          return moment(date).format('D');
-      case TimeStep.SCALE.MONTH:        return moment(date).format('MMM');
-      case TimeStep.SCALE.YEAR:         return moment(date).format('YYYY');
-      default:                          return '';
-    }
-  };
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units]();
+          },
 
+          set : function (units, value) {
+              units = normalizeUnits(units);
+              if (typeof this[units] === 'function') {
+                  this[units](value);
+              }
+              return this;
+          },
 
-  /**
-   * Returns formatted text for the major axis label, depending on the current
-   * date and the scale. For example when scale is MINUTE, the major scale is
-   * hours, and the hour will be formatted as "hh".
-   * @param {Date} [date] custom date. if not provided, current date is taken
-   */
-  TimeStep.prototype.getLabelMajor = function(date) {
-    if (date == undefined) {
-      date = this.current;
-    }
+          // If passed a language key, it will set the language for this
+          // instance.  Otherwise, it will return the language configuration
+          // variables for this instance.
+          lang : function (key) {
+              if (key === undefined) {
+                  return this._lang;
+              } else {
+                  this._lang = getLangDefinition(key);
+                  return this;
+              }
+          }
+      });
 
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
-      case TimeStep.SCALE.SECOND:     return moment(date).format('D MMMM HH:mm');
-      case TimeStep.SCALE.MINUTE:
-      case TimeStep.SCALE.HOUR:       return moment(date).format('ddd D MMMM');
-      case TimeStep.SCALE.WEEKDAY:
-      case TimeStep.SCALE.DAY:        return moment(date).format('MMMM YYYY');
-      case TimeStep.SCALE.MONTH:      return moment(date).format('YYYY');
-      case TimeStep.SCALE.YEAR:       return '';
-      default:                        return '';
-    }
-  };
+      function rawMonthSetter(mom, value) {
+          var dayOfMonth;
 
-  module.exports = TimeStep;
+          // TODO: Move this out of here!
+          if (typeof value === 'string') {
+              value = mom.lang().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;
+      }
 
-/***/ },
-/* 11 */
-/***/ function(module, exports, __webpack_require__) {
+      function rawGetter(mom, unit) {
+          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
+      }
 
-  var Emitter = __webpack_require__(41);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Point3d = __webpack_require__(33);
-  var Point2d = __webpack_require__(34);
-  var Filter = __webpack_require__(35);
-  var StepNumber = __webpack_require__(36);
+      function rawSetter(mom, unit, value) {
+          if (unit === 'Month') {
+              return rawMonthSetter(mom, value);
+          } else {
+              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
+          }
+      }
 
-  /**
-   * @constructor Graph3d
-   * Graph3d displays data in 3d.
-   *
-   * Graph3d is developed in javascript as a Google Visualization Chart.
-   *
-   * @param {Element} container   The DOM element in which the Graph3d will
-   *                              be created. Normally a div element.
-   * @param {DataSet | DataView | Array} [data]
-   * @param {Object} [options]
-   */
-  function Graph3d(container, data, options) {
-    if (!(this instanceof Graph3d)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+      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);
+              }
+          };
+      }
 
-    // create variables and set default values
-    this.containerElement = container;
-    this.width = '400px';
-    this.height = '400px';
-    this.margin = 10; // px
-    this.defaultXCenter = '55%';
-    this.defaultYCenter = '50%';
+      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.xLabel = 'x';
-    this.yLabel = 'y';
-    this.zLabel = 'z';
-    this.filterLabel = 'time';
-    this.legendLabel = 'value';
+      // 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;
 
-    this.style = Graph3d.STYLE.DOT;
-    this.showPerspective = true;
-    this.showGrid = true;
-    this.keepAspectRatio = true;
-    this.showShadow = false;
-    this.showGrayBottom = false; // TODO: this does not work correctly
-    this.showTooltip = false;
-    this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube'
+      // add aliased format methods
+      moment.fn.toJSON = moment.fn.toISOString;
 
-    this.animationInterval = 1000; // milliseconds
-    this.animationPreload = false;
+      /************************************
+          Duration Prototype
+      ************************************/
 
-    this.camera = new Graph3d.Camera();
-    this.eye = new Point3d(0, 0, -1);  // TODO: set eye.z about 3/4 of the width of the window?
 
-    this.dataTable = null;  // The original data table
-    this.dataPoints = null; // The table with point objects
+      extend(moment.duration.fn = Duration.prototype, {
 
-    // the column indexes
-    this.colX = undefined;
-    this.colY = undefined;
-    this.colZ = undefined;
-    this.colValue = undefined;
-    this.colFilter = undefined;
+          _bubble : function () {
+              var milliseconds = this._milliseconds,
+                  days = this._days,
+                  months = this._months,
+                  data = this._data,
+                  seconds, minutes, hours, years;
 
-    this.xMin = 0;
-    this.xStep = undefined; // auto by default
-    this.xMax = 1;
-    this.yMin = 0;
-    this.yStep = undefined; // auto by default
-    this.yMax = 1;
-    this.zMin = 0;
-    this.zStep = undefined; // auto by default
-    this.zMax = 1;
-    this.valueMin = 0;
-    this.valueMax = 1;
-    this.xBarWidth = 1;
-    this.yBarWidth = 1;
-    // TODO: customize axis range
+              // The following code bubbles up values, see the tests for
+              // examples of what that means.
+              data.milliseconds = milliseconds % 1000;
 
-    // constants
-    this.colorAxis = '#4D4D4D';
-    this.colorGrid = '#D3D3D3';
-    this.colorDot = '#7DC1FF';
-    this.colorDotBorder = '#3267D2';
+              seconds = absRound(milliseconds / 1000);
+              data.seconds = seconds % 60;
 
-    // create a frame and canvas
-    this.create();
+              minutes = absRound(seconds / 60);
+              data.minutes = minutes % 60;
 
-    // apply options (also when undefined)
-    this.setOptions(options);
+              hours = absRound(minutes / 60);
+              data.hours = hours % 24;
 
-    // apply data
-    if (data) {
-      this.setData(data);
-    }
-  }
+              days += absRound(hours / 24);
+              data.days = days % 30;
 
-  // Extend Graph3d with an Emitter mixin
-  Emitter(Graph3d.prototype);
+              months += absRound(days / 30);
+              data.months = months % 12;
 
-  /**
-   * @class Camera
-   * The camera is mounted on a (virtual) camera arm. The camera arm can rotate
-   * The camera is always looking in the direction of the origin of the arm.
-   * This way, the camera always rotates around one fixed point, the location
-   * of the camera arm.
-   *
-   * Documentation:
-   *   http://en.wikipedia.org/wiki/3D_projection
-   */
-  Graph3d.Camera = function () {
-    this.armLocation = new Point3d();
-    this.armRotation = {};
-    this.armRotation.horizontal = 0;
-    this.armRotation.vertical = 0;
-    this.armLength = 1.7;
+              years = absRound(months / 12);
+              data.years = years;
+          },
 
-    this.cameraLocation = new Point3d();
-    this.cameraRotation =  new Point3d(0.5*Math.PI, 0, 0);
+          weeks : function () {
+              return absRound(this.days() / 7);
+          },
 
-    this.calculateCameraOrientation();
-  };
+          valueOf : function () {
+              return this._milliseconds +
+                this._days * 864e5 +
+                (this._months % 12) * 2592e6 +
+                toInt(this._months / 12) * 31536e6;
+          },
 
-  /**
-   * Set the location (origin) of the arm
-   * @param {Number} x  Normalized value of x
-   * @param {Number} y  Normalized value of y
-   * @param {Number} z  Normalized value of z
-   */
-  Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
-    this.armLocation.x = x;
-    this.armLocation.y = y;
-    this.armLocation.z = z;
+          humanize : function (withSuffix) {
+              var difference = +this,
+                  output = relativeTime(difference, !withSuffix, this.lang());
 
-    this.calculateCameraOrientation();
-  };
+              if (withSuffix) {
+                  output = this.lang().pastFuture(difference, output);
+              }
 
-  /**
-   * Set the rotation of the camera arm
-   * @param {Number} horizontal   The horizontal rotation, between 0 and 2*PI.
-   *                Optional, can be left undefined.
-   * @param {Number} vertical   The vertical rotation, between 0 and 0.5*PI
-   *                if vertical=0.5*PI, the graph is shown from the
-   *                top. Optional, can be left undefined.
-   */
-  Graph3d.Camera.prototype.setArmRotation = function(horizontal, vertical) {
-    if (horizontal !== undefined) {
-      this.armRotation.horizontal = horizontal;
-    }
+              return this.lang().postformat(output);
+          },
 
-    if (vertical !== undefined) {
-      this.armRotation.vertical = vertical;
-      if (this.armRotation.vertical < 0) this.armRotation.vertical = 0;
-      if (this.armRotation.vertical > 0.5*Math.PI) this.armRotation.vertical = 0.5*Math.PI;
-    }
+          add : function (input, val) {
+              // supports only 2.0-style add(1, 's') or add(moment)
+              var dur = moment.duration(input, val);
 
-    if (horizontal !== undefined || vertical !== undefined) {
-      this.calculateCameraOrientation();
-    }
-  };
+              this._milliseconds += dur._milliseconds;
+              this._days += dur._days;
+              this._months += dur._months;
 
-  /**
-   * Retrieve the current arm rotation
-   * @return {object}   An object with parameters horizontal and vertical
-   */
-  Graph3d.Camera.prototype.getArmRotation = function() {
-    var rot = {};
-    rot.horizontal = this.armRotation.horizontal;
-    rot.vertical = this.armRotation.vertical;
+              this._bubble();
 
-    return rot;
-  };
+              return this;
+          },
 
-  /**
-   * Set the (normalized) length of the camera arm.
-   * @param {Number} length A length between 0.71 and 5.0
-   */
-  Graph3d.Camera.prototype.setArmLength = function(length) {
-    if (length === undefined)
-      return;
+          subtract : function (input, val) {
+              var dur = moment.duration(input, val);
 
-    this.armLength = length;
+              this._milliseconds -= dur._milliseconds;
+              this._days -= dur._days;
+              this._months -= dur._months;
 
-    // Radius must be larger than the corner of the graph,
-    // which has a distance of sqrt(0.5^2+0.5^2) = 0.71 from the center of the
-    // graph
-    if (this.armLength < 0.71) this.armLength = 0.71;
-    if (this.armLength > 5.0) this.armLength = 5.0;
+              this._bubble();
 
-    this.calculateCameraOrientation();
-  };
+              return this;
+          },
 
-  /**
-   * Retrieve the arm length
-   * @return {Number} length
-   */
-  Graph3d.Camera.prototype.getArmLength = function() {
-    return this.armLength;
-  };
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units.toLowerCase() + 's']();
+          },
 
-  /**
-   * Retrieve the camera location
-   * @return {Point3d} cameraLocation
-   */
-  Graph3d.Camera.prototype.getCameraLocation = function() {
-    return this.cameraLocation;
-  };
+          as : function (units) {
+              units = normalizeUnits(units);
+              return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
+          },
 
-  /**
-   * Retrieve the camera rotation
-   * @return {Point3d} cameraRotation
-   */
-  Graph3d.Camera.prototype.getCameraRotation = function() {
-    return this.cameraRotation;
-  };
+          lang : moment.fn.lang,
 
-  /**
-   * Calculate the location and rotation of the camera based on the
-   * position and orientation of the camera arm
-   */
-  Graph3d.Camera.prototype.calculateCameraOrientation = function() {
-    // calculate location of the camera
-    this.cameraLocation.x = this.armLocation.x - this.armLength * Math.sin(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
-    this.cameraLocation.y = this.armLocation.y - this.armLength * Math.cos(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
-    this.cameraLocation.z = this.armLocation.z + this.armLength * Math.sin(this.armRotation.vertical);
+          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);
 
-    // calculate rotation of the camera
-    this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical;
-    this.cameraRotation.y = 0;
-    this.cameraRotation.z = -this.armRotation.horizontal;
-  };
+              if (!this.asSeconds()) {
+                  // this is the same as C#'s (Noda) and python (isodate)...
+                  // but not other JS (goog.date)
+                  return 'P0D';
+              }
 
-  /**
-   * Calculate the scaling values, dependent on the range in x, y, and z direction
-   */
-  Graph3d.prototype._setScale = function() {
-    this.scale = new Point3d(1 / (this.xMax - this.xMin),
-      1 / (this.yMax - this.yMin),
-      1 / (this.zMax - this.zMin));
+              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' : '');
+          }
+      });
 
-    // keep aspect ration between x and y scale if desired
-    if (this.keepAspectRatio) {
-      if (this.scale.x < this.scale.y) {
-        //noinspection JSSuspiciousNameCombination
-        this.scale.y = this.scale.x;
-      }
-      else {
-        //noinspection JSSuspiciousNameCombination
-        this.scale.x = this.scale.y;
+      function makeDurationGetter(name) {
+          moment.duration.fn[name] = function () {
+              return this._data[name];
+          };
       }
-    }
 
-    // scale the vertical axis
-    this.scale.z *= this.verticalRatio;
-    // TODO: can this be automated? verticalRatio?
+      function makeDurationAsGetter(name, factor) {
+          moment.duration.fn['as' + name] = function () {
+              return +this / factor;
+          };
+      }
 
-    // determine scale for (optional) value
-    this.scale.value = 1 / (this.valueMax - this.valueMin);
+      for (i in unitMillisecondFactors) {
+          if (unitMillisecondFactors.hasOwnProperty(i)) {
+              makeDurationAsGetter(i, unitMillisecondFactors[i]);
+              makeDurationGetter(i.toLowerCase());
+          }
+      }
 
-    // position the camera arm
-    var xCenter = (this.xMax + this.xMin) / 2 * this.scale.x;
-    var yCenter = (this.yMax + this.yMin) / 2 * this.scale.y;
-    var zCenter = (this.zMax + this.zMin) / 2 * this.scale.z;
-    this.camera.setArmLocation(xCenter, yCenter, zCenter);
-  };
+      makeDurationAsGetter('Weeks', 6048e5);
+      moment.duration.fn.asMonths = function () {
+          return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
+      };
 
 
-  /**
-   * Convert a 3D location to a 2D location on screen
-   * http://en.wikipedia.org/wiki/3D_projection
-   * @param {Point3d} point3d   A 3D point with parameters x, y, z
-   * @return {Point2d} point2d  A 2D point with parameters x, y
-   */
-  Graph3d.prototype._convert3Dto2D = function(point3d) {
-    var translation = this._convertPointToTranslation(point3d);
-    return this._convertTranslationToScreen(translation);
-  };
+      /************************************
+          Default Lang
+      ************************************/
 
-  /**
-   * Convert a 3D location its translation seen from the camera
-   * http://en.wikipedia.org/wiki/3D_projection
-   * @param {Point3d} point3d    A 3D point with parameters x, y, z
-   * @return {Point3d} translation A 3D point with parameters x, y, z This is
-   *                   the translation of the point, seen from the
-   *                   camera
-   */
-  Graph3d.prototype._convertPointToTranslation = function(point3d) {
-    var ax = point3d.x * this.scale.x,
-      ay = point3d.y * this.scale.y,
-      az = point3d.z * this.scale.z,
 
-      cx = this.camera.getCameraLocation().x,
-      cy = this.camera.getCameraLocation().y,
-      cz = this.camera.getCameraLocation().z,
+      // Set default language, other languages will inherit from English.
+      moment.lang('en', {
+          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;
+          }
+      });
 
-    // calculate angles
-      sinTx = Math.sin(this.camera.getCameraRotation().x),
-      cosTx = Math.cos(this.camera.getCameraRotation().x),
-      sinTy = Math.sin(this.camera.getCameraRotation().y),
-      cosTy = Math.cos(this.camera.getCameraRotation().y),
-      sinTz = Math.sin(this.camera.getCameraRotation().z),
-      cosTz = Math.cos(this.camera.getCameraRotation().z),
+      /* EMBED_LANGUAGES */
 
-    // calculate translation
-      dx = cosTy * (sinTz * (ay - cy) + cosTz * (ax - cx)) - sinTy * (az - cz),
-      dy = sinTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) + cosTx * (cosTz * (ay - cy) - sinTz * (ax-cx)),
-      dz = cosTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) - sinTx * (cosTz * (ay - cy) - sinTz * (ax-cx));
+      /************************************
+          Exposing Moment
+      ************************************/
 
-    return new Point3d(dx, dy, dz);
-  };
+      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;
+          }
+      }
 
-  /**
-   * Convert a translation point to a point on the screen
-   * @param {Point3d} translation   A 3D point with parameters x, y, z This is
-   *                    the translation of the point, seen from the
-   *                    camera
-   * @return {Point2d} point2d    A 2D point with parameters x, y
-   */
-  Graph3d.prototype._convertTranslationToScreen = function(translation) {
-    var ex = this.eye.x,
-      ey = this.eye.y,
-      ez = this.eye.z,
-      dx = translation.x,
-      dy = translation.y,
-      dz = translation.z;
+      // 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;
+              }
 
-    // calculate position on screen from translation
-    var bx;
-    var by;
-    if (this.showPerspective) {
-      bx = (dx - ex) * (ez / dz);
-      by = (dy - ey) * (ez / dz);
-    }
-    else {
-      bx = dx * -(ez / this.camera.getArmLength());
-      by = dy * -(ez / this.camera.getArmLength());
-    }
+              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__(7)(module)))
 
-    // shift and scale the point to the center of the screen
-    // use the width of the graph to scale both horizontally and vertically.
-    return new Point2d(
-      this.xcenter + bx * this.frame.canvas.clientWidth,
-      this.ycenter - by * this.frame.canvas.clientWidth);
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var map = {
+  	"./ar": 56,
+  	"./ar-ma": 54,
+  	"./ar-ma.js": 54,
+  	"./ar-sa": 55,
+  	"./ar-sa.js": 55,
+  	"./ar.js": 56,
+  	"./az": 57,
+  	"./az.js": 57,
+  	"./bg": 58,
+  	"./bg.js": 58,
+  	"./bn": 59,
+  	"./bn.js": 59,
+  	"./br": 60,
+  	"./br.js": 60,
+  	"./bs": 61,
+  	"./bs.js": 61,
+  	"./ca": 62,
+  	"./ca.js": 62,
+  	"./cs": 63,
+  	"./cs.js": 63,
+  	"./cv": 64,
+  	"./cv.js": 64,
+  	"./cy": 65,
+  	"./cy.js": 65,
+  	"./da": 66,
+  	"./da.js": 66,
+  	"./de": 68,
+  	"./de-at": 67,
+  	"./de-at.js": 67,
+  	"./de.js": 68,
+  	"./el": 69,
+  	"./el.js": 69,
+  	"./en-au": 70,
+  	"./en-au.js": 70,
+  	"./en-ca": 71,
+  	"./en-ca.js": 71,
+  	"./en-gb": 72,
+  	"./en-gb.js": 72,
+  	"./eo": 73,
+  	"./eo.js": 73,
+  	"./es": 74,
+  	"./es.js": 74,
+  	"./et": 75,
+  	"./et.js": 75,
+  	"./eu": 76,
+  	"./eu.js": 76,
+  	"./fa": 77,
+  	"./fa.js": 77,
+  	"./fi": 78,
+  	"./fi.js": 78,
+  	"./fo": 79,
+  	"./fo.js": 79,
+  	"./fr": 81,
+  	"./fr-ca": 80,
+  	"./fr-ca.js": 80,
+  	"./fr.js": 81,
+  	"./gl": 82,
+  	"./gl.js": 82,
+  	"./he": 83,
+  	"./he.js": 83,
+  	"./hi": 84,
+  	"./hi.js": 84,
+  	"./hr": 85,
+  	"./hr.js": 85,
+  	"./hu": 86,
+  	"./hu.js": 86,
+  	"./hy-am": 87,
+  	"./hy-am.js": 87,
+  	"./id": 88,
+  	"./id.js": 88,
+  	"./is": 89,
+  	"./is.js": 89,
+  	"./it": 90,
+  	"./it.js": 90,
+  	"./ja": 91,
+  	"./ja.js": 91,
+  	"./ka": 92,
+  	"./ka.js": 92,
+  	"./km": 93,
+  	"./km.js": 93,
+  	"./ko": 94,
+  	"./ko.js": 94,
+  	"./lb": 95,
+  	"./lb.js": 95,
+  	"./lt": 96,
+  	"./lt.js": 96,
+  	"./lv": 97,
+  	"./lv.js": 97,
+  	"./mk": 98,
+  	"./mk.js": 98,
+  	"./ml": 99,
+  	"./ml.js": 99,
+  	"./mr": 100,
+  	"./mr.js": 100,
+  	"./ms-my": 101,
+  	"./ms-my.js": 101,
+  	"./nb": 102,
+  	"./nb.js": 102,
+  	"./ne": 103,
+  	"./ne.js": 103,
+  	"./nl": 104,
+  	"./nl.js": 104,
+  	"./nn": 105,
+  	"./nn.js": 105,
+  	"./pl": 106,
+  	"./pl.js": 106,
+  	"./pt": 108,
+  	"./pt-br": 107,
+  	"./pt-br.js": 107,
+  	"./pt.js": 108,
+  	"./ro": 109,
+  	"./ro.js": 109,
+  	"./ru": 110,
+  	"./ru.js": 110,
+  	"./sk": 111,
+  	"./sk.js": 111,
+  	"./sl": 112,
+  	"./sl.js": 112,
+  	"./sq": 113,
+  	"./sq.js": 113,
+  	"./sr": 115,
+  	"./sr-cyrl": 114,
+  	"./sr-cyrl.js": 114,
+  	"./sr.js": 115,
+  	"./sv": 116,
+  	"./sv.js": 116,
+  	"./ta": 117,
+  	"./ta.js": 117,
+  	"./th": 118,
+  	"./th.js": 118,
+  	"./tl-ph": 119,
+  	"./tl-ph.js": 119,
+  	"./tr": 120,
+  	"./tr.js": 120,
+  	"./tzm": 122,
+  	"./tzm-latn": 121,
+  	"./tzm-latn.js": 121,
+  	"./tzm.js": 122,
+  	"./uk": 123,
+  	"./uk.js": 123,
+  	"./uz": 124,
+  	"./uz.js": 124,
+  	"./vi": 125,
+  	"./vi.js": 125,
+  	"./zh-cn": 126,
+  	"./zh-cn.js": 126,
+  	"./zh-tw": 127,
+  	"./zh-tw.js": 127
+  };
+  function webpackContext(req) {
+  	return __webpack_require__(webpackContextResolve(req));
+  };
+  function webpackContextResolve(req) {
+  	return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
+  };
+  webpackContext.keys = function webpackContextKeys() {
+  	return Object.keys(map);
   };
+  webpackContext.resolve = webpackContextResolve;
+  module.exports = webpackContext;
 
-  /**
-   * Set the background styling for the graph
-   * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
-   */
-  Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
-    var fill = 'white';
-    var stroke = 'gray';
-    var strokeWidth = 1;
 
-    if (typeof(backgroundColor) === 'string') {
-      fill = backgroundColor;
-      stroke = 'none';
-      strokeWidth = 0;
-    }
-    else if (typeof(backgroundColor) === 'object') {
-      if (backgroundColor.fill !== undefined)    fill = backgroundColor.fill;
-      if (backgroundColor.stroke !== undefined)    stroke = backgroundColor.stroke;
-      if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth;
-    }
-    else if  (backgroundColor === undefined) {
-      // use use defaults
-    }
-    else {
-      throw 'Unsupported type of backgroundColor';
-    }
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this.frame.style.backgroundColor = fill;
-    this.frame.style.borderColor = stroke;
-    this.frame.style.borderWidth = strokeWidth + 'px';
-    this.frame.style.borderStyle = 'solid';
-  };
+  module.exports = function(module) {
+  	if(!module.webpackPolyfill) {
+  		module.deprecate = function() {};
+  		module.paths = [];
+  		// module.parent = undefined by default
+  		module.children = [];
+  		module.webpackPolyfill = 1;
+  	}
+  	return module;
+  }
 
 
-  /// enumerate the available styles
-  Graph3d.STYLE = {
-    BAR: 0,
-    BARCOLOR: 1,
-    BARSIZE: 2,
-    DOT : 3,
-    DOTLINE : 4,
-    DOTCOLOR: 5,
-    DOTSIZE: 6,
-    GRID : 7,
-    LINE: 8,
-    SURFACE : 9
-  };
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // DOM utility methods
 
   /**
-   * Retrieve the style index from given styleName
-   * @param {string} styleName  Style name such as 'dot', 'grid', 'dot-line'
-   * @return {Number} styleNumber Enumeration value representing the style, or -1
-   *                when not found
+   * this prepares the JSON container for allocating SVG elements
+   * @param JSONcontainer
+   * @private
    */
-  Graph3d.prototype._getStyleNumber = function(styleName) {
-    switch (styleName) {
-      case 'dot':     return Graph3d.STYLE.DOT;
-      case 'dot-line':  return Graph3d.STYLE.DOTLINE;
-      case 'dot-color':   return Graph3d.STYLE.DOTCOLOR;
-      case 'dot-size':  return Graph3d.STYLE.DOTSIZE;
-      case 'line':    return Graph3d.STYLE.LINE;
-      case 'grid':    return Graph3d.STYLE.GRID;
-      case 'surface':   return Graph3d.STYLE.SURFACE;
-      case 'bar':     return Graph3d.STYLE.BAR;
-      case 'bar-color':   return Graph3d.STYLE.BARCOLOR;
-      case 'bar-size':  return Graph3d.STYLE.BARSIZE;
+  exports.prepareElements = function(JSONcontainer) {
+    // cleanup the redundant svgElements;
+    for (var elementType in JSONcontainer) {
+      if (JSONcontainer.hasOwnProperty(elementType)) {
+        JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
+        JSONcontainer[elementType].used = [];
+      }
     }
-
-    return -1;
   };
 
   /**
-   * Determine the indexes of the data columns, based on the given style and data
-   * @param {DataSet} data
-   * @param {Number}  style
+   * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
+   * which to remove the redundant elements.
+   *
+   * @param JSONcontainer
+   * @private
    */
-  Graph3d.prototype._determineColumnIndexes = function(data, style) {
-    if (this.style === Graph3d.STYLE.DOT ||
-      this.style === Graph3d.STYLE.DOTLINE ||
-      this.style === Graph3d.STYLE.LINE ||
-      this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE ||
-      this.style === Graph3d.STYLE.BAR) {
-      // 3 columns expected, and optionally a 4th with filter values
-      this.colX = 0;
-      this.colY = 1;
-      this.colZ = 2;
-      this.colValue = undefined;
-
-      if (data.getNumberOfColumns() > 3) {
-        this.colFilter = 3;
+  exports.cleanupElements = function(JSONcontainer) {
+    // cleanup the redundant svgElements;
+    for (var elementType in JSONcontainer) {
+      if (JSONcontainer.hasOwnProperty(elementType)) {
+        if (JSONcontainer[elementType].redundant) {
+          for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
+            JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
+          }
+          JSONcontainer[elementType].redundant = [];
+        }
       }
     }
-    else if (this.style === Graph3d.STYLE.DOTCOLOR ||
-      this.style === Graph3d.STYLE.DOTSIZE ||
-      this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      // 4 columns expected, and optionally a 5th with filter values
-      this.colX = 0;
-      this.colY = 1;
-      this.colZ = 2;
-      this.colValue = 3;
+  };
 
-      if (data.getNumberOfColumns() > 4) {
-        this.colFilter = 4;
+  /**
+   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
+   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+   *
+   * @param elementType
+   * @param JSONcontainer
+   * @param svgContainer
+   * @returns {*}
+   * @private
+   */
+  exports.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
+    var element;
+    // allocate SVG element, if it doesnt yet exist, create one.
+    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
+      // check if there is an redundant element
+      if (JSONcontainer[elementType].redundant.length > 0) {
+        element = JSONcontainer[elementType].redundant[0];
+        JSONcontainer[elementType].redundant.shift();
+      }
+      else {
+        // create a new element and add it to the SVG
+        element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
+        svgContainer.appendChild(element);
       }
     }
     else {
-      throw 'Unknown style "' + this.style + '"';
+      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
+      element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
+      JSONcontainer[elementType] = {used: [], redundant: []};
+      svgContainer.appendChild(element);
     }
+    JSONcontainer[elementType].used.push(element);
+    return element;
   };
 
-  Graph3d.prototype.getNumberOfRows = function(data) {
-    return data.length;
-  }
-
 
-  Graph3d.prototype.getNumberOfColumns = function(data) {
-    var counter = 0;
-    for (var column in data[0]) {
-      if (data[0].hasOwnProperty(column)) {
-        counter++;
+  /**
+   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
+   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+   *
+   * @param elementType
+   * @param JSONcontainer
+   * @param DOMContainer
+   * @returns {*}
+   * @private
+   */
+  exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
+    var element;
+    // allocate SVG element, if it doesnt yet exist, create one.
+    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
+      // check if there is an redundant element
+      if (JSONcontainer[elementType].redundant.length > 0) {
+        element = JSONcontainer[elementType].redundant[0];
+        JSONcontainer[elementType].redundant.shift();
+      }
+      else {
+        // create a new element and add it to the SVG
+        element = document.createElement(elementType);
+        DOMContainer.appendChild(element);
       }
     }
-    return counter;
-  }
+    else {
+      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
+      element = document.createElement(elementType);
+      JSONcontainer[elementType] = {used: [], redundant: []};
+      DOMContainer.appendChild(element);
+    }
+    JSONcontainer[elementType].used.push(element);
+    return element;
+  };
 
 
-  Graph3d.prototype.getDistinctValues = function(data, column) {
-    var distinctValues = [];
-    for (var i = 0; i < data.length; i++) {
-      if (distinctValues.indexOf(data[i][column]) == -1) {
-        distinctValues.push(data[i][column]);
-      }
-    }
-    return distinctValues;
-  }
 
 
-  Graph3d.prototype.getColumnRange = function(data,column) {
-    var minMax = {min:data[0][column],max:data[0][column]};
-    for (var i = 0; i < data.length; i++) {
-      if (minMax.min > data[i][column]) { minMax.min = data[i][column]; }
-      if (minMax.max < data[i][column]) { minMax.max = data[i][column]; }
+  /**
+   * draw a point object. this is a seperate function because it can also be called by the legend.
+   * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
+   * as well.
+   *
+   * @param x
+   * @param y
+   * @param group
+   * @param JSONcontainer
+   * @param svgContainer
+   * @returns {*}
+   */
+  exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
+    var point;
+    if (group.options.drawPoints.style == 'circle') {
+      point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
+      point.setAttributeNS(null, "cx", x);
+      point.setAttributeNS(null, "cy", y);
+      point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
+      point.setAttributeNS(null, "class", group.className + " point");
     }
-    return minMax;
+    else {
+      point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
+      point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
+      point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
+      point.setAttributeNS(null, "width", group.options.drawPoints.size);
+      point.setAttributeNS(null, "height", group.options.drawPoints.size);
+      point.setAttributeNS(null, "class", group.className + " point");
+    }
+    return point;
   };
 
   /**
-   * Initialize the data from the data table. Calculate minimum and maximum values
-   * and column index values
-   * @param {Array | DataSet | DataView} rawData   The data containing the items for the Graph.
-   * @param {Number}     style   Style Number
+   * draw a bar SVG element centered on the X coordinate
+   *
+   * @param x
+   * @param y
+   * @param className
    */
-  Graph3d.prototype._dataInitialize = function (rawData, style) {
-    var me = this;
+  exports.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
+    var rect = exports.getSVGElement('rect',JSONcontainer, svgContainer);
+    rect.setAttributeNS(null, "x", x - 0.5 * width);
+    rect.setAttributeNS(null, "y", y);
+    rect.setAttributeNS(null, "width", width);
+    rect.setAttributeNS(null, "height", height);
+    rect.setAttributeNS(null, "class", className);
+  };
 
-    // unsubscribe from the dataTable
-    if (this.dataSet) {
-      this.dataSet.off('*', this._onChange);
-    }
+/***/ },
+/* 9 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (rawData === undefined)
-      return;
+  var util = __webpack_require__(1);
 
-    if (Array.isArray(rawData)) {
-      rawData = new DataSet(rawData);
+  /**
+   * DataSet
+   *
+   * Usage:
+   *     var dataSet = new DataSet({
+   *         fieldId: '_id',
+   *         type: {
+   *             // ...
+   *         }
+   *     });
+   *
+   *     dataSet.add(item);
+   *     dataSet.add(data);
+   *     dataSet.update(item);
+   *     dataSet.update(data);
+   *     dataSet.remove(id);
+   *     dataSet.remove(ids);
+   *     var data = dataSet.get();
+   *     var data = dataSet.get(id);
+   *     var data = dataSet.get(ids);
+   *     var data = dataSet.get(ids, options, data);
+   *     dataSet.clear();
+   *
+   * A data set can:
+   * - add/remove/update data
+   * - gives triggers upon changes in the data
+   * - can  import/export data in various data formats
+   *
+   * @param {Array | DataTable} [data]    Optional array with initial data
+   * @param {Object} [options]   Available options:
+   *                             {String} fieldId Field name of the id in the
+   *                                              items, 'id' by default.
+   *                             {Object.<String, String} type
+   *                                              A map with field names as key,
+   *                                              and the field type as value.
+   * @constructor DataSet
+   */
+  // TODO: add a DataSet constructor DataSet(data, options)
+  function DataSet (data, options) {
+    // correctly read optional arguments
+    if (data && !Array.isArray(data) && !util.isDataTable(data)) {
+      options = data;
+      data = null;
     }
 
-    var data;
-    if (rawData instanceof DataSet || rawData instanceof DataView) {
-      data = rawData.get();
+    this._options = options || {};
+    this._data = {};                                 // map with data indexed by id
+    this._fieldId = this._options.fieldId || 'id';   // name of the field containing id
+    this._type = {};                                 // internal field types (NOTE: this can differ from this._options.type)
+
+    // all variants of a Date are internally stored as Date, so we can convert
+    // from everything to everything (also from ISODate to Number for example)
+    if (this._options.type) {
+      for (var field in this._options.type) {
+        if (this._options.type.hasOwnProperty(field)) {
+          var value = this._options.type[field];
+          if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
+            this._type[field] = 'Date';
+          }
+          else {
+            this._type[field] = value;
+          }
+        }
+      }
     }
-    else {
-      throw new Error('Array, DataSet, or DataView expected');
+
+    // TODO: deprecated since version 1.1.1 (or 2.0.0?)
+    if (this._options.convert) {
+      throw new Error('Option "convert" is deprecated. Use "type" instead.');
     }
 
-    if (data.length == 0)
-      return;
+    this._subscribers = {};  // event subscribers
 
-    this.dataSet = rawData;
-    this.dataTable = data;
+    // add initial data when provided
+    if (data) {
+      this.add(data);
+    }
+  }
 
-    // subscribe to changes in the dataset
-    this._onChange = function () {
-      me.setData(me.dataSet);
-    };
-    this.dataSet.on('*', this._onChange);
+  /**
+   * Subscribe to an event, add an event listener
+   * @param {String} event        Event name. Available events: 'put', 'update',
+   *                              'remove'
+   * @param {function} callback   Callback method. Called with three parameters:
+   *                                  {String} event
+   *                                  {Object | null} params
+   *                                  {String | Number} senderId
+   */
+  DataSet.prototype.on = function(event, callback) {
+    var subscribers = this._subscribers[event];
+    if (!subscribers) {
+      subscribers = [];
+      this._subscribers[event] = subscribers;
+    }
 
-    // _determineColumnIndexes
-    // getNumberOfRows (points)
-    // getNumberOfColumns (x,y,z,v,t,t1,t2...)
-    // getDistinctValues (unique values?)
-    // getColumnRange
+    subscribers.push({
+      callback: callback
+    });
+  };
 
-    // determine the location of x,y,z,value,filter columns
-    this.colX = 'x';
-    this.colY = 'y';
-    this.colZ = 'z';
-    this.colValue = 'style';
-    this.colFilter = 'filter';
+  // TODO: make this function deprecated (replaced with `on` since version 0.5)
+  DataSet.prototype.subscribe = DataSet.prototype.on;
 
+  /**
+   * Unsubscribe from an event, remove an event listener
+   * @param {String} event
+   * @param {function} callback
+   */
+  DataSet.prototype.off = function(event, callback) {
+    var subscribers = this._subscribers[event];
+    if (subscribers) {
+      this._subscribers[event] = subscribers.filter(function (listener) {
+        return (listener.callback != callback);
+      });
+    }
+  };
 
+  // TODO: make this function deprecated (replaced with `on` since version 0.5)
+  DataSet.prototype.unsubscribe = DataSet.prototype.off;
 
-    // check if a filter column is provided
-    if (data[0].hasOwnProperty('filter')) {
-      if (this.dataFilter === undefined) {
-        this.dataFilter = new Filter(rawData, this.colFilter, this);
-        this.dataFilter.setOnLoadCallback(function() {me.redraw();});
-      }
+  /**
+   * Trigger an event
+   * @param {String} event
+   * @param {Object | null} params
+   * @param {String} [senderId]       Optional id of the sender.
+   * @private
+   */
+  DataSet.prototype._trigger = function (event, params, senderId) {
+    if (event == '*') {
+      throw new Error('Cannot trigger event *');
     }
 
+    var subscribers = [];
+    if (event in this._subscribers) {
+      subscribers = subscribers.concat(this._subscribers[event]);
+    }
+    if ('*' in this._subscribers) {
+      subscribers = subscribers.concat(this._subscribers['*']);
+    }
 
-    var withBars = this.style == Graph3d.STYLE.BAR ||
-      this.style == Graph3d.STYLE.BARCOLOR ||
-      this.style == Graph3d.STYLE.BARSIZE;
-
-    // determine barWidth from data
-    if (withBars) {
-      if (this.defaultXBarWidth !== undefined) {
-        this.xBarWidth = this.defaultXBarWidth;
-      }
-      else {
-        var dataX = this.getDistinctValues(data,this.colX);
-        this.xBarWidth = (dataX[1] - dataX[0]) || 1;
+    for (var i = 0; i < subscribers.length; i++) {
+      var subscriber = subscribers[i];
+      if (subscriber.callback) {
+        subscriber.callback(event, params, senderId || null);
       }
+    }
+  };
 
-      if (this.defaultYBarWidth !== undefined) {
-        this.yBarWidth = this.defaultYBarWidth;
-      }
-      else {
-        var dataY = this.getDistinctValues(data,this.colY);
-        this.yBarWidth = (dataY[1] - dataY[0]) || 1;
+  /**
+   * Add data.
+   * Adding an item will fail when there already is an item with the same id.
+   * @param {Object | Array | DataTable} data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} addedIds      Array with the ids of the added items
+   */
+  DataSet.prototype.add = function (data, senderId) {
+    var addedIds = [],
+        id,
+        me = this;
+
+    if (Array.isArray(data)) {
+      // Array
+      for (var i = 0, len = data.length; i < len; i++) {
+        id = me._addItem(data[i]);
+        addedIds.push(id);
       }
     }
+    else if (util.isDataTable(data)) {
+      // Google DataTable
+      var columns = this._getColumnNames(data);
+      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+        var item = {};
+        for (var col = 0, cols = columns.length; col < cols; col++) {
+          var field = columns[col];
+          item[field] = data.getValue(row, col);
+        }
 
-    // calculate minimums and maximums
-    var xRange = this.getColumnRange(data,this.colX);
-    if (withBars) {
-      xRange.min -= this.xBarWidth / 2;
-      xRange.max += this.xBarWidth / 2;
+        id = me._addItem(item);
+        addedIds.push(id);
+      }
     }
-    this.xMin = (this.defaultXMin !== undefined) ? this.defaultXMin : xRange.min;
-    this.xMax = (this.defaultXMax !== undefined) ? this.defaultXMax : xRange.max;
-    if (this.xMax <= this.xMin) this.xMax = this.xMin + 1;
-    this.xStep = (this.defaultXStep !== undefined) ? this.defaultXStep : (this.xMax-this.xMin)/5;
-
-    var yRange = this.getColumnRange(data,this.colY);
-    if (withBars) {
-      yRange.min -= this.yBarWidth / 2;
-      yRange.max += this.yBarWidth / 2;
+    else if (data instanceof Object) {
+      // Single item
+      id = me._addItem(data);
+      addedIds.push(id);
+    }
+    else {
+      throw new Error('Unknown dataType');
     }
-    this.yMin = (this.defaultYMin !== undefined) ? this.defaultYMin : yRange.min;
-    this.yMax = (this.defaultYMax !== undefined) ? this.defaultYMax : yRange.max;
-    if (this.yMax <= this.yMin) this.yMax = this.yMin + 1;
-    this.yStep = (this.defaultYStep !== undefined) ? this.defaultYStep : (this.yMax-this.yMin)/5;
-
-    var zRange = this.getColumnRange(data,this.colZ);
-    this.zMin = (this.defaultZMin !== undefined) ? this.defaultZMin : zRange.min;
-    this.zMax = (this.defaultZMax !== undefined) ? this.defaultZMax : zRange.max;
-    if (this.zMax <= this.zMin) this.zMax = this.zMin + 1;
-    this.zStep = (this.defaultZStep !== undefined) ? this.defaultZStep : (this.zMax-this.zMin)/5;
 
-    if (this.colValue !== undefined) {
-      var valueRange = this.getColumnRange(data,this.colValue);
-      this.valueMin = (this.defaultValueMin !== undefined) ? this.defaultValueMin : valueRange.min;
-      this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max;
-      if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1;
+    if (addedIds.length) {
+      this._trigger('add', {items: addedIds}, senderId);
     }
 
-    // set the scale dependent on the ranges.
-    this._setScale();
+    return addedIds;
   };
 
-
-
   /**
-   * Filter the data based on the current filter
-   * @param {Array} data
-   * @return {Array} dataPoints   Array with point objects which can be drawn on screen
+   * Update existing items. When an item does not exist, it will be created
+   * @param {Object | Array | DataTable} data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} updatedIds     The ids of the added or updated items
    */
-  Graph3d.prototype._getDataPoints = function (data) {
-    // TODO: store the created matrix dataPoints in the filters instead of reloading each time
-    var x, y, i, z, obj, point;
-
-    var dataPoints = [];
-
-    if (this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE) {
-      // copy all values from the google data table to a matrix
-      // the provided values are supposed to form a grid of (x,y) positions
-
-      // create two lists with all present x and y values
-      var dataX = [];
-      var dataY = [];
-      for (i = 0; i < this.getNumberOfRows(data); i++) {
-        x = data[i][this.colX] || 0;
-        y = data[i][this.colY] || 0;
+  DataSet.prototype.update = function (data, senderId) {
+    var addedIds = [],
+        updatedIds = [],
+        me = this,
+        fieldId = me._fieldId;
 
-        if (dataX.indexOf(x) === -1) {
-          dataX.push(x);
-        }
-        if (dataY.indexOf(y) === -1) {
-          dataY.push(y);
-        }
+    var addOrUpdate = function (item) {
+      var id = item[fieldId];
+      if (me._data[id]) {
+        // update item
+        id = me._updateItem(item);
+        updatedIds.push(id);
+      }
+      else {
+        // add new item
+        id = me._addItem(item);
+        addedIds.push(id);
       }
+    };
 
-      function sortNumber(a, b) {
-        return a - b;
+    if (Array.isArray(data)) {
+      // Array
+      for (var i = 0, len = data.length; i < len; i++) {
+        addOrUpdate(data[i]);
       }
-      dataX.sort(sortNumber);
-      dataY.sort(sortNumber);
+    }
+    else if (util.isDataTable(data)) {
+      // Google DataTable
+      var columns = this._getColumnNames(data);
+      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+        var item = {};
+        for (var col = 0, cols = columns.length; col < cols; col++) {
+          var field = columns[col];
+          item[field] = data.getValue(row, col);
+        }
 
-      // create a grid, a 2d matrix, with all values.
-      var dataMatrix = [];   // temporary data matrix
-      for (i = 0; i < data.length; i++) {
-        x = data[i][this.colX] || 0;
-        y = data[i][this.colY] || 0;
-        z = data[i][this.colZ] || 0;
+        addOrUpdate(item);
+      }
+    }
+    else if (data instanceof Object) {
+      // Single item
+      addOrUpdate(data);
+    }
+    else {
+      throw new Error('Unknown dataType');
+    }
 
-        var xIndex = dataX.indexOf(x);  // TODO: implement Array().indexOf() for Internet Explorer
-        var yIndex = dataY.indexOf(y);
+    if (addedIds.length) {
+      this._trigger('add', {items: addedIds}, senderId);
+    }
+    if (updatedIds.length) {
+      this._trigger('update', {items: updatedIds}, senderId);
+    }
 
-        if (dataMatrix[xIndex] === undefined) {
-          dataMatrix[xIndex] = [];
-        }
+    return addedIds.concat(updatedIds);
+  };
 
-        var point3d = new Point3d();
-        point3d.x = x;
-        point3d.y = y;
-        point3d.z = z;
+  /**
+   * Get a data item or multiple items.
+   *
+   * Usage:
+   *
+   *     get()
+   *     get(options: Object)
+   *     get(options: Object, data: Array | DataTable)
+   *
+   *     get(id: Number | String)
+   *     get(id: Number | String, options: Object)
+   *     get(id: Number | String, options: Object, data: Array | DataTable)
+   *
+   *     get(ids: Number[] | String[])
+   *     get(ids: Number[] | String[], options: Object)
+   *     get(ids: Number[] | String[], options: Object, data: Array | DataTable)
+   *
+   * Where:
+   *
+   * {Number | String} id         The id of an item
+   * {Number[] | String{}} ids    An array with ids of items
+   * {Object} options             An Object with options. Available options:
+   *                              {String} [returnType] Type of data to be
+   *                                  returned. Can be 'DataTable' or 'Array' (default)
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] field names to be returned
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * {Array | DataTable} [data]   If provided, items will be appended to this
+   *                              array or table. Required in case of Google
+   *                              DataTable.
+   *
+   * @throws Error
+   */
+  DataSet.prototype.get = function (args) {
+    var me = this;
 
-        obj = {};
-        obj.point = point3d;
-        obj.trans = undefined;
-        obj.screen = undefined;
-        obj.bottom = new Point3d(x, y, this.zMin);
+    // parse the arguments
+    var id, ids, options, data;
+    var firstType = util.getType(arguments[0]);
+    if (firstType == 'String' || firstType == 'Number') {
+      // get(id [, options] [, data])
+      id = arguments[0];
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else if (firstType == 'Array') {
+      // get(ids [, options] [, data])
+      ids = arguments[0];
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else {
+      // get([, options] [, data])
+      options = arguments[0];
+      data = arguments[1];
+    }
 
-        dataMatrix[xIndex][yIndex] = obj;
+    // determine the return type
+    var returnType;
+    if (options && options.returnType) {
+      returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
 
-        dataPoints.push(obj);
+      if (data && (returnType != util.getType(data))) {
+        throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
+            'does not correspond with specified options.type (' + options.type + ')');
+      }
+      if (returnType == 'DataTable' && !util.isDataTable(data)) {
+        throw new Error('Parameter "data" must be a DataTable ' +
+            'when options.type is "DataTable"');
       }
+    }
+    else if (data) {
+      returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+    }
+    else {
+      returnType = 'Array';
+    }
 
-      // fill in the pointers to the neighbors.
-      for (x = 0; x < dataMatrix.length; x++) {
-        for (y = 0; y < dataMatrix[x].length; y++) {
-          if (dataMatrix[x][y]) {
-            dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
-            dataMatrix[x][y].pointTop   = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
-            dataMatrix[x][y].pointCross =
-              (x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
-                dataMatrix[x+1][y+1] :
-                undefined;
-          }
+    // build options
+    var type = options && options.type || this._options.type;
+    var filter = options && options.filter;
+    var items = [], item, itemId, i, len;
+
+    // convert items
+    if (id != undefined) {
+      // return a single item
+      item = me._getItem(id, type);
+      if (filter && !filter(item)) {
+        item = null;
+      }
+    }
+    else if (ids != undefined) {
+      // return a subset of items
+      for (i = 0, len = ids.length; i < len; i++) {
+        item = me._getItem(ids[i], type);
+        if (!filter || filter(item)) {
+          items.push(item);
         }
       }
     }
-    else {  // 'dot', 'dot-line', etc.
-      // copy all values from the google data table to a list with Point3d objects
-      for (i = 0; i < data.length; i++) {
-        point = new Point3d();
-        point.x = data[i][this.colX] || 0;
-        point.y = data[i][this.colY] || 0;
-        point.z = data[i][this.colZ] || 0;
-
-        if (this.colValue !== undefined) {
-          point.value = data[i][this.colValue] || 0;
+    else {
+      // return all items
+      for (itemId in this._data) {
+        if (this._data.hasOwnProperty(itemId)) {
+          item = me._getItem(itemId, type);
+          if (!filter || filter(item)) {
+            items.push(item);
+          }
         }
+      }
+    }
 
-        obj = {};
-        obj.point = point;
-        obj.bottom = new Point3d(point.x, point.y, this.zMin);
-        obj.trans = undefined;
-        obj.screen = undefined;
+    // order the results
+    if (options && options.order && id == undefined) {
+      this._sort(items, options.order);
+    }
 
-        dataPoints.push(obj);
+    // filter fields of the items
+    if (options && options.fields) {
+      var fields = options.fields;
+      if (id != undefined) {
+        item = this._filterFields(item, fields);
+      }
+      else {
+        for (i = 0, len = items.length; i < len; i++) {
+          items[i] = this._filterFields(items[i], fields);
+        }
       }
     }
 
-    return dataPoints;
+    // return the results
+    if (returnType == 'DataTable') {
+      var columns = this._getColumnNames(data);
+      if (id != undefined) {
+        // append a single item to the data table
+        me._appendRow(data, columns, item);
+      }
+      else {
+        // copy the items to the provided data table
+        for (i = 0, len = items.length; i < len; i++) {
+          me._appendRow(data, columns, items[i]);
+        }
+      }
+      return data;
+    }
+    else {
+      // return an array
+      if (id != undefined) {
+        // a single item
+        return item;
+      }
+      else {
+        // multiple items
+        if (data) {
+          // copy the items to the provided array
+          for (i = 0, len = items.length; i < len; i++) {
+            data.push(items[i]);
+          }
+          return data;
+        }
+        else {
+          // just return our array
+          return items;
+        }
+      }
+    }
   };
 
   /**
-   * Create the main frame for the Graph3d.
-   * This function is executed once when a Graph3d object is created. The frame
-   * contains a canvas, and this canvas contains all objects like the axis and
-   * nodes.
+   * Get ids of all items or from a filtered set of items.
+   * @param {Object} [options]    An Object with options. Available options:
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Array} ids
    */
-  Graph3d.prototype.create = function () {
-    // remove all elements from the container element.
-    while (this.containerElement.hasChildNodes()) {
-      this.containerElement.removeChild(this.containerElement.firstChild);
-    }
+  DataSet.prototype.getIds = function (options) {
+    var data = this._data,
+        filter = options && options.filter,
+        order = options && options.order,
+        type = options && options.type || this._options.type,
+        i,
+        len,
+        id,
+        item,
+        items,
+        ids = [];
 
-    this.frame = document.createElement('div');
-    this.frame.style.position = 'relative';
-    this.frame.style.overflow = 'hidden';
+    if (filter) {
+      // get filtered items
+      if (order) {
+        // create ordered list
+        items = [];
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = this._getItem(id, type);
+            if (filter(item)) {
+              items.push(item);
+            }
+          }
+        }
 
-    // create the graph canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( 'canvas' );
-    this.frame.canvas.style.position = 'relative';
-    this.frame.appendChild(this.frame.canvas);
-    //if (!this.frame.canvas.getContext) {
-    {
-      var noCanvas = document.createElement( 'DIV' );
-      noCanvas.style.color = 'red';
-      noCanvas.style.fontWeight =  'bold' ;
-      noCanvas.style.padding =  '10px';
-      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
-      this.frame.canvas.appendChild(noCanvas);
-    }
+        this._sort(items, order);
 
-    this.frame.filter = document.createElement( 'div' );
-    this.frame.filter.style.position = 'absolute';
-    this.frame.filter.style.bottom = '0px';
-    this.frame.filter.style.left = '0px';
-    this.frame.filter.style.width = '100%';
-    this.frame.appendChild(this.frame.filter);
+        for (i = 0, len = items.length; i < len; i++) {
+          ids[i] = items[i][this._fieldId];
+        }
+      }
+      else {
+        // create unordered list
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = this._getItem(id, type);
+            if (filter(item)) {
+              ids.push(item[this._fieldId]);
+            }
+          }
+        }
+      }
+    }
+    else {
+      // get all items
+      if (order) {
+        // create an ordered list
+        items = [];
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            items.push(data[id]);
+          }
+        }
 
-    // add event listeners to handle moving and zooming the contents
-    var me = this;
-    var onmousedown = function (event) {me._onMouseDown(event);};
-    var ontouchstart = function (event) {me._onTouchStart(event);};
-    var onmousewheel = function (event) {me._onWheel(event);};
-    var ontooltip = function (event) {me._onTooltip(event);};
-    // TODO: these events are never cleaned up... can give a 'memory leakage'
+        this._sort(items, order);
 
-    G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
-    G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
-    G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
-    G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
-    G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
+        for (i = 0, len = items.length; i < len; i++) {
+          ids[i] = items[i][this._fieldId];
+        }
+      }
+      else {
+        // create unordered list
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = data[id];
+            ids.push(item[this._fieldId]);
+          }
+        }
+      }
+    }
 
-    // add the new graph to the container element
-    this.containerElement.appendChild(this.frame);
+    return ids;
   };
 
-
   /**
-   * Set a new size for the graph
-   * @param {string} width   Width in pixels or percentage (for example '800px'
-   *             or '50%')
-   * @param {string} height  Height in pixels or percentage  (for example '400px'
-   *             or '30%')
+   * Returns the DataSet itself. Is overwritten for example by the DataView,
+   * which returns the DataSet it is connected to instead.
    */
-  Graph3d.prototype.setSize = function(width, height) {
-    this.frame.style.width = width;
-    this.frame.style.height = height;
-
-    this._resizeCanvas();
+  DataSet.prototype.getDataSet = function () {
+    return this;
   };
 
   /**
-   * Resize the canvas to the current size of the frame
+   * Execute a callback function for every item in the dataset.
+   * @param {function} callback
+   * @param {Object} [options]    Available options:
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] filter fields
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
    */
-  Graph3d.prototype._resizeCanvas = function() {
-    this.frame.canvas.style.width = '100%';
-    this.frame.canvas.style.height = '100%';
+  DataSet.prototype.forEach = function (callback, options) {
+    var filter = options && options.filter,
+        type = options && options.type || this._options.type,
+        data = this._data,
+        item,
+        id;
 
-    this.frame.canvas.width = this.frame.canvas.clientWidth;
-    this.frame.canvas.height = this.frame.canvas.clientHeight;
+    if (options && options.order) {
+      // execute forEach on ordered list
+      var items = this.get(options);
 
-    // adjust with for margin
-    this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px';
+      for (var i = 0, len = items.length; i < len; i++) {
+        item = items[i];
+        id = item[this._fieldId];
+        callback(item, id);
+      }
+    }
+    else {
+      // unordered
+      for (id in data) {
+        if (data.hasOwnProperty(id)) {
+          item = this._getItem(id, type);
+          if (!filter || filter(item)) {
+            callback(item, id);
+          }
+        }
+      }
+    }
   };
 
   /**
-   * Start animation
+   * Map every item in the dataset.
+   * @param {function} callback
+   * @param {Object} [options]    Available options:
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] filter fields
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Object[]} mappedItems
    */
-  Graph3d.prototype.animationStart = function() {
-    if (!this.frame.filter || !this.frame.filter.slider)
-      throw 'No animation available';
+  DataSet.prototype.map = function (callback, options) {
+    var filter = options && options.filter,
+        type = options && options.type || this._options.type,
+        mappedItems = [],
+        data = this._data,
+        item;
 
-    this.frame.filter.slider.play();
-  };
+    // convert and filter items
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        item = this._getItem(id, type);
+        if (!filter || filter(item)) {
+          mappedItems.push(callback(item, id));
+        }
+      }
+    }
+
+    // order items
+    if (options && options.order) {
+      this._sort(mappedItems, options.order);
+    }
 
+    return mappedItems;
+  };
 
   /**
-   * Stop animation
+   * Filter the fields of an item
+   * @param {Object} item
+   * @param {String[]} fields     Field names
+   * @return {Object} filteredItem
+   * @private
    */
-  Graph3d.prototype.animationStop = function() {
-    if (!this.frame.filter || !this.frame.filter.slider) return;
+  DataSet.prototype._filterFields = function (item, fields) {
+    var filteredItem = {};
 
-    this.frame.filter.slider.stop();
-  };
+    for (var field in item) {
+      if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
+        filteredItem[field] = item[field];
+      }
+    }
 
+    return filteredItem;
+  };
 
   /**
-   * Resize the center position based on the current values in this.defaultXCenter
-   * and this.defaultYCenter (which are strings with a percentage or a value
-   * in pixels). The center positions are the variables this.xCenter
-   * and this.yCenter
+   * Sort the provided array with items
+   * @param {Object[]} items
+   * @param {String | function} order      A field name or custom sort function.
+   * @private
    */
-  Graph3d.prototype._resizeCenter = function() {
-    // calculate the horizontal center position
-    if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') {
-      this.xcenter =
-        parseFloat(this.defaultXCenter) / 100 *
-          this.frame.canvas.clientWidth;
-    }
-    else {
-      this.xcenter = parseFloat(this.defaultXCenter); // supposed to be in px
+  DataSet.prototype._sort = function (items, order) {
+    if (util.isString(order)) {
+      // order by provided field name
+      var name = order; // field name
+      items.sort(function (a, b) {
+        var av = a[name];
+        var bv = b[name];
+        return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
+      });
     }
-
-    // calculate the vertical center position
-    if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') {
-      this.ycenter =
-        parseFloat(this.defaultYCenter) / 100 *
-          (this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
+    else if (typeof order === 'function') {
+      // order by sort function
+      items.sort(order);
     }
+    // TODO: extend order by an Object {field:String, direction:String}
+    //       where direction can be 'asc' or 'desc'
     else {
-      this.ycenter = parseFloat(this.defaultYCenter); // supposed to be in px
+      throw new TypeError('Order must be a function or a string');
     }
   };
 
   /**
-   * Set the rotation and distance of the camera
-   * @param {Object} pos   An object with the camera position. The object
-   *             contains three parameters:
-   *             - horizontal {Number}
-   *             The horizontal rotation, between 0 and 2*PI.
-   *             Optional, can be left undefined.
-   *             - vertical {Number}
-   *             The vertical rotation, between 0 and 0.5*PI
-   *             if vertical=0.5*PI, the graph is shown from the
-   *             top. Optional, can be left undefined.
-   *             - distance {Number}
-   *             The (normalized) distance of the camera to the
-   *             center of the graph, a value between 0.71 and 5.0.
-   *             Optional, can be left undefined.
+   * Remove an object by pointer or by id
+   * @param {String | Number | Object | Array} id Object or id, or an array with
+   *                                              objects or ids to be removed
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} removedIds
    */
-  Graph3d.prototype.setCameraPosition = function(pos) {
-    if (pos === undefined) {
-      return;
-    }
+  DataSet.prototype.remove = function (id, senderId) {
+    var removedIds = [],
+        i, len, removedId;
 
-    if (pos.horizontal !== undefined && pos.vertical !== undefined) {
-      this.camera.setArmRotation(pos.horizontal, pos.vertical);
+    if (Array.isArray(id)) {
+      for (i = 0, len = id.length; i < len; i++) {
+        removedId = this._remove(id[i]);
+        if (removedId != null) {
+          removedIds.push(removedId);
+        }
+      }
+    }
+    else {
+      removedId = this._remove(id);
+      if (removedId != null) {
+        removedIds.push(removedId);
+      }
     }
 
-    if (pos.distance !== undefined) {
-      this.camera.setArmLength(pos.distance);
+    if (removedIds.length) {
+      this._trigger('remove', {items: removedIds}, senderId);
     }
 
-    this.redraw();
+    return removedIds;
   };
 
-
   /**
-   * Retrieve the current camera rotation
-   * @return {object}   An object with parameters horizontal, vertical, and
-   *          distance
+   * Remove an item by its id
+   * @param {Number | String | Object} id   id or item
+   * @returns {Number | String | null} id
+   * @private
    */
-  Graph3d.prototype.getCameraPosition = function() {
-    var pos = this.camera.getArmRotation();
-    pos.distance = this.camera.getArmLength();
-    return pos;
+  DataSet.prototype._remove = function (id) {
+    if (util.isNumber(id) || util.isString(id)) {
+      if (this._data[id]) {
+        delete this._data[id];
+        return id;
+      }
+    }
+    else if (id instanceof Object) {
+      var itemId = id[this._fieldId];
+      if (itemId && this._data[itemId]) {
+        delete this._data[itemId];
+        return itemId;
+      }
+    }
+    return null;
   };
 
   /**
-   * Load data into the 3D Graph
+   * Clear the data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} removedIds    The ids of all removed items
    */
-  Graph3d.prototype._readData = function(data) {
-    // read the data
-    this._dataInitialize(data, this.style);
+  DataSet.prototype.clear = function (senderId) {
+    var ids = Object.keys(this._data);
 
+    this._data = {};
 
-    if (this.dataFilter) {
-      // apply filtering
-      this.dataPoints = this.dataFilter._getDataPoints();
-    }
-    else {
-      // no filtering. load all data
-      this.dataPoints = this._getDataPoints(this.dataTable);
-    }
+    this._trigger('remove', {items: ids}, senderId);
 
-    // draw the filter
-    this._redrawFilter();
+    return ids;
   };
 
   /**
-   * Replace the dataset of the Graph3d
-   * @param {Array | DataSet | DataView} data
+   * Find the item with maximum value of a specified field
+   * @param {String} field
+   * @return {Object | null} item  Item containing max value, or null if no items
    */
-  Graph3d.prototype.setData = function (data) {
-    this._readData(data);
-    this.redraw();
+  DataSet.prototype.max = function (field) {
+    var data = this._data,
+        max = null,
+        maxField = null;
 
-    // start animation when option is true
-    if (this.animationAutoStart && this.dataFilter) {
-      this.animationStart();
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        var item = data[id];
+        var itemField = item[field];
+        if (itemField != null && (!max || itemField > maxField)) {
+          max = item;
+          maxField = itemField;
+        }
+      }
     }
+
+    return max;
   };
 
   /**
-   * Update the options. Options will be merged with current options
-   * @param {Object} options
+   * Find the item with minimum value of a specified field
+   * @param {String} field
+   * @return {Object | null} item  Item containing max value, or null if no items
    */
-  Graph3d.prototype.setOptions = function (options) {
-    var cameraPosition = undefined;
-
-    this.animationStop();
+  DataSet.prototype.min = function (field) {
+    var data = this._data,
+        min = null,
+        minField = null;
 
-    if (options !== undefined) {
-      // retrieve parameter values
-      if (options.width !== undefined)       this.width = options.width;
-      if (options.height !== undefined)      this.height = options.height;
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        var item = data[id];
+        var itemField = item[field];
+        if (itemField != null && (!min || itemField < minField)) {
+          min = item;
+          minField = itemField;
+        }
+      }
+    }
 
-      if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
-      if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
+    return min;
+  };
 
-      if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
-      if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
-      if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
-      if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
-      if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
+  /**
+   * Find all distinct values of a specified field
+   * @param {String} field
+   * @return {Array} values  Array containing all distinct values. If data items
+   *                         do not contain the specified field are ignored.
+   *                         The returned array is unordered.
+   */
+  DataSet.prototype.distinct = function (field) {
+    var data = this._data;
+    var values = [];
+    var fieldType = this._options.type && this._options.type[field] || null;
+    var count = 0;
+    var i;
 
-      if (options.style !== undefined) {
-        var styleNumber = this._getStyleNumber(options.style);
-        if (styleNumber !== -1) {
-          this.style = styleNumber;
+    for (var prop in data) {
+      if (data.hasOwnProperty(prop)) {
+        var item = data[prop];
+        var value = item[field];
+        var exists = false;
+        for (i = 0; i < count; i++) {
+          if (values[i] == value) {
+            exists = true;
+            break;
+          }
+        }
+        if (!exists && (value !== undefined)) {
+          values[count] = value;
+          count++;
         }
       }
-      if (options.showGrid !== undefined)      this.showGrid = options.showGrid;
-      if (options.showPerspective !== undefined)   this.showPerspective = options.showPerspective;
-      if (options.showShadow !== undefined)    this.showShadow = options.showShadow;
-      if (options.tooltip !== undefined)       this.showTooltip = options.tooltip;
-      if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
-      if (options.keepAspectRatio !== undefined)   this.keepAspectRatio = options.keepAspectRatio;
-      if (options.verticalRatio !== undefined)   this.verticalRatio = options.verticalRatio;
-
-      if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
-      if (options.animationPreload !== undefined)  this.animationPreload = options.animationPreload;
-      if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
+    }
 
-      if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
-      if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
+    if (fieldType) {
+      for (i = 0; i < values.length; i++) {
+        values[i] = util.convert(values[i], fieldType);
+      }
+    }
 
-      if (options.xMin !== undefined) this.defaultXMin = options.xMin;
-      if (options.xStep !== undefined) this.defaultXStep = options.xStep;
-      if (options.xMax !== undefined) this.defaultXMax = options.xMax;
-      if (options.yMin !== undefined) this.defaultYMin = options.yMin;
-      if (options.yStep !== undefined) this.defaultYStep = options.yStep;
-      if (options.yMax !== undefined) this.defaultYMax = options.yMax;
-      if (options.zMin !== undefined) this.defaultZMin = options.zMin;
-      if (options.zStep !== undefined) this.defaultZStep = options.zStep;
-      if (options.zMax !== undefined) this.defaultZMax = options.zMax;
-      if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
-      if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
+    return values;
+  };
 
-      if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
+  /**
+   * Add a single item. Will fail when an item with the same id already exists.
+   * @param {Object} item
+   * @return {String} id
+   * @private
+   */
+  DataSet.prototype._addItem = function (item) {
+    var id = item[this._fieldId];
 
-      if (cameraPosition !== undefined) {
-        this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
-        this.camera.setArmLength(cameraPosition.distance);
+    if (id != undefined) {
+      // check whether this id is already taken
+      if (this._data[id]) {
+        // item already exists
+        throw new Error('Cannot add item: item with id ' + id + ' already exists');
       }
-      else {
-        this.camera.setArmRotation(1.0, 0.5);
-        this.camera.setArmLength(1.7);
+    }
+    else {
+      // generate an id
+      id = util.randomUUID();
+      item[this._fieldId] = id;
+    }
+
+    var d = {};
+    for (var field in item) {
+      if (item.hasOwnProperty(field)) {
+        var fieldType = this._type[field];  // type may be undefined
+        d[field] = util.convert(item[field], fieldType);
       }
     }
+    this._data[id] = d;
 
-    this._setBackgroundColor(options && options.backgroundColor);
+    return id;
+  };
 
-    this.setSize(this.width, this.height);
+  /**
+   * Get an item. Fields can be converted to a specific type
+   * @param {String} id
+   * @param {Object.<String, String>} [types]  field types to convert
+   * @return {Object | null} item
+   * @private
+   */
+  DataSet.prototype._getItem = function (id, types) {
+    var field, value;
 
-    // re-load the data
-    if (this.dataTable) {
-      this.setData(this.dataTable);
+    // get the item from the dataset
+    var raw = this._data[id];
+    if (!raw) {
+      return null;
     }
 
-    // start animation when option is true
-    if (this.animationAutoStart && this.dataFilter) {
-      this.animationStart();
+    // convert the items field types
+    var converted = {};
+    if (types) {
+      for (field in raw) {
+        if (raw.hasOwnProperty(field)) {
+          value = raw[field];
+          converted[field] = util.convert(value, types[field]);
+        }
+      }
+    }
+    else {
+      // no field types specified, no converting needed
+      for (field in raw) {
+        if (raw.hasOwnProperty(field)) {
+          value = raw[field];
+          converted[field] = value;
+        }
+      }
     }
+    return converted;
   };
 
   /**
-   * Redraw the Graph.
+   * Update a single item: merge with existing item.
+   * Will fail when the item has no id, or when there does not exist an item
+   * with the same id.
+   * @param {Object} item
+   * @return {String} id
+   * @private
    */
-  Graph3d.prototype.redraw = function() {
-    if (this.dataPoints === undefined) {
-      throw 'Error: graph data not initialized';
-    }
-
-    this._resizeCanvas();
-    this._resizeCenter();
-    this._redrawSlider();
-    this._redrawClear();
-    this._redrawAxis();
-
-    if (this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE) {
-      this._redrawDataGrid();
-    }
-    else if (this.style === Graph3d.STYLE.LINE) {
-      this._redrawDataLine();
+  DataSet.prototype._updateItem = function (item) {
+    var id = item[this._fieldId];
+    if (id == undefined) {
+      throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
     }
-    else if (this.style === Graph3d.STYLE.BAR ||
-      this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      this._redrawDataBar();
+    var d = this._data[id];
+    if (!d) {
+      // item doesn't exist
+      throw new Error('Cannot update item: no item with id ' + id + ' found');
     }
-    else {
-      // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
-      this._redrawDataDot();
+
+    // merge with current item
+    for (var field in item) {
+      if (item.hasOwnProperty(field)) {
+        var fieldType = this._type[field];  // type may be undefined
+        d[field] = util.convert(item[field], fieldType);
+      }
     }
 
-    this._redrawInfo();
-    this._redrawLegend();
+    return id;
   };
 
   /**
-   * Clear the canvas before redrawing
+   * Get an array with the column names of a Google DataTable
+   * @param {DataTable} dataTable
+   * @return {String[]} columnNames
+   * @private
    */
-  Graph3d.prototype._redrawClear = function() {
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  DataSet.prototype._getColumnNames = function (dataTable) {
+    var columns = [];
+    for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
+      columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
+    }
+    return columns;
   };
 
-
   /**
-   * Redraw the legend showing the colors
+   * Append an item as a row to the dataTable
+   * @param dataTable
+   * @param columns
+   * @param item
+   * @private
    */
-  Graph3d.prototype._redrawLegend = function() {
-    var y;
+  DataSet.prototype._appendRow = function (dataTable, columns, item) {
+    var row = dataTable.addRow();
 
-    if (this.style === Graph3d.STYLE.DOTCOLOR ||
-      this.style === Graph3d.STYLE.DOTSIZE) {
+    for (var col = 0, cols = columns.length; col < cols; col++) {
+      var field = columns[col];
+      dataTable.setValue(row, col, item[field]);
+    }
+  };
 
-      var dotSize = this.frame.clientWidth * 0.02;
+  module.exports = DataSet;
 
-      var widthMin, widthMax;
-      if (this.style === Graph3d.STYLE.DOTSIZE) {
-        widthMin = dotSize / 2; // px
-        widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
-      }
-      else {
-        widthMin = 20; // px
-        widthMax = 20; // px
-      }
 
-      var height = Math.max(this.frame.clientHeight * 0.25, 100);
-      var top = this.margin;
-      var right = this.frame.clientWidth - this.margin;
-      var left = right - widthMax;
-      var bottom = top + height;
-    }
+/***/ },
+/* 10 */
+/***/ function(module, exports, __webpack_require__) {
 
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-    ctx.lineWidth = 1;
-    ctx.font = '14px arial'; // TODO: put in options
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
 
-    if (this.style === Graph3d.STYLE.DOTCOLOR) {
-      // draw the color bar
-      var ymin = 0;
-      var ymax = height; // Todo: make height customizable
-      for (y = ymin; y < ymax; y++) {
-        var f = (y - ymin) / (ymax - ymin);
+  /**
+   * DataView
+   *
+   * a dataview offers a filtered view on a dataset or an other dataview.
+   *
+   * @param {DataSet | DataView} data
+   * @param {Object} [options]   Available options: see method get
+   *
+   * @constructor DataView
+   */
+  function DataView (data, options) {
+    this._data = null;
+    this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
+    this._options = options || {};
+    this._fieldId = 'id'; // name of the field containing id
+    this._subscribers = {}; // event subscribers
 
-        //var width = (dotSize / 2 + (1-f) * dotSize * 2); // Todo: put this in one function
-        var hue = f * 240;
-        var color = this._hsv2rgb(hue, 1, 1);
+    var me = this;
+    this.listener = function () {
+      me._onEvent.apply(me, arguments);
+    };
 
-        ctx.strokeStyle = color;
-        ctx.beginPath();
-        ctx.moveTo(left, top + y);
-        ctx.lineTo(right, top + y);
-        ctx.stroke();
-      }
+    this.setData(data);
+  }
 
-      ctx.strokeStyle =  this.colorAxis;
-      ctx.strokeRect(left, top, widthMax, height);
-    }
+  // TODO: implement a function .config() to dynamically update things like configured filter
+  // and trigger changes accordingly
 
-    if (this.style === Graph3d.STYLE.DOTSIZE) {
-      // draw border around color bar
-      ctx.strokeStyle =  this.colorAxis;
-      ctx.fillStyle =  this.colorDot;
-      ctx.beginPath();
-      ctx.moveTo(left, top);
-      ctx.lineTo(right, top);
-      ctx.lineTo(right - widthMax + widthMin, bottom);
-      ctx.lineTo(left, bottom);
-      ctx.closePath();
-      ctx.fill();
-      ctx.stroke();
-    }
+  /**
+   * Set a data source for the view
+   * @param {DataSet | DataView} data
+   */
+  DataView.prototype.setData = function (data) {
+    var ids, i, len;
 
-    if (this.style === Graph3d.STYLE.DOTCOLOR ||
-      this.style === Graph3d.STYLE.DOTSIZE) {
-      // print values along the color bar
-      var gridLineLen = 5; // px
-      var step = new StepNumber(this.valueMin, this.valueMax, (this.valueMax-this.valueMin)/5, true);
-      step.start();
-      if (step.getCurrent() < this.valueMin) {
-        step.next();
+    if (this._data) {
+      // unsubscribe from current dataset
+      if (this._data.unsubscribe) {
+        this._data.unsubscribe('*', this.listener);
       }
-      while (!step.end()) {
-        y = bottom - (step.getCurrent() - this.valueMin) / (this.valueMax - this.valueMin) * height;
 
-        ctx.beginPath();
-        ctx.moveTo(left - gridLineLen, y);
-        ctx.lineTo(left, y);
-        ctx.stroke();
+      // trigger a remove of all items in memory
+      ids = [];
+      for (var id in this._ids) {
+        if (this._ids.hasOwnProperty(id)) {
+          ids.push(id);
+        }
+      }
+      this._ids = {};
+      this._trigger('remove', {items: ids});
+    }
 
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-        ctx.fillStyle = this.colorAxis;
-        ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
+    this._data = data;
 
-        step.next();
+    if (this._data) {
+      // update fieldId
+      this._fieldId = this._options.fieldId ||
+          (this._data && this._data.options && this._data.options.fieldId) ||
+          'id';
+
+      // trigger an add of all added items
+      ids = this._data.getIds({filter: this._options && this._options.filter});
+      for (i = 0, len = ids.length; i < len; i++) {
+        id = ids[i];
+        this._ids[id] = true;
       }
+      this._trigger('add', {items: ids});
 
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'top';
-      var label = this.legendLabel;
-      ctx.fillText(label, right, bottom + this.margin);
+      // subscribe to new dataset
+      if (this._data.on) {
+        this._data.on('*', this.listener);
+      }
     }
   };
 
   /**
-   * Redraw the filter
+   * Get data from the data view
+   *
+   * Usage:
+   *
+   *     get()
+   *     get(options: Object)
+   *     get(options: Object, data: Array | DataTable)
+   *
+   *     get(id: Number)
+   *     get(id: Number, options: Object)
+   *     get(id: Number, options: Object, data: Array | DataTable)
+   *
+   *     get(ids: Number[])
+   *     get(ids: Number[], options: Object)
+   *     get(ids: Number[], options: Object, data: Array | DataTable)
+   *
+   * Where:
+   *
+   * {Number | String} id         The id of an item
+   * {Number[] | String{}} ids    An array with ids of items
+   * {Object} options             An Object with options. Available options:
+   *                              {String} [type] Type of data to be returned. Can
+   *                                              be 'DataTable' or 'Array' (default)
+   *                              {Object.<String, String>} [convert]
+   *                              {String[]} [fields] field names to be returned
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * {Array | DataTable} [data]   If provided, items will be appended to this
+   *                              array or table. Required in case of Google
+   *                              DataTable.
+   * @param args
    */
-  Graph3d.prototype._redrawFilter = function() {
-    this.frame.filter.innerHTML = '';
+  DataView.prototype.get = function (args) {
+    var me = this;
 
-    if (this.dataFilter) {
-      var options = {
-        'visible': this.showAnimationControls
-      };
-      var slider = new Slider(this.frame.filter, options);
-      this.frame.filter.slider = slider;
+    // parse the arguments
+    var ids, options, data;
+    var firstType = util.getType(arguments[0]);
+    if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
+      // get(id(s) [, options] [, data])
+      ids = arguments[0];  // can be a single id or an array with ids
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else {
+      // get([, options] [, data])
+      options = arguments[0];
+      data = arguments[1];
+    }
 
-      // TODO: css here is not nice here...
-      this.frame.filter.style.padding = '10px';
-      //this.frame.filter.style.backgroundColor = '#EFEFEF';
+    // extend the options with the default options and provided options
+    var viewOptions = util.extend({}, this._options, options);
 
-      slider.setValues(this.dataFilter.values);
-      slider.setPlayInterval(this.animationInterval);
+    // create a combined filter method when needed
+    if (this._options.filter && options && options.filter) {
+      viewOptions.filter = function (item) {
+        return me._options.filter(item) && options.filter(item);
+      }
+    }
 
-      // create an event handler
-      var me = this;
-      var onchange = function () {
-        var index = slider.getIndex();
+    // build up the call to the linked data set
+    var getArguments = [];
+    if (ids != undefined) {
+      getArguments.push(ids);
+    }
+    getArguments.push(viewOptions);
+    getArguments.push(data);
 
-        me.dataFilter.selectValue(index);
-        me.dataPoints = me.dataFilter._getDataPoints();
+    return this._data && this._data.get.apply(this._data, getArguments);
+  };
 
-        me.redraw();
-      };
-      slider.setOnChangeCallback(onchange);
+  /**
+   * Get ids of all items or from a filtered set of items.
+   * @param {Object} [options]    An Object with options. Available options:
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Array} ids
+   */
+  DataView.prototype.getIds = function (options) {
+    var ids;
+
+    if (this._data) {
+      var defaultFilter = this._options.filter;
+      var filter;
+
+      if (options && options.filter) {
+        if (defaultFilter) {
+          filter = function (item) {
+            return defaultFilter(item) && options.filter(item);
+          }
+        }
+        else {
+          filter = options.filter;
+        }
+      }
+      else {
+        filter = defaultFilter;
+      }
+
+      ids = this._data.getIds({
+        filter: filter,
+        order: options && options.order
+      });
     }
     else {
-      this.frame.filter.slider = undefined;
+      ids = [];
     }
+
+    return ids;
   };
 
   /**
-   * Redraw the slider
+   * Get the DataSet to which this DataView is connected. In case there is a chain
+   * of multiple DataViews, the root DataSet of this chain is returned.
+   * @return {DataSet} dataSet
    */
-  Graph3d.prototype._redrawSlider = function() {
-    if ( this.frame.filter.slider !== undefined) {
-      this.frame.filter.slider.redraw();
+  DataView.prototype.getDataSet = function () {
+    var dataSet = this;
+    while (dataSet instanceof DataView) {
+      dataSet = dataSet._data;
     }
+    return dataSet || null;
   };
 
-
   /**
-   * Redraw common information
+   * Event listener. Will propagate all events from the connected data set to
+   * the subscribers of the DataView, but will filter the items and only trigger
+   * when there are changes in the filtered data set.
+   * @param {String} event
+   * @param {Object | null} params
+   * @param {String} senderId
+   * @private
    */
-  Graph3d.prototype._redrawInfo = function() {
-    if (this.dataFilter) {
-      var canvas = this.frame.canvas;
-      var ctx = canvas.getContext('2d');
-
-      ctx.font = '14px arial'; // TODO: put in options
-      ctx.lineStyle = 'gray';
-      ctx.fillStyle = 'gray';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'top';
-
-      var x = this.margin;
-      var y = this.margin;
-      ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y);
-    }
-  };
+  DataView.prototype._onEvent = function (event, params, senderId) {
+    var i, len, id, item,
+        ids = params && params.items,
+        data = this._data,
+        added = [],
+        updated = [],
+        removed = [];
 
+    if (ids && data) {
+      switch (event) {
+        case 'add':
+          // filter the ids of the added items
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            item = this.get(id);
+            if (item) {
+              this._ids[id] = true;
+              added.push(id);
+            }
+          }
 
-  /**
-   * Redraw the axis
-   */
-  Graph3d.prototype._redrawAxis = function() {
-    var canvas = this.frame.canvas,
-      ctx = canvas.getContext('2d'),
-      from, to, step, prettyStep,
-      text, xText, yText, zText,
-      offset, xOffset, yOffset,
-      xMin2d, xMax2d;
+          break;
 
-    // TODO: get the actual rendered style of the containerElement
-    //ctx.font = this.containerElement.style.font;
-    ctx.font = 24 / this.camera.getArmLength() + 'px arial';
+        case 'update':
+          // determine the event from the views viewpoint: an updated
+          // item can be added, updated, or removed from this view.
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            item = this.get(id);
 
-    // calculate the length for the short grid lines
-    var gridLenX = 0.025 / this.scale.x;
-    var gridLenY = 0.025 / this.scale.y;
-    var textMargin = 5 / this.camera.getArmLength(); // px
-    var armAngle = this.camera.getArmRotation().horizontal;
+            if (item) {
+              if (this._ids[id]) {
+                updated.push(id);
+              }
+              else {
+                this._ids[id] = true;
+                added.push(id);
+              }
+            }
+            else {
+              if (this._ids[id]) {
+                delete this._ids[id];
+                removed.push(id);
+              }
+              else {
+                // nothing interesting for me :-(
+              }
+            }
+          }
 
-    // draw x-grid lines
-    ctx.lineWidth = 1;
-    prettyStep = (this.defaultXStep === undefined);
-    step = new StepNumber(this.xMin, this.xMax, this.xStep, prettyStep);
-    step.start();
-    if (step.getCurrent() < this.xMin) {
-      step.next();
-    }
-    while (!step.end()) {
-      var x = step.getCurrent();
+          break;
 
-      if (this.showGrid) {
-        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
-        to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-        ctx.strokeStyle = this.colorGrid;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
-      }
-      else {
-        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
-        to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
+        case 'remove':
+          // filter the ids of the removed items
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            if (this._ids[id]) {
+              delete this._ids[id];
+              removed.push(id);
+            }
+          }
 
-        from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-        to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
+          break;
       }
 
-      yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
-      text = this._convert3Dto2D(new Point3d(x, yText, this.zMin));
-      if (Math.cos(armAngle * 2) > 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-        text.y += textMargin;
+      if (added.length) {
+        this._trigger('add', {items: added}, senderId);
       }
-      else if (Math.sin(armAngle * 2) < 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
+      if (updated.length) {
+        this._trigger('update', {items: updated}, senderId);
       }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
+      if (removed.length) {
+        this._trigger('remove', {items: removed}, senderId);
       }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
-
-      step.next();
     }
+  };
 
-    // draw y-grid lines
-    ctx.lineWidth = 1;
-    prettyStep = (this.defaultYStep === undefined);
-    step = new StepNumber(this.yMin, this.yMax, this.yStep, prettyStep);
-    step.start();
-    if (step.getCurrent() < this.yMin) {
-      step.next();
-    }
-    while (!step.end()) {
-      if (this.showGrid) {
-        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
-        to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorGrid;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
-      }
-      else {
-        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
-        to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
+  // copy subscription functionality from DataSet
+  DataView.prototype.on = DataSet.prototype.on;
+  DataView.prototype.off = DataSet.prototype.off;
+  DataView.prototype._trigger = DataSet.prototype._trigger;
 
-        from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-        to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
-      }
+  // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
+  DataView.prototype.subscribe = DataView.prototype.on;
+  DataView.prototype.unsubscribe = DataView.prototype.off;
 
-      xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
-      text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin));
-      if (Math.cos(armAngle * 2) < 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-        text.y += textMargin;
-      }
-      else if (Math.sin(armAngle * 2) > 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-      }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-      }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
+  module.exports = DataView;
 
-      step.next();
-    }
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // draw z-grid lines and axis
-    ctx.lineWidth = 1;
-    prettyStep = (this.defaultZStep === undefined);
-    step = new StepNumber(this.zMin, this.zMax, this.zStep, prettyStep);
-    step.start();
-    if (step.getCurrent() < this.zMin) {
-      step.next();
-    }
-    xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
-    yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
-    while (!step.end()) {
-      // TODO: make z-grid lines really 3d?
-      from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
-      ctx.strokeStyle = this.colorAxis;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(from.x - textMargin, from.y);
-      ctx.stroke();
+  var Emitter = __webpack_require__(12);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Point3d = __webpack_require__(13);
+  var Point2d = __webpack_require__(14);
+  var Filter = __webpack_require__(15);
+  var StepNumber = __webpack_require__(16);
 
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y);
-
-      step.next();
+  /**
+   * @constructor Graph3d
+   * Graph3d displays data in 3d.
+   *
+   * Graph3d is developed in javascript as a Google Visualization Chart.
+   *
+   * @param {Element} container   The DOM element in which the Graph3d will
+   *                              be created. Normally a div element.
+   * @param {DataSet | DataView | Array} [data]
+   * @param {Object} [options]
+   */
+  function Graph3d(container, data, options) {
+    if (!(this instanceof Graph3d)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
     }
-    ctx.lineWidth = 1;
-    from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-    to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.stroke();
 
-    // draw x-axis
-    ctx.lineWidth = 1;
-    // line at yMin
-    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
-    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(xMin2d.x, xMin2d.y);
-    ctx.lineTo(xMax2d.x, xMax2d.y);
-    ctx.stroke();
-    // line at ymax
-    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(xMin2d.x, xMin2d.y);
-    ctx.lineTo(xMax2d.x, xMax2d.y);
-    ctx.stroke();
+    // create variables and set default values
+    this.containerElement = container;
+    this.width = '400px';
+    this.height = '400px';
+    this.margin = 10; // px
+    this.defaultXCenter = '55%';
+    this.defaultYCenter = '50%';
 
-    // draw y-axis
-    ctx.lineWidth = 1;
-    // line at xMin
-    from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
-    to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.stroke();
-    // line at xMax
-    from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-    to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.stroke();
+    this.xLabel = 'x';
+    this.yLabel = 'y';
+    this.zLabel = 'z';
+    this.filterLabel = 'time';
+    this.legendLabel = 'value';
 
-    // draw x-label
-    var xLabel = this.xLabel;
-    if (xLabel.length > 0) {
-      yOffset = 0.1 / this.scale.y;
-      xText = (this.xMin + this.xMax) / 2;
-      yText = (Math.cos(armAngle) > 0) ? this.yMin - yOffset: this.yMax + yOffset;
-      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-      if (Math.cos(armAngle * 2) > 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-      }
-      else if (Math.sin(armAngle * 2) < 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-      }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-      }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(xLabel, text.x, text.y);
-    }
+    this.style = Graph3d.STYLE.DOT;
+    this.showPerspective = true;
+    this.showGrid = true;
+    this.keepAspectRatio = true;
+    this.showShadow = false;
+    this.showGrayBottom = false; // TODO: this does not work correctly
+    this.showTooltip = false;
+    this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube'
 
-    // draw y-label
-    var yLabel = this.yLabel;
-    if (yLabel.length > 0) {
-      xOffset = 0.1 / this.scale.x;
-      xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
-      yText = (this.yMin + this.yMax) / 2;
-      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-      if (Math.cos(armAngle * 2) < 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-      }
-      else if (Math.sin(armAngle * 2) > 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-      }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-      }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(yLabel, text.x, text.y);
-    }
+    this.animationInterval = 1000; // milliseconds
+    this.animationPreload = false;
 
-    // draw z-label
-    var zLabel = this.zLabel;
-    if (zLabel.length > 0) {
-      offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
-      xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
-      yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
-      zText = (this.zMin + this.zMax) / 2;
-      text = this._convert3Dto2D(new Point3d(xText, yText, zText));
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(zLabel, text.x - offset, text.y);
+    this.camera = new Graph3d.Camera();
+    this.eye = new Point3d(0, 0, -1);  // TODO: set eye.z about 3/4 of the width of the window?
+
+    this.dataTable = null;  // The original data table
+    this.dataPoints = null; // The table with point objects
+
+    // the column indexes
+    this.colX = undefined;
+    this.colY = undefined;
+    this.colZ = undefined;
+    this.colValue = undefined;
+    this.colFilter = undefined;
+
+    this.xMin = 0;
+    this.xStep = undefined; // auto by default
+    this.xMax = 1;
+    this.yMin = 0;
+    this.yStep = undefined; // auto by default
+    this.yMax = 1;
+    this.zMin = 0;
+    this.zStep = undefined; // auto by default
+    this.zMax = 1;
+    this.valueMin = 0;
+    this.valueMax = 1;
+    this.xBarWidth = 1;
+    this.yBarWidth = 1;
+    // TODO: customize axis range
+
+    // constants
+    this.colorAxis = '#4D4D4D';
+    this.colorGrid = '#D3D3D3';
+    this.colorDot = '#7DC1FF';
+    this.colorDotBorder = '#3267D2';
+
+    // create a frame and canvas
+    this.create();
+
+    // apply options (also when undefined)
+    this.setOptions(options);
+
+    // apply data
+    if (data) {
+      this.setData(data);
     }
+  }
+
+  // Extend Graph3d with an Emitter mixin
+  Emitter(Graph3d.prototype);
+
+  /**
+   * @class Camera
+   * The camera is mounted on a (virtual) camera arm. The camera arm can rotate
+   * The camera is always looking in the direction of the origin of the arm.
+   * This way, the camera always rotates around one fixed point, the location
+   * of the camera arm.
+   *
+   * Documentation:
+   *   http://en.wikipedia.org/wiki/3D_projection
+   */
+  Graph3d.Camera = function () {
+    this.armLocation = new Point3d();
+    this.armRotation = {};
+    this.armRotation.horizontal = 0;
+    this.armRotation.vertical = 0;
+    this.armLength = 1.7;
+
+    this.cameraLocation = new Point3d();
+    this.cameraRotation =  new Point3d(0.5*Math.PI, 0, 0);
+
+    this.calculateCameraOrientation();
   };
 
   /**
-   * Calculate the color based on the given value.
-   * @param {Number} H   Hue, a value be between 0 and 360
-   * @param {Number} S   Saturation, a value between 0 and 1
-   * @param {Number} V   Value, a value between 0 and 1
+   * Set the location (origin) of the arm
+   * @param {Number} x  Normalized value of x
+   * @param {Number} y  Normalized value of y
+   * @param {Number} z  Normalized value of z
    */
-  Graph3d.prototype._hsv2rgb = function(H, S, V) {
-    var R, G, B, C, Hi, X;
+  Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
+    this.armLocation.x = x;
+    this.armLocation.y = y;
+    this.armLocation.z = z;
 
-    C = V * S;
-    Hi = Math.floor(H/60);  // hi = 0,1,2,3,4,5
-    X = C * (1 - Math.abs(((H/60) % 2) - 1));
+    this.calculateCameraOrientation();
+  };
 
-    switch (Hi) {
-      case 0: R = C; G = X; B = 0; break;
-      case 1: R = X; G = C; B = 0; break;
-      case 2: R = 0; G = C; B = X; break;
-      case 3: R = 0; G = X; B = C; break;
-      case 4: R = X; G = 0; B = C; break;
-      case 5: R = C; G = 0; B = X; break;
+  /**
+   * Set the rotation of the camera arm
+   * @param {Number} horizontal   The horizontal rotation, between 0 and 2*PI.
+   *                Optional, can be left undefined.
+   * @param {Number} vertical   The vertical rotation, between 0 and 0.5*PI
+   *                if vertical=0.5*PI, the graph is shown from the
+   *                top. Optional, can be left undefined.
+   */
+  Graph3d.Camera.prototype.setArmRotation = function(horizontal, vertical) {
+    if (horizontal !== undefined) {
+      this.armRotation.horizontal = horizontal;
+    }
 
-      default: R = 0; G = 0; B = 0; break;
+    if (vertical !== undefined) {
+      this.armRotation.vertical = vertical;
+      if (this.armRotation.vertical < 0) this.armRotation.vertical = 0;
+      if (this.armRotation.vertical > 0.5*Math.PI) this.armRotation.vertical = 0.5*Math.PI;
     }
 
-    return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')';
+    if (horizontal !== undefined || vertical !== undefined) {
+      this.calculateCameraOrientation();
+    }
   };
 
-
   /**
-   * Draw all datapoints as a grid
-   * This function can be used when the style is 'grid'
+   * Retrieve the current arm rotation
+   * @return {object}   An object with parameters horizontal and vertical
    */
-  Graph3d.prototype._redrawDataGrid = function() {
-    var canvas = this.frame.canvas,
-      ctx = canvas.getContext('2d'),
-      point, right, top, cross,
-      i,
-      topSideVisible, fillStyle, strokeStyle, lineWidth,
-      h, s, v, zAvg;
-
+  Graph3d.Camera.prototype.getArmRotation = function() {
+    var rot = {};
+    rot.horizontal = this.armRotation.horizontal;
+    rot.vertical = this.armRotation.vertical;
 
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return; // TODO: throw exception?
+    return rot;
+  };
 
-    // calculate the translations and screen position of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
+  /**
+   * Set the (normalized) length of the camera arm.
+   * @param {Number} length A length between 0.71 and 5.0
+   */
+  Graph3d.Camera.prototype.setArmLength = function(length) {
+    if (length === undefined)
+      return;
 
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+    this.armLength = length;
 
-      // calculate the translation of the point at the bottom (needed for sorting)
-      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
-      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
-    }
+    // Radius must be larger than the corner of the graph,
+    // which has a distance of sqrt(0.5^2+0.5^2) = 0.71 from the center of the
+    // graph
+    if (this.armLength < 0.71) this.armLength = 0.71;
+    if (this.armLength > 5.0) this.armLength = 5.0;
 
-    // sort the points on depth of their (x,y) position (not on z)
-    var sortDepth = function (a, b) {
-      return b.dist - a.dist;
-    };
-    this.dataPoints.sort(sortDepth);
+    this.calculateCameraOrientation();
+  };
 
-    if (this.style === Graph3d.STYLE.SURFACE) {
-      for (i = 0; i < this.dataPoints.length; i++) {
-        point = this.dataPoints[i];
-        right = this.dataPoints[i].pointRight;
-        top   = this.dataPoints[i].pointTop;
-        cross = this.dataPoints[i].pointCross;
+  /**
+   * Retrieve the arm length
+   * @return {Number} length
+   */
+  Graph3d.Camera.prototype.getArmLength = function() {
+    return this.armLength;
+  };
 
-        if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {
+  /**
+   * Retrieve the camera location
+   * @return {Point3d} cameraLocation
+   */
+  Graph3d.Camera.prototype.getCameraLocation = function() {
+    return this.cameraLocation;
+  };
 
-          if (this.showGrayBottom || this.showShadow) {
-            // calculate the cross product of the two vectors from center
-            // to left and right, in order to know whether we are looking at the
-            // bottom or at the top side. We can also use the cross product
-            // for calculating light intensity
-            var aDiff = Point3d.subtract(cross.trans, point.trans);
-            var bDiff = Point3d.subtract(top.trans, right.trans);
-            var crossproduct = Point3d.crossProduct(aDiff, bDiff);
-            var len = crossproduct.length();
-            // FIXME: there is a bug with determining the surface side (shadow or colored)
+  /**
+   * Retrieve the camera rotation
+   * @return {Point3d} cameraRotation
+   */
+  Graph3d.Camera.prototype.getCameraRotation = function() {
+    return this.cameraRotation;
+  };
 
-            topSideVisible = (crossproduct.z > 0);
-          }
-          else {
-            topSideVisible = true;
-          }
+  /**
+   * Calculate the location and rotation of the camera based on the
+   * position and orientation of the camera arm
+   */
+  Graph3d.Camera.prototype.calculateCameraOrientation = function() {
+    // calculate location of the camera
+    this.cameraLocation.x = this.armLocation.x - this.armLength * Math.sin(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
+    this.cameraLocation.y = this.armLocation.y - this.armLength * Math.cos(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
+    this.cameraLocation.z = this.armLocation.z + this.armLength * Math.sin(this.armRotation.vertical);
 
-          if (topSideVisible) {
-            // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-            zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
-            h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-            s = 1; // saturation
+    // calculate rotation of the camera
+    this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical;
+    this.cameraRotation.y = 0;
+    this.cameraRotation.z = -this.armRotation.horizontal;
+  };
 
-            if (this.showShadow) {
-              v = Math.min(1 + (crossproduct.x / len) / 2, 1);  // value. TODO: scale
-              fillStyle = this._hsv2rgb(h, s, v);
-              strokeStyle = fillStyle;
-            }
-            else  {
-              v = 1;
-              fillStyle = this._hsv2rgb(h, s, v);
-              strokeStyle = this.colorAxis;
-            }
-          }
-          else {
-            fillStyle = 'gray';
-            strokeStyle = this.colorAxis;
-          }
-          lineWidth = 0.5;
+  /**
+   * Calculate the scaling values, dependent on the range in x, y, and z direction
+   */
+  Graph3d.prototype._setScale = function() {
+    this.scale = new Point3d(1 / (this.xMax - this.xMin),
+      1 / (this.yMax - this.yMin),
+      1 / (this.zMax - this.zMin));
 
-          ctx.lineWidth = lineWidth;
-          ctx.fillStyle = fillStyle;
-          ctx.strokeStyle = strokeStyle;
-          ctx.beginPath();
-          ctx.moveTo(point.screen.x, point.screen.y);
-          ctx.lineTo(right.screen.x, right.screen.y);
-          ctx.lineTo(cross.screen.x, cross.screen.y);
-          ctx.lineTo(top.screen.x, top.screen.y);
-          ctx.closePath();
-          ctx.fill();
-          ctx.stroke();
-        }
+    // keep aspect ration between x and y scale if desired
+    if (this.keepAspectRatio) {
+      if (this.scale.x < this.scale.y) {
+        //noinspection JSSuspiciousNameCombination
+        this.scale.y = this.scale.x;
+      }
+      else {
+        //noinspection JSSuspiciousNameCombination
+        this.scale.x = this.scale.y;
       }
     }
-    else { // grid style
-      for (i = 0; i < this.dataPoints.length; i++) {
-        point = this.dataPoints[i];
-        right = this.dataPoints[i].pointRight;
-        top   = this.dataPoints[i].pointTop;
-
-        if (point !== undefined) {
-          if (this.showPerspective) {
-            lineWidth = 2 / -point.trans.z;
-          }
-          else {
-            lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
-          }
-        }
-
-        if (point !== undefined && right !== undefined) {
-          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-          zAvg = (point.point.z + right.point.z) / 2;
-          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-          ctx.lineWidth = lineWidth;
-          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-          ctx.beginPath();
-          ctx.moveTo(point.screen.x, point.screen.y);
-          ctx.lineTo(right.screen.x, right.screen.y);
-          ctx.stroke();
-        }
+    // scale the vertical axis
+    this.scale.z *= this.verticalRatio;
+    // TODO: can this be automated? verticalRatio?
 
-        if (point !== undefined && top !== undefined) {
-          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-          zAvg = (point.point.z + top.point.z) / 2;
-          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+    // determine scale for (optional) value
+    this.scale.value = 1 / (this.valueMax - this.valueMin);
 
-          ctx.lineWidth = lineWidth;
-          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-          ctx.beginPath();
-          ctx.moveTo(point.screen.x, point.screen.y);
-          ctx.lineTo(top.screen.x, top.screen.y);
-          ctx.stroke();
-        }
-      }
-    }
+    // position the camera arm
+    var xCenter = (this.xMax + this.xMin) / 2 * this.scale.x;
+    var yCenter = (this.yMax + this.yMin) / 2 * this.scale.y;
+    var zCenter = (this.zMax + this.zMin) / 2 * this.scale.z;
+    this.camera.setArmLocation(xCenter, yCenter, zCenter);
   };
 
 
   /**
-   * Draw all datapoints as dots.
-   * This function can be used when the style is 'dot' or 'dot-line'
+   * Convert a 3D location to a 2D location on screen
+   * http://en.wikipedia.org/wiki/3D_projection
+   * @param {Point3d} point3d   A 3D point with parameters x, y, z
+   * @return {Point2d} point2d  A 2D point with parameters x, y
    */
-  Graph3d.prototype._redrawDataDot = function() {
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-    var i;
+  Graph3d.prototype._convert3Dto2D = function(point3d) {
+    var translation = this._convertPointToTranslation(point3d);
+    return this._convertTranslationToScreen(translation);
+  };
 
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return;  // TODO: throw exception?
+  /**
+   * Convert a 3D location its translation seen from the camera
+   * http://en.wikipedia.org/wiki/3D_projection
+   * @param {Point3d} point3d    A 3D point with parameters x, y, z
+   * @return {Point3d} translation A 3D point with parameters x, y, z This is
+   *                   the translation of the point, seen from the
+   *                   camera
+   */
+  Graph3d.prototype._convertPointToTranslation = function(point3d) {
+    var ax = point3d.x * this.scale.x,
+      ay = point3d.y * this.scale.y,
+      az = point3d.z * this.scale.z,
 
-    // calculate the translations of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+      cx = this.camera.getCameraLocation().x,
+      cy = this.camera.getCameraLocation().y,
+      cz = this.camera.getCameraLocation().z,
 
-      // calculate the distance from the point at the bottom to the camera
-      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
-      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
-    }
+    // calculate angles
+      sinTx = Math.sin(this.camera.getCameraRotation().x),
+      cosTx = Math.cos(this.camera.getCameraRotation().x),
+      sinTy = Math.sin(this.camera.getCameraRotation().y),
+      cosTy = Math.cos(this.camera.getCameraRotation().y),
+      sinTz = Math.sin(this.camera.getCameraRotation().z),
+      cosTz = Math.cos(this.camera.getCameraRotation().z),
 
-    // order the translated points by depth
-    var sortDepth = function (a, b) {
-      return b.dist - a.dist;
-    };
-    this.dataPoints.sort(sortDepth);
-
-    // draw the datapoints as colored circles
-    var dotSize = this.frame.clientWidth * 0.02;  // px
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var point = this.dataPoints[i];
-
-      if (this.style === Graph3d.STYLE.DOTLINE) {
-        // draw a vertical line from the bottom to the graph value
-        //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
-        var from = this._convert3Dto2D(point.bottom);
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = this.colorGrid;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(point.screen.x, point.screen.y);
-        ctx.stroke();
-      }
-
-      // calculate radius for the circle
-      var size;
-      if (this.style === Graph3d.STYLE.DOTSIZE) {
-        size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
-      }
-      else {
-        size = dotSize;
-      }
+    // calculate translation
+      dx = cosTy * (sinTz * (ay - cy) + cosTz * (ax - cx)) - sinTy * (az - cz),
+      dy = sinTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) + cosTx * (cosTz * (ay - cy) - sinTz * (ax-cx)),
+      dz = cosTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) - sinTx * (cosTz * (ay - cy) - sinTz * (ax-cx));
 
-      var radius;
-      if (this.showPerspective) {
-        radius = size / -point.trans.z;
-      }
-      else {
-        radius = size * -(this.eye.z / this.camera.getArmLength());
-      }
-      if (radius < 0) {
-        radius = 0;
-      }
+    return new Point3d(dx, dy, dz);
+  };
 
-      var hue, color, borderColor;
-      if (this.style === Graph3d.STYLE.DOTCOLOR ) {
-        // calculate the color based on the value
-        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
-      else if (this.style === Graph3d.STYLE.DOTSIZE) {
-        color = this.colorDot;
-        borderColor = this.colorDotBorder;
-      }
-      else {
-        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
+  /**
+   * Convert a translation point to a point on the screen
+   * @param {Point3d} translation   A 3D point with parameters x, y, z This is
+   *                    the translation of the point, seen from the
+   *                    camera
+   * @return {Point2d} point2d    A 2D point with parameters x, y
+   */
+  Graph3d.prototype._convertTranslationToScreen = function(translation) {
+    var ex = this.eye.x,
+      ey = this.eye.y,
+      ez = this.eye.z,
+      dx = translation.x,
+      dy = translation.y,
+      dz = translation.z;
 
-      // draw the circle
-      ctx.lineWidth = 1.0;
-      ctx.strokeStyle = borderColor;
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
-      ctx.fill();
-      ctx.stroke();
+    // calculate position on screen from translation
+    var bx;
+    var by;
+    if (this.showPerspective) {
+      bx = (dx - ex) * (ez / dz);
+      by = (dy - ey) * (ez / dz);
+    }
+    else {
+      bx = dx * -(ez / this.camera.getArmLength());
+      by = dy * -(ez / this.camera.getArmLength());
     }
+
+    // shift and scale the point to the center of the screen
+    // use the width of the graph to scale both horizontally and vertically.
+    return new Point2d(
+      this.xcenter + bx * this.frame.canvas.clientWidth,
+      this.ycenter - by * this.frame.canvas.clientWidth);
   };
 
   /**
-   * Draw all datapoints as bars.
-   * This function can be used when the style is 'bar', 'bar-color', or 'bar-size'
+   * Set the background styling for the graph
+   * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
    */
-  Graph3d.prototype._redrawDataBar = function() {
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-    var i, j, surface, corners;
-
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return;  // TODO: throw exception?
-
-    // calculate the translations of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+  Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
+    var fill = 'white';
+    var stroke = 'gray';
+    var strokeWidth = 1;
 
-      // calculate the distance from the point at the bottom to the camera
-      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
-      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    if (typeof(backgroundColor) === 'string') {
+      fill = backgroundColor;
+      stroke = 'none';
+      strokeWidth = 0;
+    }
+    else if (typeof(backgroundColor) === 'object') {
+      if (backgroundColor.fill !== undefined)    fill = backgroundColor.fill;
+      if (backgroundColor.stroke !== undefined)    stroke = backgroundColor.stroke;
+      if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth;
+    }
+    else if  (backgroundColor === undefined) {
+      // use use defaults
+    }
+    else {
+      throw 'Unsupported type of backgroundColor';
     }
 
-    // order the translated points by depth
-    var sortDepth = function (a, b) {
-      return b.dist - a.dist;
-    };
-    this.dataPoints.sort(sortDepth);
-
-    // draw the datapoints as bars
-    var xWidth = this.xBarWidth / 2;
-    var yWidth = this.yBarWidth / 2;
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var point = this.dataPoints[i];
+    this.frame.style.backgroundColor = fill;
+    this.frame.style.borderColor = stroke;
+    this.frame.style.borderWidth = strokeWidth + 'px';
+    this.frame.style.borderStyle = 'solid';
+  };
 
-      // determine color
-      var hue, color, borderColor;
-      if (this.style === Graph3d.STYLE.BARCOLOR ) {
-        // calculate the color based on the value
-        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
-      else if (this.style === Graph3d.STYLE.BARSIZE) {
-        color = this.colorDot;
-        borderColor = this.colorDotBorder;
-      }
-      else {
-        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
 
-      // calculate size for the bar
-      if (this.style === Graph3d.STYLE.BARSIZE) {
-        xWidth = (this.xBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
-        yWidth = (this.yBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
-      }
+  /// enumerate the available styles
+  Graph3d.STYLE = {
+    BAR: 0,
+    BARCOLOR: 1,
+    BARSIZE: 2,
+    DOT : 3,
+    DOTLINE : 4,
+    DOTCOLOR: 5,
+    DOTSIZE: 6,
+    GRID : 7,
+    LINE: 8,
+    SURFACE : 9
+  };
 
-      // calculate all corner points
-      var me = this;
-      var point3d = point.point;
-      var top = [
-        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
-        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
-      ];
-      var bottom = [
-        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, this.zMin)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, this.zMin)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, this.zMin)},
-        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, this.zMin)}
-      ];
+  /**
+   * Retrieve the style index from given styleName
+   * @param {string} styleName  Style name such as 'dot', 'grid', 'dot-line'
+   * @return {Number} styleNumber Enumeration value representing the style, or -1
+   *                when not found
+   */
+  Graph3d.prototype._getStyleNumber = function(styleName) {
+    switch (styleName) {
+      case 'dot':     return Graph3d.STYLE.DOT;
+      case 'dot-line':  return Graph3d.STYLE.DOTLINE;
+      case 'dot-color':   return Graph3d.STYLE.DOTCOLOR;
+      case 'dot-size':  return Graph3d.STYLE.DOTSIZE;
+      case 'line':    return Graph3d.STYLE.LINE;
+      case 'grid':    return Graph3d.STYLE.GRID;
+      case 'surface':   return Graph3d.STYLE.SURFACE;
+      case 'bar':     return Graph3d.STYLE.BAR;
+      case 'bar-color':   return Graph3d.STYLE.BARCOLOR;
+      case 'bar-size':  return Graph3d.STYLE.BARSIZE;
+    }
 
-      // calculate screen location of the points
-      top.forEach(function (obj) {
-        obj.screen = me._convert3Dto2D(obj.point);
-      });
-      bottom.forEach(function (obj) {
-        obj.screen = me._convert3Dto2D(obj.point);
-      });
+    return -1;
+  };
 
-      // create five sides, calculate both corner points and center points
-      var surfaces = [
-        {corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
-        {corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
-        {corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
-        {corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
-        {corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
-      ];
-      point.surfaces = surfaces;
+  /**
+   * Determine the indexes of the data columns, based on the given style and data
+   * @param {DataSet} data
+   * @param {Number}  style
+   */
+  Graph3d.prototype._determineColumnIndexes = function(data, style) {
+    if (this.style === Graph3d.STYLE.DOT ||
+      this.style === Graph3d.STYLE.DOTLINE ||
+      this.style === Graph3d.STYLE.LINE ||
+      this.style === Graph3d.STYLE.GRID ||
+      this.style === Graph3d.STYLE.SURFACE ||
+      this.style === Graph3d.STYLE.BAR) {
+      // 3 columns expected, and optionally a 4th with filter values
+      this.colX = 0;
+      this.colY = 1;
+      this.colZ = 2;
+      this.colValue = undefined;
 
-      // calculate the distance of each of the surface centers to the camera
-      for (j = 0; j < surfaces.length; j++) {
-        surface = surfaces[j];
-        var transCenter = this._convertPointToTranslation(surface.center);
-        surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
-        // TODO: this dept calculation doesn't work 100% of the cases due to perspective,
-        //     but the current solution is fast/simple and works in 99.9% of all cases
-        //     the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
+      if (data.getNumberOfColumns() > 3) {
+        this.colFilter = 3;
       }
+    }
+    else if (this.style === Graph3d.STYLE.DOTCOLOR ||
+      this.style === Graph3d.STYLE.DOTSIZE ||
+      this.style === Graph3d.STYLE.BARCOLOR ||
+      this.style === Graph3d.STYLE.BARSIZE) {
+      // 4 columns expected, and optionally a 5th with filter values
+      this.colX = 0;
+      this.colY = 1;
+      this.colZ = 2;
+      this.colValue = 3;
 
-      // order the surfaces by their (translated) depth
-      surfaces.sort(function (a, b) {
-        var diff = b.dist - a.dist;
-        if (diff) return diff;
-
-        // if equal depth, sort the top surface last
-        if (a.corners === top) return 1;
-        if (b.corners === top) return -1;
-
-        // both are equal
-        return 0;
-      });
-
-      // draw the ordered surfaces
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = borderColor;
-      ctx.fillStyle = color;
-      // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
-      for (j = 2; j < surfaces.length; j++) {
-        surface = surfaces[j];
-        corners = surface.corners;
-        ctx.beginPath();
-        ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
-        ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
-        ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
-        ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
-        ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
-        ctx.fill();
-        ctx.stroke();
+      if (data.getNumberOfColumns() > 4) {
+        this.colFilter = 4;
       }
     }
+    else {
+      throw 'Unknown style "' + this.style + '"';
+    }
   };
 
+  Graph3d.prototype.getNumberOfRows = function(data) {
+    return data.length;
+  }
 
-  /**
-   * Draw a line through all datapoints.
-   * This function can be used when the style is 'line'
-   */
-  Graph3d.prototype._redrawDataLine = function() {
-    var canvas = this.frame.canvas,
-      ctx = canvas.getContext('2d'),
-      point, i;
-
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return;  // TODO: throw exception?
-
-    // calculate the translations of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
 
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+  Graph3d.prototype.getNumberOfColumns = function(data) {
+    var counter = 0;
+    for (var column in data[0]) {
+      if (data[0].hasOwnProperty(column)) {
+        counter++;
+      }
     }
+    return counter;
+  }
 
-    // start the line
-    if (this.dataPoints.length > 0) {
-      point = this.dataPoints[0];
 
-      ctx.lineWidth = 1;    // TODO: make customizable
-      ctx.strokeStyle = 'blue'; // TODO: make customizable
-      ctx.beginPath();
-      ctx.moveTo(point.screen.x, point.screen.y);
+  Graph3d.prototype.getDistinctValues = function(data, column) {
+    var distinctValues = [];
+    for (var i = 0; i < data.length; i++) {
+      if (distinctValues.indexOf(data[i][column]) == -1) {
+        distinctValues.push(data[i][column]);
+      }
     }
+    return distinctValues;
+  }
 
-    // draw the datapoints as colored circles
-    for (i = 1; i < this.dataPoints.length; i++) {
-      point = this.dataPoints[i];
-      ctx.lineTo(point.screen.x, point.screen.y);
-    }
 
-    // finish the line
-    if (this.dataPoints.length > 0) {
-      ctx.stroke();
+  Graph3d.prototype.getColumnRange = function(data,column) {
+    var minMax = {min:data[0][column],max:data[0][column]};
+    for (var i = 0; i < data.length; i++) {
+      if (minMax.min > data[i][column]) { minMax.min = data[i][column]; }
+      if (minMax.max < data[i][column]) { minMax.max = data[i][column]; }
     }
+    return minMax;
   };
 
   /**
-   * Start a moving operation inside the provided parent element
-   * @param {Event}     event     The event that occurred (required for
-   *                  retrieving the  mouse position)
+   * Initialize the data from the data table. Calculate minimum and maximum values
+   * and column index values
+   * @param {Array | DataSet | DataView} rawData   The data containing the items for the Graph.
+   * @param {Number}     style   Style Number
    */
-  Graph3d.prototype._onMouseDown = function(event) {
-    event = event || window.event;
+  Graph3d.prototype._dataInitialize = function (rawData, style) {
+    var me = this;
 
-    // check if mouse is still down (may be up when focus is lost for example
-    // in an iframe)
-    if (this.leftButtonDown) {
-      this._onMouseUp(event);
+    // unsubscribe from the dataTable
+    if (this.dataSet) {
+      this.dataSet.off('*', this._onChange);
     }
 
-    // only react on left mouse button down
-    this.leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
-    if (!this.leftButtonDown && !this.touchDown) return;
-
-    // get mouse position (different code for IE and all other browsers)
-    this.startMouseX = getMouseX(event);
-    this.startMouseY = getMouseY(event);
+    if (rawData === undefined)
+      return;
 
-    this.startStart = new Date(this.start);
-    this.startEnd = new Date(this.end);
-    this.startArmRotation = this.camera.getArmRotation();
+    if (Array.isArray(rawData)) {
+      rawData = new DataSet(rawData);
+    }
 
-    this.frame.style.cursor = 'move';
+    var data;
+    if (rawData instanceof DataSet || rawData instanceof DataView) {
+      data = rawData.get();
+    }
+    else {
+      throw new Error('Array, DataSet, or DataView expected');
+    }
 
-    // add event listeners to handle moving the contents
-    // we store the function onmousemove and onmouseup in the graph, so we can
-    // remove the eventlisteners lateron in the function mouseUp()
-    var me = this;
-    this.onmousemove = function (event) {me._onMouseMove(event);};
-    this.onmouseup   = function (event) {me._onMouseUp(event);};
-    G3DaddEventListener(document, 'mousemove', me.onmousemove);
-    G3DaddEventListener(document, 'mouseup', me.onmouseup);
-    G3DpreventDefault(event);
-  };
+    if (data.length == 0)
+      return;
 
+    this.dataSet = rawData;
+    this.dataTable = data;
 
-  /**
-   * Perform moving operating.
-   * This function activated from within the funcion Graph.mouseDown().
-   * @param {Event}   event  Well, eehh, the event
-   */
-  Graph3d.prototype._onMouseMove = function (event) {
-    event = event || window.event;
+    // subscribe to changes in the dataset
+    this._onChange = function () {
+      me.setData(me.dataSet);
+    };
+    this.dataSet.on('*', this._onChange);
 
-    // calculate change in mouse position
-    var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
-    var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
+    // _determineColumnIndexes
+    // getNumberOfRows (points)
+    // getNumberOfColumns (x,y,z,v,t,t1,t2...)
+    // getDistinctValues (unique values?)
+    // getColumnRange
 
-    var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
-    var verticalNew = this.startArmRotation.vertical + diffY / 200;
+    // determine the location of x,y,z,value,filter columns
+    this.colX = 'x';
+    this.colY = 'y';
+    this.colZ = 'z';
+    this.colValue = 'style';
+    this.colFilter = 'filter';
 
-    var snapAngle = 4; // degrees
-    var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
 
-    // snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
-    // the -0.001 is to take care that the vertical axis is always drawn at the left front corner
-    if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
-      horizontalNew = Math.round((horizontalNew / Math.PI)) * Math.PI - 0.001;
-    }
-    if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
-      horizontalNew = (Math.round((horizontalNew/ Math.PI - 0.5)) + 0.5) * Math.PI - 0.001;
-    }
 
-    // snap vertically to nice angles
-    if (Math.abs(Math.sin(verticalNew)) < snapValue) {
-      verticalNew = Math.round((verticalNew / Math.PI)) * Math.PI;
-    }
-    if (Math.abs(Math.cos(verticalNew)) < snapValue) {
-      verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
+    // check if a filter column is provided
+    if (data[0].hasOwnProperty('filter')) {
+      if (this.dataFilter === undefined) {
+        this.dataFilter = new Filter(rawData, this.colFilter, this);
+        this.dataFilter.setOnLoadCallback(function() {me.redraw();});
+      }
     }
 
-    this.camera.setArmRotation(horizontalNew, verticalNew);
-    this.redraw();
 
-    // fire a cameraPositionChange event
-    var parameters = this.getCameraPosition();
-    this.emit('cameraPositionChange', parameters);
+    var withBars = this.style == Graph3d.STYLE.BAR ||
+      this.style == Graph3d.STYLE.BARCOLOR ||
+      this.style == Graph3d.STYLE.BARSIZE;
 
-    G3DpreventDefault(event);
-  };
+    // determine barWidth from data
+    if (withBars) {
+      if (this.defaultXBarWidth !== undefined) {
+        this.xBarWidth = this.defaultXBarWidth;
+      }
+      else {
+        var dataX = this.getDistinctValues(data,this.colX);
+        this.xBarWidth = (dataX[1] - dataX[0]) || 1;
+      }
 
+      if (this.defaultYBarWidth !== undefined) {
+        this.yBarWidth = this.defaultYBarWidth;
+      }
+      else {
+        var dataY = this.getDistinctValues(data,this.colY);
+        this.yBarWidth = (dataY[1] - dataY[0]) || 1;
+      }
+    }
 
-  /**
-   * Stop moving operating.
-   * This function activated from within the funcion Graph.mouseDown().
-   * @param {event}  event   The event
-   */
-  Graph3d.prototype._onMouseUp = function (event) {
-    this.frame.style.cursor = 'auto';
-    this.leftButtonDown = false;
-
-    // remove event listeners here
-    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-    G3DremoveEventListener(document, 'mouseup',   this.onmouseup);
-    G3DpreventDefault(event);
-  };
-
-  /**
-   * After having moved the mouse, a tooltip should pop up when the mouse is resting on a data point
-   * @param {Event}  event   A mouse move event
-   */
-  Graph3d.prototype._onTooltip = function (event) {
-    var delay = 300; // ms
-    var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
-    var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
-
-    if (!this.showTooltip) {
-      return;
+    // calculate minimums and maximums
+    var xRange = this.getColumnRange(data,this.colX);
+    if (withBars) {
+      xRange.min -= this.xBarWidth / 2;
+      xRange.max += this.xBarWidth / 2;
     }
+    this.xMin = (this.defaultXMin !== undefined) ? this.defaultXMin : xRange.min;
+    this.xMax = (this.defaultXMax !== undefined) ? this.defaultXMax : xRange.max;
+    if (this.xMax <= this.xMin) this.xMax = this.xMin + 1;
+    this.xStep = (this.defaultXStep !== undefined) ? this.defaultXStep : (this.xMax-this.xMin)/5;
 
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
+    var yRange = this.getColumnRange(data,this.colY);
+    if (withBars) {
+      yRange.min -= this.yBarWidth / 2;
+      yRange.max += this.yBarWidth / 2;
     }
+    this.yMin = (this.defaultYMin !== undefined) ? this.defaultYMin : yRange.min;
+    this.yMax = (this.defaultYMax !== undefined) ? this.defaultYMax : yRange.max;
+    if (this.yMax <= this.yMin) this.yMax = this.yMin + 1;
+    this.yStep = (this.defaultYStep !== undefined) ? this.defaultYStep : (this.yMax-this.yMin)/5;
 
-    // (delayed) display of a tooltip only if no mouse button is down
-    if (this.leftButtonDown) {
-      this._hideTooltip();
-      return;
-    }
+    var zRange = this.getColumnRange(data,this.colZ);
+    this.zMin = (this.defaultZMin !== undefined) ? this.defaultZMin : zRange.min;
+    this.zMax = (this.defaultZMax !== undefined) ? this.defaultZMax : zRange.max;
+    if (this.zMax <= this.zMin) this.zMax = this.zMin + 1;
+    this.zStep = (this.defaultZStep !== undefined) ? this.defaultZStep : (this.zMax-this.zMin)/5;
 
-    if (this.tooltip && this.tooltip.dataPoint) {
-      // tooltip is currently visible
-      var dataPoint = this._dataPointFromXY(mouseX, mouseY);
-      if (dataPoint !== this.tooltip.dataPoint) {
-        // datapoint changed
-        if (dataPoint) {
-          this._showTooltip(dataPoint);
-        }
-        else {
-          this._hideTooltip();
-        }
-      }
+    if (this.colValue !== undefined) {
+      var valueRange = this.getColumnRange(data,this.colValue);
+      this.valueMin = (this.defaultValueMin !== undefined) ? this.defaultValueMin : valueRange.min;
+      this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max;
+      if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1;
     }
-    else {
-      // tooltip is currently not visible
-      var me = this;
-      this.tooltipTimeout = setTimeout(function () {
-        me.tooltipTimeout = null;
 
-        // show a tooltip if we have a data point
-        var dataPoint = me._dataPointFromXY(mouseX, mouseY);
-        if (dataPoint) {
-          me._showTooltip(dataPoint);
-        }
-      }, delay);
-    }
+    // set the scale dependent on the ranges.
+    this._setScale();
   };
 
-  /**
-   * Event handler for touchstart event on mobile devices
-   */
-  Graph3d.prototype._onTouchStart = function(event) {
-    this.touchDown = true;
-
-    var me = this;
-    this.ontouchmove = function (event) {me._onTouchMove(event);};
-    this.ontouchend  = function (event) {me._onTouchEnd(event);};
-    G3DaddEventListener(document, 'touchmove', me.ontouchmove);
-    G3DaddEventListener(document, 'touchend', me.ontouchend);
-
-    this._onMouseDown(event);
-  };
 
-  /**
-   * Event handler for touchmove event on mobile devices
-   */
-  Graph3d.prototype._onTouchMove = function(event) {
-    this._onMouseMove(event);
-  };
 
   /**
-   * Event handler for touchend event on mobile devices
+   * Filter the data based on the current filter
+   * @param {Array} data
+   * @return {Array} dataPoints   Array with point objects which can be drawn on screen
    */
-  Graph3d.prototype._onTouchEnd = function(event) {
-    this.touchDown = false;
-
-    G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
-    G3DremoveEventListener(document, 'touchend',   this.ontouchend);
-
-    this._onMouseUp(event);
-  };
-
+  Graph3d.prototype._getDataPoints = function (data) {
+    // TODO: store the created matrix dataPoints in the filters instead of reloading each time
+    var x, y, i, z, obj, point;
 
-  /**
-   * Event handler for mouse wheel event, used to zoom the graph
-   * Code from http://adomas.org/javascript-mouse-wheel/
-   * @param {event}  event   The event
-   */
-  Graph3d.prototype._onWheel = function(event) {
-    if (!event) /* For IE. */
-      event = window.event;
+    var dataPoints = [];
 
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta/120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail/3;
-    }
+    if (this.style === Graph3d.STYLE.GRID ||
+      this.style === Graph3d.STYLE.SURFACE) {
+      // copy all values from the google data table to a matrix
+      // the provided values are supposed to form a grid of (x,y) positions
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-      var oldLength = this.camera.getArmLength();
-      var newLength = oldLength * (1 - delta / 10);
+      // create two lists with all present x and y values
+      var dataX = [];
+      var dataY = [];
+      for (i = 0; i < this.getNumberOfRows(data); i++) {
+        x = data[i][this.colX] || 0;
+        y = data[i][this.colY] || 0;
 
-      this.camera.setArmLength(newLength);
-      this.redraw();
+        if (dataX.indexOf(x) === -1) {
+          dataX.push(x);
+        }
+        if (dataY.indexOf(y) === -1) {
+          dataY.push(y);
+        }
+      }
 
-      this._hideTooltip();
-    }
+      function sortNumber(a, b) {
+        return a - b;
+      }
+      dataX.sort(sortNumber);
+      dataY.sort(sortNumber);
 
-    // fire a cameraPositionChange event
-    var parameters = this.getCameraPosition();
-    this.emit('cameraPositionChange', parameters);
+      // create a grid, a 2d matrix, with all values.
+      var dataMatrix = [];   // temporary data matrix
+      for (i = 0; i < data.length; i++) {
+        x = data[i][this.colX] || 0;
+        y = data[i][this.colY] || 0;
+        z = data[i][this.colZ] || 0;
 
-    // Prevent default actions caused by mouse wheel.
-    // That might be ugly, but we handle scrolls somehow
-    // anyway, so don't bother here..
-    G3DpreventDefault(event);
-  };
+        var xIndex = dataX.indexOf(x);  // TODO: implement Array().indexOf() for Internet Explorer
+        var yIndex = dataY.indexOf(y);
 
-  /**
-   * Test whether a point lies inside given 2D triangle
-   * @param {Point2d} point
-   * @param {Point2d[]} triangle
-   * @return {boolean} Returns true if given point lies inside or on the edge of the triangle
-   * @private
-   */
-  Graph3d.prototype._insideTriangle = function (point, triangle) {
-    var a = triangle[0],
-      b = triangle[1],
-      c = triangle[2];
+        if (dataMatrix[xIndex] === undefined) {
+          dataMatrix[xIndex] = [];
+        }
 
-    function sign (x) {
-      return x > 0 ? 1 : x < 0 ? -1 : 0;
-    }
+        var point3d = new Point3d();
+        point3d.x = x;
+        point3d.y = y;
+        point3d.z = z;
 
-    var as = sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
-    var bs = sign((c.x - b.x) * (point.y - b.y) - (c.y - b.y) * (point.x - b.x));
-    var cs = sign((a.x - c.x) * (point.y - c.y) - (a.y - c.y) * (point.x - c.x));
+        obj = {};
+        obj.point = point3d;
+        obj.trans = undefined;
+        obj.screen = undefined;
+        obj.bottom = new Point3d(x, y, this.zMin);
 
-    // each of the three signs must be either equal to each other or zero
-    return (as == 0 || bs == 0 || as == bs) &&
-      (bs == 0 || cs == 0 || bs == cs) &&
-      (as == 0 || cs == 0 || as == cs);
-  };
+        dataMatrix[xIndex][yIndex] = obj;
 
-  /**
-   * Find a data point close to given screen position (x, y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Object | null} The closest data point or null if not close to any data point
-   * @private
-   */
-  Graph3d.prototype._dataPointFromXY = function (x, y) {
-    var i,
-      distMax = 100, // px
-      dataPoint = null,
-      closestDataPoint = null,
-      closestDist = null,
-      center = new Point2d(x, y);
+        dataPoints.push(obj);
+      }
 
-    if (this.style === Graph3d.STYLE.BAR ||
-      this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      // the data points are ordered from far away to closest
-      for (i = this.dataPoints.length - 1; i >= 0; i--) {
-        dataPoint = this.dataPoints[i];
-        var surfaces  = dataPoint.surfaces;
-        if (surfaces) {
-          for (var s = surfaces.length - 1; s >= 0; s--) {
-            // split each surface in two triangles, and see if the center point is inside one of these
-            var surface = surfaces[s];
-            var corners = surface.corners;
-            var triangle1 = [corners[0].screen, corners[1].screen, corners[2].screen];
-            var triangle2 = [corners[2].screen, corners[3].screen, corners[0].screen];
-            if (this._insideTriangle(center, triangle1) ||
-              this._insideTriangle(center, triangle2)) {
-              // return immediately at the first hit
-              return dataPoint;
-            }
+      // fill in the pointers to the neighbors.
+      for (x = 0; x < dataMatrix.length; x++) {
+        for (y = 0; y < dataMatrix[x].length; y++) {
+          if (dataMatrix[x][y]) {
+            dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
+            dataMatrix[x][y].pointTop   = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
+            dataMatrix[x][y].pointCross =
+              (x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
+                dataMatrix[x+1][y+1] :
+                undefined;
           }
         }
       }
     }
-    else {
-      // find the closest data point, using distance to the center of the point on 2d screen
-      for (i = 0; i < this.dataPoints.length; i++) {
-        dataPoint = this.dataPoints[i];
-        var point = dataPoint.screen;
-        if (point) {
-          var distX = Math.abs(x - point.x);
-          var distY = Math.abs(y - point.y);
-          var dist  = Math.sqrt(distX * distX + distY * distY);
+    else {  // 'dot', 'dot-line', etc.
+      // copy all values from the google data table to a list with Point3d objects
+      for (i = 0; i < data.length; i++) {
+        point = new Point3d();
+        point.x = data[i][this.colX] || 0;
+        point.y = data[i][this.colY] || 0;
+        point.z = data[i][this.colZ] || 0;
 
-          if ((closestDist === null || dist < closestDist) && dist < distMax) {
-            closestDist = dist;
-            closestDataPoint = dataPoint;
-          }
+        if (this.colValue !== undefined) {
+          point.value = data[i][this.colValue] || 0;
         }
+
+        obj = {};
+        obj.point = point;
+        obj.bottom = new Point3d(point.x, point.y, this.zMin);
+        obj.trans = undefined;
+        obj.screen = undefined;
+
+        dataPoints.push(obj);
       }
     }
 
-
-    return closestDataPoint;
+    return dataPoints;
   };
 
   /**
-   * Display a tooltip for given data point
-   * @param {Object} dataPoint
-   * @private
+   * Create the main frame for the Graph3d.
+   * This function is executed once when a Graph3d object is created. The frame
+   * contains a canvas, and this canvas contains all objects like the axis and
+   * nodes.
    */
-  Graph3d.prototype._showTooltip = function (dataPoint) {
-    var content, line, dot;
-
-    if (!this.tooltip) {
-      content = document.createElement('div');
-      content.style.position = 'absolute';
-      content.style.padding = '10px';
-      content.style.border = '1px solid #4d4d4d';
-      content.style.color = '#1a1a1a';
-      content.style.background = 'rgba(255,255,255,0.7)';
-      content.style.borderRadius = '2px';
-      content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
-
-      line = document.createElement('div');
-      line.style.position = 'absolute';
-      line.style.height = '40px';
-      line.style.width = '0';
-      line.style.borderLeft = '1px solid #4d4d4d';
-
-      dot = document.createElement('div');
-      dot.style.position = 'absolute';
-      dot.style.height = '0';
-      dot.style.width = '0';
-      dot.style.border = '5px solid #4d4d4d';
-      dot.style.borderRadius = '5px';
-
-      this.tooltip = {
-        dataPoint: null,
-        dom: {
-          content: content,
-          line: line,
-          dot: dot
-        }
-      };
-    }
-    else {
-      content = this.tooltip.dom.content;
-      line  = this.tooltip.dom.line;
-      dot   = this.tooltip.dom.dot;
+  Graph3d.prototype.create = function () {
+    // remove all elements from the container element.
+    while (this.containerElement.hasChildNodes()) {
+      this.containerElement.removeChild(this.containerElement.firstChild);
     }
 
-    this._hideTooltip();
+    this.frame = document.createElement('div');
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
-    this.tooltip.dataPoint = dataPoint;
-    if (typeof this.showTooltip === 'function') {
-      content.innerHTML = this.showTooltip(dataPoint.point);
-    }
-    else {
-      content.innerHTML = '<table>' +
-        '<tr><td>x:</td><td>' + dataPoint.point.x + '</td></tr>' +
-        '<tr><td>y:</td><td>' + dataPoint.point.y + '</td></tr>' +
-        '<tr><td>z:</td><td>' + dataPoint.point.z + '</td></tr>' +
-        '</table>';
+    // create the graph canvas (HTML canvas element)
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
+    this.frame.appendChild(this.frame.canvas);
+    //if (!this.frame.canvas.getContext) {
+    {
+      var noCanvas = document.createElement( 'DIV' );
+      noCanvas.style.color = 'red';
+      noCanvas.style.fontWeight =  'bold' ;
+      noCanvas.style.padding =  '10px';
+      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
+      this.frame.canvas.appendChild(noCanvas);
     }
 
-    content.style.left  = '0';
-    content.style.top   = '0';
-    this.frame.appendChild(content);
-    this.frame.appendChild(line);
-    this.frame.appendChild(dot);
-
-    // calculate sizes
-    var contentWidth  = content.offsetWidth;
-    var contentHeight   = content.offsetHeight;
-    var lineHeight    = line.offsetHeight;
-    var dotWidth    = dot.offsetWidth;
-    var dotHeight     = dot.offsetHeight;
-
-    var left = dataPoint.screen.x - contentWidth / 2;
-    left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
+    this.frame.filter = document.createElement( 'div' );
+    this.frame.filter.style.position = 'absolute';
+    this.frame.filter.style.bottom = '0px';
+    this.frame.filter.style.left = '0px';
+    this.frame.filter.style.width = '100%';
+    this.frame.appendChild(this.frame.filter);
 
-    line.style.left   = dataPoint.screen.x + 'px';
-    line.style.top    = (dataPoint.screen.y - lineHeight) + 'px';
-    content.style.left  = left + 'px';
-    content.style.top   = (dataPoint.screen.y - lineHeight - contentHeight) + 'px';
-    dot.style.left    = (dataPoint.screen.x - dotWidth / 2) + 'px';
-    dot.style.top     = (dataPoint.screen.y - dotHeight / 2) + 'px';
-  };
+    // add event listeners to handle moving and zooming the contents
+    var me = this;
+    var onmousedown = function (event) {me._onMouseDown(event);};
+    var ontouchstart = function (event) {me._onTouchStart(event);};
+    var onmousewheel = function (event) {me._onWheel(event);};
+    var ontooltip = function (event) {me._onTooltip(event);};
+    // TODO: these events are never cleaned up... can give a 'memory leakage'
 
-  /**
-   * Hide the tooltip when displayed
-   * @private
-   */
-  Graph3d.prototype._hideTooltip = function () {
-    if (this.tooltip) {
-      this.tooltip.dataPoint = null;
+    G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
+    G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
+    G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
+    G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
+    G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
 
-      for (var prop in this.tooltip.dom) {
-        if (this.tooltip.dom.hasOwnProperty(prop)) {
-          var elem = this.tooltip.dom[prop];
-          if (elem && elem.parentNode) {
-            elem.parentNode.removeChild(elem);
-          }
-        }
-      }
-    }
+    // add the new graph to the container element
+    this.containerElement.appendChild(this.frame);
   };
 
 
   /**
-   * Add and event listener. Works for all browsers
-   * @param {Element}   element  An html element
-   * @param {string}    action   The action, for example 'click',
-   *                 without the prefix 'on'
-   * @param {function}  listener   The callback function to be executed
-   * @param {boolean}   useCapture
+   * Set a new size for the graph
+   * @param {string} width   Width in pixels or percentage (for example '800px'
+   *             or '50%')
+   * @param {string} height  Height in pixels or percentage  (for example '400px'
+   *             or '30%')
    */
-  G3DaddEventListener = function(element, action, listener, useCapture) {
-    if (element.addEventListener) {
-      if (useCapture === undefined)
-        useCapture = false;
-
-      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
-        action = 'DOMMouseScroll';  // For Firefox
-      }
+  Graph3d.prototype.setSize = function(width, height) {
+    this.frame.style.width = width;
+    this.frame.style.height = height;
 
-      element.addEventListener(action, listener, useCapture);
-    } else {
-      element.attachEvent('on' + action, listener);  // IE browsers
-    }
+    this._resizeCanvas();
   };
 
   /**
-   * Remove an event listener from an element
-   * @param {Element}    element   An html dom element
-   * @param {string}     action  The name of the event, for example 'mousedown'
-   * @param {function}   listener  The listener function
-   * @param {boolean}    useCapture
+   * Resize the canvas to the current size of the frame
    */
-  G3DremoveEventListener = function(element, action, listener, useCapture) {
-    if (element.removeEventListener) {
-      // non-IE browsers
-      if (useCapture === undefined)
-        useCapture = false;
+  Graph3d.prototype._resizeCanvas = function() {
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
-      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
-        action = 'DOMMouseScroll';  // For Firefox
-      }
+    this.frame.canvas.width = this.frame.canvas.clientWidth;
+    this.frame.canvas.height = this.frame.canvas.clientHeight;
 
-      element.removeEventListener(action, listener, useCapture);
-    } else {
-      // IE browsers
-      element.detachEvent('on' + action, listener);
-    }
+    // adjust with for margin
+    this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px';
   };
 
   /**
-   * Stop event propagation
+   * Start animation
    */
-  G3DstopPropagation = function(event) {
-    if (!event)
-      event = window.event;
+  Graph3d.prototype.animationStart = function() {
+    if (!this.frame.filter || !this.frame.filter.slider)
+      throw 'No animation available';
 
-    if (event.stopPropagation) {
-      event.stopPropagation();  // non-IE browsers
-    }
-    else {
-      event.cancelBubble = true;  // IE browsers
-    }
+    this.frame.filter.slider.play();
   };
 
 
   /**
-   * Cancels the event if it is cancelable, without stopping further propagation of the event.
+   * Stop animation
    */
-  G3DpreventDefault = function (event) {
-    if (!event)
-      event = window.event;
+  Graph3d.prototype.animationStop = function() {
+    if (!this.frame.filter || !this.frame.filter.slider) return;
 
-    if (event.preventDefault) {
-      event.preventDefault();  // non-IE browsers
-    }
-    else {
-      event.returnValue = false;  // IE browsers
-    }
+    this.frame.filter.slider.stop();
   };
 
+
   /**
-   * @constructor Slider
-   *
-   * An html slider control with start/stop/prev/next buttons
-   * @param {Element} container  The element where the slider will be created
-   * @param {Object} options   Available options:
-   *                 {boolean} visible   If true (default) the
-   *                           slider is visible.
+   * Resize the center position based on the current values in this.defaultXCenter
+   * and this.defaultYCenter (which are strings with a percentage or a value
+   * in pixels). The center positions are the variables this.xCenter
+   * and this.yCenter
    */
-  function Slider(container, options) {
-    if (container === undefined) {
-      throw 'Error: No container element defined';
+  Graph3d.prototype._resizeCenter = function() {
+    // calculate the horizontal center position
+    if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') {
+      this.xcenter =
+        parseFloat(this.defaultXCenter) / 100 *
+          this.frame.canvas.clientWidth;
     }
-    this.container = container;
-    this.visible = (options && options.visible != undefined) ? options.visible : true;
-
-    if (this.visible) {
-      this.frame = document.createElement('DIV');
-      //this.frame.style.backgroundColor = '#E5E5E5';
-      this.frame.style.width = '100%';
-      this.frame.style.position = 'relative';
-      this.container.appendChild(this.frame);
-
-      this.frame.prev = document.createElement('INPUT');
-      this.frame.prev.type = 'BUTTON';
-      this.frame.prev.value = 'Prev';
-      this.frame.appendChild(this.frame.prev);
-
-      this.frame.play = document.createElement('INPUT');
-      this.frame.play.type = 'BUTTON';
-      this.frame.play.value = 'Play';
-      this.frame.appendChild(this.frame.play);
-
-      this.frame.next = document.createElement('INPUT');
-      this.frame.next.type = 'BUTTON';
-      this.frame.next.value = 'Next';
-      this.frame.appendChild(this.frame.next);
-
-      this.frame.bar = document.createElement('INPUT');
-      this.frame.bar.type = 'BUTTON';
-      this.frame.bar.style.position = 'absolute';
-      this.frame.bar.style.border = '1px solid red';
-      this.frame.bar.style.width = '100px';
-      this.frame.bar.style.height = '6px';
-      this.frame.bar.style.borderRadius = '2px';
-      this.frame.bar.style.MozBorderRadius = '2px';
-      this.frame.bar.style.border = '1px solid #7F7F7F';
-      this.frame.bar.style.backgroundColor = '#E5E5E5';
-      this.frame.appendChild(this.frame.bar);
-
-      this.frame.slide = document.createElement('INPUT');
-      this.frame.slide.type = 'BUTTON';
-      this.frame.slide.style.margin = '0px';
-      this.frame.slide.value = ' ';
-      this.frame.slide.style.position = 'relative';
-      this.frame.slide.style.left = '-100px';
-      this.frame.appendChild(this.frame.slide);
-
-      // create events
-      var me = this;
-      this.frame.slide.onmousedown = function (event) {me._onMouseDown(event);};
-      this.frame.prev.onclick = function (event) {me.prev(event);};
-      this.frame.play.onclick = function (event) {me.togglePlay(event);};
-      this.frame.next.onclick = function (event) {me.next(event);};
+    else {
+      this.xcenter = parseFloat(this.defaultXCenter); // supposed to be in px
     }
 
-    this.onChangeCallback = undefined;
-
-    this.values = [];
-    this.index = undefined;
-
-    this.playTimeout = undefined;
-    this.playInterval = 1000; // milliseconds
-    this.playLoop = true;
-  }
-
-  /**
-   * Select the previous index
-   */
-  Slider.prototype.prev = function() {
-    var index = this.getIndex();
-    if (index > 0) {
-      index--;
-      this.setIndex(index);
+    // calculate the vertical center position
+    if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') {
+      this.ycenter =
+        parseFloat(this.defaultYCenter) / 100 *
+          (this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
     }
-  };
-
-  /**
-   * Select the next index
-   */
-  Slider.prototype.next = function() {
-    var index = this.getIndex();
-    if (index < this.values.length - 1) {
-      index++;
-      this.setIndex(index);
+    else {
+      this.ycenter = parseFloat(this.defaultYCenter); // supposed to be in px
     }
   };
 
   /**
-   * Select the next index
+   * Set the rotation and distance of the camera
+   * @param {Object} pos   An object with the camera position. The object
+   *             contains three parameters:
+   *             - horizontal {Number}
+   *             The horizontal rotation, between 0 and 2*PI.
+   *             Optional, can be left undefined.
+   *             - vertical {Number}
+   *             The vertical rotation, between 0 and 0.5*PI
+   *             if vertical=0.5*PI, the graph is shown from the
+   *             top. Optional, can be left undefined.
+   *             - distance {Number}
+   *             The (normalized) distance of the camera to the
+   *             center of the graph, a value between 0.71 and 5.0.
+   *             Optional, can be left undefined.
    */
-  Slider.prototype.playNext = function() {
-    var start = new Date();
-
-    var index = this.getIndex();
-    if (index < this.values.length - 1) {
-      index++;
-      this.setIndex(index);
-    }
-    else if (this.playLoop) {
-      // jump to the start
-      index = 0;
-      this.setIndex(index);
+  Graph3d.prototype.setCameraPosition = function(pos) {
+    if (pos === undefined) {
+      return;
     }
 
-    var end = new Date();
-    var diff = (end - start);
+    if (pos.horizontal !== undefined && pos.vertical !== undefined) {
+      this.camera.setArmRotation(pos.horizontal, pos.vertical);
+    }
 
-    // calculate how much time it to to set the index and to execute the callback
-    // function.
-    var interval = Math.max(this.playInterval - diff, 0);
-    // document.title = diff // TODO: cleanup
+    if (pos.distance !== undefined) {
+      this.camera.setArmLength(pos.distance);
+    }
 
-    var me = this;
-    this.playTimeout = setTimeout(function() {me.playNext();}, interval);
+    this.redraw();
   };
 
+
   /**
-   * Toggle start or stop playing
+   * Retrieve the current camera rotation
+   * @return {object}   An object with parameters horizontal, vertical, and
+   *          distance
    */
-  Slider.prototype.togglePlay = function() {
-    if (this.playTimeout === undefined) {
-      this.play();
-    } else {
-      this.stop();
-    }
+  Graph3d.prototype.getCameraPosition = function() {
+    var pos = this.camera.getArmRotation();
+    pos.distance = this.camera.getArmLength();
+    return pos;
   };
 
   /**
-   * Start playing
+   * Load data into the 3D Graph
    */
-  Slider.prototype.play = function() {
-    // Test whether already playing
-    if (this.playTimeout) return;
+  Graph3d.prototype._readData = function(data) {
+    // read the data
+    this._dataInitialize(data, this.style);
 
-    this.playNext();
 
-    if (this.frame) {
-      this.frame.play.value = 'Stop';
+    if (this.dataFilter) {
+      // apply filtering
+      this.dataPoints = this.dataFilter._getDataPoints();
+    }
+    else {
+      // no filtering. load all data
+      this.dataPoints = this._getDataPoints(this.dataTable);
     }
+
+    // draw the filter
+    this._redrawFilter();
   };
 
   /**
-   * Stop playing
+   * Replace the dataset of the Graph3d
+   * @param {Array | DataSet | DataView} data
    */
-  Slider.prototype.stop = function() {
-    clearInterval(this.playTimeout);
-    this.playTimeout = undefined;
+  Graph3d.prototype.setData = function (data) {
+    this._readData(data);
+    this.redraw();
 
-    if (this.frame) {
-      this.frame.play.value = 'Play';
+    // start animation when option is true
+    if (this.animationAutoStart && this.dataFilter) {
+      this.animationStart();
     }
   };
 
   /**
-   * Set a callback function which will be triggered when the value of the
-   * slider bar has changed.
+   * Update the options. Options will be merged with current options
+   * @param {Object} options
    */
-  Slider.prototype.setOnChangeCallback = function(callback) {
-    this.onChangeCallback = callback;
-  };
+  Graph3d.prototype.setOptions = function (options) {
+    var cameraPosition = undefined;
 
-  /**
-   * Set the interval for playing the list
-   * @param {Number} interval   The interval in milliseconds
-   */
-  Slider.prototype.setPlayInterval = function(interval) {
-    this.playInterval = interval;
-  };
+    this.animationStop();
 
-  /**
-   * Retrieve the current play interval
-   * @return {Number} interval   The interval in milliseconds
-   */
-  Slider.prototype.getPlayInterval = function(interval) {
-    return this.playInterval;
-  };
+    if (options !== undefined) {
+      // retrieve parameter values
+      if (options.width !== undefined)       this.width = options.width;
+      if (options.height !== undefined)      this.height = options.height;
 
-  /**
-   * Set looping on or off
-   * @pararm {boolean} doLoop  If true, the slider will jump to the start when
-   *               the end is passed, and will jump to the end
-   *               when the start is passed.
-   */
-  Slider.prototype.setPlayLoop = function(doLoop) {
-    this.playLoop = doLoop;
-  };
+      if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
+      if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
 
+      if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
+      if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
+      if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
+      if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
+      if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
 
-  /**
-   * Execute the onchange callback function
-   */
-  Slider.prototype.onChange = function() {
-    if (this.onChangeCallback !== undefined) {
-      this.onChangeCallback();
-    }
-  };
+      if (options.style !== undefined) {
+        var styleNumber = this._getStyleNumber(options.style);
+        if (styleNumber !== -1) {
+          this.style = styleNumber;
+        }
+      }
+      if (options.showGrid !== undefined)      this.showGrid = options.showGrid;
+      if (options.showPerspective !== undefined)   this.showPerspective = options.showPerspective;
+      if (options.showShadow !== undefined)    this.showShadow = options.showShadow;
+      if (options.tooltip !== undefined)       this.showTooltip = options.tooltip;
+      if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
+      if (options.keepAspectRatio !== undefined)   this.keepAspectRatio = options.keepAspectRatio;
+      if (options.verticalRatio !== undefined)   this.verticalRatio = options.verticalRatio;
 
-  /**
-   * redraw the slider on the correct place
-   */
-  Slider.prototype.redraw = function() {
-    if (this.frame) {
-      // resize the bar
-      this.frame.bar.style.top = (this.frame.clientHeight/2 -
-        this.frame.bar.offsetHeight/2) + 'px';
-      this.frame.bar.style.width = (this.frame.clientWidth -
-        this.frame.prev.clientWidth -
-        this.frame.play.clientWidth -
-        this.frame.next.clientWidth - 30)  + 'px';
+      if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
+      if (options.animationPreload !== undefined)  this.animationPreload = options.animationPreload;
+      if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
 
-      // position the slider button
-      var left = this.indexToLeft(this.index);
-      this.frame.slide.style.left = (left) + 'px';
+      if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
+      if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
+
+      if (options.xMin !== undefined) this.defaultXMin = options.xMin;
+      if (options.xStep !== undefined) this.defaultXStep = options.xStep;
+      if (options.xMax !== undefined) this.defaultXMax = options.xMax;
+      if (options.yMin !== undefined) this.defaultYMin = options.yMin;
+      if (options.yStep !== undefined) this.defaultYStep = options.yStep;
+      if (options.yMax !== undefined) this.defaultYMax = options.yMax;
+      if (options.zMin !== undefined) this.defaultZMin = options.zMin;
+      if (options.zStep !== undefined) this.defaultZStep = options.zStep;
+      if (options.zMax !== undefined) this.defaultZMax = options.zMax;
+      if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
+      if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
+
+      if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
+
+      if (cameraPosition !== undefined) {
+        this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
+        this.camera.setArmLength(cameraPosition.distance);
+      }
+      else {
+        this.camera.setArmRotation(1.0, 0.5);
+        this.camera.setArmLength(1.7);
+      }
     }
-  };
 
+    this._setBackgroundColor(options && options.backgroundColor);
 
-  /**
-   * Set the list with values for the slider
-   * @param {Array} values   A javascript array with values (any type)
-   */
-  Slider.prototype.setValues = function(values) {
-    this.values = values;
+    this.setSize(this.width, this.height);
 
-    if (this.values.length > 0)
-      this.setIndex(0);
-    else
-      this.index = undefined;
+    // re-load the data
+    if (this.dataTable) {
+      this.setData(this.dataTable);
+    }
+
+    // start animation when option is true
+    if (this.animationAutoStart && this.dataFilter) {
+      this.animationStart();
+    }
   };
 
   /**
-   * Select a value by its index
-   * @param {Number} index
+   * Redraw the Graph.
    */
-  Slider.prototype.setIndex = function(index) {
-    if (index < this.values.length) {
-      this.index = index;
+  Graph3d.prototype.redraw = function() {
+    if (this.dataPoints === undefined) {
+      throw 'Error: graph data not initialized';
+    }
 
-      this.redraw();
-      this.onChange();
+    this._resizeCanvas();
+    this._resizeCenter();
+    this._redrawSlider();
+    this._redrawClear();
+    this._redrawAxis();
+
+    if (this.style === Graph3d.STYLE.GRID ||
+      this.style === Graph3d.STYLE.SURFACE) {
+      this._redrawDataGrid();
+    }
+    else if (this.style === Graph3d.STYLE.LINE) {
+      this._redrawDataLine();
+    }
+    else if (this.style === Graph3d.STYLE.BAR ||
+      this.style === Graph3d.STYLE.BARCOLOR ||
+      this.style === Graph3d.STYLE.BARSIZE) {
+      this._redrawDataBar();
     }
     else {
-      throw 'Error: index out of range';
+      // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
+      this._redrawDataDot();
     }
+
+    this._redrawInfo();
+    this._redrawLegend();
   };
 
   /**
-   * retrieve the index of the currently selected vaue
-   * @return {Number} index
+   * Clear the canvas before redrawing
    */
-  Slider.prototype.getIndex = function() {
-    return this.index;
+  Graph3d.prototype._redrawClear = function() {
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
   };
 
 
   /**
-   * retrieve the currently selected value
-   * @return {*} value
+   * Redraw the legend showing the colors
    */
-  Slider.prototype.get = function() {
-    return this.values[this.index];
-  };
-
-
-  Slider.prototype._onMouseDown = function(event) {
-    // only react on left mouse button down
-    var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
-    if (!leftButtonDown) return;
-
-    this.startClientX = event.clientX;
-    this.startSlideX = parseFloat(this.frame.slide.style.left);
+  Graph3d.prototype._redrawLegend = function() {
+    var y;
 
-    this.frame.style.cursor = 'move';
+    if (this.style === Graph3d.STYLE.DOTCOLOR ||
+      this.style === Graph3d.STYLE.DOTSIZE) {
 
-    // add event listeners to handle moving the contents
-    // we store the function onmousemove and onmouseup in the graph, so we can
-    // remove the eventlisteners lateron in the function mouseUp()
-    var me = this;
-    this.onmousemove = function (event) {me._onMouseMove(event);};
-    this.onmouseup   = function (event) {me._onMouseUp(event);};
-    G3DaddEventListener(document, 'mousemove', this.onmousemove);
-    G3DaddEventListener(document, 'mouseup',   this.onmouseup);
-    G3DpreventDefault(event);
-  };
+      var dotSize = this.frame.clientWidth * 0.02;
 
+      var widthMin, widthMax;
+      if (this.style === Graph3d.STYLE.DOTSIZE) {
+        widthMin = dotSize / 2; // px
+        widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
+      }
+      else {
+        widthMin = 20; // px
+        widthMax = 20; // px
+      }
 
-  Slider.prototype.leftToIndex = function (left) {
-    var width = parseFloat(this.frame.bar.style.width) -
-      this.frame.slide.clientWidth - 10;
-    var x = left - 3;
+      var height = Math.max(this.frame.clientHeight * 0.25, 100);
+      var top = this.margin;
+      var right = this.frame.clientWidth - this.margin;
+      var left = right - widthMax;
+      var bottom = top + height;
+    }
 
-    var index = Math.round(x / width * (this.values.length-1));
-    if (index < 0) index = 0;
-    if (index > this.values.length-1) index = this.values.length-1;
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = 1;
+    ctx.font = '14px arial'; // TODO: put in options
 
-    return index;
-  };
+    if (this.style === Graph3d.STYLE.DOTCOLOR) {
+      // draw the color bar
+      var ymin = 0;
+      var ymax = height; // Todo: make height customizable
+      for (y = ymin; y < ymax; y++) {
+        var f = (y - ymin) / (ymax - ymin);
 
-  Slider.prototype.indexToLeft = function (index) {
-    var width = parseFloat(this.frame.bar.style.width) -
-      this.frame.slide.clientWidth - 10;
+        //var width = (dotSize / 2 + (1-f) * dotSize * 2); // Todo: put this in one function
+        var hue = f * 240;
+        var color = this._hsv2rgb(hue, 1, 1);
 
-    var x = index / (this.values.length-1) * width;
-    var left = x + 3;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(left, top + y);
+        ctx.lineTo(right, top + y);
+        ctx.stroke();
+      }
 
-    return left;
-  };
+      ctx.strokeStyle =  this.colorAxis;
+      ctx.strokeRect(left, top, widthMax, height);
+    }
 
+    if (this.style === Graph3d.STYLE.DOTSIZE) {
+      // draw border around color bar
+      ctx.strokeStyle =  this.colorAxis;
+      ctx.fillStyle =  this.colorDot;
+      ctx.beginPath();
+      ctx.moveTo(left, top);
+      ctx.lineTo(right, top);
+      ctx.lineTo(right - widthMax + widthMin, bottom);
+      ctx.lineTo(left, bottom);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+    }
 
+    if (this.style === Graph3d.STYLE.DOTCOLOR ||
+      this.style === Graph3d.STYLE.DOTSIZE) {
+      // print values along the color bar
+      var gridLineLen = 5; // px
+      var step = new StepNumber(this.valueMin, this.valueMax, (this.valueMax-this.valueMin)/5, true);
+      step.start();
+      if (step.getCurrent() < this.valueMin) {
+        step.next();
+      }
+      while (!step.end()) {
+        y = bottom - (step.getCurrent() - this.valueMin) / (this.valueMax - this.valueMin) * height;
 
-  Slider.prototype._onMouseMove = function (event) {
-    var diff = event.clientX - this.startClientX;
-    var x = this.startSlideX + diff;
+        ctx.beginPath();
+        ctx.moveTo(left - gridLineLen, y);
+        ctx.lineTo(left, y);
+        ctx.stroke();
 
-    var index = this.leftToIndex(x);
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = this.colorAxis;
+        ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
 
-    this.setIndex(index);
+        step.next();
+      }
 
-    G3DpreventDefault();
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'top';
+      var label = this.legendLabel;
+      ctx.fillText(label, right, bottom + this.margin);
+    }
   };
 
+  /**
+   * Redraw the filter
+   */
+  Graph3d.prototype._redrawFilter = function() {
+    this.frame.filter.innerHTML = '';
 
-  Slider.prototype._onMouseUp = function (event) {
-    this.frame.style.cursor = 'auto';
-
-    // remove event listeners
-    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-    G3DremoveEventListener(document, 'mouseup', this.onmouseup);
-
-    G3DpreventDefault();
-  };
-
+    if (this.dataFilter) {
+      var options = {
+        'visible': this.showAnimationControls
+      };
+      var slider = new Slider(this.frame.filter, options);
+      this.frame.filter.slider = slider;
 
+      // TODO: css here is not nice here...
+      this.frame.filter.style.padding = '10px';
+      //this.frame.filter.style.backgroundColor = '#EFEFEF';
 
-  /**--------------------------------------------------------------------------**/
+      slider.setValues(this.dataFilter.values);
+      slider.setPlayInterval(this.animationInterval);
 
+      // create an event handler
+      var me = this;
+      var onchange = function () {
+        var index = slider.getIndex();
 
+        me.dataFilter.selectValue(index);
+        me.dataPoints = me.dataFilter._getDataPoints();
 
-  /**
-   * Retrieve the absolute left value of a DOM element
-   * @param {Element} elem  A dom element, for example a div
-   * @return {Number} left    The absolute left position of this element
-   *                in the browser page.
-   */
-  getAbsoluteLeft = function(elem) {
-    var left = 0;
-    while( elem !== null ) {
-      left += elem.offsetLeft;
-      left -= elem.scrollLeft;
-      elem = elem.offsetParent;
+        me.redraw();
+      };
+      slider.setOnChangeCallback(onchange);
+    }
+    else {
+      this.frame.filter.slider = undefined;
     }
-    return left;
   };
 
   /**
-   * Retrieve the absolute top value of a DOM element
-   * @param {Element} elem  A dom element, for example a div
-   * @return {Number} top     The absolute top position of this element
-   *                in the browser page.
+   * Redraw the slider
    */
-  getAbsoluteTop = function(elem) {
-    var top = 0;
-    while( elem !== null ) {
-      top += elem.offsetTop;
-      top -= elem.scrollTop;
-      elem = elem.offsetParent;
+  Graph3d.prototype._redrawSlider = function() {
+    if ( this.frame.filter.slider !== undefined) {
+      this.frame.filter.slider.redraw();
     }
-    return top;
   };
 
-  /**
-   * Get the horizontal mouse position from a mouse event
-   * @param {Event} event
-   * @return {Number} mouse x
-   */
-  getMouseX = function(event) {
-    if ('clientX' in event) return event.clientX;
-    return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
-  };
 
   /**
-   * Get the vertical mouse position from a mouse event
-   * @param {Event} event
-   * @return {Number} mouse y
+   * Redraw common information
    */
-  getMouseY = function(event) {
-    if ('clientY' in event) return event.clientY;
-    return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
-  };
-
-  module.exports = Graph3d;
-
-
-/***/ },
-/* 12 */
-/***/ function(module, exports, __webpack_require__) {
+  Graph3d.prototype._redrawInfo = function() {
+    if (this.dataFilter) {
+      var canvas = this.frame.canvas;
+      var ctx = canvas.getContext('2d');
 
-  /**
-   * Prototype for visual components
-   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
-   * @param {Object} [options]
-   */
-  function Component (body, options) {
-    this.options = null;
-    this.props = null;
-  }
+      ctx.font = '14px arial'; // TODO: put in options
+      ctx.lineStyle = 'gray';
+      ctx.fillStyle = 'gray';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
 
-  /**
-   * Set options for the component. The new options will be merged into the
-   * current options.
-   * @param {Object} options
-   */
-  Component.prototype.setOptions = function(options) {
-    if (options) {
-      util.extend(this.options, options);
+      var x = this.margin;
+      var y = this.margin;
+      ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y);
     }
   };
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  Component.prototype.redraw = function() {
-    // should be implemented by the component
-    return false;
-  };
 
   /**
-   * Destroy the component. Cleanup DOM and event listeners
+   * Redraw the axis
    */
-  Component.prototype.destroy = function() {
-    // should be implemented by the component
-  };
+  Graph3d.prototype._redrawAxis = function() {
+    var canvas = this.frame.canvas,
+      ctx = canvas.getContext('2d'),
+      from, to, step, prettyStep,
+      text, xText, yText, zText,
+      offset, xOffset, yOffset,
+      xMin2d, xMax2d;
 
-  /**
-   * Test whether the component is resized since the last time _isResized() was
-   * called.
-   * @return {Boolean} Returns true if the component is resized
-   * @protected
-   */
-  Component.prototype._isResized = function() {
-    var resized = (this.props._previousWidth !== this.props.width ||
-        this.props._previousHeight !== this.props.height);
+    // TODO: get the actual rendered style of the containerElement
+    //ctx.font = this.containerElement.style.font;
+    ctx.font = 24 / this.camera.getArmLength() + 'px arial';
 
-    this.props._previousWidth = this.props.width;
-    this.props._previousHeight = this.props.height;
+    // calculate the length for the short grid lines
+    var gridLenX = 0.025 / this.scale.x;
+    var gridLenY = 0.025 / this.scale.y;
+    var textMargin = 5 / this.camera.getArmLength(); // px
+    var armAngle = this.camera.getArmRotation().horizontal;
 
-    return resized;
-  };
+    // draw x-grid lines
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultXStep === undefined);
+    step = new StepNumber(this.xMin, this.xMax, this.xStep, prettyStep);
+    step.start();
+    if (step.getCurrent() < this.xMin) {
+      step.next();
+    }
+    while (!step.end()) {
+      var x = step.getCurrent();
 
-  module.exports = Component;
+      if (this.showGrid) {
+        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
+        to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
+        ctx.strokeStyle = this.colorGrid;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
+      else {
+        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
+        to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
 
+        from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
+        to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
 
-/***/ },
-/* 13 */
-/***/ function(module, exports, __webpack_require__) {
+      yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
+      text = this._convert3Dto2D(new Point3d(x, yText, this.zMin));
+      if (Math.cos(armAngle * 2) > 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        text.y += textMargin;
+      }
+      else if (Math.sin(armAngle * 2) < 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+      }
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
 
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(12);
+      step.next();
+    }
 
-  /**
-   * A current time bar
-   * @param {{range: Range, dom: Object, domProps: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCurrentTime]
-   * @constructor CurrentTime
-   * @extends Component
-   */
-  function CurrentTime (body, options) {
-    this.body = body;
+    // draw y-grid lines
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultYStep === undefined);
+    step = new StepNumber(this.yMin, this.yMax, this.yStep, prettyStep);
+    step.start();
+    if (step.getCurrent() < this.yMin) {
+      step.next();
+    }
+    while (!step.end()) {
+      if (this.showGrid) {
+        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
+        to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
+        ctx.strokeStyle = this.colorGrid;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
+      else {
+        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
+        to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
 
-    // default options
-    this.defaultOptions = {
-      showCurrentTime: true
-    };
-    this.options = util.extend({}, this.defaultOptions);
+        from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
+        to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
 
-    this._create();
+      xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
+      text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin));
+      if (Math.cos(armAngle * 2) < 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        text.y += textMargin;
+      }
+      else if (Math.sin(armAngle * 2) > 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+      }
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
 
-    this.setOptions(options);
-  }
+      step.next();
+    }
 
-  CurrentTime.prototype = new Component();
+    // draw z-grid lines and axis
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultZStep === undefined);
+    step = new StepNumber(this.zMin, this.zMax, this.zStep, prettyStep);
+    step.start();
+    if (step.getCurrent() < this.zMin) {
+      step.next();
+    }
+    xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
+    yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
+    while (!step.end()) {
+      // TODO: make z-grid lines really 3d?
+      from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
+      ctx.strokeStyle = this.colorAxis;
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(from.x - textMargin, from.y);
+      ctx.stroke();
 
-  /**
-   * Create the HTML DOM for the current time bar
-   * @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%';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y);
 
-    this.bar = bar;
-  };
+      step.next();
+    }
+    ctx.lineWidth = 1;
+    from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
+    to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
 
-  /**
-   * Destroy the CurrentTime bar
-   */
-  CurrentTime.prototype.destroy = function () {
-    this.options.showCurrentTime = false;
-    this.redraw(); // will remove the bar from the DOM and stop refreshing
+    // draw x-axis
+    ctx.lineWidth = 1;
+    // line at yMin
+    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
+    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(xMin2d.x, xMin2d.y);
+    ctx.lineTo(xMax2d.x, xMax2d.y);
+    ctx.stroke();
+    // line at ymax
+    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
+    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(xMin2d.x, xMin2d.y);
+    ctx.lineTo(xMax2d.x, xMax2d.y);
+    ctx.stroke();
 
-    this.body = null;
-  };
+    // draw y-axis
+    ctx.lineWidth = 1;
+    // line at xMin
+    from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
+    to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
+    // line at xMax
+    from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
+    to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
 
-  /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCurrentTime]
-   */
-  CurrentTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCurrentTime'], this.options, options);
+    // draw x-label
+    var xLabel = this.xLabel;
+    if (xLabel.length > 0) {
+      yOffset = 0.1 / this.scale.y;
+      xText = (this.xMin + this.xMax) / 2;
+      yText = (Math.cos(armAngle) > 0) ? this.yMin - yOffset: this.yMax + yOffset;
+      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
+      if (Math.cos(armAngle * 2) > 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+      }
+      else if (Math.sin(armAngle * 2) < 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+      }
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(xLabel, text.x, text.y);
     }
-  };
-
-  /**
-   * 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();
+    // draw y-label
+    var yLabel = this.yLabel;
+    if (yLabel.length > 0) {
+      xOffset = 0.1 / this.scale.x;
+      xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
+      yText = (this.yMin + this.yMax) / 2;
+      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
+      if (Math.cos(armAngle * 2) < 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
       }
-
-      var now = new Date();
-      var x = this.body.util.toScreen(now);
-
-      this.bar.style.left = x + 'px';
-      this.bar.title = 'Current time: ' + now;
-    }
-    else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
+      else if (Math.sin(armAngle * 2) > 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
       }
-      this.stop();
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(yLabel, text.x, text.y);
     }
 
-    return false;
+    // draw z-label
+    var zLabel = this.zLabel;
+    if (zLabel.length > 0) {
+      offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
+      xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
+      yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
+      zText = (this.zMin + this.zMax) / 2;
+      text = this._convert3Dto2D(new Point3d(xText, yText, zText));
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(zLabel, text.x - offset, text.y);
+    }
   };
 
   /**
-   * Start auto refreshing the current time bar
+   * Calculate the color based on the given value.
+   * @param {Number} H   Hue, a value be between 0 and 360
+   * @param {Number} S   Saturation, a value between 0 and 1
+   * @param {Number} V   Value, a value between 0 and 1
    */
-  CurrentTime.prototype.start = function() {
-    var me = this;
-
-    function update () {
-      me.stop();
+  Graph3d.prototype._hsv2rgb = function(H, S, V) {
+    var R, G, B, C, Hi, X;
 
-      // 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;
+    C = V * S;
+    Hi = Math.floor(H/60);  // hi = 0,1,2,3,4,5
+    X = C * (1 - Math.abs(((H/60) % 2) - 1));
 
-      me.redraw();
+    switch (Hi) {
+      case 0: R = C; G = X; B = 0; break;
+      case 1: R = X; G = C; B = 0; break;
+      case 2: R = 0; G = C; B = X; break;
+      case 3: R = 0; G = X; B = C; break;
+      case 4: R = X; G = 0; B = C; break;
+      case 5: R = C; G = 0; B = X; break;
 
-      // start a timer to adjust for the new time
-      me.currentTimeTimer = setTimeout(update, interval);
+      default: R = 0; G = 0; B = 0; break;
     }
 
-    update();
+    return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')';
   };
 
+
   /**
-   * Stop auto refreshing the current time bar
+   * Draw all datapoints as a grid
+   * This function can be used when the style is 'grid'
    */
-  CurrentTime.prototype.stop = function() {
-    if (this.currentTimeTimer !== undefined) {
-      clearTimeout(this.currentTimeTimer);
-      delete this.currentTimeTimer;
-    }
-  };
-
-  module.exports = CurrentTime;
-
-
-/***/ },
-/* 14 */
-/***/ function(module, exports, __webpack_require__) {
+  Graph3d.prototype._redrawDataGrid = function() {
+    var canvas = this.frame.canvas,
+      ctx = canvas.getContext('2d'),
+      point, right, top, cross,
+      i,
+      topSideVisible, fillStyle, strokeStyle, lineWidth,
+      h, s, v, zAvg;
 
-  var Hammer = __webpack_require__(50);
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(12);
 
-  /**
-   * A custom time bar
-   * @param {{range: Range, dom: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCustomTime]
-   * @constructor CustomTime
-   * @extends Component
-   */
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return; // TODO: throw exception?
 
-  function CustomTime (body, options) {
-    this.body = body;
+    // calculate the translations and screen position of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
 
-    // default options
-    this.defaultOptions = {
-      showCustomTime: false
-    };
-    this.options = util.extend({}, this.defaultOptions);
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
 
-    this.customTime = new Date();
-    this.eventParams = {}; // stores state parameters while dragging the bar
+      // calculate the translation of the point at the bottom (needed for sorting)
+      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
+      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    }
 
-    // create the DOM
-    this._create();
+    // sort the points on depth of their (x,y) position (not on z)
+    var sortDepth = function (a, b) {
+      return b.dist - a.dist;
+    };
+    this.dataPoints.sort(sortDepth);
 
-    this.setOptions(options);
-  }
+    if (this.style === Graph3d.STYLE.SURFACE) {
+      for (i = 0; i < this.dataPoints.length; i++) {
+        point = this.dataPoints[i];
+        right = this.dataPoints[i].pointRight;
+        top   = this.dataPoints[i].pointTop;
+        cross = this.dataPoints[i].pointCross;
 
-  CustomTime.prototype = new Component();
+        if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {
 
-  /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCustomTime]
-   */
-  CustomTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCustomTime'], this.options, options);
-    }
-  };
+          if (this.showGrayBottom || this.showShadow) {
+            // calculate the cross product of the two vectors from center
+            // to left and right, in order to know whether we are looking at the
+            // bottom or at the top side. We can also use the cross product
+            // for calculating light intensity
+            var aDiff = Point3d.subtract(cross.trans, point.trans);
+            var bDiff = Point3d.subtract(top.trans, right.trans);
+            var crossproduct = Point3d.crossProduct(aDiff, bDiff);
+            var len = crossproduct.length();
+            // FIXME: there is a bug with determining the surface side (shadow or colored)
 
-  /**
-   * Create the DOM for the custom time
-   * @private
-   */
-  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;
+            topSideVisible = (crossproduct.z > 0);
+          }
+          else {
+            topSideVisible = true;
+          }
 
-    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 (topSideVisible) {
+            // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+            zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
+            h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+            s = 1; // saturation
 
-    // 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.showShadow) {
+              v = Math.min(1 + (crossproduct.x / len) / 2, 1);  // value. TODO: scale
+              fillStyle = this._hsv2rgb(h, s, v);
+              strokeStyle = fillStyle;
+            }
+            else  {
+              v = 1;
+              fillStyle = this._hsv2rgb(h, s, v);
+              strokeStyle = this.colorAxis;
+            }
+          }
+          else {
+            fillStyle = 'gray';
+            strokeStyle = this.colorAxis;
+          }
+          lineWidth = 0.5;
 
-  /**
-   * Destroy the CustomTime bar
-   */
-  CustomTime.prototype.destroy = function () {
-    this.options.showCustomTime = false;
-    this.redraw(); // will remove the bar from the DOM
+          ctx.lineWidth = lineWidth;
+          ctx.fillStyle = fillStyle;
+          ctx.strokeStyle = strokeStyle;
+          ctx.beginPath();
+          ctx.moveTo(point.screen.x, point.screen.y);
+          ctx.lineTo(right.screen.x, right.screen.y);
+          ctx.lineTo(cross.screen.x, cross.screen.y);
+          ctx.lineTo(top.screen.x, top.screen.y);
+          ctx.closePath();
+          ctx.fill();
+          ctx.stroke();
+        }
+      }
+    }
+    else { // grid style
+      for (i = 0; i < this.dataPoints.length; i++) {
+        point = this.dataPoints[i];
+        right = this.dataPoints[i].pointRight;
+        top   = this.dataPoints[i].pointTop;
 
-    this.hammer.enable(false);
-    this.hammer = null;
+        if (point !== undefined) {
+          if (this.showPerspective) {
+            lineWidth = 2 / -point.trans.z;
+          }
+          else {
+            lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
+          }
+        }
 
-    this.body = null;
-  };
+        if (point !== undefined && right !== undefined) {
+          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+          zAvg = (point.point.z + right.point.z) / 2;
+          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-  /**
-   * 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);
+          ctx.lineWidth = lineWidth;
+          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
+          ctx.beginPath();
+          ctx.moveTo(point.screen.x, point.screen.y);
+          ctx.lineTo(right.screen.x, right.screen.y);
+          ctx.stroke();
         }
-        parent.appendChild(this.bar);
-      }
 
-      var x = this.body.util.toScreen(this.customTime);
+        if (point !== undefined && top !== undefined) {
+          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+          zAvg = (point.point.z + top.point.z) / 2;
+          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-      this.bar.style.left = x + 'px';
-      this.bar.title = 'Time: ' + this.customTime;
-    }
-    else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
+          ctx.lineWidth = lineWidth;
+          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
+          ctx.beginPath();
+          ctx.moveTo(point.screen.x, point.screen.y);
+          ctx.lineTo(top.screen.x, top.screen.y);
+          ctx.stroke();
+        }
       }
     }
-
-    return false;
   };
 
-  /**
-   * Set custom time.
-   * @param {Date} time
-   */
-  CustomTime.prototype.setCustomTime = function(time) {
-    this.customTime = new Date(time.valueOf());
-    this.redraw();
-  };
 
   /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
+   * Draw all datapoints as dots.
+   * This function can be used when the style is 'dot' or 'dot-line'
    */
-  CustomTime.prototype.getCustomTime = function() {
-    return new Date(this.customTime.valueOf());
-  };
+  Graph3d.prototype._redrawDataDot = function() {
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+    var i;
 
-  /**
-   * Start moving horizontally
-   * @param {Event} event
-   * @private
-   */
-  CustomTime.prototype._onDragStart = function(event) {
-    this.eventParams.dragging = true;
-    this.eventParams.customTime = this.customTime;
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return;  // TODO: throw exception?
 
-    event.stopPropagation();
-    event.preventDefault();
-  };
+    // calculate the translations of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
 
-  /**
-   * Perform moving operating.
-   * @param {Event} event
-   * @private
-   */
-  CustomTime.prototype._onDrag = function (event) {
-    if (!this.eventParams.dragging) return;
+      // calculate the distance from the point at the bottom to the camera
+      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
+      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    }
 
-    var deltaX = event.gesture.deltaX,
-        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
-        time = this.body.util.toTime(x);
+    // order the translated points by depth
+    var sortDepth = function (a, b) {
+      return b.dist - a.dist;
+    };
+    this.dataPoints.sort(sortDepth);
 
-    this.setCustomTime(time);
+    // draw the datapoints as colored circles
+    var dotSize = this.frame.clientWidth * 0.02;  // px
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var point = this.dataPoints[i];
 
-    // fire a timechange event
-    this.body.emitter.emit('timechange', {
-      time: new Date(this.customTime.valueOf())
-    });
+      if (this.style === Graph3d.STYLE.DOTLINE) {
+        // draw a vertical line from the bottom to the graph value
+        //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
+        var from = this._convert3Dto2D(point.bottom);
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = this.colorGrid;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(point.screen.x, point.screen.y);
+        ctx.stroke();
+      }
 
-    event.stopPropagation();
-    event.preventDefault();
-  };
+      // calculate radius for the circle
+      var size;
+      if (this.style === Graph3d.STYLE.DOTSIZE) {
+        size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
+      }
+      else {
+        size = dotSize;
+      }
 
-  /**
-   * Stop moving operating.
-   * @param {event} event
-   * @private
-   */
-  CustomTime.prototype._onDragEnd = function (event) {
-    if (!this.eventParams.dragging) return;
+      var radius;
+      if (this.showPerspective) {
+        radius = size / -point.trans.z;
+      }
+      else {
+        radius = size * -(this.eye.z / this.camera.getArmLength());
+      }
+      if (radius < 0) {
+        radius = 0;
+      }
 
-    // fire a timechanged event
-    this.body.emitter.emit('timechanged', {
-      time: new Date(this.customTime.valueOf())
-    });
+      var hue, color, borderColor;
+      if (this.style === Graph3d.STYLE.DOTCOLOR ) {
+        // calculate the color based on the value
+        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
+      else if (this.style === Graph3d.STYLE.DOTSIZE) {
+        color = this.colorDot;
+        borderColor = this.colorDotBorder;
+      }
+      else {
+        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
 
-    event.stopPropagation();
-    event.preventDefault();
+      // draw the circle
+      ctx.lineWidth = 1.0;
+      ctx.strokeStyle = borderColor;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
+      ctx.fill();
+      ctx.stroke();
+    }
   };
 
-  module.exports = CustomTime;
-
-
-/***/ },
-/* 15 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Component = __webpack_require__(12);
-  var DataStep = __webpack_require__(6);
-
   /**
-   * A horizontal time axis
-   * @param {Object} [options]        See DataAxis.setOptions for the available
-   *                                  options.
-   * @constructor DataAxis
-   * @extends Component
-   * @param body
+   * Draw all datapoints as bars.
+   * This function can be used when the style is 'bar', 'bar-color', or 'bar-size'
    */
-  function DataAxis (body, options, svg) {
-    this.id = util.randomUUID();
-    this.body = body;
+  Graph3d.prototype._redrawDataBar = function() {
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+    var i, j, surface, corners;
 
-    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
-    };
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return;  // TODO: throw exception?
 
-    this.linegraphSVG = svg;
-    this.props = {};
-    this.DOMelements = { // dynamic elements
-      lines: {},
-      labels: {}
-    };
+    // calculate the translations of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
 
-    this.dom = {};
+      // calculate the distance from the point at the bottom to the camera
+      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
+      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    }
 
-    this.range = {start:0, end:0};
+    // order the translated points by depth
+    var sortDepth = function (a, b) {
+      return b.dist - a.dist;
+    };
+    this.dataPoints.sort(sortDepth);
 
-    this.options = util.extend({}, this.defaultOptions);
-    this.conversionFactor = 1;
+    // draw the datapoints as bars
+    var xWidth = this.xBarWidth / 2;
+    var yWidth = this.yBarWidth / 2;
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var point = this.dataPoints[i];
 
-    this.setOptions(options);
-    this.width = Number(('' + this.options.width).replace("px",""));
-    this.minWidth = this.width;
-    this.height = this.linegraphSVG.offsetHeight;
+      // determine color
+      var hue, color, borderColor;
+      if (this.style === Graph3d.STYLE.BARCOLOR ) {
+        // calculate the color based on the value
+        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
+      else if (this.style === Graph3d.STYLE.BARSIZE) {
+        color = this.colorDot;
+        borderColor = this.colorDotBorder;
+      }
+      else {
+        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
 
-    this.stepPixels = 25;
-    this.stepPixelsForced = 25;
-    this.lineOffset = 0;
-    this.master = true;
-    this.svgElements = {};
+      // calculate size for the bar
+      if (this.style === Graph3d.STYLE.BARSIZE) {
+        xWidth = (this.xBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
+        yWidth = (this.yBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
+      }
 
+      // calculate all corner points
+      var me = this;
+      var point3d = point.point;
+      var top = [
+        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
+        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
+      ];
+      var bottom = [
+        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, this.zMin)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, this.zMin)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, this.zMin)},
+        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, this.zMin)}
+      ];
 
-    this.groups = {};
-    this.amountOfGroups = 0;
+      // calculate screen location of the points
+      top.forEach(function (obj) {
+        obj.screen = me._convert3Dto2D(obj.point);
+      });
+      bottom.forEach(function (obj) {
+        obj.screen = me._convert3Dto2D(obj.point);
+      });
 
-    // create the HTML DOM
-    this._create();
-  }
+      // create five sides, calculate both corner points and center points
+      var surfaces = [
+        {corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
+        {corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
+        {corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
+        {corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
+        {corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
+      ];
+      point.surfaces = surfaces;
 
-  DataAxis.prototype = new Component();
+      // calculate the distance of each of the surface centers to the camera
+      for (j = 0; j < surfaces.length; j++) {
+        surface = surfaces[j];
+        var transCenter = this._convertPointToTranslation(surface.center);
+        surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
+        // TODO: this dept calculation doesn't work 100% of the cases due to perspective,
+        //     but the current solution is fast/simple and works in 99.9% of all cases
+        //     the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
+      }
 
+      // order the surfaces by their (translated) depth
+      surfaces.sort(function (a, b) {
+        var diff = b.dist - a.dist;
+        if (diff) return diff;
 
+        // if equal depth, sort the top surface last
+        if (a.corners === top) return 1;
+        if (b.corners === top) return -1;
 
-  DataAxis.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
-    }
-    this.amountOfGroups += 1;
-  };
+        // both are equal
+        return 0;
+      });
 
-  DataAxis.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
-  };
-
-  DataAxis.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
-    }
-  };
-
-
-  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'];
-      util.selectiveExtend(fields, this.options, options);
-
-      this.minWidth = Number(('' + this.options.width).replace("px",""));
-
-      if (redraw == true && this.dom.frame) {
-        this.hide();
-        this.show();
+      // draw the ordered surfaces
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = borderColor;
+      ctx.fillStyle = color;
+      // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
+      for (j = 2; j < surfaces.length; j++) {
+        surface = surfaces[j];
+        corners = surface.corners;
+        ctx.beginPath();
+        ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
+        ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
+        ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
+        ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
+        ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
+        ctx.fill();
+        ctx.stroke();
       }
     }
   };
 
 
   /**
-   * Create the HTML DOM for the DataAxis
+   * Draw a line through all datapoints.
+   * This function can be used when the style is 'line'
    */
-  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;
-
-    this.dom.lineContainer = document.createElement('div');
-    this.dom.lineContainer.style.width = '100%';
-    this.dom.lineContainer.style.height = this.height;
-
-    // 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);
+  Graph3d.prototype._redrawDataLine = function() {
+    var canvas = this.frame.canvas,
+      ctx = canvas.getContext('2d'),
+      point, i;
 
-    var x;
-    var iconWidth = this.options.iconWidth;
-    var iconHeight = 15;
-    var iconOffset = 4;
-    var y = iconOffset + 0.5 * iconHeight;
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return;  // TODO: throw exception?
 
-    if (this.options.orientation == 'left') {
-      x = iconOffset;
-    }
-    else {
-      x = this.width - iconWidth - iconOffset;
-    }
+    // calculate the translations of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
 
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-        y += iconHeight + iconOffset;
-      }
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
     }
 
-    DOMutil.cleanupElements(this.svgElements);
-  };
-
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.show = function() {
-    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);
-      }
-    }
+    // start the line
+    if (this.dataPoints.length > 0) {
+      point = this.dataPoints[0];
 
-    if (!this.dom.lineContainer.parentNode) {
-      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
+      ctx.lineWidth = 1;    // TODO: make customizable
+      ctx.strokeStyle = 'blue'; // TODO: make customizable
+      ctx.beginPath();
+      ctx.moveTo(point.screen.x, point.screen.y);
     }
-  };
 
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.hide = function() {
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    // draw the datapoints as colored circles
+    for (i = 1; i < this.dataPoints.length; i++) {
+      point = this.dataPoints[i];
+      ctx.lineTo(point.screen.x, point.screen.y);
     }
 
-    if (this.dom.lineContainer.parentNode) {
-      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
+    // finish the line
+    if (this.dataPoints.length > 0) {
+      ctx.stroke();
     }
   };
 
   /**
-   * Set a range (start and end)
-   * @param end
-   * @param start
-   * @param end
+   * Start a moving operation inside the provided parent element
+   * @param {Event}     event     The event that occurred (required for
+   *                  retrieving the  mouse position)
    */
-  DataAxis.prototype.setRange = function (start, end) {
-    this.range.start = start;
-    this.range.end = end;
-  };
+  Graph3d.prototype._onMouseDown = function(event) {
+    event = event || window.event;
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  DataAxis.prototype.redraw = function () {
-    var changeCalled = false;
-    if (this.amountOfGroups == 0) {
-      this.hide();
+    // check if mouse is still down (may be up when focus is lost for example
+    // in an iframe)
+    if (this.leftButtonDown) {
+      this._onMouseUp(event);
     }
-    else {
-      this.show();
-      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
-      // 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;
 
-      var props = this.props;
-      var frame = this.dom.frame;
-
-      // update classname
-      frame.className = 'dataaxis';
-
-      // calculate character width and height
-      this._calculateCharSize();
+    // only react on left mouse button down
+    this.leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
+    if (!this.leftButtonDown && !this.touchDown) return;
 
-      var orientation = this.options.orientation;
-      var showMinorLabels = this.options.showMinorLabels;
-      var showMajorLabels = this.options.showMajorLabels;
+    // get mouse position (different code for IE and all other browsers)
+    this.startMouseX = getMouseX(event);
+    this.startMouseY = getMouseY(event);
 
-      // determine the width and height of the elemens for the axis
-      props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
-      props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+    this.startStart = new Date(this.start);
+    this.startEnd = new Date(this.end);
+    this.startArmRotation = this.camera.getArmRotation();
 
-      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;
+    this.frame.style.cursor = 'move';
 
-      //  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";
-      }
-      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";
-      }
-      changeCalled = this._redrawLabels();
-      if (this.options.icons == true) {
-        this._redrawGroupIcons();
-      }
-    }
-    return changeCalled;
+    // add event listeners to handle moving the contents
+    // we store the function onmousemove and onmouseup in the graph, so we can
+    // remove the eventlisteners lateron in the function mouseUp()
+    var me = this;
+    this.onmousemove = function (event) {me._onMouseMove(event);};
+    this.onmouseup   = function (event) {me._onMouseUp(event);};
+    G3DaddEventListener(document, 'mousemove', me.onmousemove);
+    G3DaddEventListener(document, 'mouseup', me.onmouseup);
+    G3DpreventDefault(event);
   };
 
+
   /**
-   * Repaint major and minor text labels and vertical grid lines
-   * @private
+   * Perform moving operating.
+   * This function activated from within the funcion Graph.mouseDown().
+   * @param {Event}   event  Well, eehh, the event
    */
-  DataAxis.prototype._redrawLabels = function () {
-    DOMutil.prepareElements(this.DOMelements);
-
-    var orientation = this.options['orientation'];
+  Graph3d.prototype._onMouseMove = function (event) {
+    event = event || window.event;
 
-    // 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.step = step;
-    step.first();
+    // calculate change in mouse position
+    var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
+    var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
 
-    // get the distance in pixels for a step
-    var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
-    this.stepPixels = stepPixels;
+    var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
+    var verticalNew = this.startArmRotation.vertical + diffY / 200;
 
-    var amountOfSteps = this.height / stepPixels;
-    var stepDifference = 0;
+    var snapAngle = 4; // degrees
+    var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
 
-    if (this.master == false) {
-      stepPixels = this.stepPixelsForced;
-      stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
-      for (var i = 0; i < 0.5 * stepDifference; i++) {
-        step.previous();
-      }
-      amountOfSteps = this.height / stepPixels;
+    // snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
+    // the -0.001 is to take care that the vertical axis is always drawn at the left front corner
+    if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
+      horizontalNew = Math.round((horizontalNew / Math.PI)) * Math.PI - 0.001;
+    }
+    if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
+      horizontalNew = (Math.round((horizontalNew/ Math.PI - 0.5)) + 0.5) * Math.PI - 0.001;
     }
 
+    // snap vertically to nice angles
+    if (Math.abs(Math.sin(verticalNew)) < snapValue) {
+      verticalNew = Math.round((verticalNew / Math.PI)) * Math.PI;
+    }
+    if (Math.abs(Math.cos(verticalNew)) < snapValue) {
+      verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
+    }
 
-    this.valueAtZero = step.marginEnd;
-    var marginStartPos = 0;
+    this.camera.setArmRotation(horizontalNew, verticalNew);
+    this.redraw();
 
-    // do not draw the first label
-    var max = 1;
-    step.next();
+    // fire a cameraPositionChange event
+    var parameters = this.getCameraPosition();
+    this.emit('cameraPositionChange', parameters);
 
-    this.maxLabelSize = 0;
-    var y = 0;
-    while (max < Math.round(amountOfSteps)) {
+    G3DpreventDefault(event);
+  };
 
-      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(), orientation, 'yAxis minor', this.props.minorCharHeight);
-      }
+  /**
+   * Stop moving operating.
+   * This function activated from within the funcion Graph.mouseDown().
+   * @param {event}  event   The event
+   */
+  Graph3d.prototype._onMouseUp = function (event) {
+    this.frame.style.cursor = 'auto';
+    this.leftButtonDown = false;
 
-      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
-          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
+    // remove event listeners here
+    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
+    G3DremoveEventListener(document, 'mouseup',   this.onmouseup);
+    G3DpreventDefault(event);
+  };
 
-        if (y >= 0) {
-          this._redrawLabel(y - 2, step.getCurrent(), 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);
-      }
+  /**
+   * After having moved the mouse, a tooltip should pop up when the mouse is resting on a data point
+   * @param {Event}  event   A mouse move event
+   */
+  Graph3d.prototype._onTooltip = function (event) {
+    var delay = 300; // ms
+    var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
+    var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
 
-      step.next();
-      max++;
+    if (!this.showTooltip) {
+      return;
     }
 
-    this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
+    if (this.tooltipTimeout) {
+      clearTimeout(this.tooltipTimeout);
+    }
 
-    var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
-    // this will resize the yAxis to accomodate 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);
-      this.redraw();
-      return true;
+    // (delayed) display of a tooltip only if no mouse button is down
+    if (this.leftButtonDown) {
+      this._hideTooltip();
+      return;
     }
-    // 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);
-      this.redraw();
-      return true;
+
+    if (this.tooltip && this.tooltip.dataPoint) {
+      // tooltip is currently visible
+      var dataPoint = this._dataPointFromXY(mouseX, mouseY);
+      if (dataPoint !== this.tooltip.dataPoint) {
+        // datapoint changed
+        if (dataPoint) {
+          this._showTooltip(dataPoint);
+        }
+        else {
+          this._hideTooltip();
+        }
+      }
     }
     else {
-      DOMutil.cleanupElements(this.DOMelements);
-      return false;
+      // tooltip is currently not visible
+      var me = this;
+      this.tooltipTimeout = setTimeout(function () {
+        me.tooltipTimeout = null;
+
+        // show a tooltip if we have a data point
+        var dataPoint = me._dataPointFromXY(mouseX, mouseY);
+        if (dataPoint) {
+          me._showTooltip(dataPoint);
+        }
+      }, delay);
     }
   };
 
   /**
-   * Create a label for the axis at position x
-   * @private
-   * @param y
-   * @param text
-   * @param orientation
-   * @param className
-   * @param characterHeight
+   * Event handler for touchstart event on mobile devices
    */
-  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
-    // reuse redundant label
-    var label = DOMutil.getDOMElement('div',this.DOMelements, 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';
+  Graph3d.prototype._onTouchStart = function(event) {
+    this.touchDown = true;
 
-    text += '';
+    var me = this;
+    this.ontouchmove = function (event) {me._onTouchMove(event);};
+    this.ontouchend  = function (event) {me._onTouchEnd(event);};
+    G3DaddEventListener(document, 'touchmove', me.ontouchmove);
+    G3DaddEventListener(document, 'touchend', me.ontouchend);
 
-    var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
-    if (this.maxLabelSize < text.length * largestWidth) {
-      this.maxLabelSize = text.length * largestWidth;
-    }
+    this._onMouseDown(event);
   };
 
   /**
-   * Create a minor line for the axis at position y
-   * @param y
-   * @param orientation
-   * @param className
-   * @param offset
-   * @param width
+   * Event handler for touchmove event on mobile devices
    */
-  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
-    if (this.master == true) {
-      var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
-      line.className = className;
-      line.innerHTML = '';
-
-      if (orientation == 'left') {
-        line.style.left = (this.width - offset) + 'px';
-      }
-      else {
-        line.style.right = (this.width - offset) + 'px';
-      }
-
-      line.style.width = width + 'px';
-      line.style.top = y + 'px';
-    }
+  Graph3d.prototype._onTouchMove = function(event) {
+    this._onMouseMove(event);
   };
 
+  /**
+   * Event handler for touchend event on mobile devices
+   */
+  Graph3d.prototype._onTouchEnd = function(event) {
+    this.touchDown = false;
+
+    G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
+    G3DremoveEventListener(document, 'touchend',   this.ontouchend);
 
-  DataAxis.prototype.convertValue = function (value) {
-    var invertedValue = this.valueAtZero - value;
-    var convertedValue = invertedValue * this.conversionFactor;
-    return convertedValue; // the -2 is to compensate for the borders
+    this._onMouseUp(event);
   };
 
 
   /**
-   * 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
+   * Event handler for mouse wheel event, used to zoom the graph
+   * Code from http://adomas.org/javascript-mouse-wheel/
+   * @param {event}  event   The event
    */
-  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;
+  Graph3d.prototype._onWheel = function(event) {
+    if (!event) /* For IE. */
+      event = window.event;
 
-      this.dom.frame.removeChild(measureCharMinor);
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail/3;
     }
 
-    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);
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+      var oldLength = this.camera.getArmLength();
+      var newLength = oldLength * (1 - delta / 10);
 
-      this.props.majorCharHeight = measureCharMajor.clientHeight;
-      this.props.majorCharWidth = measureCharMajor.clientWidth;
+      this.camera.setArmLength(newLength);
+      this.redraw();
 
-      this.dom.frame.removeChild(measureCharMajor);
+      this._hideTooltip();
     }
+
+    // fire a cameraPositionChange event
+    var parameters = this.getCameraPosition();
+    this.emit('cameraPositionChange', parameters);
+
+    // Prevent default actions caused by mouse wheel.
+    // That might be ugly, but we handle scrolls somehow
+    // anyway, so don't bother here..
+    G3DpreventDefault(event);
   };
 
   /**
-   * 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
+   * Test whether a point lies inside given 2D triangle
+   * @param {Point2d} point
+   * @param {Point2d[]} triangle
+   * @return {boolean} Returns true if given point lies inside or on the edge of the triangle
+   * @private
    */
-  DataAxis.prototype.snap = function(date) {
-    return this.step.snap(date);
-  };
-
-  module.exports = DataAxis;
+  Graph3d.prototype._insideTriangle = function (point, triangle) {
+    var a = triangle[0],
+      b = triangle[1],
+      c = triangle[2];
 
+    function sign (x) {
+      return x > 0 ? 1 : x < 0 ? -1 : 0;
+    }
 
-/***/ },
-/* 16 */
-/***/ function(module, exports, __webpack_require__) {
+    var as = sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
+    var bs = sign((c.x - b.x) * (point.y - b.y) - (c.y - b.y) * (point.x - b.x));
+    var cs = sign((a.x - c.x) * (point.y - c.y) - (a.y - c.y) * (point.x - c.x));
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
+    // each of the three signs must be either equal to each other or zero
+    return (as == 0 || bs == 0 || as == bs) &&
+      (bs == 0 || cs == 0 || bs == cs) &&
+      (as == 0 || cs == 0 || as == cs);
+  };
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * Find a data point close to given screen position (x, y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Object | null} The closest data point or null if not close to any data point
+   * @private
    */
-  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 = [];
-  }
+  Graph3d.prototype._dataPointFromXY = function (x, y) {
+    var i,
+      distMax = 100, // px
+      dataPoint = null,
+      closestDataPoint = null,
+      closestDist = null,
+      center = new Point2d(x, y);
 
-  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;})
+    if (this.style === Graph3d.STYLE.BAR ||
+      this.style === Graph3d.STYLE.BARCOLOR ||
+      this.style === Graph3d.STYLE.BARSIZE) {
+      // the data points are ordered from far away to closest
+      for (i = this.dataPoints.length - 1; i >= 0; i--) {
+        dataPoint = this.dataPoints[i];
+        var surfaces  = dataPoint.surfaces;
+        if (surfaces) {
+          for (var s = surfaces.length - 1; s >= 0; s--) {
+            // split each surface in two triangles, and see if the center point is inside one of these
+            var surface = surfaces[s];
+            var corners = surface.corners;
+            var triangle1 = [corners[0].screen, corners[1].screen, corners[2].screen];
+            var triangle2 = [corners[2].screen, corners[3].screen, corners[0].screen];
+            if (this._insideTriangle(center, triangle1) ||
+              this._insideTriangle(center, triangle2)) {
+              // return immediately at the first hit
+              return dataPoint;
+            }
+          }
+        }
       }
     }
     else {
-      this.itemsData = [];
-    }
-  };
-
-  GraphGroup.prototype.setZeroPosition = function(pos) {
-    this.zeroPosition = pos;
-  };
-
-  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');
+      // find the closest data point, using distance to the center of the point on 2d screen
+      for (i = 0; i < this.dataPoints.length; i++) {
+        dataPoint = this.dataPoints[i];
+        var point = dataPoint.screen;
+        if (point) {
+          var distX = Math.abs(x - point.x);
+          var distY = Math.abs(y - point.y);
+          var dist  = Math.sqrt(distX * distX + distY * distY);
 
-      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 ((closestDist === null || dist < closestDist) && dist < distMax) {
+            closestDist = dist;
+            closestDataPoint = dataPoint;
           }
         }
       }
     }
-  };
 
-  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.setOptions(group.options);
+
+    return closestDataPoint;
   };
 
-  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
-    var fillHeight = iconHeight * 0.5;
-    var path, fillPath;
+  /**
+   * Display a tooltip for given data point
+   * @param {Object} dataPoint
+   * @private
+   */
+  Graph3d.prototype._showTooltip = function (dataPoint) {
+    var content, line, dot;
 
-    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.tooltip) {
+      content = document.createElement('div');
+      content.style.position = 'absolute';
+      content.style.padding = '10px';
+      content.style.border = '1px solid #4d4d4d';
+      content.style.color = '#1a1a1a';
+      content.style.background = 'rgba(255,255,255,0.7)';
+      content.style.borderRadius = '2px';
+      content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
 
-    if (this.options.style == 'line') {
-      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-      path.setAttributeNS(null, "class", this.className);
-      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");
-      }
+      line = document.createElement('div');
+      line.style.position = 'absolute';
+      line.style.height = '40px';
+      line.style.width = '0';
+      line.style.borderLeft = '1px solid #4d4d4d';
 
-      if (this.options.drawPoints.enabled == true) {
-        DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
-      }
+      dot = document.createElement('div');
+      dot.style.position = 'absolute';
+      dot.style.height = '0';
+      dot.style.width = '0';
+      dot.style.border = '5px solid #4d4d4d';
+      dot.style.borderRadius = '5px';
+
+      this.tooltip = {
+        dataPoint: null,
+        dom: {
+          content: content,
+          line: line,
+          dot: dot
+        }
+      };
     }
     else {
-      var barWidth = Math.round(0.3 * iconWidth);
-      var bar1Height = Math.round(0.4 * iconHeight);
-      var bar2Height = Math.round(0.75 * iconHeight);
+      content = this.tooltip.dom.content;
+      line  = this.tooltip.dom.line;
+      dot   = this.tooltip.dom.dot;
+    }
 
-      var offset = Math.round((iconWidth - (2 * barWidth))/3);
+    this._hideTooltip();
 
-      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);
+    this.tooltip.dataPoint = dataPoint;
+    if (typeof this.showTooltip === 'function') {
+      content.innerHTML = this.showTooltip(dataPoint.point);
+    }
+    else {
+      content.innerHTML = '<table>' +
+        '<tr><td>x:</td><td>' + dataPoint.point.x + '</td></tr>' +
+        '<tr><td>y:</td><td>' + dataPoint.point.y + '</td></tr>' +
+        '<tr><td>z:</td><td>' + dataPoint.point.z + '</td></tr>' +
+        '</table>';
     }
-  };
 
-  module.exports = GraphGroup;
+    content.style.left  = '0';
+    content.style.top   = '0';
+    this.frame.appendChild(content);
+    this.frame.appendChild(line);
+    this.frame.appendChild(dot);
 
+    // calculate sizes
+    var contentWidth  = content.offsetWidth;
+    var contentHeight   = content.offsetHeight;
+    var lineHeight    = line.offsetHeight;
+    var dotWidth    = dot.offsetWidth;
+    var dotHeight     = dot.offsetHeight;
 
-/***/ },
-/* 17 */
-/***/ function(module, exports, __webpack_require__) {
+    var left = dataPoint.screen.x - contentWidth / 2;
+    left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
 
-  var util = __webpack_require__(1);
-  var stack = __webpack_require__(9);
-  var ItemRange = __webpack_require__(25);
+    line.style.left   = dataPoint.screen.x + 'px';
+    line.style.top    = (dataPoint.screen.y - lineHeight) + 'px';
+    content.style.left  = left + 'px';
+    content.style.top   = (dataPoint.screen.y - lineHeight - contentHeight) + 'px';
+    dot.style.left    = (dataPoint.screen.x - dotWidth / 2) + 'px';
+    dot.style.top     = (dataPoint.screen.y - dotHeight / 2) + 'px';
+  };
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * Hide the tooltip when displayed
+   * @private
    */
-  function Group (groupId, data, itemSet) {
-    this.groupId = groupId;
-
-    this.itemSet = itemSet;
+  Graph3d.prototype._hideTooltip = function () {
+    if (this.tooltip) {
+      this.tooltip.dataPoint = null;
 
-    this.dom = {};
-    this.props = {
-      label: {
-        width: 0,
-        height: 0
+      for (var prop in this.tooltip.dom) {
+        if (this.tooltip.dom.hasOwnProperty(prop)) {
+          var elem = this.tooltip.dom[prop];
+          if (elem && elem.parentNode) {
+            elem.parentNode.removeChild(elem);
+          }
+        }
       }
-    };
-    this.className = null;
-
-    this.items = {};        // items filtered by groupId of this group
-    this.visibleItems = []; // items currently visible in window
-    this.orderedItems = {   // items sorted by start and by end
-      byStart: [],
-      byEnd: []
-    };
-
-    this._create();
+    }
+  };
 
-    this.setData(data);
-  }
 
   /**
-   * Create DOM elements for the group
-   * @private
+   * Add and event listener. Works for all browsers
+   * @param {Element}   element  An html element
+   * @param {string}    action   The action, for example 'click',
+   *                 without the prefix 'on'
+   * @param {function}  listener   The callback function to be executed
+   * @param {boolean}   useCapture
    */
-  Group.prototype._create = function() {
-    var label = document.createElement('div');
-    label.className = 'vlabel';
-    this.dom.label = label;
+  G3DaddEventListener = function(element, action, listener, useCapture) {
+    if (element.addEventListener) {
+      if (useCapture === undefined)
+        useCapture = false;
 
-    var inner = document.createElement('div');
-    inner.className = 'inner';
-    label.appendChild(inner);
-    this.dom.inner = inner;
+      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
+        action = 'DOMMouseScroll';  // For Firefox
+      }
 
-    var foreground = document.createElement('div');
-    foreground.className = 'group';
-    foreground['timeline-group'] = this;
-    this.dom.foreground = foreground;
+      element.addEventListener(action, listener, useCapture);
+    } else {
+      element.attachEvent('on' + action, listener);  // IE browsers
+    }
+  };
 
-    this.dom.background = document.createElement('div');
-    this.dom.background.className = 'group';
+  /**
+   * Remove an event listener from an element
+   * @param {Element}    element   An html dom element
+   * @param {string}     action  The name of the event, for example 'mousedown'
+   * @param {function}   listener  The listener function
+   * @param {boolean}    useCapture
+   */
+  G3DremoveEventListener = function(element, action, listener, useCapture) {
+    if (element.removeEventListener) {
+      // non-IE browsers
+      if (useCapture === undefined)
+        useCapture = false;
 
-    this.dom.axis = document.createElement('div');
-    this.dom.axis.className = 'group';
+      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
+        action = 'DOMMouseScroll';  // For Firefox
+      }
 
-    // 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';
-    this.dom.marker.innerHTML = '?';
-    this.dom.background.appendChild(this.dom.marker);
+      element.removeEventListener(action, listener, useCapture);
+    } else {
+      // IE browsers
+      element.detachEvent('on' + action, listener);
+    }
   };
 
   /**
-   * Set the group data for this group
-   * @param {Object} data   Group data, can contain properties content and className
+   * Stop event propagation
    */
-  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) {
-      this.dom.inner.innerHTML = content;
+  G3DstopPropagation = function(event) {
+    if (!event)
+      event = window.event;
+
+    if (event.stopPropagation) {
+      event.stopPropagation();  // non-IE browsers
     }
     else {
-      this.dom.inner.innerHTML = this.groupId;
+      event.cancelBubble = true;  // IE browsers
     }
+  };
 
-    // update title
-    this.dom.label.title = data && data.title || '';
 
-    if (!this.dom.inner.firstChild) {
-      util.addClassName(this.dom.inner, 'hidden');
+  /**
+   * Cancels the event if it is cancelable, without stopping further propagation of the event.
+   */
+  G3DpreventDefault = function (event) {
+    if (!event)
+      event = window.event;
+
+    if (event.preventDefault) {
+      event.preventDefault();  // non-IE browsers
     }
     else {
-      util.removeClassName(this.dom.inner, 'hidden');
-    }
-
-    // update className
-    var className = data && data.className || null;
-    if (className != this.className) {
-      if (this.className) {
-        util.removeClassName(this.dom.label, className);
-        util.removeClassName(this.dom.foreground, className);
-        util.removeClassName(this.dom.background, className);
-        util.removeClassName(this.dom.axis, 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);
+      event.returnValue = false;  // IE browsers
     }
   };
 
   /**
-   * Get the width of the group label
-   * @return {number} width
+   * @constructor Slider
+   *
+   * An html slider control with start/stop/prev/next buttons
+   * @param {Element} container  The element where the slider will be created
+   * @param {Object} options   Available options:
+   *                 {boolean} visible   If true (default) the
+   *                           slider is visible.
    */
-  Group.prototype.getLabelWidth = function() {
-    return this.props.label.width;
-  };
+  function Slider(container, options) {
+    if (container === undefined) {
+      throw 'Error: No container element defined';
+    }
+    this.container = container;
+    this.visible = (options && options.visible != undefined) ? options.visible : true;
 
+    if (this.visible) {
+      this.frame = document.createElement('DIV');
+      //this.frame.style.backgroundColor = '#E5E5E5';
+      this.frame.style.width = '100%';
+      this.frame.style.position = 'relative';
+      this.container.appendChild(this.frame);
 
-  /**
-   * Repaint this group
-   * @param {{start: number, end: number}} range
-   * @param {{item: number, axis: number}} margin
-   * @param {boolean} [restack=false]  Force restacking of all items
-   * @return {boolean} Returns true if the group is resized
-   */
-  Group.prototype.redraw = function(range, margin, restack) {
-    var resized = false;
+      this.frame.prev = document.createElement('INPUT');
+      this.frame.prev.type = 'BUTTON';
+      this.frame.prev.value = 'Prev';
+      this.frame.appendChild(this.frame.prev);
 
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+      this.frame.play = document.createElement('INPUT');
+      this.frame.play.type = 'BUTTON';
+      this.frame.play.value = 'Play';
+      this.frame.appendChild(this.frame.play);
 
-    // 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;
+      this.frame.next = document.createElement('INPUT');
+      this.frame.next.type = 'BUTTON';
+      this.frame.next.value = 'Next';
+      this.frame.appendChild(this.frame.next);
 
-      util.forEach(this.items, function (item) {
-        item.dirty = true;
-        if (item.displayed) item.redraw();
-      });
+      this.frame.bar = document.createElement('INPUT');
+      this.frame.bar.type = 'BUTTON';
+      this.frame.bar.style.position = 'absolute';
+      this.frame.bar.style.border = '1px solid red';
+      this.frame.bar.style.width = '100px';
+      this.frame.bar.style.height = '6px';
+      this.frame.bar.style.borderRadius = '2px';
+      this.frame.bar.style.MozBorderRadius = '2px';
+      this.frame.bar.style.border = '1px solid #7F7F7F';
+      this.frame.bar.style.backgroundColor = '#E5E5E5';
+      this.frame.appendChild(this.frame.bar);
 
-      restack = true;
-    }
+      this.frame.slide = document.createElement('INPUT');
+      this.frame.slide.type = 'BUTTON';
+      this.frame.slide.style.margin = '0px';
+      this.frame.slide.value = ' ';
+      this.frame.slide.style.position = 'relative';
+      this.frame.slide.style.left = '-100px';
+      this.frame.appendChild(this.frame.slide);
 
-    // 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);
+      // create events
+      var me = this;
+      this.frame.slide.onmousedown = function (event) {me._onMouseDown(event);};
+      this.frame.prev.onclick = function (event) {me.prev(event);};
+      this.frame.play.onclick = function (event) {me.togglePlay(event);};
+      this.frame.next.onclick = function (event) {me.next(event);};
     }
 
-    // recalculate the height of the group
-    var height;
-    var visibleItems = this.visibleItems;
-    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 (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 / 2;
-    }
-    else {
-      height = margin.axis + margin.item;
-    }
-    height = Math.max(height, this.props.label.height);
-
-    // 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.onChangeCallback = undefined;
 
-    // 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;
+    this.values = [];
+    this.index = undefined;
 
-    // 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.playTimeout = undefined;
+    this.playInterval = 1000; // milliseconds
+    this.playLoop = true;
+  }
 
-    // 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();
+  /**
+   * Select the previous index
+   */
+  Slider.prototype.prev = function() {
+    var index = this.getIndex();
+    if (index > 0) {
+      index--;
+      this.setIndex(index);
     }
-
-    return resized;
   };
 
   /**
-   * Show this group: attach to the DOM
+   * Select the next index
    */
-  Group.prototype.show = function() {
-    if (!this.dom.label.parentNode) {
-      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+  Slider.prototype.next = function() {
+    var index = this.getIndex();
+    if (index < this.values.length - 1) {
+      index++;
+      this.setIndex(index);
     }
+  };
 
-    if (!this.dom.foreground.parentNode) {
-      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
-    }
+  /**
+   * Select the next index
+   */
+  Slider.prototype.playNext = function() {
+    var start = new Date();
 
-    if (!this.dom.background.parentNode) {
-      this.itemSet.dom.background.appendChild(this.dom.background);
+    var index = this.getIndex();
+    if (index < this.values.length - 1) {
+      index++;
+      this.setIndex(index);
     }
-
-    if (!this.dom.axis.parentNode) {
-      this.itemSet.dom.axis.appendChild(this.dom.axis);
+    else if (this.playLoop) {
+      // jump to the start
+      index = 0;
+      this.setIndex(index);
     }
+
+    var end = new Date();
+    var diff = (end - start);
+
+    // calculate how much time it to to set the index and to execute the callback
+    // function.
+    var interval = Math.max(this.playInterval - diff, 0);
+    // document.title = diff // TODO: cleanup
+
+    var me = this;
+    this.playTimeout = setTimeout(function() {me.playNext();}, interval);
   };
 
   /**
-   * Hide this group: remove from the DOM
+   * Toggle start or stop playing
    */
-  Group.prototype.hide = function() {
-    var label = this.dom.label;
-    if (label.parentNode) {
-      label.parentNode.removeChild(label);
+  Slider.prototype.togglePlay = function() {
+    if (this.playTimeout === undefined) {
+      this.play();
+    } else {
+      this.stop();
     }
+  };
 
-    var foreground = this.dom.foreground;
-    if (foreground.parentNode) {
-      foreground.parentNode.removeChild(foreground);
-    }
+  /**
+   * Start playing
+   */
+  Slider.prototype.play = function() {
+    // Test whether already playing
+    if (this.playTimeout) return;
 
-    var background = this.dom.background;
-    if (background.parentNode) {
-      background.parentNode.removeChild(background);
-    }
+    this.playNext();
 
-    var axis = this.dom.axis;
-    if (axis.parentNode) {
-      axis.parentNode.removeChild(axis);
+    if (this.frame) {
+      this.frame.play.value = 'Stop';
     }
   };
 
   /**
-   * Add an item to the group
-   * @param {Item} item
+   * Stop playing
    */
-  Group.prototype.add = function(item) {
-    this.items[item.id] = item;
-    item.setParent(this);
+  Slider.prototype.stop = function() {
+    clearInterval(this.playTimeout);
+    this.playTimeout = undefined;
 
-    if (item instanceof ItemRange && 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);
+    if (this.frame) {
+      this.frame.play.value = 'Play';
     }
   };
 
   /**
-   * Remove an item from the group
-   * @param {Item} item
+   * Set a callback function which will be triggered when the value of the
+   * slider bar has changed.
    */
-  Group.prototype.remove = function(item) {
-    delete this.items[item.id];
-    item.setParent(this.itemSet);
-
-    // remove from visible items
-    var index = this.visibleItems.indexOf(item);
-    if (index != -1) this.visibleItems.splice(index, 1);
-
-    // TODO: also remove from ordered items?
+  Slider.prototype.setOnChangeCallback = function(callback) {
+    this.onChangeCallback = callback;
   };
 
   /**
-   * Remove an item from the corresponding DataSet
-   * @param {Item} item
+   * Set the interval for playing the list
+   * @param {Number} interval   The interval in milliseconds
    */
-  Group.prototype.removeFromDataSet = function(item) {
-    this.itemSet.removeItem(item.id);
+  Slider.prototype.setPlayInterval = function(interval) {
+    this.playInterval = interval;
   };
 
   /**
-   * Reorder the items
+   * Retrieve the current play interval
+   * @return {Number} interval   The interval in milliseconds
    */
-  Group.prototype.order = function() {
-    var array = util.toArray(this.items);
-    this.orderedItems.byStart = array;
-    this.orderedItems.byEnd = this._constructByEndArray(array);
-
-    stack.orderByStart(this.orderedItems.byStart);
-    stack.orderByEnd(this.orderedItems.byEnd);
+  Slider.prototype.getPlayInterval = function(interval) {
+    return this.playInterval;
   };
 
   /**
-   * Create an array containing all items being a range (having an end date)
-   * @param {Item[]} array
-   * @returns {ItemRange[]}
-   * @private
+   * Set looping on or off
+   * @pararm {boolean} doLoop  If true, the slider will jump to the start when
+   *               the end is passed, and will jump to the end
+   *               when the start is passed.
    */
-  Group.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+  Slider.prototype.setPlayLoop = function(doLoop) {
+    this.playLoop = doLoop;
+  };
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof ItemRange) {
-        endArray.push(array[i]);
-      }
+
+  /**
+   * Execute the onchange callback function
+   */
+  Slider.prototype.onChange = function() {
+    if (this.onChangeCallback !== undefined) {
+      this.onChangeCallback();
     }
-    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.
-   * @private
+   * redraw the slider on the correct place
    */
-  Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
-    var initialPosByStart,
-        newVisibleItems = [],
-        i;
-
-    // first check if the items that were in view previously are still in view.
-    // this handles the case for the ItemRange that is both before and after the current one.
-    if (visibleItems.length > 0) {
-      for (i = 0; i < visibleItems.length; i++) {
-        this._checkIfVisible(visibleItems[i], newVisibleItems, range);
-      }
-    }
+  Slider.prototype.redraw = function() {
+    if (this.frame) {
+      // resize the bar
+      this.frame.bar.style.top = (this.frame.clientHeight/2 -
+        this.frame.bar.offsetHeight/2) + 'px';
+      this.frame.bar.style.width = (this.frame.clientWidth -
+        this.frame.prev.clientWidth -
+        this.frame.play.clientWidth -
+        this.frame.next.clientWidth - 30)  + 'px';
 
-    // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
-    if (newVisibleItems.length == 0) {
-      initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
-    }
-    else {
-      initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
+      // position the slider button
+      var left = this.indexToLeft(this.index);
+      this.frame.slide.style.left = (left) + 'px';
     }
+  };
 
-    // use visible search to find a visible ItemRange (only based on endTime)
-    var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
-
-    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
-    if (initialPosByStart != -1) {
-      for (i = initialPosByStart; i >= 0; i--) {
-        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
-      }
-      for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
-        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
-      }
-    }
 
-    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
-    if (initialPosByEnd != -1) {
-      for (i = initialPosByEnd; i >= 0; i--) {
-        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
-      }
-      for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
-        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
-      }
-    }
+  /**
+   * Set the list with values for the slider
+   * @param {Array} values   A javascript array with values (any type)
+   */
+  Slider.prototype.setValues = function(values) {
+    this.values = values;
 
-    return newVisibleItems;
+    if (this.values.length > 0)
+      this.setIndex(0);
+    else
+      this.index = undefined;
   };
 
-
-
   /**
-   * this function checks if an item is invisible. If it is NOT we make it visible
-   * and add it to the global visible items. If it is, return true.
-   *
-   * @param {Item} item
-   * @param {Item[]} visibleItems
-   * @param {{start:number, end:number}} range
-   * @returns {boolean}
-   * @private
+   * Select a value by its index
+   * @param {Number} index
    */
-  Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
-    if (item.isVisible(range)) {
-      if (!item.displayed) item.show();
-      item.repositionX();
-      if (visibleItems.indexOf(item) == -1) {
-        visibleItems.push(item);
-      }
-      return false;
+  Slider.prototype.setIndex = function(index) {
+    if (index < this.values.length) {
+      this.index = index;
+
+      this.redraw();
+      this.onChange();
     }
     else {
-      if (item.displayed) item.hide();
-      return true;
+      throw 'Error: index out of range';
     }
   };
 
   /**
-   * 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
+   * retrieve the index of the currently selected vaue
+   * @return {Number} index
    */
-  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();
-    }
+  Slider.prototype.getIndex = function() {
+    return this.index;
   };
 
-  module.exports = Group;
 
+  /**
+   * retrieve the currently selected value
+   * @return {*} value
+   */
+  Slider.prototype.get = function() {
+    return this.values[this.index];
+  };
 
-/***/ },
-/* 18 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var Hammer = __webpack_require__(50);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Component = __webpack_require__(12);
-  var Group = __webpack_require__(17);
-  var ItemBox = __webpack_require__(23);
-  var ItemPoint = __webpack_require__(24);
-  var ItemRange = __webpack_require__(25);
+  Slider.prototype._onMouseDown = function(event) {
+    // only react on left mouse button down
+    var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
+    if (!leftButtonDown) return;
 
+    this.startClientX = event.clientX;
+    this.startSlideX = parseFloat(this.frame.slide.style.left);
 
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+    this.frame.style.cursor = 'move';
 
-  /**
-   * 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
-   */
-  function ItemSet(body, options) {
-    this.body = body;
+    // add event listeners to handle moving the contents
+    // we store the function onmousemove and onmouseup in the graph, so we can
+    // remove the eventlisteners lateron in the function mouseUp()
+    var me = this;
+    this.onmousemove = function (event) {me._onMouseMove(event);};
+    this.onmouseup   = function (event) {me._onMouseUp(event);};
+    G3DaddEventListener(document, 'mousemove', this.onmousemove);
+    G3DaddEventListener(document, 'mouseup',   this.onmouseup);
+    G3DpreventDefault(event);
+  };
 
-    this.defaultOptions = {
-      type: null,  // 'box', 'point', 'range'
-      orientation: 'bottom',  // 'top' or 'bottom'
-      align: 'center', // alignment of box items
-      stack: true,
-      groupOrder: null,
 
-      selectable: true,
-      editable: {
-        updateTime: false,
-        updateGroup: false,
-        add: false,
-        remove: false
-      },
+  Slider.prototype.leftToIndex = function (left) {
+    var width = parseFloat(this.frame.bar.style.width) -
+      this.frame.slide.clientWidth - 10;
+    var x = left - 3;
 
-      onAdd: function (item, callback) {
-        callback(item);
-      },
-      onUpdate: function (item, callback) {
-        callback(item);
-      },
-      onMove: function (item, callback) {
-        callback(item);
-      },
-      onRemove: function (item, callback) {
-        callback(item);
-      },
+    var index = Math.round(x / width * (this.values.length-1));
+    if (index < 0) index = 0;
+    if (index > this.values.length-1) index = this.values.length-1;
 
-      margin: {
-        item: 10,
-        axis: 20
-      },
-      padding: 5
-    };
+    return index;
+  };
 
-    // options is shared by this ItemSet and all its items
-    this.options = util.extend({}, this.defaultOptions);
+  Slider.prototype.indexToLeft = function (index) {
+    var width = parseFloat(this.frame.bar.style.width) -
+      this.frame.slide.clientWidth - 10;
 
-    // options for getting items from the DataSet with the correct type
-    this.itemOptions = {
-      type: {start: 'Date', end: 'Date'}
-    };
+    var x = index / (this.values.length-1) * width;
+    var left = x + 3;
 
-    this.conversion = {
-      toScreen: body.util.toScreen,
-      toTime: body.util.toTime
-    };
-    this.dom = {};
-    this.props = {};
-    this.hammer = null;
+    return left;
+  };
 
-    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);
-      }
-    };
 
-    // 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);
-      }
-    };
+  Slider.prototype._onMouseMove = function (event) {
+    var diff = event.clientX - this.startClientX;
+    var x = this.startSlideX + diff;
 
-    this.items = {};      // object with an Item for every data item
-    this.groups = {};     // Group object for every group
-    this.groupIds = [];
+    var index = this.leftToIndex(x);
 
-    this.selection = [];  // list with the ids of all selected nodes
-    this.stackDirty = true; // if true, all items will be restacked on next redraw
+    this.setIndex(index);
 
-    this.touchParams = {}; // stores properties while dragging
-    // create the HTML DOM
+    G3DpreventDefault();
+  };
 
-    this._create();
 
-    this.setOptions(options);
-  }
+  Slider.prototype._onMouseUp = function (event) {
+    this.frame.style.cursor = 'auto';
 
-  ItemSet.prototype = new Component();
+    // remove event listeners
+    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
+    G3DremoveEventListener(document, 'mouseup', this.onmouseup);
 
-  // available item types will be registered here
-  ItemSet.types = {
-    box: ItemBox,
-    range: ItemRange,
-    point: ItemPoint
+    G3DpreventDefault();
   };
 
-  /**
-   * Create the HTML DOM for the ItemSet
-   */
-  ItemSet.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'itemset';
-    frame['timeline-itemset'] = this;
-    this.dom.frame = frame;
-
-    // create background panel
-    var background = document.createElement('div');
-    background.className = 'background';
-    frame.appendChild(background);
-    this.dom.background = background;
-
-    // create foreground panel
-    var foreground = document.createElement('div');
-    foreground.className = 'foreground';
-    frame.appendChild(foreground);
-    this.dom.foreground = foreground;
 
-    // create axis panel
-    var axis = document.createElement('div');
-    axis.className = 'axis';
-    this.dom.axis = axis;
 
-    // create labelset
-    var labelSet = document.createElement('div');
-    labelSet.className = 'labelset';
-    this.dom.labelSet = labelSet;
+  /**--------------------------------------------------------------------------**/
 
-    // create ungrouped Group
-    this._updateUngrouped();
 
-    // 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, {
-      prevent_default: true
-    });
 
-    // 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));
-
-    // single select (or unselect) when tapping an item
-    this.hammer.on('tap',  this._onSelectItem.bind(this));
-
-    // multi select when holding mouse/touch, or on ctrl+click
-    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
-
-    // add item on doubletap
-    this.hammer.on('doubletap', this._onAddItem.bind(this));
-
-    // attach to the DOM
-    this.show();
+  /**
+   * Retrieve the absolute left value of a DOM element
+   * @param {Element} elem  A dom element, for example a div
+   * @return {Number} left    The absolute left position of this element
+   *                in the browser page.
+   */
+  getAbsoluteLeft = function(elem) {
+    var left = 0;
+    while( elem !== null ) {
+      left += elem.offsetLeft;
+      left -= elem.scrollLeft;
+      elem = elem.offsetParent;
+    }
+    return left;
   };
 
   /**
-   * 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', or 'range'. The default
-   *                              Style can be overwritten by individual items.
-   *                           {String} align
-   *                              Alignment for the items, only applicable for
-   *                              ItemBox. 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
-   *                              Margin between items in pixels. 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.
+   * Retrieve the absolute top value of a DOM element
+   * @param {Element} elem  A dom element, for example a div
+   * @return {Number} top     The absolute top position of this element
+   *                in the browser page.
    */
-  ItemSet.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
-      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 = options.margin;
-        }
-        else if (typeof options.margin === 'object'){
-          util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
-        }
-      }
-
-      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);
-        }
-      }
-
-      // callback functions
-      var addCallback = (function (name) {
-        if (name in options) {
-          var fn = options[name];
-          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'].forEach(addCallback);
-
-      // force the itemSet to refresh: options like orientation and margins may be changed
-      this.markDirty();
+  getAbsoluteTop = function(elem) {
+    var top = 0;
+    while( elem !== null ) {
+      top += elem.offsetTop;
+      top -= elem.scrollTop;
+      elem = elem.offsetParent;
     }
+    return top;
   };
 
   /**
-   * Mark the ItemSet dirty so it will refresh everything with next redraw
+   * Get the horizontal mouse position from a mouse event
+   * @param {Event} event
+   * @return {Number} mouse x
    */
-  ItemSet.prototype.markDirty = function() {
-    this.groupIds = [];
-    this.stackDirty = true;
+  getMouseX = function(event) {
+    if ('clientX' in event) return event.clientX;
+    return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
   };
 
   /**
-   * Destroy the ItemSet
+   * Get the vertical mouse position from a mouse event
+   * @param {Event} event
+   * @return {Number} mouse y
    */
-  ItemSet.prototype.destroy = function() {
-    this.hide();
-    this.setItems(null);
-    this.setGroups(null);
+  getMouseY = function(event) {
+    if ('clientY' in event) return event.clientY;
+    return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
+  };
 
-    this.hammer = null;
+  module.exports = Graph3d;
 
-    this.body = null;
-    this.conversion = null;
-  };
 
+/***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
+
+  
   /**
-   * Hide the component from the DOM
+   * Expose `Emitter`.
    */
-  ItemSet.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);
-    }
-  };
+  module.exports = Emitter;
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Initialize a new `Emitter`.
+   *
+   * @api public
    */
-  ItemSet.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);
-    }
 
-    // show labelset containing labels
-    if (!this.dom.labelSet.parentNode) {
-      this.body.dom.left.appendChild(this.dom.labelSet);
-    }
+  function Emitter(obj) {
+    if (obj) return mixin(obj);
   };
 
   /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {Array} [ids] An array with zero or more id's of the items to be
-   *                      selected. If ids is an empty array, all items will be
-   *                      unselected.
+   * Mixin the emitter properties.
+   *
+   * @param {Object} obj
+   * @return {Object}
+   * @api private
    */
-  ItemSet.prototype.setSelection = function(ids) {
-    var i, ii, id, item;
-
-    if (ids) {
-      if (!Array.isArray(ids)) {
-        throw new TypeError('Array expected');
-      }
-
-      // 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();
-        }
-      }
+  function mixin(obj) {
+    for (var key in Emitter.prototype) {
+      obj[key] = Emitter.prototype[key];
     }
-  };
+    return obj;
+  }
 
   /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
+   * Listen on the given `event` with `fn`.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  ItemSet.prototype.getSelection = function() {
-    return this.selection.concat([]);
+
+  Emitter.prototype.on =
+  Emitter.prototype.addEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
+    (this._callbacks[event] = this._callbacks[event] || [])
+      .push(fn);
+    return this;
   };
 
   /**
-   * Deselect a selected item
-   * @param {String | Number} id
-   * @private
+   * Adds an `event` listener that will be invoked a single
+   * time then automatically removed.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  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;
-      }
+
+  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;
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * Remove the given callback for `event` or all
+   * registered callbacks.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  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;
 
-    // update class name
-    frame.className = 'itemset' + (editable ? ' editable' : '');
+  Emitter.prototype.off =
+  Emitter.prototype.removeListener =
+  Emitter.prototype.removeAllListeners =
+  Emitter.prototype.removeEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
 
-    // reorder the groups (if needed)
-    resized = this._orderGroups() || resized;
+    // all
+    if (0 == arguments.length) {
+      this._callbacks = {};
+      return this;
+    }
 
-    // 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;
+    // specific event
+    var callbacks = this._callbacks[event];
+    if (!callbacks) return this;
 
-    // redraw all groups
-    var restack = this.stackDirty,
-        firstGroup = this._firstGroup(),
-        firstMargin = {
-          item: margin.item,
-          axis: margin.axis
-        },
-        nonFirstMargin = {
-          item: margin.item,
-          axis: margin.item / 2
-        },
-        height = 0,
-        minHeight = margin.axis + margin.item;
-    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;
+    // remove all handlers
+    if (1 == arguments.length) {
+      delete this._callbacks[event];
+      return this;
+    }
 
-    // update frame height
-    frame.style.height  = asSize(height);
+    // 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;
+  };
 
-    // calculate actual size and position
-    this.props.top = frame.offsetTop;
-    this.props.left = frame.offsetLeft;
-    this.props.width = frame.offsetWidth;
-    this.props.height = height;
+  /**
+   * Emit `event` with the given args.
+   *
+   * @param {String} event
+   * @param {Mixed} ...
+   * @return {Emitter}
+   */
 
-    // 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 = this.body.domProps.border.left + 'px';
+  Emitter.prototype.emit = function(event){
+    this._callbacks = this._callbacks || {};
+    var args = [].slice.call(arguments, 1)
+      , callbacks = this._callbacks[event];
 
-    // check if this component is resized
-    resized = this._isResized() || resized;
+    if (callbacks) {
+      callbacks = callbacks.slice(0);
+      for (var i = 0, len = callbacks.length; i < len; ++i) {
+        callbacks[i].apply(this, args);
+      }
+    }
 
-    return resized;
+    return this;
   };
 
   /**
-   * Get the first group, aligned with the axis
-   * @return {Group | null} firstGroup
-   * @private
+   * Return array of callbacks for `event`.
+   *
+   * @param {String} event
+   * @return {Array}
+   * @api public
    */
-  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;
+  Emitter.prototype.listeners = function(event){
+    this._callbacks = this._callbacks || {};
+    return this._callbacks[event] || [];
   };
 
   /**
-   * Create or delete the group holding all ungrouped items. This group is used when
-   * there are no groups specified.
-   * @protected
+   * Check if this emitter has `event` handlers.
+   *
+   * @param {String} event
+   * @return {Boolean}
+   * @api public
    */
-  ItemSet.prototype._updateUngrouped = function() {
-    var ungrouped = this.groups[UNGROUPED];
 
-    if (this.groupsData) {
-      // remove the group holding all ungrouped items
-      if (ungrouped) {
-        ungrouped.hide();
-        delete this.groups[UNGROUPED];
-      }
-    }
-    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;
+  Emitter.prototype.hasListeners = function(event){
+    return !! this.listeners(event).length;
+  };
 
-        for (var itemId in this.items) {
-          if (this.items.hasOwnProperty(itemId)) {
-            ungrouped.add(this.items[itemId]);
-          }
-        }
 
-        ungrouped.show();
-      }
-    }
+/***/ },
+/* 13 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * @prototype Point3d
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {Number} [z]
+   */
+  function Point3d(x, y, z) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
+    this.z = z !== undefined ? z : 0;
   };
 
   /**
-   * Get the element for the labelset
-   * @return {HTMLElement} labelSet
+   * Subtract the two provided points, returns a-b
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} a-b
    */
-  ItemSet.prototype.getLabelSet = function() {
-    return this.dom.labelSet;
+  Point3d.subtract = function(a, b) {
+    var sub = new Point3d();
+    sub.x = a.x - b.x;
+    sub.y = a.y - b.y;
+    sub.z = a.z - b.z;
+    return sub;
   };
 
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Add the two provided points, returns a+b
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} a+b
    */
-  ItemSet.prototype.setItems = function(items) {
-    var me = this,
-        ids,
-        oldItemsData = this.itemsData;
+  Point3d.add = function(a, b) {
+    var sum = new Point3d();
+    sum.x = a.x + b.x;
+    sum.y = a.y + b.y;
+    sum.z = a.z + b.z;
+    return sum;
+  };
 
-    // 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');
-    }
+  /**
+   * Calculate the average of two 3d points
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} The average, (a+b)/2
+   */
+  Point3d.avg = function(a, b) {
+    return new Point3d(
+            (a.x + b.x) / 2,
+            (a.y + b.y) / 2,
+            (a.z + b.z) / 2
+    );
+  };
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
+  /**
+   * Calculate the cross product of the two provided points, returns axb
+   * Documentation: http://en.wikipedia.org/wiki/Cross_product
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} cross product axb
+   */
+  Point3d.crossProduct = function(a, b) {
+    var crossproduct = new Point3d();
 
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
-    }
+    crossproduct.x = a.y * b.z - a.z * b.y;
+    crossproduct.y = a.z * b.x - a.x * b.z;
+    crossproduct.z = a.x * b.y - a.y * b.x;
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+    return crossproduct;
+  };
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
 
-      // update the group holding all ungrouped items
-      this._updateUngrouped();
-    }
+  /**
+   * Rtrieve the length of the vector (or the distance from this point to the origin
+   * @return {Number}  length
+   */
+  Point3d.prototype.length = function() {
+    return Math.sqrt(
+            this.x * this.x +
+            this.y * this.y +
+            this.z * this.z
+    );
   };
 
+  module.exports = Point3d;
+
+
+/***/ },
+/* 14 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Get the current items
-   * @returns {vis.DataSet | null}
+   * @prototype Point2d
+   * @param {Number} [x]
+   * @param {Number} [y]
    */
-  ItemSet.prototype.getItems = function() {
-    return this.itemsData;
+  Point2d = function (x, y) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
   };
 
+  module.exports = Point2d;
+
+
+/***/ },
+/* 15 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var DataView = __webpack_require__(10);
+
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * @class Filter
+   *
+   * @param {DataSet} data The google data table
+   * @param {Number}  column             The index of the column to be filtered
+   * @param {Graph} graph           The graph
    */
-  ItemSet.prototype.setGroups = function(groups) {
-    var me = this,
-        ids;
-
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  function Filter (data, column, graph) {
+    this.data = data;
+    this.column = column;
+    this.graph = graph; // the parent graph
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
-    }
+    this.index = undefined;
+    this.value = undefined;
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
-    }
-    else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
-    }
+    // read all distinct values and select the first one
+    this.values = graph.getDistinctValues(data.get(), this.column);
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
+    // sort both numeric and string values correctly
+    this.values.sort(function (a, b) {
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
 
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
+    if (this.values.length > 0) {
+      this.selectValue(0);
     }
 
-    // update the group holding all ungrouped items
-    this._updateUngrouped();
+    // create an array with the filtered datapoints. this will be loaded afterwards
+    this.dataPoints = [];
 
-    // update the order of all items in each group
-    this._order();
+    this.loaded = false;
+    this.onLoadCallback = undefined;
 
-    this.body.emitter.emit('change');
+    if (graph.animationPreload) {
+      this.loaded = false;
+      this.loadInBackground();
+    }
+    else {
+      this.loaded = true;
+    }
   };
 
+
   /**
-   * Get the current groups
-   * @returns {vis.DataSet | null} groups
+   * Return the label
+   * @return {string} label
    */
-  ItemSet.prototype.getGroups = function() {
-    return this.groupsData;
+  Filter.prototype.isLoaded = function() {
+    return this.loaded;
   };
 
+
   /**
-   * Remove an item by its id
-   * @param {String | Number} id
+   * Return the loaded progress
+   * @return {Number} percentage between 0 and 100
    */
-  ItemSet.prototype.removeItem = function(id) {
-    var item = this.itemsData.get(id),
-        dataset = this.itemsData.getDataSet();
+  Filter.prototype.getLoadedProgress = function() {
+    var len = this.values.length;
 
-    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);
-        }
-      });
+    var i = 0;
+    while (this.dataPoints[i]) {
+      i++;
     }
+
+    return Math.round(i / len * 100);
   };
 
+
   /**
-   * Handle updated items
-   * @param {Number[]} ids
-   * @protected
+   * Return the label
+   * @return {string} label
    */
-  ItemSet.prototype._onUpdate = function(ids) {
-    var me = this;
-
-    ids.forEach(function (id) {
-      var itemData = me.itemsData.get(id, me.itemOptions),
-          item = me.items[id],
-          type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
-
-      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);
-        }
-      }
-
-      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 + '"');
-        }
-      }
-    });
-
-    this._order();
-    this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
+  Filter.prototype.getLabel = function() {
+    return this.graph.filterLabel;
   };
 
+
   /**
-   * Handle added items
-   * @param {Number[]} ids
-   * @protected
+   * Return the columnIndex of the filter
+   * @return {Number} columnIndex
    */
-  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
+  Filter.prototype.getColumn = function() {
+    return this.column;
+  };
 
   /**
-   * Handle removed items
-   * @param {Number[]} ids
-   * @protected
+   * Return the currently selected value. Returns undefined if there is no selection
+   * @return {*} value
    */
-  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);
-      }
-    });
+  Filter.prototype.getSelectedValue = function() {
+    if (this.index === undefined)
+      return undefined;
 
-    if (count) {
-      // update order
-      this._order();
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
-    }
+    return this.values[this.index];
   };
 
   /**
-   * Update the order of item in all groups
-   * @private
+   * Retrieve all values of the filter
+   * @return {Array} values
    */
-  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();
-    });
+  Filter.prototype.getValues = function() {
+    return this.values;
   };
 
   /**
-   * Handle updated groups
-   * @param {Number[]} ids
-   * @private
+   * Retrieve one value of the filter
+   * @param {Number}  index
+   * @return {*} value
    */
-  ItemSet.prototype._onUpdateGroups = function(ids) {
-    this._onAddGroups(ids);
+  Filter.prototype.getValue = function(index) {
+    if (index >= this.values.length)
+      throw 'Error: index out of range';
+
+    return this.values[index];
   };
 
+
   /**
-   * Handle changed groups
-   * @param {Number[]} ids
-   * @private
+   * Retrieve the (filtered) dataPoints for the currently selected filter index
+   * @param {Number} [index] (optional)
+   * @return {Array} dataPoints
    */
-  ItemSet.prototype._onAddGroups = function(ids) {
-    var me = this;
+  Filter.prototype._getDataPoints = function(index) {
+    if (index === undefined)
+      index = this.index;
 
-    ids.forEach(function (id) {
-      var groupData = me.groupsData.get(id);
-      var group = me.groups[id];
+    if (index === undefined)
+      return [];
 
-      if (!group) {
-        // check for reserved ids
-        if (id == UNGROUPED) {
-          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
-        }
+    var dataPoints;
+    if (this.dataPoints[index]) {
+      dataPoints = this.dataPoints[index];
+    }
+    else {
+      var f = {};
+      f.column = this.column;
+      f.value = this.values[index];
 
-        var groupOptions = Object.create(me.options);
-        util.extend(groupOptions, {
-          height: null
-        });
+      var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
+      dataPoints = this.graph._getDataPoints(dataView);
 
-        group = new Group(id, groupData, me);
-        me.groups[id] = group;
+      this.dataPoints[index] = dataPoints;
+    }
 
-        // 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);
-            }
-          }
-        }
+    return dataPoints;
+  };
 
-        group.order();
-        group.show();
-      }
-      else {
-        // update group
-        group.setData(groupData);
-      }
-    });
 
-    this.body.emitter.emit('change');
-  };
 
   /**
-   * Handle removed groups
-   * @param {Number[]} ids
-   * @private
+   * Set a callback function when the filter is fully loaded.
    */
-  ItemSet.prototype._onRemoveGroups = function(ids) {
-    var groups = this.groups;
-    ids.forEach(function (id) {
-      var group = groups[id];
+  Filter.prototype.setOnLoadCallback = function(callback) {
+    this.onLoadCallback = callback;
+  };
 
-      if (group) {
-        group.hide();
-        delete groups[id];
-      }
-    });
 
-    this.markDirty();
+  /**
+   * Add a value to the list with available values for this filter
+   * No double entries will be created.
+   * @param {Number} index
+   */
+  Filter.prototype.selectValue = function(index) {
+    if (index >= this.values.length)
+      throw 'Error: index out of range';
 
-    this.body.emitter.emit('change');
+    this.index = index;
+    this.value = this.values[index];
   };
 
   /**
-   * Reorder the groups if needed
-   * @return {boolean} changed
-   * @private
+   * Load all filtered rows in the background one by one
+   * Start this method without providing an index!
    */
-  ItemSet.prototype._orderGroups = function () {
-    if (this.groupsData) {
-      // reorder the groups
-      var groupIds = this.groupsData.getIds({
-        order: this.options.groupOrder
-      });
+  Filter.prototype.loadInBackground = function(index) {
+    if (index === undefined)
+      index = 0;
 
-      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();
-        });
+    var frame = this.graph.frame;
 
-        // show the groups again, attach them to the DOM in correct order
-        groupIds.forEach(function (groupId) {
-          groups[groupId].show();
-        });
+    if (index < this.values.length) {
+      var dataPointsTemp = this._getDataPoints(index);
+      //this.graph.redrawInfo(); // TODO: not neat
 
-        this.groupIds = groupIds;
+      // create a progress box
+      if (frame.progress === undefined) {
+        frame.progress = document.createElement('DIV');
+        frame.progress.style.position = 'absolute';
+        frame.progress.style.color = 'gray';
+        frame.appendChild(frame.progress);
       }
+      var progress = this.getLoadedProgress();
+      frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
+      // TODO: this is no nice solution...
+      frame.progress.style.bottom = 60 + 'px'; // TODO: use height of slider
+      frame.progress.style.left = 10 + 'px';
 
-      return changed;
+      var me = this;
+      setTimeout(function() {me.loadInBackground(index+1);}, 10);
+      this.loaded = false;
     }
     else {
-      return false;
+      this.loaded = true;
+
+      // remove the progress box
+      if (frame.progress !== undefined) {
+        frame.removeChild(frame.progress);
+        frame.progress = undefined;
+      }
+
+      if (this.onLoadCallback)
+        this.onLoadCallback();
     }
   };
 
+  module.exports = Filter;
+
+
+/***/ },
+/* 16 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Add a new item
-   * @param {Item} item
-   * @private
+   * @prototype StepNumber
+   * The class StepNumber is an iterator for Numbers. You provide a start and end
+   * value, and a best step size. StepNumber itself rounds to fixed values and
+   * a finds the step that best fits the provided step.
+   *
+   * If prettyStep is true, the step size is chosen as close as possible to the
+   * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
+   *
+   * Example usage:
+   *   var step = new StepNumber(0, 10, 2.5, true);
+   *   step.start();
+   *   while (!step.end()) {
+   *   alert(step.getCurrent());
+   *   step.next();
+   *   }
+   *
+   * Version: 1.0
+   *
+   * @param {Number} start     The start value
+   * @param {Number} end     The end value
+   * @param {Number} step    Optional. Step size. Must be a positive value.
+   * @param {boolean} prettyStep Optional. If true, the step size is rounded
+   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
    */
-  ItemSet.prototype._addItem = function(item) {
-    this.items[item.id] = item;
+  function StepNumber(start, end, step, prettyStep) {
+    // set default values
+    this._start = 0;
+    this._end = 0;
+    this._step = 1;
+    this.prettyStep = true;
+    this.precision = 5;
 
-    // add to group
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.add(item);
+    this._current = 0;
+    this.setRange(start, end, step, prettyStep);
   };
 
   /**
-   * Update an existing item
-   * @param {Item} item
-   * @param {Object} itemData
-   * @private
+   * Set a new range: start, end and step.
+   *
+   * @param {Number} start     The start value
+   * @param {Number} end     The end value
+   * @param {Number} step    Optional. Step size. Must be a positive value.
+   * @param {boolean} prettyStep Optional. If true, the step size is rounded
+   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
    */
-  ItemSet.prototype._updateItem = function(item, itemData) {
-    var oldGroupId = item.data.group;
+  StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
+    this._start = start ? start : 0;
+    this._end = end ? end : 0;
 
-    item.data = itemData;
-    if (item.displayed) {
-      item.redraw();
-    }
+    this.setStep(step, prettyStep);
+  };
 
-    // update group
-    if (oldGroupId != item.data.group) {
-      var oldGroup = this.groups[oldGroupId];
-      if (oldGroup) oldGroup.remove(item);
+  /**
+   * Set a new step size
+   * @param {Number} step    New step size. Must be a positive value
+   * @param {boolean} prettyStep Optional. If true, the provided step is rounded
+   *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   */
+  StepNumber.prototype.setStep = function(step, prettyStep) {
+    if (step === undefined || step <= 0)
+      return;
 
-      var groupId = this.groupsData ? item.data.group : UNGROUPED;
-      var group = this.groups[groupId];
-      if (group) group.add(item);
-    }
+    if (prettyStep !== undefined)
+      this.prettyStep = prettyStep;
+
+    if (this.prettyStep === true)
+      this._step = StepNumber.calculatePrettyStep(step);
+    else
+      this._step = step;
   };
 
   /**
-   * 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
+   * Calculate a nice step size, closest to the desired step size.
+   * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
+   * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
+   * @param {Number}  step  Desired step size
+   * @return {Number}     Nice step size
    */
-  ItemSet.prototype._removeItem = function(item) {
-    // remove from DOM
-    item.hide();
+  StepNumber.calculatePrettyStep = function (step) {
+    var log10 = function (x) {return Math.log(x) / Math.LN10;};
 
-    // remove from items
-    delete this.items[item.id];
+    // try three steps (multiple of 1, 2, or 5
+    var step1 = Math.pow(10, Math.round(log10(step))),
+        step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
+        step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
 
-    // remove from selection
-    var index = this.selection.indexOf(item.id);
-    if (index != -1) this.selection.splice(index, 1);
+    // choose the best step (closest to minimum step)
+    var prettyStep = step1;
+    if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
+    if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
 
-    // remove from group
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.remove(item);
+    // for safety
+    if (prettyStep <= 0) {
+      prettyStep = 1;
+    }
+
+    return prettyStep;
   };
 
   /**
-   * Create an array containing all items being a range (having an end date)
-   * @param array
-   * @returns {Array}
-   * @private
+   * returns the current value of the step
+   * @return {Number} current value
    */
-  ItemSet.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+  StepNumber.prototype.getCurrent = function () {
+    return parseFloat(this._current.toPrecision(this.precision));
+  };
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof ItemRange) {
-        endArray.push(array[i]);
-      }
-    }
-    return endArray;
+  /**
+   * returns the current step size
+   * @return {Number} current step size
+   */
+  StepNumber.prototype.getStep = function () {
+    return this._step;
   };
 
   /**
-   * 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
+   * Set the current value to the largest value smaller than start, which
+   * is a multiple of the step size
    */
-  ItemSet.prototype._onTouch = function (event) {
-    // store the touched item, used in _onDragStart
-    this.touchParams.item = ItemSet.itemFromTarget(event);
+  StepNumber.prototype.start = function() {
+    this._current = this._start - this._start % this._step;
   };
 
   /**
-   * Start dragging the selected events
-   * @param {Event} event
-   * @private
+   * Do a step, add the step size to the current value
    */
-  ItemSet.prototype._onDragStart = function (event) {
-    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
-      return;
-    }
+  StepNumber.prototype.next = function () {
+    this._current += this._step;
+  };
 
-    var item = this.touchParams.item || null,
-        me = this,
-        props;
+  /**
+   * Returns true whether the end is reached
+   * @return {boolean}  True if the current value has passed the end value.
+   */
+  StepNumber.prototype.end = function () {
+    return (this._current > this._end);
+  };
 
-    if (item && item.selected) {
-      var dragLeftItem = event.target.dragLeftItem;
-      var dragRightItem = event.target.dragRightItem;
+  module.exports = StepNumber;
 
-      if (dragLeftItem) {
-        props = {
-          item: dragLeftItem
-        };
 
-        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;
-        }
+/***/ },
+/* 17 */
+/***/ function(module, exports, __webpack_require__) {
 
-        this.touchParams.itemProps = [props];
-      }
-      else if (dragRightItem) {
-        props = {
-          item: dragRightItem
-        };
+  var Emitter = __webpack_require__(12);
+  var Hammer = __webpack_require__(3);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Range = __webpack_require__(18);
+  var TimeAxis = __webpack_require__(20);
+  var CurrentTime = __webpack_require__(22);
+  var CustomTime = __webpack_require__(23);
+  var ItemSet = __webpack_require__(24);
 
-        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;
-        }
+  /**
+   * Create a timeline visualization
+   * @param {HTMLElement} container
+   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
+   * @param {Object} [options]  See Timeline.setOptions for the available options.
+   * @constructor
+   */
+  function Timeline (container, items, options) {
+    if (!(this instanceof Timeline)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
+    }
 
-        this.touchParams.itemProps = [props];
-      }
-      else {
-        this.touchParams.itemProps = this.getSelection().map(function (id) {
-          var item = me.items[id];
-          var props = {
-            item: item
-          };
+    var me = this;
+    this.defaultOptions = {
+      start: null,
+      end:   null,
 
-          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;
-          }
+      autoResize: true,
 
-          return props;
-        });
-      }
+      orientation: 'bottom',
+      width: null,
+      height: null,
+      maxHeight: null,
+      minHeight: null
+    };
+    this.options = util.deepExtend({}, this.defaultOptions);
 
-      event.stopPropagation();
-    }
-  };
+    // Create the DOM, props, and emitter
+    this._create(container);
 
-  /**
-   * Drag selected items
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onDrag = function (event) {
-    if (this.touchParams.itemProps) {
-      var range = this.body.range,
-          snap = this.body.util.snap || null,
-          deltaX = event.gesture.deltaX,
-          scale = (this.props.width / (range.end - range.start)),
-          offset = deltaX / scale;
+    // all components listed here will be repainted automatically
+    this.components = [];
 
-      // move
-      this.touchParams.itemProps.forEach(function (props) {
-        if ('start' in props) {
-          var start = new Date(props.start + offset);
-          props.item.data.start = snap ? snap(start) : start;
-        }
+    this.body = {
+      dom: this.dom,
+      domProps: this.props,
+      emitter: {
+        on: this.on.bind(this),
+        off: this.off.bind(this),
+        emit: this.emit.bind(this)
+      },
+      util: {
+        snap: null, // will be specified after TimeAxis is created
+        toScreen: me._toScreen.bind(me),
+        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+        toTime: me._toTime.bind(me),
+        toGlobalTime : me._toGlobalTime.bind(me)
+      }
+    };
 
-        if ('end' in props) {
-          var end = new Date(props.end + offset);
-          props.item.data.end = snap ? snap(end) : end;
-        }
+    // range
+    this.range = new Range(this.body);
+    this.components.push(this.range);
+    this.body.range = this.range;
 
-        if ('group' in props) {
-          // drag from one group to another
-          var group = ItemSet.groupFromTarget(event);
-          if (group && group.groupId != props.item.data.group) {
-            var oldGroup = props.item.parent;
-            oldGroup.remove(props.item);
-            oldGroup.order();
-            group.add(props.item);
-            group.order();
+    // time axis
+    this.timeAxis = new TimeAxis(this.body);
+    this.components.push(this.timeAxis);
+    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
 
-            props.item.data.group = group.groupId;
-          }
-        }
-      });
+    // current time bar
+    this.currentTime = new CurrentTime(this.body);
+    this.components.push(this.currentTime);
 
-      // TODO: implement onMoving handler
+    // custom time bar
+    // Note: time bar will be attached in this.setOptions when selected
+    this.customTime = new CustomTime(this.body);
+    this.components.push(this.customTime);
 
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
+    // item set
+    this.itemSet = new ItemSet(this.body);
+    this.components.push(this.itemSet);
 
-      event.stopPropagation();
+    this.itemsData = null;      // DataSet
+    this.groupsData = null;     // DataSet
+
+    // apply options
+    if (options) {
+      this.setOptions(options);
     }
-  };
+
+    // create itemset
+    if (items) {
+      this.setItems(items);
+    }
+    else {
+      this.redraw();
+    }
+  }
+
+  // turn Timeline into an event emitter
+  Emitter(Timeline.prototype);
 
   /**
-   * End of dragging selected items
-   * @param {Event} event
+   * Create the main DOM for the Timeline: a root panel containing left, right,
+   * top, bottom, content, and background panel.
+   * @param {Element} container  The container element where the Timeline will
+   *                             be attached.
    * @private
    */
-  ItemSet.prototype._onDragEnd = function (event) {
-    if (this.touchParams.itemProps) {
-      // prepare a change set for the changed items
-      var changes = [],
-          me = this,
-          dataset = this.itemsData.getDataSet();
+  Timeline.prototype._create = function (container) {
+    this.dom = {};
 
-      this.touchParams.itemProps.forEach(function (props) {
-        var id = props.item.id,
-            itemData = me.itemsData.get(id, me.itemOptions);
+    this.dom.root                 = document.createElement('div');
+    this.dom.background           = document.createElement('div');
+    this.dom.backgroundVertical   = document.createElement('div');
+    this.dom.backgroundHorizontal = document.createElement('div');
+    this.dom.centerContainer      = document.createElement('div');
+    this.dom.leftContainer        = document.createElement('div');
+    this.dom.rightContainer       = document.createElement('div');
+    this.dom.center               = document.createElement('div');
+    this.dom.left                 = document.createElement('div');
+    this.dom.right                = document.createElement('div');
+    this.dom.top                  = document.createElement('div');
+    this.dom.bottom               = document.createElement('div');
+    this.dom.shadowTop            = document.createElement('div');
+    this.dom.shadowBottom         = document.createElement('div');
+    this.dom.shadowTopLeft        = document.createElement('div');
+    this.dom.shadowBottomLeft     = document.createElement('div');
+    this.dom.shadowTopRight       = document.createElement('div');
+    this.dom.shadowBottomRight    = document.createElement('div');
 
-        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.dom.background.className           = 'vispanel background';
+    this.dom.backgroundVertical.className   = 'vispanel background vertical';
+    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
+    this.dom.centerContainer.className      = 'vispanel center';
+    this.dom.leftContainer.className        = 'vispanel left';
+    this.dom.rightContainer.className       = 'vispanel right';
+    this.dom.top.className                  = 'vispanel top';
+    this.dom.bottom.className               = 'vispanel bottom';
+    this.dom.left.className                 = 'content';
+    this.dom.center.className               = 'content';
+    this.dom.right.className                = 'content';
+    this.dom.shadowTop.className            = 'shadow top';
+    this.dom.shadowBottom.className         = 'shadow bottom';
+    this.dom.shadowTopLeft.className        = 'shadow top';
+    this.dom.shadowBottomLeft.className     = 'shadow bottom';
+    this.dom.shadowTopRight.className       = 'shadow top';
+    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-        // 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
-              if ('start' in props) props.item.data.start = props.start;
-              if ('end' in props)   props.item.data.end   = props.end;
+    this.dom.root.appendChild(this.dom.background);
+    this.dom.root.appendChild(this.dom.backgroundVertical);
+    this.dom.root.appendChild(this.dom.backgroundHorizontal);
+    this.dom.root.appendChild(this.dom.centerContainer);
+    this.dom.root.appendChild(this.dom.leftContainer);
+    this.dom.root.appendChild(this.dom.rightContainer);
+    this.dom.root.appendChild(this.dom.top);
+    this.dom.root.appendChild(this.dom.bottom);
 
-              me.stackDirty = true; // force re-stacking of all items next redraw
-              me.body.emitter.emit('change');
-            }
-          });
-        }
-      });
-      this.touchParams.itemProps = null;
+    this.dom.centerContainer.appendChild(this.dom.center);
+    this.dom.leftContainer.appendChild(this.dom.left);
+    this.dom.rightContainer.appendChild(this.dom.right);
 
-      // apply the changes to the data (if there are changes)
-      if (changes.length) {
-        dataset.update(changes);
-      }
+    this.dom.centerContainer.appendChild(this.dom.shadowTop);
+    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
+    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
+    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
+    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
+    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-      event.stopPropagation();
-    }
+    this.on('rangechange', this.redraw.bind(this));
+    this.on('change', this.redraw.bind(this));
+    this.on('touch', this._onTouch.bind(this));
+    this.on('pinch', this._onPinch.bind(this));
+    this.on('dragstart', this._onDragStart.bind(this));
+    this.on('drag', this._onDrag.bind(this));
+
+    // create event listeners for all interesting events, these events will be
+    // emitted via emitter
+    this.hammer = Hammer(this.dom.root, {
+      prevent_default: true
+    });
+    this.listeners = {};
+
+    var me = this;
+    var events = [
+      'touch', 'pinch',
+      'tap', 'doubletap', 'hold',
+      'dragstart', 'drag', 'dragend',
+      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    ];
+    events.forEach(function (event) {
+      var listener = function () {
+        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
+        me.emit.apply(me, args);
+      };
+      me.hammer.on(event, listener);
+      me.listeners[event] = listener;
+    });
+
+    // size properties of each of the panels
+    this.props = {
+      root: {},
+      background: {},
+      centerContainer: {},
+      leftContainer: {},
+      rightContainer: {},
+      center: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {},
+      border: {},
+      scrollTop: 0,
+      scrollTopMin: 0
+    };
+    this.touch = {}; // store state information needed for touch events
+
+    // attach the root panel to the provided container
+    if (!container) throw new Error('No container provided');
+    container.appendChild(this.dom.root);
   };
 
   /**
-   * Handle selecting/deselecting an item when tapping it
-   * @param {Event} event
-   * @private
+   * Destroy the Timeline, clean up all DOM elements and event listeners.
    */
-  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;
-    }
+  Timeline.prototype.destroy = function () {
+    // unbind datasets
+    this.clear();
 
-    var oldSelection = this.getSelection();
+    // remove all event listeners
+    this.off();
 
-    var item = ItemSet.itemFromTarget(event);
-    var selection = item ? [item.id] : [];
-    this.setSelection(selection);
+    // stop checking for changed size
+    this._stopAutoResize();
 
-    var newSelection = this.getSelection();
+    // remove from DOM
+    if (this.dom.root.parentNode) {
+      this.dom.root.parentNode.removeChild(this.dom.root);
+    }
+    this.dom = null;
 
-    // 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: this.getSelection()
-      });
+    // cleanup hammer touch events
+    for (var event in this.listeners) {
+      if (this.listeners.hasOwnProperty(event)) {
+        delete this.listeners[event];
+      }
     }
+    this.listeners = null;
+    this.hammer = null;
 
-    event.stopPropagation();
+    // give all components the opportunity to cleanup
+    this.components.forEach(function (component) {
+      component.destroy();
+    });
+
+    this.body = null;
   };
 
   /**
-   * Handle creation and updates of an item on double tap
-   * @param event
-   * @private
-   */
-  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
+   * Set options. Options will be passed to all components loaded in the Timeline.
+   * @param {Object} [options]
+   *                           {String} orientation
+   *                              Vertical orientation for the Timeline,
+   *                              can be 'bottom' (default) or 'top'.
+   *                           {String | Number} width
+   *                              Width for the timeline, a number in pixels or
+   *                              a css string like '1000px' or '75%'. '100%' by default.
+   *                           {String | Number} height
+   *                              Fixed height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'. If undefined,
+   *                              The Timeline will automatically size such that
+   *                              its contents fit.
+   *                           {String | Number} minHeight
+   *                              Minimum height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {String | Number} maxHeight
+   *                              Maximum height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {Number | Date | String} start
+   *                              Start date for the visible window
+   *                           {Number | Date | String} end
+   *                              End date for the visible window
+   */
+  Timeline.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the known options
+      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
+      util.selectiveExtend(fields, 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.update(itemData);
-        }
-      });
+      // enable/disable autoResize
+      this._initAutoResize();
     }
-    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();
-
-      var group = ItemSet.groupFromTarget(event);
-      if (group) {
-        newItem.group = group.groupId;
-      }
+    // propagate options to all components
+    this.components.forEach(function (component) {
+      component.setOptions(options);
+    });
 
-      // execute async handler to customize (or cancel) adding an item
-      this.options.onAdd(newItem, function (item) {
-        if (item) {
-          me.itemsData.add(newItem);
-          // TODO: need to trigger a redraw?
-        }
-      });
+    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+    if (options && options.order) {
+      throw new Error('Option order is deprecated. There is no replacement for this feature.');
     }
-  };
-
-  /**
-   * Handle selecting/deselecting multiple items when holding an item
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onMultiSelectItem = function (event) {
-    if (!this.options.selectable) return;
-
-    var selection,
-        item = ItemSet.itemFromTarget(event);
-
-    if (item) {
-      // multi select items
-      selection = this.getSelection(); // 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);
-      }
-      this.setSelection(selection);
-
-      this.body.emitter.emit('select', {
-        items: this.getSelection()
-      });
 
-      event.stopPropagation();
-    }
+    // redraw everything
+    this.redraw();
   };
 
   /**
-   * 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
+   * Set a custom time bar
+   * @param {Date} time
    */
-  ItemSet.itemFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-item')) {
-        return target['timeline-item'];
-      }
-      target = target.parentNode;
+  Timeline.prototype.setCustomTime = function (time) {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
     }
 
-    return null;
+    this.customTime.setCustomTime(time);
   };
 
   /**
-   * 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
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  ItemSet.groupFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-group')) {
-        return target['timeline-group'];
-      }
-      target = target.parentNode;
+  Timeline.prototype.getCustomTime = function() {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
     }
 
-    return null;
+    return this.customTime.getCustomTime();
   };
 
   /**
-   * 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
+   * Set items
+   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
    */
-  ItemSet.itemSetFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-itemset')) {
-        return target['timeline-itemset'];
-      }
-      target = target.parentNode;
-    }
+  Timeline.prototype.setItems = function(items) {
+    var initialLoad = (this.itemsData == null);
 
-    return null;
-  };
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!items) {
+      newDataSet = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      newDataSet = items;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(items, {
+        type: {
+          start: 'Date',
+          end: 'Date'
+        }
+      });
+    }
 
-  module.exports = ItemSet;
+    // set items
+    this.itemsData = newDataSet;
+    this.itemSet && this.itemSet.setItems(newDataSet);
 
+    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
+      this.fit();
 
-/***/ },
-/* 19 */
-/***/ function(module, exports, __webpack_require__) {
+      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
+      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Component = __webpack_require__(12);
+      this.setWindow(start, end);
+    }
+  };
 
   /**
-   * Legend for Graph2d
+   * Set groups
+   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
    */
-  function Legend(body, options, side) {
-    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
-      }
+  Timeline.prototype.setGroups = function(groups) {
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!groups) {
+      newDataSet = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      newDataSet = groups;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(groups);
     }
-    this.side = side;
-    this.options = util.extend({},this.defaultOptions);
-
-    this.svgElements = {};
-    this.dom = {};
-    this.groups = {};
-    this.amountOfGroups = 0;
-    this._create();
-
-    this.setOptions(options);
-  }
 
-  Legend.prototype = new Component();
+    this.groupsData = newDataSet;
+    this.itemSet.setGroups(newDataSet);
+  };
 
+  /**
+   * Clear the Timeline. By Default, items, groups and options are cleared.
+   * Example usage:
+   *
+   *     timeline.clear();                // clear items, groups, and options
+   *     timeline.clear({options: true}); // clear options only
+   *
+   * @param {Object} [what]      Optionally specify what to clear. By default:
+   *                             {items: true, groups: true, options: true}
+   */
+  Timeline.prototype.clear = function(what) {
+    // clear items
+    if (!what || what.items) {
+      this.setItems(null);
+    }
 
-  Legend.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
+    // clear groups
+    if (!what || what.groups) {
+      this.setGroups(null);
     }
-    this.amountOfGroups += 1;
-  };
 
-  Legend.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
-  };
+    // clear options of timeline and of each of the components
+    if (!what || what.options) {
+      this.components.forEach(function (component) {
+        component.setOptions(component.defaultOptions);
+      });
 
-  Legend.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
+      this.setOptions(this.defaultOptions); // this will also do a redraw
     }
   };
 
-  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";
+  /**
+   * Set Timeline window such that it fits all items
+   */
+  Timeline.prototype.fit = function() {
+    // apply the data range as range
+    var dataRange = this.getItemRange();
 
-    this.dom.textArea = document.createElement('div');
-    this.dom.textArea.className = 'legendText';
-    this.dom.textArea.style.position = "relative";
-    this.dom.textArea.style.top = "0px";
+    // add 5% space on both sides
+    var start = dataRange.min;
+    var end = dataRange.max;
+    if (start != null && end != null) {
+      var interval = (end.valueOf() - start.valueOf());
+      if (interval <= 0) {
+        // prevent an empty interval
+        interval = 24 * 60 * 60 * 1000; // 1 day
+      }
+      start = new Date(start.valueOf() - interval * 0.05);
+      end = new Date(end.valueOf() + interval * 0.05);
+    }
 
-    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';
+    // skip range set if there is no start and end date
+    if (start === null && end === null) {
+      return;
+    }
 
-    this.dom.frame.appendChild(this.svg);
-    this.dom.frame.appendChild(this.dom.textArea);
+    this.range.setRange(start, end);
   };
 
   /**
-   * Hide the component from the DOM
+   * Get the data range of the item set.
+   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
+   *                                          When no minimum is found, min==null
+   *                                          When no maximum is found, max==null
    */
-  Legend.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+  Timeline.prototype.getItemRange = function() {
+    // calculate min from start filed
+    var dataset = this.itemsData.getDataSet(),
+        min = null,
+        max = null;
+
+    if (dataset) {
+      // calculate the minimum value of the field 'start'
+      var minItem = dataset.min('start');
+      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
+      // Note: we convert first to Date and then to number because else
+      // a conversion from ISODate to Number will fail
+
+      // calculate maximum value of fields 'start' and 'end'
+      var maxStartItem = dataset.max('start');
+      if (maxStartItem) {
+        max = util.convert(maxStartItem.start, 'Date').valueOf();
+      }
+      var maxEndItem = dataset.max('end');
+      if (maxEndItem) {
+        if (max == null) {
+          max = util.convert(maxEndItem.end, 'Date').valueOf();
+        }
+        else {
+          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+        }
+      }
     }
+
+    return {
+      min: (min != null) ? new Date(min) : null,
+      max: (max != null) ? new Date(max) : null
+    };
   };
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {Array} [ids] An array with zero or more id's of the items to be
+   *                      selected. If ids is an empty array, all items will be
+   *                      unselected.
    */
-  Legend.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  Timeline.prototype.setSelection = function(ids) {
+    this.itemSet && this.itemSet.setSelection(ids);
   };
 
-  Legend.prototype.setOptions = function(options) {
-    var fields = ['enabled','orientation','icons','left','right'];
-    util.selectiveDeepExtend(fields, this.options, options);
+  /**
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
+   */
+  Timeline.prototype.getSelection = function() {
+    return this.itemSet && this.itemSet.getSelection() || [];
   };
 
-  Legend.prototype.redraw = function() {
-    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
-      this.hide();
+  /**
+   * Set the visible window. Both parameters are optional, you can change only
+   * start or only end. Syntax:
+   *
+   *     TimeLine.setWindow(start, end)
+   *     TimeLine.setWindow(range)
+   *
+   * Where start and end can be a Date, number, or string, and range is an
+   * object with properties start and end.
+   *
+   * @param {Date | Number | String | Object} [start] Start date of visible window
+   * @param {Date | Number | String} [end]   End date of visible window
+   */
+  Timeline.prototype.setWindow = function(start, end) {
+    if (arguments.length == 1) {
+      var range = arguments[0];
+      this.range.setRange(range.start, range.end);
     }
     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 (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 {
-        this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
-        this.dom.frame.style.top = '';
-      }
-
-      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();
-      }
-
-      var content = '';
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          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';
+      this.range.setRange(start, 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;
-
-      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
-
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-          y += iconHeight + this.options.iconSpacing;
-        }
-      }
-
-      DOMutil.cleanupElements(this.svgElements);
-    }
+  /**
+   * Get the visible window
+   * @return {{start: Date, end: Date}}   Visible range
+   */
+  Timeline.prototype.getWindow = function() {
+    var range = this.range.getRange();
+    return {
+      start: new Date(range.start),
+      end: new Date(range.end)
+    };
   };
 
-  module.exports = Legend;
+  /**
+   * Force a redraw of the Timeline. Can be useful to manually redraw when
+   * option autoResize=false
+   */
+  Timeline.prototype.redraw = function() {
+    var resized = false,
+        options = this.options,
+        props = this.props,
+        dom = this.dom;
 
+    if (!dom) return; // when destroyed
 
-/***/ },
-/* 20 */
-/***/ function(module, exports, __webpack_require__) {
+    // update class names
+    dom.root.className = 'vis timeline root ' + options.orientation;
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Component = __webpack_require__(12);
-  var DataAxis = __webpack_require__(15);
-  var GraphGroup = __webpack_require__(16);
-  var Legend = __webpack_require__(19);
+    // update root width and height options
+    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
+    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
+    dom.root.style.width = util.option.asSize(options.width, '');
 
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+    // calculate border widths
+    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
+    props.border.right  = props.border.left;
+    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.bottom = props.border.top;
+    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
-  /**
-   * 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;
+    // calculate the heights. If any of the side panels is empty, we set the height to
+    // minus the border width, such that the border will be invisible
+    props.center.height = dom.center.offsetHeight;
+    props.left.height   = dom.left.offsetHeight;
+    props.right.height  = dom.right.offsetHeight;
+    props.top.height    = dom.top.clientHeight    || -props.border.top;
+    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
 
-    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,
-        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
-      },
-      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
-        }
-      }
-    };
+    // TODO: compensate borders when any of the panels is empty.
 
-    // 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 = {};
+    // apply auto height
+    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
+    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
+    var autoHeight = props.top.height + contentHeight + props.bottom.height +
+        borderRootHeight + props.border.top + props.border.bottom;
+    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
-    var me = this;
-    this.itemsData = null;    // DataSet
-    this.groupsData = null;   // DataSet
+    // calculate heights of the content panels
+    props.root.height = dom.root.offsetHeight;
+    props.background.height = props.root.height - borderRootHeight;
+    var containerHeight = props.root.height - props.top.height - props.bottom.height -
+        borderRootHeight;
+    props.centerContainer.height  = containerHeight;
+    props.leftContainer.height    = containerHeight;
+    props.rightContainer.height   = props.leftContainer.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 the widths of the panels
+    props.root.width = dom.root.offsetWidth;
+    props.background.width = props.root.width - borderRootWidth;
+    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
+    props.leftContainer.width = props.left.width;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    props.rightContainer.width = props.right.width;
+    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
+    props.center.width          = centerWidth;
+    props.centerContainer.width = centerWidth;
+    props.top.width             = centerWidth;
+    props.bottom.width          = centerWidth;
 
-    // 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);
-      }
-    };
+    // resize the panels
+    dom.background.style.height           = props.background.height + 'px';
+    dom.backgroundVertical.style.height   = props.background.height + 'px';
+    dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
+    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
 
-    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
+    dom.background.style.width            = props.background.width + 'px';
+    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+    dom.centerContainer.style.width       = props.center.width + 'px';
+    dom.top.style.width                   = props.top.width + 'px';
+    dom.bottom.style.width                = props.bottom.width + 'px';
 
-    this.svgElements = {};
-    this.setOptions(options);
-    this.groupsUsingDefaultStyles = [0];
+    // reposition the panels
+    dom.background.style.left           = '0';
+    dom.background.style.top            = '0';
+    dom.backgroundVertical.style.left   = props.left.width + 'px';
+    dom.backgroundVertical.style.top    = '0';
+    dom.backgroundHorizontal.style.left = '0';
+    dom.backgroundHorizontal.style.top  = props.top.height + 'px';
+    dom.centerContainer.style.left      = props.left.width + 'px';
+    dom.centerContainer.style.top       = props.top.height + 'px';
+    dom.leftContainer.style.left        = '0';
+    dom.leftContainer.style.top         = props.top.height + 'px';
+    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+    dom.rightContainer.style.top        = props.top.height + 'px';
+    dom.top.style.left                  = props.left.width + 'px';
+    dom.top.style.top                   = '0';
+    dom.bottom.style.left               = props.left.width + 'px';
+    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
 
-    this.body.emitter.on("rangechange",function() {
-        if (me.lastStart != 0) {
-          var offset = me.body.range.start - me.lastStart;
-          var range = me.body.range.end - me.body.range.start;
-          if (me.width != 0) {
-            var rangePerPixelInv = me.width/range;
-            var xOffset = offset * rangePerPixelInv;
-            me.svg.style.left = (-me.width - xOffset) + "px";
-          }
-        }
-      });
-    this.body.emitter.on("rangechanged", function() {
-      me.lastStart = me.body.range.start;
-      me.svg.style.left = util.option.asSize(-me.width);
-      me._updateGraph.apply(me);
+    // update the scrollTop, feasible range for the offset can be changed
+    // when the height of the Timeline or of the contents of the center changed
+    this._updateScrollTop();
+
+    // reposition the scrollable contents
+    var offset = this.props.scrollTop;
+    if (options.orientation == 'bottom') {
+      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
+          this.props.border.top - this.props.border.bottom, 0);
+    }
+    dom.center.style.left = '0';
+    dom.center.style.top  = offset + 'px';
+    dom.left.style.left   = '0';
+    dom.left.style.top    = offset + 'px';
+    dom.right.style.left  = '0';
+    dom.right.style.top   = offset + 'px';
+
+    // show shadows when vertical scrolling is available
+    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
+    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+    dom.shadowTop.style.visibility          = visibilityTop;
+    dom.shadowBottom.style.visibility       = visibilityBottom;
+    dom.shadowTopLeft.style.visibility      = visibilityTop;
+    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
+    dom.shadowTopRight.style.visibility     = visibilityTop;
+    dom.shadowBottomRight.style.visibility  = visibilityBottom;
+
+    // redraw all components
+    this.components.forEach(function (component) {
+      resized = component.redraw() || resized;
     });
+    if (resized) {
+      // keep repainting until all sizes are settled
+      this.redraw();
+    }
+  };
 
-    // create the HTML DOM
-    this._create();
-    this.body.emitter.emit("change");
-  }
+  // TODO: deprecated since version 1.1.0, remove some day
+  Timeline.prototype.repaint = function () {
+      throw new Error('Function repaint is deprecated. Use redraw instead.');
+  };
+
+  /**
+   * Convert a position on screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toTime = function(x) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return new Date(x / conversion.scale + conversion.offset);
+  };
 
-  LineGraph.prototype = new Component();
 
   /**
-   * Create the HTML DOM for the ItemSet
+   * Convert a position on the global screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
    */
-  LineGraph.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'LineGraph';
-    this.dom.frame = frame;
+  // TODO: move this function to Range
+  Timeline.prototype._toGlobalTime = function(x) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return new Date(x / conversion.scale + conversion.offset);
+  };
 
-    // 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);
+  /**
+   * Convert a datetime (Date object) into a position on the screen
+   * @param {Date}   time A date
+   * @return {int}   x    The position on the screen in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toScreen = function(time) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-    // data axis
-    this.options.dataAxis.orientation = 'left';
-    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
 
-    this.options.dataAxis.orientation = 'right';
-    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
-    delete this.options.dataAxis.orientation;
+  /**
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toGlobalScreen = function(time) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-    // legends
-    this.legendLeft = new Legend(this.body, this.options.legend, 'left');
-    this.legendRight = new Legend(this.body, this.options.legend, 'right');
 
-    this.show();
+  /**
+   * Initialize watching when option autoResize is true
+   * @private
+   */
+  Timeline.prototype._initAutoResize = function () {
+    if (this.options.autoResize == true) {
+      this._startAutoResize();
+    }
+    else {
+      this._stopAutoResize();
+    }
   };
 
   /**
-   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
-   * @param options
+   * Watch for changes in the size of the container. On resize, the Panel will
+   * automatically redraw itself.
+   * @private
    */
-  LineGraph.prototype.setOptions = function(options) {
-    if (options) {
-      var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
-      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');
+  Timeline.prototype._startAutoResize = function () {
+    var me = this;
 
-      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;
-            }
-          }
-        }
-      }
+    this._stopAutoResize();
 
-      if (this.yAxisLeft) {
-        if (options.dataAxis !== undefined) {
-          this.yAxisLeft.setOptions(this.options.dataAxis);
-          this.yAxisRight.setOptions(this.options.dataAxis);
-        }
+    this._onResize = function() {
+      if (me.options.autoResize != true) {
+        // stop watching when the option autoResize is changed to false
+        me._stopAutoResize();
+        return;
       }
 
-      if (this.legendLeft) {
-        if (options.legend !== undefined) {
-          this.legendLeft.setOptions(this.options.legend);
-          this.legendRight.setOptions(this.options.legend);
+      if (me.dom.root) {
+        // check whether the frame is resized
+        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+            (me.dom.root.clientHeight != me.props.lastHeight)) {
+          me.props.lastWidth = me.dom.root.clientWidth;
+          me.props.lastHeight = me.dom.root.clientHeight;
+
+          me.emit('change');
         }
       }
+    };
 
-      if (this.groups.hasOwnProperty(UNGROUPED)) {
-        this.groups[UNGROUPED].setOptions(options);
-      }
-    }
-    if (this.dom.frame) {
-      this._updateGraph();
-    }
+    // add event listener to window resize
+    util.addEventListener(window, 'resize', this._onResize);
+
+    this.watchTimer = setInterval(this._onResize, 1000);
   };
 
   /**
-   * Hide the component from the DOM
+   * Stop watching for a resize of the frame.
+   * @private
    */
-  LineGraph.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+  Timeline.prototype._stopAutoResize = function () {
+    if (this.watchTimer) {
+      clearInterval(this.watchTimer);
+      this.watchTimer = undefined;
     }
+
+    // remove event listener on window.resize
+    util.removeEventListener(window, 'resize', this._onResize);
+    this._onResize = null;
   };
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  Timeline.prototype._onTouch = function (event) {
+    this.touch.allowDragging = true;
   };
 
-
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype.setItems = function(items) {
-    var me = this,
-      ids,
-      oldItemsData = this.itemsData;
+  Timeline.prototype._onPinch = function (event) {
+    this.touch.allowDragging = false;
+  };
 
-    // 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');
-    }
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onDragStart = function (event) {
+    this.touch.initialScrollTop = this.props.scrollTop;
+  };
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
+  /**
+   * Move the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onDrag = function (event) {
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.touch.allowDragging) return;
 
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
-    }
+    var delta = event.gesture.deltaY;
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+    var oldScrollTop = this._getScrollTop();
+    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
+    if (newScrollTop != oldScrollTop) {
+      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
     }
-    this._updateUngrouped();
-    this._updateGraph();
-    this.redraw();
   };
 
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * Apply a scrollTop
+   * @param {Number} scrollTop
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
    */
-  LineGraph.prototype.setGroups = function(groups) {
-    var me = this,
-      ids;
-
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  Timeline.prototype._setScrollTop = function (scrollTop) {
+    this.props.scrollTop = scrollTop;
+    this._updateScrollTop();
+    return this.props.scrollTop;
+  };
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
+  /**
+   * Update the current scrollTop when the height of  the containers has been changed
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
+   */
+  Timeline.prototype._updateScrollTop = function () {
+    // recalculate the scrollTopMin
+    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
+    if (scrollTopMin != this.props.scrollTopMin) {
+      // in case of bottom orientation, change the scrollTop such that the contents
+      // do not move relative to the time axis at the bottom
+      if (this.options.orientation == 'bottom') {
+        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+      }
+      this.props.scrollTopMin = scrollTopMin;
     }
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
-    }
-    else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
-    }
+    // limit the scrollTop to the feasible scroll range
+    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
+    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
+    return this.props.scrollTop;
+  };
 
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
-    }
-    this._onUpdate();
+  /**
+   * Get the current scrollTop
+   * @returns {number} scrollTop
+   * @private
+   */
+  Timeline.prototype._getScrollTop = function () {
+    return this.props.scrollTop;
   };
 
+  module.exports = Timeline;
 
 
-  LineGraph.prototype._onUpdate = function(ids) {
-    this._updateUngrouped();
-    this._updateAllGroupData();
-    this._updateGraph();
-    this.redraw();
-  };
-  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]);
-    }
+/***/ },
+/* 18 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this._updateGraph();
-    this.redraw();
-  };
-  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
+  var util = __webpack_require__(1);
+  var moment = __webpack_require__(4);
+  var Component = __webpack_require__(19);
 
-  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]];
+  /**
+   * @constructor Range
+   * A Range controls a numeric range with a start and end value.
+   * The Range adjusts the range based on mouse events or programmatic changes,
+   * and triggers events when the range is changing or has been changed.
+   * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
+   * @param {Object} [options]    See description at Range.setOptions
+   */
+  function Range(body, options) {
+    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
+    this.start = now.clone().add('days', -3).valueOf(); // Number
+    this.end = now.clone().add('days', 4).valueOf();   // Number
+
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      start: null,
+      end: null,
+      direction: 'horizontal', // 'horizontal' or 'vertical'
+      moveable: true,
+      zoomable: true,
+      min: null,
+      max: null,
+      zoomMin: 10,                                // milliseconds
+      zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000  // milliseconds
+    };
+    this.options = util.extend({}, this.defaultOptions);
+
+    this.props = {
+      touch: {}
+    };
+
+    // drag listeners for dragging
+    this.body.emitter.on('dragstart', this._onDragStart.bind(this));
+    this.body.emitter.on('drag',      this._onDrag.bind(this));
+    this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
+
+    // ignore dragging when holding
+    this.body.emitter.on('hold', this._onHold.bind(this));
+
+    // mouse wheel for zooming
+    this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));
+    this.body.emitter.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
+
+    // pinch to zoom
+    this.body.emitter.on('touch', this._onTouch.bind(this));
+    this.body.emitter.on('pinch', this._onPinch.bind(this));
+
+    this.setOptions(options);
+  }
+
+  Range.prototype = new Component();
+
+  /**
+   * Set options for the range controller
+   * @param {Object} options      Available options:
+   *                              {Number | Date | String} start  Start date for the range
+   *                              {Number | Date | String} end    End date for the range
+   *                              {Number} min    Minimum value for start
+   *                              {Number} max    Maximum value for end
+   *                              {Number} zoomMin    Set a minimum value for
+   *                                                  (end - start).
+   *                              {Number} zoomMax    Set a maximum value for
+   *                                                  (end - start).
+   *                              {Boolean} moveable Enable moving of the range
+   *                                                 by dragging. True by default
+   *                              {Boolean} zoomable Enable zooming of the range
+   *                                                 by pinching/scrolling. True by default
+   */
+  Range.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the options that we know
+      var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
+      util.selectiveExtend(fields, this.options, options);
+
+      if ('start' in options || 'end' in options) {
+        // apply a new range. both start and end are optional
+        this.setRange(options.start, options.end);
       }
     }
-    this._updateUngrouped();
-    this._updateGraph();
-    this.redraw();
   };
 
   /**
-   * update a group object
-   *
-   * @param group
-   * @param groupId
+   * Test whether direction has a valid value
+   * @param {String} direction    'horizontal' or 'vertical'
+   */
+  function validateDirection (direction) {
+    if (direction != 'horizontal' && direction != 'vertical') {
+      throw new TypeError('Unknown direction "' + direction + '". ' +
+          'Choose "horizontal" or "vertical".');
+    }
+  }
+
+  /**
+   * Set a new start and end range
+   * @param {Number} [start]
+   * @param {Number} [end]
+   */
+  Range.prototype.setRange = function(start, end) {
+    var changed = this._applyRange(start, end);
+    if (changed) {
+      var params = {
+        start: new Date(this.start),
+        end: new Date(this.end)
+      };
+      this.body.emitter.emit('rangechange', params);
+      this.body.emitter.emit('rangechanged', params);
+    }
+  };
+
+  /**
+   * Set a new start and end range. This method is the same as setRange, but
+   * does not trigger a range change and range changed event, and it returns
+   * true when the range is changed
+   * @param {Number} [start]
+   * @param {Number} [end]
+   * @return {Boolean} changed
    * @private
    */
-  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]);
-      }
+  Range.prototype._applyRange = function(start, end) {
+    var newStart = (start != null) ? util.convert(start, 'Date').valueOf() : this.start,
+        newEnd   = (end != null)   ? util.convert(end, 'Date').valueOf()   : this.end,
+        max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
+        min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
+        diff;
+
+    // check for valid number
+    if (isNaN(newStart) || newStart === null) {
+      throw new Error('Invalid start "' + start + '"');
     }
-    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]);
+    if (isNaN(newEnd) || newEnd === null) {
+      throw new Error('Invalid end "' + end + '"');
+    }
+
+    // prevent start < end
+    if (newEnd < newStart) {
+      newEnd = newStart;
+    }
+
+    // prevent start < min
+    if (min !== null) {
+      if (newStart < min) {
+        diff = (min - newStart);
+        newStart += diff;
+        newEnd += diff;
+
+        // prevent end > max
+        if (max != null) {
+          if (newEnd > max) {
+            newEnd = max;
+          }
+        }
       }
     }
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-  };
 
-  LineGraph.prototype._updateAllGroupData = function () {
-    if (this.itemsData != null) {
-      // ~450 ms @ 500k
+    // prevent end > max
+    if (max !== null) {
+      if (newEnd > max) {
+        diff = (newEnd - max);
+        newStart -= diff;
+        newEnd -= diff;
 
-      var groupsContent = {};
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupsContent[groupId] = [];
+        // prevent start < min
+        if (min != null) {
+          if (newStart < min) {
+            newStart = min;
+          }
         }
       }
-      for (var itemId in this.itemsData._data) {
-        if (this.itemsData._data.hasOwnProperty(itemId)) {
-          var item = this.itemsData._data[itemId];
-          item.x = util.convert(item.x,"Date");
-          groupsContent[item.group].push(item);
+    }
+
+    // prevent (end-start) < zoomMin
+    if (this.options.zoomMin !== null) {
+      var zoomMin = parseFloat(this.options.zoomMin);
+      if (zoomMin < 0) {
+        zoomMin = 0;
+      }
+      if ((newEnd - newStart) < zoomMin) {
+        if ((this.end - this.start) === zoomMin) {
+          // ignore this action, we are already zoomed to the minimum
+          newStart = this.start;
+          newEnd = this.end;
+        }
+        else {
+          // zoom to the minimum
+          diff = (zoomMin - (newEnd - newStart));
+          newStart -= diff / 2;
+          newEnd += diff / 2;
         }
       }
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].setItems(groupsContent[groupId]);
+    }
+
+    // prevent (end-start) > zoomMax
+    if (this.options.zoomMax !== null) {
+      var zoomMax = parseFloat(this.options.zoomMax);
+      if (zoomMax < 0) {
+        zoomMax = 0;
+      }
+      if ((newEnd - newStart) > zoomMax) {
+        if ((this.end - this.start) === zoomMax) {
+          // ignore this action, we are already zoomed to the maximum
+          newStart = this.start;
+          newEnd = this.end;
+        }
+        else {
+          // zoom to the maximum
+          diff = ((newEnd - newStart) - zoomMax);
+          newStart += diff / 2;
+          newEnd -= diff / 2;
         }
       }
-  //    // ~4500ms @ 500k
-  //    for (var groupId in this.groups) {
-  //      if (this.groups.hasOwnProperty(groupId)) {
-  //        this.groups[groupId].setItems(this.itemsData.get({filter:
-  //            function (item) {
-  //              return (item.group == groupId);
-  //            }, type:{x:"Date"}}
-  //        ));
-  //      }
-  //    }
     }
+
+    var changed = (this.start != newStart || this.end != newEnd);
+
+    this.start = newStart;
+    this.end = newEnd;
+
+    return changed;
   };
 
   /**
-   * 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
+   * Retrieve the current range.
+   * @return {Object} An object with start and end properties
    */
-  LineGraph.prototype._updateUngrouped = function() {
-    if (this.itemsData != null) {
-  //    var t0 = new Date();
-      var group = {id: UNGROUPED, content: this.options.defaultGroup};
-      this._updateGroup(group, UNGROUPED);
-      var ungroupedCounter = 0;
-      if (this.itemsData) {
-        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;
-            }
-          }
-        }
-      }
+  Range.prototype.getRange = function() {
+    return {
+      start: this.start,
+      end: this.end
+    };
+  };
 
-      // much much slower
-  //    var datapoints = this.itemsData.get({
-  //      filter: function (item) {return item.group === undefined;},
-  //      showInternalIds:true
-  //    });
-  //    if (datapoints.length > 0) {
-  //      var updateQuery = [];
-  //      for (var i = 0; i < datapoints.length; i++) {
-  //        updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
-  //      }
-  //      this.itemsData.update(updateQuery, true);
-  //    }
-  //    var t1 = new Date();
-  //    var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
-      if (ungroupedCounter == 0) {
-        delete this.groups[UNGROUPED];
-        this.legendLeft.removeGroup(UNGROUPED);
-        this.legendRight.removeGroup(UNGROUPED);
-        this.yAxisLeft.removeGroup(UNGROUPED);
-        this.yAxisRight.removeGroup(UNGROUPED);
+  /**
+   * Calculate the conversion offset and scale for current range, based on
+   * the provided width
+   * @param {Number} width
+   * @returns {{offset: number, scale: number}} conversion
+   */
+  Range.prototype.conversion = function (width) {
+    return Range.conversion(this.start, this.end, width);
+  };
+
+  /**
+   * Static method to calculate the conversion offset and scale for a range,
+   * based on the provided start, end, and width
+   * @param {Number} start
+   * @param {Number} end
+   * @param {Number} width
+   * @returns {{offset: number, scale: number}} conversion
+   */
+  Range.conversion = function (start, end, width) {
+    if (width != 0 && (end - start != 0)) {
+      return {
+        offset: start,
+        scale: width / (end - start)
       }
-  //    console.log("getting amount ungrouped",new Date() - t1);
-  //    console.log("putting in ungrouped",new Date() - t0);
     }
     else {
-      delete this.groups[UNGROUPED];
-      this.legendLeft.removeGroup(UNGROUPED);
-      this.legendRight.removeGroup(UNGROUPED);
-      this.yAxisLeft.removeGroup(UNGROUPED);
-      this.yAxisRight.removeGroup(UNGROUPED);
+      return {
+        offset: 0,
+        scale: 1
+      };
     }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
   };
 
-
   /**
-   * Redraw the component, mandatory function
-   * @return {boolean} Returns true if the component is resized
+   * Start dragging horizontally or vertically
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype.redraw = function() {
-    var resized = false;
+  Range.prototype._onDragStart = function(event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
 
-    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
-    if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
-      resized = true;
-    }
-    // check if this component is resized
-    resized = this._isResized() || resized;
-    // 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.width != this.lastWidth);
-    this.lastVisibleInterval = visibleInterval;
-    this.lastWidth = this.width;
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
 
-    // calculate actual size and position
-    this.width = this.dom.frame.offsetWidth;
+    this.props.touch.start = this.start;
+    this.props.touch.end = this.end;
 
-    // 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.width);
-      this.svg.style.left = util.option.asSize(-this.width);
-    }
-    if (zoomed == true) {
-      this._updateGraph();
+    if (this.body.dom.root) {
+      this.body.dom.root.style.cursor = 'move';
     }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-
-    return resized;
   };
 
   /**
-   * Update and redraw the graph.
-   *
+   * Perform dragging operation
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype._updateGraph = function () {
-    // reset the svg elements
-    DOMutil.prepareElements(this.svgElements);
-  //        // very slow...
-  //        groupData = group.itemsData.get({filter:
-  //          function (item) {
-  //            return (item.x > minDate && item.x < maxDate);
-  //          }}
-  //        );
+  Range.prototype._onDrag = function (event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
+    var direction = this.options.direction;
+    validateDirection(direction);
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
+    var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
+        interval = (this.props.touch.end - this.props.touch.start),
+        width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
+        diffRange = -delta / width * interval;
+    this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
+    this.body.emitter.emit('rangechange', {
+      start: new Date(this.start),
+      end:   new Date(this.end)
+    });
+  };
 
+  /**
+   * Stop dragging operation
+   * @param {event} event
+   * @private
+   */
+  Range.prototype._onDragEnd = function (event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
 
-    if (this.width != 0 && this.itemsData != null) {
-      var group, groupData, preprocessedGroup, i;
-      var preprocessedGroupData = [];
-      var processedGroupData = [];
-      var groupRanges = [];
-      var changeCalled = false;
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
 
-      // getting group Ids
-      var groupIds = [];
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupIds.push(groupId);
-        }
-      }
+    if (this.body.dom.root) {
+      this.body.dom.root.style.cursor = 'auto';
+    }
 
-      // 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);
+    // fire a rangechanged event
+    this.body.emitter.emit('rangechanged', {
+      start: new Date(this.start),
+      end:   new Date(this.end)
+    });
+  };
 
-      // 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.
-      if (groupIds.length > 0) {
-        for (i = 0; i < groupIds.length; i++) {
-          group = this.groups[groupIds[i]];
-          groupData = [];
-          // optimization for sorted data
-          if (group.options.sort == true) {
-            var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
-
-            for (var j = guess; j < group.itemsData.length; j++) {
-              var item = group.itemsData[j];
-              if (item !== undefined) {
-                if (item.x > maxDate) {
-                 groupData.push(item);
-                 break;
-                }
-                else {
-                  groupData.push(item);
-                }
-              }
-            }
-          }
-          else {
-            for (var j = 0; j < group.itemsData.length; j++) {
-              var item = group.itemsData[j];
-              if (item !== undefined) {
-                if (item.x > minDate && item.x < maxDate) {
-                  groupData.push(item);
-                }
-              }
-            }
-          }
-          // preprocess, split into ranges and data
-          preprocessedGroup = this._preprocessData(groupData, group);
-          groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
-          preprocessedGroupData.push(preprocessedGroup.data);
-        }
+  /**
+   * Event handler for mouse wheel event, used to zoom
+   * Code from http://adomas.org/javascript-mouse-wheel/
+   * @param {Event} event
+   * @private
+   */
+  Range.prototype._onMouseWheel = function(event) {
+    // only allow zooming when configured as zoomable and moveable
+    if (!(this.options.zoomable && this.options.moveable)) return;
 
-        // 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);
-        if (changeCalled == true) {
-          DOMutil.cleanupElements(this.svgElements);
-          this.body.emitter.emit("change");
-          return;
-        }
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta / 120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail / 3;
+    }
 
-        // 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.push(this._convertYvalues(preprocessedGroupData[i],group))
-        }
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+      // perform the zoom action. Delta is normally 1 or -1
 
-        // draw the groups
-        for (i = 0; i < groupIds.length; i++) {
-          group = this.groups[groupIds[i]];
-          if (group.options.style == 'line') {
-            this._drawLineGraph(processedGroupData[i], group);
-          }
-          else {
-            this._drawBarGraph (processedGroupData[i], group);
-          }
-        }
+      // adjust a negative delta such that zooming in with delta 0.1
+      // equals zooming out with a delta -0.1
+      var scale;
+      if (delta < 0) {
+        scale = 1 - (delta / 5);
+      }
+      else {
+        scale = 1 / (1 + (delta / 5)) ;
       }
+
+      // calculate center, the date to zoom around
+      var gesture = util.fakeGesture(this, event),
+          pointer = getPointer(gesture.center, this.body.dom.center),
+          pointerDate = this._pointerToDate(pointer);
+
+      this.zoom(scale, pointerDate);
     }
 
-    // cleanup unused svg elements
-    DOMutil.cleanupElements(this.svgElements);
+    // Prevent default actions caused by mouse wheel
+    // (else the page and timeline both zoom and scroll)
+    event.preventDefault();
   };
 
   /**
-   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
-   * @param {array} groupIds
+   * Start of a touch gesture
    * @private
    */
-  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
-    var changeCalled = false;
-    var yAxisLeftUsed = false;
-    var yAxisRightUsed = false;
-    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
-    var orientation = 'left';
+  Range.prototype._onTouch = function (event) {
+    this.props.touch.start = this.start;
+    this.props.touch.end = this.end;
+    this.props.touch.allowDragging = true;
+    this.props.touch.center = null;
+  };
 
-    // if groups are present
-    if (groupIds.length > 0) {
-      for (var i = 0; i < groupIds.length; i++) {
-        orientation = 'left';
-        var group = this.groups[groupIds[i]];
-        if (group.options.yAxisOrientation == 'right') {
-          orientation = 'right';
-        }
+  /**
+   * On start of a hold gesture
+   * @private
+   */
+  Range.prototype._onHold = function () {
+    this.props.touch.allowDragging = false;
+  };
 
-        minVal = groupRanges[i].min;
-        maxVal = groupRanges[i].max;
+  /**
+   * Handle pinch event
+   * @param {Event} event
+   * @private
+   */
+  Range.prototype._onPinch = function (event) {
+    // only allow zooming when configured as zoomable and moveable
+    if (!(this.options.zoomable && this.options.moveable)) return;
 
-        if (orientation == 'left') {
-          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;
-        }
-      }
-      if (yAxisLeftUsed == true) {
-        this.yAxisLeft.setRange(minLeft, maxLeft);
-      }
-      if (yAxisRightUsed == true) {
-        this.yAxisRight.setRange(minRight, maxRight);
-      }
-    }
+    this.props.touch.allowDragging = false;
 
-    changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
-    changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
+    if (event.gesture.touches.length > 1) {
+      if (!this.props.touch.center) {
+        this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
+      }
 
-    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
-      this.yAxisLeft.drawIcons = true;
-      this.yAxisRight.drawIcons = true;
-    }
-    else {
-      this.yAxisLeft.drawIcons = false;
-      this.yAxisRight.drawIcons = false;
-    }
+      var scale = 1 / event.gesture.scale,
+          initDate = this._pointerToDate(this.props.touch.center);
 
-    this.yAxisRight.master = !yAxisLeftUsed;
+      // calculate new start and end
+      var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
+      var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
 
-    if (this.yAxisRight.master == false) {
-      if (yAxisRightUsed == true) {
-        this.yAxisLeft.lineOffset = this.yAxisRight.width;
-      }
-      changeCalled = this.yAxisLeft.redraw() || changeCalled;
-      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
-      changeCalled = this.yAxisRight.redraw() || changeCalled;
-    }
-    else {
-      changeCalled = this.yAxisRight.redraw() || changeCalled;
+      // apply new range
+      this.setRange(newStart, newEnd);
     }
-    return changeCalled;
   };
 
   /**
-   * 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}
+   * Helper function to calculate the center date for zooming
+   * @param {{x: Number, y: Number}} pointer
+   * @return {number} date
    * @private
-   * @param axis
    */
-  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
-    var changed = false;
-    if (axisUsed == false) {
-      if (axis.dom.frame.parentNode) {
-        axis.hide();
-        changed = true;
-      }
+  Range.prototype._pointerToDate = function (pointer) {
+    var conversion;
+    var direction = this.options.direction;
+
+    validateDirection(direction);
+
+    if (direction == 'horizontal') {
+      var width = this.body.domProps.center.width;
+      conversion = this.conversion(width);
+      return pointer.x / conversion.scale + conversion.offset;
     }
     else {
-      if (!axis.dom.frame.parentNode) {
-        axis.show();
-        changed = true;
-      }
+      var height = this.body.domProps.center.height;
+      conversion = this.conversion(height);
+      return pointer.y / conversion.scale + conversion.offset;
     }
-    return changed;
   };
 
-
   /**
-   * draw a bar graph
-   * @param datapoints
-   * @param group
+   * Get the pointer location relative to the location of the dom element
+   * @param {{pageX: Number, pageY: Number}} touch
+   * @param {Element} element   HTML DOM element
+   * @return {{x: Number, y: Number}} pointer
+   * @private
    */
-  LineGraph.prototype._drawBarGraph = function (dataset, group) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var coreDistance;
-        var minWidth = 0.1 * group.options.barChart.width;
-        var offset = 0;
-        var width = group.options.barChart.width;
-
-        if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
-        else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
+  function getPointer (touch, element) {
+    return {
+      x: touch.pageX - util.getAbsoluteLeft(element),
+      y: touch.pageY - util.getAbsoluteTop(element)
+    };
+  }
 
-        for (var i = 0; i < dataset.length; i++) {
-          // dynammically downscale the width so there is no overlap up to 1/10th the original width
-          if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
-          if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
-          if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
+  /**
+   * Zoom the range the given scale in or out. Start and end date will
+   * be adjusted, and the timeline will be redrawn. You can optionally give a
+   * date around which to zoom.
+   * For example, try scale = 0.9 or 1.1
+   * @param {Number} scale      Scaling factor. Values above 1 will zoom out,
+   *                            values below 1 will zoom in.
+   * @param {Number} [center]   Value representing a date around which will
+   *                            be zoomed.
+   */
+  Range.prototype.zoom = function(scale, center) {
+    // if centerDate is not provided, take it half between start Date and end Date
+    if (center == null) {
+      center = (this.start + this.end) / 2;
+    }
 
-          DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
-        }
+    // calculate new start and end
+    var newStart = center + (this.start - center) * scale;
+    var newEnd = center + (this.end - center) * scale;
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
-        }
-      }
-    }
+    this.setRange(newStart, newEnd);
   };
 
-
   /**
-   * draw a line graph
-   *
-   * @param datapoints
-   * @param group
+   * Move the range with a given delta to the left or right. Start and end
+   * value will be adjusted. For example, try delta = 0.1 or -0.1
+   * @param {Number}  delta     Moving amount. Positive value will move right,
+   *                            negative value will move left
    */
-  LineGraph.prototype._drawLineGraph = function (dataset, group) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var path, d;
-        var svgHeight = Number(this.svg.style.height.replace("px",""));
-        path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
-        path.setAttributeNS(null, "class", group.className);
+  Range.prototype.move = function(delta) {
+    // zoom start Date and end Date relative to the centerDate
+    var diff = (this.end - this.start);
 
-        // construct path from dataset
-        if (group.options.catmullRom.enabled == true) {
-          d = this._catmullRom(dataset, group);
-        }
-        else {
-          d = this._linear(dataset);
-        }
+    // apply new values
+    var newStart = this.start + diff * delta;
+    var newEnd = this.end + diff * delta;
 
-        // append with points for fill and finalize the path
-        if (group.options.shaded.enabled == true) {
-          var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.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");
-          fillPath.setAttributeNS(null, "d", dFill);
-        }
-        // copy properties to path for drawing.
-        path.setAttributeNS(null, "d", "M" + d);
+    // TODO: reckon with min and max range
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          this._drawPoints(dataset, group, this.svgElements, this.svg);
-        }
-      }
-    }
+    this.start = newStart;
+    this.end = newEnd;
   };
 
   /**
-   * draw the data points
-   *
-   * @param dataset
-   * @param JSONcontainer
-   * @param svg
-   * @param group
+   * Move the range to a new center point
+   * @param {Number} moveTo      New center point of the range
    */
-  LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
-    if (offset === undefined) {offset = 0;}
-    for (var i = 0; i < dataset.length; i++) {
-      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
-    }
-  };
-
-
+  Range.prototype.moveTo = function(moveTo) {
+    var center = (this.start + this.end) / 2;
 
-  /**
-   * 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._preprocessData = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var toScreen = this.body.util.toScreen;
+    var diff = center - moveTo;
 
-    var increment = 1;
-    var amountOfPoints = datapoints.length;
+    // calculate new start and end
+    var newStart = this.start - diff;
+    var newEnd = this.end - diff;
 
-    var yMin = datapoints[0].y;
-    var yMax = datapoints[0].y;
+    this.setRange(newStart, newEnd);
+  };
 
-    // 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.
-    if (group.options.sampling == true) {
-      var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
-      var pointsPerPixel = amountOfPoints/xDistance;
-      increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
-    }
+  module.exports = Range;
 
-    for (var i = 0; i < amountOfPoints; i += increment) {
-      xValue = toScreen(datapoints[i].x) + this.width - 1;
-      yValue = datapoints[i].y;
-      extractedData.push({x: xValue, y: yValue});
-      yMin = yMin > yValue ? yValue : yMin;
-      yMax = yMax < yValue ? yValue : yMax;
-    }
 
-    // extractedData.sort(function (a,b) {return a.x - b.x;});
-    return {min: yMin, max: yMax, data: extractedData};
-  };
+/***/ },
+/* 19 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
-   * util function toScreen to get the x coordinate from the timestamp.
-   *
-   * @param datapoints
-   * @param options
-   * @returns {Array}
-   * @private
+   * Prototype for visual components
+   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
+   * @param {Object} [options]
    */
-  LineGraph.prototype._convertYvalues = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var axis = this.yAxisLeft;
-    var svgHeight = Number(this.svg.style.height.replace("px",""));
-
-    if (group.options.yAxisOrientation == 'right') {
-      axis = this.yAxisRight;
-    }
+  function Component (body, options) {
+    this.options = null;
+    this.props = null;
+  }
 
-    for (var i = 0; i < datapoints.length; i++) {
-      xValue = datapoints[i].x;
-      yValue = Math.round(axis.convertValue(datapoints[i].y));
-      extractedData.push({x: xValue, y: yValue});
+  /**
+   * Set options for the component. The new options will be merged into the
+   * current options.
+   * @param {Object} options
+   */
+  Component.prototype.setOptions = function(options) {
+    if (options) {
+      util.extend(this.options, options);
     }
+  };
 
-    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
-
-    // extractedData.sort(function (a,b) {return a.x - b.x;});
-    return extractedData;
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  Component.prototype.redraw = function() {
+    // should be implemented by the component
+    return false;
   };
 
+  /**
+   * Destroy the component. Cleanup DOM and event listeners
+   */
+  Component.prototype.destroy = function() {
+    // should be implemented by the component
+  };
 
   /**
-   * 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
+   * Test whether the component is resized since the last time _isResized() was
+   * called.
+   * @return {Boolean} Returns true if the component is resized
+   * @protected
    */
-  LineGraph.prototype._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++) {
+  Component.prototype._isResized = function() {
+    var resized = (this.props._previousWidth !== this.props.width ||
+        this.props._previousHeight !== this.props.height);
 
-      p0 = (i == 0) ? data[0] : data[i-1];
-      p1 = data[i];
-      p2 = data[i+1];
-      p3 = (i + 2 < length) ? data[i+2] : p2;
+    this.props._previousWidth = this.props.width;
+    this.props._previousHeight = this.props.height;
 
+    return resized;
+  };
 
-      // 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
+  module.exports = Component;
 
-      //    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 + " ";
-    }
+/***/ },
+/* 20 */
+/***/ function(module, exports, __webpack_require__) {
 
-    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
-   * @returns {string}
-   * @private
-   */
-  LineGraph.prototype._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          ]
-
-        // [   0             1            0          0          ]
-        // [   -d2pow2a/N    A/N          d1pow2a/N  0          ]
-        // [   0             d3pow2a/M    B/M        -d2pow2a/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
-   */
-  LineGraph.prototype._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 = LineGraph;
-
-
-/***/ },
-/* 21 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(12);
-  var TimeStep = __webpack_require__(10);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(19);
+  var TimeStep = __webpack_require__(21);
 
   /**
    * A horizontal time axis
@@ -13274,19855 +12497,17774 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 22 */
+/* 21 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Hammer = __webpack_require__(50);
+  var moment = __webpack_require__(4);
 
   /**
-   * @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
+   * @constructor  TimeStep
+   * The class TimeStep is an iterator for dates. You provide a start date and an
+   * end date. The class itself determines the best scale (step size) based on the
+   * provided start Date, end Date, and minimumStep.
+   *
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   *
+   * Alternatively, you can set a scale by hand.
+   * After creation, you can initialize the class by executing first(). Then you
+   * can iterate from the start date to the end date via next(). You can check if
+   * the end date is reached with the function hasNext(). After each step, you can
+   * retrieve the current date via getCurrent().
+   * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
+   * days, to years.
+   *
+   * Version: 1.2
+   *
+   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
+   *                               or new Date(2010, 9, 21, 23, 45, 00)
+   * @param {Date} [end]           The end date
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  function Item (data, conversion, options) {
-    this.id = null;
-    this.parent = null;
-    this.data = data;
-    this.dom = null;
-    this.conversion = conversion || {};
-    this.options = options || {};
+  function TimeStep(start, end, minimumStep) {
+    // variables
+    this.current = new Date();
+    this._start = new Date();
+    this._end = new Date();
 
-    this.selected = false;
-    this.displayed = false;
-    this.dirty = true;
+    this.autoScale  = true;
+    this.scale = TimeStep.SCALE.DAY;
+    this.step = 1;
 
-    this.top = null;
-    this.left = null;
-    this.width = null;
-    this.height = null;
+    // initialize the range
+    this.setRange(start, end, minimumStep);
   }
 
-  /**
-   * Select current item
-   */
-  Item.prototype.select = function() {
-    this.selected = true;
-    if (this.displayed) this.redraw();
+  /// enum scale
+  TimeStep.SCALE = {
+    MILLISECOND: 1,
+    SECOND: 2,
+    MINUTE: 3,
+    HOUR: 4,
+    DAY: 5,
+    WEEKDAY: 6,
+    MONTH: 7,
+    YEAR: 8
   };
 
-  /**
-   * Unselect current item
-   */
-  Item.prototype.unselect = function() {
-    this.selected = false;
-    if (this.displayed) this.redraw();
-  };
 
   /**
-   * Set a parent for the item
-   * @param {ItemSet | Group} parent
+   * Set a new range
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   * @param {Date} [start]      The start date and time.
+   * @param {Date} [end]        The end date and time.
+   * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  Item.prototype.setParent = function(parent) {
-    if (this.displayed) {
-      this.hide();
-      this.parent = parent;
-      if (this.parent) {
-        this.show();
-      }
-    }
-    else {
-      this.parent = parent;
+  TimeStep.prototype.setRange = function(start, end, minimumStep) {
+    if (!(start instanceof Date) || !(end instanceof Date)) {
+      throw  "No legal start or end date in method setRange";
     }
-  };
 
-  /**
-   * 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._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
+    this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
 
-  /**
-   * Show the Item in the DOM (when not already visible)
-   * @return {Boolean} changed
-   */
-  Item.prototype.show = function() {
-    return false;
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep);
+    }
   };
 
   /**
-   * Hide the Item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Set the range iterator to the start date.
    */
-  Item.prototype.hide = function() {
-    return false;
+  TimeStep.prototype.first = function() {
+    this.current = new Date(this._start.valueOf());
+    this.roundToMinor();
   };
 
   /**
-   * Repaint the item
+   * Round the current date to the first minor date value
+   * This must be executed once when the current date is set to start Date
    */
-  Item.prototype.redraw = function() {
-    // should be implemented by the item
-  };
+  TimeStep.prototype.roundToMinor = function() {
+    // round to floor
+    // IMPORTANT: we have no breaks in this switch! (this is no bug)
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.scale) {
+      case TimeStep.SCALE.YEAR:
+        this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
+        this.current.setMonth(0);
+      case TimeStep.SCALE.MONTH:        this.current.setDate(1);
+      case TimeStep.SCALE.DAY:          // intentional fall through
+      case TimeStep.SCALE.WEEKDAY:      this.current.setHours(0);
+      case TimeStep.SCALE.HOUR:         this.current.setMinutes(0);
+      case TimeStep.SCALE.MINUTE:       this.current.setSeconds(0);
+      case TimeStep.SCALE.SECOND:       this.current.setMilliseconds(0);
+      //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
+    }
 
-  /**
-   * Reposition the Item horizontally
-   */
-  Item.prototype.repositionX = function() {
-    // should be implemented by the item
+    if (this.step != 1) {
+      // round down to the first minor value that is a multiple of the current step size
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step);  break;
+        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
+        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
+        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step);  break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
+        default: break;
+      }
+    }
   };
 
   /**
-   * Reposition the Item vertically
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
    */
-  Item.prototype.repositionY = function() {
-    // should be implemented by the item
+  TimeStep.prototype.hasNext = function () {
+    return (this.current.valueOf() <= this._end.valueOf());
   };
 
   /**
-   * Repaint a delete button on the top right of the item when the item is selected
-   * @param {HTMLElement} anchor
-   * @protected
+   * Do the next step
    */
-  Item.prototype._repaintDeleteButton = function (anchor) {
-    if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
-      // create and show button
-      var me = this;
-
-      var deleteButton = document.createElement('div');
-      deleteButton.className = 'delete';
-      deleteButton.title = 'Delete this item';
+  TimeStep.prototype.next = function() {
+    var prev = this.current.valueOf();
 
-      Hammer(deleteButton, {
-        preventDefault: true
-      }).on('tap', function (event) {
-        me.parent.removeFromDataSet(me);
-        event.stopPropagation();
-      });
+    // Two cases, needed to prevent issues with switching daylight savings
+    // (end of March and end of October)
+    if (this.current.getMonth() < 6)   {
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:
 
-      anchor.appendChild(deleteButton);
-      this.dom.deleteButton = deleteButton;
+          this.current = new Date(this.current.valueOf() + this.step); break;
+        case TimeStep.SCALE.SECOND:       this.current = new Date(this.current.valueOf() + this.step * 1000); break;
+        case TimeStep.SCALE.MINUTE:       this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
+        case TimeStep.SCALE.HOUR:
+          this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
+          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
+          var h = this.current.getHours();
+          this.current.setHours(h - (h % this.step));
+          break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
+        default:                      break;
+      }
     }
-    else if (!this.selected && this.dom.deleteButton) {
-      // remove button
-      if (this.dom.deleteButton.parentNode) {
-        this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
+    else {
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  this.current = new Date(this.current.valueOf() + this.step); break;
+        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() + this.step); break;
+        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() + this.step); break;
+        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() + this.step); break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
+        default:                      break;
       }
-      this.dom.deleteButton = null;
     }
-  };
 
-  module.exports = Item;
+    if (this.step != 1) {
+      // round down to the correct major value
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0);  break;
+        case TimeStep.SCALE.SECOND:       if(this.current.getSeconds() < this.step) this.current.setSeconds(0);  break;
+        case TimeStep.SCALE.MINUTE:       if(this.current.getMinutes() < this.step) this.current.setMinutes(0);  break;
+        case TimeStep.SCALE.HOUR:         if(this.current.getHours() < this.step) this.current.setHours(0);  break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
+        case TimeStep.SCALE.MONTH:        if(this.current.getMonth() < this.step) this.current.setMonth(0);  break;
+        case TimeStep.SCALE.YEAR:         break; // nothing to do for year
+        default:                break;
+      }
+    }
 
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current.valueOf() == prev) {
+      this.current = new Date(this._end.valueOf());
+    }
+  };
 
-/***/ },
-/* 23 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var Item = __webpack_require__(22);
+  /**
+   * Get the current datetime
+   * @return {Date}  current The current date
+   */
+  TimeStep.prototype.getCurrent = function() {
+    return this.current;
+  };
 
   /**
-   * @constructor ItemBox
-   * @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 custom scale. Autoscaling will be disabled.
+   * For example setScale(SCALE.MINUTES, 5) will result
+   * in minor steps of 5 minutes, and major steps of an hour.
+   *
+   * @param {TimeStep.SCALE} newScale
+   *                               A scale. Choose from SCALE.MILLISECOND,
+   *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
+   *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
+   *                               SCALE.YEAR.
+   * @param {Number}     newStep   A step size, by default 1. Choose for
+   *                               example 1, 2, 5, or 10.
    */
-  function ItemBox (data, conversion, options) {
-    this.props = {
-      dot: {
-        width: 0,
-        height: 0
-      },
-      line: {
-        width: 0,
-        height: 0
-      }
-    };
+  TimeStep.prototype.setScale = function(newScale, newStep) {
+    this.scale = newScale;
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
-      }
+    if (newStep > 0) {
+      this.step = newStep;
     }
 
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemBox.prototype = new Item (null, null, null);
+    this.autoScale = false;
+  };
 
   /**
-   * 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
+   * Enable or disable autoscaling
+   * @param {boolean} enable  If true, autoascaling is set true
    */
-  ItemBox.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);
+  TimeStep.prototype.setAutoScale = function (enable) {
+    this.autoScale = enable;
   };
 
+
   /**
-   * Repaint the item
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
    */
-  ItemBox.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-      // create main box
-      dom.box = document.createElement('DIV');
+  TimeStep.prototype.setMinimumStep = function(minimumStep) {
+    if (minimumStep == undefined) {
+      return;
+    }
 
-      // contents box (inside the background box). used for making margins
-      dom.content = document.createElement('DIV');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+    var stepYear       = (1000 * 60 * 60 * 24 * 30 * 12);
+    var stepMonth      = (1000 * 60 * 60 * 24 * 30);
+    var stepDay        = (1000 * 60 * 60 * 24);
+    var stepHour       = (1000 * 60 * 60);
+    var stepMinute     = (1000 * 60);
+    var stepSecond     = (1000);
+    var stepMillisecond= (1);
 
-      // line to axis
-      dom.line = document.createElement('DIV');
-      dom.line.className = 'line';
+    // find the smallest step that is larger than the provided minimumStep
+    if (stepYear*1000 > minimumStep)        {this.scale = TimeStep.SCALE.YEAR;        this.step = 1000;}
+    if (stepYear*500 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 500;}
+    if (stepYear*100 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 100;}
+    if (stepYear*50 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 50;}
+    if (stepYear*10 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 10;}
+    if (stepYear*5 > minimumStep)           {this.scale = TimeStep.SCALE.YEAR;        this.step = 5;}
+    if (stepYear > minimumStep)             {this.scale = TimeStep.SCALE.YEAR;        this.step = 1;}
+    if (stepMonth*3 > minimumStep)          {this.scale = TimeStep.SCALE.MONTH;       this.step = 3;}
+    if (stepMonth > minimumStep)            {this.scale = TimeStep.SCALE.MONTH;       this.step = 1;}
+    if (stepDay*5 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 5;}
+    if (stepDay*2 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 2;}
+    if (stepDay > minimumStep)              {this.scale = TimeStep.SCALE.DAY;         this.step = 1;}
+    if (stepDay/2 > minimumStep)            {this.scale = TimeStep.SCALE.WEEKDAY;     this.step = 1;}
+    if (stepHour*4 > minimumStep)           {this.scale = TimeStep.SCALE.HOUR;        this.step = 4;}
+    if (stepHour > minimumStep)             {this.scale = TimeStep.SCALE.HOUR;        this.step = 1;}
+    if (stepMinute*15 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 15;}
+    if (stepMinute*10 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 10;}
+    if (stepMinute*5 > minimumStep)         {this.scale = TimeStep.SCALE.MINUTE;      this.step = 5;}
+    if (stepMinute > minimumStep)           {this.scale = TimeStep.SCALE.MINUTE;      this.step = 1;}
+    if (stepSecond*15 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 15;}
+    if (stepSecond*10 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 10;}
+    if (stepSecond*5 > minimumStep)         {this.scale = TimeStep.SCALE.SECOND;      this.step = 5;}
+    if (stepSecond > minimumStep)           {this.scale = TimeStep.SCALE.SECOND;      this.step = 1;}
+    if (stepMillisecond*200 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
+    if (stepMillisecond*100 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
+    if (stepMillisecond*50 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
+    if (stepMillisecond*10 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
+    if (stepMillisecond*5 > minimumStep)    {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
+    if (stepMillisecond > minimumStep)      {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
+  };
 
-      // dot on axis
-      dom.dot = document.createElement('DIV');
-      dom.dot.className = 'dot';
+  /**
+   * 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
+   */
+  TimeStep.prototype.snap = function(date) {
+    var clone = new Date(date.valueOf());
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
+    if (this.scale == TimeStep.SCALE.YEAR) {
+      var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
+      clone.setFullYear(Math.round(year / this.step) * this.step);
+      clone.setMonth(0);
+      clone.setDate(0);
+      clone.setHours(0);
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(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 time axis: 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 time axis: 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 time axis: parent has no axis container element');
-      axis.appendChild(dom.dot);
-    }
-    this.displayed = true;
-
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
+    else if (this.scale == TimeStep.SCALE.MONTH) {
+      if (clone.getDate() > 15) {
+        clone.setDate(1);
+        clone.setMonth(clone.getMonth() + 1);
+        // important: first set Date to 1, after that change the month.
       }
       else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        clone.setDate(1);
       }
 
-      this.dirty = true;
+      clone.setHours(0);
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    // update title
-    if (this.data.title != this.title) {
-      dom.box.title = this.data.title;
-      this.title = this.data.title;
+    else if (this.scale == TimeStep.SCALE.DAY) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 5:
+        case 2:
+          clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
+        default:
+          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+      }
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = 'item box' + className;
-      dom.line.className = 'item line' + className;
-      dom.dot.className  = 'item dot' + className;
-
-      this.dirty = true;
+    else if (this.scale == TimeStep.SCALE.WEEKDAY) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 5:
+        case 2:
+          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+        default:
+          clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
+      }
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    // recalculate size
-    if (this.dirty) {
-      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;
+    else if (this.scale == TimeStep.SCALE.HOUR) {
+      switch (this.step) {
+        case 4:
+          clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
+        default:
+          clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
+      }
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
+    } else if (this.scale == TimeStep.SCALE.MINUTE) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 15:
+        case 10:
+          clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
+          clone.setSeconds(0);
+          break;
+        case 5:
+          clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
+        default:
+          clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
+      }
+      clone.setMilliseconds(0);
     }
-
-    this._repaintDeleteButton(dom.box);
-  };
-
-  /**
-   * Show the item in the DOM (when not already displayed). The items DOM will
-   * be created when needed.
-   */
-  ItemBox.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+    else if (this.scale == TimeStep.SCALE.SECOND) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 15:
+        case 10:
+          clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
+          clone.setMilliseconds(0);
+          break;
+        case 5:
+          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
+        default:
+          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
+      }
+    }
+    else if (this.scale == TimeStep.SCALE.MILLISECOND) {
+      var step = this.step > 5 ? this.step / 2 : 1;
+      clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
     }
+    
+    return clone;
   };
 
   /**
-   * Hide the item from the DOM (when visible)
+   * Check if the current value is a major value (for example when the step
+   * is DAY, a major value is each first day of the MONTH)
+   * @return {boolean} true if current date is major, else false.
    */
-  ItemBox.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.top = null;
-      this.left = null;
-
-      this.displayed = false;
+  TimeStep.prototype.isMajor = function() {
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:
+        return (this.current.getMilliseconds() == 0);
+      case TimeStep.SCALE.SECOND:
+        return (this.current.getSeconds() == 0);
+      case TimeStep.SCALE.MINUTE:
+        return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
+      // Note: this is no bug. Major label is equal for both minute and hour scale
+      case TimeStep.SCALE.HOUR:
+        return (this.current.getHours() == 0);
+      case TimeStep.SCALE.WEEKDAY: // intentional fall through
+      case TimeStep.SCALE.DAY:
+        return (this.current.getDate() == 1);
+      case TimeStep.SCALE.MONTH:
+        return (this.current.getMonth() == 0);
+      case TimeStep.SCALE.YEAR:
+        return false;
+      default:
+        return false;
     }
   };
 
+
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Returns formatted text for the minor axislabel, depending on the current
+   * date and the scale. For example when scale is MINUTE, the current time is
+   * formatted as "hh:mm".
+   * @param {Date} [date] custom date. if not provided, current date is taken
    */
-  ItemBox.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start),
-        align = this.options.align,
-        left,
-        box = this.dom.box,
-        line = this.dom.line,
-        dot = this.dom.dot;
-
-    // calculate left position of the box
-    if (align == 'right') {
-      this.left = start - this.width;
-    }
-    else if (align == 'left') {
-      this.left = start;
-    }
-    else {
-      // default or 'center'
-      this.left = start - this.width / 2;
+  TimeStep.prototype.getLabelMinor = function(date) {
+    if (date == undefined) {
+      date = this.current;
     }
 
-    // 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';
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:  return moment(date).format('SSS');
+      case TimeStep.SCALE.SECOND:       return moment(date).format('s');
+      case TimeStep.SCALE.MINUTE:       return moment(date).format('HH:mm');
+      case TimeStep.SCALE.HOUR:         return moment(date).format('HH:mm');
+      case TimeStep.SCALE.WEEKDAY:      return moment(date).format('ddd D');
+      case TimeStep.SCALE.DAY:          return moment(date).format('D');
+      case TimeStep.SCALE.MONTH:        return moment(date).format('MMM');
+      case TimeStep.SCALE.YEAR:         return moment(date).format('YYYY');
+      default:                          return '';
+    }
   };
 
+
   /**
-   * Reposition the item vertically
-   * @Override
+   * Returns formatted text for the major axis label, depending on the current
+   * date and the scale. For example when scale is MINUTE, the major scale is
+   * hours, and the hour will be formatted as "hh".
+   * @param {Date} [date] custom date. if not provided, current date is taken
    */
-  ItemBox.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box,
-        line = this.dom.line,
-        dot = this.dom.dot;
-
-    if (orientation == 'top') {
-      box.style.top     = (this.top || 0) + 'px';
-
-      line.style.top    = '0';
-      line.style.height = (this.parent.top + this.top + 1) + 'px';
-      line.style.bottom = '';
+  TimeStep.prototype.getLabelMajor = function(date) {
+    if (date == undefined) {
+      date = this.current;
     }
-    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';
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
+      case TimeStep.SCALE.SECOND:     return moment(date).format('D MMMM HH:mm');
+      case TimeStep.SCALE.MINUTE:
+      case TimeStep.SCALE.HOUR:       return moment(date).format('ddd D MMMM');
+      case TimeStep.SCALE.WEEKDAY:
+      case TimeStep.SCALE.DAY:        return moment(date).format('MMMM YYYY');
+      case TimeStep.SCALE.MONTH:      return moment(date).format('YYYY');
+      case TimeStep.SCALE.YEAR:       return '';
+      default:                        return '';
     }
-
-    dot.style.top = (-this.props.dot.height / 2) + 'px';
   };
 
-  module.exports = ItemBox;
+  module.exports = TimeStep;
 
 
 /***/ },
-/* 24 */
+/* 22 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Item = __webpack_require__(22);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(19);
 
   /**
-   * @constructor ItemPoint
-   * @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 current time bar
+   * @param {{range: Range, dom: Object, domProps: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCurrentTime]
+   * @constructor CurrentTime
+   * @extends Component
    */
-  function ItemPoint (data, conversion, options) {
-    this.props = {
-      dot: {
-        top: 0,
-        width: 0,
-        height: 0
-      },
-      content: {
-        height: 0,
-        marginLeft: 0
-      }
+  function CurrentTime (body, options) {
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      showCurrentTime: true
     };
+    this.options = util.extend({}, this.defaultOptions);
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
-      }
-    }
+    this._create();
 
-    Item.call(this, data, conversion, options);
+    this.setOptions(options);
   }
 
-  ItemPoint.prototype = new Item (null, null, null);
+  CurrentTime.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
+   * Create the HTML DOM for the current time bar
+   * @private
    */
-  ItemPoint.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);
+  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;
   };
 
   /**
-   * Repaint the item
+   * Destroy the CurrentTime bar
    */
-  ItemPoint.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);
+  CurrentTime.prototype.destroy = function () {
+    this.options.showCurrentTime = false;
+    this.redraw(); // will remove the bar from the DOM and stop refreshing
 
-      // dot at start
-      dom.dot = document.createElement('div');
-      dom.point.appendChild(dom.dot);
+    this.body = null;
+  };
 
-      // attach this item as attribute
-      dom.point['timeline-item'] = this;
+  /**
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCurrentTime]
+   */
+  CurrentTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCurrentTime'], this.options, options);
     }
+  };
 
-    // 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 time axis: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.point);
-    }
-    this.displayed = true;
+  /**
+   * 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);
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        this.start();
       }
 
-      this.dirty = true;
-    }
+      var now = new Date();
+      var x = this.body.util.toScreen(now);
 
-    // update title
-    if (this.data.title != this.title) {
-      dom.point.title = this.data.title;
-      this.title = this.data.title;
+      this.bar.style.left = x + 'px';
+      this.bar.title = 'Current time: ' + now;
+    }
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
+      this.stop();
     }
 
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.point.className  = 'item point' + className;
-      dom.dot.className  = 'item dot' + className;
+    return false;
+  };
 
-      this.dirty = true;
-    }
+  /**
+   * Start auto refreshing the current time bar
+   */
+  CurrentTime.prototype.start = function() {
+    var me = this;
 
-    // recalculate size
-    if (this.dirty) {
-      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;
+    function update () {
+      me.stop();
 
-      // resize contents
-      dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
-      //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
+      // 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;
 
-      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
-      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+      me.redraw();
 
-      this.dirty = false;
+      // start a timer to adjust for the new time
+      me.currentTimeTimer = setTimeout(update, interval);
     }
 
-    this._repaintDeleteButton(dom.point);
+    update();
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Stop auto refreshing the current time bar
    */
-  ItemPoint.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  CurrentTime.prototype.stop = function() {
+    if (this.currentTimeTimer !== undefined) {
+      clearTimeout(this.currentTimeTimer);
+      delete this.currentTimeTimer;
     }
   };
 
-  /**
-   * Hide the item from the DOM (when visible)
-   */
-  ItemPoint.prototype.hide = function() {
-    if (this.displayed) {
-      if (this.dom.point.parentNode) {
-        this.dom.point.parentNode.removeChild(this.dom.point);
-      }
+  module.exports = CurrentTime;
 
-      this.top = null;
-      this.left = null;
 
-      this.displayed = false;
-    }
-  };
+/***/ },
+/* 23 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(3);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(19);
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * A custom time bar
+   * @param {{range: Range, dom: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCustomTime]
+   * @constructor CustomTime
+   * @extends Component
    */
-  ItemPoint.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start);
 
-    this.left = start - this.props.dot.width;
+  function CustomTime (body, options) {
+    this.body = body;
 
-    // reposition point
-    this.dom.point.style.left = this.left + 'px';
-  };
-
-  /**
-   * Reposition the item vertically
-   * @Override
-   */
-  ItemPoint.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        point = this.dom.point;
-
-    if (orientation == 'top') {
-      point.style.top = this.top + 'px';
-    }
-    else {
-      point.style.top = (this.parent.height - this.top - this.height) + 'px';
-    }
-  };
+    // default options
+    this.defaultOptions = {
+      showCustomTime: false
+    };
+    this.options = util.extend({}, this.defaultOptions);
 
-  module.exports = ItemPoint;
+    this.customTime = new Date();
+    this.eventParams = {}; // stores state parameters while dragging the bar
 
+    // create the DOM
+    this._create();
 
-/***/ },
-/* 25 */
-/***/ function(module, exports, __webpack_require__) {
+    this.setOptions(options);
+  }
 
-  var Hammer = __webpack_require__(50);
-  var Item = __webpack_require__(22);
+  CustomTime.prototype = new Component();
 
   /**
-   * @constructor ItemRange
-   * @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
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCustomTime]
    */
-  function ItemRange (data, conversion, options) {
-    this.props = {
-      content: {
-        width: 0
-      }
-    };
-    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);
-      }
+  CustomTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCustomTime'], this.options, options);
     }
-
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemRange.prototype = new Item (null, null, null);
-
-  ItemRange.prototype.baseClassName = 'item range';
+  };
 
   /**
-   * 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
+   * Create the DOM for the custom time
+   * @private
    */
-  ItemRange.prototype.isVisible = function(range) {
-    // determine visibility
-    return (this.data.start < range.end) && (this.data.end > range.start);
+  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;
+
+    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);
+
+    // 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));
   };
 
   /**
-   * Repaint the item
+   * Destroy the CustomTime bar
    */
-  ItemRange.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-        // background box
-      dom.box = document.createElement('div');
-      // className is updated in redraw()
-
-      // contents box
-      dom.content = document.createElement('div');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+  CustomTime.prototype.destroy = function () {
+    this.options.showCustomTime = false;
+    this.redraw(); // will remove the bar from the DOM
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
-    }
+    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 foreground = this.parent.dom.foreground;
-      if (!foreground) {
-        throw new Error('Cannot redraw time axis: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.box);
-    }
-    this.displayed = true;
+    this.body = null;
+  };
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+  /**
+   * 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);
       }
 
-      this.dirty = true;
-    }
-
-    // update title
-    if (this.data.title != this.title) {
-      dom.box.title = this.data.title;
-      this.title = this.data.title;
-    }
-
-    // update class
-    var className = (this.data.className ? (' ' + this.data.className) : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = this.baseClassName + className;
+      var x = this.body.util.toScreen(this.customTime);
 
-      this.dirty = true;
+      this.bar.style.left = x + 'px';
+      this.bar.title = 'Time: ' + this.customTime;
     }
-
-    // recalculate size
-    if (this.dirty) {
-      // determine from css whether this box has overflow
-      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
-
-      this.props.content.width = this.dom.content.offsetWidth;
-      this.height = this.dom.box.offsetHeight;
-
-      this.dirty = false;
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
     }
 
-    this._repaintDeleteButton(dom.box);
-    this._repaintDragLeft();
-    this._repaintDragRight();
+    return false;
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Set custom time.
+   * @param {Date} time
    */
-  ItemRange.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
-    }
+  CustomTime.prototype.setCustomTime = function(time) {
+    this.customTime = new Date(time.valueOf());
+    this.redraw();
   };
 
   /**
-   * Hide the item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  ItemRange.prototype.hide = function() {
-    if (this.displayed) {
-      var box = this.dom.box;
-
-      if (box.parentNode) {
-        box.parentNode.removeChild(box);
-      }
-
-      this.top = null;
-      this.left = null;
-
-      this.displayed = false;
-    }
+  CustomTime.prototype.getCustomTime = function() {
+    return new Date(this.customTime.valueOf());
   };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Start moving horizontally
+   * @param {Event} event
+   * @private
    */
-  // TODO: delete the old function
-  ItemRange.prototype.repositionX = function() {
-    var props = this.props,
-        parentWidth = this.parent.width,
-        start = this.conversion.toScreen(this.data.start),
-        end = this.conversion.toScreen(this.data.end),
-        padding = this.options.padding,
-        contentLeft;
-
-    // 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);
-
-    if (this.overflow) {
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      contentLeft = Math.max(-start, 0);
-
-      this.left = start;
-      this.width = boxWidth + this.props.content.width;
-      // Note: The calculation of width is an optimistic calculation, giving
-      //       a width which will not change when moving the Timeline
-      //       So no restacking needed, which is nicer for the eye;
-    }
-    else { // no overflow
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      if (start < 0) {
-        contentLeft = Math.min(-start,
-            (end - start - props.content.width - 2 * padding));
-        // TODO: remove the need for options.padding. it's terrible.
-      }
-      else {
-        contentLeft = 0;
-      }
-
-      this.left = start;
-      this.width = boxWidth;
-    }
+  CustomTime.prototype._onDragStart = function(event) {
+    this.eventParams.dragging = true;
+    this.eventParams.customTime = this.customTime;
 
-    this.dom.box.style.left = this.left + 'px';
-    this.dom.box.style.width = boxWidth + 'px';
-    this.dom.content.style.left = contentLeft + 'px';
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /**
-   * Reposition the item vertically
-   * @Override
+   * Perform moving operating.
+   * @param {Event} event
+   * @private
    */
-  ItemRange.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box;
+  CustomTime.prototype._onDrag = function (event) {
+    if (!this.eventParams.dragging) return;
 
-    if (orientation == 'top') {
-      box.style.top = this.top + 'px';
-    }
-    else {
-      box.style.top = (this.parent.height - this.top - this.height) + 'px';
-    }
-  };
+    var deltaX = event.gesture.deltaX,
+        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
+        time = this.body.util.toTime(x);
 
-  /**
-   * Repaint a drag area on the left side of the range when the range is selected
-   * @protected
-   */
-  ItemRange.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;
+    this.setCustomTime(time);
 
-      // TODO: this should be redundant?
-      Hammer(dragLeft, {
-        preventDefault: true
-      }).on('drag', function () {
-            //console.log('drag left')
-          });
+    // fire a timechange event
+    this.body.emitter.emit('timechange', {
+      time: new Date(this.customTime.valueOf())
+    });
 
-      this.dom.box.appendChild(dragLeft);
-      this.dom.dragLeft = dragLeft;
-    }
-    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;
-    }
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /**
-   * Repaint a drag area on the right side of the range when the range is selected
-   * @protected
+   * Stop moving operating.
+   * @param {event} event
+   * @private
    */
-  ItemRange.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;
+  CustomTime.prototype._onDragEnd = function (event) {
+    if (!this.eventParams.dragging) return;
 
-      // TODO: this should be redundant?
-      Hammer(dragRight, {
-        preventDefault: true
-      }).on('drag', function () {
-        //console.log('drag right')
-      });
+    // fire a timechanged event
+    this.body.emitter.emit('timechanged', {
+      time: new Date(this.customTime.valueOf())
+    });
 
-      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;
-    }
+    event.stopPropagation();
+    event.preventDefault();
   };
 
-  module.exports = ItemRange;
+  module.exports = CustomTime;
 
 
 /***/ },
-/* 26 */
+/* 24 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Emitter = __webpack_require__(41);
-  var Hammer = __webpack_require__(50);
-  var mousetrap = __webpack_require__(48);
+  var Hammer = __webpack_require__(3);
   var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var dotparser = __webpack_require__(32);
-  var Groups = __webpack_require__(28);
-  var Images = __webpack_require__(29);
-  var Node = __webpack_require__(30);
-  var Edge = __webpack_require__(27);
-  var Popup = __webpack_require__(31);
-  var MixinLoader = __webpack_require__(40);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Component = __webpack_require__(19);
+  var Group = __webpack_require__(25);
+  var ItemBox = __webpack_require__(29);
+  var ItemPoint = __webpack_require__(30);
+  var ItemRange = __webpack_require__(27);
 
-  // Load custom shapes into CanvasRenderingContext2D
-  __webpack_require__(37);
+
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
   /**
-   * @constructor Network
-   * Create a network visualization, displaying nodes and edges.
-   *
-   * @param {Element} container   The DOM element in which the Network will
-   *                                  be created. Normally a div element.
-   * @param {Object} data         An object containing parameters
-   *                              {Array} nodes
-   *                              {Array} edges
-   * @param {Object} options      Options
+   * 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
    */
-  function Network (container, data, options) {
-    if (!(this instanceof Network)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+  function ItemSet(body, options) {
+    this.body = body;
 
-    this._initializeMixinLoaders();
+    this.defaultOptions = {
+      type: null,  // 'box', 'point', 'range'
+      orientation: 'bottom',  // 'top' or 'bottom'
+      align: 'center', // alignment of box items
+      stack: true,
+      groupOrder: null,
 
-    // create variables and set default values
-    this.containerElement = container;
-    this.width = '100%';
-    this.height = '100%';
+      selectable: true,
+      editable: {
+        updateTime: false,
+        updateGroup: false,
+        add: false,
+        remove: false
+      },
 
-    // render and calculation settings
-    this.renderRefreshRate = 60;                         // hz (fps)
-    this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
-    this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
-    this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
-    this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
+      onAdd: function (item, callback) {
+        callback(item);
+      },
+      onUpdate: function (item, callback) {
+        callback(item);
+      },
+      onMove: function (item, callback) {
+        callback(item);
+      },
+      onRemove: function (item, callback) {
+        callback(item);
+      },
 
-    this.stabilize = true;  // stabilize before displaying the network
-    this.selectable = true;
-    this.initializing = true;
+      margin: {
+        item: 10,
+        axis: 20
+      },
+      padding: 5
+    };
 
-    // these functions are triggered when the dataset is edited
-    this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
+    // options is shared by this ItemSet and all its items
+    this.options = util.extend({}, this.defaultOptions);
 
+    // options for getting items from the DataSet with the correct type
+    this.itemOptions = {
+      type: {start: 'Date', end: 'Date'}
+    };
 
-    // set constant values
-    this.constants = {
-      nodes: {
-        radiusMin: 10,
-        radiusMax: 30,
-        radius: 10,
-        shape: 'ellipse',
-        image: undefined,
-        widthMin: 16, // px
-        widthMax: 64, // px
-        fixed: false,
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        level: -1,
-        color: {
-            border: '#2B7CE9',
-            background: '#97C2FC',
-          highlight: {
-            border: '#2B7CE9',
-            background: '#D2E5FF'
-          },
-          hover: {
-            border: '#2B7CE9',
-            background: '#D2E5FF'
-          }
-        },
-        borderColor: '#2B7CE9',
-        backgroundColor: '#97C2FC',
-        highlightColor: '#D2E5FF',
-        group: undefined
+    this.conversion = {
+      toScreen: body.util.toScreen,
+      toTime: body.util.toTime
+    };
+    this.dom = {};
+    this.props = {};
+    this.hammer = null;
+
+    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);
       },
-      edges: {
-        widthMin: 1,
-        widthMax: 15,
-        width: 1,
-        widthSelectionMultiplier: 2,
-        hoverWidth: 1.5,
-        style: 'line',
-        color: {
-          color:'#848484',
-          highlight:'#848484',
-          hover: '#848484'
-        },
-        fontColor: '#343434',
-        fontSize: 14, // px
-        fontFace: 'arial',
-        fontFill: 'white',
-        arrowScaleFactor: 1,
-        dash: {
-          length: 10,
-          gap: 5,
-          altLength: undefined
-        },
-        inheritColor: false // to, from, false, true (== from)
-      },
-      configurePhysics:false,
-      physics: {
-        barnesHut: {
-          enabled: true,
-          theta: 1 / 0.6, // inverted to save time during calculation
-          gravitationalConstant: -2000,
-          centralGravity: 0.3,
-          springLength: 95,
-          springConstant: 0.04,
-          damping: 0.09
-        },
-        repulsion: {
-          centralGravity: 0.1,
-          springLength: 200,
-          springConstant: 0.05,
-          nodeDistance: 100,
-          damping: 0.09
-        },
-        hierarchicalRepulsion: {
-          enabled: false,
-          centralGravity: 0.5,
-          springLength: 150,
-          springConstant: 0.01,
-          nodeDistance: 60,
-          damping: 0.09
-        },
-        damping: null,
-        centralGravity: null,
-        springLength: null,
-        springConstant: null
-      },
-      clustering: {                   // Per Node in Cluster = PNiC
-        enabled: false,               // (Boolean)             | global on/off switch for clustering.
-        initialMaxNodes: 100,         // (# nodes)             | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
-        clusterThreshold:500,         // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
-        reduceToNodes:300,            // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
-        chainThreshold: 0.4,          // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
-        clusterEdgeThreshold: 20,     // (px)                  | edge length threshold. if smaller, this node is clustered.
-        sectorThreshold: 100,         // (# nodes in cluster)  | cluster size threshold. If larger, expanding in own sector.
-        screenSizeThreshold: 0.2,     // (% of canvas)         | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
-        fontSizeMultiplier: 4.0,      // (px PNiC)             | how much the cluster font size grows per node in cluster (in px).
-        maxFontSize: 1000,
-        forceAmplification: 0.1,      // (multiplier PNiC)     | factor of increase fo the repulsion force of a cluster (per node in cluster).
-        distanceAmplification: 0.1,   // (multiplier PNiC)     | factor how much the repulsion distance of a cluster increases (per node in cluster).
-        edgeGrowth: 20,               // (px PNiC)             | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
-        nodeScaling: {width:  1,      // (px PNiC)             | growth of the width  per node in cluster.
-                      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
-      },
-      navigation: {
-        enabled: false
-      },
-      keyboard: {
-        enabled: false,
-        speed: {x: 10, y: 10, zoom: 0.02}
-      },
-      dataManipulation: {
-        enabled: false,
-        initiallyVisible: false
-      },
-      hierarchicalLayout: {
-        enabled:false,
-        levelSeparation: 150,
-        nodeSpacing: 100,
-        direction: "UD"   // UD, DU, LR, RL
-      },
-      freezeForStabilization: false,
-      smoothCurves: {
-        enabled: true,
-        dynamic: true,
-        type: "continuous",
-        roundness: 0.5
+      'update': function (event, params, senderId) {
+        me._onUpdate(params.items);
       },
-      dynamicSmoothCurves: true,
-      maxVelocity:  10,
-      minVelocity:  0.1,   // px/s
-      stabilizationIterations: 1000,  // maximum number of iteration to stabilize
-      labels:{
-        add:"Add Node",
-        edit:"Edit",
-        link:"Add Link",
-        del:"Delete selected",
-        editNode:"Edit Node",
-        editEdge:"Edit Edge",
-        back:"Back",
-        addDescription:"Click in an empty space to place a new node.",
-        linkDescription:"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.",
-        addError:"The function for add does not support two arguments (data,callback).",
-        linkError:"The function for connect does not support two arguments (data,callback).",
-        editError:"The function for edit does not support two arguments (data, callback).",
-        editBoundError:"No edit function has been bound to this button.",
-        deleteError:"The function for delete does not support two arguments (data, callback).",
-        deleteClusterError:"Clusters cannot be deleted."
+      'remove': function (event, params, senderId) {
+        me._onRemove(params.items);
+      }
+    };
+
+    // listeners for the DataSet of the groups
+    this.groupListeners = {
+      'add': function (event, params, senderId) {
+        me._onAddGroups(params.items);
       },
-      tooltip: {
-        delay: 300,
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        color: {
-          border: '#666',
-          background: '#FFFFC6'
-        }
+      'update': function (event, params, senderId) {
+        me._onUpdateGroups(params.items);
       },
-      dragNetwork: true,
-      dragNodes: true,
-      zoomable: true,
-      hover: false,
-      hideEdgesOnDrag: false,
-      hideNodesOnDrag: false
+      'remove': function (event, params, senderId) {
+        me._onRemoveGroups(params.items);
+      }
     };
-    this.hoverObj = {nodes:{},edges:{}};
-    this.controlNodesActive = false;
 
-    // Node variables
-    var network = this;
-    this.groups = new Groups(); // object with groups
-    this.images = new Images(); // object with images
-    this.images.setOnloadCallback(function () {
-      network._redraw();
-    });
+    this.items = {};      // object with an Item for every data item
+    this.groups = {};     // Group object for every group
+    this.groupIds = [];
 
-    // keyboard navigation variables
-    this.xIncrement = 0;
-    this.yIncrement = 0;
-    this.zoomIncrement = 0;
+    this.selection = [];  // list with the ids of all selected nodes
+    this.stackDirty = true; // if true, all items will be restacked on next redraw
+
+    this.touchParams = {}; // stores properties while dragging
+    // create the HTML DOM
 
-    // loading all the mixins:
-    // load the force calculation functions, grouped under the physics system.
-    this._loadPhysicsSystem();
-    // create a frame and canvas
     this._create();
-    // load the sector system.    (mandatory, fully integrated with Network)
-    this._loadSectorSystem();
-    // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
-    this._loadClusterSystem();
-    // load the selection system. (mandatory, required by Network)
-    this._loadSelectionSystem();
-    // load the selection system. (mandatory, required by Network)
-    this._loadHierarchySystem();
 
-    // apply options
-    this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
-    this._setScale(1);
     this.setOptions(options);
+  }
 
-    // other vars
-    this.freezeSimulation = false;// freeze the simulation
-    this.cachedFunctions = {};
+  ItemSet.prototype = new Component();
 
-    // containers for nodes and edges
-    this.calculationNodes = {};
-    this.calculationNodeIndices = [];
-    this.nodeIndices = [];        // array with all the indices of the nodes. Used to speed up forces calculation
-    this.nodes = {};              // object with Node objects
-    this.edges = {};              // object with Edge objects
+  // available item types will be registered here
+  ItemSet.types = {
+    box: ItemBox,
+    range: ItemRange,
+    point: ItemPoint
+  };
 
-    // position and scale variables and objects
-    this.canvasTopLeft     = {"x": 0,"y": 0};   // coordinates of the top left of the canvas.     they will be set during _redraw.
-    this.canvasBottomRight = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
-    this.pointerPosition = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
-    this.areaCenter = {};               // object with x and y elements used for determining the center of the zoom action
-    this.scale = 1;                     // defining the global scale variable in the constructor
-    this.previousScale = this.scale;    // this is used to check if the zoom operation is zooming in or out
+  /**
+   * Create the HTML DOM for the ItemSet
+   */
+  ItemSet.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'itemset';
+    frame['timeline-itemset'] = this;
+    this.dom.frame = frame;
 
-    // datasets or dataviews
-    this.nodesData = null;      // A DataSet or DataView
-    this.edgesData = null;      // A DataSet or DataView
+    // create background panel
+    var background = document.createElement('div');
+    background.className = 'background';
+    frame.appendChild(background);
+    this.dom.background = background;
 
-    // create event listeners used to subscribe on the DataSets of the nodes and edges
-    this.nodesListeners = {
-      'add': function (event, params) {
-        network._addNodes(params.items);
-        network.start();
-      },
-      'update': function (event, params) {
-        network._updateNodes(params.items);
-        network.start();
-      },
-      'remove': function (event, params) {
-        network._removeNodes(params.items);
-        network.start();
-      }
-    };
-    this.edgesListeners = {
-      'add': function (event, params) {
-        network._addEdges(params.items);
-        network.start();
-      },
-      'update': function (event, params) {
-        network._updateEdges(params.items);
-        network.start();
-      },
-      'remove': function (event, params) {
-        network._removeEdges(params.items);
-        network.start();
-      }
-    };
+    // create foreground panel
+    var foreground = document.createElement('div');
+    foreground.className = 'foreground';
+    frame.appendChild(foreground);
+    this.dom.foreground = foreground;
 
-    // properties for the animation
-    this.moving = true;
-    this.timer = undefined; // Scheduling function. Is definded in this.start();
+    // create axis panel
+    var axis = document.createElement('div');
+    axis.className = 'axis';
+    this.dom.axis = axis;
 
-    // load data (the disable start variable will be the same as the enabled clustering)
-    this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
+    // create labelset
+    var labelSet = document.createElement('div');
+    labelSet.className = 'labelset';
+    this.dom.labelSet = labelSet;
 
-    // hierarchical layout
-    this.initializing = false;
-    if (this.constants.hierarchicalLayout.enabled == true) {
-      this._setupHierarchicalLayout();
-    }
-    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.stabilize == false) {
-        this.zoomExtent(true,this.constants.clustering.enabled);
-      }
-    }
+    // create ungrouped Group
+    this._updateUngrouped();
 
-    // if clustering is disabled, the simulation will have started in the setData function
-    if (this.constants.clustering.enabled) {
-      this.startWithClustering();
-    }
-  }
+    // 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, {
+      prevent_default: true
+    });
 
-  // Extend Network with an Emitter mixin
-  Emitter(Network.prototype);
+    // 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));
 
-  /**
-   * Get the script path where the vis.js library is located
-   *
-   * @returns {string | null} path   Path or null when not found. Path does not
-   *                                 end with a slash.
-   * @private
-   */
-  Network.prototype._getScriptPath = function() {
-    var scripts = document.getElementsByTagName( 'script' );
+    // single select (or unselect) when tapping an item
+    this.hammer.on('tap',  this._onSelectItem.bind(this));
 
-    // find script named vis.js or vis.min.js
-    for (var i = 0; i < scripts.length; i++) {
-      var src = scripts[i].src;
-      var match = src && /\/?vis(.min)?\.js$/.exec(src);
-      if (match) {
-        // return path without the script name
-        return src.substring(0, src.length - match[0].length);
-      }
-    }
+    // multi select when holding mouse/touch, or on ctrl+click
+    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
 
-    return null;
-  };
+    // add item on doubletap
+    this.hammer.on('doubletap', this._onAddItem.bind(this));
 
+    // attach to the DOM
+    this.show();
+  };
 
   /**
-   * Find the center position of the network
-   * @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', or 'range'. The default
+   *                              Style can be overwritten by individual items.
+   *                           {String} align
+   *                              Alignment for the items, only applicable for
+   *                              ItemBox. 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
+   *                              Margin between items in pixels. 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.
    */
-  Network.prototype._getRange = function() {
-    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.x)) {minX = node.x;}
-        if (maxX < (node.x)) {maxX = node.x;}
-        if (minY > (node.y)) {minY = node.y;}
-        if (maxY < (node.y)) {maxY = node.y;}
+  ItemSet.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
+      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 = options.margin;
+        }
+        else if (typeof options.margin === 'object'){
+          util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
+        }
       }
+
+      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);
+        }
+      }
+
+      // callback functions
+      var addCallback = (function (name) {
+        if (name in options) {
+          var fn = options[name];
+          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'].forEach(addCallback);
+
+      // force the itemSet to refresh: options like orientation and margins may be changed
+      this.markDirty();
     }
-    if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
-      minY = 0, maxY = 0, minX = 0, maxX = 0;
-    }
-    return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
   };
 
-
   /**
-   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
-   * @returns {{x: number, y: number}}
-   * @private
+   * Mark the ItemSet dirty so it will refresh everything with next redraw
    */
-  Network.prototype._findCenter = function(range) {
-    return {x: (0.5 * (range.maxX + range.minX)),
-            y: (0.5 * (range.maxY + range.minY))};
+  ItemSet.prototype.markDirty = function() {
+    this.groupIds = [];
+    this.stackDirty = true;
   };
 
-
   /**
-   * center the network
-   *
-   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+   * Destroy the ItemSet
    */
-  Network.prototype._centerNetwork = function(range) {
-    var center = this._findCenter(range);
+  ItemSet.prototype.destroy = function() {
+    this.hide();
+    this.setItems(null);
+    this.setGroups(null);
 
-    center.x *= this.scale;
-    center.y *= this.scale;
-    center.x -= 0.5 * this.frame.canvas.clientWidth;
-    center.y -= 0.5 * this.frame.canvas.clientHeight;
+    this.hammer = null;
 
-    this._setTranslation(-center.x,-center.y); // set at 0,0
+    this.body = null;
+    this.conversion = null;
   };
 
-
   /**
-   * This function zooms out to fit all data on screen based on amount of nodes
-   *
-   * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
-   * @param {Boolean} [disableStart] | If true, start is not called.
+   * Hide the component from the DOM
    */
-  Network.prototype.zoomExtent = function(initialZoom, disableStart) {
-    if (initialZoom === undefined) {
-      initialZoom = false;
+  ItemSet.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
-    if (disableStart === undefined) {
-      disableStart = false;
+
+    // remove the axis with dots
+    if (this.dom.axis.parentNode) {
+      this.dom.axis.parentNode.removeChild(this.dom.axis);
     }
 
-    var range = this._getRange();
-    var zoomLevel;
+    // remove the labelset containing all group labels
+    if (this.dom.labelSet.parentNode) {
+      this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
+    }
+  };
 
-    if (initialZoom == true) {
-      var numberOfNodes = this.nodeIndices.length;
-      if (this.constants.smoothCurves == true) {
-        if (this.constants.clustering.enabled == true &&
-          numberOfNodes >= this.constants.clustering.initialMaxNodes) {
-          zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-        else {
-          zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-      }
-      else {
-        if (this.constants.clustering.enabled == true &&
-            numberOfNodes >= this.constants.clustering.initialMaxNodes) {
-          zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-        else {
-          zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-      }
-
-      // correct for larger canvasses.
-      var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
-      zoomLevel *= factor;
+  /**
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
+   */
+  ItemSet.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
     }
-    else {
-      var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
-      var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
-
-      var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
-      var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
 
-      zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
+    // show axis with dots
+    if (!this.dom.axis.parentNode) {
+      this.body.dom.backgroundVertical.appendChild(this.dom.axis);
     }
 
-    if (zoomLevel > 1.0) {
-      zoomLevel = 1.0;
+    // show labelset containing labels
+    if (!this.dom.labelSet.parentNode) {
+      this.body.dom.left.appendChild(this.dom.labelSet);
     }
+  };
+
+  /**
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {Array} [ids] An array with zero or more id's of the items to be
+   *                      selected. If ids is an empty array, all items will be
+   *                      unselected.
+   */
+  ItemSet.prototype.setSelection = function(ids) {
+    var i, ii, id, item;
 
+    if (ids) {
+      if (!Array.isArray(ids)) {
+        throw new TypeError('Array expected');
+      }
 
-    this._setScale(zoomLevel);
-    this._centerNetwork(range);
-    if (disableStart == false) {
-      this.moving = true;
-      this.start();
+      // 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();
+        }
+      }
     }
   };
 
+  /**
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
+   */
+  ItemSet.prototype.getSelection = function() {
+    return this.selection.concat([]);
+  };
 
   /**
-   * Update the this.nodeIndices with the most recent node index list
+   * Deselect a selected item
+   * @param {String | Number} id
    * @private
    */
-  Network.prototype._updateNodeIndexList = function() {
-    this._clearNodeIndexList();
-    for (var idx in this.nodes) {
-      if (this.nodes.hasOwnProperty(idx)) {
-        this.nodeIndices.push(idx);
+  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;
       }
     }
   };
 
+  /**
+   * 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;
+
+    // update class name
+    frame.className = 'itemset' + (editable ? ' editable' : '');
+
+    // reorder the groups (if needed)
+    resized = this._orderGroups() || resized;
+
+    // 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;
+
+    // redraw all groups
+    var restack = this.stackDirty,
+        firstGroup = this._firstGroup(),
+        firstMargin = {
+          item: margin.item,
+          axis: margin.axis
+        },
+        nonFirstMargin = {
+          item: margin.item,
+          axis: margin.item / 2
+        },
+        height = 0,
+        minHeight = margin.axis + margin.item;
+    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;
+
+    // update frame height
+    frame.style.height  = asSize(height);
+
+    // calculate actual size and position
+    this.props.top = frame.offsetTop;
+    this.props.left = frame.offsetLeft;
+    this.props.width = frame.offsetWidth;
+    this.props.height = height;
+
+    // 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 = this.body.domProps.border.left + 'px';
+
+    // check if this component is resized
+    resized = this._isResized() || resized;
+
+    return resized;
+  };
+
+  /**
+   * Get the first group, aligned with the axis
+   * @return {Group | null} firstGroup
+   * @private
+   */
+  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 nodes and edges, and optionally options as well.
-   *
-   * @param {Object} data              Object containing parameters:
-   *                                   {Array | DataSet | DataView} [nodes] Array with nodes
-   *                                   {Array | DataSet | DataView} [edges] Array with edges
-   *                                   {String} [dot] String containing data in DOT format
-   *                                   {Options} [options] Object with options
-   * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
+   * Create or delete the group holding all ungrouped items. This group is used when
+   * there are no groups specified.
+   * @protected
    */
-  Network.prototype.setData = function(data, disableStart) {
-    if (disableStart === undefined) {
-      disableStart = false;
-    }
+  ItemSet.prototype._updateUngrouped = function() {
+    var ungrouped = this.groups[UNGROUPED];
 
-    if (data && data.dot && (data.nodes || data.edges)) {
-      throw new SyntaxError('Data must contain either parameter "dot" or ' +
-          ' parameter pair "nodes" and "edges", but not both.');
+    if (this.groupsData) {
+      // remove the group holding all ungrouped items
+      if (ungrouped) {
+        ungrouped.hide();
+        delete this.groups[UNGROUPED];
+      }
     }
+    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;
 
-    // set options
-    this.setOptions(data && data.options);
+        for (var itemId in this.items) {
+          if (this.items.hasOwnProperty(itemId)) {
+            ungrouped.add(this.items[itemId]);
+          }
+        }
 
-    // set all data
-    if (data && data.dot) {
-      // parse DOT file
-      if(data && data.dot) {
-        var dotData = dotparser.DOTToGraph(data.dot);
-        this.setData(dotData);
-        return;
+        ungrouped.show();
       }
     }
+  };
+
+  /**
+   * Get the element for the labelset
+   * @return {HTMLElement} labelSet
+   */
+  ItemSet.prototype.getLabelSet = function() {
+    return this.dom.labelSet;
+  };
+
+  /**
+   * Set items
+   * @param {vis.DataSet | null} items
+   */
+  ItemSet.prototype.setItems = function(items) {
+    var me = this,
+        ids,
+        oldItemsData = this.itemsData;
+
+    // replace the dataset
+    if (!items) {
+      this.itemsData = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      this.itemsData = items;
+    }
     else {
-      this._setNodes(data && data.nodes);
-      this._setEdges(data && data.edges);
+      throw new TypeError('Data must be an instance of DataSet or DataView');
     }
 
-    this._putDataInSector();
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-    if (!disableStart) {
-      // find a stable position or start animating to a stable position
-      if (this.stabilize) {
-        var me = this;
-        setTimeout(function() {me._stabilize(); me.start();},0)
-      }
-      else {
-        this.start();
-      }
+      // 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);
+      });
+
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
+
+      // update the group holding all ungrouped items
+      this._updateUngrouped();
     }
   };
 
   /**
-   * Set options
-   * @param {Object} options
-   * @param {Boolean} [initializeView] | set zoom and translation to default.
+   * Get the current items
+   * @returns {vis.DataSet | null}
    */
-  Network.prototype.setOptions = function (options) {
-    if (options) {
-      var prop;
-      // retrieve parameter values
-      if (options.width !== undefined)           {this.width = options.width;}
-      if (options.height !== undefined)          {this.height = options.height;}
-      if (options.stabilize !== undefined)       {this.stabilize = options.stabilize;}
-      if (options.selectable !== undefined)      {this.selectable = options.selectable;}
-      if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
-      if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
-      if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
-      if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
-      if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
-      if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
-      if (options.hover !== undefined)           {this.constants.hover = options.hover;}
-      if (options.hideEdgesOnDrag !== undefined) {this.constants.hideEdgesOnDrag = options.hideEdgesOnDrag;}
-      if (options.hideNodesOnDrag !== undefined) {this.constants.hideNodesOnDrag = options.hideNodesOnDrag;}
+  ItemSet.prototype.getItems = function() {
+    return this.itemsData;
+  };
 
-      // TODO: deprecated since version 3.0.0. Cleanup some day
-      if (options.dragGraph !== undefined) {
-        throw new Error('Option dragGraph is renamed to dragNetwork');
-      }
+  /**
+   * Set groups
+   * @param {vis.DataSet} groups
+   */
+  ItemSet.prototype.setGroups = function(groups) {
+    var me = this,
+        ids;
 
-      if (options.labels !== undefined)  {
-        for (prop in options.labels) {
-          if (options.labels.hasOwnProperty(prop)) {
-            this.constants.labels[prop] = options.labels[prop];
-          }
-        }
-      }
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
 
-      if (options.onAdd) {
-          this.triggerFunctions.add = options.onAdd;
-        }
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
+    }
 
-      if (options.onEdit) {
-        this.triggerFunctions.edit = options.onEdit;
-      }
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
+    }
+    else {
+      throw new TypeError('Data must be an instance of DataSet or DataView');
+    }
 
-      if (options.onEditEdge) {
-        this.triggerFunctions.editEdge = options.onEditEdge;
-      }
+    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 (options.onConnect) {
-        this.triggerFunctions.connect = options.onConnect;
-      }
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
+    }
 
-      if (options.onDelete) {
-        this.triggerFunctions.del = options.onDelete;
-      }
+    // update the group holding all ungrouped items
+    this._updateUngrouped();
 
-      if (options.physics) {
-        if (options.physics.barnesHut) {
-          this.constants.physics.barnesHut.enabled = true;
-          for (prop in options.physics.barnesHut) {
-            if (options.physics.barnesHut.hasOwnProperty(prop)) {
-              this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
-            }
-          }
-        }
+    // update the order of all items in each group
+    this._order();
 
-        if (options.physics.repulsion) {
-          this.constants.physics.barnesHut.enabled = false;
-          for (prop in options.physics.repulsion) {
-            if (options.physics.repulsion.hasOwnProperty(prop)) {
-              this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
-            }
-          }
-        }
+    this.body.emitter.emit('change');
+  };
 
-        if (options.physics.hierarchicalRepulsion) {
-          this.constants.hierarchicalLayout.enabled = true;
-          this.constants.physics.hierarchicalRepulsion.enabled = true;
-          this.constants.physics.barnesHut.enabled = false;
-          for (prop in options.physics.hierarchicalRepulsion) {
-            if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
-              this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
-            }
-          }
+  /**
+   * 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
+   */
+  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);
         }
-      }
+      });
+    }
+  };
 
-      if (options.smoothCurves !== undefined) {
-        if (typeof options.smoothCurves == 'boolean') {
-          this.constants.smoothCurves.enabled = options.smoothCurves;
+  /**
+   * Handle updated items
+   * @param {Number[]} ids
+   * @protected
+   */
+  ItemSet.prototype._onUpdate = function(ids) {
+    var me = this;
+
+    ids.forEach(function (id) {
+      var itemData = me.itemsData.get(id, me.itemOptions),
+          item = me.items[id],
+          type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
+
+      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 {
-          this.constants.smoothCurves.enabled = true;
-          for (prop in options.smoothCurves) {
-            if (options.smoothCurves.hasOwnProperty(prop)) {
-              this.constants.smoothCurves[prop] = options.smoothCurves[prop];
-            }
-          }
+          me._updateItem(item, itemData);
         }
       }
 
-      if (options.hierarchicalLayout) {
-        this.constants.hierarchicalLayout.enabled = true;
-        for (prop in options.hierarchicalLayout) {
-          if (options.hierarchicalLayout.hasOwnProperty(prop)) {
-            this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
-          }
+      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 (options.hierarchicalLayout !== undefined)  {
-        this.constants.hierarchicalLayout.enabled = false;
-      }
-
-      if (options.clustering) {
-        this.constants.clustering.enabled = true;
-        for (prop in options.clustering) {
-          if (options.clustering.hasOwnProperty(prop)) {
-            this.constants.clustering[prop] = options.clustering[prop];
-          }
+        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 if (options.clustering !== undefined)  {
-        this.constants.clustering.enabled = false;
-      }
-
-      if (options.navigation) {
-        this.constants.navigation.enabled = true;
-        for (prop in options.navigation) {
-          if (options.navigation.hasOwnProperty(prop)) {
-            this.constants.navigation[prop] = options.navigation[prop];
-          }
+        else {
+          throw new TypeError('Unknown item type "' + type + '"');
         }
       }
-      else if (options.navigation !== undefined) {
-        this.constants.navigation.enabled = false;
-      }
+    });
 
-      if (options.keyboard) {
-        this.constants.keyboard.enabled = true;
-        for (prop in options.keyboard) {
-          if (options.keyboard.hasOwnProperty(prop)) {
-            this.constants.keyboard[prop] = options.keyboard[prop];
-          }
-        }
-      }
-      else if (options.keyboard !== undefined)  {
-        this.constants.keyboard.enabled = false;
-      }
+    this._order();
+    this.stackDirty = true; // force re-stacking of all items next redraw
+    this.body.emitter.emit('change');
+  };
 
-      if (options.dataManipulation) {
-        this.constants.dataManipulation.enabled = true;
-        for (prop in options.dataManipulation) {
-          if (options.dataManipulation.hasOwnProperty(prop)) {
-            this.constants.dataManipulation[prop] = options.dataManipulation[prop];
-          }
-        }
-        this.editMode = this.constants.dataManipulation.initiallyVisible;
-      }
-      else if (options.dataManipulation !== undefined)  {
-        this.constants.dataManipulation.enabled = false;
+  /**
+   * Handle added items
+   * @param {Number[]} ids
+   * @protected
+   */
+  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
+
+  /**
+   * Handle removed items
+   * @param {Number[]} ids
+   * @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);
       }
+    });
 
-      // TODO: work out these options and document them
-      if (options.edges) {
-        for (prop in options.edges) {
-          if (options.edges.hasOwnProperty(prop)) {
-            if (typeof options.edges[prop] != "object") {
-              this.constants.edges[prop] = options.edges[prop];
-            }
-          }
-        }
+    if (count) {
+      // update order
+      this._order();
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
+    }
+  };
 
-        if (options.edges.color !== undefined) {
-          if (util.isString(options.edges.color)) {
-            this.constants.edges.color = {};
-            this.constants.edges.color.color = options.edges.color;
-            this.constants.edges.color.highlight = options.edges.color;
-            this.constants.edges.color.hover = options.edges.color;
-          }
-          else {
-            if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
-            if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
-            if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
-          }
-        }
+  /**
+   * 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();
+    });
+  };
 
-        if (!options.edges.fontColor) {
-          if (options.edges.color !== undefined) {
-            if (util.isString(options.edges.color))           {this.constants.edges.fontColor = options.edges.color;}
-            else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.color;}
-          }
-        }
+  /**
+   * Handle updated groups
+   * @param {Number[]} ids
+   * @private
+   */
+  ItemSet.prototype._onUpdateGroups = function(ids) {
+    this._onAddGroups(ids);
+  };
 
-        // Added to support dashed lines
-        // David Jordan
-        // 2012-08-08
-        if (options.edges.dash) {
-          if (options.edges.dash.length !== undefined) {
-            this.constants.edges.dash.length = options.edges.dash.length;
-          }
-          if (options.edges.dash.gap !== undefined) {
-            this.constants.edges.dash.gap = options.edges.dash.gap;
-          }
-          if (options.edges.dash.altLength !== undefined) {
-            this.constants.edges.dash.altLength = options.edges.dash.altLength;
-          }
-        }
-      }
+  /**
+   * Handle changed groups
+   * @param {Number[]} ids
+   * @private
+   */
+  ItemSet.prototype._onAddGroups = function(ids) {
+    var me = this;
 
-      if (options.nodes) {
-        for (prop in options.nodes) {
-          if (options.nodes.hasOwnProperty(prop)) {
-            this.constants.nodes[prop] = options.nodes[prop];
-          }
-        }
+    ids.forEach(function (id) {
+      var groupData = me.groupsData.get(id);
+      var group = me.groups[id];
 
-        if (options.nodes.color) {
-          this.constants.nodes.color = util.parseColor(options.nodes.color);
+      if (!group) {
+        // check for reserved ids
+        if (id == UNGROUPED) {
+          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
         }
 
-        /*
-         if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
-         if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
-         */
-      }
-      if (options.groups) {
-        for (var groupname in options.groups) {
-          if (options.groups.hasOwnProperty(groupname)) {
-            var group = options.groups[groupname];
-            this.groups.add(groupname, group);
-          }
-        }
-      }
+        var groupOptions = Object.create(me.options);
+        util.extend(groupOptions, {
+          height: null
+        });
 
-      if (options.tooltip) {
-        for (prop in options.tooltip) {
-          if (options.tooltip.hasOwnProperty(prop)) {
-            this.constants.tooltip[prop] = options.tooltip[prop];
+        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);
+            }
           }
         }
-        if (options.tooltip.color) {
-          this.constants.tooltip.color = util.parseColor(options.tooltip.color);
-        }
-      }
-    }
-
-
-    // (Re)loading the mixins that can be enabled or disabled in the options.
-    // load the force calculation functions, grouped under the physics system.
-    this._loadPhysicsSystem();
-    // load the navigation system.
-    this._loadNavigationControls();
-    // load the data manipulation system
-    this._loadManipulationSystem();
-    // configure the smooth curves
-    this._configureSmoothCurves();
-
 
-    // bind keys. If disabled, this will not do anything;
-    this._createKeyBinds();
-    this.setSize(this.width, this.height);
-    this.moving = true;
-    this.start();
+        group.order();
+        group.show();
+      }
+      else {
+        // update group
+        group.setData(groupData);
+      }
+    });
 
+    this.body.emitter.emit('change');
   };
 
   /**
-   * Create the main frame for the Network.
-   * This function is executed once when a Network object is created. The frame
-   * contains a canvas, and this canvas contains all objects like the axis and
-   * nodes.
+   * Handle removed groups
+   * @param {Number[]} ids
    * @private
    */
-  Network.prototype._create = function () {
-    // remove all elements from the container element.
-    while (this.containerElement.hasChildNodes()) {
-      this.containerElement.removeChild(this.containerElement.firstChild);
-    }
-
-    this.frame = document.createElement('div');
-    this.frame.className = 'network-frame';
-    this.frame.style.position = 'relative';
-    this.frame.style.overflow = 'hidden';
-
-    // create the network canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( 'canvas' );
-    this.frame.canvas.style.position = 'relative';
-    this.frame.appendChild(this.frame.canvas);
-    if (!this.frame.canvas.getContext) {
-      var noCanvas = document.createElement( 'DIV' );
-      noCanvas.style.color = 'red';
-      noCanvas.style.fontWeight =  'bold' ;
-      noCanvas.style.padding =  '10px';
-      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
-      this.frame.canvas.appendChild(noCanvas);
-    }
+  ItemSet.prototype._onRemoveGroups = function(ids) {
+    var groups = this.groups;
+    ids.forEach(function (id) {
+      var group = groups[id];
 
-    var me = this;
-    this.drag = {};
-    this.pinch = {};
-    this.hammer = Hammer(this.frame.canvas, {
-      prevent_default: true
+      if (group) {
+        group.hide();
+        delete groups[id];
+      }
     });
-    this.hammer.on('tap',       me._onTap.bind(me) );
-    this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
-    this.hammer.on('hold',      me._onHold.bind(me) );
-    this.hammer.on('pinch',     me._onPinch.bind(me) );
-    this.hammer.on('touch',     me._onTouch.bind(me) );
-    this.hammer.on('dragstart', me._onDragStart.bind(me) );
-    this.hammer.on('drag',      me._onDrag.bind(me) );
-    this.hammer.on('dragend',   me._onDragEnd.bind(me) );
-    this.hammer.on('release',   me._onRelease.bind(me) );
-    this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
-    this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
-    this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
 
-    // add the frame to the container element
-    this.containerElement.appendChild(this.frame);
+    this.markDirty();
 
+    this.body.emitter.emit('change');
   };
 
-
   /**
-   * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
+   * Reorder the groups if needed
+   * @return {boolean} changed
    * @private
    */
-  Network.prototype._createKeyBinds = function() {
-    var me = this;
-    this.mousetrap = mousetrap;
+  ItemSet.prototype._orderGroups = function () {
+    if (this.groupsData) {
+      // reorder the groups
+      var groupIds = this.groupsData.getIds({
+        order: this.options.groupOrder
+      });
 
-    this.mousetrap.reset();
+      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.constants.keyboard.enabled == true) {
-      this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
-      this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
-      this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
-      this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
-      this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("=",    this._zoomIn.bind(me),    "keydown");
-      this.mousetrap.bind("=",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("-",    this._zoomOut.bind(me),   "keydown");
-      this.mousetrap.bind("-",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("[",    this._zoomIn.bind(me),    "keydown");
-      this.mousetrap.bind("[",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("]",    this._zoomOut.bind(me),   "keydown");
-      this.mousetrap.bind("]",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("pageup",this._zoomIn.bind(me),   "keydown");
-      this.mousetrap.bind("pageup",this._stopZoom.bind(me),   "keyup");
-      this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
-      this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
-    }
+        // show the groups again, attach them to the DOM in correct order
+        groupIds.forEach(function (groupId) {
+          groups[groupId].show();
+        });
 
-    if (this.constants.dataManipulation.enabled == true) {
-      this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
-      this.mousetrap.bind("del",this._deleteSelected.bind(me));
+        this.groupIds = groupIds;
+      }
+
+      return changed;
+    }
+    else {
+      return false;
     }
   };
 
   /**
-   * Get the pointer location from a touch location
-   * @param {{pageX: Number, pageY: Number}} touch
-   * @return {{x: Number, y: Number}} pointer
+   * Add a new item
+   * @param {Item} item
    * @private
    */
-  Network.prototype._getPointer = function (touch) {
-    return {
-      x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
-      y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
-    };
+  ItemSet.prototype._addItem = function(item) {
+    this.items[item.id] = item;
+
+    // add to group
+    var groupId = this.groupsData ? item.data.group : UNGROUPED;
+    var group = this.groups[groupId];
+    if (group) group.add(item);
   };
 
   /**
-   * On start of a touch gesture, store the pointer
-   * @param event
+   * Update an existing item
+   * @param {Item} item
+   * @param {Object} itemData
    * @private
    */
-  Network.prototype._onTouch = function (event) {
-    this.drag.pointer = this._getPointer(event.gesture.center);
-    this.drag.pinched = false;
-    this.pinch.scale = this._getScale();
+  ItemSet.prototype._updateItem = function(item, itemData) {
+    var oldGroupId = item.data.group;
 
-    this._handleTouch(this.drag.pointer);
-  };
+    item.data = itemData;
+    if (item.displayed) {
+      item.redraw();
+    }
 
-  /**
-   * handle drag start event
-   * @private
-   */
-  Network.prototype._onDragStart = function () {
-    this._handleDragStart();
-  };
+    // update group
+    if (oldGroupId != item.data.group) {
+      var oldGroup = this.groups[oldGroupId];
+      if (oldGroup) oldGroup.remove(item);
 
+      var groupId = this.groupsData ? item.data.group : UNGROUPED;
+      var group = this.groups[groupId];
+      if (group) group.add(item);
+    }
+  };
 
   /**
-   * This function is called by _onDragStart.
-   * It is separated out because we can then overload it for the datamanipulation system.
-   *
+   * 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
    */
-  Network.prototype._handleDragStart = function() {
-    var drag = this.drag;
-    var node = this._getNodeAt(drag.pointer);
-    // note: drag.pointer is set in _onTouch to get the initial touch location
-
-    drag.dragging = true;
-    drag.selection = [];
-    drag.translation = this._getTranslation();
-    drag.nodeId = null;
+  ItemSet.prototype._removeItem = function(item) {
+    // remove from DOM
+    item.hide();
 
-    if (node != null) {
-      drag.nodeId = node.id;
-      // select the clicked node if not yet selected
-      if (!node.isSelected()) {
-        this._selectObject(node,false);
-      }
+    // remove from items
+    delete this.items[item.id];
 
-      // create an array with the selected nodes and their original location and status
-      for (var objectId in this.selectionObj.nodes) {
-        if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
-          var object = this.selectionObj.nodes[objectId];
-          var s = {
-            id: object.id,
-            node: object,
+    // remove from selection
+    var index = this.selection.indexOf(item.id);
+    if (index != -1) this.selection.splice(index, 1);
 
-            // store original x, y, xFixed and yFixed, make the node temporarily Fixed
-            x: object.x,
-            y: object.y,
-            xFixed: object.xFixed,
-            yFixed: object.yFixed
-          };
+    // remove from group
+    var groupId = this.groupsData ? item.data.group : UNGROUPED;
+    var group = this.groups[groupId];
+    if (group) group.remove(item);
+  };
 
-          object.xFixed = true;
-          object.yFixed = true;
+  /**
+   * 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 = [];
 
-          drag.selection.push(s);
-        }
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] instanceof ItemRange) {
+        endArray.push(array[i]);
       }
     }
+    return endArray;
   };
 
-
   /**
-   * handle drag event
+   * 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
    */
-  Network.prototype._onDrag = function (event) {
-    this._handleOnDrag(event)
+  ItemSet.prototype._onTouch = function (event) {
+    // store the touched item, used in _onDragStart
+    this.touchParams.item = ItemSet.itemFromTarget(event);
   };
 
-
   /**
-   * This function is called by _onDrag.
-   * It is separated out because we can then overload it for the datamanipulation system.
-   *
+   * Start dragging the selected events
+   * @param {Event} event
    * @private
    */
-  Network.prototype._handleOnDrag = function(event) {
-    if (this.drag.pinched) {
+  ItemSet.prototype._onDragStart = function (event) {
+    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
       return;
     }
 
-    var pointer = this._getPointer(event.gesture.center);
+    var item = this.touchParams.item || null,
+        me = this,
+        props;
 
-    var me = this,
-      drag = this.drag,
-      selection = drag.selection;
-    if (selection && selection.length && this.constants.dragNodes == true) {
-      // calculate delta's and new location
-      var deltaX = pointer.x - drag.pointer.x,
-        deltaY = pointer.y - drag.pointer.y;
+    if (item && item.selected) {
+      var dragLeftItem = event.target.dragLeftItem;
+      var dragRightItem = event.target.dragRightItem;
 
-      // update position of all selected nodes
-      selection.forEach(function (s) {
-        var node = s.node;
+      if (dragLeftItem) {
+        props = {
+          item: dragLeftItem
+        };
 
-        if (!s.xFixed) {
-          node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
+        if (me.options.editable.updateTime) {
+          props.start = item.data.start.valueOf();
         }
-
-        if (!s.yFixed) {
-          node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
+        if (me.options.editable.updateGroup) {
+          if ('group' in item.data) props.group = item.data.group;
         }
-      });
 
-      // start _animationStep if not yet running
-      if (!this.moving) {
-        this.moving = true;
-        this.start();
+        this.touchParams.itemProps = [props];
       }
-    }
-    else {
-      if (this.constants.dragNetwork == true) {
-        // move the network
-        var diffX = pointer.x - this.drag.pointer.x;
-        var diffY = pointer.y - this.drag.pointer.y;
+      else if (dragRightItem) {
+        props = {
+          item: dragRightItem
+        };
 
-        this._setTranslation(
-          this.drag.translation.x + diffX,
-          this.drag.translation.y + diffY
-        );
-        this._redraw();
-  //      this.moving = true;
-  //      this.start();
+        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
+          };
 
-  /**
-   * handle drag start event
-   * @private
-   */
-  Network.prototype._onDragEnd = function () {
-    this.drag.dragging = false;
-    var selection = this.drag.selection;
-    if (selection) {
-      selection.forEach(function (s) {
-        // restore original xFixed and yFixed
-        s.node.xFixed = s.xFixed;
-        s.node.yFixed = s.yFixed;
-      });
+          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 props;
+        });
+      }
+
+      event.stopPropagation();
     }
-    this._redraw();
   };
 
   /**
-   * handle tap/click event: select/unselect a node
+   * Drag selected items
+   * @param {Event} event
    * @private
    */
-  Network.prototype._onTap = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this.pointerPosition = pointer;
-    this._handleTap(pointer);
-
-  };
+  ItemSet.prototype._onDrag = function (event) {
+    if (this.touchParams.itemProps) {
+      var range = this.body.range,
+          snap = this.body.util.snap || null,
+          deltaX = event.gesture.deltaX,
+          scale = (this.props.width / (range.end - range.start)),
+          offset = deltaX / scale;
 
+      // move
+      this.touchParams.itemProps.forEach(function (props) {
+        if ('start' in props) {
+          var start = new Date(props.start + offset);
+          props.item.data.start = snap ? snap(start) : start;
+        }
 
-  /**
-   * handle doubletap event
-   * @private
-   */
-  Network.prototype._onDoubleTap = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this._handleDoubleTap(pointer);
-  };
+        if ('end' in props) {
+          var end = new Date(props.end + offset);
+          props.item.data.end = snap ? snap(end) : end;
+        }
 
+        if ('group' in props) {
+          // drag from one group to another
+          var group = ItemSet.groupFromTarget(event);
+          if (group && group.groupId != props.item.data.group) {
+            var oldGroup = props.item.parent;
+            oldGroup.remove(props.item);
+            oldGroup.order();
+            group.add(props.item);
+            group.order();
 
-  /**
-   * handle long tap event: multi select nodes
-   * @private
-   */
-  Network.prototype._onHold = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this.pointerPosition = pointer;
-    this._handleOnHold(pointer);
-  };
+            props.item.data.group = group.groupId;
+          }
+        }
+      });
 
-  /**
-   * handle the release of the screen
-   *
-   * @private
-   */
-  Network.prototype._onRelease = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this._handleOnRelease(pointer);
-  };
+      // TODO: implement onMoving handler
 
-  /**
-   * Handle pinch event
-   * @param event
-   * @private
-   */
-  Network.prototype._onPinch = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
 
-    this.drag.pinched = true;
-    if (!('scale' in this.pinch)) {
-      this.pinch.scale = 1;
+      event.stopPropagation();
     }
-
-    // TODO: enabled moving while pinching?
-    var scale = this.pinch.scale * event.gesture.scale;
-    this._zoom(scale, pointer)
   };
 
   /**
-   * Zoom the network in or out
-   * @param {Number} scale a number around 1, and between 0.01 and 10
-   * @param {{x: Number, y: Number}} pointer    Position on screen
-   * @return {Number} appliedScale    scale is limited within the boundaries
+   * End of dragging selected items
+   * @param {Event} event
    * @private
    */
-  Network.prototype._zoom = function(scale, pointer) {
-    if (this.constants.zoomable == true) {
-      var scaleOld = this._getScale();
-      if (scale < 0.00001) {
-        scale = 0.00001;
-      }
-      if (scale > 10) {
-        scale = 10;
-      }
-    // + this.frame.canvas.clientHeight / 2
-      var translation = this._getTranslation();
+  ItemSet.prototype._onDragEnd = function (event) {
+    if (this.touchParams.itemProps) {
+      // prepare a change set for the changed items
+      var changes = [],
+          me = this,
+          dataset = this.itemsData.getDataSet();
 
-      var scaleFrac = scale / scaleOld;
-      var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
-      var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
+      this.touchParams.itemProps.forEach(function (props) {
+        var id = props.item.id,
+            itemData = me.itemsData.get(id, me.itemOptions);
 
-      this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
-                         "y" : this._YconvertDOMtoCanvas(pointer.y)};
+        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._setScale(scale);
-      this._setTranslation(tx, ty);
-      this.updateClustersDefault();
-      this._redraw();
+        // 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
+              if ('start' in props) props.item.data.start = props.start;
+              if ('end' in props)   props.item.data.end   = props.end;
 
-      if (scaleOld < scale) {
-        this.emit("zoom", {direction:"+"});
-      }
-      else {
-        this.emit("zoom", {direction:"-"});
+              me.stackDirty = true; // force re-stacking of all items next redraw
+              me.body.emitter.emit('change');
+            }
+          });
+        }
+      });
+      this.touchParams.itemProps = null;
+
+      // apply the changes to the data (if there are changes)
+      if (changes.length) {
+        dataset.update(changes);
       }
 
-      return scale;
+      event.stopPropagation();
     }
   };
 
-
   /**
-   * Event handler for mouse wheel event, used to zoom the timeline
-   * See http://adomas.org/javascript-mouse-wheel/
-   *     https://github.com/EightMedia/hammer.js/issues/256
-   * @param {MouseEvent}  event
+   * Handle selecting/deselecting an item when tapping it
+   * @param {Event} event
    * @private
    */
-  Network.prototype._onMouseWheel = function(event) {
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta/120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail/3;
+  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;
     }
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
+    var oldSelection = this.getSelection();
 
-      // calculate the new scale
-      var scale = this._getScale();
-      var zoom = delta / 10;
-      if (delta < 0) {
-        zoom = zoom / (1 - zoom);
-      }
-      scale *= (1 + zoom);
+    var item = ItemSet.itemFromTarget(event);
+    var selection = item ? [item.id] : [];
+    this.setSelection(selection);
 
-      // calculate the pointer location
-      var gesture = util.fakeGesture(this, event);
-      var pointer = this._getPointer(gesture.center);
+    var newSelection = this.getSelection();
 
-      // apply the new scale
-      this._zoom(scale, pointer);
+    // 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: this.getSelection()
+      });
     }
 
-    // Prevent default actions caused by mouse wheel.
-    event.preventDefault();
+    event.stopPropagation();
   };
 
-
   /**
-   * Mouse move handler for checking whether the title moves over a node with a title.
-   * @param  {Event} event
+   * Handle creation and updates of an item on double tap
+   * @param event
    * @private
    */
-  Network.prototype._onMouseMoveTitle = function (event) {
-    var gesture = util.fakeGesture(this, event);
-    var pointer = this._getPointer(gesture.center);
-
-    // check if the previously selected node is still selected
-    if (this.popupObj) {
-      this._checkHidePopup(pointer);
-    }
+  ItemSet.prototype._onAddItem = function (event) {
+    if (!this.options.selectable) return;
+    if (!this.options.editable.add) return;
 
-    // start a timeout that will check if the mouse is positioned above
-    // an element
-    var me = this;
-    var checkShow = function() {
-      me._checkShowPopup(pointer);
-    };
-    if (this.popupTimer) {
-      clearInterval(this.popupTimer); // stop any running calculationTimer
-    }
-    if (!this.drag.dragging) {
-      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
-    }
+    var me = this,
+        snap = this.body.util.snap || null,
+        item = ItemSet.itemFromTarget(event);
 
+    if (item) {
+      // update item
 
-    /**
-     * Adding hover highlights
-     */
-    if (this.constants.hover == true) {
-      // removing all hover highlights
-      for (var edgeId in this.hoverObj.edges) {
-        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
-          this.hoverObj.edges[edgeId].hover = false;
-          delete this.hoverObj.edges[edgeId];
+      // 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.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'
+      };
 
-      // adding hover highlights
-      var obj = this._getNodeAt(pointer);
-      if (obj == null) {
-        obj = this._getEdgeAt(pointer);
+      // 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;
       }
-      if (obj != null) {
-        this._hoverObject(obj);
+
+      newItem[this.itemsData.fieldId] = util.randomUUID();
+
+      var group = ItemSet.groupFromTarget(event);
+      if (group) {
+        newItem.group = group.groupId;
       }
 
-      // removing all node hover highlights except for the selected one.
-      for (var nodeId in this.hoverObj.nodes) {
-        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
-            this._blurObject(this.hoverObj.nodes[nodeId]);
-            delete this.hoverObj.nodes[nodeId];
-          }
+      // execute async handler to customize (or cancel) adding an item
+      this.options.onAdd(newItem, function (item) {
+        if (item) {
+          me.itemsData.add(newItem);
+          // TODO: need to trigger a redraw?
         }
-      }
-      this.redraw();
+      });
     }
   };
 
   /**
-   * Check if there is an element on the given position in the network
-   * (a node or edge). If so, and if this element has a title,
-   * show a popup window with its title.
-   *
-   * @param {{x:Number, y:Number}} pointer
+   * Handle selecting/deselecting multiple items when holding an item
+   * @param {Event} event
    * @private
    */
-  Network.prototype._checkShowPopup = function (pointer) {
-    var obj = {
-      left:   this._XconvertDOMtoCanvas(pointer.x),
-      top:    this._YconvertDOMtoCanvas(pointer.y),
-      right:  this._XconvertDOMtoCanvas(pointer.x),
-      bottom: this._YconvertDOMtoCanvas(pointer.y)
-    };
+  ItemSet.prototype._onMultiSelectItem = function (event) {
+    if (!this.options.selectable) return;
 
-    var id;
-    var lastPopupNode = this.popupObj;
+    var selection,
+        item = ItemSet.itemFromTarget(event);
 
-    if (this.popupObj == undefined) {
-      // search the nodes for overlap, select the top one in case of multiple nodes
-      var nodes = this.nodes;
-      for (id in nodes) {
-        if (nodes.hasOwnProperty(id)) {
-          var node = nodes[id];
-          if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
-            this.popupObj = node;
-            break;
-          }
-        }
+    if (item) {
+      // multi select items
+      selection = this.getSelection(); // current selection
+      var index = selection.indexOf(item.id);
+      if (index == -1) {
+        // item is not yet selected -> select it
+        selection.push(item.id);
       }
-    }
-
-    if (this.popupObj === undefined) {
-      // search the edges for overlap
-      var edges = this.edges;
-      for (id in edges) {
-        if (edges.hasOwnProperty(id)) {
-          var edge = edges[id];
-          if (edge.connected && (edge.getTitle() !== undefined) &&
-              edge.isOverlappingWith(obj)) {
-            this.popupObj = edge;
-            break;
-          }
-        }
+      else {
+        // item is already selected -> deselect it
+        selection.splice(index, 1);
       }
-    }
+      this.setSelection(selection);
 
-    if (this.popupObj) {
-      // show popup message window
-      if (this.popupObj != lastPopupNode) {
-        var me = this;
-        if (!me.popup) {
-          me.popup = new Popup(me.frame, me.constants.tooltip);
-        }
+      this.body.emitter.emit('select', {
+        items: this.getSelection()
+      });
 
-        // adjust a small offset such that the mouse cursor is located in the
-        // bottom left location of the popup, and you can easily move over the
-        // popup area
-        me.popup.setPosition(pointer.x - 3, pointer.y - 3);
-        me.popup.setText(me.popupObj.getTitle());
-        me.popup.show();
-      }
-    }
-    else {
-      if (this.popup) {
-        this.popup.hide();
-      }
+      event.stopPropagation();
     }
   };
 
-
   /**
-   * Check if the popup must be hided, which is the case when the mouse is no
-   * longer hovering on the object
-   * @param {{x:Number, y:Number}} pointer
-   * @private
+   * 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
    */
-  Network.prototype._checkHidePopup = function (pointer) {
-    if (!this.popupObj || !this._getNodeAt(pointer) ) {
-      this.popupObj = undefined;
-      if (this.popup) {
-        this.popup.hide();
+  ItemSet.itemFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-item')) {
+        return target['timeline-item'];
       }
+      target = target.parentNode;
     }
-  };
 
+    return null;
+  };
 
   /**
-   * Set a new size for the network
-   * @param {string} width   Width in pixels or percentage (for example '800px'
-   *                         or '50%')
-   * @param {string} height  Height in pixels or percentage  (for example '400px'
-   *                         or '30%')
+   * 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
    */
-  Network.prototype.setSize = function(width, height) {
-    this.frame.style.width = width;
-    this.frame.style.height = height;
-
-    this.frame.canvas.style.width = '100%';
-    this.frame.canvas.style.height = '100%';
-
-    this.frame.canvas.width = this.frame.canvas.clientWidth;
-    this.frame.canvas.height = this.frame.canvas.clientHeight;
-
-    if (this.manipulationDiv !== undefined) {
-      this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
-    }
-    if (this.navigationDivs !== undefined) {
-      if (this.navigationDivs['wrapper'] !== undefined) {
-        this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-        this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+  ItemSet.groupFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-group')) {
+        return target['timeline-group'];
       }
+      target = target.parentNode;
     }
 
-    this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
+    return null;
   };
 
   /**
-   * Set a data set with nodes for the network
-   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
-   * @private
+   * 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
    */
-  Network.prototype._setNodes = function(nodes) {
-    var oldNodesData = this.nodesData;
-
-    if (nodes instanceof DataSet || nodes instanceof DataView) {
-      this.nodesData = nodes;
-    }
-    else if (nodes instanceof Array) {
-      this.nodesData = new DataSet();
-      this.nodesData.add(nodes);
-    }
-    else if (!nodes) {
-      this.nodesData = new DataSet();
-    }
-    else {
-      throw new TypeError('Array or DataSet expected');
+  ItemSet.itemSetFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-itemset')) {
+        return target['timeline-itemset'];
+      }
+      target = target.parentNode;
     }
 
-    if (oldNodesData) {
-      // unsubscribe from old dataset
-      util.forEach(this.nodesListeners, function (callback, event) {
-        oldNodesData.off(event, callback);
-      });
-    }
+    return null;
+  };
 
-    // remove drawn nodes
-    this.nodes = {};
+  module.exports = ItemSet;
 
-    if (this.nodesData) {
-      // subscribe to new dataset
-      var me = this;
-      util.forEach(this.nodesListeners, function (callback, event) {
-        me.nodesData.on(event, callback);
-      });
 
-      // draw all new nodes
-      var ids = this.nodesData.getIds();
-      this._addNodes(ids);
-    }
-    this._updateSelection();
-  };
+/***/ },
+/* 25 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var stack = __webpack_require__(26);
+  var ItemRange = __webpack_require__(27);
 
   /**
-   * Add nodes
-   * @param {Number[] | String[]} ids
-   * @private
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  Network.prototype._addNodes = function(ids) {
-    var id;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      id = ids[i];
-      var data = this.nodesData.get(id);
-      var node = new Node(data, this.images, this.groups, this.constants);
-      this.nodes[id] = node; // note: this may replace an existing node
+  function Group (groupId, data, itemSet) {
+    this.groupId = groupId;
 
-      if ((node.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
-        var radius = 10 * 0.1*ids.length;
-        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.itemSet = itemSet;
+
+    this.dom = {};
+    this.props = {
+      label: {
+        width: 0,
+        height: 0
       }
-      this.moving = true;
-    }
-    this._updateNodeIndexList();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateCalculationNodes();
-    this._reconnectEdges();
-    this._updateValueRange(this.nodes);
-    this.updateLabels();
-  };
+    };
+    this.className = null;
+
+    this.items = {};        // items filtered by groupId of this group
+    this.visibleItems = []; // items currently visible in window
+    this.orderedItems = {   // items sorted by start and by end
+      byStart: [],
+      byEnd: []
+    };
+
+    this._create();
+
+    this.setData(data);
+  }
 
   /**
-   * Update existing nodes, or create them when not yet existing
-   * @param {Number[] | String[]} ids
+   * Create DOM elements for the group
    * @private
    */
-  Network.prototype._updateNodes = function(ids) {
-    var nodes = this.nodes,
-        nodesData = this.nodesData;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      var node = nodes[id];
-      var data = nodesData.get(id);
-      if (node) {
-        // update node
-        node.setProperties(data, this.constants);
-      }
-      else {
-        // create node
-        node = new Node(properties, this.images, this.groups, this.constants);
-        nodes[id] = node;
-      }
-    }
-    this.moving = true;
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateNodeIndexList();
-    this._reconnectEdges();
-    this._updateValueRange(nodes);
+  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';
+
+    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';
+    this.dom.marker.innerHTML = '?';
+    this.dom.background.appendChild(this.dom.marker);
   };
 
   /**
-   * Remove existing nodes. If nodes do not exist, the method will just ignore it.
-   * @param {Number[] | String[]} ids
-   * @private
+   * Set the group data for this group
+   * @param {Object} data   Group data, can contain properties content and className
    */
-  Network.prototype._removeNodes = function(ids) {
-    var nodes = this.nodes;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      delete nodes[id];
+  Group.prototype.setData = function(data) {
+    // update contents
+    var content = data && data.content;
+    if (content instanceof Element) {
+      this.dom.inner.appendChild(content);
     }
-    this._updateNodeIndexList();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    else if (content != undefined) {
+      this.dom.inner.innerHTML = content;
+    }
+    else {
+      this.dom.inner.innerHTML = this.groupId;
+    }
+
+    // update title
+    this.dom.label.title = data && data.title || '';
+
+    if (!this.dom.inner.firstChild) {
+      util.addClassName(this.dom.inner, 'hidden');
+    }
+    else {
+      util.removeClassName(this.dom.inner, 'hidden');
+    }
+
+    // update className
+    var className = data && data.className || null;
+    if (className != this.className) {
+      if (this.className) {
+        util.removeClassName(this.dom.label, className);
+        util.removeClassName(this.dom.foreground, className);
+        util.removeClassName(this.dom.background, className);
+        util.removeClassName(this.dom.axis, 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._updateCalculationNodes();
-    this._reconnectEdges();
-    this._updateSelection();
-    this._updateValueRange(nodes);
   };
 
   /**
-   * Load edges by reading the data table
-   * @param {Array | DataSet | DataView} edges    The data containing the edges.
-   * @private
-   * @private
+   * Get the width of the group label
+   * @return {number} width
    */
-  Network.prototype._setEdges = function(edges) {
-    var oldEdgesData = this.edgesData;
+  Group.prototype.getLabelWidth = function() {
+    return this.props.label.width;
+  };
 
-    if (edges instanceof DataSet || edges instanceof DataView) {
-      this.edgesData = edges;
-    }
-    else if (edges instanceof Array) {
-      this.edgesData = new DataSet();
-      this.edgesData.add(edges);
+
+  /**
+   * Repaint this group
+   * @param {{start: number, end: number}} range
+   * @param {{item: number, axis: number}} margin
+   * @param {boolean} [restack=false]  Force restacking of all items
+   * @return {boolean} Returns true if the group is resized
+   */
+  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;
+
+      util.forEach(this.items, function (item) {
+        item.dirty = true;
+        if (item.displayed) item.redraw();
+      });
+
+      restack = true;
     }
-    else if (!edges) {
-      this.edgesData = new DataSet();
+
+    // reposition visible items vertically
+    if (this.itemSet.options.stack) { // TODO: ugly way to access options...
+      stack.stack(this.visibleItems, margin, restack);
     }
-    else {
-      throw new TypeError('Array or DataSet expected');
+    else { // no stacking
+      stack.nostack(this.visibleItems, margin);
     }
 
-    if (oldEdgesData) {
-      // unsubscribe from old dataset
-      util.forEach(this.edgesListeners, function (callback, event) {
-        oldEdgesData.off(event, callback);
+    // recalculate the height of the group
+    var height;
+    var visibleItems = this.visibleItems;
+    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 (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 / 2;
+    }
+    else {
+      height = margin.axis + margin.item;
     }
+    height = Math.max(height, this.props.label.height);
 
-    // remove drawn edges
-    this.edges = {};
+    // 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;
 
-    if (this.edgesData) {
-      // subscribe to new dataset
-      var me = this;
-      util.forEach(this.edgesListeners, function (callback, event) {
-        me.edgesData.on(event, callback);
-      });
+    // 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;
 
-      // draw all new nodes
-      var ids = this.edgesData.getIds();
-      this._addEdges(ids);
+    // apply new height
+    this.dom.background.style.height  = height + 'px';
+    this.dom.foreground.style.height  = height + 'px';
+    this.dom.label.style.height = height + 'px';
+
+    // 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();
     }
 
-    this._reconnectEdges();
+    return resized;
   };
 
   /**
-   * Add edges
-   * @param {Number[] | String[]} ids
-   * @private
+   * Show this group: attach to the DOM
    */
-  Network.prototype._addEdges = function (ids) {
-    var edges = this.edges,
-        edgesData = this.edgesData;
-
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
+  Group.prototype.show = function() {
+    if (!this.dom.label.parentNode) {
+      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+    }
 
-      var oldEdge = edges[id];
-      if (oldEdge) {
-        oldEdge.disconnect();
-      }
+    if (!this.dom.foreground.parentNode) {
+      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
+    }
 
-      var data = edgesData.get(id, {"showInternalIds" : true});
-      edges[id] = new Edge(data, this, this.constants);
+    if (!this.dom.background.parentNode) {
+      this.itemSet.dom.background.appendChild(this.dom.background);
     }
 
-    this.moving = true;
-    this._updateValueRange(edges);
-    this._createBezierNodes();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    if (!this.dom.axis.parentNode) {
+      this.itemSet.dom.axis.appendChild(this.dom.axis);
     }
-    this._updateCalculationNodes();
   };
 
   /**
-   * Update existing edges, or create them when not yet existing
-   * @param {Number[] | String[]} ids
-   * @private
+   * Hide this group: remove from the DOM
    */
-  Network.prototype._updateEdges = function (ids) {
-    var edges = this.edges,
-        edgesData = this.edgesData;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-
-      var data = edgesData.get(id);
-      var edge = edges[id];
-      if (edge) {
-        // update edge
-        edge.disconnect();
-        edge.setProperties(data, this.constants);
-        edge.connect();
-      }
-      else {
-        // create edge
-        edge = new Edge(data, this, this.constants);
-        this.edges[id] = edge;
-      }
+  Group.prototype.hide = function() {
+    var label = this.dom.label;
+    if (label.parentNode) {
+      label.parentNode.removeChild(label);
     }
 
-    this._createBezierNodes();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    var foreground = this.dom.foreground;
+    if (foreground.parentNode) {
+      foreground.parentNode.removeChild(foreground);
     }
-    this.moving = true;
-    this._updateValueRange(edges);
-  };
 
-  /**
-   * Remove existing edges. Non existing ids will be ignored
-   * @param {Number[] | String[]} ids
-   * @private
-   */
-  Network.prototype._removeEdges = function (ids) {
-    var edges = this.edges;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      var edge = edges[id];
-      if (edge) {
-        if (edge.via != null) {
-          delete this.sectors['support']['nodes'][edge.via.id];
-        }
-        edge.disconnect();
-        delete edges[id];
-      }
+    var background = this.dom.background;
+    if (background.parentNode) {
+      background.parentNode.removeChild(background);
     }
 
-    this.moving = true;
-    this._updateValueRange(edges);
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    var axis = this.dom.axis;
+    if (axis.parentNode) {
+      axis.parentNode.removeChild(axis);
     }
-    this._updateCalculationNodes();
   };
 
   /**
-   * Reconnect all edges
-   * @private
+   * Add an item to the group
+   * @param {Item} item
    */
-  Network.prototype._reconnectEdges = function() {
-    var id,
-        nodes = this.nodes,
-        edges = this.edges;
-    for (id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        nodes[id].edges = [];
-      }
-    }
+  Group.prototype.add = function(item) {
+    this.items[item.id] = item;
+    item.setParent(this);
 
-    for (id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        var edge = edges[id];
-        edge.from = null;
-        edge.to = null;
-        edge.connect();
-      }
+    if (item instanceof ItemRange && 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);
     }
   };
 
   /**
-   * Update the values of all object in the given array according to the current
-   * value range of the objects in the array.
-   * @param {Object} obj    An object containing a set of Edges or Nodes
-   *                        The objects must have a method getValue() and
-   *                        setValueRange(min, max).
-   * @private
+   * Remove an item from the group
+   * @param {Item} item
    */
-  Network.prototype._updateValueRange = function(obj) {
-    var id;
+  Group.prototype.remove = function(item) {
+    delete this.items[item.id];
+    item.setParent(this.itemSet);
 
-    // determine the range of the objects
-    var valueMin = undefined;
-    var valueMax = undefined;
-    for (id in obj) {
-      if (obj.hasOwnProperty(id)) {
-        var value = obj[id].getValue();
-        if (value !== undefined) {
-          valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
-          valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
-        }
-      }
-    }
+    // remove from visible items
+    var index = this.visibleItems.indexOf(item);
+    if (index != -1) this.visibleItems.splice(index, 1);
 
-    // adjust the range of all objects
-    if (valueMin !== undefined && valueMax !== undefined) {
-      for (id in obj) {
-        if (obj.hasOwnProperty(id)) {
-          obj[id].setValueRange(valueMin, valueMax);
-        }
-      }
-    }
+    // TODO: also remove from ordered items?
   };
 
   /**
-   * Redraw the network with the current data
-   * chart will be resized too.
+   * Remove an item from the corresponding DataSet
+   * @param {Item} item
    */
-  Network.prototype.redraw = function() {
-    this.setSize(this.width, this.height);
-    this._redraw();
+  Group.prototype.removeFromDataSet = function(item) {
+    this.itemSet.removeItem(item.id);
   };
 
   /**
-   * Redraw the network with the current data
-   * @private
+   * Reorder the items
    */
-  Network.prototype._redraw = function() {
-    var ctx = this.frame.canvas.getContext('2d');
-    // clear the canvas
-    var w = this.frame.canvas.width;
-    var h = this.frame.canvas.height;
-    ctx.clearRect(0, 0, w, h);
-
-    // set scaling and translation
-    ctx.save();
-    ctx.translate(this.translation.x, this.translation.y);
-    ctx.scale(this.scale, this.scale);
-
-    this.canvasTopLeft = {
-      "x": this._XconvertDOMtoCanvas(0),
-      "y": this._YconvertDOMtoCanvas(0)
-    };
-    this.canvasBottomRight = {
-      "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
-      "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
-    };
-
-
-    this._doInAllSectors("_drawAllSectorNodes",ctx);
-    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
-      this._doInAllSectors("_drawEdges",ctx);
-    }
-
-    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
-      this._doInAllSectors("_drawNodes",ctx,false);
-    }
-
-    if (this.controlNodesActive == true) {
-      this._doInAllSectors("_drawControlNodes",ctx);
-    }
-
-  //  this._doInSupportSector("_drawNodes",ctx,true);
-  //  this._drawTree(ctx,"#F00F0F");
+  Group.prototype.order = function() {
+    var array = util.toArray(this.items);
+    this.orderedItems.byStart = array;
+    this.orderedItems.byEnd = this._constructByEndArray(array);
 
-    // restore original scaling and translation
-    ctx.restore();
+    stack.orderByStart(this.orderedItems.byStart);
+    stack.orderByEnd(this.orderedItems.byEnd);
   };
 
   /**
-   * Set the translation of the network
-   * @param {Number} offsetX    Horizontal offset
-   * @param {Number} offsetY    Vertical offset
+   * Create an array containing all items being a range (having an end date)
+   * @param {Item[]} array
+   * @returns {ItemRange[]}
    * @private
    */
-  Network.prototype._setTranslation = function(offsetX, offsetY) {
-    if (this.translation === undefined) {
-      this.translation = {
-        x: 0,
-        y: 0
-      };
-    }
+  Group.prototype._constructByEndArray = function(array) {
+    var endArray = [];
 
-    if (offsetX !== undefined) {
-      this.translation.x = offsetX;
-    }
-    if (offsetY !== undefined) {
-      this.translation.y = offsetY;
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] instanceof ItemRange) {
+        endArray.push(array[i]);
+      }
     }
-
-    this.emit('viewChanged');
+    return endArray;
   };
 
   /**
-   * Get the translation of the network
-   * @return {Object} translation    An object with parameters x and y, both a number
+   * 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
    */
-  Network.prototype._getTranslation = function() {
-    return {
-      x: this.translation.x,
-      y: this.translation.y
-    };
-  };
+  Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
+    var initialPosByStart,
+        newVisibleItems = [],
+        i;
 
-  /**
-   * Scale the network
-   * @param {Number} scale   Scaling factor 1.0 is unscaled
-   * @private
-   */
-  Network.prototype._setScale = function(scale) {
-    this.scale = scale;
-  };
+    // first check if the items that were in view previously are still in view.
+    // this handles the case for the ItemRange that is both before and after the current one.
+    if (visibleItems.length > 0) {
+      for (i = 0; i < visibleItems.length; i++) {
+        this._checkIfVisible(visibleItems[i], newVisibleItems, range);
+      }
+    }
 
-  /**
-   * Get the current scale of  the network
-   * @return {Number} scale   Scaling factor 1.0 is unscaled
-   * @private
-   */
-  Network.prototype._getScale = function() {
-    return this.scale;
-  };
+    // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
+    if (newVisibleItems.length == 0) {
+      initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
+    }
+    else {
+      initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
+    }
 
-  /**
-   * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
-   * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
-   * @param {number} x
-   * @returns {number}
-   * @private
-   */
-  Network.prototype._XconvertDOMtoCanvas = function(x) {
-    return (x - this.translation.x) / this.scale;
-  };
+    // use visible search to find a visible ItemRange (only based on endTime)
+    var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
 
-  /**
-   * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
-   * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
-   * @param {number} x
-   * @returns {number}
-   * @private
-   */
-  Network.prototype._XconvertCanvasToDOM = function(x) {
-    return x * this.scale + this.translation.x;
+    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+    if (initialPosByStart != -1) {
+      for (i = initialPosByStart; i >= 0; i--) {
+        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      }
+      for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
+        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      }
+    }
+
+    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+    if (initialPosByEnd != -1) {
+      for (i = initialPosByEnd; i >= 0; i--) {
+        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+      }
+      for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
+        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+      }
+    }
+
+    return newVisibleItems;
   };
 
+
+
   /**
-   * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
-   * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
-   * @param {number} y
-   * @returns {number}
+   * this function checks if an item is invisible. If it is NOT we make it visible
+   * and add it to the global visible items. If it is, return true.
+   *
+   * @param {Item} item
+   * @param {Item[]} visibleItems
+   * @param {{start:number, end:number}} range
+   * @returns {boolean}
    * @private
    */
-  Network.prototype._YconvertDOMtoCanvas = function(y) {
-    return (y - this.translation.y) / this.scale;
+  Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
+    if (item.isVisible(range)) {
+      if (!item.displayed) item.show();
+      item.repositionX();
+      if (visibleItems.indexOf(item) == -1) {
+        visibleItems.push(item);
+      }
+      return false;
+    }
+    else {
+      if (item.displayed) item.hide();
+      return true;
+    }
   };
 
   /**
-   * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
-   * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
-   * @param {number} y
-   * @returns {number}
+   * 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
    */
-  Network.prototype._YconvertCanvasToDOM = function(y) {
-    return y * this.scale + this.translation.y ;
+  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();
+    }
   };
 
+  module.exports = Group;
+
+
+/***/ },
+/* 26 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // Utility functions for ordering and stacking of items
+  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
 
   /**
-   *
-   * @param {object} pos   = {x: number, y: number}
-   * @returns {{x: number, y: number}}
-   * @constructor
+   * Order items by their start data
+   * @param {Item[]} items
    */
-  Network.prototype.canvasToDOM = function(pos) {
-    return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
-  }
+  exports.orderByStart = function(items) {
+    items.sort(function (a, b) {
+      return a.data.start - b.data.start;
+    });
+  };
 
   /**
-   *
-   * @param {object} pos   = {x: number, y: number}
-   * @returns {{x: number, y: number}}
-   * @constructor
+   * Order items by their end date. If they have no end date, their start date
+   * is used.
+   * @param {Item[]} items
    */
-  Network.prototype.DOMtoCanvas = function(pos) {
-    return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
-  }
+  exports.orderByEnd = function(items) {
+    items.sort(function (a, b) {
+      var aTime = ('end' in a.data) ? a.data.end : a.data.start,
+          bTime = ('end' in b.data) ? b.data.end : b.data.start;
+
+      return aTime - bTime;
+    });
+  };
 
   /**
-   * Redraw all nodes
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Boolean} [alwaysShow]
-   * @private
+   * Adjust vertical positions of the items such that they don't overlap each
+   * other.
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: number, axis: number}} margin
+   *            Margins between items and between items and the axis.
+   * @param {boolean} [force=false]
+   *            If true, all items will be repositioned. If false (default), only
+   *            items having a top===null will be re-stacked
    */
-  Network.prototype._drawNodes = function(ctx,alwaysShow) {
-    if (alwaysShow === undefined) {
-      alwaysShow = false;
+  exports.stack = function(items, margin, force) {
+    var i, iMax;
+
+    if (force) {
+      // reset top position of all items
+      for (i = 0, iMax = items.length; i < iMax; i++) {
+        items[i].top = null;
+      }
     }
 
-    // first draw the unselected nodes
-    var nodes = this.nodes;
-    var selected = [];
+    // calculate new, non-overlapping positions
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      var item = items[i];
+      if (item.top === null) {
+        // initialize top position
+        item.top = margin.axis;
 
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
-        if (nodes[id].isSelected()) {
-          selected.push(id);
-        }
-        else {
-          if (nodes[id].inArea() || alwaysShow) {
-            nodes[id].draw(ctx);
+        do {
+          // TODO: optimize checking for overlap. when there is a gap without items,
+          //       you only need to check for items from the next item on, not from zero
+          var collidingItem = null;
+          for (var j = 0, jj = items.length; j < jj; j++) {
+            var other = items[j];
+            if (other.top !== null && other !== item && exports.collision(item, other, margin.item)) {
+              collidingItem = other;
+              break;
+            }
           }
-        }
-      }
-    }
 
-    // draw the selected nodes on top
-    for (var s = 0, sMax = selected.length; s < sMax; s++) {
-      if (nodes[selected[s]].inArea() || alwaysShow) {
-        nodes[selected[s]].draw(ctx);
+          if (collidingItem != null) {
+            // There is a collision. Reposition the items above the colliding element
+            item.top = collidingItem.top + collidingItem.height + margin.item;
+          }
+        } while (collidingItem);
       }
     }
   };
 
   /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
+   * Adjust vertical positions of the items without stacking them
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: number, axis: number}} margin
+   *            Margins between items and between items and the axis.
    */
-  Network.prototype._drawEdges = function(ctx) {
-    var edges = this.edges;
-    for (var id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        var edge = edges[id];
-        edge.setScale(this.scale);
-        if (edge.connected) {
-          edges[id].draw(ctx);
-        }
-      }
+  exports.nostack = function(items, margin) {
+    var i, iMax;
+
+    // reset top position of all items
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      items[i].top = margin.axis;
     }
   };
 
   /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
+   * Test if the two provided items collide
+   * The items must have parameters left, width, top, and height.
+   * @param {Item} a          The first item
+   * @param {Item} b          The second item
+   * @param {Number} margin   A minimum required margin.
+   *                          If margin is provided, the two items will be
+   *                          marked colliding when they overlap or
+   *                          when the margin between the two is smaller than
+   *                          the requested margin.
+   * @return {boolean}        true if a and b collide, else false
    */
-  Network.prototype._drawControlNodes = function(ctx) {
-    var edges = this.edges;
-    for (var id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        edges[id]._drawControlNodes(ctx);
-      }
-    }
+  exports.collision = function(a, b, margin) {
+    return ((a.left - margin + EPSILON)       < (b.left + b.width) &&
+        (a.left + a.width + margin - EPSILON) > b.left &&
+        (a.top - margin + EPSILON)            < (b.top + b.height) &&
+        (a.top + a.height + margin - EPSILON) > b.top);
   };
 
-  /**
-   * Find a stable position for all nodes
-   * @private
-   */
-  Network.prototype._stabilize = function() {
-    if (this.constants.freezeForStabilization == true) {
-      this._freezeDefinedNodes();
-    }
 
-    // find stable position
-    var count = 0;
-    while (this.moving && count < this.constants.stabilizationIterations) {
-      this._physicsTick();
-      count++;
-    }
-    this.zoomExtent(false,true);
-    if (this.constants.freezeForStabilization == true) {
-      this._restoreFrozenNodes();
-    }
-    this.emit("stabilized",{iterations:count});
-  };
+/***/ },
+/* 27 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(3);
+  var Item = __webpack_require__(28);
 
   /**
-   * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
-   * because only the supportnodes for the smoothCurves have to settle.
-   *
-   * @private
+   * @constructor ItemRange
+   * @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
    */
-  Network.prototype._freezeDefinedNodes = function() {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        if (nodes[id].x != null && nodes[id].y != null) {
-          nodes[id].fixedData.x = nodes[id].xFixed;
-          nodes[id].fixedData.y = nodes[id].yFixed;
-          nodes[id].xFixed = true;
-          nodes[id].yFixed = true;
-        }
+  function ItemRange (data, conversion, options) {
+    this.props = {
+      content: {
+        width: 0
       }
-    }
-  };
+    };
+    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
 
-  /**
-   * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
-   *
-   * @private
-   */
-  Network.prototype._restoreFrozenNodes = function() {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        if (nodes[id].fixedData.x != null) {
-          nodes[id].xFixed = nodes[id].fixedData.x;
-          nodes[id].yFixed = nodes[id].fixedData.y;
-        }
+    // 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);
       }
     }
-  };
 
+    Item.call(this, data, conversion, options);
+  }
+
+  ItemRange.prototype = new Item (null, null, null);
+
+  ItemRange.prototype.baseClassName = 'item range';
 
   /**
-   * Check if any of the nodes is still moving
-   * @param {number} vmin   the minimum velocity considered as 'moving'
-   * @return {boolean}      true if moving, false if non of the nodes is moving
-   * @private
+   * 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
    */
-  Network.prototype._isMoving = function(vmin) {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
-        return true;
-      }
-    }
-    return false;
+  ItemRange.prototype.isVisible = function(range) {
+    // determine visibility
+    return (this.data.start < range.end) && (this.data.end > range.start);
   };
 
-
   /**
-   * /**
-   * Perform one discrete step for all nodes
-   *
-   * @private
+   * Repaint the item
    */
-  Network.prototype._discreteStepNodes = function() {
-    var interval = this.physicsDiscreteStepsize;
-    var nodes = this.nodes;
-    var nodeId;
-    var nodesPresent = false;
+  ItemRange.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    if (this.constants.maxVelocity > 0) {
-      for (nodeId in nodes) {
-        if (nodes.hasOwnProperty(nodeId)) {
-          nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
-          nodesPresent = true;
-        }
-      }
+        // background box
+      dom.box = document.createElement('div');
+      // className is updated in redraw()
+
+      // 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;
     }
-    else {
-      for (nodeId in nodes) {
-        if (nodes.hasOwnProperty(nodeId)) {
-          nodes[nodeId].discreteStep(interval);
-          nodesPresent = 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 time axis: parent has no foreground container element');
       }
+      foreground.appendChild(dom.box);
     }
+    this.displayed = true;
 
-    if (nodesPresent == true) {
-      var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
-      if (vminCorrected > 0.5*this.constants.maxVelocity) {
-        this.moving = true;
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
       }
       else {
-        this.moving = this._isMoving(vminCorrected) || this.constants.configurePhysics;
+        throw new Error('Property "content" missing in item ' + this.data.id);
       }
-    }
-  };
 
-  /**
-   * A single simulation step (or "tick") in the physics simulation
-   *
-   * @private
-   */
-  Network.prototype._physicsTick = function() {
-    if (!this.freezeSimulation) {
-      if (this.moving) {
-        this._doInAllActiveSectors("_initializeForceCalculation");
-        this._doInAllActiveSectors("_discreteStepNodes");
-        if (this.constants.smoothCurves) {
-          this._doInSupportSector("_discreteStepNodes");
-        }
-        this._findCenter(this._getRange())
-      }
+      this.dirty = true;
     }
-  };
 
+    // update title
+    if (this.data.title != this.title) {
+      dom.box.title = this.data.title;
+      this.title = this.data.title;
+    }
 
-  /**
-   * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
-   * It reschedules itself at the beginning of the function
-   *
-   * @private
-   */
-  Network.prototype._animationStep = function() {
-    // reset the timer so a new scheduled animation step can be set
-    this.timer = undefined;
-    // handle the keyboad movement
-    this._handleNavigation();
+    // update class
+    var className = (this.data.className ? (' ' + this.data.className) : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.box.className = this.baseClassName + className;
 
-    // this schedules a new animation step
-    this.start();
+      this.dirty = true;
+    }
 
-    // start the physics simulation
-    var calculationTime = Date.now();
-    var maxSteps = 1;
-    this._physicsTick();
-    var timeRequired = Date.now() - calculationTime;
-    while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
-      this._physicsTick();
-      timeRequired = Date.now() - calculationTime;
-      maxSteps++;
+    // recalculate size
+    if (this.dirty) {
+      // determine from css whether this box has overflow
+      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+
+      this.props.content.width = this.dom.content.offsetWidth;
+      this.height = this.dom.box.offsetHeight;
+
+      this.dirty = false;
     }
 
-    // start the rendering process
-    var renderTime = Date.now();
-    this._redraw();
-    this.renderTime = Date.now() - renderTime;
+    this._repaintDeleteButton(dom.box);
+    this._repaintDragLeft();
+    this._repaintDragRight();
+  };
 
+  /**
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
+   */
+  ItemRange.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
+    }
   };
 
-  if (typeof window !== 'undefined') {
-    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-  }
+  /**
+   * Hide the item from the DOM (when visible)
+   * @return {Boolean} changed
+   */
+  ItemRange.prototype.hide = function() {
+    if (this.displayed) {
+      var box = this.dom.box;
+
+      if (box.parentNode) {
+        box.parentNode.removeChild(box);
+      }
+
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
+    }
+  };
 
   /**
-   * Schedule a animation step with the refreshrate interval.
+   * Reposition the item horizontally
+   * @Override
    */
-  Network.prototype.start = function() {
-    if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
-      if (!this.timer) {
-        var ua = navigator.userAgent.toLowerCase();
+  // TODO: delete the old function
+  ItemRange.prototype.repositionX = function() {
+    var props = this.props,
+        parentWidth = this.parent.width,
+        start = this.conversion.toScreen(this.data.start),
+        end = this.conversion.toScreen(this.data.end),
+        padding = this.options.padding,
+        contentLeft;
 
-        var requiresTimeout = false;
-        if (ua.indexOf('msie 9.0') != -1) { // IE 9
-          requiresTimeout = true;
-        }
-        else if (ua.indexOf('safari') != -1) {  // safari
-          if (ua.indexOf('chrome') <= -1) {
-            requiresTimeout = true;
-          }
-        }
+    // 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);
 
-        if (requiresTimeout == true) {
-          this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
-        }
-        else{
-          this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
-        }
+    if (this.overflow) {
+      // when range exceeds left of the window, position the contents at the left of the visible area
+      contentLeft = Math.max(-start, 0);
+
+      this.left = start;
+      this.width = boxWidth + this.props.content.width;
+      // Note: The calculation of width is an optimistic calculation, giving
+      //       a width which will not change when moving the Timeline
+      //       So no restacking needed, which is nicer for the eye;
+    }
+    else { // no overflow
+      // when range exceeds left of the window, position the contents at the left of the visible area
+      if (start < 0) {
+        contentLeft = Math.min(-start,
+            (end - start - props.content.width - 2 * padding));
+        // TODO: remove the need for options.padding. it's terrible.
       }
+      else {
+        contentLeft = 0;
+      }
+
+      this.left = start;
+      this.width = boxWidth;
+    }
+
+    this.dom.box.style.left = this.left + 'px';
+    this.dom.box.style.width = boxWidth + 'px';
+    this.dom.content.style.left = contentLeft + 'px';
+  };
+
+  /**
+   * Reposition the item vertically
+   * @Override
+   */
+  ItemRange.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box;
+
+    if (orientation == 'top') {
+      box.style.top = this.top + 'px';
     }
     else {
-      this._redraw();
+      box.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
   };
 
-
   /**
-   * Move the network according to the keyboard presses.
-   *
-   * @private
+   * Repaint a drag area on the left side of the range when the range is selected
+   * @protected
    */
-  Network.prototype._handleNavigation = function() {
-    if (this.xIncrement != 0 || this.yIncrement != 0) {
-      var translation = this._getTranslation();
-      this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
+  ItemRange.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;
+
+      // 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;
     }
-    if (this.zoomIncrement != 0) {
-      var center = {
-        x: this.frame.canvas.clientWidth / 2,
-        y: this.frame.canvas.clientHeight / 2
-      };
-      this._zoom(this.scale*(1 + this.zoomIncrement), center);
+    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;
     }
   };
 
-
   /**
-   *  Freeze the _animationStep
+   * Repaint a drag area on the right side of the range when the range is selected
+   * @protected
    */
-  Network.prototype.toggleFreeze = function() {
-    if (this.freezeSimulation == false) {
-      this.freezeSimulation = true;
+  ItemRange.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 {
-      this.freezeSimulation = false;
-      this.start();
+    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;
     }
   };
 
+  module.exports = ItemRange;
+
+
+/***/ },
+/* 28 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(3);
 
   /**
-   * This function cleans the support nodes if they are not needed and adds them when they are.
-   *
-   * @param {boolean} [disableStart]
-   * @private
+   * @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
    */
-  Network.prototype._configureSmoothCurves = function(disableStart) {
-    if (disableStart === undefined) {
-      disableStart = true;
-    }
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this._createBezierNodes();
-    }
-    else {
-      // delete the support nodes
-      this.sectors['support']['nodes'] = {};
-      for (var edgeId in this.edges) {
-        if (this.edges.hasOwnProperty(edgeId)) {
-          this.edges[edgeId].smooth = false;
-          this.edges[edgeId].via = null;
-        }
+  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;
+  }
+
+  /**
+   * Select current item
+   */
+  Item.prototype.select = function() {
+    this.selected = true;
+    if (this.displayed) this.redraw();
+  };
+
+  /**
+   * Unselect current item
+   */
+  Item.prototype.unselect = function() {
+    this.selected = false;
+    if (this.displayed) this.redraw();
+  };
+
+  /**
+   * 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();
       }
     }
-    this._updateCalculationNodes();
-    if (!disableStart) {
-      this.moving = true;
-      this.start();
+    else {
+      this.parent = parent;
     }
   };
 
+  /**
+   * 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;
+  };
 
   /**
-   * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
-   * are used for the force calculation.
-   *
-   * @private
+   * Show the Item in the DOM (when not already visible)
+   * @return {Boolean} changed
    */
-  Network.prototype._createBezierNodes = function() {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      for (var edgeId in this.edges) {
-        if (this.edges.hasOwnProperty(edgeId)) {
-          var edge = this.edges[edgeId];
-          if (edge.via == null) {
-            edge.smooth = true;
-            var nodeId = "edgeId:".concat(edge.id);
-            this.sectors['support']['nodes'][nodeId] = new Node(
-                    {id:nodeId,
-                      mass:1,
-                      shape:'circle',
-                      image:"",
-                      internalMultiplier:1
-                    },{},{},this.constants);
-            edge.via = this.sectors['support']['nodes'][nodeId];
-            edge.via.parentEdgeId = edge.id;
-            edge.positionBezierNode();
-          }
-        }
-      }
-    }
+  Item.prototype.show = function() {
+    return false;
   };
 
   /**
-   * load the functions that load the mixins into the prototype.
-   *
-   * @private
+   * Hide the Item from the DOM (when visible)
+   * @return {Boolean} changed
    */
-  Network.prototype._initializeMixinLoaders = function () {
-    for (var mixin in MixinLoader) {
-      if (MixinLoader.hasOwnProperty(mixin)) {
-        Network.prototype[mixin] = MixinLoader[mixin];
-      }
-    }
+  Item.prototype.hide = function() {
+    return false;
   };
 
   /**
-   * Load the XY positions of the nodes into the dataset.
+   * Repaint the item
    */
-  Network.prototype.storePosition = function() {
-    var dataArray = [];
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var node = this.nodes[nodeId];
-        var allowedToMoveX = !this.nodes.xFixed;
-        var allowedToMoveY = !this.nodes.yFixed;
-        if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
-          dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
-        }
-      }
-    }
-    this.nodesData.update(dataArray);
+  Item.prototype.redraw = function() {
+    // should be implemented by the item
   };
 
+  /**
+   * Reposition the Item horizontally
+   */
+  Item.prototype.repositionX = function() {
+    // should be implemented by the item
+  };
 
   /**
-   * Center a node in view.
-   *
-   * @param {Number} nodeId
-   * @param {Number} [zoomLevel]
+   * Reposition the Item vertically
    */
-  Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
-    if (this.nodes.hasOwnProperty(nodeId)) {
-      if (zoomLevel === undefined) {
-        zoomLevel = this._getScale();
-      }
-      var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
+  Item.prototype.repositionY = function() {
+    // should be implemented by the item
+  };
 
-      var requiredScale = zoomLevel;
-      this._setScale(requiredScale);
+  /**
+   * 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;
 
-      var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
-      var translation = this._getTranslation();
+      var deleteButton = document.createElement('div');
+      deleteButton.className = 'delete';
+      deleteButton.title = 'Delete this item';
 
-      var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
-                                y:canvasCenter.y - nodePosition.y};
+      Hammer(deleteButton, {
+        preventDefault: true
+      }).on('tap', function (event) {
+        me.parent.removeFromDataSet(me);
+        event.stopPropagation();
+      });
 
-      this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
-                           translation.y + requiredScale * distanceFromCenter.y);
-      this.redraw();
+      anchor.appendChild(deleteButton);
+      this.dom.deleteButton = deleteButton;
     }
-    else {
-      console.log("This nodeId cannot be found.")
+    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;
     }
   };
 
-  module.exports = Network;
+  module.exports = Item;
 
 
 /***/ },
-/* 27 */
+/* 29 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(30);
+  var Item = __webpack_require__(28);
 
   /**
-   * @class Edge
-   *
-   * A edge connects two nodes
-   * @param {Object} properties     Object with properties. Must contain
-   *                                At least properties from and to.
-   *                                Available properties: from (number),
-   *                                to (number), label (string, color (string),
-   *                                width (number), style (string),
-   *                                length (number), title (string)
-   * @param {Network} network       A Network object, used to find and edge to
-   *                                nodes.
-   * @param {Object} constants      An object with default values for
-   *                                example for the color
+   * @constructor ItemBox
+   * @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 Edge (properties, network, constants) {
-    if (!network) {
-      throw "No network provided";
-    }
-    this.network = network;
+  function ItemBox (data, conversion, options) {
+    this.props = {
+      dot: {
+        width: 0,
+        height: 0
+      },
+      line: {
+        width: 0,
+        height: 0
+      }
+    };
 
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data);
+      }
+    }
 
-    // initialize variables
-    this.id     = undefined;
-    this.fromId = undefined;
-    this.toId   = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
-    this.hoverWidth = constants.edges.hoverWidth;
-    this.value  = undefined;
-    this.length = constants.physics.springLength;
-    this.customLength = false;
-    this.selected = false;
-    this.hover = false;
-    this.smoothCurves = constants.smoothCurves;
-    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
-    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
-    this.inheritColor = constants.edges.inheritColor;
+    Item.call(this, data, conversion, options);
+  }
 
-    this.from = null;   // a node
-    this.to = null;     // a node
-    this.via = null;    // a temp node
+  ItemBox.prototype = new Item (null, null, null);
 
-    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
-    // by storing the original information we can revert to the original connection when the cluser is opened.
-    this.originalFromId = [];
-    this.originalToId = [];
+  /**
+   * 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
+   */
+  ItemBox.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.connected = false;
+  /**
+   * Repaint the item
+   */
+  ItemBox.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
+      // create main box
+      dom.box = document.createElement('DIV');
 
-    this.color       = {color:constants.edges.color.color,
-                        highlight:constants.edges.color.highlight,
-                        hover:constants.edges.color.hover};
-    this.widthFixed  = false;
-    this.lengthFixed = false;
+      // 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.setProperties(properties, constants);
+      // line to axis
+      dom.line = document.createElement('DIV');
+      dom.line.className = 'line';
 
-    this.controlNodesEnabled = false;
-    this.controlNodes = {from:null, to:null, positions:{}};
-    this.connectedNode = null;
-  }
+      // dot on axis
+      dom.dot = document.createElement('DIV');
+      dom.dot.className = 'dot';
 
-  /**
-   * Set or overwrite properties for the edge
-   * @param {Object} properties  an object with properties
-   * @param {Object} constants   and object with default, global properties
-   */
-  Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
     }
 
-    if (properties.from !== undefined)           {this.fromId = properties.from;}
-    if (properties.to !== undefined)             {this.toId = properties.to;}
+    // 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 time axis: 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 time axis: 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 time axis: parent has no axis container element');
+      axis.appendChild(dom.dot);
+    }
+    this.displayed = true;
 
-    if (properties.id !== undefined)             {this.id = properties.id;}
-    if (properties.style !== undefined)          {this.style = properties.style;}
-    if (properties.label !== undefined)          {this.label = properties.label;}
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
+      }
+      else {
+        throw new Error('Property "content" missing in item ' + this.data.id);
+      }
 
-    if (this.label) {
-      this.fontSize = constants.edges.fontSize;
-      this.fontFace = constants.edges.fontFace;
-      this.fontColor = constants.edges.fontColor;
-      this.fontFill = constants.edges.fontFill;
+      this.dirty = true;
+    }
 
-      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
-      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
-      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
-      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    // update title
+    if (this.data.title != this.title) {
+      dom.box.title = this.data.title;
+      this.title = this.data.title;
     }
 
-    if (properties.title !== undefined)        {this.title = properties.title;}
-    if (properties.width !== undefined)        {this.width = properties.width;}
-    if (properties.widthSelectionMultiplier !== undefined)
-                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
-    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
-    if (properties.value !== undefined)        {this.value = properties.value;}
-    if (properties.length !== undefined)       {this.length = properties.length;
-                                                this.customLength = true;}
+    // update class
+    var className = (this.data.className? ' ' + this.data.className : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.box.className = 'item box' + className;
+      dom.line.className = 'item line' + className;
+      dom.dot.className  = 'item dot' + className;
 
-    // scale the arrow
-    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
+      this.dirty = true;
+    }
 
-    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
+    // recalculate size
+    if (this.dirty) {
+      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;
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dash) {
-      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
-      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
-      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+      this.dirty = false;
     }
 
-    if (properties.color !== undefined) {
-      if (util.isString(properties.color)) {
-        this.color.color = properties.color;
-        this.color.highlight = properties.color;
-      }
-      else {
-        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
-        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
-        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
-      }
+    this._repaintDeleteButton(dom.box);
+  };
+
+  /**
+   * Show the item in the DOM (when not already displayed). The items DOM will
+   * be created when needed.
+   */
+  ItemBox.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
+  };
 
-    // A node is connected when it has a from and to node.
-    this.connect();
+  /**
+   * Hide the item from the DOM (when visible)
+   */
+  ItemBox.prototype.hide = function() {
+    if (this.displayed) {
+      var dom = this.dom;
 
-    this.widthFixed = this.widthFixed || (properties.width !== undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
+      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.widthSelected = this.width * this.widthSelectionMultiplier;
+      this.top = null;
+      this.left = null;
 
-    // set draw method based on style
-    switch (this.style) {
-      case 'line':          this.draw = this._drawLine; break;
-      case 'arrow':         this.draw = this._drawArrow; break;
-      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
-      case 'dash-line':     this.draw = this._drawDashLine; break;
-      default:              this.draw = this._drawLine; break;
+      this.displayed = false;
     }
   };
 
   /**
-   * Connect an edge to its nodes
+   * Reposition the item horizontally
+   * @Override
    */
-  Edge.prototype.connect = function () {
-    this.disconnect();
-
-    this.from = this.network.nodes[this.fromId] || null;
-    this.to = this.network.nodes[this.toId] || null;
-    this.connected = (this.from && this.to);
+  ItemBox.prototype.repositionX = function() {
+    var start = this.conversion.toScreen(this.data.start),
+        align = this.options.align,
+        left,
+        box = this.dom.box,
+        line = this.dom.line,
+        dot = this.dom.dot;
 
-    if (this.connected) {
-      this.from.attachEdge(this);
-      this.to.attachEdge(this);
+    // calculate left position of the box
+    if (align == 'right') {
+      this.left = start - this.width;
+    }
+    else if (align == 'left') {
+      this.left = start;
     }
     else {
-      if (this.from) {
-        this.from.detachEdge(this);
-      }
-      if (this.to) {
-        this.to.detachEdge(this);
-      }
+      // default or 'center'
+      this.left = start - this.width / 2;
     }
+
+    // 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';
   };
 
   /**
-   * Disconnect an edge from its nodes
+   * Reposition the item vertically
+   * @Override
    */
-  Edge.prototype.disconnect = function () {
-    if (this.from) {
-      this.from.detachEdge(this);
-      this.from = null;
+  ItemBox.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box,
+        line = this.dom.line,
+        dot = this.dom.dot;
+
+    if (orientation == 'top') {
+      box.style.top     = (this.top || 0) + 'px';
+
+      line.style.top    = '0';
+      line.style.height = (this.parent.top + this.top + 1) + 'px';
+      line.style.bottom = '';
     }
-    if (this.to) {
-      this.to.detachEdge(this);
-      this.to = null;
+    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';
     }
 
-    this.connected = false;
+    dot.style.top = (-this.props.dot.height / 2) + 'px';
   };
 
-  /**
-   * get the title of this edge.
-   * @return {string} title    The title of the edge, or undefined when no title
-   *                           has been set.
-   */
-  Edge.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
-  };
+  module.exports = ItemBox;
 
 
-  /**
-   * Retrieve the value of the edge. Can be undefined
-   * @return {Number} value
-   */
-  Edge.prototype.getValue = function() {
-    return this.value;
-  };
+/***/ },
+/* 30 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Item = __webpack_require__(28);
 
   /**
-   * Adjust the value range of the edge. The edge will adjust it's width
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
+   * @constructor ItemPoint
+   * @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
    */
-  Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-      var scale = (this.widthMax - this.widthMin) / (max - min);
-      this.width = (this.value - min) * scale + this.widthMin;
+  function ItemPoint (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);
+      }
     }
-  };
+
+    Item.call(this, data, conversion, options);
+  }
+
+  ItemPoint.prototype = new Item (null, null, null);
 
   /**
-   * Redraw a edge
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * 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
    */
-  Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
+  ItemPoint.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);
   };
 
   /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top
-   * @return {boolean}     True if location is located on the edge
+   * Repaint the item
    */
-  Edge.prototype.isOverlappingWith = function(obj) {
-    if (this.connected) {
-      var distMax = 10;
-      var xFrom = this.from.x;
-      var yFrom = this.from.y;
-      var xTo = this.to.x;
-      var yTo = this.to.y;
-      var xObj = obj.left;
-      var yObj = obj.top;
+  ItemPoint.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+      // background box
+      dom.point = document.createElement('div');
+      // className is updated in redraw()
 
-      return (dist < distMax);
-    }
-    else {
-      return false
+      // 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;
     }
-  };
 
-  Edge.prototype._getColor = function() {
-    var colorObj = this.color;
-    if (this.inheritColor == "to") {
-      colorObj = {
-        highlight: this.to.color.highlight.border,
-        hover: this.to.color.hover.border,
-        color: this.to.color.border
-      };
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
     }
-    else if (this.inheritColor == "from" || this.inheritColor == true) {
-      colorObj = {
-        highlight: this.from.color.highlight.border,
-        hover: this.from.color.hover.border,
-        color: this.from.color.border
-      };
+    if (!dom.point.parentNode) {
+      var foreground = this.parent.dom.foreground;
+      if (!foreground) {
+        throw new Error('Cannot redraw time axis: parent has no foreground container element');
+      }
+      foreground.appendChild(dom.point);
     }
+    this.displayed = true;
 
-    if (this.selected == true)   {return colorObj.highlight;}
-    else if (this.hover == true) {return colorObj.hover;}
-    else                         {return colorObj.color;}
-  }
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
+      }
+      else {
+        throw new Error('Property "content" missing in item ' + this.data.id);
+      }
 
+      this.dirty = true;
+    }
 
-  /**
-   * Redraw a edge as a line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this._getColor();
-    ctx.lineWidth   = this._getLineWidth();
+    // update title
+    if (this.data.title != this.title) {
+      dom.point.title = this.data.title;
+      this.title = this.data.title;
+    }
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
+    // update class
+    var className = (this.data.className? ' ' + this.data.className : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.point.className  = 'item point' + className;
+      dom.dot.className  = 'item dot' + className;
 
-      // draw label
-      var point;
-      if (this.label) {
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
-        }
-        this._label(ctx, this.label, point.x, point.y);
-      }
+      this.dirty = true;
     }
-    else {
-      var x, y;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
-      }
-      this._circle(ctx, x, y, radius);
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      this._label(ctx, this.label, point.x, point.y);
+
+    // recalculate size
+    if (this.dirty) {
+      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
+
+      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
+      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+
+      this.dirty = false;
     }
+
+    this._repaintDeleteButton(dom.point);
   };
 
   /**
-   * Get the line width of the edge. Depends on width and whether one of the
-   * connected nodes is selected.
-   * @return {Number} width
-   * @private
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  Edge.prototype._getLineWidth = function() {
-    if (this.selected == true) {
-      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
-    }
-    else {
-      if (this.hover == true) {
-        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
-      }
-      else {
-        return this.width*this.networkScaleInv;
-      }
+  ItemPoint.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
   };
 
-  Edge.prototype._getViaCoordinates = function () {
-    var xVia = null;
-    var yVia = null;
-    var factor = this.smoothCurves.roundness;
-    var type = this.smoothCurves.type;
-    if (factor == 0) {
-      return {x:null,y:null};
-    }
-
-    var dx = Math.abs(this.from.x - this.to.x);
-    var dy = Math.abs(this.from.y - this.to.y);
-    if (type == 'discrete' || type == 'diagonalCross') {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-        }
-        if (type == "discrete") {
-          xVia = dx < factor * dy ? this.from.x : xVia;
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-        }
-        if (type == "discrete") {
-          yVia = dy < factor * dx ? this.from.y : yVia;
-        }
-      }
-    }
-    else if (type == "straightCross") {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        xVia = this.from.x;
-        yVia = this.to.y
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        xVia = this.to.x;
-        yVia = this.from.y;
-      }
-    }
-    else if (type == 'horizontal') {
-      xVia = this.to.x;
-      yVia = this.from.y;
-    }
-    else if (type == 'vertical') {
-      xVia = this.from.x;
-      yVia = this.to.y;
-    }
-    else { // continuous
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(1)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(2)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x > xVia ? this.to.x :xVia;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(3)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(4, this.from.x, this.to.x)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x > xVia ? this.to.x : xVia;
-          }
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(5)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(6)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(7)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(8)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-        }
-      }
-    }
-
-
-    return {x:xVia, y:yVia};
-  }
-
   /**
-   * Draw a line between two nodes
-   * @param {CanvasRenderingContext2D} ctx
-   * @private
+   * Hide the item from the DOM (when visible)
    */
-  Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    if (this.smoothCurves.enabled == true) {
-      if (this.smoothCurves.dynamic == false) {
-        var via = this._getViaCoordinates();
-        if (via.x == null) {
-          ctx.lineTo(this.to.x, this.to.y);
-          ctx.stroke();
-          return null;
-        }
-        else {
-  //        this.via.x = via.x;
-  //        this.via.y = via.y;
-          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
-          ctx.stroke();
-          return via;
-        }
-      }
-      else {
-        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
-        ctx.stroke();
-        return this.via;
+  ItemPoint.prototype.hide = function() {
+    if (this.displayed) {
+      if (this.dom.point.parentNode) {
+        this.dom.point.parentNode.removeChild(this.dom.point);
       }
-    }
-    else {
-      ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return null;
+
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
     }
   };
 
   /**
-   * Draw a line from a node to itself, a circle
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @private
+   * Reposition the item horizontally
+   * @Override
    */
-  Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
+  ItemPoint.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';
   };
 
   /**
-   * Draw label with white background and with the middle at (x, y)
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {Number} x
-   * @param {Number} y
-   * @private
+   * Reposition the item vertically
+   * @Override
    */
-  Edge.prototype._label = function (ctx, text, x, y) {
-    if (text) {
-      // TODO: cache the calculated size
-      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-          this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontFill;
-      var width = ctx.measureText(text).width;
-      var height = this.fontSize;
-      var left = x - width / 2;
-      var top = y - height / 2;
-
-      ctx.fillRect(left, top, width, height);
+  ItemPoint.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        point = this.dom.point;
 
-      // draw text
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = "left";
-      ctx.textBaseline = "top";
-      ctx.fillText(text, left, top);
+    if (orientation == 'top') {
+      point.style.top = this.top + 'px';
+    }
+    else {
+      point.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
   };
 
-  /**
-   * Redraw a edge as a dashed line
-   * Draw this edge in the given canvas
-   * @author David Jordan
-   * @date 2012-08-08
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;}
+  module.exports = ItemPoint;
 
-    ctx.lineWidth = this._getLineWidth();
 
-    var via = null;
-    // only firefox and chrome support this method, else we use the legacy one.
-    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
-      // configure the dash pattern
-      var pattern = [0];
-      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
-        pattern = [this.dash.length,this.dash.gap];
-      }
-      else {
-        pattern = [5,5];
-      }
+/***/ },
+/* 31 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // set dash settings for chrome or firefox
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash(pattern);
-        ctx.lineDashOffset = 0;
+  var Emitter = __webpack_require__(12);
+  var Hammer = __webpack_require__(3);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Range = __webpack_require__(18);
+  var TimeAxis = __webpack_require__(20);
+  var CurrentTime = __webpack_require__(22);
+  var CustomTime = __webpack_require__(23);
+  var LineGraph = __webpack_require__(32);
 
-      } else { //Firefox
-        ctx.mozDash = pattern;
-        ctx.mozDashOffset = 0;
-      }
+  /**
+   * Create a timeline visualization
+   * @param {HTMLElement} container
+   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
+   * @param {Object} [options]  See Graph2d.setOptions for the available options.
+   * @constructor
+   */
+  function Graph2d (container, items, options, groups) {
+    var me = this;
+    this.defaultOptions = {
+      start: null,
+      end:   null,
 
-      // draw the line
-      via = this._line(ctx);
+      autoResize: true,
 
-      // restore the dash settings.
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash([0]);
-        ctx.lineDashOffset = 0;
+      orientation: 'bottom',
+      width: null,
+      height: null,
+      maxHeight: null,
+      minHeight: null
+    };
+    this.options = util.deepExtend({}, this.defaultOptions);
 
-      } else { //Firefox
-        ctx.mozDash = [0];
-        ctx.mozDashOffset = 0;
-      }
-    }
-    else { // unsupporting smooth lines
-      // draw dashed line
-      ctx.beginPath();
-      ctx.lineCap = 'round';
-      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
-      }
-      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap]);
-      }
-      else //If all else fails draw a line
-      {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
-      }
-      ctx.stroke();
-    }
+    // Create the DOM, props, and emitter
+    this._create(container);
 
-    // draw label
-    if (this.label) {
-      var point;
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
+    // all components listed here will be repainted automatically
+    this.components = [];
+
+    this.body = {
+      dom: this.dom,
+      domProps: this.props,
+      emitter: {
+        on: this.on.bind(this),
+        off: this.off.bind(this),
+        emit: this.emit.bind(this)
+      },
+      util: {
+        snap: null, // will be specified after TimeAxis is created
+        toScreen: me._toScreen.bind(me),
+        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+        toTime: me._toTime.bind(me),
+        toGlobalTime : me._toGlobalTime.bind(me)
       }
-      this._label(ctx, this.label, point.x, point.y);
-    }
-  };
+    };
 
-  /**
-   * Get a point on a line
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnLine = function (percentage) {
-    return {
-      x: (1 - percentage) * this.from.x + percentage * this.to.x,
-      y: (1 - percentage) * this.from.y + percentage * this.to.y
-    }
-  };
+    // range
+    this.range = new Range(this.body);
+    this.components.push(this.range);
+    this.body.range = this.range;
 
-  /**
-   * Get a point on a circle
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-      x: x + radius * Math.cos(angle),
-      y: y - radius * Math.sin(angle)
-    }
-  };
+    // time axis
+    this.timeAxis = new TimeAxis(this.body);
+    this.components.push(this.timeAxis);
+    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
 
-  /**
-   * Redraw a edge as a line with an arrow halfway the line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawArrowCenter = function(ctx) {
-    var point;
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-    ctx.lineWidth = this._getLineWidth();
+    // current time bar
+    this.currentTime = new CurrentTime(this.body);
+    this.components.push(this.currentTime);
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
+    // custom time bar
+    // Note: time bar will be attached in this.setOptions when selected
+    this.customTime = new CustomTime(this.body);
+    this.components.push(this.customTime);
 
-      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      // draw an arrow halfway the line
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
-      }
+    // item set
+    this.linegraph = new LineGraph(this.body);
+    this.components.push(this.linegraph);
 
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+    this.itemsData = null;      // DataSet
+    this.groupsData = null;     // DataSet
 
-      // draw label
-      if (this.label) {
-        this._label(ctx, this.label, point.x, point.y);
-      }
+    // apply options
+    if (options) {
+      this.setOptions(options);
     }
-    else {
-      // draw circle
-      var x, y;
-      var radius = 0.25 * Math.max(100,this.length);
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-      }
-      this._circle(ctx, x, y, radius);
-
-      // draw all arrows
-      var angle = 0.2 * Math.PI;
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
+    // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
+    if (groups) {
+      this.setGroups(groups);
     }
-  };
 
+    // create itemset
+    if (items) {
+      this.setItems(items);
+    }
+    else {
+      this.redraw();
+    }
+  }
 
+  // turn Graph2d into an event emitter
+  Emitter(Graph2d.prototype);
 
   /**
-   * Redraw a edge as a line with an arrow
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * Create the main DOM for the Graph2d: a root panel containing left, right,
+   * top, bottom, content, and background panel.
+   * @param {Element} container  The container element where the Graph2d will
+   *                             be attached.
    * @private
    */
-  Edge.prototype._drawArrow = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-
-    ctx.lineWidth = this._getLineWidth();
+  Graph2d.prototype._create = function (container) {
+    this.dom = {};
 
-    var angle, length;
-    //draw a line
-    if (this.from != this.to) {
-      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var dx = (this.to.x - this.from.x);
-      var dy = (this.to.y - this.from.y);
-      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    this.dom.root                 = document.createElement('div');
+    this.dom.background           = document.createElement('div');
+    this.dom.backgroundVertical   = document.createElement('div');
+    this.dom.backgroundHorizontalContainer = document.createElement('div');
+    this.dom.centerContainer      = document.createElement('div');
+    this.dom.leftContainer        = document.createElement('div');
+    this.dom.rightContainer       = document.createElement('div');
+    this.dom.backgroundHorizontal = document.createElement('div');
+    this.dom.center               = document.createElement('div');
+    this.dom.left                 = document.createElement('div');
+    this.dom.right                = document.createElement('div');
+    this.dom.top                  = document.createElement('div');
+    this.dom.bottom               = document.createElement('div');
+    this.dom.shadowTop            = document.createElement('div');
+    this.dom.shadowBottom         = document.createElement('div');
+    this.dom.shadowTopLeft        = document.createElement('div');
+    this.dom.shadowBottomLeft     = document.createElement('div');
+    this.dom.shadowTopRight       = document.createElement('div');
+    this.dom.shadowBottomRight    = document.createElement('div');
 
-      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+    this.dom.background.className           = 'vispanel background';
+    this.dom.backgroundVertical.className   = 'vispanel background vertical';
+    this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
+    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
+    this.dom.centerContainer.className      = 'vispanel center';
+    this.dom.leftContainer.className        = 'vispanel left';
+    this.dom.rightContainer.className       = 'vispanel right';
+    this.dom.top.className                  = 'vispanel top';
+    this.dom.bottom.className               = 'vispanel bottom';
+    this.dom.left.className                 = 'content';
+    this.dom.center.className               = 'content';
+    this.dom.right.className                = 'content';
+    this.dom.shadowTop.className            = 'shadow top';
+    this.dom.shadowBottom.className         = 'shadow bottom';
+    this.dom.shadowTopLeft.className        = 'shadow top';
+    this.dom.shadowBottomLeft.className     = 'shadow bottom';
+    this.dom.shadowTopRight.className       = 'shadow top';
+    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-      var via;
-      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
-        via = this.via;
-      }
-      else if (this.smoothCurves.enabled == true) {
-        via = this._getViaCoordinates();
-      }
+    this.dom.root.appendChild(this.dom.background);
+    this.dom.root.appendChild(this.dom.backgroundVertical);
+    this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
+    this.dom.root.appendChild(this.dom.centerContainer);
+    this.dom.root.appendChild(this.dom.leftContainer);
+    this.dom.root.appendChild(this.dom.rightContainer);
+    this.dom.root.appendChild(this.dom.top);
+    this.dom.root.appendChild(this.dom.bottom);
 
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-        dx = (this.to.x - via.x);
-        dy = (this.to.y - via.y);
-        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-      }
-      var toBorderDist = this.to.distanceToBorder(ctx, angle);
-      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+    this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
+    this.dom.centerContainer.appendChild(this.dom.center);
+    this.dom.leftContainer.appendChild(this.dom.left);
+    this.dom.rightContainer.appendChild(this.dom.right);
 
-      var xTo,yTo;
-      if (this.smoothCurves.enabled == true && via.x != null) {
-       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-      }
-      else {
-        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-      }
+    this.dom.centerContainer.appendChild(this.dom.shadowTop);
+    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
+    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
+    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
+    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
+    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-      ctx.beginPath();
-      ctx.moveTo(xFrom,yFrom);
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
-      }
-      else {
-        ctx.lineTo(xTo, yTo);
-      }
-      ctx.stroke();
+    this.on('rangechange', this.redraw.bind(this));
+    this.on('change', this.redraw.bind(this));
+    this.on('touch', this._onTouch.bind(this));
+    this.on('pinch', this._onPinch.bind(this));
+    this.on('dragstart', this._onDragStart.bind(this));
+    this.on('drag', this._onDrag.bind(this));
 
-      // draw arrow at the end of the line
-      length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(xTo, yTo, angle, length);
-      ctx.fill();
-      ctx.stroke();
+    // create event listeners for all interesting events, these events will be
+    // emitted via emitter
+    this.hammer = Hammer(this.dom.root, {
+      prevent_default: true
+    });
+    this.listeners = {};
 
-      // draw label
-      if (this.label) {
-        var point;
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
-        }
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      // draw circle
-      var node = this.from;
-      var x, y, arrow;
-      var radius = 0.25 * Math.max(100,this.length);
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-        arrow = {
-          x: x,
-          y: node.y,
-          angle: 0.9 * Math.PI
-        };
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-        arrow = {
-          x: node.x,
-          y: y,
-          angle: 0.6 * Math.PI
-        };
-      }
-      ctx.beginPath();
-      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-      ctx.stroke();
+    var me = this;
+    var events = [
+      'touch', 'pinch',
+      'tap', 'doubletap', 'hold',
+      'dragstart', 'drag', 'dragend',
+      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    ];
+    events.forEach(function (event) {
+      var listener = function () {
+        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
+        me.emit.apply(me, args);
+      };
+      me.hammer.on(event, listener);
+      me.listeners[event] = listener;
+    });
 
-      // draw all arrows
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-      ctx.fill();
-      ctx.stroke();
+    // size properties of each of the panels
+    this.props = {
+      root: {},
+      background: {},
+      centerContainer: {},
+      leftContainer: {},
+      rightContainer: {},
+      center: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {},
+      border: {},
+      scrollTop: 0,
+      scrollTopMin: 0
+    };
+    this.touch = {}; // store state information needed for touch events
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
+    // attach the root panel to the provided container
+    if (!container) throw new Error('No container provided');
+    container.appendChild(this.dom.root);
   };
 
-
-
   /**
-   * Calculate the distance between a point (x3,y3) and a line segment from
-   * (x1,y1) to (x2,y2).
-   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
-   * @param {number} x1
-   * @param {number} y1
-   * @param {number} x2
-   * @param {number} y2
-   * @param {number} x3
-   * @param {number} y3
-   * @private
+   * Destroy the Graph2d, clean up all DOM elements and event listeners.
    */
-  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    if (this.from != this.to) {
-      if (this.smoothCurves.enabled == true) {
-        var xVia, yVia;
-        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
-          xVia = this.via.x;
-          yVia = this.via.y;
-        }
-        else {
-          var via = this._getViaCoordinates();
-          xVia = via.x;
-          yVia = via.y;
-        }
-        var minDistance = 1e9;
-        var i,t,x,y,dx,dy;
-        for (i = 0; i < 10; i++) {
-          t = 0.1*i;
-          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
-          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
-          dx = Math.abs(x3-x);
-          dy = Math.abs(y3-y);
-          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
-        }
-        return minDistance
-      }
-      else {
-        var px = x2-x1,
-            py = y2-y1,
-            something = px*px + py*py,
-            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
-
-        if (u > 1) {
-          u = 1;
-        }
-        else if (u < 0) {
-          u = 0;
-        }
+  Graph2d.prototype.destroy = function () {
+    // unbind datasets
+    this.clear();
 
-        var x = x1 + u * px,
-            y = y1 + u * py,
-            dx = x - x3,
-            dy = y - y3;
+    // remove all event listeners
+    this.off();
 
-        //# Note: If the actual distance does not matter,
-        //# if you only want to compare what this function
-        //# returns to other results of this function, you
-        //# can just return the squared distance instead
-        //# (i.e. remove the sqrt) to gain a little performance
+    // stop checking for changed size
+    this._stopAutoResize();
 
-        return Math.sqrt(dx*dx + dy*dy);
-      }
+    // remove from DOM
+    if (this.dom.root.parentNode) {
+      this.dom.root.parentNode.removeChild(this.dom.root);
     }
-    else {
-      var x, y, dx, dy;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
+    this.dom = null;
+
+    // cleanup hammer touch events
+    for (var event in this.listeners) {
+      if (this.listeners.hasOwnProperty(event)) {
+        delete this.listeners[event];
       }
-      dx = x - x3;
-      dy = y - y3;
-      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
     }
-  };
+    this.listeners = null;
+    this.hammer = null;
 
+    // give all components the opportunity to cleanup
+    this.components.forEach(function (component) {
+      component.destroy();
+    });
 
+    this.body = null;
+  };
 
   /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
+   * Set options. Options will be passed to all components loaded in the Graph2d.
+   * @param {Object} [options]
+   *                           {String} orientation
+   *                              Vertical orientation for the Graph2d,
+   *                              can be 'bottom' (default) or 'top'.
+   *                           {String | Number} width
+   *                              Width for the timeline, a number in pixels or
+   *                              a css string like '1000px' or '75%'. '100%' by default.
+   *                           {String | Number} height
+   *                              Fixed height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'. If undefined,
+   *                              The Graph2d will automatically size such that
+   *                              its contents fit.
+   *                           {String | Number} minHeight
+   *                              Minimum height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {String | Number} maxHeight
+   *                              Maximum height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {Number | Date | String} start
+   *                              Start date for the visible window
+   *                           {Number | Date | String} end
+   *                              End date for the visible window
    */
-  Edge.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-  };
-
+  Graph2d.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the known options
+      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
+      util.selectiveExtend(fields, this.options, options);
 
-  Edge.prototype.select = function() {
-    this.selected = true;
-  };
+      // enable/disable autoResize
+      this._initAutoResize();
+    }
 
-  Edge.prototype.unselect = function() {
-    this.selected = false;
-  };
+    // propagate options to all components
+    this.components.forEach(function (component) {
+      component.setOptions(options);
+    });
 
-  Edge.prototype.positionBezierNode = function() {
-    if (this.via !== null) {
-      this.via.x = 0.5 * (this.from.x + this.to.x);
-      this.via.y = 0.5 * (this.from.y + this.to.y);
+    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+    if (options && options.order) {
+      throw new Error('Option order is deprecated. There is no replacement for this feature.');
     }
+
+    // redraw everything
+    this.redraw();
   };
 
   /**
-   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
-   * @param ctx
+   * Set a custom time bar
+   * @param {Date} time
    */
-  Edge.prototype._drawControlNodes = function(ctx) {
-    if (this.controlNodesEnabled == true) {
-      if (this.controlNodes.from === null && this.controlNodes.to === null) {
-        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
-        var nodeIdTo = "edgeIdTo:".concat(this.id);
-        var constants = {
-                        nodes:{group:'', radius:8},
-                        physics:{damping:0},
-                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
-                        };
-        this.controlNodes.from = new Node(
-          {id:nodeIdFrom,
-            shape:'dot',
-              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-        this.controlNodes.to = new Node(
-          {id:nodeIdTo,
-            shape:'dot',
-            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-      }
-
-      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
-        this.controlNodes.positions = this.getControlNodePositions(ctx);
-        this.controlNodes.from.x = this.controlNodes.positions.from.x;
-        this.controlNodes.from.y = this.controlNodes.positions.from.y;
-        this.controlNodes.to.x = this.controlNodes.positions.to.x;
-        this.controlNodes.to.y = this.controlNodes.positions.to.y;
-      }
-
-      this.controlNodes.from.draw(ctx);
-      this.controlNodes.to.draw(ctx);
-    }
-    else {
-      this.controlNodes = {from:null, to:null, positions:{}};
+  Graph2d.prototype.setCustomTime = function (time) {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
     }
-  };
 
-  /**
-   * Enable control nodes.
-   * @private
-   */
-  Edge.prototype._enableControlNodes = function() {
-    this.controlNodesEnabled = true;
+    this.customTime.setCustomTime(time);
   };
 
   /**
-   * disable control nodes
-   * @private
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  Edge.prototype._disableControlNodes = function() {
-    this.controlNodesEnabled = false;
+  Graph2d.prototype.getCustomTime = function() {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+    }
+
+    return this.customTime.getCustomTime();
   };
 
   /**
-   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
-   * @param x
-   * @param y
-   * @returns {null}
-   * @private
+   * Set items
+   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
    */
-  Edge.prototype._getSelectedControlNode = function(x,y) {
-    var positions = this.controlNodes.positions;
-    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
-    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
+  Graph2d.prototype.setItems = function(items) {
+    var initialLoad = (this.itemsData == null);
 
-    if (fromDistance < 15) {
-      this.connectedNode = this.from;
-      this.from = this.controlNodes.from;
-      return this.controlNodes.from;
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!items) {
+      newDataSet = null;
     }
-    else if (toDistance < 15) {
-      this.connectedNode = this.to;
-      this.to = this.controlNodes.to;
-      return this.controlNodes.to;
+    else if (items instanceof DataSet || items instanceof DataView) {
+      newDataSet = items;
     }
     else {
-      return null;
+      // turn an array into a dataset
+      newDataSet = new DataSet(items, {
+        type: {
+          start: 'Date',
+          end: 'Date'
+        }
+      });
     }
-  };
 
+    // set items
+    this.itemsData = newDataSet;
+    this.linegraph && this.linegraph.setItems(newDataSet);
+
+    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
+      this.fit();
+
+      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
+      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+
+      this.setWindow(start, end);
+    }
+  };
 
   /**
-   * this resets the control nodes to their original position.
-   * @private
+   * Set groups
+   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
    */
-  Edge.prototype._restoreControlNodes = function() {
-    if (this.controlNodes.from.selected == true) {
-      this.from = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.from.unselect();
+  Graph2d.prototype.setGroups = function(groups) {
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!groups) {
+      newDataSet = null;
     }
-    if (this.controlNodes.to.selected == true) {
-      this.to = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.to.unselect();
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      newDataSet = groups;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(groups);
     }
+
+    this.groupsData = newDataSet;
+    this.linegraph.setGroups(newDataSet);
   };
 
   /**
-   * this calculates the position of the control nodes on the edges of the parent nodes.
+   * Clear the Graph2d. By Default, items, groups and options are cleared.
+   * Example usage:
    *
-   * @param ctx
-   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
+   *     timeline.clear();                // clear items, groups, and options
+   *     timeline.clear({options: true}); // clear options only
+   *
+   * @param {Object} [what]      Optionally specify what to clear. By default:
+   *                             {items: true, groups: true, options: true}
    */
-  Edge.prototype.getControlNodePositions = function(ctx) {
-    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-    var dx = (this.to.x - this.from.x);
-    var dy = (this.to.y - this.from.y);
-    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
-    var via;
-    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
-      via = this.via;
-    }
-    else if (this.smoothCurves.enabled == true) {
-      via = this._getViaCoordinates();
+  Graph2d.prototype.clear = function(what) {
+    // clear items
+    if (!what || what.items) {
+      this.setItems(null);
     }
 
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-      dx = (this.to.x - via.x);
-      dy = (this.to.y - via.y);
-      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    // clear groups
+    if (!what || what.groups) {
+      this.setGroups(null);
     }
-    var toBorderDist = this.to.distanceToBorder(ctx, angle);
-    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-    var xTo,yTo;
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-    }
-    else {
-      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-    }
+    // clear options of timeline and of each of the components
+    if (!what || what.options) {
+      this.components.forEach(function (component) {
+        component.setOptions(component.defaultOptions);
+      });
 
-    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+      this.setOptions(this.defaultOptions); // this will also do a redraw
+    }
   };
 
-  module.exports = Edge;
-
-/***/ },
-/* 28 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-
-  /**
-   * @class Groups
-   * This class can store groups and properties specific for groups.
-   */
-  function Groups() {
-    this.clear();
-    this.defaultIndex = 0;
-  }
-
-
   /**
-   * default constants for group colors
+   * Set Graph2d window such that it fits all items
    */
-  Groups.DEFAULT = [
-    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
-    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
-    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
-    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
-    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
-    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
-    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
-    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
-    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
-    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
-  ];
-
+  Graph2d.prototype.fit = function() {
+    // apply the data range as range
+    var dataRange = this.getItemRange();
 
-  /**
-   * Clear all groups
-   */
-  Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-      var i = 0;
-      for ( var p in this ) {
-        if (this.hasOwnProperty(p)) {
-          i++;
-        }
+    // add 5% space on both sides
+    var start = dataRange.min;
+    var end = dataRange.max;
+    if (start != null && end != null) {
+      var interval = (end.valueOf() - start.valueOf());
+      if (interval <= 0) {
+        // prevent an empty interval
+        interval = 24 * 60 * 60 * 1000; // 1 day
       }
-      return i;
+      start = new Date(start.valueOf() - interval * 0.05);
+      end = new Date(end.valueOf() + interval * 0.05);
     }
-  };
-
-
-  /**
-   * get group properties of a groupname. If groupname is not found, a new group
-   * is added.
-   * @param {*} groupname        Can be a number, string, Date, etc.
-   * @return {Object} group      The created group, containing all group properties
-   */
-  Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
 
-    if (group == undefined) {
-      // create new group
-      var index = this.defaultIndex % Groups.DEFAULT.length;
-      this.defaultIndex++;
-      group = {};
-      group.color = Groups.DEFAULT[index];
-      this.groups[groupname] = group;
+    // skip range set if there is no start and end date
+    if (start === null && end === null) {
+      return;
     }
 
-    return group;
+    this.range.setRange(start, end);
   };
 
   /**
-   * Add a custom group style
-   * @param {String} groupname
-   * @param {Object} style       An object containing borderColor,
-   *                             backgroundColor, etc.
-   * @return {Object} group      The created group object
+   * Get the data range of the item set.
+   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
+   *                                          When no minimum is found, min==null
+   *                                          When no maximum is found, max==null
    */
-  Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    if (style.color) {
-      style.color = util.parseColor(style.color);
-    }
-    return style;
-  };
+  Graph2d.prototype.getItemRange = function() {
+    // calculate min from start filed
+    var itemsData = this.itemsData,
+      min = null,
+      max = null;
 
-  module.exports = Groups;
+    if (itemsData) {
+      // calculate the minimum value of the field 'start'
+      var minItem = itemsData.min('start');
+      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
+      // Note: we convert first to Date and then to number because else
+      // a conversion from ISODate to Number will fail
 
+      // calculate maximum value of fields 'start' and 'end'
+      var maxStartItem = itemsData.max('start');
+      if (maxStartItem) {
+        max = util.convert(maxStartItem.start, 'Date').valueOf();
+      }
+      var maxEndItem = itemsData.max('end');
+      if (maxEndItem) {
+        if (max == null) {
+          max = util.convert(maxEndItem.end, 'Date').valueOf();
+        }
+        else {
+          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+        }
+      }
+    }
 
-/***/ },
-/* 29 */
-/***/ function(module, exports, __webpack_require__) {
+    return {
+      min: (min != null) ? new Date(min) : null,
+      max: (max != null) ? new Date(max) : null
+    };
+  };
 
   /**
-   * @class Images
-   * This class loads images and keeps them stored.
+   * Set the visible window. Both parameters are optional, you can change only
+   * start or only end. Syntax:
+   *
+   *     TimeLine.setWindow(start, end)
+   *     TimeLine.setWindow(range)
+   *
+   * Where start and end can be a Date, number, or string, and range is an
+   * object with properties start and end.
+   *
+   * @param {Date | Number | String | Object} [start] Start date of visible window
+   * @param {Date | Number | String} [end]   End date of visible window
    */
-  function Images() {
-    this.images = {};
-
-    this.callback = undefined;
-  }
+  Graph2d.prototype.setWindow = function(start, end) {
+    if (arguments.length == 1) {
+      var range = arguments[0];
+      this.range.setRange(range.start, range.end);
+    }
+    else {
+      this.range.setRange(start, end);
+    }
+  };
 
   /**
-   * Set an onload callback function. This will be called each time an image
-   * is loaded
-   * @param {function} callback
+   * Get the visible window
+   * @return {{start: Date, end: Date}}   Visible range
    */
-  Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
+  Graph2d.prototype.getWindow = function() {
+    var range = this.range.getRange();
+    return {
+      start: new Date(range.start),
+      end: new Date(range.end)
+    };
   };
 
   /**
-   *
-   * @param {string} url          Url of the image
-   * @return {Image} img          The image object
+   * Force a redraw of the Graph2d. Can be useful to manually redraw when
+   * option autoResize=false
    */
-  Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-      // create the image
-      var images = this;
-      img = new Image();
-      this.images[url] = img;
-      img.onload = function() {
-        if (images.callback) {
-          images.callback(this);
-        }
-      };
-      img.src = url;
-    }
+  Graph2d.prototype.redraw = function() {
+    var resized = false,
+      options = this.options,
+      props = this.props,
+      dom = this.dom;
 
-    return img;
-  };
+    if (!dom) return; // when destroyed
 
-  module.exports = Images;
+    // update class names
+    dom.root.className = 'vis timeline root ' + options.orientation;
 
+    // update root width and height options
+    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
+    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
+    dom.root.style.width = util.option.asSize(options.width, '');
 
-/***/ },
-/* 30 */
-/***/ function(module, exports, __webpack_require__) {
+    // calculate border widths
+    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
+    props.border.right  = props.border.left;
+    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.bottom = props.border.top;
+    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
-  var util = __webpack_require__(1);
+    // calculate the heights. If any of the side panels is empty, we set the height to
+    // minus the border width, such that the border will be invisible
+    props.center.height = dom.center.offsetHeight;
+    props.left.height   = dom.left.offsetHeight;
+    props.right.height  = dom.right.offsetHeight;
+    props.top.height    = dom.top.clientHeight    || -props.border.top;
+    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
 
-  /**
-   * @class Node
-   * A node. A node can be connected to other nodes via one or multiple edges.
-   * @param {object} properties An object containing properties for the node. All
-   *                            properties are optional, except for the id.
-   *                              {number} id     Id of the node. Required
-   *                              {string} label  Text label for the node
-   *                              {number} x      Horizontal position of the node
-   *                              {number} y      Vertical position of the node
-   *                              {string} shape  Node shape, available:
-   *                                              "database", "circle", "ellipse",
-   *                                              "box", "image", "text", "dot",
-   *                                              "star", "triangle", "triangleDown",
-   *                                              "square"
-   *                              {string} image  An image url
-   *                              {string} title  An title text, can be HTML
-   *                              {anytype} group A group name or number
-   * @param {Network.Images} imagelist    A list with images. Only needed
-   *                                            when the node has an image
-   * @param {Network.Groups} grouplist    A list with groups. Needed for
-   *                                            retrieving group properties
-   * @param {Object}               constants    An object with default values for
-   *                                            example for the color
-   *
-   */
-  function Node(properties, imagelist, grouplist, constants) {
-    this.selected = false;
-    this.hover = false;
+    // TODO: compensate borders when any of the panels is empty.
 
-    this.edges = []; // all edges connected to this node
-    this.dynamicEdges = [];
-    this.reroutedEdges = {};
+    // apply auto height
+    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
+    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
+    var autoHeight = props.top.height + contentHeight + props.bottom.height +
+      borderRootHeight + props.border.top + props.border.bottom;
+    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
-    this.group = constants.nodes.group;
-    this.fontSize = Number(constants.nodes.fontSize);
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-    this.fontDrawThreshold = 3;
+    // calculate heights of the content panels
+    props.root.height = dom.root.offsetHeight;
+    props.background.height = props.root.height - borderRootHeight;
+    var containerHeight = props.root.height - props.top.height - props.bottom.height -
+      borderRootHeight;
+    props.centerContainer.height  = containerHeight;
+    props.leftContainer.height    = containerHeight;
+    props.rightContainer.height   = props.leftContainer.height;
 
-    this.color = constants.nodes.color;
+    // calculate the widths of the panels
+    props.root.width = dom.root.offsetWidth;
+    props.background.width = props.root.width - borderRootWidth;
+    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
+    props.leftContainer.width = props.left.width;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    props.rightContainer.width = props.right.width;
+    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
+    props.center.width          = centerWidth;
+    props.centerContainer.width = centerWidth;
+    props.top.width             = centerWidth;
+    props.bottom.width          = centerWidth;
 
-    // set defaults for the properties
-    this.id = undefined;
-    this.shape = constants.nodes.shape;
-    this.image = constants.nodes.image;
-    this.x = null;
-    this.y = null;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.horizontalAlignLeft = true; // these are for the navigation controls
-    this.verticalAlignTop    = true; // these are for the navigation controls
-    this.radius = constants.nodes.radius;
-    this.baseRadiusValue = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
-    this.level = -1;
-    this.preassignedLevel = false;
+    // resize the panels
+    dom.background.style.height           = props.background.height + 'px';
+    dom.backgroundVertical.style.height   = props.background.height + 'px';
+    dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
+    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
 
+    dom.background.style.width            = props.background.width + 'px';
+    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+    dom.backgroundHorizontalContainer.style.width  = props.background.width + 'px';
+    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+    dom.centerContainer.style.width       = props.center.width + 'px';
+    dom.top.style.width                   = props.top.width + 'px';
+    dom.bottom.style.width                = props.bottom.width + 'px';
 
-    this.imagelist = imagelist;
-    this.grouplist = grouplist;
+    // reposition the panels
+    dom.background.style.left           = '0';
+    dom.background.style.top            = '0';
+    dom.backgroundVertical.style.left   = props.left.width + 'px';
+    dom.backgroundVertical.style.top    = '0';
+    dom.backgroundHorizontalContainer.style.left = '0';
+    dom.backgroundHorizontalContainer.style.top  = props.top.height + 'px';
+    dom.centerContainer.style.left      = props.left.width + 'px';
+    dom.centerContainer.style.top       = props.top.height + 'px';
+    dom.leftContainer.style.left        = '0';
+    dom.leftContainer.style.top         = props.top.height + 'px';
+    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+    dom.rightContainer.style.top        = props.top.height + 'px';
+    dom.top.style.left                  = props.left.width + 'px';
+    dom.top.style.top                   = '0';
+    dom.bottom.style.left               = props.left.width + 'px';
+    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
 
-    // physics properties
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = constants.physics.damping;
-    this.mass = 1;  // kg
-    this.fixedData = {x:null,y:null};
+    // update the scrollTop, feasible range for the offset can be changed
+    // when the height of the Graph2d or of the contents of the center changed
+    this._updateScrollTop();
 
-    this.setProperties(properties, constants);
+    // reposition the scrollable contents
+    var offset = this.props.scrollTop;
+    if (options.orientation == 'bottom') {
+      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
+          this.props.border.top - this.props.border.bottom, 0);
+    }
+    dom.center.style.left = '0';
+    dom.center.style.top  = offset + 'px';
+    dom.backgroundHorizontal.style.left = '0';
+    dom.backgroundHorizontal.style.top  = offset + 'px';
+    dom.left.style.left   = '0';
+    dom.left.style.top    = offset + 'px';
+    dom.right.style.left  = '0';
+    dom.right.style.top   = offset + 'px';
 
-    // creating the variables for clustering
-    this.resetCluster();
-    this.dynamicEdgesLength = 0;
-    this.clusterSession = 0;
-    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
-    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
-    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
-    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
-    this.growthIndicator = 0;
+    // show shadows when vertical scrolling is available
+    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
+    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+    dom.shadowTop.style.visibility          = visibilityTop;
+    dom.shadowBottom.style.visibility       = visibilityBottom;
+    dom.shadowTopLeft.style.visibility      = visibilityTop;
+    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
+    dom.shadowTopRight.style.visibility     = visibilityTop;
+    dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
-    // variables to tell the node about the network.
-    this.networkScaleInv = 1;
-    this.networkScale = 1;
-    this.canvasTopLeft = {"x": -300, "y": -300};
-    this.canvasBottomRight = {"x":  300, "y":  300};
-    this.parentEdgeId = null;
-  }
+    // redraw all components
+    this.components.forEach(function (component) {
+      resized = component.redraw() || resized;
+    });
+    if (resized) {
+      // keep redrawing until all sizes are settled
+      this.redraw();
+    }
+  };
 
   /**
-   * (re)setting the clustering variables and objects
+   * Convert a position on screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
    */
-  Node.prototype.resetCluster = function() {
-    // clustering variables
-    this.formationScale = undefined; // this is used to determine when to open the cluster
-    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
-    this.containedNodes = {};
-    this.containedEdges = {};
-    this.clusterSessions = [];
+  // TODO: move this function to Range
+  Graph2d.prototype._toTime = function(x) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return new Date(x / conversion.scale + conversion.offset);
   };
 
   /**
-   * Attach a edge to the node
-   * @param {Edge} edge
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
    */
-  Node.prototype.attachEdge = function(edge) {
-    if (this.edges.indexOf(edge) == -1) {
-      this.edges.push(edge);
-    }
-    if (this.dynamicEdges.indexOf(edge) == -1) {
-      this.dynamicEdges.push(edge);
-    }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
+  // TODO: move this function to Range
+  Graph2d.prototype._toGlobalTime = function(x) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return new Date(x / conversion.scale + conversion.offset);
   };
 
   /**
-   * Detach a edge from the node
-   * @param {Edge} edge
+   * Convert a datetime (Date object) into a position on the screen
+   * @param {Date}   time A date
+   * @return {int}   x    The position on the screen in pixels which corresponds
+   *                      with the given date.
+   * @private
    */
-  Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-      this.edges.splice(index, 1);
-      this.dynamicEdges.splice(index, 1);
-    }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
+  // TODO: move this function to Range
+  Graph2d.prototype._toScreen = function(time) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
   };
 
 
   /**
-   * Set or overwrite properties for the node
-   * @param {Object} properties an object with properties
-   * @param {Object} constants  and object with default, global properties
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
    */
-  Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
-    this.originalLabel = undefined;
-    // basic properties
-    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.group !== undefined)     {this.group = properties.group;}
-    if (properties.x !== undefined)         {this.x = properties.x;}
-    if (properties.y !== undefined)         {this.y = properties.y;}
-    if (properties.value !== undefined)     {this.value = properties.value;}
-    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
-
-
-    // physics
-    if (properties.mass !== undefined)                {this.mass = properties.mass;}
-
-    // navigation controls properties
-    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
-    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
-    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
+  // TODO: move this function to Range
+  Graph2d.prototype._toGlobalScreen = function(time) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-    if (this.id === undefined) {
-      throw "Node must have an id";
+  /**
+   * Initialize watching when option autoResize is true
+   * @private
+   */
+  Graph2d.prototype._initAutoResize = function () {
+    if (this.options.autoResize == true) {
+      this._startAutoResize();
     }
-
-    // copy group properties
-    if (this.group) {
-      var groupObj = this.grouplist.get(this.group);
-      for (var prop in groupObj) {
-        if (groupObj.hasOwnProperty(prop)) {
-          this[prop] = groupObj[prop];
-        }
-      }
+    else {
+      this._stopAutoResize();
     }
+  };
 
-    // individual shape properties
-    if (properties.shape !== undefined)          {this.shape = properties.shape;}
-    if (properties.image !== undefined)          {this.image = properties.image;}
-    if (properties.radius !== undefined)         {this.radius = properties.radius;}
-    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
+  /**
+   * Watch for changes in the size of the container. On resize, the Panel will
+   * automatically redraw itself.
+   * @private
+   */
+  Graph2d.prototype._startAutoResize = function () {
+    var me = this;
 
-    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
+    this._stopAutoResize();
 
-    if (this.image !== undefined && this.image != "") {
-      if (this.imagelist) {
-        this.imageObj = this.imagelist.load(this.image);
-      }
-      else {
-        throw "No imagelist provided";
+    this._onResize = function() {
+      if (me.options.autoResize != true) {
+        // stop watching when the option autoResize is changed to false
+        me._stopAutoResize();
+        return;
       }
-    }
 
-    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
-    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
-    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
+      if (me.dom.root) {
+        // check whether the frame is resized
+        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+          (me.dom.root.clientHeight != me.props.lastHeight)) {
+          me.props.lastWidth = me.dom.root.clientWidth;
+          me.props.lastHeight = me.dom.root.clientHeight;
 
-    if (this.shape == 'image') {
-      this.radiusMin = constants.nodes.widthMin;
-      this.radiusMax = constants.nodes.widthMax;
-    }
+          me.emit('change');
+        }
+      }
+    };
 
-    // choose draw method depending on the shape
-    switch (this.shape) {
-      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
-      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-      // TODO: add diamond shape
-      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-    }
-    // reset the size of the node, this can be changed
-    this._reset();
-  };
+    // add event listener to window resize
+    util.addEventListener(window, 'resize', this._onResize);
 
-  /**
-   * select this node
-   */
-  Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
+    this.watchTimer = setInterval(this._onResize, 1000);
   };
 
   /**
-   * unselect this node
+   * Stop watching for a resize of the frame.
+   * @private
    */
-  Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
-  };
+  Graph2d.prototype._stopAutoResize = function () {
+    if (this.watchTimer) {
+      clearInterval(this.watchTimer);
+      this.watchTimer = undefined;
+    }
 
+    // remove event listener on window.resize
+    util.removeEventListener(window, 'resize', this._onResize);
+    this._onResize = null;
+  };
 
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  Node.prototype.clearSizeCache = function() {
-    this._reset();
+  Graph2d.prototype._onTouch = function (event) {
+    this.touch.allowDragging = true;
   };
 
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
+   * Start moving the timeline vertically
+   * @param {Event} event
    * @private
    */
-  Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
+  Graph2d.prototype._onPinch = function (event) {
+    this.touch.allowDragging = false;
   };
 
   /**
-   * get the title of this node.
-   * @return {string} title    The title of the node, or undefined when no title
-   *                           has been set.
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  Node.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
+  Graph2d.prototype._onDragStart = function (event) {
+    this.touch.initialScrollTop = this.props.scrollTop;
   };
 
   /**
-   * Calculate the distance to the border of the Node
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Number} angle        Angle in radians
-   * @returns {number} distance   Distance to the border in pixels
+   * Move the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
-
-    if (!this.width) {
-      this.resize(ctx);
-    }
-
-    switch (this.shape) {
-      case 'circle':
-      case 'dot':
-        return this.radius + borderWidth;
-
-      case 'ellipse':
-        var a = this.width / 2;
-        var b = this.height / 2;
-        var w = (Math.sin(angle) * a);
-        var h = (Math.cos(angle) * b);
-        return a * b / Math.sqrt(w * w + h * h);
+  Graph2d.prototype._onDrag = function (event) {
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.touch.allowDragging) return;
 
-      // TODO: implement distanceToBorder for database
-      // TODO: implement distanceToBorder for triangle
-      // TODO: implement distanceToBorder for triangleDown
+    var delta = event.gesture.deltaY;
 
-      case 'box':
-      case 'image':
-      case 'text':
-      default:
-        if (this.width) {
-          return Math.min(
-              Math.abs(this.width / 2 / Math.cos(angle)),
-              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-          // TODO: reckon with border radius too in case of box
-        }
-        else {
-          return 0;
-        }
+    var oldScrollTop = this._getScrollTop();
+    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
+    if (newScrollTop != oldScrollTop) {
+      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
     }
-    // TODO: implement calculation of distance to border for all shapes
-  };
-
-  /**
-   * Set forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
-   */
-  Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
   };
 
   /**
-   * Add forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
+   * Apply a scrollTop
+   * @param {Number} scrollTop
+   * @returns {Number} scrollTop  Returns the applied scrollTop
    * @private
    */
-  Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
-  };
-
-  /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   */
-  Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.x  += this.vx * interval;          // position
-    }
-
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.y  += this.vy * interval;          // position
-    }
+  Graph2d.prototype._setScrollTop = function (scrollTop) {
+    this.props.scrollTop = scrollTop;
+    this._updateScrollTop();
+    return this.props.scrollTop;
   };
 
-
-
   /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   * @param {number} maxVelocity The speed limit imposed on the velocity
+   * Update the current scrollTop when the height of  the containers has been changed
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
    */
-  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
-      this.x  += this.vx * interval;          // position
-    }
-    else {
-      this.fx = 0;
+  Graph2d.prototype._updateScrollTop = function () {
+    // recalculate the scrollTopMin
+    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
+    if (scrollTopMin != this.props.scrollTopMin) {
+      // in case of bottom orientation, change the scrollTop such that the contents
+      // do not move relative to the time axis at the bottom
+      if (this.options.orientation == 'bottom') {
+        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+      }
+      this.props.scrollTopMin = scrollTopMin;
     }
 
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
-      this.y  += this.vy * interval;          // position
-    }
-    else {
-      this.fy = 0;
-    }
-  };
+    // limit the scrollTop to the feasible scroll range
+    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
+    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
-  /**
-   * Check if this node has a fixed x and y position
-   * @return {boolean}      true if fixed, false if not
-   */
-  Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
+    return this.props.scrollTop;
   };
 
   /**
-   * Check if this node is moving
-   * @param {number} vmin   the minimum velocity considered as "moving"
-   * @return {boolean}      true if moving, false if it has no velocity
+   * Get the current scrollTop
+   * @returns {number} scrollTop
+   * @private
    */
-  // TODO: replace this method with calculating the kinetic energy
-  Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  Graph2d.prototype._getScrollTop = function () {
+    return this.props.scrollTop;
   };
 
-  /**
-   * check if this node is selecte
-   * @return {boolean} selected   True if node is selected, else false
-   */
-  Node.prototype.isSelected = function() {
-    return this.selected;
-  };
+  module.exports = Graph2d;
 
-  /**
-   * Retrieve the value of the node. Can be undefined
-   * @return {Number} value
-   */
-  Node.prototype.getValue = function() {
-    return this.value;
-  };
 
-  /**
-   * Calculate the distance from the nodes location to the given location (x,y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Number} value
-   */
-  Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
-  };
+/***/ },
+/* 32 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Component = __webpack_require__(19);
+  var DataAxis = __webpack_require__(33);
+  var GraphGroup = __webpack_require__(35);
+  var Legend = __webpack_require__(36);
 
-  /**
-   * Adjust the value range of the node. The node will adjust it's radius
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
-   */
-  Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-      if (max == min) {
-        this.radius = (this.radiusMin + this.radiusMax) / 2;
-      }
-      else {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
-      }
-    }
-    this.baseRadiusValue = this.radius;
-  };
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
   /**
-   * Draw this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * This is the constructor of the LineGraph. It requires a Timeline body and options.
+   *
+   * @param body
+   * @param options
+   * @constructor
    */
-  Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
-  };
+  function LineGraph(body, options) {
+    this.id = util.randomUUID();
+    this.body = body;
 
-  /**
-   * Recalculate the size of this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
-  };
+    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,
+        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
+      },
+      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
+        }
+      }
+    };
 
-  /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top, right, bottom
-   * @return {boolean}     True if location is located on node
-   */
-  Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left              < obj.right  &&
-            this.left + this.width > obj.left   &&
-            this.top               < obj.bottom &&
-            this.top + this.height > obj.top);
-  };
+    // 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 = {};
 
-  Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
+    var me = this;
+    this.itemsData = null;    // DataSet
+    this.groupsData = null;   // DataSet
 
-    if (!this.width || !this.height) {  // undefined or 0
-      var width, height;
-      if (this.value) {
-        this.radius = this.baseRadiusValue;
-        var scale = this.imageObj.height / this.imageObj.width;
-        if (scale !== undefined) {
-          width = this.radius || this.imageObj.width;
-          height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-          width = 0;
-          height = 0;
-        }
-      }
-      else {
-        width = this.imageObj.width;
-        height = this.imageObj.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);
       }
-      this.width  = width;
-      this.height = height;
+    };
 
-      this.growthIndicator = 0;
-      if (this.width > 0 && this.height > 0) {
-        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
-        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-        this.growthIndicator = this.width - width;
+    // 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);
       }
-    }
+    };
 
-  };
+    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
 
-  Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
+    this.svgElements = {};
+    this.setOptions(options);
+    this.groupsUsingDefaultStyles = [0];
 
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
+    this.body.emitter.on("rangechange",function() {
+        if (me.lastStart != 0) {
+          var offset = me.body.range.start - me.lastStart;
+          var range = me.body.range.end - me.body.range.start;
+          if (me.width != 0) {
+            var rangePerPixelInv = me.width/range;
+            var xOffset = offset * rangePerPixelInv;
+            me.svg.style.left = (-me.width - xOffset) + "px";
+          }
+        }
+      });
+    this.body.emitter.on("rangechanged", function() {
+      me.lastStart = me.body.range.start;
+      me.svg.style.left = util.option.asSize(-me.width);
+      me._updateGraph.apply(me);
+    });
 
-    var yLabel;
-    if (this.imageObj.width != 0 ) {
-      // draw the shade
-      if (this.clusterSize > 1) {
-        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
-        lineWidth *= this.networkScaleInv;
-        lineWidth = Math.min(0.2 * this.width,lineWidth);
+    // create the HTML DOM
+    this._create();
+    this.body.emitter.emit("change");
+  }
 
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
-      }
+  LineGraph.prototype = new Component();
 
-      // draw the image
-      ctx.globalAlpha = 1.0;
-      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-      yLabel = this.y + this.height / 2;
-    }
-    else {
-      // image still loading... just draw the label for now
-      yLabel = this.y;
-    }
+  /**
+   * Create the HTML DOM for the ItemSet
+   */
+  LineGraph.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'LineGraph';
+    this.dom.frame = frame;
 
-    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
-  };
+    // 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);
 
-  Node.prototype._resizeBox = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+    this.options.dataAxis.orientation = 'right';
+    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
+    delete this.options.dataAxis.orientation;
 
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+    // legends
+    this.legendLeft = new Legend(this.body, this.options.legend, 'left');
+    this.legendRight = new Legend(this.body, this.options.legend, 'right');
 
-    }
+    this.show();
   };
 
-  Node.prototype._drawBox = function (ctx) {
-    this._resizeBox(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+  /**
+   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
+   * @param options
+   */
+  LineGraph.prototype.setOptions = function(options) {
+    if (options) {
+      var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
+      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');
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+      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;
+            }
+          }
+        }
+      }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+      if (this.yAxisLeft) {
+        if (options.dataAxis !== undefined) {
+          this.yAxisLeft.setOptions(this.options.dataAxis);
+          this.yAxisRight.setOptions(this.options.dataAxis);
+        }
+      }
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+      if (this.legendLeft) {
+        if (options.legend !== undefined) {
+          this.legendLeft.setOptions(this.options.legend);
+          this.legendRight.setOptions(this.options.legend);
+        }
+      }
 
-      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
-      ctx.stroke();
+      if (this.groups.hasOwnProperty(UNGROUPED)) {
+        this.groups[UNGROUPED].setOptions(options);
+      }
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
-
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    this._label(ctx, this.label, this.x, this.y);
-  };
-
-
-  Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var size = textSize.width + 2 * margin;
-      this.width = size;
-      this.height = size;
-
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+    if (this.dom.frame) {
+      this._updateGraph();
     }
   };
 
-  Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
-      ctx.stroke();
+  /**
+   * Hide the component from the DOM
+   */
+  LineGraph.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-
-    this._label(ctx, this.label, this.x, this.y);
   };
 
-
-  Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-      this.radius = diameter / 2;
-
-      this.width = diameter;
-      this.height = diameter;
-
-      // scaling used for clustering
-  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.radius - 0.5*diameter;
+  /**
+   * 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);
     }
   };
 
-  Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * Set items
+   * @param {vis.DataSet | null} items
+   */
+  LineGraph.prototype.setItems = function(items) {
+    var me = this,
+      ids,
+      oldItemsData = this.itemsData;
 
-      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
-      ctx.stroke();
+    // 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');
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-  Node.prototype._resizeEllipse = function (ctx) {
-    if (!this.width) {
-      var textSize = this.getTextSize(ctx);
+      // remove all drawn items
+      ids = oldItemsData.getIds();
+      this._onRemove(ids);
+    }
 
-      this.width = textSize.width * 1.5;
-      this.height = textSize.height * 2;
-      if (this.width < this.height) {
-        this.width = this.height;
-      }
-      var defaultSize = this.width;
+    if (this.itemsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.itemListeners, function (callback, event) {
+        me.itemsData.on(event, callback, id);
+      });
 
-        // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - defaultSize;
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
     }
+    this._updateUngrouped();
+    this._updateGraph();
+    this.redraw();
   };
 
-  Node.prototype._drawEllipse = function (ctx) {
-    this._resizeEllipse(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * Set groups
+   * @param {vis.DataSet} groups
+   */
+  LineGraph.prototype.setGroups = function(groups) {
+    var me = this,
+      ids;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
 
-      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
-      ctx.stroke();
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
+    }
+    else {
+      throw new TypeError('Data must be an instance of DataSet or DataView');
+    }
 
-    ctx.ellipse(this.left, this.top, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    if (this.groupsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.on(event, callback, id);
+      });
 
-  Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
+    }
+    this._onUpdate();
   };
 
-  Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
-  };
 
-  Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-  };
 
-  Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
+  LineGraph.prototype._onUpdate = function(ids) {
+    this._updateUngrouped();
+    this._updateAllGroupData();
+    this._updateGraph();
+    this.redraw();
   };
+  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]);
+    }
 
-  Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
+    this._updateGraph();
+    this.redraw();
   };
+  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
 
-  Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-      this.radius = this.baseRadiusValue;
-      var size = 2 * this.radius;
-      this.width = size;
-      this.height = size;
-
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+  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();
   };
 
-  Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-    var radiusMultiplier = 2;
-
-    // choose draw method depending on the shape
-    switch (shape) {
-      case 'dot':           radiusMultiplier = 2; break;
-      case 'square':        radiusMultiplier = 2; break;
-      case 'triangle':      radiusMultiplier = 3; break;
-      case 'triangleDown':  radiusMultiplier = 3; break;
-      case 'star':          radiusMultiplier = 4; break;
-    }
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
-      ctx.stroke();
+  /**
+   * update a group object
+   *
+   * @param group
+   * @param groupId
+   * @private
+   */
+  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]);
+      }
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    if (this.label) {
-      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
+    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();
   };
 
-  Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+  LineGraph.prototype._updateAllGroupData = function () {
+    if (this.itemsData != null) {
+      // ~450 ms @ 500k
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-    }
-  };
-
-  Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    this._label(ctx, this.label, this.x, this.y);
-  };
-
-
-  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = align || "center";
-      ctx.textBaseline = baseline || "middle";
-
-      var lines = text.split('\n');
-      var lineCount = lines.length;
-      var fontSize = (this.fontSize + 4);
-      var yLine = y + (1 - lineCount) / 2 * fontSize;
-      if (labelUnderNode == true) {
-        yLine = y + (1 - lineCount) / (2 * fontSize);
+      var groupsContent = {};
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          groupsContent[groupId] = [];
+        }
       }
-
-      for (var i = 0; i < lineCount; i++) {
-        ctx.fillText(lines[i], x, yLine);
-        yLine += fontSize;
+      for (var itemId in this.itemsData._data) {
+        if (this.itemsData._data.hasOwnProperty(itemId)) {
+          var item = this.itemsData._data[itemId];
+          item.x = util.convert(item.x,"Date");
+          groupsContent[item.group].push(item);
+        }
       }
-    }
-  };
-
-
-  Node.prototype.getTextSize = function(ctx) {
-    if (this.label !== undefined) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-
-      var lines = this.label.split('\n'),
-          height = (this.fontSize + 4) * lines.length,
-          width = 0;
-
-      for (var i = 0, iMax = lines.length; i < iMax; i++) {
-        width = Math.max(width, ctx.measureText(lines[i]).width);
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].setItems(groupsContent[groupId]);
+        }
       }
-
-      return {"width": width, "height": height};
-    }
-    else {
-      return {"width": 0, "height": 0};
+  //    // ~4500ms @ 500k
+  //    for (var groupId in this.groups) {
+  //      if (this.groups.hasOwnProperty(groupId)) {
+  //        this.groups[groupId].setItems(this.itemsData.get({filter:
+  //            function (item) {
+  //              return (item.group == groupId);
+  //            }, type:{x:"Date"}}
+  //        ));
+  //      }
+  //    }
     }
   };
 
   /**
-   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
-   * there is a safety margin of 0.3 * width;
-   *
-   * @returns {boolean}
+   * 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
    */
-  Node.prototype.inArea = function() {
-    if (this.width !== undefined) {
-    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
-            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
-            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
-            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+  LineGraph.prototype._updateUngrouped = function() {
+    if (this.itemsData != null) {
+  //    var t0 = new Date();
+      var group = {id: UNGROUPED, content: this.options.defaultGroup};
+      this._updateGroup(group, UNGROUPED);
+      var ungroupedCounter = 0;
+      if (this.itemsData) {
+        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;
+            }
+          }
+        }
+      }
+
+      // much much slower
+  //    var datapoints = this.itemsData.get({
+  //      filter: function (item) {return item.group === undefined;},
+  //      showInternalIds:true
+  //    });
+  //    if (datapoints.length > 0) {
+  //      var updateQuery = [];
+  //      for (var i = 0; i < datapoints.length; i++) {
+  //        updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
+  //      }
+  //      this.itemsData.update(updateQuery, true);
+  //    }
+  //    var t1 = new Date();
+  //    var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
+      if (ungroupedCounter == 0) {
+        delete this.groups[UNGROUPED];
+        this.legendLeft.removeGroup(UNGROUPED);
+        this.legendRight.removeGroup(UNGROUPED);
+        this.yAxisLeft.removeGroup(UNGROUPED);
+        this.yAxisRight.removeGroup(UNGROUPED);
+      }
+  //    console.log("getting amount ungrouped",new Date() - t1);
+  //    console.log("putting in ungrouped",new Date() - t0);
     }
     else {
-      return true;
+      delete this.groups[UNGROUPED];
+      this.legendLeft.removeGroup(UNGROUPED);
+      this.legendRight.removeGroup(UNGROUPED);
+      this.yAxisLeft.removeGroup(UNGROUPED);
+      this.yAxisRight.removeGroup(UNGROUPED);
     }
-  };
 
-  /**
-   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
-   * @returns {boolean}
-   */
-  Node.prototype.inView = function() {
-    return (this.x >= this.canvasTopLeft.x    &&
-            this.x < this.canvasBottomRight.x &&
-            this.y >= this.canvasTopLeft.y    &&
-            this.y < this.canvasBottomRight.y);
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
   };
 
+
   /**
-   * This allows the zoom level of the network to influence the rendering
-   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
-   *
-   * @param scale
-   * @param canvasTopLeft
-   * @param canvasBottomRight
+   * Redraw the component, mandatory function
+   * @return {boolean} Returns true if the component is resized
    */
-  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-    this.canvasTopLeft = canvasTopLeft;
-    this.canvasBottomRight = canvasBottomRight;
-  };
+  LineGraph.prototype.redraw = function() {
+    var resized = false;
 
+    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+    if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
+      resized = true;
+    }
+    // check if this component is resized
+    resized = this._isResized() || resized;
+    // 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.width != this.lastWidth);
+    this.lastVisibleInterval = visibleInterval;
+    this.lastWidth = this.width;
 
-  /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
-   */
-  Node.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-  };
+    // calculate actual size and position
+    this.width = this.dom.frame.offsetWidth;
 
+    // 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.width);
+      this.svg.style.left = util.option.asSize(-this.width);
+    }
+    if (zoomed == true) {
+      this._updateGraph();
+    }
 
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
 
-  /**
-   * set the velocity at 0. Is called when this node is contained in another during clustering
-   */
-  Node.prototype.clearVelocity = function() {
-    this.vx = 0;
-    this.vy = 0;
+    return resized;
   };
 
-
   /**
-   * Basic preservation of (kinectic) energy
+   * Update and redraw the graph.
    *
-   * @param massBeforeClustering
    */
-  Node.prototype.updateVelocity = function(massBeforeClustering) {
-    var energyBefore = this.vx * this.vx * massBeforeClustering;
-    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vx = Math.sqrt(energyBefore/this.mass);
-    energyBefore = this.vy * this.vy * massBeforeClustering;
-    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vy = Math.sqrt(energyBefore/this.mass);
-  };
+  LineGraph.prototype._updateGraph = function () {
+    // reset the svg elements
+    DOMutil.prepareElements(this.svgElements);
+  //        // very slow...
+  //        groupData = group.itemsData.get({filter:
+  //          function (item) {
+  //            return (item.x > minDate && item.x < maxDate);
+  //          }}
+  //        );
 
-  module.exports = Node;
 
+    if (this.width != 0 && this.itemsData != null) {
+      var group, groupData, preprocessedGroup, i;
+      var preprocessedGroupData = [];
+      var processedGroupData = [];
+      var groupRanges = [];
+      var changeCalled = false;
 
-/***/ },
-/* 31 */
-/***/ function(module, exports, __webpack_require__) {
+      // getting group Ids
+      var groupIds = [];
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          groupIds.push(groupId);
+        }
+      }
 
-  /**
-   * Popup is a class to create a popup window with some text
-   * @param {Element}  container     The container object.
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {String} [text]
-   * @param {Object} [style]     An object containing borderColor,
-   *                             backgroundColor, etc.
-   */
-  function Popup(container, x, y, text, style) {
-    if (container) {
-      this.container = container;
-    }
-    else {
-      this.container = document.body;
-    }
+      // 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);
 
-    // x, y and text are optional, see if a style object was passed in their place
-    if (style === undefined) {
-      if (typeof x === "object") {
-        style = x;
-        x = undefined;
-      } else if (typeof text === "object") {
-        style = text;
-        text = undefined;
-      } else {
-        // for backwards compatibility, in case clients other than Network are creating Popup directly
-        style = {
-          fontColor: 'black',
-          fontSize: 14, // px
-          fontFace: 'verdana',
-          color: {
-            border: '#666',
-            background: '#FFFFC6'
+      // 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.
+      if (groupIds.length > 0) {
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          groupData = [];
+          // optimization for sorted data
+          if (group.options.sort == true) {
+            var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
+
+            for (var j = guess; j < group.itemsData.length; j++) {
+              var item = group.itemsData[j];
+              if (item !== undefined) {
+                if (item.x > maxDate) {
+                 groupData.push(item);
+                 break;
+                }
+                else {
+                  groupData.push(item);
+                }
+              }
+            }
+          }
+          else {
+            for (var j = 0; j < group.itemsData.length; j++) {
+              var item = group.itemsData[j];
+              if (item !== undefined) {
+                if (item.x > minDate && item.x < maxDate) {
+                  groupData.push(item);
+                }
+              }
+            }
           }
+          // preprocess, split into ranges and data
+          preprocessedGroup = this._preprocessData(groupData, group);
+          groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
+          preprocessedGroupData.push(preprocessedGroup.data);
         }
-      }
-    }
 
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
+        // 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);
+        if (changeCalled == true) {
+          DOMutil.cleanupElements(this.svgElements);
+          this.body.emitter.emit("change");
+          return;
+        }
 
-    if (x !== undefined && y !== undefined ) {
-      this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-      this.setText(text);
-    }
+        // 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.push(this._convertYvalues(preprocessedGroupData[i],group))
+        }
 
-    // create the frame
-    this.frame = document.createElement("div");
-    var styleAttr = this.frame.style;
-    styleAttr.position = "absolute";
-    styleAttr.visibility = "hidden";
-    styleAttr.border = "1px solid " + style.color.border;
-    styleAttr.color = style.fontColor;
-    styleAttr.fontSize = style.fontSize + "px";
-    styleAttr.fontFamily = style.fontFace;
-    styleAttr.padding = this.padding + "px";
-    styleAttr.backgroundColor = style.color.background;
-    styleAttr.borderRadius = "3px";
-    styleAttr.MozBorderRadius = "3px";
-    styleAttr.WebkitBorderRadius = "3px";
-    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    styleAttr.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
-  }
+        // draw the groups
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          if (group.options.style == 'line') {
+            this._drawLineGraph(processedGroupData[i], group);
+          }
+          else {
+            this._drawBarGraph (processedGroupData[i], group);
+          }
+        }
+      }
+    }
 
-  /**
-   * @param {number} x   Horizontal position of the popup window
-   * @param {number} y   Vertical position of the popup window
-   */
-  Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
+    // cleanup unused svg elements
+    DOMutil.cleanupElements(this.svgElements);
   };
 
   /**
-   * Set the text for the popup window. This can be HTML code
-   * @param {string} text
+   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
+   * @param {array} groupIds
+   * @private
    */
-  Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
-  };
+  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
+    var changeCalled = false;
+    var yAxisLeftUsed = false;
+    var yAxisRightUsed = false;
+    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
+    var orientation = 'left';
 
-  /**
-   * Show the popup window
-   * @param {boolean} show    Optional. Show or hide the window
-   */
-  Popup.prototype.show = function (show) {
-    if (show === undefined) {
-      show = true;
-    }
+    // if groups are present
+    if (groupIds.length > 0) {
+      for (var i = 0; i < groupIds.length; i++) {
+        orientation = 'left';
+        var group = this.groups[groupIds[i]];
+        if (group.options.yAxisOrientation == 'right') {
+          orientation = 'right';
+        }
 
-    if (show) {
-      var height = this.frame.clientHeight;
-      var width =  this.frame.clientWidth;
-      var maxHeight = this.frame.parentNode.clientHeight;
-      var maxWidth = this.frame.parentNode.clientWidth;
+        minVal = groupRanges[i].min;
+        maxVal = groupRanges[i].max;
 
-      var top = (this.y - height);
-      if (top + height + this.padding > maxHeight) {
-        top = maxHeight - height - this.padding;
-      }
-      if (top < this.padding) {
-        top = this.padding;
+        if (orientation == 'left') {
+          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;
+        }
       }
-
-      var left = this.x;
-      if (left + width + this.padding > maxWidth) {
-        left = maxWidth - width - this.padding;
+      if (yAxisLeftUsed == true) {
+        this.yAxisLeft.setRange(minLeft, maxLeft);
       }
-      if (left < this.padding) {
-        left = this.padding;
+      if (yAxisRightUsed == true) {
+        this.yAxisRight.setRange(minRight, maxRight);
       }
+    }
 
-      this.frame.style.left = left + "px";
-      this.frame.style.top = top + "px";
-      this.frame.style.visibility = "visible";
+    changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
+    changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
+
+    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
+      this.yAxisLeft.drawIcons = true;
+      this.yAxisRight.drawIcons = true;
     }
     else {
-      this.hide();
+      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;
+      }
+      changeCalled = this.yAxisLeft.redraw() || changeCalled;
+      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+      changeCalled = this.yAxisRight.redraw() || changeCalled;
+    }
+    else {
+      changeCalled = this.yAxisRight.redraw() || changeCalled;
+    }
+    return changeCalled;
   };
 
   /**
-   * Hide the popup window
+   * 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
    */
-  Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
+  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
+    var changed = false;
+    if (axisUsed == false) {
+      if (axis.dom.frame.parentNode) {
+        axis.hide();
+        changed = true;
+      }
+    }
+    else {
+      if (!axis.dom.frame.parentNode) {
+        axis.show();
+        changed = true;
+      }
+    }
+    return changed;
   };
 
-  module.exports = Popup;
-
-
-/***/ },
-/* 32 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Parse a text source containing data in DOT language into a JSON object.
-   * The object contains two lists: one with nodes and one with edges.
-   *
-   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
-   *
-   * @param {String} data     Text containing a graph in DOT-notation
-   * @return {Object} graph   An object containing two parameters:
-   *                          {Object[]} nodes
-   *                          {Object[]} edges
+   * draw a bar graph
+   * @param datapoints
+   * @param group
    */
-  function parseDOT (data) {
-    dot = data;
-    return parseGraph();
-  }
-
-  // token types enumeration
-  var TOKENTYPE = {
-    NULL : 0,
-    DELIMITER : 1,
-    IDENTIFIER: 2,
-    UNKNOWN : 3
-  };
+  LineGraph.prototype._drawBarGraph = function (dataset, group) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var coreDistance;
+        var minWidth = 0.1 * group.options.barChart.width;
+        var offset = 0;
+        var width = group.options.barChart.width;
 
-  // map with all delimiters
-  var DELIMITERS = {
-    '{': true,
-    '}': true,
-    '[': true,
-    ']': true,
-    ';': true,
-    '=': true,
-    ',': true,
+        if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
+        else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
 
-    '->': true,
-    '--': true
-  };
+        for (var i = 0; i < dataset.length; i++) {
+          // dynammically downscale the width so there is no overlap up to 1/10th the original width
+          if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
+          if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
+          if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
 
-  var dot = '';                   // current dot file
-  var index = 0;                  // current index in dot file
-  var c = '';                     // current token character in expr
-  var token = '';                 // current token
-  var tokenType = TOKENTYPE.NULL; // type of the token
+          DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
+        }
 
-  /**
-   * Get the first character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
-   */
-  function first() {
-    index = 0;
-    c = dot.charAt(0);
-  }
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
+        }
+      }
+    }
+  };
 
-  /**
-   * Get the next character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
-   */
-  function next() {
-    index++;
-    c = dot.charAt(index);
-  }
 
   /**
-   * Preview the next character from the dot file.
-   * @return {String} cNext
+   * draw a line graph
+   *
+   * @param datapoints
+   * @param group
    */
-  function nextPreview() {
-    return dot.charAt(index + 1);
-  }
+  LineGraph.prototype._drawLineGraph = function (dataset, group) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var path, d;
+        var svgHeight = Number(this.svg.style.height.replace("px",""));
+        path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
+        path.setAttributeNS(null, "class", group.className);
 
-  /**
-   * Test whether given character is alphabetic or numeric
-   * @param {String} c
-   * @return {Boolean} isAlphaNumeric
-   */
-  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
-  function isAlphaNumeric(c) {
-    return regexAlphaNumeric.test(c);
-  }
+        // construct path from dataset
+        if (group.options.catmullRom.enabled == true) {
+          d = this._catmullRom(dataset, group);
+        }
+        else {
+          d = this._linear(dataset);
+        }
 
-  /**
-   * Merge all properties of object b into object b
-   * @param {Object} a
-   * @param {Object} b
-   * @return {Object} a
-   */
-  function merge (a, b) {
-    if (!a) {
-      a = {};
-    }
+        // append with points for fill and finalize the path
+        if (group.options.shaded.enabled == true) {
+          var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.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");
+          fillPath.setAttributeNS(null, "d", dFill);
+        }
+        // copy properties to path for drawing.
+        path.setAttributeNS(null, "d", "M" + d);
 
-    if (b) {
-      for (var name in b) {
-        if (b.hasOwnProperty(name)) {
-          a[name] = b[name];
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          this._drawPoints(dataset, group, this.svgElements, this.svg);
         }
       }
     }
-    return a;
-  }
+  };
 
   /**
-   * Set a value in an object, where the provided parameter name can be a
-   * path with nested parameters. For example:
-   *
-   *     var obj = {a: 2};
-   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   * draw the data points
    *
-   * @param {Object} obj
-   * @param {String} path  A parameter name or dot-separated parameter path,
-   *                      like "color.highlight.border".
-   * @param {*} value
+   * @param dataset
+   * @param JSONcontainer
+   * @param svg
+   * @param group
    */
-  function setValue(obj, path, value) {
-    var keys = path.split('.');
-    var o = obj;
-    while (keys.length) {
-      var key = keys.shift();
-      if (keys.length) {
-        // this isn't the end point
-        if (!o[key]) {
-          o[key] = {};
-        }
-        o = o[key];
-      }
-      else {
-        // this is the end point
-        o[key] = value;
-      }
+  LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
+    if (offset === undefined) {offset = 0;}
+    for (var i = 0; i < dataset.length; i++) {
+      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
     }
-  }
+  };
+
+
 
   /**
-   * Add a node to a graph object. If there is already a node with
-   * the same id, their attributes will be merged.
-   * @param {Object} graph
-   * @param {Object} node
+   * 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
    */
-  function addNode(graph, node) {
-    var i, len;
-    var current = null;
+  LineGraph.prototype._preprocessData = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var toScreen = this.body.util.toScreen;
 
-    // find root graph (in case of subgraph)
-    var graphs = [graph]; // list with all graphs from current graph to root graph
-    var root = graph;
-    while (root.parent) {
-      graphs.push(root.parent);
-      root = root.parent;
-    }
+    var increment = 1;
+    var amountOfPoints = datapoints.length;
 
-    // find existing node (at root level) by its id
-    if (root.nodes) {
-      for (i = 0, len = root.nodes.length; i < len; i++) {
-        if (node.id === root.nodes[i].id) {
-          current = root.nodes[i];
-          break;
-        }
-      }
-    }
+    var yMin = datapoints[0].y;
+    var yMax = datapoints[0].y;
 
-    if (!current) {
-      // this is a new node
-      current = {
-        id: node.id
-      };
-      if (graph.node) {
-        // clone default attributes
-        current.attr = merge(current.attr, graph.node);
-      }
+    // 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.
+    if (group.options.sampling == true) {
+      var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
+      var pointsPerPixel = amountOfPoints/xDistance;
+      increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
     }
 
-    // add node to this (sub)graph and all its parent graphs
-    for (i = graphs.length - 1; i >= 0; i--) {
-      var g = graphs[i];
-
-      if (!g.nodes) {
-        g.nodes = [];
-      }
-      if (g.nodes.indexOf(current) == -1) {
-        g.nodes.push(current);
-      }
+    for (var i = 0; i < amountOfPoints; i += increment) {
+      xValue = toScreen(datapoints[i].x) + this.width - 1;
+      yValue = datapoints[i].y;
+      extractedData.push({x: xValue, y: yValue});
+      yMin = yMin > yValue ? yValue : yMin;
+      yMax = yMax < yValue ? yValue : yMax;
     }
 
-    // merge attributes
-    if (node.attr) {
-      current.attr = merge(current.attr, node.attr);
-    }
-  }
+    // extractedData.sort(function (a,b) {return a.x - b.x;});
+    return {min: yMin, max: yMax, data: extractedData};
+  };
 
   /**
-   * Add an edge to a graph object
-   * @param {Object} graph
-   * @param {Object} edge
+   * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
+   * util function toScreen to get the x coordinate from the timestamp.
+   *
+   * @param datapoints
+   * @param options
+   * @returns {Array}
+   * @private
    */
-  function addEdge(graph, edge) {
-    if (!graph.edges) {
-      graph.edges = [];
+  LineGraph.prototype._convertYvalues = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var axis = this.yAxisLeft;
+    var svgHeight = Number(this.svg.style.height.replace("px",""));
+
+    if (group.options.yAxisOrientation == 'right') {
+      axis = this.yAxisRight;
     }
-    graph.edges.push(edge);
-    if (graph.edge) {
-      var attr = merge({}, graph.edge);     // clone default attributes
-      edge.attr = merge(attr, edge.attr); // merge attributes
+
+    for (var i = 0; i < datapoints.length; i++) {
+      xValue = datapoints[i].x;
+      yValue = Math.round(axis.convertValue(datapoints[i].y));
+      extractedData.push({x: xValue, y: yValue});
     }
-  }
 
-  /**
-   * Create an edge to a graph object
-   * @param {Object} graph
-   * @param {String | Number | Object} from
-   * @param {String | Number | Object} to
-   * @param {String} type
-   * @param {Object | null} attr
-   * @return {Object} edge
-   */
-  function createEdge(graph, from, to, type, attr) {
-    var edge = {
-      from: from,
-      to: to,
-      type: type
-    };
+    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
 
-    if (graph.edge) {
-      edge.attr = merge({}, graph.edge);  // clone default attributes
-    }
-    edge.attr = merge(edge.attr || {}, attr); // merge attributes
+    // extractedData.sort(function (a,b) {return a.x - b.x;});
+    return extractedData;
+  };
 
-    return edge;
-  }
 
   /**
-   * Get next token in the current dot file.
-   * The token and token type are available as token and tokenType
+   * 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
    */
-  function getToken() {
-    tokenType = TOKENTYPE.NULL;
-    token = '';
+  LineGraph.prototype._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++) {
 
-    // skip over whitespaces
-    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-      next();
-    }
+      p0 = (i == 0) ? data[0] : data[i-1];
+      p1 = data[i];
+      p2 = data[i+1];
+      p3 = (i + 2 < length) ? data[i+2] : p2;
 
-    do {
-      var isComment = false;
 
-      // skip comment
-      if (c == '#') {
-        // find the previous non-space character
-        var i = index - 1;
-        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
-          i--;
-        }
-        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
-          // the # is at the start of a line, this is indeed a line comment
-          while (c != '' && c != '\n') {
-            next();
-          }
-          isComment = true;
-        }
-      }
-      if (c == '/' && nextPreview() == '/') {
-        // skip line comment
-        while (c != '' && c != '\n') {
-          next();
-        }
-        isComment = true;
-      }
-      if (c == '/' && nextPreview() == '*') {
-        // skip block comment
-        while (c != '') {
-          if (c == '*' && nextPreview() == '/') {
-            // end of block comment found. skip these last two characters
-            next();
-            next();
-            break;
-          }
-          else {
-            next();
-          }
-        }
-        isComment = true;
-      }
+      // 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
 
-      // skip over whitespaces
-      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-        next();
-      }
-    }
-    while (isComment);
+      //    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 };
 
-    // check for end of dot file
-    if (c == '') {
-      // token is still empty
-      tokenType = TOKENTYPE.DELIMITER;
-      return;
+      d += "C" +
+        bp1.x + "," +
+        bp1.y + " " +
+        bp2.x + "," +
+        bp2.y + " " +
+        p2.x + "," +
+        p2.y + " ";
     }
 
-    // check for delimiters consisting of 2 characters
-    var c2 = c + nextPreview();
-    if (DELIMITERS[c2]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c2;
-      next();
-      next();
-      return;
-    }
+    return d;
+  };
 
-    // check for delimiters consisting of 1 character
-    if (DELIMITERS[c]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c;
-      next();
-      return;
+  /**
+   * 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
+   * @returns {string}
+   * @private
+   */
+  LineGraph.prototype._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++) {
 
-    // check for an identifier (number or string)
-    // TODO: more precise parsing of numbers/strings (and the port separator ':')
-    if (isAlphaNumeric(c) || c == '-') {
-      token += c;
-      next();
+        p0 = (i == 0) ? data[0] : data[i-1];
+        p1 = data[i];
+        p2 = data[i+1];
+        p3 = (i + 2 < length) ? data[i+2] : p2;
 
-      while (isAlphaNumeric(c)) {
-        token += c;
-        next();
-      }
-      if (token == 'false') {
-        token = false;   // convert to boolean
-      }
-      else if (token == 'true') {
-        token = true;   // convert to boolean
-      }
-      else if (!isNaN(Number(token))) {
-        token = Number(token); // convert to number
-      }
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+        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));
 
-    // check for a string enclosed by double quotes
-    if (c == '"') {
-      next();
-      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
-        token += c;
-        if (c == '"') { // skip the escape character
-          next();
-        }
-        next();
-      }
-      if (c != '"') {
-        throw newSyntaxError('End of string " expected');
-      }
-      next();
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+        // 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          ]
 
-    // something unknown is found, wrong characters, a syntax error
-    tokenType = TOKENTYPE.UNKNOWN;
-    while (c != '') {
-      token += c;
-      next();
-    }
-    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
-  }
+        // [   0             1            0          0          ]
+        // [   -d2pow2a/N    A/N          d1pow2a/N  0          ]
+        // [   0             d3pow2a/M    B/M        -d2pow2a/M ]
+        // [   0             0            1          0          ]
 
-  /**
-   * Parse a graph.
-   * @returns {Object} graph
-   */
-  function parseGraph() {
-    var graph = {};
+        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);
 
-    first();
-    getToken();
+        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;}
 
-    // optional strict keyword
-    if (token == 'strict') {
-      graph.strict = true;
-      getToken();
-    }
+        bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
+          y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
 
-    // graph or digraph keyword
-    if (token == 'graph' || token == 'digraph') {
-      graph.type = token;
-      getToken();
-    }
+        bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
+          y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
 
-    // optional graph id
-    if (tokenType == TOKENTYPE.IDENTIFIER) {
-      graph.id = token;
-      getToken();
-    }
+        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 + " ";
+      }
 
-    // open angle bracket
-    if (token != '{') {
-      throw newSyntaxError('Angle bracket { expected');
+      return d;
     }
-    getToken();
-
-    // statements
-    parseStatements(graph);
+  };
 
-    // close angle bracket
-    if (token != '}') {
-      throw newSyntaxError('Angle bracket } expected');
+  /**
+   * this generates the SVG path for a linear drawing between datapoints.
+   * @param data
+   * @returns {string}
+   * @private
+   */
+  LineGraph.prototype._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;
+      }
     }
-    getToken();
+    return d;
+  };
 
-    // end of file
-    if (token !== '') {
-      throw newSyntaxError('End of file expected');
-    }
-    getToken();
+  module.exports = LineGraph;
 
-    // remove temporary default properties
-    delete graph.node;
-    delete graph.edge;
-    delete graph.graph;
 
-    return graph;
-  }
+/***/ },
+/* 33 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Parse a list with statements.
-   * @param {Object} graph
-   */
-  function parseStatements (graph) {
-    while (token !== '' && token != '}') {
-      parseStatement(graph);
-      if (token == ';') {
-        getToken();
-      }
-    }
-  }
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+  var Component = __webpack_require__(19);
+  var DataStep = __webpack_require__(34);
 
   /**
-   * Parse a single statement. Can be a an attribute statement, node
-   * statement, a series of node statements and edge statements, or a
-   * parameter.
-   * @param {Object} graph
+   * A horizontal time axis
+   * @param {Object} [options]        See DataAxis.setOptions for the available
+   *                                  options.
+   * @constructor DataAxis
+   * @extends Component
+   * @param body
    */
-  function parseStatement(graph) {
-    // parse subgraph
-    var subgraph = parseSubgraph(graph);
-    if (subgraph) {
-      // edge statements
-      parseEdge(graph, subgraph);
+  function DataAxis (body, options, svg) {
+    this.id = util.randomUUID();
+    this.body = body;
 
-      return;
-    }
+    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
+    };
 
-    // parse an attribute statement
-    var attr = parseAttributeStatement(graph);
-    if (attr) {
-      return;
-    }
+    this.linegraphSVG = svg;
+    this.props = {};
+    this.DOMelements = { // dynamic elements
+      lines: {},
+      labels: {}
+    };
 
-    // parse node
-    if (tokenType != TOKENTYPE.IDENTIFIER) {
-      throw newSyntaxError('Identifier expected');
-    }
-    var id = token; // id can be a string or a number
-    getToken();
+    this.dom = {};
 
-    if (token == '=') {
-      // id statement
-      getToken();
-      if (tokenType != TOKENTYPE.IDENTIFIER) {
-        throw newSyntaxError('Identifier expected');
-      }
-      graph[id] = token;
-      getToken();
-      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
-    }
-    else {
-      parseNodeStatement(graph, id);
-    }
+    this.range = {start:0, end:0};
+
+    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.stepPixels = 25;
+    this.stepPixelsForced = 25;
+    this.lineOffset = 0;
+    this.master = true;
+    this.svgElements = {};
+
+
+    this.groups = {};
+    this.amountOfGroups = 0;
+
+    // create the HTML DOM
+    this._create();
   }
 
-  /**
-   * Parse a subgraph
-   * @param {Object} graph    parent graph object
-   * @return {Object | null} subgraph
-   */
-  function parseSubgraph (graph) {
-    var subgraph = null;
+  DataAxis.prototype = new Component();
 
-    // optional subgraph keyword
-    if (token == 'subgraph') {
-      subgraph = {};
-      subgraph.type = 'subgraph';
-      getToken();
 
-      // optional graph id
-      if (tokenType == TOKENTYPE.IDENTIFIER) {
-        subgraph.id = token;
-        getToken();
-      }
+
+  DataAxis.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
     }
+    this.amountOfGroups += 1;
+  };
 
-    // open angle bracket
-    if (token == '{') {
-      getToken();
+  DataAxis.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
+  };
 
-      if (!subgraph) {
-        subgraph = {};
-      }
-      subgraph.parent = graph;
-      subgraph.node = graph.node;
-      subgraph.edge = graph.edge;
-      subgraph.graph = graph.graph;
+  DataAxis.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
+  };
 
-      // statements
-      parseStatements(subgraph);
 
-      // close angle bracket
-      if (token != '}') {
-        throw newSyntaxError('Angle bracket } expected');
+  DataAxis.prototype.setOptions = function (options) {
+    if (options) {
+      var redraw = false;
+      if (this.options.orientation != options.orientation && options.orientation !== undefined) {
+        redraw = true;
       }
-      getToken();
+      var fields = [
+        'orientation',
+        'showMinorLabels',
+        'showMajorLabels',
+        'icons',
+        'majorLinesOffset',
+        'minorLinesOffset',
+        'labelOffsetX',
+        'labelOffsetY',
+        'iconWidth',
+        'width',
+        'visible'];
+      util.selectiveExtend(fields, this.options, options);
 
-      // remove temporary default properties
-      delete subgraph.node;
-      delete subgraph.edge;
-      delete subgraph.graph;
-      delete subgraph.parent;
+      this.minWidth = Number(('' + this.options.width).replace("px",""));
 
-      // register at the parent graph
-      if (!graph.subgraphs) {
-        graph.subgraphs = [];
+      if (redraw == true && this.dom.frame) {
+        this.hide();
+        this.show();
       }
-      graph.subgraphs.push(subgraph);
     }
+  };
 
-    return subgraph;
-  }
 
   /**
-   * parse an attribute statement like "node [shape=circle fontSize=16]".
-   * Available keywords are 'node', 'edge', 'graph'.
-   * The previous list with default attributes will be replaced
-   * @param {Object} graph
-   * @returns {String | null} keyword Returns the name of the parsed attribute
-   *                                  (node, edge, graph), or null if nothing
-   *                                  is parsed.
+   * Create the HTML DOM for the DataAxis
    */
-  function parseAttributeStatement (graph) {
-    // attribute statements
-    if (token == 'node') {
-      getToken();
+  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;
 
-      // node attributes
-      graph.node = parseAttributeList();
-      return 'node';
-    }
-    else if (token == 'edge') {
-      getToken();
+    this.dom.lineContainer = document.createElement('div');
+    this.dom.lineContainer.style.width = '100%';
+    this.dom.lineContainer.style.height = this.height;
 
-      // edge attributes
-      graph.edge = parseAttributeList();
-      return 'edge';
-    }
-    else if (token == 'graph') {
-      getToken();
+    // 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);
+  };
 
-      // graph attributes
-      graph.graph = parseAttributeList();
-      return 'graph';
-    }
+  DataAxis.prototype._redrawGroupIcons = function () {
+    DOMutil.prepareElements(this.svgElements);
 
-    return null;
-  }
+    var x;
+    var iconWidth = this.options.iconWidth;
+    var iconHeight = 15;
+    var iconOffset = 4;
+    var y = iconOffset + 0.5 * iconHeight;
 
-  /**
-   * parse a node statement
-   * @param {Object} graph
-   * @param {String | Number} id
-   */
-  function parseNodeStatement(graph, id) {
-    // node statement
-    var node = {
-      id: id
-    };
-    var attr = parseAttributeList();
-    if (attr) {
-      node.attr = attr;
+    if (this.options.orientation == 'left') {
+      x = iconOffset;
+    }
+    else {
+      x = this.width - iconWidth - iconOffset;
     }
-    addNode(graph, node);
 
-    // edge statements
-    parseEdge(graph, id);
-  }
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+        y += iconHeight + iconOffset;
+      }
+    }
+
+    DOMutil.cleanupElements(this.svgElements);
+  };
 
   /**
-   * Parse an edge or a series of edges
-   * @param {Object} graph
-   * @param {String | Number} from        Id of the from node
+   * Create the HTML DOM for the DataAxis
    */
-  function parseEdge(graph, from) {
-    while (token == '->' || token == '--') {
-      var to;
-      var type = token;
-      getToken();
-
-      var subgraph = parseSubgraph(graph);
-      if (subgraph) {
-        to = subgraph;
+  DataAxis.prototype.show = function() {
+    if (!this.dom.frame.parentNode) {
+      if (this.options.orientation == 'left') {
+        this.body.dom.left.appendChild(this.dom.frame);
       }
       else {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Identifier or subgraph expected');
-        }
-        to = token;
-        addNode(graph, {
-          id: to
-        });
-        getToken();
+        this.body.dom.right.appendChild(this.dom.frame);
       }
+    }
 
-      // parse edge attributes
-      var attr = parseAttributeList();
+    if (!this.dom.lineContainer.parentNode) {
+      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
+    }
+  };
 
-      // create edge
-      var edge = createEdge(graph, from, to, type, attr);
-      addEdge(graph, edge);
+  /**
+   * Create the HTML DOM for the DataAxis
+   */
+  DataAxis.prototype.hide = function() {
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
 
-      from = to;
+    if (this.dom.lineContainer.parentNode) {
+      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
     }
-  }
+  };
 
   /**
-   * Parse a set with attributes,
-   * for example [label="1.000", shape=solid]
-   * @return {Object | null} attr
+   * Set a range (start and end)
+   * @param end
+   * @param start
+   * @param end
    */
-  function parseAttributeList() {
-    var attr = null;
+  DataAxis.prototype.setRange = function (start, end) {
+    this.range.start = start;
+    this.range.end = end;
+  };
 
-    while (token == '[') {
-      getToken();
-      attr = {};
-      while (token !== '' && token != ']') {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute name expected');
-        }
-        var name = token;
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  DataAxis.prototype.redraw = function () {
+    var changeCalled = false;
+    if (this.amountOfGroups == 0) {
+      this.hide();
+    }
+    else {
+      this.show();
+      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
+      // svg offsetheight did not work in firefox and explorer...
 
-        getToken();
-        if (token != '=') {
-          throw newSyntaxError('Equal sign = expected');
-        }
-        getToken();
+      this.dom.lineContainer.style.height = this.height + 'px';
+      this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
 
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute value expected');
-        }
-        var value = token;
-        setValue(attr, name, value); // name can be a path
+      var props = this.props;
+      var frame = this.dom.frame;
 
-        getToken();
-        if (token ==',') {
-          getToken();
-        }
-      }
+      // update classname
+      frame.className = 'dataaxis';
 
-      if (token != ']') {
-        throw newSyntaxError('Bracket ] expected');
+      // calculate character width and height
+      this._calculateCharSize();
+
+      var orientation = this.options.orientation;
+      var showMinorLabels = this.options.showMinorLabels;
+      var 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.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;
+
+      //  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";
+      }
+      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";
+      }
+      changeCalled = this._redrawLabels();
+      if (this.options.icons == true) {
+        this._redrawGroupIcons();
       }
-      getToken();
     }
-
-    return attr;
-  }
+    return changeCalled;
+  };
 
   /**
-   * Create a syntax error with extra information on current token and index.
-   * @param {String} message
-   * @returns {SyntaxError} err
+   * Repaint major and minor text labels and vertical grid lines
+   * @private
    */
-  function newSyntaxError(message) {
-    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
-  }
+  DataAxis.prototype._redrawLabels = function () {
+    DOMutil.prepareElements(this.DOMelements);
 
-  /**
-   * Chop off text after a maximum length
-   * @param {String} text
-   * @param {Number} maxLength
-   * @returns {String}
-   */
-  function chop (text, maxLength) {
-    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
-  }
+    var orientation = this.options['orientation'];
 
-  /**
-   * Execute a function fn for each pair of elements in two arrays
-   * @param {Array | *} array1
-   * @param {Array | *} array2
-   * @param {function} fn
-   */
-  function forEach2(array1, array2, fn) {
-    if (array1 instanceof Array) {
-      array1.forEach(function (elem1) {
-        if (array2 instanceof Array) {
-          array2.forEach(function (elem2)  {
-            fn(elem1, elem2);
-          });
-        }
-        else {
-          fn(elem1, array2);
-        }
-      });
-    }
-    else {
-      if (array2 instanceof Array) {
-        array2.forEach(function (elem2)  {
-          fn(array1, elem2);
-        });
-      }
-      else {
-        fn(array1, array2);
+    // 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.step = step;
+    step.first();
+
+    // get the distance in pixels for a step
+    var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
+    this.stepPixels = stepPixels;
+
+    var amountOfSteps = this.height / stepPixels;
+    var stepDifference = 0;
+
+    if (this.master == false) {
+      stepPixels = this.stepPixelsForced;
+      stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
+      for (var i = 0; i < 0.5 * stepDifference; i++) {
+        step.previous();
       }
+      amountOfSteps = this.height / stepPixels;
     }
-  }
 
-  /**
-   * Convert a string containing a graph in DOT language into a map containing
-   * with nodes and edges in the format of graph.
-   * @param {String} data         Text containing a graph in DOT-notation
-   * @return {Object} graphData
-   */
-  function DOTToGraph (data) {
-    // parse the DOT file
-    var dotData = parseDOT(data);
-    var graphData = {
-      nodes: [],
-      edges: [],
-      options: {}
-    };
 
-    // copy the nodes
-    if (dotData.nodes) {
-      dotData.nodes.forEach(function (dotNode) {
-        var graphNode = {
-          id: dotNode.id,
-          label: String(dotNode.label || dotNode.id)
-        };
-        merge(graphNode, dotNode.attr);
-        if (graphNode.image) {
-          graphNode.shape = 'image';
-        }
-        graphData.nodes.push(graphNode);
-      });
-    }
+    this.valueAtZero = step.marginEnd;
+    var marginStartPos = 0;
 
-    // copy the edges
-    if (dotData.edges) {
-      /**
-       * Convert an edge in DOT format to an edge with VisGraph format
-       * @param {Object} dotEdge
-       * @returns {Object} graphEdge
-       */
-      function convertEdge(dotEdge) {
-        var graphEdge = {
-          from: dotEdge.from,
-          to: dotEdge.to
-        };
-        merge(graphEdge, dotEdge.attr);
-        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
-        return graphEdge;
-      }
+    // do not draw the first label
+    var max = 1;
+    step.next();
 
-      dotData.edges.forEach(function (dotEdge) {
-        var from, to;
-        if (dotEdge.from instanceof Object) {
-          from = dotEdge.from.nodes;
-        }
-        else {
-          from = {
-            id: dotEdge.from
-          }
-        }
+    this.maxLabelSize = 0;
+    var y = 0;
+    while (max < Math.round(amountOfSteps)) {
 
-        if (dotEdge.to instanceof Object) {
-          to = dotEdge.to.nodes;
-        }
-        else {
-          to = {
-            id: dotEdge.to
-          }
-        }
+      y = Math.round(max * stepPixels);
+      marginStartPos = max * stepPixels;
+      var isMajor = step.isMajor();
 
-        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
-          dotEdge.from.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
+      if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
+        this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
+      }
 
-        forEach2(from, to, function (from, to) {
-          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
-          var graphEdge = convertEdge(subEdge);
-          graphData.edges.push(graphEdge);
-        });
+      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
+          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
 
-        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
-          dotEdge.to.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
+        if (y >= 0) {
+          this._redrawLabel(y - 2, step.getCurrent(), 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);
+      }
+
+      step.next();
+      max++;
     }
 
-    // copy the options
-    if (dotData.attr) {
-      graphData.options = dotData.attr;
+    this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
+
+    var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
+    // this will resize the yAxis to accomodate 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);
+      this.redraw();
+      return 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);
+      this.redraw();
+      return true;
+    }
+    else {
+      DOMutil.cleanupElements(this.DOMelements);
+      return false;
     }
+  };
 
-    return graphData;
-  }
+  /**
+   * Create a label for the axis at position x
+   * @private
+   * @param y
+   * @param text
+   * @param orientation
+   * @param className
+   * @param characterHeight
+   */
+  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
+    // reuse redundant label
+    var label = DOMutil.getDOMElement('div',this.DOMelements, this.dom.frame); //this.dom.redundant.labels.shift();
+    label.className = className;
+    label.innerHTML = text;
 
-  // exports
-  exports.parseDOT = parseDOT;
-  exports.DOTToGraph = DOTToGraph;
+    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';
 
-/***/ },
-/* 33 */
-/***/ function(module, exports, __webpack_require__) {
+    text += '';
 
-  /**
-   * @prototype Point3d
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {Number} [z]
-   */
-  function Point3d(x, y, z) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
-    this.z = z !== undefined ? z : 0;
+    var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
+    if (this.maxLabelSize < text.length * largestWidth) {
+      this.maxLabelSize = text.length * largestWidth;
+    }
   };
 
   /**
-   * Subtract the two provided points, returns a-b
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} a-b
+   * Create a minor line for the axis at position y
+   * @param y
+   * @param orientation
+   * @param className
+   * @param offset
+   * @param width
    */
-  Point3d.subtract = function(a, b) {
-    var sub = new Point3d();
-    sub.x = a.x - b.x;
-    sub.y = a.y - b.y;
-    sub.z = a.z - b.z;
-    return sub;
-  };
+  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
+    if (this.master == true) {
+      var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
+      line.className = className;
+      line.innerHTML = '';
 
-  /**
-   * Add the two provided points, returns a+b
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} a+b
-   */
-  Point3d.add = function(a, b) {
-    var sum = new Point3d();
-    sum.x = a.x + b.x;
-    sum.y = a.y + b.y;
-    sum.z = a.z + b.z;
-    return sum;
-  };
+      if (orientation == 'left') {
+        line.style.left = (this.width - offset) + 'px';
+      }
+      else {
+        line.style.right = (this.width - offset) + 'px';
+      }
 
-  /**
-   * Calculate the average of two 3d points
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} The average, (a+b)/2
-   */
-  Point3d.avg = function(a, b) {
-    return new Point3d(
-            (a.x + b.x) / 2,
-            (a.y + b.y) / 2,
-            (a.z + b.z) / 2
-    );
+      line.style.width = width + 'px';
+      line.style.top = y + 'px';
+    }
   };
 
-  /**
-   * Calculate the cross product of the two provided points, returns axb
-   * Documentation: http://en.wikipedia.org/wiki/Cross_product
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} cross product axb
-   */
-  Point3d.crossProduct = function(a, b) {
-    var crossproduct = new Point3d();
-
-    crossproduct.x = a.y * b.z - a.z * b.y;
-    crossproduct.y = a.z * b.x - a.x * b.z;
-    crossproduct.z = a.x * b.y - a.y * b.x;
 
-    return crossproduct;
+  DataAxis.prototype.convertValue = function (value) {
+    var invertedValue = this.valueAtZero - value;
+    var convertedValue = invertedValue * this.conversionFactor;
+    return convertedValue; // the -2 is to compensate for the borders
   };
 
 
   /**
-   * Rtrieve the length of the vector (or the distance from this point to the origin
-   * @return {Number}  length
+   * 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
    */
-  Point3d.prototype.length = function() {
-    return Math.sqrt(
-            this.x * this.x +
-            this.y * this.y +
-            this.z * this.z
-    );
-  };
+  DataAxis.prototype._calculateCharSize = function () {
+    // determine the char width and height on the minor axis
+    if (!('minorCharHeight' in this.props)) {
 
-  module.exports = Point3d;
+      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;
 
-/***/ },
-/* 34 */
-/***/ function(module, exports, __webpack_require__) {
+      this.dom.frame.removeChild(measureCharMinor);
+    }
+
+    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);
+
+      this.props.majorCharHeight = measureCharMajor.clientHeight;
+      this.props.majorCharWidth = measureCharMajor.clientWidth;
+
+      this.dom.frame.removeChild(measureCharMajor);
+    }
+  };
 
   /**
-   * @prototype Point2d
-   * @param {Number} [x]
-   * @param {Number} [y]
+   * 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
    */
-  Point2d = function (x, y) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
+  DataAxis.prototype.snap = function(date) {
+    return this.step.snap(date);
   };
 
-  module.exports = Point2d;
+  module.exports = DataAxis;
 
 
 /***/ },
-/* 35 */
+/* 34 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var DataView = __webpack_require__(4);
-
   /**
-   * @class Filter
+   * @constructor  DataStep
+   * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
+   * end data point. The class itself determines the best scale (step size) based on the
+   * provided start Date, end Date, and minimumStep.
    *
-   * @param {DataSet} data The google data table
-   * @param {Number}  column             The index of the column to be filtered
-   * @param {Graph} graph           The graph
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   *
+   * Alternatively, you can set a scale by hand.
+   * After creation, you can initialize the class by executing first(). Then you
+   * can iterate from the start date to the end date via next(). You can check if
+   * the end date is reached with the function hasNext(). After each step, you can
+   * retrieve the current date via getCurrent().
+   * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
+   * days, to years.
+   *
+   * Version: 1.2
+   *
+   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
+   *                               or new Date(2010, 9, 21, 23, 45, 00)
+   * @param {Date} [end]           The end date
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  function Filter (data, column, graph) {
-    this.data = data;
-    this.column = column;
-    this.graph = graph; // the parent graph
-
-    this.index = undefined;
-    this.value = undefined;
-
-    // read all distinct values and select the first one
-    this.values = graph.getDistinctValues(data.get(), this.column);
+  function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
+    // variables
+    this.current = 0;
 
-    // sort both numeric and string values correctly
-    this.values.sort(function (a, b) {
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
+    this.autoScale = true;
+    this.stepIndex = 0;
+    this.step = 1;
+    this.scale = 1;
 
-    if (this.values.length > 0) {
-      this.selectValue(0);
-    }
+    this.marginStart;
+    this.marginEnd;
 
-    // create an array with the filtered datapoints. this will be loaded afterwards
-    this.dataPoints = [];
+    this.majorSteps = [1,     2,    5,  10];
+    this.minorSteps = [0.25,  0.5,  1,  2];
 
-    this.loaded = false;
-    this.onLoadCallback = undefined;
+    this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
+  }
 
-    if (graph.animationPreload) {
-      this.loaded = false;
-      this.loadInBackground();
-    }
-    else {
-      this.loaded = true;
-    }
-  };
 
 
   /**
-   * Return the label
-   * @return {string} label
+   * Set a new range
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   * @param {Number} [start]      The start date and time.
+   * @param {Number} [end]        The end date and time.
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  Filter.prototype.isLoaded = function() {
-    return this.loaded;
-  };
+  DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
+    this._start = start;
+    this._end = end;
 
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
+    }
+    this.setFirst();
+  };
 
   /**
-   * Return the loaded progress
-   * @return {Number} percentage between 0 and 100
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
    */
-  Filter.prototype.getLoadedProgress = function() {
-    var len = this.values.length;
+  DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
+    // round to floor
+    var size = this._end - this._start;
+    var safeSize = size * 1.1;
+    var minimumStepValue = minimumStep * (safeSize / containerHeight);
+    var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
 
-    var i = 0;
-    while (this.dataPoints[i]) {
-      i++;
+    var minorStepIdx = -1;
+    var magnitudefactor = Math.pow(10,orderOfMagnitude);
+
+    var start = 0;
+    if (orderOfMagnitude < 0) {
+      start = orderOfMagnitude;
     }
 
-    return Math.round(i / len * 100);
+    var solutionFound = false;
+    for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
+      magnitudefactor = Math.pow(10,i);
+      for (var j = 0; j < this.minorSteps.length; j++) {
+        var stepSize = magnitudefactor * this.minorSteps[j];
+        if (stepSize >= minimumStepValue) {
+          solutionFound = true;
+          minorStepIdx = j;
+          break;
+        }
+      }
+      if (solutionFound == true) {
+        break;
+      }
+    }
+    this.stepIndex = minorStepIdx;
+    this.scale = magnitudefactor;
+    this.step = magnitudefactor * this.minorSteps[minorStepIdx];
   };
 
 
   /**
-   * Return the label
-   * @return {string} label
+   * Set the range iterator to the start date.
    */
-  Filter.prototype.getLabel = function() {
-    return this.graph.filterLabel;
+  DataStep.prototype.first = function() {
+    this.setFirst();
   };
 
-
   /**
-   * Return the columnIndex of the filter
-   * @return {Number} columnIndex
-   */
-  Filter.prototype.getColumn = function() {
-    return this.column;
-  };
-
-  /**
-   * Return the currently selected value. Returns undefined if there is no selection
-   * @return {*} value
+   * Round the current date to the first minor date value
+   * This must be executed once when the current date is set to start Date
    */
-  Filter.prototype.getSelectedValue = function() {
-    if (this.index === undefined)
-      return undefined;
+  DataStep.prototype.setFirst = function() {
+    var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
+    var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
+
+    this.marginEnd = this.roundToMinor(niceEnd);
+    this.marginStart = this.roundToMinor(niceStart);
+    this.marginRange = this.marginEnd - this.marginStart;
+
+    this.current = this.marginEnd;
 
-    return this.values[this.index];
   };
 
+  DataStep.prototype.roundToMinor = function(value) {
+    var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
+    if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
+      return rounded + (this.scale * this.minorSteps[this.stepIndex]);
+    }
+    else {
+      return rounded;
+    }
+  }
+
+
   /**
-   * Retrieve all values of the filter
-   * @return {Array} values
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
    */
-  Filter.prototype.getValues = function() {
-    return this.values;
+  DataStep.prototype.hasNext = function () {
+    return (this.current >= this.marginStart);
   };
 
   /**
-   * Retrieve one value of the filter
-   * @param {Number}  index
-   * @return {*} value
+   * Do the next step
    */
-  Filter.prototype.getValue = function(index) {
-    if (index >= this.values.length)
-      throw 'Error: index out of range';
+  DataStep.prototype.next = function() {
+    var prev = this.current;
+    this.current -= this.step;
 
-    return this.values[index];
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current == prev) {
+      this.current = this._end;
+    }
   };
 
-
   /**
-   * Retrieve the (filtered) dataPoints for the currently selected filter index
-   * @param {Number} [index] (optional)
-   * @return {Array} dataPoints
+   * Do the next step
    */
-  Filter.prototype._getDataPoints = function(index) {
-    if (index === undefined)
-      index = this.index;
-
-    if (index === undefined)
-      return [];
+  DataStep.prototype.previous = function() {
+    this.current += this.step;
+    this.marginEnd += this.step;
+    this.marginRange = this.marginEnd - this.marginStart;
+  };
 
-    var dataPoints;
-    if (this.dataPoints[index]) {
-      dataPoints = this.dataPoints[index];
-    }
-    else {
-      var f = {};
-      f.column = this.column;
-      f.value = this.values[index];
 
-      var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
-      dataPoints = this.graph._getDataPoints(dataView);
 
-      this.dataPoints[index] = dataPoints;
+  /**
+   * Get the current datetime
+   * @return {String}  current The current date
+   */
+  DataStep.prototype.getCurrent = function() {
+    var toPrecision = '' + Number(this.current).toPrecision(5);
+    for (var i = toPrecision.length-1; i > 0; i--) {
+      if (toPrecision[i] == "0") {
+        toPrecision = toPrecision.slice(0,i);
+      }
+      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+        toPrecision = toPrecision.slice(0,i);
+        break;
+      }
+      else{
+        break;
+      }
     }
 
-    return dataPoints;
+    return toPrecision;
   };
 
 
 
   /**
-   * Set a callback function when the filter is fully loaded.
+   * 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
    */
-  Filter.prototype.setOnLoadCallback = function(callback) {
-    this.onLoadCallback = callback;
-  };
+  DataStep.prototype.snap = function(date) {
 
+  };
 
   /**
-   * Add a value to the list with available values for this filter
-   * No double entries will be created.
-   * @param {Number} index
+   * Check if the current value is a major value (for example when the step
+   * is DAY, a major value is each first day of the MONTH)
+   * @return {boolean} true if current date is major, else false.
    */
-  Filter.prototype.selectValue = function(index) {
-    if (index >= this.values.length)
-      throw 'Error: index out of range';
-
-    this.index = index;
-    this.value = this.values[index];
+  DataStep.prototype.isMajor = function() {
+    return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
   };
 
+  module.exports = DataStep;
+
+
+/***/ },
+/* 35 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+
   /**
-   * Load all filtered rows in the background one by one
-   * Start this method without providing an index!
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  Filter.prototype.loadInBackground = function(index) {
-    if (index === undefined)
-      index = 0;
+  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 = [];
+  }
 
-    var frame = this.graph.frame;
+  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 = [];
+    }
+  };
 
-    if (index < this.values.length) {
-      var dataPointsTemp = this._getDataPoints(index);
-      //this.graph.redrawInfo(); // TODO: not neat
+  GraphGroup.prototype.setZeroPosition = function(pos) {
+    this.zeroPosition = pos;
+  };
 
-      // create a progress box
-      if (frame.progress === undefined) {
-        frame.progress = document.createElement('DIV');
-        frame.progress.style.position = 'absolute';
-        frame.progress.style.color = 'gray';
-        frame.appendChild(frame.progress);
+  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;
+            }
+          }
+        }
       }
-      var progress = this.getLoadedProgress();
-      frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
-      // TODO: this is no nice solution...
-      frame.progress.style.bottom = 60 + 'px'; // TODO: use height of slider
-      frame.progress.style.left = 10 + 'px';
+    }
+  };
 
-      var me = this;
-      setTimeout(function() {me.loadInBackground(index+1);}, 10);
-      this.loaded = false;
+  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.setOptions(group.options);
+  };
+
+  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);
+      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 {
-      this.loaded = true;
+      var barWidth = Math.round(0.3 * iconWidth);
+      var bar1Height = Math.round(0.4 * iconHeight);
+      var bar2Height = Math.round(0.75 * iconHeight);
 
-      // remove the progress box
-      if (frame.progress !== undefined) {
-        frame.removeChild(frame.progress);
-        frame.progress = undefined;
-      }
+      var offset = Math.round((iconWidth - (2 * barWidth))/3);
 
-      if (this.onLoadCallback)
-        this.onLoadCallback();
+      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 = Filter;
+  module.exports = GraphGroup;
 
 
 /***/ },
 /* 36 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+  var Component = __webpack_require__(19);
+
   /**
-   * @prototype StepNumber
-   * The class StepNumber is an iterator for Numbers. You provide a start and end
-   * value, and a best step size. StepNumber itself rounds to fixed values and
-   * a finds the step that best fits the provided step.
-   *
-   * If prettyStep is true, the step size is chosen as close as possible to the
-   * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
-   *
-   * Example usage:
-   *   var step = new StepNumber(0, 10, 2.5, true);
-   *   step.start();
-   *   while (!step.end()) {
-   *   alert(step.getCurrent());
-   *   step.next();
-   *   }
-   *
-   * Version: 1.0
-   *
-   * @param {Number} start     The start value
-   * @param {Number} end     The end value
-   * @param {Number} step    Optional. Step size. Must be a positive value.
-   * @param {boolean} prettyStep Optional. If true, the step size is rounded
-   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   * Legend for Graph2d
    */
-  function StepNumber(start, end, step, prettyStep) {
-    // set default values
-    this._start = 0;
-    this._end = 0;
-    this._step = 1;
-    this.prettyStep = true;
-    this.precision = 5;
+  function Legend(body, options, side) {
+    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._current = 0;
-    this.setRange(start, end, step, prettyStep);
-  };
+    this.svgElements = {};
+    this.dom = {};
+    this.groups = {};
+    this.amountOfGroups = 0;
+    this._create();
 
-  /**
-   * Set a new range: start, end and step.
-   *
-   * @param {Number} start     The start value
-   * @param {Number} end     The end value
-   * @param {Number} step    Optional. Step size. Must be a positive value.
-   * @param {boolean} prettyStep Optional. If true, the step size is rounded
-   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
-   */
-  StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
-    this._start = start ? start : 0;
-    this._end = end ? end : 0;
+    this.setOptions(options);
+  }
 
-    this.setStep(step, prettyStep);
-  };
+  Legend.prototype = new Component();
 
-  /**
-   * Set a new step size
-   * @param {Number} step    New step size. Must be a positive value
-   * @param {boolean} prettyStep Optional. If true, the provided step is rounded
-   *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
-   */
-  StepNumber.prototype.setStep = function(step, prettyStep) {
-    if (step === undefined || step <= 0)
-      return;
 
-    if (prettyStep !== undefined)
-      this.prettyStep = prettyStep;
+  Legend.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
+    }
+    this.amountOfGroups += 1;
+  };
 
-    if (this.prettyStep === true)
-      this._step = StepNumber.calculatePrettyStep(step);
-    else
-      this._step = step;
+  Legend.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
   };
 
-  /**
-   * Calculate a nice step size, closest to the desired step size.
-   * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
-   * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
-   * @param {Number}  step  Desired step size
-   * @return {Number}     Nice step size
-   */
-  StepNumber.calculatePrettyStep = function (step) {
-    var log10 = function (x) {return Math.log(x) / Math.LN10;};
+  Legend.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
+  };
 
-    // try three steps (multiple of 1, 2, or 5
-    var step1 = Math.pow(10, Math.round(log10(step))),
-        step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
-        step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
+  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";
 
-    // choose the best step (closest to minimum step)
-    var prettyStep = step1;
-    if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
-    if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
+    this.dom.textArea = document.createElement('div');
+    this.dom.textArea.className = 'legendText';
+    this.dom.textArea.style.position = "relative";
+    this.dom.textArea.style.top = "0px";
 
-    // for safety
-    if (prettyStep <= 0) {
-      prettyStep = 1;
-    }
+    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';
 
-    return prettyStep;
+    this.dom.frame.appendChild(this.svg);
+    this.dom.frame.appendChild(this.dom.textArea);
   };
 
   /**
-   * returns the current value of the step
-   * @return {Number} current value
+   * Hide the component from the DOM
    */
-  StepNumber.prototype.getCurrent = function () {
-    return parseFloat(this._current.toPrecision(this.precision));
+  Legend.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
   };
 
   /**
-   * returns the current step size
-   * @return {Number} current step size
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
    */
-  StepNumber.prototype.getStep = function () {
-    return this._step;
+  Legend.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
+    }
   };
 
-  /**
-   * Set the current value to the largest value smaller than start, which
-   * is a multiple of the step size
-   */
-  StepNumber.prototype.start = function() {
-    this._current = this._start - this._start % this._step;
+  Legend.prototype.setOptions = function(options) {
+    var fields = ['enabled','orientation','icons','left','right'];
+    util.selectiveDeepExtend(fields, this.options, options);
   };
 
-  /**
-   * Do a step, add the step size to the current value
-   */
-  StepNumber.prototype.next = function () {
-    this._current += this._step;
-  };
+  Legend.prototype.redraw = function() {
+    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
+      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 = '';
+      }
 
-  /**
-   * Returns true whether the end is reached
-   * @return {boolean}  True if the current value has passed the end value.
-   */
-  StepNumber.prototype.end = function () {
-    return (this._current > this._end);
-  };
+      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 {
+        this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+        this.dom.frame.style.top = '';
+      }
 
-  module.exports = StepNumber;
+      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();
+      }
 
+      var content = '';
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          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';
+    }
+  };
 
-/***/ },
-/* 37 */
-/***/ function(module, exports, __webpack_require__) {
+  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;
 
-  /**
-   * Canvas shapes used by Network
-   */
-  if (typeof CanvasRenderingContext2D !== 'undefined') {
+      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
 
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-      this.beginPath();
-      this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+          y += iconHeight + this.options.iconSpacing;
+        }
+      }
 
-    /**
-     * 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);
-    };
+      DOMutil.cleanupElements(this.svgElements);
+    }
+  };
 
-    /**
-     * 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();
+  module.exports = Legend;
 
-      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();
-    };
+/***/ },
+/* 37 */
+/***/ function(module, exports, __webpack_require__) {
 
-    /**
-     * 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 Emitter = __webpack_require__(12);
+  var Hammer = __webpack_require__(3);
+  var mousetrap = __webpack_require__(38);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var dotparser = __webpack_require__(39);
+  var Groups = __webpack_require__(40);
+  var Images = __webpack_require__(41);
+  var Node = __webpack_require__(42);
+  var Edge = __webpack_require__(43);
+  var Popup = __webpack_require__(44);
+  var MixinLoader = __webpack_require__(45);
 
-      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
+  // Load custom shapes into CanvasRenderingContext2D
+  __webpack_require__(53);
 
-      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();
-    };
+  /**
+   * @constructor Network
+   * Create a network visualization, displaying nodes and edges.
+   *
+   * @param {Element} container   The DOM element in which the Network will
+   *                                  be created. Normally a div element.
+   * @param {Object} data         An object containing parameters
+   *                              {Array} nodes
+   *                              {Array} edges
+   * @param {Object} options      Options
+   */
+  function Network (container, data, options) {
+    if (!(this instanceof Network)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
+    }
 
-    /**
-     * 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._initializeMixinLoaders();
 
-      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)
-        );
-      }
+    // create variables and set default values
+    this.containerElement = container;
+    this.width = '100%';
+    this.height = '100%';
 
-      this.closePath();
-    };
+    // render and calculation settings
+    this.renderRefreshRate = 60;                         // hz (fps)
+    this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
+    this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
+    this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
+    this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
 
-    /**
-     * 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);
-    };
+    this.stabilize = true;  // stabilize before displaying the network
+    this.selectable = true;
+    this.initializing = true;
 
-    /**
-     * 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
+    // these functions are triggered when the dataset is edited
+    this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
 
-      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);
-    };
 
+    // set constant values
+    this.constants = {
+      nodes: {
+        radiusMin: 10,
+        radiusMax: 30,
+        radius: 10,
+        shape: 'ellipse',
+        image: undefined,
+        widthMin: 16, // px
+        widthMax: 64, // px
+        fixed: false,
+        fontColor: 'black',
+        fontSize: 14, // px
+        fontFace: 'verdana',
+        level: -1,
+        color: {
+            border: '#2B7CE9',
+            background: '#97C2FC',
+          highlight: {
+            border: '#2B7CE9',
+            background: '#D2E5FF'
+          },
+          hover: {
+            border: '#2B7CE9',
+            background: '#D2E5FF'
+          }
+        },
+        borderColor: '#2B7CE9',
+        backgroundColor: '#97C2FC',
+        highlightColor: '#D2E5FF',
+        group: undefined
+      },
+      edges: {
+        widthMin: 1,
+        widthMax: 15,
+        width: 1,
+        widthSelectionMultiplier: 2,
+        hoverWidth: 1.5,
+        style: 'line',
+        color: {
+          color:'#848484',
+          highlight:'#848484',
+          hover: '#848484'
+        },
+        fontColor: '#343434',
+        fontSize: 14, // px
+        fontFace: 'arial',
+        fontFill: 'white',
+        arrowScaleFactor: 1,
+        dash: {
+          length: 10,
+          gap: 5,
+          altLength: undefined
+        },
+        inheritColor: "from" // to, from, false, true (== from)
+      },
+      configurePhysics:false,
+      physics: {
+        barnesHut: {
+          enabled: true,
+          theta: 1 / 0.6, // inverted to save time during calculation
+          gravitationalConstant: -2000,
+          centralGravity: 0.3,
+          springLength: 95,
+          springConstant: 0.04,
+          damping: 0.09
+        },
+        repulsion: {
+          centralGravity: 0.1,
+          springLength: 200,
+          springConstant: 0.05,
+          nodeDistance: 100,
+          damping: 0.09
+        },
+        hierarchicalRepulsion: {
+          enabled: false,
+          centralGravity: 0.5,
+          springLength: 150,
+          springConstant: 0.01,
+          nodeDistance: 60,
+          damping: 0.09
+        },
+        damping: null,
+        centralGravity: null,
+        springLength: null,
+        springConstant: null
+      },
+      clustering: {                   // Per Node in Cluster = PNiC
+        enabled: false,               // (Boolean)             | global on/off switch for clustering.
+        initialMaxNodes: 100,         // (# nodes)             | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
+        clusterThreshold:500,         // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
+        reduceToNodes:300,            // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
+        chainThreshold: 0.4,          // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
+        clusterEdgeThreshold: 20,     // (px)                  | edge length threshold. if smaller, this node is clustered.
+        sectorThreshold: 100,         // (# nodes in cluster)  | cluster size threshold. If larger, expanding in own sector.
+        screenSizeThreshold: 0.2,     // (% of canvas)         | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
+        fontSizeMultiplier: 4.0,      // (px PNiC)             | how much the cluster font size grows per node in cluster (in px).
+        maxFontSize: 1000,
+        forceAmplification: 0.1,      // (multiplier PNiC)     | factor of increase fo the repulsion force of a cluster (per node in cluster).
+        distanceAmplification: 0.1,   // (multiplier PNiC)     | factor how much the repulsion distance of a cluster increases (per node in cluster).
+        edgeGrowth: 20,               // (px PNiC)             | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
+        nodeScaling: {width:  1,      // (px PNiC)             | growth of the width  per node in cluster.
+                      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
+      },
+      navigation: {
+        enabled: false
+      },
+      keyboard: {
+        enabled: false,
+        speed: {x: 10, y: 10, zoom: 0.02}
+      },
+      dataManipulation: {
+        enabled: false,
+        initiallyVisible: false
+      },
+      hierarchicalLayout: {
+        enabled:false,
+        levelSeparation: 150,
+        nodeSpacing: 100,
+        direction: "UD"   // UD, DU, LR, RL
+      },
+      freezeForStabilization: false,
+      smoothCurves: {
+        enabled: true,
+        dynamic: true,
+        type: "continuous",
+        roundness: 0.5
+      },
+      dynamicSmoothCurves: true,
+      maxVelocity:  10,
+      minVelocity:  0.1,   // px/s
+      stabilizationIterations: 1000,  // maximum number of iteration to stabilize
+      labels:{
+        add:"Add Node",
+        edit:"Edit",
+        link:"Add Link",
+        del:"Delete selected",
+        editNode:"Edit Node",
+        editEdge:"Edit Edge",
+        back:"Back",
+        addDescription:"Click in an empty space to place a new node.",
+        linkDescription:"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.",
+        addError:"The function for add does not support two arguments (data,callback).",
+        linkError:"The function for connect does not support two arguments (data,callback).",
+        editError:"The function for edit does not support two arguments (data, callback).",
+        editBoundError:"No edit function has been bound to this button.",
+        deleteError:"The function for delete does not support two arguments (data, callback).",
+        deleteClusterError:"Clusters cannot be deleted."
+      },
+      tooltip: {
+        delay: 300,
+        fontColor: 'black',
+        fontSize: 14, // px
+        fontFace: 'verdana',
+        color: {
+          border: '#666',
+          background: '#FFFFC6'
+        }
+      },
+      dragNetwork: true,
+      dragNodes: true,
+      zoomable: true,
+      hover: false,
+      hideEdgesOnDrag: false,
+      hideNodesOnDrag: false
+    };
+    this.hoverObj = {nodes:{},edges:{}};
+    this.controlNodesActive = false;
 
+    // Node variables
+    var network = this;
+    this.groups = new Groups(); // object with groups
+    this.images = new Images(); // object with images
+    this.images.setOnloadCallback(function () {
+      network._redraw();
+    });
 
-    /**
-     * 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;
+    // keyboard navigation variables
+    this.xIncrement = 0;
+    this.yIncrement = 0;
+    this.zoomIncrement = 0;
 
-      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
+    // loading all the mixins:
+    // load the force calculation functions, grouped under the physics system.
+    this._loadPhysicsSystem();
+    // create a frame and canvas
+    this._create();
+    // load the sector system.    (mandatory, fully integrated with Network)
+    this._loadSectorSystem();
+    // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
+    this._loadClusterSystem();
+    // load the selection system. (mandatory, required by Network)
+    this._loadSelectionSystem();
+    // load the selection system. (mandatory, required by Network)
+    this._loadHierarchySystem();
 
-      this.beginPath();
-      this.moveTo(xe, ym);
+    // apply options
+    this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
+    this._setScale(1);
+    this.setOptions(options);
 
-      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+    // other vars
+    this.freezeSimulation = false;// freeze the simulation
+    this.cachedFunctions = {};
 
-      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+    // containers for nodes and edges
+    this.calculationNodes = {};
+    this.calculationNodeIndices = [];
+    this.nodeIndices = [];        // array with all the indices of the nodes. Used to speed up forces calculation
+    this.nodes = {};              // object with Node objects
+    this.edges = {};              // object with Edge objects
 
-      this.lineTo(xe, ymb);
+    // position and scale variables and objects
+    this.canvasTopLeft     = {"x": 0,"y": 0};   // coordinates of the top left of the canvas.     they will be set during _redraw.
+    this.canvasBottomRight = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
+    this.pointerPosition = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
+    this.areaCenter = {};               // object with x and y elements used for determining the center of the zoom action
+    this.scale = 1;                     // defining the global scale variable in the constructor
+    this.previousScale = this.scale;    // this is used to check if the zoom operation is zooming in or out
 
-      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+    // datasets or dataviews
+    this.nodesData = null;      // A DataSet or DataView
+    this.edgesData = null;      // A DataSet or DataView
 
-      this.lineTo(x, ym);
+    // create event listeners used to subscribe on the DataSets of the nodes and edges
+    this.nodesListeners = {
+      'add': function (event, params) {
+        network._addNodes(params.items);
+        network.start();
+      },
+      'update': function (event, params) {
+        network._updateNodes(params.items);
+        network.start();
+      },
+      'remove': function (event, params) {
+        network._removeNodes(params.items);
+        network.start();
+      }
+    };
+    this.edgesListeners = {
+      'add': function (event, params) {
+        network._addEdges(params.items);
+        network.start();
+      },
+      'update': function (event, params) {
+        network._updateEdges(params.items);
+        network.start();
+      },
+      'remove': function (event, params) {
+        network._removeEdges(params.items);
+        network.start();
+      }
     };
 
+    // properties for the animation
+    this.moving = true;
+    this.timer = undefined; // Scheduling function. Is definded in this.start();
 
-    /**
-     * 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);
+    // load data (the disable start variable will be the same as the enabled clustering)
+    this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
 
-      // 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);
+    // hierarchical layout
+    this.initializing = false;
+    if (this.constants.hierarchicalLayout.enabled == true) {
+      this._setupHierarchicalLayout();
+    }
+    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.stabilize == false) {
+        this.zoomExtent(true,this.constants.clustering.enabled);
+      }
+    }
 
-      // 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);
+    // if clustering is disabled, the simulation will have started in the setData function
+    if (this.constants.clustering.enabled) {
+      this.startWithClustering();
+    }
+  }
 
-      // 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);
+  // Extend Network with an Emitter mixin
+  Emitter(Network.prototype);
 
-      this.beginPath();
-      this.moveTo(x, y);
-      this.lineTo(xl, yl);
-      this.lineTo(xi, yi);
-      this.lineTo(xr, yr);
-      this.closePath();
-    };
+  /**
+   * Get the script path where the vis.js library is located
+   *
+   * @returns {string | null} path   Path or null when not found. Path does not
+   *                                 end with a slash.
+   * @private
+   */
+  Network.prototype._getScriptPath = function() {
+    var scripts = document.getElementsByTagName( 'script' );
 
-    /**
-     * 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;
+    // find script named vis.js or vis.min.js
+    for (var i = 0; i < scripts.length; i++) {
+      var src = scripts[i].src;
+      var match = src && /\/?vis(.min)?\.js$/.exec(src);
+      if (match) {
+        // return path without the script name
+        return src.substring(0, src.length - match[0].length);
       }
-    };
-
-    // TODO: add diamond shape
-  }
-
-
-/***/ },
-/* 38 */
-/***/ function(module, exports, __webpack_require__) {
-
-  // 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__(50);
-    // TODO: throw an error when hammerjs is not available?
-  }
-  else {
-    module.exports = function () {
-      throw Error('hammer.js is only available in a browser, not in node.js.');
     }
-  }
-
-
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
-
-  // 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__(51);
-
-
-/***/ },
-/* 40 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var PhysicsMixin = __webpack_require__(49);
-  var ClusterMixin = __webpack_require__(42);
-  var SectorsMixin = __webpack_require__(43);
-  var SelectionMixin = __webpack_require__(44);
-  var ManipulationMixin = __webpack_require__(45);
-  var NavigationMixin = __webpack_require__(46);
-  var HierarchicalLayoutMixin = __webpack_require__(47);
 
-  /**
-   * Load a mixin into the network object
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
-   * @private
-   */
-  exports._loadMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = sourceVariable[mixinFunction];
-      }
-    }
+    return null;
   };
 
 
   /**
-   * removes a mixin from the network object.
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
+   * Find the center position of the network
    * @private
    */
-  exports._clearMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = undefined;
+  Network.prototype._getRange = function() {
+    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.x)) {minX = node.x;}
+        if (maxX < (node.x)) {maxX = node.x;}
+        if (minY > (node.y)) {minY = node.y;}
+        if (maxY < (node.y)) {maxY = node.y;}
       }
     }
-  };
-
-
-  /**
-   * Mixin the physics system and initialize the parameters required.
-   *
-   * @private
-   */
-  exports._loadPhysicsSystem = function () {
-    this._loadMixin(PhysicsMixin);
-    this._loadSelectedForceSolver();
-    if (this.constants.configurePhysics == true) {
-      this._loadPhysicsConfiguration();
+    if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
+      minY = 0, maxY = 0, minX = 0, maxX = 0;
     }
+    return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
   };
 
 
   /**
-   * Mixin the cluster system and initialize the parameters required.
-   *
+   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+   * @returns {{x: number, y: number}}
    * @private
    */
-  exports._loadClusterSystem = function () {
-    this.clusterSession = 0;
-    this.hubThreshold = 5;
-    this._loadMixin(ClusterMixin);
+  Network.prototype._findCenter = function(range) {
+    return {x: (0.5 * (range.maxX + range.minX)),
+            y: (0.5 * (range.maxY + range.minY))};
   };
 
 
   /**
-   * Mixin the sector system and initialize the parameters required
+   * center the network
    *
-   * @private
+   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
    */
-  exports._loadSectorSystem = function () {
-    this.sectors = {};
-    this.activeSector = ["default"];
-    this.sectors["active"] = {};
-    this.sectors["active"]["default"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
-    this.sectors["frozen"] = {};
-    this.sectors["support"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
+  Network.prototype._centerNetwork = function(range) {
+    var center = this._findCenter(range);
 
-    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
+    center.x *= this.scale;
+    center.y *= this.scale;
+    center.x -= 0.5 * this.frame.canvas.clientWidth;
+    center.y -= 0.5 * this.frame.canvas.clientHeight;
 
-    this._loadMixin(SectorsMixin);
+    this._setTranslation(-center.x,-center.y); // set at 0,0
   };
 
 
   /**
-   * Mixin the selection system and initialize the parameters required
+   * This function zooms out to fit all data on screen based on amount of nodes
    *
-   * @private
+   * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
+   * @param {Boolean} [disableStart] | If true, start is not called.
    */
-  exports._loadSelectionSystem = function () {
-    this.selectionObj = {nodes: {}, edges: {}};
-
-    this._loadMixin(SelectionMixin);
-  };
-
+  Network.prototype.zoomExtent = function(initialZoom, disableStart) {
+    if (initialZoom === undefined) {
+      initialZoom = false;
+    }
+    if (disableStart === undefined) {
+      disableStart = false;
+    }
 
-  /**
-   * Mixin the navigationUI (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadManipulationSystem = function () {
-    // reset global variables -- these are used by the selection of nodes and edges.
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+    var range = this._getRange();
+    var zoomLevel;
 
-    if (this.constants.dataManipulation.enabled == true) {
-      // load the manipulator HTML elements. All styling done in css.
-      if (this.manipulationDiv === undefined) {
-        this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'network-manipulationDiv';
-        this.manipulationDiv.id = 'network-manipulationDiv';
-        if (this.editMode == true) {
-          this.manipulationDiv.style.display = "block";
+    if (initialZoom == true) {
+      var numberOfNodes = this.nodeIndices.length;
+      if (this.constants.smoothCurves == true) {
+        if (this.constants.clustering.enabled == true &&
+          numberOfNodes >= this.constants.clustering.initialMaxNodes) {
+          zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
         else {
-          this.manipulationDiv.style.display = "none";
+          zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
-        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
       }
-
-      if (this.editModeDiv === undefined) {
-        this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'network-manipulation-editMode';
-        this.editModeDiv.id = 'network-manipulation-editMode';
-        if (this.editMode == true) {
-          this.editModeDiv.style.display = "none";
+      else {
+        if (this.constants.clustering.enabled == true &&
+            numberOfNodes >= this.constants.clustering.initialMaxNodes) {
+          zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
         else {
-          this.editModeDiv.style.display = "block";
+          zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
-        this.containerElement.insertBefore(this.editModeDiv, this.frame);
-      }
-
-      if (this.closeDiv === undefined) {
-        this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'network-manipulation-closeDiv';
-        this.closeDiv.id = 'network-manipulation-closeDiv';
-        this.closeDiv.style.display = this.manipulationDiv.style.display;
-        this.containerElement.insertBefore(this.closeDiv, this.frame);
       }
 
-      // load the manipulation functions
-      this._loadMixin(ManipulationMixin);
-
-      // create the manipulator toolbar
-      this._createManipulatorBar();
+      // correct for larger canvasses.
+      var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
+      zoomLevel *= factor;
     }
     else {
-      if (this.manipulationDiv !== undefined) {
-        // removes all the bindings and overloads
-        this._createManipulatorBar();
-        // remove the manipulation divs
-        this.containerElement.removeChild(this.manipulationDiv);
-        this.containerElement.removeChild(this.editModeDiv);
-        this.containerElement.removeChild(this.closeDiv);
+      var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
+      var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
 
-        this.manipulationDiv = undefined;
-        this.editModeDiv = undefined;
-        this.closeDiv = undefined;
-        // remove the mixin functions
-        this._clearMixin(ManipulationMixin);
-      }
+      var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
+      var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
+
+      zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
     }
-  };
 
+    if (zoomLevel > 1.0) {
+      zoomLevel = 1.0;
+    }
 
-  /**
-   * Mixin the navigation (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadNavigationControls = function () {
-    this._loadMixin(NavigationMixin);
 
-    // the clean function removes the button divs, this is done to remove the bindings.
-    this._cleanNavigation();
-    if (this.constants.navigation.enabled == true) {
-      this._loadNavigationElements();
+    this._setScale(zoomLevel);
+    this._centerNetwork(range);
+    if (disableStart == false) {
+      this.moving = true;
+      this.start();
     }
   };
 
 
   /**
-   * Mixin the hierarchical layout system.
-   *
+   * Update the this.nodeIndices with the most recent node index list
    * @private
    */
-  exports._loadHierarchySystem = function () {
-    this._loadMixin(HierarchicalLayoutMixin);
+  Network.prototype._updateNodeIndexList = function() {
+    this._clearNodeIndexList();
+    for (var idx in this.nodes) {
+      if (this.nodes.hasOwnProperty(idx)) {
+        this.nodeIndices.push(idx);
+      }
+    }
   };
 
 
-/***/ },
-/* 41 */
-/***/ 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.
+   * Set nodes and edges, and optionally options as well.
    *
-   * @param {Object} obj
-   * @return {Object}
-   * @api private
+   * @param {Object} data              Object containing parameters:
+   *                                   {Array | DataSet | DataView} [nodes] Array with nodes
+   *                                   {Array | DataSet | DataView} [edges] Array with edges
+   *                                   {String} [dot] String containing data in DOT format
+   *                                   {Options} [options] Object with options
+   * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
    */
-
-  function mixin(obj) {
-    for (var key in Emitter.prototype) {
-      obj[key] = Emitter.prototype[key];
+  Network.prototype.setData = function(data, disableStart) {
+    if (disableStart === undefined) {
+      disableStart = false;
     }
-    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);
+    if (data && data.dot && (data.nodes || data.edges)) {
+      throw new SyntaxError('Data must contain either parameter "dot" or ' +
+          ' parameter pair "nodes" and "edges", but not both.');
     }
 
-    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 || {};
+    // set options
+    this.setOptions(data && data.options);
 
-    // all
-    if (0 == arguments.length) {
-      this._callbacks = {};
-      return this;
+    // set all data
+    if (data && data.dot) {
+      // parse DOT file
+      if(data && data.dot) {
+        var dotData = dotparser.DOTToGraph(data.dot);
+        this.setData(dotData);
+        return;
+      }
     }
-
-    // specific event
-    var callbacks = this._callbacks[event];
-    if (!callbacks) return this;
-
-    // remove all handlers
-    if (1 == arguments.length) {
-      delete this._callbacks[event];
-      return this;
+    else {
+      this._setNodes(data && data.nodes);
+      this._setEdges(data && data.edges);
     }
 
-    // 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;
+    this._putDataInSector();
+
+    if (!disableStart) {
+      // find a stable position or start animating to a stable position
+      if (this.stabilize) {
+        var me = this;
+        setTimeout(function() {me._stabilize(); me.start();},0)
+      }
+      else {
+        this.start();
       }
     }
-    return this;
   };
 
   /**
-   * Emit `event` with the given args.
-   *
-   * @param {String} event
-   * @param {Mixed} ...
-   * @return {Emitter}
+   * Set options
+   * @param {Object} options
+   * @param {Boolean} [initializeView] | set zoom and translation to default.
    */
+  Network.prototype.setOptions = function (options) {
+    if (options) {
+      var prop;
+      // retrieve parameter values
+      if (options.width !== undefined)           {this.width = options.width;}
+      if (options.height !== undefined)          {this.height = options.height;}
+      if (options.stabilize !== undefined)       {this.stabilize = options.stabilize;}
+      if (options.selectable !== undefined)      {this.selectable = options.selectable;}
+      if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
+      if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
+      if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
+      if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
+      if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
+      if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
+      if (options.hover !== undefined)           {this.constants.hover = options.hover;}
+      if (options.hideEdgesOnDrag !== undefined) {this.constants.hideEdgesOnDrag = options.hideEdgesOnDrag;}
+      if (options.hideNodesOnDrag !== undefined) {this.constants.hideNodesOnDrag = options.hideNodesOnDrag;}
 
-  Emitter.prototype.emit = function(event){
-    this._callbacks = this._callbacks || {};
-    var args = [].slice.call(arguments, 1)
-      , callbacks = this._callbacks[event];
+      // TODO: deprecated since version 3.0.0. Cleanup some day
+      if (options.dragGraph !== undefined) {
+        throw new Error('Option dragGraph is renamed to dragNetwork');
+      }
 
-    if (callbacks) {
-      callbacks = callbacks.slice(0);
-      for (var i = 0, len = callbacks.length; i < len; ++i) {
-        callbacks[i].apply(this, args);
+      if (options.labels !== undefined)  {
+        for (prop in options.labels) {
+          if (options.labels.hasOwnProperty(prop)) {
+            this.constants.labels[prop] = options.labels[prop];
+          }
+        }
       }
-    }
 
-    return this;
-  };
+      if (options.onAdd) {
+          this.triggerFunctions.add = options.onAdd;
+        }
 
-  /**
-   * Return array of callbacks for `event`.
-   *
-   * @param {String} event
-   * @return {Array}
-   * @api public
-   */
+      if (options.onEdit) {
+        this.triggerFunctions.edit = options.onEdit;
+      }
 
-  Emitter.prototype.listeners = function(event){
-    this._callbacks = this._callbacks || {};
-    return this._callbacks[event] || [];
-  };
+      if (options.onEditEdge) {
+        this.triggerFunctions.editEdge = options.onEditEdge;
+      }
 
-  /**
-   * Check if this emitter has `event` handlers.
-   *
-   * @param {String} event
-   * @return {Boolean}
-   * @api public
-   */
+      if (options.onConnect) {
+        this.triggerFunctions.connect = options.onConnect;
+      }
 
-  Emitter.prototype.hasListeners = function(event){
-    return !! this.listeners(event).length;
-  };
+      if (options.onDelete) {
+        this.triggerFunctions.del = options.onDelete;
+      }
 
+      if (options.physics) {
+        if (options.physics.barnesHut) {
+          this.constants.physics.barnesHut.enabled = true;
+          for (prop in options.physics.barnesHut) {
+            if (options.physics.barnesHut.hasOwnProperty(prop)) {
+              this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
+            }
+          }
+        }
 
-/***/ },
-/* 42 */
-/***/ function(module, exports, __webpack_require__) {
+        if (options.physics.repulsion) {
+          this.constants.physics.barnesHut.enabled = false;
+          for (prop in options.physics.repulsion) {
+            if (options.physics.repulsion.hasOwnProperty(prop)) {
+              this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
+            }
+          }
+        }
 
-  /**
-   * Creation of the ClusterMixin var.
-   *
-   * This contains all the functions the Network object can use to employ clustering
-   */
+        if (options.physics.hierarchicalRepulsion) {
+          this.constants.hierarchicalLayout.enabled = true;
+          this.constants.physics.hierarchicalRepulsion.enabled = true;
+          this.constants.physics.barnesHut.enabled = false;
+          for (prop in options.physics.hierarchicalRepulsion) {
+            if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
+              this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
+            }
+          }
+        }
+      }
 
-  /**
-  * 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);
+      if (options.smoothCurves !== undefined) {
+        if (typeof options.smoothCurves == 'boolean') {
+          this.constants.smoothCurves.enabled = options.smoothCurves;
+        }
+        else {
+          this.constants.smoothCurves.enabled = true;
+          for (prop in options.smoothCurves) {
+            if (options.smoothCurves.hasOwnProperty(prop)) {
+              this.constants.smoothCurves[prop] = options.smoothCurves[prop];
+            }
+          }
+        }
+      }
 
-   // updates the lables after clustering
-   this.updateLabels();
+      if (options.hierarchicalLayout) {
+        this.constants.hierarchicalLayout.enabled = true;
+        for (prop in options.hierarchicalLayout) {
+          if (options.hierarchicalLayout.hasOwnProperty(prop)) {
+            this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
+          }
+        }
+      }
+      else if (options.hierarchicalLayout !== undefined)  {
+        this.constants.hierarchicalLayout.enabled = false;
+      }
 
-   // 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();
-  };
+      if (options.clustering) {
+        this.constants.clustering.enabled = true;
+        for (prop in options.clustering) {
+          if (options.clustering.hasOwnProperty(prop)) {
+            this.constants.clustering[prop] = options.clustering[prop];
+          }
+        }
+      }
+      else if (options.clustering !== undefined)  {
+        this.constants.clustering.enabled = false;
+      }
 
-  /**
-   * 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;
+      if (options.navigation) {
+        this.constants.navigation.enabled = true;
+        for (prop in options.navigation) {
+          if (options.navigation.hasOwnProperty(prop)) {
+            this.constants.navigation[prop] = options.navigation[prop];
+          }
+        }
+      }
+      else if (options.navigation !== undefined) {
+        this.constants.navigation.enabled = false;
+      }
 
-    var maxLevels = 50;
-    var level = 0;
+      if (options.keyboard) {
+        this.constants.keyboard.enabled = true;
+        for (prop in options.keyboard) {
+          if (options.keyboard.hasOwnProperty(prop)) {
+            this.constants.keyboard[prop] = options.keyboard[prop];
+          }
+        }
+      }
+      else if (options.keyboard !== undefined)  {
+        this.constants.keyboard.enabled = false;
+      }
 
-    // we first cluster the hubs, then we pull in the outliers, repeat
-    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-      if (level % 3 == 0) {
-        this.forceAggregateHubs(true);
-        this.normalizeClusterLevels();
+      if (options.dataManipulation) {
+        this.constants.dataManipulation.enabled = true;
+        for (prop in options.dataManipulation) {
+          if (options.dataManipulation.hasOwnProperty(prop)) {
+            this.constants.dataManipulation[prop] = options.dataManipulation[prop];
+          }
+        }
+        this.editMode = this.constants.dataManipulation.initiallyVisible;
       }
-      else {
-        this.increaseClusterLevel(); // this also includes a cluster normalization
+      else if (options.dataManipulation !== undefined)  {
+        this.constants.dataManipulation.enabled = false;
       }
 
-      numberOfNodes = this.nodeIndices.length;
-      level += 1;
-    }
+      // TODO: work out these options and document them
+      if (options.edges) {
+        for (prop in options.edges) {
+          if (options.edges.hasOwnProperty(prop)) {
+            if (typeof options.edges[prop] != "object") {
+              this.constants.edges[prop] = options.edges[prop];
+            }
+          }
+        }
 
-    // after the clustering we reposition the nodes to reduce the initial chaos
-    if (level > 0 && reposition == true) {
-      this.repositionNodes();
-    }
-    this._updateCalculationNodes();
-  };
+        if (options.edges.color !== undefined) {
+          if (util.isString(options.edges.color)) {
+            this.constants.edges.color = {};
+            this.constants.edges.color.color = options.edges.color;
+            this.constants.edges.color.highlight = options.edges.color;
+            this.constants.edges.color.hover = options.edges.color;
+          }
+          else {
+            if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
+            if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
+            if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
+          }
+        }
 
-  /**
-   * 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;
+        if (!options.edges.fontColor) {
+          if (options.edges.color !== undefined) {
+            if (util.isString(options.edges.color))           {this.constants.edges.fontColor = options.edges.color;}
+            else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.color;}
+          }
+        }
 
-      // we decluster until we reach a decent number of nodes
-      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
-        this.decreaseClusterLevel();
-        level += 1;
+        // Added to support dashed lines
+        // David Jordan
+        // 2012-08-08
+        if (options.edges.dash) {
+          if (options.edges.dash.length !== undefined) {
+            this.constants.edges.dash.length = options.edges.dash.length;
+          }
+          if (options.edges.dash.gap !== undefined) {
+            this.constants.edges.dash.gap = options.edges.dash.gap;
+          }
+          if (options.edges.dash.altLength !== undefined) {
+            this.constants.edges.dash.altLength = options.edges.dash.altLength;
+          }
+        }
       }
 
-    }
-    else {
-      this._expandClusterNode(node,false,true);
-
-      // update the index list, dynamic edges and labels
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      this._updateCalculationNodes();
-      this.updateLabels();
-    }
+      if (options.nodes) {
+        for (prop in options.nodes) {
+          if (options.nodes.hasOwnProperty(prop)) {
+            this.constants.nodes[prop] = options.nodes[prop];
+          }
+        }
 
-    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-    if (this.moving != isMovingBeforeClustering) {
-      this.start();
-    }
-  };
+        if (options.nodes.color) {
+          this.constants.nodes.color = util.parseColor(options.nodes.color);
+        }
 
+        /*
+         if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
+         if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
+         */
+      }
+      if (options.groups) {
+        for (var groupname in options.groups) {
+          if (options.groups.hasOwnProperty(groupname)) {
+            var group = options.groups[groupname];
+            this.groups.add(groupname, group);
+          }
+        }
+      }
 
-  /**
-   * This calls the updateClustes with default arguments
-   */
-  exports.updateClustersDefault = function() {
-    if (this.constants.clustering.enabled == true) {
-      this.updateClusters(0,false,false);
+      if (options.tooltip) {
+        for (prop in options.tooltip) {
+          if (options.tooltip.hasOwnProperty(prop)) {
+            this.constants.tooltip[prop] = options.tooltip[prop];
+          }
+        }
+        if (options.tooltip.color) {
+          this.constants.tooltip.color = util.parseColor(options.tooltip.color);
+        }
+      }
     }
-  };
 
 
-  /**
-   * 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);
-  };
+    // (Re)loading the mixins that can be enabled or disabled in the options.
+    // load the force calculation functions, grouped under the physics system.
+    this._loadPhysicsSystem();
+    // load the navigation system.
+    this._loadNavigationControls();
+    // load the data manipulation system
+    this._loadManipulationSystem();
+    // configure the smooth curves
+    this._configureSmoothCurves();
 
 
-  /**
-   * 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);
-  };
+    // bind keys. If disabled, this will not do anything;
+    this._createKeyBinds();
+    this.setSize(this.width, this.height);
+    this.moving = true;
+    this.start();
 
+  };
 
   /**
-   * 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
-   *
+   * Create the main frame for the Network.
+   * This function is executed once when a Network object is created. The frame
+   * contains a canvas, and this canvas contains all objects like the axis and
+   * nodes.
+   * @private
    */
-  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();
+  Network.prototype._create = function () {
+    // remove all elements from the container element.
+    while (this.containerElement.hasChildNodes()) {
+      this.containerElement.removeChild(this.containerElement.firstChild);
     }
 
-    // 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();
-      }
-    }
-    this._updateNodeIndexList();
+    this.frame = document.createElement('div');
+    this.frame.className = 'network-frame';
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
-    // 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();
+    // create the network canvas (HTML canvas element)
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
+    this.frame.appendChild(this.frame.canvas);
+    if (!this.frame.canvas.getContext) {
+      var noCanvas = document.createElement( 'DIV' );
+      noCanvas.style.color = 'red';
+      noCanvas.style.fontWeight =  'bold' ;
+      noCanvas.style.padding =  '10px';
+      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
+      this.frame.canvas.appendChild(noCanvas);
     }
 
-    // we now reduce chains.
-    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
-      this.handleChains();
-      this._updateNodeIndexList();
-    }
+    var me = this;
+    this.drag = {};
+    this.pinch = {};
+    this.hammer = Hammer(this.frame.canvas, {
+      prevent_default: true
+    });
+    this.hammer.on('tap',       me._onTap.bind(me) );
+    this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
+    this.hammer.on('hold',      me._onHold.bind(me) );
+    this.hammer.on('pinch',     me._onPinch.bind(me) );
+    this.hammer.on('touch',     me._onTouch.bind(me) );
+    this.hammer.on('dragstart', me._onDragStart.bind(me) );
+    this.hammer.on('drag',      me._onDrag.bind(me) );
+    this.hammer.on('dragend',   me._onDragEnd.bind(me) );
+    this.hammer.on('release',   me._onRelease.bind(me) );
+    this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
+    this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
+    this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
 
-    this.previousScale = this.scale;
+    // add the frame to the container element
+    this.containerElement.appendChild(this.frame);
 
-    // rest of the update the index list, dynamic edges and labels
-    this._updateDynamicEdges();
-    this.updateLabels();
+  };
 
-    // 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();
+
+  /**
+   * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
+   * @private
+   */
+  Network.prototype._createKeyBinds = function() {
+    var me = this;
+    this.mousetrap = mousetrap;
+
+    this.mousetrap.reset();
+
+    if (this.constants.keyboard.enabled == true) {
+      this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
+      this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
+      this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
+      this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
+      this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("=",    this._zoomIn.bind(me),    "keydown");
+      this.mousetrap.bind("=",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("-",    this._zoomOut.bind(me),   "keydown");
+      this.mousetrap.bind("-",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("[",    this._zoomIn.bind(me),    "keydown");
+      this.mousetrap.bind("[",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("]",    this._zoomOut.bind(me),   "keydown");
+      this.mousetrap.bind("]",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("pageup",this._zoomIn.bind(me),   "keydown");
+      this.mousetrap.bind("pageup",this._stopZoom.bind(me),   "keyup");
+      this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
+      this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
     }
 
-    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();
-      }
+    if (this.constants.dataManipulation.enabled == true) {
+      this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
+      this.mousetrap.bind("del",this._deleteSelected.bind(me));
     }
+  };
 
-    this._updateCalculationNodes();
+  /**
+   * Get the pointer location from a touch location
+   * @param {{pageX: Number, pageY: Number}} touch
+   * @return {{x: Number, y: Number}} pointer
+   * @private
+   */
+  Network.prototype._getPointer = function (touch) {
+    return {
+      x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
+      y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
+    };
   };
 
   /**
-   * This function handles the chains. It is called on every updateClusters().
+   * On start of a touch gesture, store the pointer
+   * @param event
+   * @private
    */
-  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)
+  Network.prototype._onTouch = function (event) {
+    this.drag.pointer = this._getPointer(event.gesture.center);
+    this.drag.pinched = false;
+    this.pinch.scale = this._getScale();
 
-    }
+    this._handleTouch(this.drag.pointer);
   };
 
   /**
-   * this functions starts clustering by hubs
-   * The minimum hub threshold is set globally
-   *
+   * handle drag start event
    * @private
    */
-  exports._aggregateHubs = function(force) {
-    this._getHubSize();
-    this._formClustersByHub(force,false);
+  Network.prototype._onDragStart = function () {
+    this._handleDragStart();
   };
 
 
   /**
-   * This function is fired by keypress. It forces hubs to form.
+   * This function is called by _onDragStart.
+   * It is separated out because we can then overload it for the datamanipulation system.
    *
+   * @private
    */
-  exports.forceAggregateHubs = function(doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
+  Network.prototype._handleDragStart = function() {
+    var drag = this.drag;
+    var node = this._getNodeAt(drag.pointer);
+    // note: drag.pointer is set in _onTouch to get the initial touch location
 
-    this._aggregateHubs(true);
+    drag.dragging = true;
+    drag.selection = [];
+    drag.translation = this._getTranslation();
+    drag.nodeId = null;
 
-    // update the index list, dynamic edges and labels
-    this._updateNodeIndexList();
-    this._updateDynamicEdges();
-    this.updateLabels();
+    if (node != null) {
+      drag.nodeId = node.id;
+      // select the clicked node if not yet selected
+      if (!node.isSelected()) {
+        this._selectObject(node,false);
+      }
 
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length != amountOfNodes) {
-      this.clusterSession += 1;
-    }
+      // create an array with the selected nodes and their original location and status
+      for (var objectId in this.selectionObj.nodes) {
+        if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
+          var object = this.selectionObj.nodes[objectId];
+          var s = {
+            id: object.id,
+            node: object,
 
-    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();
+            // store original x, y, xFixed and yFixed, make the node temporarily Fixed
+            x: object.x,
+            y: object.y,
+            xFixed: object.xFixed,
+            yFixed: object.yFixed
+          };
+
+          object.xFixed = true;
+          object.yFixed = true;
+
+          drag.selection.push(s);
+        }
       }
     }
   };
 
+
   /**
-   * If a cluster takes up more than a set percentage of the screen, open the cluster
-   *
+   * handle drag event
    * @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);
-          }
-        }
-      }
-    }
+  Network.prototype._onDrag = function (event) {
+    this._handleOnDrag(event)
   };
 
 
   /**
-   * 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.
+   * This function is called by _onDrag.
+   * It is separated out because we can then overload it for the datamanipulation system.
    *
    * @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();
+  Network.prototype._handleOnDrag = function(event) {
+    if (this.drag.pinched) {
+      return;
     }
-  };
 
-  /**
-   * 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;
-      }
-      recursive = openAll ? true : recursive;
+    var pointer = this._getPointer(event.gesture.center);
 
-      // 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];
+    var me = this,
+      drag = this.drag,
+      selection = drag.selection;
+    if (selection && selection.length && this.constants.dragNodes == true) {
+      // calculate delta's and new location
+      var deltaX = pointer.x - drag.pointer.x,
+        deltaY = pointer.y - drag.pointer.y;
 
-            // 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);
-              }
-            }
-          }
+      // update position of all selected nodes
+      selection.forEach(function (s) {
+        var node = s.node;
+
+        if (!s.xFixed) {
+          node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
+        }
+
+        if (!s.yFixed) {
+          node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
         }
+      });
+
+      // start _animationStep if not yet running
+      if (!this.moving) {
+        this.moving = true;
+        this.start();
+      }
+    }
+    else {
+      if (this.constants.dragNetwork == true) {
+        // move the network
+        var diffX = pointer.x - this.drag.pointer.x;
+        var diffY = pointer.y - this.drag.pointer.y;
+
+        this._setTranslation(
+          this.drag.translation.x + diffX,
+          this.drag.translation.y + diffY
+        );
+        this._redraw();
+  //      this.moving = true;
+  //      this.start();
       }
     }
   };
 
   /**
-   * 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
+   * handle drag start event
    * @private
    */
-  exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
-    var childNode = parentNode.containedNodes[containedNodeId];
+  Network.prototype._onDragEnd = function () {
+    this.drag.dragging = false;
+    var selection = this.drag.selection;
+    if (selection) {
+      selection.forEach(function (s) {
+        // restore original xFixed and yFixed
+        s.node.xFixed = s.xFixed;
+        s.node.yFixed = s.yFixed;
+      });
+    }
+    this._redraw();
+  };
 
-    // 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();
+  /**
+   * handle tap/click event: select/unselect a node
+   * @private
+   */
+  Network.prototype._onTap = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this.pointerPosition = pointer;
+    this._handleTap(pointer);
 
-      // put the child node back in the global nodes object
-      this.nodes[containedNodeId] = childNode;
+  };
 
-      // release the contained edges from this childNode back into the global edges
-      this._releaseContainedEdges(parentNode,childNode);
 
-      // reconnect rerouted edges to the childNode
-      this._connectEdgeBackToChild(parentNode,childNode);
+  /**
+   * handle doubletap event
+   * @private
+   */
+  Network.prototype._onDoubleTap = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this._handleDoubleTap(pointer);
+  };
 
-      // validate all edges in dynamicEdges
-      this._validateEdges(parentNode);
 
-      // undo the changes from the clustering operation on the parent node
-      parentNode.mass -= childNode.mass;
-      parentNode.clusterSize -= childNode.clusterSize;
-      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
+  /**
+   * handle long tap event: multi select nodes
+   * @private
+   */
+  Network.prototype._onHold = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this.pointerPosition = pointer;
+    this._handleOnHold(pointer);
+  };
 
-      // 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());
+  /**
+   * handle the release of the screen
+   *
+   * @private
+   */
+  Network.prototype._onRelease = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this._handleOnRelease(pointer);
+  };
 
-      // remove node from the list
-      delete parentNode.containedNodes[containedNodeId];
+  /**
+   * Handle pinch event
+   * @param event
+   * @private
+   */
+  Network.prototype._onPinch = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
 
-      // 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;
-          }
-        }
+    this.drag.pinched = true;
+    if (!('scale' in this.pinch)) {
+      this.pinch.scale = 1;
+    }
+
+    // TODO: enabled moving while pinching?
+    var scale = this.pinch.scale * event.gesture.scale;
+    this._zoom(scale, pointer)
+  };
+
+  /**
+   * Zoom the network in or out
+   * @param {Number} scale a number around 1, and between 0.01 and 10
+   * @param {{x: Number, y: Number}} pointer    Position on screen
+   * @return {Number} appliedScale    scale is limited within the boundaries
+   * @private
+   */
+  Network.prototype._zoom = function(scale, pointer) {
+    if (this.constants.zoomable == true) {
+      var scaleOld = this._getScale();
+      if (scale < 0.00001) {
+        scale = 0.00001;
       }
-      // if there are no others, remove the cluster session from the list
-      if (othersPresent == false) {
-        parentNode.clusterSessions.pop();
+      if (scale > 10) {
+        scale = 10;
       }
+    // + this.frame.canvas.clientHeight / 2
+      var translation = this._getTranslation();
 
-      this._repositionBezierNodes(childNode);
-  //      this._repositionBezierNodes(parentNode);
+      var scaleFrac = scale / scaleOld;
+      var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
+      var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
 
-      // remove the clusterSession from the child node
-      childNode.clusterSession = 0;
+      this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
+                         "y" : this._YconvertDOMtoCanvas(pointer.y)};
 
-      // recalculate the size of the node on the next time the node is rendered
-      parentNode.clearSizeCache();
+      this._setScale(scale);
+      this._setTranslation(tx, ty);
+      this.updateClustersDefault();
+      this._redraw();
 
-      // restart the simulation to reorganise all nodes
-      this.moving = true;
-    }
+      if (scaleOld < scale) {
+        this.emit("zoom", {direction:"+"});
+      }
+      else {
+        this.emit("zoom", {direction:"-"});
+      }
 
-    // check if a further expansion step is possible if recursivity is enabled
-    if (recursive == true) {
-      this._expandClusterNode(childNode,recursive,force,openAll);
+      return scale;
     }
   };
 
 
   /**
-   * position the bezier nodes at the center of the edges
-   *
-   * @param node
+   * Event handler for mouse wheel event, used to zoom the timeline
+   * See http://adomas.org/javascript-mouse-wheel/
+   *     https://github.com/EightMedia/hammer.js/issues/256
+   * @param {MouseEvent}  event
    * @private
    */
-  exports._repositionBezierNodes = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      node.dynamicEdges[i].positionBezierNode();
+  Network.prototype._onMouseWheel = function(event) {
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail/3;
     }
-  };
 
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
 
-  /**
-   * 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();
+      // calculate the new scale
+      var scale = this._getScale();
+      var zoom = delta / 10;
+      if (delta < 0) {
+        zoom = zoom / (1 - zoom);
+      }
+      scale *= (1 + zoom);
+
+      // calculate the pointer location
+      var gesture = util.fakeGesture(this, event);
+      var pointer = this._getPointer(gesture.center);
+
+      // apply the new scale
+      this._zoom(scale, pointer);
     }
+
+    // Prevent default actions caused by mouse wheel.
+    event.preventDefault();
   };
 
 
   /**
-   * This function handles the clustering by zooming out, this is based on a minimum edge distance
-   *
+   * Mouse move handler for checking whether the title moves over a node with a title.
+   * @param  {Event} event
    * @private
    */
-  exports._formClustersByZoom = function() {
-    var dx,dy,length,
-        minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+  Network.prototype._onMouseMoveTitle = function (event) {
+    var gesture = util.fakeGesture(this, event);
+    var pointer = this._getPointer(gesture.center);
 
-    // 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);
+    // check if the previously selected node is still selected
+    if (this.popupObj) {
+      this._checkHidePopup(pointer);
+    }
 
+    // start a timeout that will check if the mouse is positioned above
+    // an element
+    var me = this;
+    var checkShow = function() {
+      me._checkShowPopup(pointer);
+    };
+    if (this.popupTimer) {
+      clearInterval(this.popupTimer); // stop any running calculationTimer
+    }
+    if (!this.drag.dragging) {
+      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
+    }
 
-            if (length < minLength) {
-              // first check which node is larger
-              var parentNode = edge.from;
-              var childNode = edge.to;
-              if (edge.to.mass > edge.from.mass) {
-                parentNode = edge.to;
-                childNode = edge.from;
-              }
 
-              if (childNode.dynamicEdgesLength == 1) {
-                this._addToCluster(parentNode,childNode,false);
-              }
-              else if (parentNode.dynamicEdgesLength == 1) {
-                this._addToCluster(childNode,parentNode,false);
-              }
-            }
+    /**
+     * Adding hover highlights
+     */
+    if (this.constants.hover == true) {
+      // removing all hover highlights
+      for (var edgeId in this.hoverObj.edges) {
+        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
+          this.hoverObj.edges[edgeId].hover = false;
+          delete this.hoverObj.edges[edgeId];
+        }
+      }
+
+      // adding hover highlights
+      var obj = this._getNodeAt(pointer);
+      if (obj == null) {
+        obj = this._getEdgeAt(pointer);
+      }
+      if (obj != null) {
+        this._hoverObject(obj);
+      }
+
+      // removing all node hover highlights except for the selected one.
+      for (var nodeId in this.hoverObj.nodes) {
+        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+            this._blurObject(this.hoverObj.nodes[nodeId]);
+            delete this.hoverObj.nodes[nodeId];
           }
         }
       }
+      this.redraw();
     }
   };
 
   /**
-   * This function forces the network to cluster all nodes with only one connecting edge to their
-   * connected node.
+   * Check if there is an element on the given position in the network
+   * (a node or edge). If so, and if this element has a title,
+   * show a popup window with its title.
    *
+   * @param {{x:Number, y:Number}} pointer
    * @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];
+  Network.prototype._checkShowPopup = function (pointer) {
+    var obj = {
+      left:   this._XconvertDOMtoCanvas(pointer.x),
+      top:    this._YconvertDOMtoCanvas(pointer.y),
+      right:  this._XconvertDOMtoCanvas(pointer.x),
+      bottom: this._YconvertDOMtoCanvas(pointer.y)
+    };
 
-        // the edges can be swallowed by another decrease
-        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];
+    var id;
+    var lastPopupNode = this.popupObj;
 
-          // group to the largest node
-          if (childNode.id != parentNode.id) {
-            if (parentNode.mass > childNode.mass) {
-              this._addToCluster(parentNode,childNode,true);
-            }
-            else {
-              this._addToCluster(childNode,parentNode,true);
-            }
+    if (this.popupObj == undefined) {
+      // search the nodes for overlap, select the top one in case of multiple nodes
+      var nodes = this.nodes;
+      for (id in nodes) {
+        if (nodes.hasOwnProperty(id)) {
+          var node = nodes[id];
+          if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
+            this.popupObj = node;
+            break;
           }
         }
       }
     }
-  };
 
-
-  /**
-   * 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 (this.popupObj === undefined) {
+      // search the edges for overlap
+      var edges = this.edges;
+      for (id in edges) {
+        if (edges.hasOwnProperty(id)) {
+          var edge = edges[id];
+          if (edge.connected && (edge.getTitle() !== undefined) &&
+              edge.isOverlappingWith(obj)) {
+            this.popupObj = edge;
+            break;
+          }
         }
+      }
+    }
 
-
-        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
-          smallestNeighbour = neighbour.clusterSessions.length;
-          smallestNeighbourNode = neighbour;
+    if (this.popupObj) {
+      // show popup message window
+      if (this.popupObj != lastPopupNode) {
+        var me = this;
+        if (!me.popup) {
+          me.popup = new Popup(me.frame, me.constants.tooltip);
         }
+
+        // adjust a small offset such that the mouse cursor is located in the
+        // bottom left location of the popup, and you can easily move over the
+        // popup area
+        me.popup.setPosition(pointer.x - 3, pointer.y - 3);
+        me.popup.setText(me.popupObj.getTitle());
+        me.popup.show();
       }
     }
-
-    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
-      this._addToCluster(neighbour, node, true);
+    else {
+      if (this.popup) {
+        this.popup.hide();
+      }
     }
   };
 
 
   /**
-   * 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
+   * Check if the popup must be hided, which is the case when the mouse is no
+   * longer hovering on the object
+   * @param {{x:Number, y:Number}} pointer
    * @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);
+  Network.prototype._checkHidePopup = function (pointer) {
+    if (!this.popupObj || !this._getNodeAt(pointer) ) {
+      this.popupObj = undefined;
+      if (this.popup) {
+        this.popup.hide();
       }
     }
   };
 
+
   /**
-   * 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
+   * Set a new size for the network
+   * @param {string} width   Width in pixels or percentage (for example '800px'
+   *                         or '50%')
+   * @param {string} height  Height in pixels or percentage  (for example '400px'
+   *                         or '30%')
    */
-  exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
-    if (absorptionSizeOffset === undefined) {
-      absorptionSizeOffset = 0;
-    }
-    // we decide if the node is a hub
-    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
-      // initialize variables
-      var dx,dy,length;
-      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-      var allowCluster = false;
-
-      // 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);
-      }
+  Network.prototype.setSize = function(width, height) {
+    this.frame.style.width = width;
+    this.frame.style.height = height;
 
-      // if the hub clustering is not forces, 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);
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
-                if (length < minLength) {
-                  allowCluster = true;
-                  break;
-                }
-              }
-            }
-          }
-        }
-      }
+    this.frame.canvas.width = this.frame.canvas.clientWidth;
+    this.frame.canvas.height = this.frame.canvas.clientHeight;
 
-      // start the clustering if allowed
-      if ((!force && allowCluster) || force) {
-        // we loop over all edges INITIALLY connected to this hub
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          edge = this.edges[edgesIdarray[j]];
-          // the edge can be clustered by this function in a previous loop
-          if (edge !== undefined) {
-            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
-            // 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 (this.manipulationDiv !== undefined) {
+      this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
+    }
+    if (this.navigationDivs !== undefined) {
+      if (this.navigationDivs['wrapper'] !== undefined) {
+        this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+        this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
       }
     }
-  };
-
 
+    this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
+  };
 
   /**
-   * 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
+   * Set a data set with nodes for the network
+   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
    * @private
    */
-  exports._addToCluster = function(parentNode, childNode, force) {
-    // join child node in the parent node
-    parentNode.containedNodes[childNode.id] = childNode;
+  Network.prototype._setNodes = function(nodes) {
+    var oldNodesData = this.nodesData;
 
-    // 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
-        this._addToContainedEdges(parentNode,childNode,edge);
-      }
-      else {
-        this._connectEdgeToCluster(parentNode,childNode,edge);
-      }
+    if (nodes instanceof DataSet || nodes instanceof DataView) {
+      this.nodesData = nodes;
     }
-    // a contained node has no dynamic edges.
-    childNode.dynamicEdges = [];
-
-    // remove circular edges from clusters
-    this._containCircularEdgesFromNode(parentNode,childNode);
-
-
-    // remove the childNode from the global nodes object
-    delete this.nodes[childNode.id];
-
-    // update the properties of the child and parent
-    var massBefore = parentNode.mass;
-    childNode.clusterSession = this.clusterSession;
-    parentNode.mass += childNode.mass;
-    parentNode.clusterSize += childNode.clusterSize;
-    parentNode.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);
+    else if (nodes instanceof Array) {
+      this.nodesData = new DataSet();
+      this.nodesData.add(nodes);
     }
-
-    // forced clusters only open from screen size and double tap
-    if (force == true) {
-      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
-      parentNode.formationScale = 0;
+    else if (!nodes) {
+      this.nodesData = new DataSet();
     }
     else {
-      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+      throw new TypeError('Array or DataSet expected');
     }
 
-    // recalculate the size of the node on the next time the node is rendered
-    parentNode.clearSizeCache();
-
-    // set the pop-out scale for the childnode
-    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+    if (oldNodesData) {
+      // unsubscribe from old dataset
+      util.forEach(this.nodesListeners, function (callback, event) {
+        oldNodesData.off(event, callback);
+      });
+    }
 
-    // nullify the movement velocity of the child, this is to avoid hectic behaviour
-    childNode.clearVelocity();
+    // remove drawn nodes
+    this.nodes = {};
 
-    // the mass has altered, preservation of energy dictates the velocity to be updated
-    parentNode.updateVelocity(massBefore);
+    if (this.nodesData) {
+      // subscribe to new dataset
+      var me = this;
+      util.forEach(this.nodesListeners, function (callback, event) {
+        me.nodesData.on(event, callback);
+      });
 
-    // restart the simulation to reorganise all nodes
-    this.moving = true;
+      // draw all new nodes
+      var ids = this.nodesData.getIds();
+      this._addNodes(ids);
+    }
+    this._updateSelection();
   };
 
-
   /**
-   * 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().
+   * Add nodes
+   * @param {Number[] | String[]} ids
    * @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;
+  Network.prototype._addNodes = function(ids) {
+    var id;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      id = ids[i];
+      var data = this.nodesData.get(id);
+      var node = new Node(data, this.images, this.groups, this.constants);
+      this.nodes[id] = node; // note: this may replace an existing node
 
-      // 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.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
+        var radius = 10 * 0.1*ids.length;
+        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);}
       }
-      node.dynamicEdgesLength -= correction;
+      this.moving = true;
+    }
+    this._updateNodeIndexList();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateCalculationNodes();
+    this._reconnectEdges();
+    this._updateValueRange(this.nodes);
+    this.updateLabels();
   };
 
-
   /**
-   * 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
+   * Update existing nodes, or create them when not yet existing
+   * @param {Number[] | String[]} ids
    * @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] = []
+  Network.prototype._updateNodes = function(ids) {
+    var nodes = this.nodes,
+        nodesData = this.nodesData;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      var node = nodes[id];
+      var data = nodesData.get(id);
+      if (node) {
+        // update node
+        node.setProperties(data, this.constants);
+      }
+      else {
+        // create node
+        node = new Node(properties, this.images, this.groups, this.constants);
+        nodes[id] = node;
+      }
     }
-    // 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];
+    this.moving = true;
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
+    }
+    this._updateNodeIndexList();
+    this._reconnectEdges();
+    this._updateValueRange(nodes);
+  };
 
-    // 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;
-      }
+  /**
+   * Remove existing nodes. If nodes do not exist, the method will just ignore it.
+   * @param {Number[] | String[]} ids
+   * @private
+   */
+  Network.prototype._removeNodes = function(ids) {
+    var nodes = this.nodes;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      delete nodes[id];
+    }
+    this._updateNodeIndexList();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateCalculationNodes();
+    this._reconnectEdges();
+    this._updateSelection();
+    this._updateValueRange(nodes);
   };
 
   /**
-   * 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
+   * Load edges by reading the data table
+   * @param {Array | DataSet | DataView} edges    The data containing the edges.
+   * @private
    * @private
    */
-  exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
-    // handle circular edges
-    if (edge.toId == edge.fromId) {
-      this._addToContainedEdges(parentNode, childNode, edge);
+  Network.prototype._setEdges = function(edges) {
+    var oldEdgesData = this.edgesData;
+
+    if (edges instanceof DataSet || edges instanceof DataView) {
+      this.edgesData = edges;
+    }
+    else if (edges instanceof Array) {
+      this.edgesData = new DataSet();
+      this.edgesData.add(edges);
+    }
+    else if (!edges) {
+      this.edgesData = new DataSet();
     }
     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
+      throw new TypeError('Array or DataSet expected');
+    }
 
-        edge.originalFromId.push(childNode.id);
-        edge.from = parentNode;
-        edge.fromId = parentNode.id;
-      }
+    if (oldEdgesData) {
+      // unsubscribe from old dataset
+      util.forEach(this.edgesListeners, function (callback, event) {
+        oldEdgesData.off(event, callback);
+      });
+    }
 
-      this._addToReroutedEdges(parentNode,childNode,edge);
+    // remove drawn edges
+    this.edges = {};
+
+    if (this.edgesData) {
+      // subscribe to new dataset
+      var me = this;
+      util.forEach(this.edgesListeners, function (callback, event) {
+        me.edgesData.on(event, callback);
+      });
+
+      // draw all new nodes
+      var ids = this.edgesData.getIds();
+      this._addEdges(ids);
     }
-  };
 
+    this._reconnectEdges();
+  };
 
   /**
-   * 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
+   * Add edges
+   * @param {Number[] | String[]} ids
    * @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);
+  Network.prototype._addEdges = function (ids) {
+    var edges = this.edges,
+        edgesData = this.edgesData;
+
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+
+      var oldEdge = edges[id];
+      if (oldEdge) {
+        oldEdge.disconnect();
       }
+
+      var data = edgesData.get(id, {"showInternalIds" : true});
+      edges[id] = new Edge(data, this, this.constants);
     }
-  };
 
+    this.moving = true;
+    this._updateValueRange(edges);
+    this._createBezierNodes();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
+    }
+    this._updateCalculationNodes();
+  };
 
   /**
-   * 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
+   * Update existing edges, or create them when not yet existing
+   * @param {Number[] | String[]} ids
    * @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);
-   };
+  Network.prototype._updateEdges = function (ids) {
+    var edges = this.edges,
+        edgesData = this.edgesData;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
 
+      var data = edgesData.get(id);
+      var edge = edges[id];
+      if (edge) {
+        // update edge
+        edge.disconnect();
+        edge.setProperties(data, this.constants);
+        edge.connect();
+      }
+      else {
+        // create edge
+        edge = new Edge(data, this, this.constants);
+        this.edges[id] = edge;
+      }
+    }
 
+    this._createBezierNodes();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
+    }
+    this.moving = true;
+    this._updateValueRange(edges);
+  };
 
   /**
-   * 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
+   * Remove existing edges. Non existing ids will be ignored
+   * @param {Number[] | String[]} ids
    * @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;
-        }
-
-        // append this edge to the list of edges connecting to the childnode
-        childNode.dynamicEdges.push(edge);
-
-        // 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;
-          }
+  Network.prototype._removeEdges = function (ids) {
+    var edges = this.edges;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      var edge = edges[id];
+      if (edge) {
+        if (edge.via != null) {
+          delete this.sectors['support']['nodes'][edge.via.id];
         }
+        edge.disconnect();
+        delete edges[id];
       }
-      // remove the entry from the rerouted edges
-      delete parentNode.reroutedEdges[childNode.id];
     }
-  };
 
+    this.moving = true;
+    this._updateValueRange(edges);
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
+    }
+    this._updateCalculationNodes();
+  };
 
   /**
-   * 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
+   * Reconnect all edges
    * @private
    */
-  exports._validateEdges = function(parentNode) {
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
-        parentNode.dynamicEdges.splice(i,1);
+  Network.prototype._reconnectEdges = function() {
+    var id,
+        nodes = this.nodes,
+        edges = this.edges;
+    for (id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        nodes[id].edges = [];
       }
     }
-  };
 
+    for (id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        var edge = edges[id];
+        edge.from = null;
+        edge.to = null;
+        edge.connect();
+      }
+    }
+  };
 
   /**
-   * 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     |
+   * Update the values of all object in the given array according to the current
+   * value range of the objects in the array.
+   * @param {Object} obj    An object containing a set of Edges or Nodes
+   *                        The objects must have a method getValue() and
+   *                        setValueRange(min, max).
    * @private
    */
-  exports._releaseContainedEdges = function(parentNode, childNode) {
-    for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
-      var edge = parentNode.containedEdges[childNode.id][i];
-
-      // put the edge back in the global edges object
-      this.edges[edge.id] = edge;
+  Network.prototype._updateValueRange = function(obj) {
+    var id;
 
-      // 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];
-
-  };
-
-
-
-
-  // ------------------- UTILITY FUNCTIONS ---------------------------- //
-
-
-  /**
-   * 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),"]");
+    // determine the range of the objects
+    var valueMin = undefined;
+    var valueMax = undefined;
+    for (id in obj) {
+      if (obj.hasOwnProperty(id)) {
+        var value = obj[id].getValue();
+        if (value !== undefined) {
+          valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
+          valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
         }
       }
     }
 
-    // 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);
-          }
+    // adjust the range of all objects
+    if (valueMin !== undefined && valueMax !== undefined) {
+      for (id in obj) {
+        if (obj.hasOwnProperty(id)) {
+          obj[id].setValueRange(valueMin, valueMax);
         }
       }
     }
-
-  //    /* 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.
+   * Redraw the network with the current data
+   * chart will be resized too.
    */
-  exports.normalizeClusterLevels = function() {
-    var maxLevel = 0;
-    var minLevel = 1e9;
-    var clusterLevel = 0;
-    var nodeId;
-
-    // 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]);
-          }
-        }
-      }
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      // if a cluster was formed, we increase the clusterSession
-      if (this.nodeIndices.length != amountOfNodes) {
-        this.clusterSession += 1;
-      }
-    }
+  Network.prototype.redraw = function() {
+    this.setSize(this.width, this.height);
+    this._redraw();
   };
 
-
-
   /**
-   * 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}
+   * Redraw the network with the current data
    * @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
-      )
-  };
-
-
-  /**
-   * 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.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);
-      }
-    }
-  };
+  Network.prototype._redraw = function() {
+    var ctx = this.frame.canvas.getContext('2d');
+    // clear the canvas
+    var w = this.frame.canvas.width;
+    var h = this.frame.canvas.height;
+    ctx.clearRect(0, 0, w, h);
 
+    // set scaling and translation
+    ctx.save();
+    ctx.translate(this.translation.x, this.translation.y);
+    ctx.scale(this.scale, this.scale);
 
-  /**
-   * 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;
+    this.canvasTopLeft = {
+      "x": this._XconvertDOMtoCanvas(0),
+      "y": this._YconvertDOMtoCanvas(0)
+    };
+    this.canvasBottomRight = {
+      "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
+      "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
+    };
 
-    for (var i = 0; i < this.nodeIndices.length; i++) {
 
-      var node = this.nodes[this.nodeIndices[i]];
-      if (node.dynamicEdgesLength > largestHub) {
-        largestHub = node.dynamicEdgesLength;
-      }
-      average += node.dynamicEdgesLength;
-      averageSquared += Math.pow(node.dynamicEdgesLength,2);
-      hubCounter += 1;
+    this._doInAllSectors("_drawAllSectorNodes",ctx);
+    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
+      this._doInAllSectors("_drawEdges",ctx);
     }
-    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);
+    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
+      this._doInAllSectors("_drawNodes",ctx,false);
+    }
 
-    // always have at least one to cluster
-    if (this.hubThreshold > largestHub) {
-      this.hubThreshold = largestHub;
+    if (this.controlNodesActive == true) {
+      this._doInAllSectors("_drawControlNodes",ctx);
     }
 
-  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
-  //  console.log("hubThreshold:",this.hubThreshold);
-  };
+  //  this._doInSupportSector("_drawNodes",ctx,true);
+  //  this._drawTree(ctx,"#F00F0F");
 
+    // restore original scaling and translation
+    ctx.restore();
+  };
 
   /**
-   * 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
+   * Set the translation of the network
+   * @param {Number} offsetX    Horizontal offset
+   * @param {Number} offsetY    Vertical offset
    * @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;
-          }
-        }
-      }
+  Network.prototype._setTranslation = function(offsetX, offsetY) {
+    if (this.translation === undefined) {
+      this.translation = {
+        x: 0,
+        y: 0
+      };
+    }
+
+    if (offsetX !== undefined) {
+      this.translation.x = offsetX;
+    }
+    if (offsetY !== undefined) {
+      this.translation.y = offsetY;
     }
+
+    this.emit('viewChanged');
   };
 
   /**
-   * 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.
-   *
+   * Get the translation of the network
+   * @return {Object} translation    An object with parameters x and y, both a number
    * @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 chains/total;
+  Network.prototype._getTranslation = function() {
+    return {
+      x: this.translation.x,
+      y: this.translation.y
+    };
   };
 
-
-/***/ },
-/* 43 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-
   /**
-   * 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.
+   * Scale the network
+   * @param {Number} scale   Scaling factor 1.0 is unscaled
+   * @private
    */
+  Network.prototype._setScale = function(scale) {
+    this.scale = scale;
+  };
 
   /**
-   * 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.
-   *
+   * Get the current scale of  the network
+   * @return {Number} scale   Scaling factor 1.0 is unscaled
    * @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;
+  Network.prototype._getScale = function() {
+    return this.scale;
   };
 
-
   /**
-   *  /**
-   * 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"
+   * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
+   * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+   * @param {number} x
+   * @returns {number}
    * @private
    */
-  exports._switchToSector = function(sectorId, sectorType) {
-    if (sectorType === undefined || sectorType == "active") {
-      this._switchToActiveSector(sectorId);
-    }
-    else {
-      this._switchToFrozenSector(sectorId);
-    }
+  Network.prototype._XconvertDOMtoCanvas = function(x) {
+    return (x - this.translation.x) / this.scale;
   };
 
-
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied active sector.
-   *
-   * @param sectorId
+   * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+   * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
+   * @param {number} x
+   * @returns {number}
    * @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"];
+  Network.prototype._XconvertCanvasToDOM = function(x) {
+    return x * this.scale + this.translation.x;
   };
 
-
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied active sector.
-   *
+   * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
+   * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+   * @param {number} y
+   * @returns {number}
    * @private
    */
-  exports._switchToSupportSector = function() {
-    this.nodeIndices = this.sectors["support"]["nodeIndices"];
-    this.nodes       = this.sectors["support"]["nodes"];
-    this.edges       = this.sectors["support"]["edges"];
+  Network.prototype._YconvertDOMtoCanvas = function(y) {
+    return (y - this.translation.y) / this.scale;
   };
 
-
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied frozen sector.
-   *
-   * @param sectorId
+   * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+   * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
+   * @param {number} y
+   * @returns {number}
    * @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"];
+  Network.prototype._YconvertCanvasToDOM = function(y) {
+    return y * this.scale + this.translation.y ;
   };
 
 
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the currently active sector.
    *
-   * @private
+   * @param {object} pos   = {x: number, y: number}
+   * @returns {{x: number, y: number}}
+   * @constructor
    */
-  exports._loadLatestSector = function() {
-    this._switchToSector(this._sector());
-  };
-
+  Network.prototype.canvasToDOM = function(pos) {
+    return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
+  }
 
   /**
-   * This function returns the currently active sector Id
    *
-   * @returns {String}
-   * @private
+   * @param {object} pos   = {x: number, y: number}
+   * @returns {{x: number, y: number}}
+   * @constructor
    */
-  exports._sector = function() {
-    return this.activeSector[this.activeSector.length-1];
-  };
-
+  Network.prototype.DOMtoCanvas = function(pos) {
+    return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
+  }
 
   /**
-   * This function returns the previously active sector Id
-   *
-   * @returns {String}
+   * Redraw all nodes
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Boolean} [alwaysShow]
    * @private
    */
-  exports._previousSector = function() {
-    if (this.activeSector.length > 1) {
-      return this.activeSector[this.activeSector.length-2];
+  Network.prototype._drawNodes = function(ctx,alwaysShow) {
+    if (alwaysShow === undefined) {
+      alwaysShow = false;
     }
-    else {
-      throw new TypeError('there are not enough sectors in the this.activeSector array.');
+
+    // first draw the unselected nodes
+    var nodes = this.nodes;
+    var selected = [];
+
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
+        if (nodes[id].isSelected()) {
+          selected.push(id);
+        }
+        else {
+          if (nodes[id].inArea() || alwaysShow) {
+            nodes[id].draw(ctx);
+          }
+        }
+      }
     }
-  };
 
+    // draw the selected nodes on top
+    for (var s = 0, sMax = selected.length; s < sMax; s++) {
+      if (nodes[selected[s]].inArea() || alwaysShow) {
+        nodes[selected[s]].draw(ctx);
+      }
+    }
+  };
 
   /**
-   * 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
+   * Redraw all edges
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
    * @private
    */
-  exports._setActiveSector = function(newId) {
-    this.activeSector.push(newId);
+  Network.prototype._drawEdges = function(ctx) {
+    var edges = this.edges;
+    for (var id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        var edge = edges[id];
+        edge.setScale(this.scale);
+        if (edge.connected) {
+          edges[id].draw(ctx);
+        }
+      }
+    }
   };
 
-
   /**
-   * We remove the currently active sector id from the active sector stack. This happens when
-   * we reactivate the previously active sector
-   *
+   * Redraw all edges
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
    * @private
    */
-  exports._forgetLastSector = function() {
-    this.activeSector.pop();
+  Network.prototype._drawControlNodes = function(ctx) {
+    var edges = this.edges;
+    for (var id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        edges[id]._drawControlNodes(ctx);
+      }
+    }
   };
 
-
   /**
-   * 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
+   * Find a stable position for all nodes
    * @private
    */
-  exports._createNewSector = function(newId) {
-    // create the new sector
-    this.sectors["active"][newId] = {"nodes":{},
-                                     "edges":{},
-                                     "nodeIndices":[],
-                                     "formationScale": this.scale,
-                                     "drawingNode": undefined};
+  Network.prototype._stabilize = function() {
+    if (this.constants.freezeForStabilization == true) {
+      this._freezeDefinedNodes();
+    }
 
-    // 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;
+    // find stable position
+    var count = 0;
+    while (this.moving && count < this.constants.stabilizationIterations) {
+      this._physicsTick();
+      count++;
+    }
+    this.zoomExtent(false,true);
+    if (this.constants.freezeForStabilization == true) {
+      this._restoreFrozenNodes();
+    }
+    this.emit("stabilized",{iterations:count});
   };
 
-
   /**
-   * This function removes the currently active sector. This is called when we create a new
-   * active sector.
+   * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
+   * because only the supportnodes for the smoothCurves have to settle.
    *
-   * @param {String} sectorId   | Id of the active sector that will be removed
    * @private
    */
-  exports._deleteActiveSector = function(sectorId) {
-    delete this.sectors["active"][sectorId];
+  Network.prototype._freezeDefinedNodes = function() {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        if (nodes[id].x != null && nodes[id].y != null) {
+          nodes[id].fixedData.x = nodes[id].xFixed;
+          nodes[id].fixedData.y = nodes[id].yFixed;
+          nodes[id].xFixed = true;
+          nodes[id].yFixed = true;
+        }
+      }
+    }
   };
 
-
   /**
-   * This function removes the currently active sector. This is called when we reactivate
-   * the previously active sector.
+   * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
    *
-   * @param {String} sectorId   | Id of the active sector that will be removed
    * @private
    */
-  exports._deleteFrozenSector = function(sectorId) {
-    delete this.sectors["frozen"][sectorId];
+  Network.prototype._restoreFrozenNodes = function() {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        if (nodes[id].fixedData.x != null) {
+          nodes[id].xFixed = nodes[id].fixedData.x;
+          nodes[id].yFixed = nodes[id].fixedData.y;
+        }
+      }
+    }
   };
 
 
   /**
-   * 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
+   * Check if any of the nodes is still moving
+   * @param {number} vmin   the minimum velocity considered as 'moving'
+   * @return {boolean}      true if moving, false if non of the nodes is moving
    * @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);
+  Network.prototype._isMoving = function(vmin) {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
+        return true;
+      }
+    }
+    return false;
   };
 
 
   /**
-   * This is the reverse operation of _freezeSector. Activating means moving the sector from the "frozen"
-   * object to the "active" object.
+   * /**
+   * Perform one discrete step for all nodes
    *
-   * @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);
-  };
-
+  Network.prototype._discreteStepNodes = function() {
+    var interval = this.physicsDiscreteStepsize;
+    var nodes = this.nodes;
+    var nodeId;
+    var nodesPresent = false;
 
-  /**
-   * 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];
+    if (this.constants.maxVelocity > 0) {
+      for (nodeId in nodes) {
+        if (nodes.hasOwnProperty(nodeId)) {
+          nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
+          nodesPresent = true;
+        }
       }
     }
-
-    // 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];
+    else {
+      for (nodeId in nodes) {
+        if (nodes.hasOwnProperty(nodeId)) {
+          nodes[nodeId].discreteStep(interval);
+          nodesPresent = true;
+        }
       }
     }
 
-    // merge the nodeIndices
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
+    if (nodesPresent == true) {
+      var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
+      if (vminCorrected > 0.5*this.constants.maxVelocity) {
+        this.moving = true;
+      }
+      else {
+        this.moving = this._isMoving(vminCorrected) || this.constants.configurePhysics;
+      }
     }
   };
 
-
   /**
-   * 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.
+   * A single simulation step (or "tick") in the physics simulation
    *
    * @private
    */
-  exports._collapseThisToSingleCluster = function() {
-    this.clusterToFit(1,false);
+  Network.prototype._physicsTick = function() {
+    if (!this.freezeSimulation) {
+      if (this.moving) {
+        this._doInAllActiveSectors("_initializeForceCalculation");
+        this._doInAllActiveSectors("_discreteStepNodes");
+        if (this.constants.smoothCurves) {
+          this._doInSupportSector("_discreteStepNodes");
+        }
+        this._findCenter(this._getRange())
+      }
+    }
   };
 
 
   /**
-   * We create a new active sector from the node that we want to open.
+   * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
+   * It reschedules itself at the beginning of the function
    *
-   * @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);
+  Network.prototype._animationStep = function() {
+    // reset the timer so a new scheduled animation step can be set
+    this.timer = undefined;
+    // handle the keyboad movement
+    this._handleNavigation();
 
-    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
-    this._createNewSector(unqiueIdentifier);
+    // this schedules a new animation step
+    this.start();
 
-    // we add the active sector to the sectors array to be able to revert these steps later on
-    this._setActiveSector(unqiueIdentifier);
+    // start the physics simulation
+    var calculationTime = Date.now();
+    var maxSteps = 1;
+    this._physicsTick();
+    var timeRequired = Date.now() - calculationTime;
+    while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
+      this._physicsTick();
+      timeRequired = Date.now() - calculationTime;
+      maxSteps++;
+    }
 
-    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
-    this._switchToSector(this._sector());
+    // start the rendering process
+    var renderTime = Date.now();
+    this._redraw();
+    this.renderTime = Date.now() - renderTime;
 
-    // finally we add the node we removed from our previous active sector to the new active sector
-    this.nodes[node.id] = node;
   };
 
+  if (typeof window !== 'undefined') {
+    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  }
 
   /**
-   * 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
+   * Schedule a animation step with the refreshrate interval.
    */
-  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();
+  Network.prototype.start = function() {
+    if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
+      if (!this.timer) {
+        var ua = navigator.userAgent.toLowerCase();
 
-        // finally, we update the node index list.
-        this._updateNodeIndexList();
+        var requiresTimeout = false;
+        if (ua.indexOf('msie 9.0') != -1) { // IE 9
+          requiresTimeout = true;
+        }
+        else if (ua.indexOf('safari') != -1) {  // safari
+          if (ua.indexOf('chrome') <= -1) {
+            requiresTimeout = true;
+          }
+        }
 
-        // we refresh the list with calulation nodes and calculation node indices.
-        this._updateCalculationNodes();
+        if (requiresTimeout == true) {
+          this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
+        }
+        else{
+          this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
+        }
       }
     }
+    else {
+      this._redraw();
+    }
   };
 
 
   /**
-   * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
+   * Move the network according to the keyboard presses.
    *
-   * @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) {
-    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);
-          this[runFunction]();
-        }
-      }
+  Network.prototype._handleNavigation = function() {
+    if (this.xIncrement != 0 || this.yIncrement != 0) {
+      var translation = this._getTranslation();
+      this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
     }
-    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) {
-            this[runFunction](args[0],args[1]);
-          }
-          else {
-            this[runFunction](argument);
-          }
-        }
-      }
+    if (this.zoomIncrement != 0) {
+      var center = {
+        x: this.frame.canvas.clientWidth / 2,
+        y: this.frame.canvas.clientHeight / 2
+      };
+      this._zoom(this.scale*(1 + this.zoomIncrement), center);
     }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
   };
 
 
   /**
-   * 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
+   *  Freeze the _animationStep
    */
-  exports._doInSupportSector = function(runFunction,argument) {
-    if (argument === undefined) {
-      this._switchToSupportSector();
-      this[runFunction]();
+  Network.prototype.toggleFreeze = function() {
+    if (this.freezeSimulation == false) {
+      this.freezeSimulation = true;
     }
     else {
-      this._switchToSupportSector();
-      var args = Array.prototype.splice.call(arguments, 1);
-      if (args.length > 1) {
-        this[runFunction](args[0],args[1]);
-      }
-      else {
-        this[runFunction](argument);
-      }
+      this.freezeSimulation = false;
+      this.start();
     }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
   };
 
 
   /**
-   * This runs a function in all frozen sectors. This is used in the _redraw().
+   * This function cleans the support nodes if they are not needed and adds them when they are.
    *
-   * @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
+   * @param {boolean} [disableStart]
    * @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]();
-        }
-      }
+  Network.prototype._configureSmoothCurves = function(disableStart) {
+    if (disableStart === undefined) {
+      disableStart = true;
+    }
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      this._createBezierNodes();
     }
     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);
-          }
+      // delete the support nodes
+      this.sectors['support']['nodes'] = {};
+      for (var edgeId in this.edges) {
+        if (this.edges.hasOwnProperty(edgeId)) {
+          this.edges[edgeId].smooth = false;
+          this.edges[edgeId].via = null;
         }
       }
     }
-    this._loadLatestSector();
+    this._updateCalculationNodes();
+    if (!disableStart) {
+      this.moving = true;
+      this.start();
+    }
   };
 
 
   /**
-   * This runs a function in all sectors. This is used in the _redraw().
+   * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
+   * are used for the force calculation.
    *
-   * @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);
+  Network.prototype._createBezierNodes = function() {
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      for (var edgeId in this.edges) {
+        if (this.edges.hasOwnProperty(edgeId)) {
+          var edge = this.edges[edgeId];
+          if (edge.via == null) {
+            edge.smooth = true;
+            var nodeId = "edgeId:".concat(edge.id);
+            this.sectors['support']['nodes'][nodeId] = new Node(
+                    {id:nodeId,
+                      mass:1,
+                      shape:'circle',
+                      image:"",
+                      internalMultiplier:1
+                    },{},{},this.constants);
+            edge.via = this.sectors['support']['nodes'][nodeId];
+            edge.via.parentEdgeId = edge.id;
+            edge.positionBezierNode();
+          }
+        }
       }
     }
   };
 
-
   /**
-   * 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.
+   * load the functions that load the mixins into the prototype.
    *
    * @private
    */
-  exports._clearNodeIndexList = function() {
-    var sector = this._sector();
-    this.sectors["active"][sector]["nodeIndices"] = [];
-    this.nodeIndices = this.sectors["active"][sector]["nodeIndices"];
+  Network.prototype._initializeMixinLoaders = function () {
+    for (var mixin in MixinLoader) {
+      if (MixinLoader.hasOwnProperty(mixin)) {
+        Network.prototype[mixin] = MixinLoader[mixin];
+      }
+    }
   };
 
-
   /**
-   * Draw the encompassing sector node
-   *
-   * @param ctx
-   * @param sectorType
-   * @private
+   * Load the XY positions of the nodes into the dataset.
    */
-  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) {
-
-          this._switchToSector(sector,sectorType);
-
-          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.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
-          node.setScale(this.scale);
-          node._drawCircle(ctx);
+  Network.prototype.storePosition = function() {
+    var dataArray = [];
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        var allowedToMoveX = !this.nodes.xFixed;
+        var allowedToMoveY = !this.nodes.yFixed;
+        if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
+          dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
         }
       }
     }
+    this.nodesData.update(dataArray);
   };
 
-  exports._drawAllSectorNodes = function(ctx) {
-    this._drawSectorNodes(ctx,"frozen");
-    this._drawSectorNodes(ctx,"active");
-    this._loadLatestSector();
-  };
-
-
-/***/ },
-/* 44 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Node = __webpack_require__(30);
 
   /**
-   * This function can be called from the _doInAllSectors function
+   * Center a node in view.
    *
-   * @param object
-   * @param overlappingNodes
-   * @private
+   * @param {Number} nodeId
+   * @param {Number} [zoomLevel]
    */
-  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);
-        }
+  Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
+    if (this.nodes.hasOwnProperty(nodeId)) {
+      if (zoomLevel === undefined) {
+        zoomLevel = this._getScale();
       }
-    }
-  };
+      var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
 
-  /**
-   * 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;
-  };
+      var requiredScale = zoomLevel;
+      this._setScale(requiredScale);
 
+      var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
+      var translation = this._getTranslation();
 
-  /**
-   * 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);
+      var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
+                                y:canvasCenter.y - nodePosition.y};
 
-    return {
-      left:   x,
-      top:    y,
-      right:  x,
-      bottom: y
-    };
+      this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
+                           translation.y + requiredScale * distanceFromCenter.y);
+      this.redraw();
+    }
+    else {
+      console.log("This nodeId cannot be found.")
+    }
   };
 
+  module.exports = Network;
 
-  /**
-   * 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 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;
-    }
-  };
 
+/***/ },
+/* 38 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * 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
+   * Copyright 2012 Craig Campbell
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   * http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Mousetrap is a simple keyboard shortcut library for Javascript with
+   * no external dependencies
+   *
+   * @version 1.1.2
+   * @url craig.is/killing/mice
    */
-  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);
-        }
-      }
-    }
-  };
 
+    /**
+     * mapping of special keycodes to their corresponding keys
+     *
+     * everything in this dictionary cannot use keypress events
+     * so it has to be here to map to the correct keycodes for
+     * keyup/keydown events
+     *
+     * @type {Object}
+     */
+    var _MAP = {
+            8: 'backspace',
+            9: 'tab',
+            13: 'enter',
+            16: 'shift',
+            17: 'ctrl',
+            18: 'alt',
+            20: 'capslock',
+            27: 'esc',
+            32: 'space',
+            33: 'pageup',
+            34: 'pagedown',
+            35: 'end',
+            36: 'home',
+            37: 'left',
+            38: 'up',
+            39: 'right',
+            40: 'down',
+            45: 'ins',
+            46: 'del',
+            91: 'meta',
+            93: 'meta',
+            224: 'meta'
+        },
 
-  /**
-   * 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;
-  };
+        /**
+         * mapping for special characters so they can support
+         *
+         * this dictionary is only used incase you want to bind a
+         * keyup or keydown event to one of these keys
+         *
+         * @type {Object}
+         */
+        _KEYCODE_MAP = {
+            106: '*',
+            107: '+',
+            109: '-',
+            110: '.',
+            111 : '/',
+            186: ';',
+            187: '=',
+            188: ',',
+            189: '-',
+            190: '.',
+            191: '/',
+            192: '`',
+            219: '[',
+            220: '\\',
+            221: ']',
+            222: '\''
+        },
 
-  /**
-   * 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);
+        /**
+         * this is a mapping of keys that require shift on a US keypad
+         * back to the non shift equivelents
+         *
+         * this is so you can use keyup events with these keys
+         *
+         * note that this will only work reliably on US keyboards
+         *
+         * @type {Object}
+         */
+        _SHIFT_MAP = {
+            '~': '`',
+            '!': '1',
+            '@': '2',
+            '#': '3',
+            '$': '4',
+            '%': '5',
+            '^': '6',
+            '&': '7',
+            '*': '8',
+            '(': '9',
+            ')': '0',
+            '_': '-',
+            '+': '=',
+            ':': ';',
+            '\"': '\'',
+            '<': ',',
+            '>': '.',
+            '?': '/',
+            '|': '\\'
+        },
 
-    if (overlappingEdges.length > 0) {
-      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
-    }
-    else {
-      return null;
-    }
-  };
+        /**
+         * this is a list of special strings you can use to map
+         * to modifier keys when you specify your keyboard shortcuts
+         *
+         * @type {Object}
+         */
+        _SPECIAL_ALIASES = {
+            'option': 'alt',
+            'command': 'meta',
+            'return': 'enter',
+            'escape': 'esc'
+        },
 
+        /**
+         * variable to store the flipped version of _MAP from above
+         * needed to check if we should use keypress or not when no action
+         * is specified
+         *
+         * @type {Object|undefined}
+         */
+        _REVERSE_MAP,
 
-  /**
-   * 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;
-    }
-  };
+        /**
+         * a list of all the callbacks setup via Mousetrap.bind()
+         *
+         * @type {Object}
+         */
+        _callbacks = {},
 
-  /**
-   * 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;
-    }
-  };
+        /**
+         * direct map of string combinations to callbacks used for trigger()
+         *
+         * @type {Object}
+         */
+        _direct_map = {},
 
+        /**
+         * keeps track of what level each sequence is at since multiple
+         * sequences can start out with the same sequence
+         *
+         * @type {Object}
+         */
+        _sequence_levels = {},
 
-  /**
-   * 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];
-    }
-  };
+        /**
+         * variable to store the setTimeout call
+         *
+         * @type {null|number}
+         */
+        _reset_timer,
 
-  /**
-   * 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();
-      }
-    }
+        /**
+         * temporary state where we will ignore the next keyup
+         *
+         * @type {boolean|string}
+         */
+        _ignore_next_keyup = false,
 
-    this.selectionObj = {nodes:{},edges:{}};
+        /**
+         * are we currently inside of a sequence?
+         * type of action ("keyup" or "keydown" or "keypress") or false
+         *
+         * @type {boolean|string}
+         */
+        _inside_sequence = false;
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
+    /**
+     * loop through the f keys, f1 to f19 and add them to the map
+     * programatically
+     */
+    for (var i = 1; i < 20; ++i) {
+        _MAP[111 + i] = 'f' + i;
     }
-  };
 
-  /**
-   * Unselect all clusters. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectClusters = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
+    /**
+     * loop through to map numbers on the numeric keypad
+     */
+    for (i = 0; i <= 9; ++i) {
+        _MAP[i + 96] = i;
     }
 
-    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]);
+    /**
+     * cross browser add event method
+     *
+     * @param {Element|HTMLDocument} object
+     * @param {string} type
+     * @param {Function} callback
+     * @returns void
+     */
+    function _addEvent(object, type, callback) {
+        if (object.addEventListener) {
+            return object.addEventListener(type, callback, false);
         }
-      }
-    }
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
+        object.attachEvent('on' + type, callback);
     }
-  };
 
+    /**
+     * takes the event and returns the key character
+     *
+     * @param {Event} e
+     * @return {string}
+     */
+    function _characterFromEvent(e) {
 
-  /**
-   * 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;
-  };
-
-  /**
-   * 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;
-  };
+        // for keypress events we should return the character as is
+        if (e.type == 'keypress') {
+            return String.fromCharCode(e.which);
+        }
 
-  /**
-   * 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;
-  };
+        // for non keypress events the special maps are needed
+        if (_MAP[e.which]) {
+            return _MAP[e.which];
+        }
 
+        if (_KEYCODE_MAP[e.which]) {
+            return _KEYCODE_MAP[e.which];
+        }
 
-  /**
-   * 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;
-      }
+        // if it is not in the special map
+        return String.fromCharCode(e.which).toLowerCase();
     }
-    return count;
-  };
 
+    /**
+     * should we stop this event before firing off callbacks
+     *
+     * @param {Event} e
+     * @return {boolean}
+     */
+    function _stop(e) {
+        var element = e.target || e.srcElement,
+            tag_name = element.tagName;
 
-  /**
-   * 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;
-  };
+        // if the element has the class "mousetrap" then no need to stop
+        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
+            return false;
+        }
 
-  /**
-   * 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;
-      }
+        // stop for input, select, and textarea
+        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
     }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        return false;
-      }
+
+    /**
+     * checks if two arrays are equal
+     *
+     * @param {Array} modifiers1
+     * @param {Array} modifiers2
+     * @returns {boolean}
+     */
+    function _modifiersMatch(modifiers1, modifiers2) {
+        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
     }
-    return true;
-  };
 
+    /**
+     * resets all sequence counters except for the ones passed in
+     *
+     * @param {Object} do_not_reset
+     * @returns void
+     */
+    function _resetSequences(do_not_reset) {
+        do_not_reset = do_not_reset || {};
 
-  /**
-   * 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;
+        var active_sequences = false,
+            key;
+
+        for (key in _sequence_levels) {
+            if (do_not_reset[key]) {
+                active_sequences = true;
+                continue;
+            }
+            _sequence_levels[key] = 0;
         }
-      }
-    }
-    return false;
-  };
 
-  /**
-   * 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);
+        if (!active_sequences) {
+            _inside_sequence = 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);
-    }
-  };
+    /**
+     * finds all callbacks that match based on the keycode, modifiers,
+     * and action
+     *
+     * @param {string} character
+     * @param {Array} modifiers
+     * @param {string} action
+     * @param {boolean=} remove - should we remove any matches
+     * @param {string=} combination
+     * @returns {Array}
+     */
+    function _getMatches(character, modifiers, action, remove, combination) {
+        var i,
+            callback,
+            matches = [];
 
+        // if there are no events related to this keycode
+        if (!_callbacks[character]) {
+            return [];
+        }
 
-  /**
-   * 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);
-    }
-  };
+        // if a modifier key is coming up on its own we should allow it
+        if (action == 'keyup' && _isModifier(character)) {
+            modifiers = [character];
+        }
 
+        // loop through all callbacks for the key that was pressed
+        // and see if any of them match
+        for (i = 0; i < _callbacks[character].length; ++i) {
+            callback = _callbacks[character][i];
 
+            // if this is a sequence but it is not at the right level
+            // then move onto the next match
+            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
+                continue;
+            }
 
+            // if the action we are looking for doesn't match the action we got
+            // then we should keep going
+            if (action != callback.action) {
+                continue;
+            }
 
-  /**
-   * 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) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    if (highlightEdges === undefined) {
-      highlightEdges = true;
-    }
+            // if this is a keypress event that means that we need to only
+            // look at the character, otherwise check the modifiers as
+            // well
+            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
 
-    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
-      this._unselectAll(true);
-    }
+                // remove is used so if you change your mind and call bind a
+                // second time with a new function the first one is overwritten
+                if (remove && callback.combo == combination) {
+                    _callbacks[character].splice(i, 1);
+                }
 
-    if (object.selected == false) {
-      object.select();
-      this._addToSelection(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
-        this._selectConnectedEdges(object);
-      }
-    }
-    else {
-      object.unselect();
-      this._removeFromSelection(object);
-    }
+                matches.push(callback);
+            }
+        }
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
+        return matches;
     }
-  };
 
+    /**
+     * takes a key event and figures out what the modifiers are
+     *
+     * @param {Event} e
+     * @returns {Array}
+     */
+    function _eventModifiers(e) {
+        var modifiers = [];
 
-  /**
-   * 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});
-      }
-    }
-    if (object instanceof Node) {
-      this._hoverConnectedEdges(object);
-    }
-  };
+        if (e.shiftKey) {
+            modifiers.push('shift');
+        }
 
+        if (e.altKey) {
+            modifiers.push('alt');
+        }
 
-  /**
-   * 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) {
-  };
+        if (e.ctrlKey) {
+            modifiers.push('ctrl');
+        }
 
+        if (e.metaKey) {
+            modifiers.push('meta');
+        }
 
-  /**
-   * 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();
-      }
+        return modifiers;
     }
-    this.emit("click", this.getSelection());
-    this._redraw();
-  };
 
+    /**
+     * actually calls the callback function
+     *
+     * if your callback function returns false this will use the jquery
+     * convention - prevent default and stop propogation on the event
+     *
+     * @param {Function} callback
+     * @param {Event} e
+     * @returns void
+     */
+    function _fireCallback(callback, e) {
+        if (callback(e) === false) {
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
 
-  /**
-   * 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);
-    }
-    this.emit("doubleClick", this.getSelection());
-  };
-
+            if (e.stopPropagation) {
+                e.stopPropagation();
+            }
 
-  /**
-   * 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);
-      }
+            e.returnValue = false;
+            e.cancelBubble = true;
+        }
     }
-    this._redraw();
-  };
 
+    /**
+     * handles a character key event
+     *
+     * @param {string} character
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleCharacter(character, e) {
 
-  /**
-   * handle the onRelease event. These functions are here for the navigation controls module.
-   *
-    * @private
-   */
-  exports._handleOnRelease = function(pointer) {
+        // if this event should not happen stop here
+        if (_stop(e)) {
+            return;
+        }
 
-  };
+        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
+            i,
+            do_not_reset = {},
+            processed_sequence_callback = false;
 
+        // loop through matching callbacks for this key event
+        for (i = 0; i < callbacks.length; ++i) {
 
+            // fire for all sequence callbacks
+            // this is because if for example you have multiple sequences
+            // bound such as "g i" and "g t" they both need to fire the
+            // callback for matching g cause otherwise you can only ever
+            // match the first one
+            if (callbacks[i].seq) {
+                processed_sequence_callback = true;
 
-  /**
-   *
-   * 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};
-  };
+                // keep a list of which sequences were matches for later
+                do_not_reset[callbacks[i].seq] = 1;
+                _fireCallback(callbacks[i].callback, e);
+                continue;
+            }
 
-  /**
-   *
-   * retrieve the currently selected nodes
-   * @return {String[]} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedNodes = function() {
-    var idArray = [];
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        idArray.push(nodeId);
-      }
-    }
-    return idArray
-  };
+            // if there were no sequence matches but we are still here
+            // that means this is a regular match so we should fire that
+            if (!processed_sequence_callback && !_inside_sequence) {
+                _fireCallback(callbacks[i].callback, e);
+            }
+        }
 
-  /**
-   *
-   * retrieve the currently selected edges
-   * @return {Array} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedEdges = function() {
-    var idArray = [];
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        idArray.push(edgeId);
-      }
+        // if you are inside of a sequence and the key you are pressing
+        // is not a modifier key then we should reset all sequences
+        // that were not matched by this key event
+        if (e.type == _inside_sequence && !_isModifier(character)) {
+            _resetSequences(do_not_reset);
+        }
     }
-    return idArray;
-  };
 
+    /**
+     * handles a keydown event
+     *
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleKey(e) {
 
-  /**
-   * select zero or more nodes
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.setSelection = function(selection) {
-    var i, iMax, id;
+        // normalize e.which for key events
+        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
+        e.which = typeof e.which == "number" ? e.which : e.keyCode;
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+        var character = _characterFromEvent(e);
 
-    // first unselect any selected node
-    this._unselectAll(true);
+        // no character found then stop
+        if (!character) {
+            return;
+        }
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+        if (e.type == 'keyup' && _ignore_next_keyup == character) {
+            _ignore_next_keyup = false;
+            return;
+        }
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true);
+        _handleCharacter(character, e);
     }
 
-    console.log("setSelection is deprecated. Please use selectNodes instead.")
-
-    this.redraw();
-  };
+    /**
+     * determines if the keycode specified is a modifier key or not
+     *
+     * @param {string} key
+     * @returns {boolean}
+     */
+    function _isModifier(key) {
+        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
+    }
 
+    /**
+     * called to set a 1 second timeout on the specified sequence
+     *
+     * this is so after each key press in the sequence you have 1 second
+     * to press the next key before you have to start over
+     *
+     * @returns void
+     */
+    function _resetSequenceTimer() {
+        clearTimeout(_reset_timer);
+        _reset_timer = setTimeout(_resetSequences, 1000);
+    }
 
-  /**
-   * 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;
+    /**
+     * reverses the map lookup so that we can look for specific keys
+     * to see what can and can't use keypress
+     *
+     * @return {Object}
+     */
+    function _getReverseMap() {
+        if (!_REVERSE_MAP) {
+            _REVERSE_MAP = {};
+            for (var key in _MAP) {
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+                // pull out the numeric keypad from here cause keypress should
+                // be able to detect the keys from the character
+                if (key > 95 && key < 112) {
+                    continue;
+                }
 
-    // first unselect any selected node
-    this._unselectAll(true);
+                if (_MAP.hasOwnProperty(key)) {
+                    _REVERSE_MAP[_MAP[key]] = key;
+                }
+            }
+        }
+        return _REVERSE_MAP;
+    }
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+    /**
+     * picks the best action based on the key combination
+     *
+     * @param {string} key - character for key
+     * @param {Array} modifiers
+     * @param {string=} action passed in
+     */
+    function _pickBestAction(key, modifiers, action) {
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
+        // if no action was picked in we should try to pick the one
+        // that we think would work best for this key
+        if (!action) {
+            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
+        }
 
+        // modifier keys don't work as expected with keypress,
+        // switch to keydown
+        if (action == 'keypress' && modifiers.length) {
+            action = 'keydown';
+        }
 
-  /**
-   * 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;
+        return action;
+    }
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+    /**
+     * binds a key sequence to an event
+     *
+     * @param {string} combo - combo specified in bind call
+     * @param {Array} keys
+     * @param {Function} callback
+     * @param {string=} action
+     * @returns void
+     */
+    function _bindSequence(combo, keys, callback, action) {
 
-    // first unselect any selected node
-    this._unselectAll(true);
+        // start off by adding a sequence level record for this combination
+        // and setting the level to 0
+        _sequence_levels[combo] = 0;
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+        // if there is no action pick the best one for the first key
+        // in the sequence
+        if (!action) {
+            action = _pickBestAction(keys[0], []);
+        }
 
-      var edge = this.edges[id];
-      if (!edge) {
-        throw new RangeError('Edge with id "' + id + '" not found');
-      }
-      this._selectObject(edge,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
+        /**
+         * callback to increase the sequence level for this sequence and reset
+         * all other sequences that were active
+         *
+         * @param {Event} e
+         * @returns void
+         */
+        var _increaseSequence = function(e) {
+                _inside_sequence = action;
+                ++_sequence_levels[combo];
+                _resetSequenceTimer();
+            },
 
-  /**
-   * 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];
+            /**
+             * wraps the specified callback inside of another function in order
+             * to reset all sequence counters as soon as this sequence is done
+             *
+             * @param {Event} e
+             * @returns void
+             */
+            _callbackAndReset = function(e) {
+                _fireCallback(callback, e);
+
+                // we should ignore the next key up if the action is key down
+                // or keypress.  this is so if you finish a sequence and
+                // release the key the final key will not trigger a keyup
+                if (action !== 'keyup') {
+                    _ignore_next_keyup = _characterFromEvent(e);
+                }
+
+                // weird race condition if a sequence ends with the key
+                // another sequence begins with
+                setTimeout(_resetSequences, 10);
+            },
+            i;
+
+        // loop through keys one at a time and bind the appropriate callback
+        // function.  for any key leading up to the final one it should
+        // increase the sequence. after the final, it should reset all sequences
+        for (i = 0; i < keys.length; ++i) {
+            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
         }
-      }
     }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        if (!this.edges.hasOwnProperty(edgeId)) {
-          delete this.selectionObj.edges[edgeId];
+
+    /**
+     * binds a single keyboard combination
+     *
+     * @param {string} combination
+     * @param {Function} callback
+     * @param {string=} action
+     * @param {string=} sequence_name - name of sequence if part of sequence
+     * @param {number=} level - what part of the sequence the command is
+     * @returns void
+     */
+    function _bindSingle(combination, callback, action, sequence_name, level) {
+
+        // make sure multiple spaces in a row become a single space
+        combination = combination.replace(/\s+/g, ' ');
+
+        var sequence = combination.split(' '),
+            i,
+            key,
+            keys,
+            modifiers = [];
+
+        // if this pattern is a sequence of keys then run through this method
+        // to reprocess each pattern one key at a time
+        if (sequence.length > 1) {
+            return _bindSequence(combination, sequence, callback, action);
         }
-      }
-    }
-  };
 
+        // take the keys from this pattern and figure out what the actual
+        // pattern is all about
+        keys = combination === '+' ? ['+'] : combination.split('+');
 
-/***/ },
-/* 45 */
-/***/ function(module, exports, __webpack_require__) {
+        for (i = 0; i < keys.length; ++i) {
+            key = keys[i];
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(30);
-  var Edge = __webpack_require__(27);
+            // normalize key names
+            if (_SPECIAL_ALIASES[key]) {
+                key = _SPECIAL_ALIASES[key];
+            }
 
-  /**
-   * clears the toolbar div element of children
-   *
-   * @private
-   */
-  exports._clearManipulatorBar = function() {
-    while (this.manipulationDiv.hasChildNodes()) {
-      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-    }
-  };
+            // if this is not a keypress event then we should
+            // be smart about using shift keys
+            // this will only work for US keyboards however
+            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
+                key = _SHIFT_MAP[key];
+                modifiers.push('shift');
+            }
 
-  /**
-   * 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];
-      }
-    }
-  };
+            // if this key is a modifier then add it to the list of modifiers
+            if (_isModifier(key)) {
+                modifiers.push(key);
+            }
+        }
 
-  /**
-   * Enable or disable edit-mode.
-   *
-   * @private
-   */
-  exports._toggleEditMode = function() {
-    this.editMode = !this.editMode;
-    var toolbar = document.getElementById("network-manipulationDiv");
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("network-manipulation-editMode");
-    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()
-  };
+        // depending on what the key combination is
+        // we will try to pick the best event for it
+        action = _pickBestAction(key, modifiers, action);
 
-  /**
-   * 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);
+        // make sure to initialize array if this is the first time
+        // a callback is added for this key
+        if (!_callbacks[key]) {
+            _callbacks[key] = [];
+        }
+
+        // remove an existing match if there is one
+        _getMatches(key, modifiers, action, !sequence_name, combination);
+
+        // add this call back to the array
+        // if it is a sequence put it at the beginning
+        // if not put it at the end
+        //
+        // this is important because the way these are processed expects
+        // the sequence ones to come first
+        _callbacks[key][sequence_name ? 'unshift' : 'push']({
+            callback: callback,
+            modifiers: modifiers,
+            action: action,
+            seq: sequence_name,
+            level: level,
+            combo: combination
+        });
     }
 
-    if (this.edgeBeingEdited !== undefined) {
-      this.edgeBeingEdited._disableControlNodes();
-      this.edgeBeingEdited = undefined;
-      this.selectedControlNode = null;
-      this.controlNodesActive = false;
+    /**
+     * binds multiple combinations to the same callback
+     *
+     * @param {Array} combinations
+     * @param {Function} callback
+     * @param {string|undefined} action
+     * @returns void
+     */
+    function _bindMultiple(combinations, callback, action) {
+        for (var i = 0; i < combinations.length; ++i) {
+            _bindSingle(combinations[i], callback, action);
+        }
     }
 
-    // restore overloaded functions
-    this._restoreOverloadedFunctions();
+    // start!
+    _addEvent(document, 'keypress', _handleKey);
+    _addEvent(document, 'keydown', _handleKey);
+    _addEvent(document, 'keyup', _handleKey);
 
-    // resume calculation
-    this.freezeSimulation = false;
+    var mousetrap = {
 
-    // reset global variables
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+        /**
+         * binds an event to mousetrap
+         *
+         * can be a single key, a combination of keys separated with +,
+         * a comma separated list of keys, an array of keys, or
+         * a sequence of keys separated by spaces
+         *
+         * be sure to list the modifier keys first to make sure that the
+         * correct key ends up getting bound (the last key in the pattern)
+         *
+         * @param {string|Array} keys
+         * @param {Function} callback
+         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
+         * @returns void
+         */
+        bind: function(keys, callback, action) {
+            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
+            _direct_map[keys + ':' + action] = callback;
+            return this;
+        },
 
-    if (this.editMode == true) {
-      while (this.manipulationDiv.hasChildNodes()) {
-        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-      }
-      // add the icons to the manipulator div
-      this.manipulationDiv.innerHTML = "" +
-        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
-      }
+        /**
+         * unbinds an event to mousetrap
+         *
+         * the unbinding sets the callback function of the specified key combo
+         * to an empty function and deletes the corresponding key in the
+         * _direct_map dict.
+         *
+         * the keycombo+action has to be exactly the same as
+         * it was defined in the bind method
+         *
+         * TODO: actually remove this from the _callbacks dictionary instead
+         * of binding an empty function
+         *
+         * @param {string|Array} keys
+         * @param {string} action
+         * @returns void
+         */
+        unbind: function(keys, action) {
+            if (_direct_map[keys + ':' + action]) {
+                delete _direct_map[keys + ':' + action];
+                this.bind(keys, function() {}, action);
+            }
+            return this;
+        },
 
+        /**
+         * triggers an event that has already been bound
+         *
+         * @param {string} keys
+         * @param {string=} action
+         * @returns void
+         */
+        trigger: function(keys, action) {
+            _direct_map[keys + ':' + action]();
+            return this;
+        },
 
-      // bind the icons
-      var addNodeButton = document.getElementById("network-manipulate-addNode");
-      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("network-manipulate-editNode");
-        editButton.onclick = this._editNode.bind(this);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("network-manipulate-editEdge");
-        editButton.onclick = this._createEditEdgeToolbar.bind(this);
-      }
-      if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("network-manipulate-delete");
-        deleteButton.onclick = this._deleteSelected.bind(this);
-      }
-      var closeDiv = document.getElementById("network-manipulation-closeDiv");
-      closeDiv.onclick = this._toggleEditMode.bind(this);
+        /**
+         * resets the library back to its initial state.  this is useful
+         * if you want to clear out the current keyboard shortcuts and bind
+         * new ones - for example if you switch to another page
+         *
+         * @returns void
+         */
+        reset: function() {
+            _callbacks = {};
+            _direct_map = {};
+            return this;
+        }
+    };
 
-      this.boundFunction = this._createManipulatorBar.bind(this);
-      this.on('select', this.boundFunction);
-    }
-    else {
-      this.editModeDiv.innerHTML = "" +
-        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("network-manipulate-editModeButton");
-      editModeButton.onclick = this._toggleEditMode.bind(this);
-    }
-  };
+  module.exports = mousetrap;
 
 
 
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Create the toolbar for adding Nodes
+   * Parse a text source containing data in DOT language into a JSON object.
+   * The object contains two lists: one with nodes and one with edges.
    *
-   * @private
+   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+   *
+   * @param {String} data     Text containing a graph in DOT-notation
+   * @return {Object} graph   An object containing two parameters:
+   *                          {Object[]} nodes
+   *                          {Object[]} edges
    */
-  exports._createAddNodeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+  function parseDOT (data) {
+    dot = data;
+    return parseGraph();
+  }
 
-    // create the toolbar contents
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
+  // token types enumeration
+  var TOKENTYPE = {
+    NULL : 0,
+    DELIMITER : 1,
+    IDENTIFIER: 2,
+    UNKNOWN : 3
+  };
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  // map with all delimiters
+  var DELIMITERS = {
+    '{': true,
+    '}': true,
+    '[': true,
+    ']': true,
+    ';': true,
+    '=': true,
+    ',': true,
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._addNode.bind(this);
-    this.on('select', this.boundFunction);
+    '->': true,
+    '--': true
   };
 
+  var dot = '';                   // current dot file
+  var index = 0;                  // current index in dot file
+  var c = '';                     // current token character in expr
+  var token = '';                 // current token
+  var tokenType = TOKENTYPE.NULL; // type of the token
 
   /**
-   * create the toolbar to connect nodes
-   *
-   * @private
+   * Get the first character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
    */
-  exports._createAddEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this._unselectAll(true);
-    this.freezeSimulation = true;
-
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
-
-    this._unselectAll();
-    this.forceAppendSelection = false;
-    this.blockConnectingEdgeSelection = true;
-
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
-
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  function first() {
+    index = 0;
+    c = dot.charAt(0);
+  }
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._handleConnect.bind(this);
-    this.on('select', this.boundFunction);
+  /**
+   * Get the next character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
+   */
+  function next() {
+    index++;
+    c = dot.charAt(index);
+  }
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"] = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
-    this._handleTouch = this._handleConnect;
-    this._handleOnRelease = this._finishConnect;
+  /**
+   * Preview the next character from the dot file.
+   * @return {String} cNext
+   */
+  function nextPreview() {
+    return dot.charAt(index + 1);
+  }
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+  /**
+   * Test whether given character is alphabetic or numeric
+   * @param {String} c
+   * @return {Boolean} isAlphaNumeric
+   */
+  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+  function isAlphaNumeric(c) {
+    return regexAlphaNumeric.test(c);
+  }
 
   /**
-   * create the toolbar to edit edges
-   *
-   * @private
+   * Merge all properties of object b into object b
+   * @param {Object} a
+   * @param {Object} b
+   * @return {Object} a
    */
-  exports._createEditEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this.controlNodesActive = true;
+  function merge (a, b) {
+    if (!a) {
+      a = {};
+    }
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
+    if (b) {
+      for (var name in b) {
+        if (b.hasOwnProperty(name)) {
+          a[name] = b[name];
+        }
+      }
     }
-
-    this.edgeBeingEdited = this._getSelectedEdge();
-    this.edgeBeingEdited._enableControlNodes();
-
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
-
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
-
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
-    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._handleOnRelease = this._releaseControlNode;
-
-    // redraw to show the unselect
-    this._redraw();
-  };
-
-
-
-
+    return a;
+  }
 
   /**
-   * 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.
+   * Set a value in an object, where the provided parameter name can be a
+   * path with nested parameters. For example:
    *
-   * @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();
-  };
-
-  /**
-   * 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.
+   *     var obj = {a: 2};
+   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
    *
-   * @private
+   * @param {Object} obj
+   * @param {String} path  A parameter name or dot-separated parameter path,
+   *                      like "color.highlight.border".
+   * @param {*} value
    */
-  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();
-  };
-
-  exports._releaseControlNode = function(pointer) {
-    var newNode = this._getNodeAt(pointer);
-    if (newNode != null) {
-      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
-        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
-        this.edgeBeingEdited.controlNodes.from.unselect();
+  function setValue(obj, path, value) {
+    var keys = path.split('.');
+    var o = obj;
+    while (keys.length) {
+      var key = keys.shift();
+      if (keys.length) {
+        // this isn't the end point
+        if (!o[key]) {
+          o[key] = {};
+        }
+        o = o[key];
       }
-      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
-        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
-        this.edgeBeingEdited.controlNodes.to.unselect();
+      else {
+        // this is the end point
+        o[key] = value;
       }
     }
-    else {
-      this.edgeBeingEdited._restoreControlNodes();
-    }
-    this.freezeSimulation = false;
-    this._redraw();
-  };
+  }
 
   /**
-   * 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
+   * Add a node to a graph object. If there is already a node with
+   * the same id, their attributes will be merged.
+   * @param {Object} graph
+   * @param {Object} node
    */
-  exports._handleConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 0) {
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert("Cannot create edges to a cluster.")
-        }
-        else {
-          this._selectObject(node,false);
-          // create a node the temporary line can look at
-          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetNode'].x = node.x;
-          this.sectors['support']['nodes']['targetNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
-          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
-
-          // create a temporary edge
-          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
-          this.edges['connectionEdge'].from = node;
-          this.edges['connectionEdge'].connected = true;
-          this.edges['connectionEdge'].smooth = true;
-          this.edges['connectionEdge'].selected = true;
-          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
-          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
+  function addNode(graph, node) {
+    var i, len;
+    var current = null;
 
-          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
-          this._handleOnDrag = function(event) {
-            var pointer = this._getPointer(event.gesture.center);
-            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-          };
+    // find root graph (in case of subgraph)
+    var graphs = [graph]; // list with all graphs from current graph to root graph
+    var root = graph;
+    while (root.parent) {
+      graphs.push(root.parent);
+      root = root.parent;
+    }
 
-          this.moving = true;
-          this.start();
+    // find existing node (at root level) by its id
+    if (root.nodes) {
+      for (i = 0, len = root.nodes.length; i < len; i++) {
+        if (node.id === root.nodes[i].id) {
+          current = root.nodes[i];
+          break;
         }
       }
     }
-  };
 
-  exports._finishConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 1) {
-
-      // restore the drag function
-      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
-      delete this.cachedFunctions["_handleOnDrag"];
-
-      // remember the edge id
-      var connectFromId = this.edges['connectionEdge'].fromId;
-
-      // remove the temporary nodes and edge
-      delete this.edges['connectionEdge'];
-      delete this.sectors['support']['nodes']['targetNode'];
-      delete this.sectors['support']['nodes']['targetViaNode'];
-
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert("Cannot create edges to a cluster.")
-        }
-        else {
-          this._createEdge(connectFromId,node.id);
-          this._createManipulatorBar();
-        }
+    if (!current) {
+      // this is a new node
+      current = {
+        id: node.id
+      };
+      if (graph.node) {
+        // clone default attributes
+        current.attr = merge(current.attr, graph.node);
       }
-      this._unselectAll();
     }
-  };
 
+    // add node to this (sub)graph and all its parent graphs
+    for (i = graphs.length - 1; i >= 0; i--) {
+      var g = graphs[i];
 
-  /**
-   * 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 {
-          alert(this.constants.labels['addError']);
-          this._createManipulatorBar();
-          this.moving = true;
-          this.start();
-        }
+      if (!g.nodes) {
+        g.nodes = [];
       }
-      else {
-        this.nodesData.add(defaultData);
-        this._createManipulatorBar();
-        this.moving = true;
-        this.start();
+      if (g.nodes.indexOf(current) == -1) {
+        g.nodes.push(current);
       }
     }
-  };
 
+    // merge attributes
+    if (node.attr) {
+      current.attr = merge(current.attr, node.attr);
+    }
+  }
 
   /**
-   * connect two nodes with a new edge.
-   *
-   * @private
+   * Add an edge to a graph object
+   * @param {Object} graph
+   * @param {Object} edge
    */
-  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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.add(defaultData);
-        this.moving = true;
-        this.start();
-      }
+  function addEdge(graph, edge) {
+    if (!graph.edges) {
+      graph.edges = [];
     }
-  };
+    graph.edges.push(edge);
+    if (graph.edge) {
+      var attr = merge({}, graph.edge);     // clone default attributes
+      edge.attr = merge(attr, edge.attr); // merge attributes
+    }
+  }
 
   /**
-   * connect two nodes with a new edge.
-   *
-   * @private
+   * Create an edge to a graph object
+   * @param {Object} graph
+   * @param {String | Number | Object} from
+   * @param {String | Number | Object} to
+   * @param {String} type
+   * @param {Object | null} attr
+   * @return {Object} edge
    */
-  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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.update(defaultData);
-        this.moving = true;
-        this.start();
-      }
+  function createEdge(graph, from, to, type, attr) {
+    var edge = {
+      from: from,
+      to: to,
+      type: type
+    };
+
+    if (graph.edge) {
+      edge.attr = merge({}, graph.edge);  // clone default attributes
     }
-  };
+    edge.attr = merge(edge.attr || {}, attr); // merge attributes
+
+    return edge;
+  }
 
   /**
-   * 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
+   * Get next token in the current dot file.
+   * The token and token type are available as token and tokenType
    */
-  exports._editNode = function() {
-    if (this.triggerFunctions.edit && this.editMode == true) {
-      var node = this._getSelectedNode();
-      var data = {id:node.id,
-        label: node.label,
-        group: node.group,
-        shape: node.shape,
-        color: {
-          background:node.color.background,
-          border:node.color.border,
-          highlight: {
-            background:node.color.highlight.background,
-            border:node.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 {
-        alert(this.constants.labels["editError"]);
-      }
-    }
-    else {
-      alert(this.constants.labels["editBoundError"]);
-    }
-  };
-
+  function getToken() {
+    tokenType = TOKENTYPE.NULL;
+    token = '';
 
+    // skip over whitespaces
+    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+      next();
+    }
 
+    do {
+      var isComment = false;
 
-  /**
-   * 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();
-            });
+      // skip comment
+      if (c == '#') {
+        // find the previous non-space character
+        var i = index - 1;
+        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+          i--;
+        }
+        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+          // the # is at the start of a line, this is indeed a line comment
+          while (c != '' && c != '\n') {
+            next();
+          }
+          isComment = true;
+        }
+      }
+      if (c == '/' && nextPreview() == '/') {
+        // skip line comment
+        while (c != '' && c != '\n') {
+          next();
+        }
+        isComment = true;
+      }
+      if (c == '/' && nextPreview() == '*') {
+        // skip block comment
+        while (c != '') {
+          if (c == '*' && nextPreview() == '/') {
+            // end of block comment found. skip these last two characters
+            next();
+            next();
+            break;
           }
           else {
-            alert(this.constants.labels["deleteError"])
+            next();
           }
         }
-        else {
-          this.edgesData.remove(selectedEdges);
-          this.nodesData.remove(selectedNodes);
-          this._unselectAll();
-          this.moving = true;
-          this.start();
-        }
+        isComment = true;
       }
-      else {
-        alert(this.constants.labels["deleteClusterError"]);
+
+      // skip over whitespaces
+      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+        next();
       }
     }
-  };
-
-
-/***/ },
-/* 46 */
-/***/ function(module, exports, __webpack_require__) {
+    while (isComment);
 
-  exports._cleanNavigation = function() {
-    // clean up previous navigation items
-    var wrapper = document.getElementById('network-navigation_wrapper');
-    if (wrapper != null) {
-      this.containerElement.removeChild(wrapper);
+    // check for end of dot file
+    if (c == '') {
+      // token is still empty
+      tokenType = TOKENTYPE.DELIMITER;
+      return;
     }
-    document.onmouseup = null;
-  };
-
-  /**
-   * 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();
-
-    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.navigationDivs['wrapper'].id = "network-navigation_wrapper";
-    this.navigationDivs['wrapper'].style.position = "absolute";
-    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
+    // check for delimiters consisting of 2 characters
+    var c2 = c + nextPreview();
+    if (DELIMITERS[c2]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c2;
+      next();
+      next();
+      return;
+    }
 
-    for (var i = 0; i < navigationDivs.length; i++) {
-      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
-      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
-      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+    // check for delimiters consisting of 1 character
+    if (DELIMITERS[c]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c;
+      next();
+      return;
     }
 
-    document.onmouseup = this._stopMovement.bind(this);
-  };
+    // check for an identifier (number or string)
+    // TODO: more precise parsing of numbers/strings (and the port separator ':')
+    if (isAlphaNumeric(c) || c == '-') {
+      token += c;
+      next();
 
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._stopMovement = function() {
-    this._xStopMoving();
-    this._yStopMoving();
-    this._stopZoom();
-  };
-
-
-  /**
-   * stops the actions performed by page up and down etc.
-   *
-   * @param event
-   * @private
-   */
-  exports._preventDefault = function(event) {
-    if (event !== undefined) {
-      if (event.preventDefault) {
-        event.preventDefault();
-      } else {
-        event.returnValue = false;
+      while (isAlphaNumeric(c)) {
+        token += c;
+        next();
+      }
+      if (token == 'false') {
+        token = false;   // convert to boolean
+      }
+      else if (token == 'true') {
+        token = true;   // convert to boolean
       }
+      else if (!isNaN(Number(token))) {
+        token = Number(token); // convert to number
+      }
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
     }
-  };
 
-
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className += " active";
+    // check for a string enclosed by double quotes
+    if (c == '"') {
+      next();
+      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+        token += c;
+        if (c == '"') { // skip the escape character
+          next();
+        }
+        next();
+      }
+      if (c != '"') {
+        throw newSyntaxError('End of string " expected');
+      }
+      next();
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
     }
-  };
 
+    // something unknown is found, wrong characters, a syntax error
+    tokenType = TOKENTYPE.UNKNOWN;
+    while (c != '') {
+      token += c;
+      next();
+    }
+    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+  }
 
   /**
-   * move the screen down
-   * @private
+   * Parse a graph.
+   * @returns {Object} graph
    */
-  exports._moveDown = function(event) {
-    this.yIncrement = -this.constants.keyboard.speed.y;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['down'].className += " active";
-    }
-  };
+  function parseGraph() {
+    var graph = {};
 
+    first();
+    getToken();
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className += " active";
+    // optional strict keyword
+    if (token == 'strict') {
+      graph.strict = true;
+      getToken();
     }
-  };
-
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['right'].className += " active";
+    // graph or digraph keyword
+    if (token == 'graph' || token == 'digraph') {
+      graph.type = token;
+      getToken();
     }
-  };
 
+    // optional graph id
+    if (tokenType == TOKENTYPE.IDENTIFIER) {
+      graph.id = token;
+      getToken();
+    }
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className += " active";
+    // open angle bracket
+    if (token != '{') {
+      throw newSyntaxError('Angle bracket { expected');
     }
-  };
+    getToken();
 
+    // statements
+    parseStatements(graph);
 
-  /**
-   * Zoom out
-   * @private
-   */
-  exports._zoomOut = function() {
-    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomOut'].className += " active";
+    // close angle bracket
+    if (token != '}') {
+      throw newSyntaxError('Angle bracket } expected');
     }
-  };
-
+    getToken();
 
-  /**
-   * Stop zooming and unhighlight the zoom controls
-   * @private
-   */
-  exports._stopZoom = function() {
-    this.zoomIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
-      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
+    // end of file
+    if (token !== '') {
+      throw newSyntaxError('End of file expected');
     }
-  };
+    getToken();
+
+    // remove temporary default properties
+    delete graph.node;
+    delete graph.edge;
+    delete graph.graph;
 
+    return graph;
+  }
 
   /**
-   * Stop moving in the Y direction and unHighlight the up and down
-   * @private
+   * Parse a list with statements.
+   * @param {Object} graph
    */
-  exports._yStopMoving = function() {
-    this.yIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
-      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
+  function parseStatements (graph) {
+    while (token !== '' && token != '}') {
+      parseStatement(graph);
+      if (token == ';') {
+        getToken();
+      }
     }
-  };
-
+  }
 
   /**
-   * Stop moving in the X direction and unHighlight left and right.
-   * @private
+   * Parse a single statement. Can be a an attribute statement, node
+   * statement, a series of node statements and edge statements, or a
+   * parameter.
+   * @param {Object} graph
    */
-  exports._xStopMoving = function() {
-    this.xIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
-      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
+  function parseStatement(graph) {
+    // parse subgraph
+    var subgraph = parseSubgraph(graph);
+    if (subgraph) {
+      // edge statements
+      parseEdge(graph, subgraph);
+
+      return;
     }
-  };
 
+    // parse an attribute statement
+    var attr = parseAttributeStatement(graph);
+    if (attr) {
+      return;
+    }
 
-/***/ },
-/* 47 */
-/***/ function(module, exports, __webpack_require__) {
+    // parse node
+    if (tokenType != TOKENTYPE.IDENTIFIER) {
+      throw newSyntaxError('Identifier expected');
+    }
+    var id = token; // id can be a string or a number
+    getToken();
 
-  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;
-        }
+    if (token == '=') {
+      // id statement
+      getToken();
+      if (tokenType != TOKENTYPE.IDENTIFIER) {
+        throw newSyntaxError('Identifier expected');
       }
+      graph[id] = token;
+      getToken();
+      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
     }
-  };
+    else {
+      parseNodeStatement(graph, id);
+    }
+  }
 
   /**
-   * This is the main function to layout the nodes in a hierarchical way.
-   * It checks if the node details are supplied correctly
-   *
-   * @private
+   * Parse a subgraph
+   * @param {Object} graph    parent graph object
+   * @return {Object | null} subgraph
    */
-  exports._setupHierarchicalLayout = function() {
-    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
-        this.constants.hierarchicalLayout.levelSeparation *= -1;
-      }
-      else {
-        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
-      }
+  function parseSubgraph (graph) {
+    var subgraph = null;
 
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
-        }
-      }
-      // 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;
+    // optional subgraph keyword
+    if (token == 'subgraph') {
+      subgraph = {};
+      subgraph.type = 'subgraph';
+      getToken();
 
-      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;
-          }
-        }
+      // optional graph id
+      if (tokenType == TOKENTYPE.IDENTIFIER) {
+        subgraph.id = token;
+        getToken();
       }
+    }
 
-      // if the user defined some levels but not all, alert and run without hierarchical layout
-      if (undefinedLevel == true && definedLevel == true) {
-        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-        this.zoomExtent(true,this.constants.clustering.enabled);
-        if (!this.constants.clustering.enabled) {
-          this.start();
-        }
+    // open angle bracket
+    if (token == '{') {
+      getToken();
+
+      if (!subgraph) {
+        subgraph = {};
       }
-      else {
-        // setup the system to use hierarchical method.
-        this._changeConstants();
+      subgraph.parent = graph;
+      subgraph.node = graph.node;
+      subgraph.edge = graph.edge;
+      subgraph.graph = graph.graph;
 
-        // define levels if undefined by the users. Based on hubsize
-        if (undefinedLevel == true) {
-          this._determineLevels(hubsize);
-        }
-        // check the distribution of the nodes per level.
-        var distribution = this._getDistribution();
+      // statements
+      parseStatements(subgraph);
 
-        // place the nodes on the canvas. This also stablilizes the system.
-        this._placeNodesByHierarchy(distribution);
+      // close angle bracket
+      if (token != '}') {
+        throw newSyntaxError('Angle bracket } expected');
+      }
+      getToken();
 
-        // start the simulation.
-        this.start();
+      // remove temporary default properties
+      delete subgraph.node;
+      delete subgraph.edge;
+      delete subgraph.graph;
+      delete subgraph.parent;
+
+      // register at the parent graph
+      if (!graph.subgraphs) {
+        graph.subgraphs = [];
       }
+      graph.subgraphs.push(subgraph);
     }
-  };
 
+    return subgraph;
+  }
 
   /**
-   * This function places the nodes on the canvas based on the hierarchial distribution.
-   *
-   * @param {Object} distribution | obtained by the function this._getDistribution()
-   * @private
+   * parse an attribute statement like "node [shape=circle fontSize=16]".
+   * Available keywords are 'node', 'edge', 'graph'.
+   * The previous list with default attributes will be replaced
+   * @param {Object} graph
+   * @returns {String | null} keyword Returns the name of the parsed attribute
+   *                                  (node, edge, graph), or null if nothing
+   *                                  is parsed.
    */
-  exports._placeNodesByHierarchy = function(distribution) {
-    var nodeId, node;
+  function parseAttributeStatement (graph) {
+    // attribute statements
+    if (token == 'node') {
+      getToken();
 
-    // start placing all the level 0 nodes first. Then recursively position their branches.
-    for (nodeId in distribution[0].nodes) {
-      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
-        node = distribution[0].nodes[nodeId];
-        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-          if (node.xFixed) {
-            node.x = distribution[0].minPos;
-            node.xFixed = false;
+      // node attributes
+      graph.node = parseAttributeList();
+      return 'node';
+    }
+    else if (token == 'edge') {
+      getToken();
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        else {
-          if (node.yFixed) {
-            node.y = distribution[0].minPos;
-            node.yFixed = false;
+      // edge attributes
+      graph.edge = parseAttributeList();
+      return 'edge';
+    }
+    else if (token == 'graph') {
+      getToken();
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
-      }
+      // graph attributes
+      graph.graph = parseAttributeList();
+      return 'graph';
     }
 
-    // stabilize the system after positioning. This function calls zoomExtent.
-    this._stabilize();
-  };
+    return null;
+  }
+
+  /**
+   * parse a node statement
+   * @param {Object} graph
+   * @param {String | Number} id
+   */
+  function parseNodeStatement(graph, id) {
+    // node statement
+    var node = {
+      id: id
+    };
+    var attr = parseAttributeList();
+    if (attr) {
+      node.attr = attr;
+    }
+    addNode(graph, node);
 
+    // edge statements
+    parseEdge(graph, id);
+  }
 
   /**
-   * This function get the distribution of levels based on hubsize
-   *
-   * @returns {Object}
-   * @private
+   * Parse an edge or a series of edges
+   * @param {Object} graph
+   * @param {String | Number} from        Id of the from node
    */
-  exports._getDistribution = function() {
-    var distribution = {};
-    var nodeId, node, level;
+  function parseEdge(graph, from) {
+    while (token == '->' || token == '--') {
+      var to;
+      var type = token;
+      getToken();
 
-    // 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.hasOwnProperty(node.level)) {
-          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
-        }
-        distribution[node.level].amount += 1;
-        distribution[node.level].nodes[node.id] = node;
+      var subgraph = parseSubgraph(graph);
+      if (subgraph) {
+        to = subgraph;
       }
-    }
-
-    // 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;
+      else {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Identifier or subgraph expected');
         }
+        to = token;
+        addNode(graph, {
+          id: to
+        });
+        getToken();
       }
-    }
 
-    // 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);
-      }
-    }
+      // parse edge attributes
+      var attr = parseAttributeList();
 
-    return distribution;
-  };
+      // create edge
+      var edge = createEdge(graph, from, to, type, attr);
+      addEdge(graph, edge);
 
+      from = to;
+    }
+  }
 
   /**
-   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
-   *
-   * @param hubsize
-   * @private
+   * Parse a set with attributes,
+   * for example [label="1.000", shape=solid]
+   * @return {Object | null} attr
    */
-  exports._determineLevels = function(hubsize) {
-    var nodeId, node;
+  function parseAttributeList() {
+    var attr = null;
 
-    // determine hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.edges.length == hubsize) {
-          node.level = 0;
+    while (token == '[') {
+      getToken();
+      attr = {};
+      while (token !== '' && token != ']') {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute name expected');
         }
-      }
-    }
+        var name = token;
 
-    // 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);
+        getToken();
+        if (token != '=') {
+          throw newSyntaxError('Equal sign = expected');
+        }
+        getToken();
+
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute value expected');
+        }
+        var value = token;
+        setValue(attr, name, value); // name can be a path
+
+        getToken();
+        if (token ==',') {
+          getToken();
         }
       }
+
+      if (token != ']') {
+        throw newSyntaxError('Bracket ] expected');
+      }
+      getToken();
     }
-  };
 
+    return attr;
+  }
 
   /**
-   * 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
+   * Create a syntax error with extra information on current token and index.
+   * @param {String} message
+   * @returns {SyntaxError} err
    */
-  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();
-  };
+  function newSyntaxError(message) {
+    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+  }
 
+  /**
+   * Chop off text after a maximum length
+   * @param {String} text
+   * @param {Number} maxLength
+   * @returns {String}
+   */
+  function chop (text, maxLength) {
+    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+  }
 
   /**
-   * 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
+   * Execute a function fn for each pair of elements in two arrays
+   * @param {Array | *} array1
+   * @param {Array | *} array2
+   * @param {function} fn
    */
-  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;
+  function forEach2(array1, array2, fn) {
+    if (array1 instanceof Array) {
+      array1.forEach(function (elem1) {
+        if (array2 instanceof Array) {
+          array2.forEach(function (elem2)  {
+            fn(elem1, elem2);
+          });
+        }
+        else {
+          fn(elem1, array2);
+        }
+      });
+    }
+    else {
+      if (array2 instanceof Array) {
+        array2.forEach(function (elem2)  {
+          fn(array1, elem2);
+        });
       }
       else {
-        childNode = edges[i].to;
+        fn(array1, array2);
       }
+    }
+  }
 
-      // 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;
+  /**
+   * Convert a string containing a graph in DOT language into a map containing
+   * with nodes and edges in the format of graph.
+   * @param {String} data         Text containing a graph in DOT-notation
+   * @return {Object} graphData
+   */
+  function DOTToGraph (data) {
+    // parse the DOT file
+    var dotData = parseDOT(data);
+    var graphData = {
+      nodes: [],
+      edges: [],
+      options: {}
+    };
+
+    // copy the nodes
+    if (dotData.nodes) {
+      dotData.nodes.forEach(function (dotNode) {
+        var graphNode = {
+          id: dotNode.id,
+          label: String(dotNode.label || dotNode.id)
+        };
+        merge(graphNode, dotNode.attr);
+        if (graphNode.image) {
+          graphNode.shape = 'image';
         }
+        graphData.nodes.push(graphNode);
+      });
+    }
+
+    // copy the edges
+    if (dotData.edges) {
+      /**
+       * Convert an edge in DOT format to an edge with VisGraph format
+       * @param {Object} dotEdge
+       * @returns {Object} graphEdge
+       */
+      function convertEdge(dotEdge) {
+        var graphEdge = {
+          from: dotEdge.from,
+          to: dotEdge.to
+        };
+        merge(graphEdge, dotEdge.attr);
+        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+        return graphEdge;
       }
-      else {
-        if (childNode.yFixed && childNode.level > parentLevel) {
-          childNode.yFixed = false;
-          childNode.y = distribution[childNode.level].minPos;
-          nodeMoved = true;
+
+      dotData.edges.forEach(function (dotEdge) {
+        var from, to;
+        if (dotEdge.from instanceof Object) {
+          from = dotEdge.from.nodes;
+        }
+        else {
+          from = {
+            id: dotEdge.from
+          }
         }
-      }
 
-      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);
+        if (dotEdge.to instanceof Object) {
+          to = dotEdge.to.nodes;
         }
-      }
+        else {
+          to = {
+            id: dotEdge.to
+          }
+        }
+
+        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+          dotEdge.from.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
+
+        forEach2(from, to, function (from, to) {
+          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+          var graphEdge = convertEdge(subEdge);
+          graphData.edges.push(graphEdge);
+        });
+
+        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+          dotEdge.to.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
+      });
     }
-  };
 
+    // copy the options
+    if (dotData.attr) {
+      graphData.options = dotData.attr;
+    }
+
+    return graphData;
+  }
+
+  // exports
+  exports.parseDOT = parseDOT;
+  exports.DOTToGraph = DOTToGraph;
+
+
+/***/ },
+/* 40 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
 
   /**
-   * 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
+   * @class Groups
+   * This class can store groups and properties specific for groups.
    */
-  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 (edges.length > 1) {
-          this._setLevel(level+1, childNode.edges, childNode.id);
+  function Groups() {
+    this.clear();
+    this.defaultIndex = 0;
+  }
+
+
+  /**
+   * default constants for group colors
+   */
+  Groups.DEFAULT = [
+    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
+  ];
+
+
+  /**
+   * Clear all groups
+   */
+  Groups.prototype.clear = function () {
+    this.groups = {};
+    this.groups.length = function()
+    {
+      var i = 0;
+      for ( var p in this ) {
+        if (this.hasOwnProperty(p)) {
+          i++;
         }
       }
+      return i;
     }
   };
 
 
   /**
-   * Unfix nodes
-   *
-   * @private
+   * get group properties of a groupname. If groupname is not found, a new group
+   * is added.
+   * @param {*} groupname        Can be a number, string, Date, etc.
+   * @return {Object} group      The created group, containing all group properties
    */
-  exports._restoreNodes = function() {
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        this.nodes[nodeId].xFixed = false;
-        this.nodes[nodeId].yFixed = false;
-      }
+  Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
+
+    if (group == undefined) {
+      // create new group
+      var index = this.defaultIndex % Groups.DEFAULT.length;
+      this.defaultIndex++;
+      group = {};
+      group.color = Groups.DEFAULT[index];
+      this.groups[groupname] = group;
+    }
+
+    return group;
+  };
+
+  /**
+   * Add a custom group style
+   * @param {String} groupname
+   * @param {Object} style       An object containing borderColor,
+   *                             backgroundColor, etc.
+   * @return {Object} group      The created group object
+   */
+  Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    if (style.color) {
+      style.color = util.parseColor(style.color);
     }
+    return style;
   };
 
+  module.exports = Groups;
+
 
 /***/ },
-/* 48 */
+/* 41 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Copyright 2012 Craig Campbell
-   *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   * http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Mousetrap is a simple keyboard shortcut library for Javascript with
-   * no external dependencies
-   *
-   * @version 1.1.2
-   * @url craig.is/killing/mice
+   * @class Images
+   * This class loads images and keeps them stored.
    */
+  function Images() {
+    this.images = {};
 
-    /**
-     * mapping of special keycodes to their corresponding keys
-     *
-     * everything in this dictionary cannot use keypress events
-     * so it has to be here to map to the correct keycodes for
-     * keyup/keydown events
-     *
-     * @type {Object}
-     */
-    var _MAP = {
-            8: 'backspace',
-            9: 'tab',
-            13: 'enter',
-            16: 'shift',
-            17: 'ctrl',
-            18: 'alt',
-            20: 'capslock',
-            27: 'esc',
-            32: 'space',
-            33: 'pageup',
-            34: 'pagedown',
-            35: 'end',
-            36: 'home',
-            37: 'left',
-            38: 'up',
-            39: 'right',
-            40: 'down',
-            45: 'ins',
-            46: 'del',
-            91: 'meta',
-            93: 'meta',
-            224: 'meta'
-        },
-
-        /**
-         * mapping for special characters so they can support
-         *
-         * this dictionary is only used incase you want to bind a
-         * keyup or keydown event to one of these keys
-         *
-         * @type {Object}
-         */
-        _KEYCODE_MAP = {
-            106: '*',
-            107: '+',
-            109: '-',
-            110: '.',
-            111 : '/',
-            186: ';',
-            187: '=',
-            188: ',',
-            189: '-',
-            190: '.',
-            191: '/',
-            192: '`',
-            219: '[',
-            220: '\\',
-            221: ']',
-            222: '\''
-        },
+    this.callback = undefined;
+  }
 
-        /**
-         * this is a mapping of keys that require shift on a US keypad
-         * back to the non shift equivelents
-         *
-         * this is so you can use keyup events with these keys
-         *
-         * note that this will only work reliably on US keyboards
-         *
-         * @type {Object}
-         */
-        _SHIFT_MAP = {
-            '~': '`',
-            '!': '1',
-            '@': '2',
-            '#': '3',
-            '$': '4',
-            '%': '5',
-            '^': '6',
-            '&': '7',
-            '*': '8',
-            '(': '9',
-            ')': '0',
-            '_': '-',
-            '+': '=',
-            ':': ';',
-            '\"': '\'',
-            '<': ',',
-            '>': '.',
-            '?': '/',
-            '|': '\\'
-        },
+  /**
+   * Set an onload callback function. This will be called each time an image
+   * is loaded
+   * @param {function} callback
+   */
+  Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
+  };
 
-        /**
-         * this is a list of special strings you can use to map
-         * to modifier keys when you specify your keyboard shortcuts
-         *
-         * @type {Object}
-         */
-        _SPECIAL_ALIASES = {
-            'option': 'alt',
-            'command': 'meta',
-            'return': 'enter',
-            'escape': 'esc'
-        },
+  /**
+   *
+   * @param {string} url          Url of the image
+   * @return {Image} img          The image object
+   */
+  Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+      // create the image
+      var images = this;
+      img = new Image();
+      this.images[url] = img;
+      img.onload = function() {
+        if (images.callback) {
+          images.callback(this);
+        }
+      };
+      img.src = url;
+    }
 
-        /**
-         * variable to store the flipped version of _MAP from above
-         * needed to check if we should use keypress or not when no action
-         * is specified
-         *
-         * @type {Object|undefined}
-         */
-        _REVERSE_MAP,
+    return img;
+  };
 
-        /**
-         * a list of all the callbacks setup via Mousetrap.bind()
-         *
-         * @type {Object}
-         */
-        _callbacks = {},
+  module.exports = Images;
 
-        /**
-         * direct map of string combinations to callbacks used for trigger()
-         *
-         * @type {Object}
-         */
-        _direct_map = {},
 
-        /**
-         * keeps track of what level each sequence is at since multiple
-         * sequences can start out with the same sequence
-         *
-         * @type {Object}
-         */
-        _sequence_levels = {},
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
 
-        /**
-         * variable to store the setTimeout call
-         *
-         * @type {null|number}
-         */
-        _reset_timer,
+  var util = __webpack_require__(1);
 
-        /**
-         * temporary state where we will ignore the next keyup
-         *
-         * @type {boolean|string}
-         */
-        _ignore_next_keyup = false,
+  /**
+   * @class Node
+   * A node. A node can be connected to other nodes via one or multiple edges.
+   * @param {object} properties An object containing properties for the node. All
+   *                            properties are optional, except for the id.
+   *                              {number} id     Id of the node. Required
+   *                              {string} label  Text label for the node
+   *                              {number} x      Horizontal position of the node
+   *                              {number} y      Vertical position of the node
+   *                              {string} shape  Node shape, available:
+   *                                              "database", "circle", "ellipse",
+   *                                              "box", "image", "text", "dot",
+   *                                              "star", "triangle", "triangleDown",
+   *                                              "square"
+   *                              {string} image  An image url
+   *                              {string} title  An title text, can be HTML
+   *                              {anytype} group A group name or number
+   * @param {Network.Images} imagelist    A list with images. Only needed
+   *                                            when the node has an image
+   * @param {Network.Groups} grouplist    A list with groups. Needed for
+   *                                            retrieving group properties
+   * @param {Object}               constants    An object with default values for
+   *                                            example for the color
+   *
+   */
+  function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
+    this.hover = false;
 
-        /**
-         * are we currently inside of a sequence?
-         * type of action ("keyup" or "keydown" or "keypress") or false
-         *
-         * @type {boolean|string}
-         */
-        _inside_sequence = false;
+    this.edges = []; // all edges connected to this node
+    this.dynamicEdges = [];
+    this.reroutedEdges = {};
 
-    /**
-     * loop through the f keys, f1 to f19 and add them to the map
-     * programatically
-     */
-    for (var i = 1; i < 20; ++i) {
-        _MAP[111 + i] = 'f' + i;
-    }
+    this.group = constants.nodes.group;
+    this.fontSize = Number(constants.nodes.fontSize);
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
+    this.fontDrawThreshold = 3;
 
-    /**
-     * loop through to map numbers on the numeric keypad
-     */
-    for (i = 0; i <= 9; ++i) {
-        _MAP[i + 96] = i;
-    }
+    this.color = constants.nodes.color;
 
-    /**
-     * cross browser add event method
-     *
-     * @param {Element|HTMLDocument} object
-     * @param {string} type
-     * @param {Function} callback
-     * @returns void
-     */
-    function _addEvent(object, type, callback) {
-        if (object.addEventListener) {
-            return object.addEventListener(type, callback, false);
-        }
+    // set defaults for the properties
+    this.id = undefined;
+    this.shape = constants.nodes.shape;
+    this.image = constants.nodes.image;
+    this.x = null;
+    this.y = null;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.horizontalAlignLeft = true; // these are for the navigation controls
+    this.verticalAlignTop    = true; // these are for the navigation controls
+    this.radius = constants.nodes.radius;
+    this.baseRadiusValue = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+    this.level = -1;
+    this.preassignedLevel = false;
 
-        object.attachEvent('on' + type, callback);
-    }
 
-    /**
-     * takes the event and returns the key character
-     *
-     * @param {Event} e
-     * @return {string}
-     */
-    function _characterFromEvent(e) {
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
 
-        // for keypress events we should return the character as is
-        if (e.type == 'keypress') {
-            return String.fromCharCode(e.which);
-        }
+    // physics properties
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = constants.physics.damping;
+    this.mass = 1;  // kg
+    this.fixedData = {x:null,y:null};
 
-        // for non keypress events the special maps are needed
-        if (_MAP[e.which]) {
-            return _MAP[e.which];
-        }
+    this.setProperties(properties, constants);
 
-        if (_KEYCODE_MAP[e.which]) {
-            return _KEYCODE_MAP[e.which];
-        }
+    // creating the variables for clustering
+    this.resetCluster();
+    this.dynamicEdgesLength = 0;
+    this.clusterSession = 0;
+    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
+    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
+    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
+    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
+    this.growthIndicator = 0;
 
-        // if it is not in the special map
-        return String.fromCharCode(e.which).toLowerCase();
-    }
+    // variables to tell the node about the network.
+    this.networkScaleInv = 1;
+    this.networkScale = 1;
+    this.canvasTopLeft = {"x": -300, "y": -300};
+    this.canvasBottomRight = {"x":  300, "y":  300};
+    this.parentEdgeId = null;
+  }
 
-    /**
-     * should we stop this event before firing off callbacks
-     *
-     * @param {Event} e
-     * @return {boolean}
-     */
-    function _stop(e) {
-        var element = e.target || e.srcElement,
-            tag_name = element.tagName;
+  /**
+   * (re)setting the clustering variables and objects
+   */
+  Node.prototype.resetCluster = function() {
+    // clustering variables
+    this.formationScale = undefined; // this is used to determine when to open the cluster
+    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
+    this.containedNodes = {};
+    this.containedEdges = {};
+    this.clusterSessions = [];
+  };
 
-        // if the element has the class "mousetrap" then no need to stop
-        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
-            return false;
-        }
+  /**
+   * Attach a edge to the node
+   * @param {Edge} edge
+   */
+  Node.prototype.attachEdge = function(edge) {
+    if (this.edges.indexOf(edge) == -1) {
+      this.edges.push(edge);
+    }
+    if (this.dynamicEdges.indexOf(edge) == -1) {
+      this.dynamicEdges.push(edge);
+    }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
+  };
 
-        // stop for input, select, and textarea
-        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
+  /**
+   * Detach a edge from the node
+   * @param {Edge} edge
+   */
+  Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+      this.edges.splice(index, 1);
+      this.dynamicEdges.splice(index, 1);
     }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
+  };
 
-    /**
-     * checks if two arrays are equal
-     *
-     * @param {Array} modifiers1
-     * @param {Array} modifiers2
-     * @returns {boolean}
-     */
-    function _modifiersMatch(modifiers1, modifiers2) {
-        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
+
+  /**
+   * Set or overwrite properties for the node
+   * @param {Object} properties an object with properties
+   * @param {Object} constants  and object with default, global properties
+   */
+  Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
     }
+    this.originalLabel = undefined;
+    // basic properties
+    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.group !== undefined)     {this.group = properties.group;}
+    if (properties.x !== undefined)         {this.x = properties.x;}
+    if (properties.y !== undefined)         {this.y = properties.y;}
+    if (properties.value !== undefined)     {this.value = properties.value;}
+    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
-    /**
-     * resets all sequence counters except for the ones passed in
-     *
-     * @param {Object} do_not_reset
-     * @returns void
-     */
-    function _resetSequences(do_not_reset) {
-        do_not_reset = do_not_reset || {};
 
-        var active_sequences = false,
-            key;
+    // physics
+    if (properties.mass !== undefined)                {this.mass = properties.mass;}
 
-        for (key in _sequence_levels) {
-            if (do_not_reset[key]) {
-                active_sequences = true;
-                continue;
-            }
-            _sequence_levels[key] = 0;
-        }
+    // navigation controls properties
+    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
 
-        if (!active_sequences) {
-            _inside_sequence = false;
-        }
+    if (this.id === undefined) {
+      throw "Node must have an id";
     }
 
-    /**
-     * finds all callbacks that match based on the keycode, modifiers,
-     * and action
-     *
-     * @param {string} character
-     * @param {Array} modifiers
-     * @param {string} action
-     * @param {boolean=} remove - should we remove any matches
-     * @param {string=} combination
-     * @returns {Array}
-     */
-    function _getMatches(character, modifiers, action, remove, combination) {
-        var i,
-            callback,
-            matches = [];
-
-        // if there are no events related to this keycode
-        if (!_callbacks[character]) {
-            return [];
+    // copy group properties
+    if (this.group) {
+      var groupObj = this.grouplist.get(this.group);
+      for (var prop in groupObj) {
+        if (groupObj.hasOwnProperty(prop)) {
+          this[prop] = groupObj[prop];
         }
+      }
+    }
 
-        // if a modifier key is coming up on its own we should allow it
-        if (action == 'keyup' && _isModifier(character)) {
-            modifiers = [character];
-        }
+    // individual shape properties
+    if (properties.shape !== undefined)          {this.shape = properties.shape;}
+    if (properties.image !== undefined)          {this.image = properties.image;}
+    if (properties.radius !== undefined)         {this.radius = properties.radius;}
+    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
-        // loop through all callbacks for the key that was pressed
-        // and see if any of them match
-        for (i = 0; i < _callbacks[character].length; ++i) {
-            callback = _callbacks[character][i];
+    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
 
-            // if this is a sequence but it is not at the right level
-            // then move onto the next match
-            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
-                continue;
-            }
+    if (this.image !== undefined && this.image != "") {
+      if (this.imagelist) {
+        this.imageObj = this.imagelist.load(this.image);
+      }
+      else {
+        throw "No imagelist provided";
+      }
+    }
 
-            // if the action we are looking for doesn't match the action we got
-            // then we should keep going
-            if (action != callback.action) {
-                continue;
-            }
+    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
+    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
-            // if this is a keypress event that means that we need to only
-            // look at the character, otherwise check the modifiers as
-            // well
-            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
+    if (this.shape == 'image') {
+      this.radiusMin = constants.nodes.widthMin;
+      this.radiusMax = constants.nodes.widthMax;
+    }
 
-                // remove is used so if you change your mind and call bind a
-                // second time with a new function the first one is overwritten
-                if (remove && callback.combo == combination) {
-                    _callbacks[character].splice(i, 1);
-                }
+    // choose draw method depending on the shape
+    switch (this.shape) {
+      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
+      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+      // TODO: add diamond shape
+      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+    }
+    // reset the size of the node, this can be changed
+    this._reset();
+  };
 
-                matches.push(callback);
-            }
-        }
+  /**
+   * select this node
+   */
+  Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
+  };
 
-        return matches;
-    }
+  /**
+   * unselect this node
+   */
+  Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
+  };
 
-    /**
-     * takes a key event and figures out what the modifiers are
-     *
-     * @param {Event} e
-     * @returns {Array}
-     */
-    function _eventModifiers(e) {
-        var modifiers = [];
 
-        if (e.shiftKey) {
-            modifiers.push('shift');
-        }
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   */
+  Node.prototype.clearSizeCache = function() {
+    this._reset();
+  };
 
-        if (e.altKey) {
-            modifiers.push('alt');
-        }
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   * @private
+   */
+  Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
+  };
 
-        if (e.ctrlKey) {
-            modifiers.push('ctrl');
-        }
+  /**
+   * get the title of this node.
+   * @return {string} title    The title of the node, or undefined when no title
+   *                           has been set.
+   */
+  Node.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-        if (e.metaKey) {
-            modifiers.push('meta');
-        }
+  /**
+   * Calculate the distance to the border of the Node
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Number} angle        Angle in radians
+   * @returns {number} distance   Distance to the border in pixels
+   */
+  Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
 
-        return modifiers;
+    if (!this.width) {
+      this.resize(ctx);
     }
 
-    /**
-     * actually calls the callback function
-     *
-     * if your callback function returns false this will use the jquery
-     * convention - prevent default and stop propogation on the event
-     *
-     * @param {Function} callback
-     * @param {Event} e
-     * @returns void
-     */
-    function _fireCallback(callback, e) {
-        if (callback(e) === false) {
-            if (e.preventDefault) {
-                e.preventDefault();
-            }
-
-            if (e.stopPropagation) {
-                e.stopPropagation();
-            }
+    switch (this.shape) {
+      case 'circle':
+      case 'dot':
+        return this.radius + borderWidth;
 
-            e.returnValue = false;
-            e.cancelBubble = true;
-        }
-    }
+      case 'ellipse':
+        var a = this.width / 2;
+        var b = this.height / 2;
+        var w = (Math.sin(angle) * a);
+        var h = (Math.cos(angle) * b);
+        return a * b / Math.sqrt(w * w + h * h);
 
-    /**
-     * handles a character key event
-     *
-     * @param {string} character
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleCharacter(character, e) {
+      // TODO: implement distanceToBorder for database
+      // TODO: implement distanceToBorder for triangle
+      // TODO: implement distanceToBorder for triangleDown
 
-        // if this event should not happen stop here
-        if (_stop(e)) {
-            return;
+      case 'box':
+      case 'image':
+      case 'text':
+      default:
+        if (this.width) {
+          return Math.min(
+              Math.abs(this.width / 2 / Math.cos(angle)),
+              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+          // TODO: reckon with border radius too in case of box
+        }
+        else {
+          return 0;
         }
 
-        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
-            i,
-            do_not_reset = {},
-            processed_sequence_callback = false;
+    }
+    // TODO: implement calculation of distance to border for all shapes
+  };
 
-        // loop through matching callbacks for this key event
-        for (i = 0; i < callbacks.length; ++i) {
+  /**
+   * Set forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
+   */
+  Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
+  };
 
-            // fire for all sequence callbacks
-            // this is because if for example you have multiple sequences
-            // bound such as "g i" and "g t" they both need to fire the
-            // callback for matching g cause otherwise you can only ever
-            // match the first one
-            if (callbacks[i].seq) {
-                processed_sequence_callback = true;
+  /**
+   * Add forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
+   * @private
+   */
+  Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
+  };
 
-                // keep a list of which sequences were matches for later
-                do_not_reset[callbacks[i].seq] = 1;
-                _fireCallback(callbacks[i].callback, e);
-                continue;
-            }
+  /**
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   */
+  Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.x  += this.vx * interval;          // position
+    }
 
-            // if there were no sequence matches but we are still here
-            // that means this is a regular match so we should fire that
-            if (!processed_sequence_callback && !_inside_sequence) {
-                _fireCallback(callbacks[i].callback, e);
-            }
-        }
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.y  += this.vy * interval;          // position
+    }
+  };
 
-        // if you are inside of a sequence and the key you are pressing
-        // is not a modifier key then we should reset all sequences
-        // that were not matched by this key event
-        if (e.type == _inside_sequence && !_isModifier(character)) {
-            _resetSequences(do_not_reset);
-        }
+
+
+  /**
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   * @param {number} maxVelocity The speed limit imposed on the velocity
+   */
+  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
+      this.x  += this.vx * interval;          // position
+    }
+    else {
+      this.fx = 0;
     }
 
-    /**
-     * handles a keydown event
-     *
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleKey(e) {
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
+      this.y  += this.vy * interval;          // position
+    }
+    else {
+      this.fy = 0;
+    }
+  };
 
-        // normalize e.which for key events
-        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
-        e.which = typeof e.which == "number" ? e.which : e.keyCode;
+  /**
+   * Check if this node has a fixed x and y position
+   * @return {boolean}      true if fixed, false if not
+   */
+  Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
+  };
 
-        var character = _characterFromEvent(e);
+  /**
+   * Check if this node is moving
+   * @param {number} vmin   the minimum velocity considered as "moving"
+   * @return {boolean}      true if moving, false if it has no velocity
+   */
+  // TODO: replace this method with calculating the kinetic energy
+  Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  };
 
-        // no character found then stop
-        if (!character) {
-            return;
-        }
+  /**
+   * check if this node is selecte
+   * @return {boolean} selected   True if node is selected, else false
+   */
+  Node.prototype.isSelected = function() {
+    return this.selected;
+  };
 
-        if (e.type == 'keyup' && _ignore_next_keyup == character) {
-            _ignore_next_keyup = false;
-            return;
-        }
+  /**
+   * Retrieve the value of the node. Can be undefined
+   * @return {Number} value
+   */
+  Node.prototype.getValue = function() {
+    return this.value;
+  };
 
-        _handleCharacter(character, e);
-    }
+  /**
+   * Calculate the distance from the nodes location to the given location (x,y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Number} value
+   */
+  Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
 
-    /**
-     * determines if the keycode specified is a modifier key or not
-     *
-     * @param {string} key
-     * @returns {boolean}
-     */
-    function _isModifier(key) {
-        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
-    }
 
-    /**
-     * called to set a 1 second timeout on the specified sequence
-     *
-     * this is so after each key press in the sequence you have 1 second
-     * to press the next key before you have to start over
-     *
-     * @returns void
-     */
-    function _resetSequenceTimer() {
-        clearTimeout(_reset_timer);
-        _reset_timer = setTimeout(_resetSequences, 1000);
+  /**
+   * Adjust the value range of the node. The node will adjust it's radius
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
+   */
+  Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+      if (max == min) {
+        this.radius = (this.radiusMin + this.radiusMax) / 2;
+      }
+      else {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
+      }
     }
+    this.baseRadiusValue = this.radius;
+  };
 
-    /**
-     * reverses the map lookup so that we can look for specific keys
-     * to see what can and can't use keypress
-     *
-     * @return {Object}
-     */
-    function _getReverseMap() {
-        if (!_REVERSE_MAP) {
-            _REVERSE_MAP = {};
-            for (var key in _MAP) {
+  /**
+   * Draw this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
+  };
 
-                // pull out the numeric keypad from here cause keypress should
-                // be able to detect the keys from the character
-                if (key > 95 && key < 112) {
-                    continue;
-                }
+  /**
+   * Recalculate the size of this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
+  };
 
-                if (_MAP.hasOwnProperty(key)) {
-                    _REVERSE_MAP[_MAP[key]] = key;
-                }
-            }
-        }
-        return _REVERSE_MAP;
-    }
+  /**
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top, right, bottom
+   * @return {boolean}     True if location is located on node
+   */
+  Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left              < obj.right  &&
+            this.left + this.width > obj.left   &&
+            this.top               < obj.bottom &&
+            this.top + this.height > obj.top);
+  };
 
-    /**
-     * picks the best action based on the key combination
-     *
-     * @param {string} key - character for key
-     * @param {Array} modifiers
-     * @param {string=} action passed in
-     */
-    function _pickBestAction(key, modifiers, action) {
+  Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
 
-        // if no action was picked in we should try to pick the one
-        // that we think would work best for this key
-        if (!action) {
-            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
+    if (!this.width || !this.height) {  // undefined or 0
+      var width, height;
+      if (this.value) {
+        this.radius = this.baseRadiusValue;
+        var scale = this.imageObj.height / this.imageObj.width;
+        if (scale !== undefined) {
+          width = this.radius || this.imageObj.width;
+          height = this.radius * scale || this.imageObj.height;
         }
-
-        // modifier keys don't work as expected with keypress,
-        // switch to keydown
-        if (action == 'keypress' && modifiers.length) {
-            action = 'keydown';
+        else {
+          width = 0;
+          height = 0;
         }
+      }
+      else {
+        width = this.imageObj.width;
+        height = this.imageObj.height;
+      }
+      this.width  = width;
+      this.height = height;
 
-        return action;
+      this.growthIndicator = 0;
+      if (this.width > 0 && this.height > 0) {
+        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
+        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+        this.growthIndicator = this.width - width;
+      }
     }
 
-    /**
-     * binds a key sequence to an event
-     *
-     * @param {string} combo - combo specified in bind call
-     * @param {Array} keys
-     * @param {Function} callback
-     * @param {string=} action
-     * @returns void
-     */
-    function _bindSequence(combo, keys, callback, action) {
+  };
 
-        // start off by adding a sequence level record for this combination
-        // and setting the level to 0
-        _sequence_levels[combo] = 0;
+  Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
 
-        // if there is no action pick the best one for the first key
-        // in the sequence
-        if (!action) {
-            action = _pickBestAction(keys[0], []);
-        }
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
 
-        /**
-         * callback to increase the sequence level for this sequence and reset
-         * all other sequences that were active
-         *
-         * @param {Event} e
-         * @returns void
-         */
-        var _increaseSequence = function(e) {
-                _inside_sequence = action;
-                ++_sequence_levels[combo];
-                _resetSequenceTimer();
-            },
+    var yLabel;
+    if (this.imageObj.width != 0 ) {
+      // draw the shade
+      if (this.clusterSize > 1) {
+        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
+        lineWidth *= this.networkScaleInv;
+        lineWidth = Math.min(0.2 * this.width,lineWidth);
 
-            /**
-             * wraps the specified callback inside of another function in order
-             * to reset all sequence counters as soon as this sequence is done
-             *
-             * @param {Event} e
-             * @returns void
-             */
-            _callbackAndReset = function(e) {
-                _fireCallback(callback, e);
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+      }
 
-                // we should ignore the next key up if the action is key down
-                // or keypress.  this is so if you finish a sequence and
-                // release the key the final key will not trigger a keyup
-                if (action !== 'keyup') {
-                    _ignore_next_keyup = _characterFromEvent(e);
-                }
+      // draw the image
+      ctx.globalAlpha = 1.0;
+      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      yLabel = this.y + this.height / 2;
+    }
+    else {
+      // image still loading... just draw the label for now
+      yLabel = this.y;
+    }
 
-                // weird race condition if a sequence ends with the key
-                // another sequence begins with
-                setTimeout(_resetSequences, 10);
-            },
-            i;
+    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
+  };
 
-        // loop through keys one at a time and bind the appropriate callback
-        // function.  for any key leading up to the final one it should
-        // increase the sequence. after the final, it should reset all sequences
-        for (i = 0; i < keys.length; ++i) {
-            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
-        }
-    }
 
-    /**
-     * binds a single keyboard combination
-     *
-     * @param {string} combination
-     * @param {Function} callback
-     * @param {string=} action
-     * @param {string=} sequence_name - name of sequence if part of sequence
-     * @param {number=} level - what part of the sequence the command is
-     * @returns void
-     */
-    function _bindSingle(combination, callback, action, sequence_name, level) {
+  Node.prototype._resizeBox = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
 
-        // make sure multiple spaces in a row become a single space
-        combination = combination.replace(/\s+/g, ' ');
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
 
-        var sequence = combination.split(' '),
-            i,
-            key,
-            keys,
-            modifiers = [];
+    }
+  };
 
-        // if this pattern is a sequence of keys then run through this method
-        // to reprocess each pattern one key at a time
-        if (sequence.length > 1) {
-            return _bindSequence(combination, sequence, callback, action);
-        }
+  Node.prototype._drawBox = function (ctx) {
+    this._resizeBox(ctx);
 
-        // take the keys from this pattern and figure out what the actual
-        // pattern is all about
-        keys = combination === '+' ? ['+'] : combination.split('+');
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-        for (i = 0; i < keys.length; ++i) {
-            key = keys[i];
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-            // normalize key names
-            if (_SPECIAL_ALIASES[key]) {
-                key = _SPECIAL_ALIASES[key];
-            }
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-            // if this is not a keypress event then we should
-            // be smart about using shift keys
-            // this will only work for US keyboards however
-            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
-                key = _SHIFT_MAP[key];
-                modifiers.push('shift');
-            }
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-            // if this key is a modifier then add it to the list of modifiers
-            if (_isModifier(key)) {
-                modifiers.push(key);
-            }
-        }
+      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-        // depending on what the key combination is
-        // we will try to pick the best event for it
-        action = _pickBestAction(key, modifiers, action);
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
 
-        // make sure to initialize array if this is the first time
-        // a callback is added for this key
-        if (!_callbacks[key]) {
-            _callbacks[key] = [];
-        }
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-        // remove an existing match if there is one
-        _getMatches(key, modifiers, action, !sequence_name, combination);
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-        // add this call back to the array
-        // if it is a sequence put it at the beginning
-        // if not put it at the end
-        //
-        // this is important because the way these are processed expects
-        // the sequence ones to come first
-        _callbacks[key][sequence_name ? 'unshift' : 'push']({
-            callback: callback,
-            modifiers: modifiers,
-            action: action,
-            seq: sequence_name,
-            level: level,
-            combo: combination
-        });
-    }
 
-    /**
-     * binds multiple combinations to the same callback
-     *
-     * @param {Array} combinations
-     * @param {Function} callback
-     * @param {string|undefined} action
-     * @returns void
-     */
-    function _bindMultiple(combinations, callback, action) {
-        for (var i = 0; i < combinations.length; ++i) {
-            _bindSingle(combinations[i], callback, action);
-        }
+  Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var size = textSize.width + 2 * margin;
+      this.width = size;
+      this.height = size;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
+  };
 
-    // start!
-    _addEvent(document, 'keypress', _handleKey);
-    _addEvent(document, 'keydown', _handleKey);
-    _addEvent(document, 'keyup', _handleKey);
+  Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    var mousetrap = {
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-        /**
-         * binds an event to mousetrap
-         *
-         * can be a single key, a combination of keys separated with +,
-         * a comma separated list of keys, an array of keys, or
-         * a sequence of keys separated by spaces
-         *
-         * be sure to list the modifier keys first to make sure that the
-         * correct key ends up getting bound (the last key in the pattern)
-         *
-         * @param {string|Array} keys
-         * @param {Function} callback
-         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
-         * @returns void
-         */
-        bind: function(keys, callback, action) {
-            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
-            _direct_map[keys + ':' + action] = callback;
-            return this;
-        },
-
-        /**
-         * unbinds an event to mousetrap
-         *
-         * the unbinding sets the callback function of the specified key combo
-         * to an empty function and deletes the corresponding key in the
-         * _direct_map dict.
-         *
-         * the keycombo+action has to be exactly the same as
-         * it was defined in the bind method
-         *
-         * TODO: actually remove this from the _callbacks dictionary instead
-         * of binding an empty function
-         *
-         * @param {string|Array} keys
-         * @param {string} action
-         * @returns void
-         */
-        unbind: function(keys, action) {
-            if (_direct_map[keys + ':' + action]) {
-                delete _direct_map[keys + ':' + action];
-                this.bind(keys, function() {}, action);
-            }
-            return this;
-        },
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-        /**
-         * triggers an event that has already been bound
-         *
-         * @param {string} keys
-         * @param {string=} action
-         * @returns void
-         */
-        trigger: function(keys, action) {
-            _direct_map[keys + ':' + action]();
-            return this;
-        },
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-        /**
-         * resets the library back to its initial state.  this is useful
-         * if you want to clear out the current keyboard shortcuts and bind
-         * new ones - for example if you switch to another page
-         *
-         * @returns void
-         */
-        reset: function() {
-            _callbacks = {};
-            _direct_map = {};
-            return this;
-        }
-    };
+      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  module.exports = mousetrap;
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
 
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
 
-/***/ },
-/* 49 */
-/***/ function(module, exports, __webpack_require__) {
+  Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+      this.radius = diameter / 2;
 
-  var util = __webpack_require__(1);
-  var RepulsionMixin = __webpack_require__(52);
-  var HierarchialRepulsionMixin = __webpack_require__(53);
-  var BarnesHutMixin = __webpack_require__(54);
+      this.width = diameter;
+      this.height = diameter;
 
-  /**
-   * 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();
+      // scaling used for clustering
+  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.radius - 0.5*diameter;
+    }
   };
 
+  Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  /**
-   * 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);
-
-      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;
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-      this._loadMixin(BarnesHutMixin);
-    }
-    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(RepulsionMixin);
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-      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;
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-      this._loadMixin(HierarchialRepulsionMixin);
+      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
+      ctx.stroke();
     }
-    else {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
-      this.barnesHutTree = undefined;
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-      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;
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-      this._loadMixin(RepulsionMixin);
-    }
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  /**
-   * 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);
+  Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+      var textSize = this.getTextSize(ctx);
+
+      this.width = textSize.width * 1.5;
+      this.height = textSize.height * 2;
+      if (this.width < this.height) {
+        this.width = this.height;
       }
+      var defaultSize = this.width;
 
-      // we now start the force calculation
-      this._calculateForces();
+        // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - defaultSize;
     }
   };
 
+  Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-  /**
-   * 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
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    this._calculateGravitationalForces();
-    this._calculateNodeForces();
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    if (this.constants.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();
-        }
-      }
+      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
+      ctx.stroke();
     }
-  };
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
-  /**
-   * 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.
-   *
-   * @private
-   */
-  exports._updateCalculationNodes = function () {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this.calculationNodes = {};
-      this.calculationNodeIndices = [];
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-      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);
-          }
-        }
-      }
+  Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+  };
 
-      for (var idx in this.calculationNodes) {
-        if (this.calculationNodes.hasOwnProperty(idx)) {
-          this.calculationNodeIndices.push(idx);
-        }
-      }
-    }
-    else {
-      this.calculationNodes = this.nodes;
-      this.calculationNodeIndices = this.nodeIndices;
-    }
+  Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
   };
 
+  Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
+  };
 
-  /**
-   * 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;
+  Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
+  };
 
-    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);
+  Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+  };
 
-        gravityForce = (distance == 0) ? 0 : (gravity / distance);
-        node.fx = dx * gravityForce;
-        node.fy = dy * gravityForce;
-      }
-      else {
-        node.fx = 0;
-        node.fy = 0;
-      }
+  Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+      this.radius = this.baseRadiusValue;
+      var size = 2 * this.radius;
+      this.width = size;
+      this.height = size;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
   };
 
+  Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
 
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+    var radiusMultiplier = 2;
 
-  /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
-   * @private
-   */
-  exports._calculateSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    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)) {
-            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+    // choose draw method depending on the shape
+    switch (shape) {
+      case 'dot':           radiusMultiplier = 2; break;
+      case 'square':        radiusMultiplier = 2; break;
+      case 'triangle':      radiusMultiplier = 3; break;
+      case 'triangleDown':  radiusMultiplier = 3; break;
+      case 'star':          radiusMultiplier = 4; break;
+    }
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-            edge.from.fx += fx;
-            edge.from.fy += fy;
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-          }
-        }
-      }
+    if (this.label) {
+      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
     }
   };
 
+  Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
 
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+    }
+  };
 
+  Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  /**
-   * 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;
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-    // 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;
 
-              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
+    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = align || "center";
+      ctx.textBaseline = baseline || "middle";
 
-              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+      var lines = text.split('\n');
+      var lineCount = lines.length;
+      var fontSize = (this.fontSize + 4);
+      var yLine = y + (1 - lineCount) / 2 * fontSize;
+      if (labelUnderNode == true) {
+        yLine = y + (1 - lineCount) / (2 * fontSize);
+      }
 
-              // 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);
-            }
-          }
-        }
+      for (var i = 0; i < lineCount; i++) {
+        ctx.fillText(lines[i], x, yLine);
+        yLine += fontSize;
       }
     }
   };
 
 
-  /**
-   * 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;
-
-    dx = (node1.x - node2.x);
-    dy = (node1.y - node2.y);
-    distance = Math.sqrt(dx * dx + dy * dy);
-
-    if (distance == 0) {
-      distance = 0.01;
-    }
+  Node.prototype.getTextSize = function(ctx) {
+    if (this.label !== undefined) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
 
-    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+      var lines = this.label.split('\n'),
+          height = (this.fontSize + 4) * lines.length,
+          width = 0;
 
-    fx = dx * springForce;
-    fy = dy * springForce;
+      for (var i = 0, iMax = lines.length; i < iMax; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width);
+      }
 
-    node1.fx += fx;
-    node1.fy += fy;
-    node2.fx -= fx;
-    node2.fy -= fy;
+      return {"width": width, "height": height};
+    }
+    else {
+      return {"width": 0, "height": 0};
+    }
   };
 
-
   /**
-   * Load the HTML for the physics config and bind it
-   * @private
+   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+   * there is a safety margin of 0.3 * width;
+   *
+   * @returns {boolean}
    */
-  exports._loadPhysicsConfiguration = function () {
-    if (this.physicsConfiguration === undefined) {
-      this.backupConstants = {};
-      util.deepExtend(this.backupConstants,this.constants);
-
-      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);
-
-      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");
-
-      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");
-
-      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");
-
-      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;
-      }
-
-      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
-      var graph_generateOptions = document.getElementById("graph_generateOptions");
-
-      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";
-      }
-
-
-      switchConfigurations.apply(this);
-
-      radioButton1.onchange = switchConfigurations.bind(this);
-      radioButton2.onchange = switchConfigurations.bind(this);
-      radioButton3.onchange = switchConfigurations.bind(this);
+  Node.prototype.inArea = function() {
+    if (this.width !== undefined) {
+    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
+            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
+            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
+            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+    }
+    else {
+      return true;
     }
   };
 
   /**
-   * This overwrites the this.constants.
-   *
-   * @param constantsVariableName
-   * @param value
-   * @private
+   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+   * @returns {boolean}
    */
-  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;
-    }
+  Node.prototype.inView = function() {
+    return (this.x >= this.canvasTopLeft.x    &&
+            this.x < this.canvasBottomRight.x &&
+            this.y >= this.canvasTopLeft.y    &&
+            this.y < this.canvasBottomRight.y);
   };
 
-
   /**
-   * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
+   * This allows the zoom level of the network to influence the rendering
+   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+   *
+   * @param scale
+   * @param canvasTopLeft
+   * @param canvasBottomRight
    */
-  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";}
+  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+    this.canvasTopLeft = canvasTopLeft;
+    this.canvasBottomRight = canvasBottomRight;
+  };
 
-    this._configureSmoothCurves(false);
-  }
 
   /**
-   * this function is used to scramble the nodes
+   * This allows the zoom level of the network to influence the rendering
    *
+   * @param scale
    */
-  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();
-    }
-    else {
-      this.repositionNodes();
-    }
-    this.moving = true;
-    this.start();
-  }
-
-  /**
-   *  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 += '};'
-    }
+  Node.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+  };
 
 
-    this.optionsDiv.innerHTML = options;
-  }
 
   /**
-   * this is used to switch between barnesHut, repulsion and hierarchical.
-   *
+   * set the velocity at 0. Is called when this node is contained in another during clustering
    */
-  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();
-  }
+  Node.prototype.clearVelocity = function() {
+    this.vx = 0;
+    this.vy = 0;
+  };
 
 
   /**
-   * this generates the ranges depending on the iniital values.
+   * Basic preservation of (kinectic) energy
    *
-   * @param id
-   * @param map
-   * @param constantsVariableName
+   * @param massBeforeClustering
    */
-  function showValueOfRange (id,map,constantsVariableName) {
-    var valueId = id + "_value";
-    var rangeValue = document.getElementById(id).value;
-
-    if (map instanceof Array) {
-      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));
-    }
+  Node.prototype.updateVelocity = function(massBeforeClustering) {
+    var energyBefore = this.vx * this.vx * massBeforeClustering;
+    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vx = Math.sqrt(energyBefore/this.mass);
+    energyBefore = this.vy * this.vy * massBeforeClustering;
+    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vy = Math.sqrt(energyBefore/this.mass);
+  };
 
-    if (constantsVariableName == "hierarchicalLayout_direction" ||
-      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
-      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
-      this._setupHierarchicalLayout();
-    }
-    this.moving = true;
-    this.start();
-  }
+  module.exports = Node;
 
 
 /***/ },
-/* 50 */
+/* 43 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /*! Hammer.JS - v1.0.5 - 2013-04-07
-   * http://eightmedia.github.com/hammer.js
-   *
-   * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
-   * Licensed under the MIT license */
-
-  (function(window, undefined) {
-      'use strict';
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(42);
 
   /**
-   * Hammer
-   * use this to create instances
-   * @param   {HTMLElement}   element
-   * @param   {Object}        options
-   * @returns {Hammer.Instance}
-   * @constructor
+   * @class Edge
+   *
+   * A edge connects two nodes
+   * @param {Object} properties     Object with properties. Must contain
+   *                                At least properties from and to.
+   *                                Available properties: from (number),
+   *                                to (number), label (string, color (string),
+   *                                width (number), style (string),
+   *                                length (number), title (string)
+   * @param {Network} network       A Network object, used to find and edge to
+   *                                nodes.
+   * @param {Object} constants      An object with default values for
+   *                                example for the color
    */
-  var Hammer = function(element, options) {
-      return new Hammer.Instance(element, options || {});
-  };
-
-  // default settings
-  Hammer.defaults = {
-      // add styles and attributes to the element to prevent the browser from doing
-      // its native behavior. this doesnt prevent the scrolling, but cancels
-      // the contextmenu, tap highlighting etc
-      // set to false to disable this
-      stop_browser_behavior: {
-  		// this also triggers onselectstart=false for IE
-          userSelect: 'none',
-  		// this makes the element blocking in IE10 >, you could experiment with the value
-  		// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
-          touchAction: 'none',
-  		touchCallout: 'none',
-          contentZooming: 'none',
-          userDrag: 'none',
-          tapHighlightColor: 'rgba(0,0,0,0)'
-      }
+  function Edge (properties, network, constants) {
+    if (!network) {
+      throw "No network provided";
+    }
+    this.network = network;
 
-      // more settings are defined per gesture at gestures.js
-  };
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
 
-  // detect touchevents
-  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
-  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
+    // initialize variables
+    this.id     = undefined;
+    this.fromId = undefined;
+    this.toId   = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+    this.hoverWidth = constants.edges.hoverWidth;
+    this.value  = undefined;
+    this.length = constants.physics.springLength;
+    this.customLength = false;
+    this.selected = false;
+    this.hover = false;
+    this.smoothCurves = constants.smoothCurves;
+    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
+    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
+    this.inheritColor = constants.edges.inheritColor;
 
-  // dont use mouseevents on mobile devices
-  Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
-  Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
+    this.from = null;   // a node
+    this.to = null;     // a node
+    this.via = null;    // a temp node
 
-  // eventtypes per touchevent (start, move, end)
-  // are filled by Hammer.event.determineEventTypes on setup
-  Hammer.EVENT_TYPES = {};
+    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+    // by storing the original information we can revert to the original connection when the cluser is opened.
+    this.originalFromId = [];
+    this.originalToId = [];
 
-  // direction defines
-  Hammer.DIRECTION_DOWN = 'down';
-  Hammer.DIRECTION_LEFT = 'left';
-  Hammer.DIRECTION_UP = 'up';
-  Hammer.DIRECTION_RIGHT = 'right';
+    this.connected = false;
 
-  // pointer type
-  Hammer.POINTER_MOUSE = 'mouse';
-  Hammer.POINTER_TOUCH = 'touch';
-  Hammer.POINTER_PEN = 'pen';
-
-  // touch event defines
-  Hammer.EVENT_START = 'start';
-  Hammer.EVENT_MOVE = 'move';
-  Hammer.EVENT_END = 'end';
-
-  // hammer document where the base events are added at
-  Hammer.DOCUMENT = document;
-
-  // plugins namespace
-  Hammer.plugins = {};
-
-  // if the window events are set...
-  Hammer.READY = false;
-
-  /**
-   * setup events to detect gestures on the document
-   */
-  function setup() {
-      if(Hammer.READY) {
-          return;
-      }
-
-      // find what eventtypes we add listeners to
-      Hammer.event.determineEventTypes();
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-      // Register all gestures inside Hammer.gestures
-      for(var name in Hammer.gestures) {
-          if(Hammer.gestures.hasOwnProperty(name)) {
-              Hammer.detection.register(Hammer.gestures[name]);
-          }
-      }
+    this.color       = {color:constants.edges.color.color,
+                        highlight:constants.edges.color.highlight,
+                        hover:constants.edges.color.hover};
+    this.widthFixed  = false;
+    this.lengthFixed = false;
 
-      // Add touch events on the document
-      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
-      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
+    this.setProperties(properties, constants);
 
-      // Hammer is ready...!
-      Hammer.READY = true;
+    this.controlNodesEnabled = false;
+    this.controlNodes = {from:null, to:null, positions:{}};
+    this.connectedNode = null;
   }
 
   /**
-   * create new hammer instance
-   * all methods should return the instance itself, so it is chainable.
-   * @param   {HTMLElement}       element
-   * @param   {Object}            [options={}]
-   * @returns {Hammer.Instance}
-   * @constructor
+   * Set or overwrite properties for the edge
+   * @param {Object} properties  an object with properties
+   * @param {Object} constants   and object with default, global properties
    */
-  Hammer.Instance = function(element, options) {
-      var self = this;
-
-      // setup HammerJS window events and register all gestures
-      // this also sets up the default options
-      setup();
+  Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
+    }
 
-      this.element = element;
+    if (properties.from !== undefined)           {this.fromId = properties.from;}
+    if (properties.to !== undefined)             {this.toId = properties.to;}
 
-      // start/stop detection option
-      this.enabled = true;
+    if (properties.id !== undefined)             {this.id = properties.id;}
+    if (properties.style !== undefined)          {this.style = properties.style;}
+    if (properties.label !== undefined)          {this.label = properties.label;}
 
-      // merge options
-      this.options = Hammer.utils.extend(
-          Hammer.utils.extend({}, Hammer.defaults),
-          options || {});
+    if (this.label) {
+      this.fontSize = constants.edges.fontSize;
+      this.fontFace = constants.edges.fontFace;
+      this.fontColor = constants.edges.fontColor;
+      this.fontFill = constants.edges.fontFill;
 
-      // add some css to the element to prevent the browser from doing its native behavoir
-      if(this.options.stop_browser_behavior) {
-          Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
-      }
+      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
+      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
+      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
+      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    }
 
-      // start detection on touchstart
-      Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
-          if(self.enabled) {
-              Hammer.detection.startDetect(self, ev);
-          }
-      });
+    if (properties.title !== undefined)        {this.title = properties.title;}
+    if (properties.width !== undefined)        {this.width = properties.width;}
+    if (properties.widthSelectionMultiplier !== undefined)
+                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
+    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
+    if (properties.value !== undefined)        {this.value = properties.value;}
+    if (properties.length !== undefined)       {this.length = properties.length;
+                                                this.customLength = true;}
 
-      // return instance
-      return this;
-  };
+    // scale the arrow
+    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
 
+    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
 
-  Hammer.Instance.prototype = {
-      /**
-       * bind events to the instance
-       * @param   {String}      gesture
-       * @param   {Function}    handler
-       * @returns {Hammer.Instance}
-       */
-      on: function onEvent(gesture, handler){
-          var gestures = gesture.split(' ');
-          for(var t=0; t<gestures.length; t++) {
-              this.element.addEventListener(gestures[t], handler, false);
-          }
-          return this;
-      },
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dash) {
+      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
+      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
+      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+    }
 
+    if (properties.color !== undefined) {
+      if (util.isString(properties.color)) {
+        this.color.color = properties.color;
+        this.color.highlight = properties.color;
+      }
+      else {
+        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
+      }
+    }
 
-      /**
-       * unbind events to the instance
-       * @param   {String}      gesture
-       * @param   {Function}    handler
-       * @returns {Hammer.Instance}
-       */
-      off: function offEvent(gesture, handler){
-          var gestures = gesture.split(' ');
-          for(var t=0; t<gestures.length; t++) {
-              this.element.removeEventListener(gestures[t], handler, false);
-          }
-          return this;
-      },
+    // A node is connected when it has a from and to node.
+    this.connect();
 
+    this.widthFixed = this.widthFixed || (properties.width !== undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
 
-      /**
-       * trigger gesture event
-       * @param   {String}      gesture
-       * @param   {Object}      eventData
-       * @returns {Hammer.Instance}
-       */
-      trigger: function triggerEvent(gesture, eventData){
-          // create DOM event
-          var event = Hammer.DOCUMENT.createEvent('Event');
-  		event.initEvent(gesture, true, true);
-  		event.gesture = eventData;
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
 
-          // trigger on the target if it is in the instance element,
-          // this is for event delegation tricks
-          var element = this.element;
-          if(Hammer.utils.hasParent(eventData.target, element)) {
-              element = eventData.target;
-          }
+    // set draw method based on style
+    switch (this.style) {
+      case 'line':          this.draw = this._drawLine; break;
+      case 'arrow':         this.draw = this._drawArrow; break;
+      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
+      case 'dash-line':     this.draw = this._drawDashLine; break;
+      default:              this.draw = this._drawLine; break;
+    }
+  };
 
-          element.dispatchEvent(event);
-          return this;
-      },
+  /**
+   * Connect an edge to its nodes
+   */
+  Edge.prototype.connect = function () {
+    this.disconnect();
 
+    this.from = this.network.nodes[this.fromId] || null;
+    this.to = this.network.nodes[this.toId] || null;
+    this.connected = (this.from && this.to);
 
-      /**
-       * enable of disable hammer.js detection
-       * @param   {Boolean}   state
-       * @returns {Hammer.Instance}
-       */
-      enable: function enable(state) {
-          this.enabled = state;
-          return this;
+    if (this.connected) {
+      this.from.attachEdge(this);
+      this.to.attachEdge(this);
+    }
+    else {
+      if (this.from) {
+        this.from.detachEdge(this);
+      }
+      if (this.to) {
+        this.to.detachEdge(this);
       }
+    }
   };
 
   /**
-   * this holds the last move event,
-   * used to fix empty touchend issue
-   * see the onTouch event for an explanation
-   * @type {Object}
+   * Disconnect an edge from its nodes
    */
-  var last_move_event = null;
+  Edge.prototype.disconnect = function () {
+    if (this.from) {
+      this.from.detachEdge(this);
+      this.from = null;
+    }
+    if (this.to) {
+      this.to.detachEdge(this);
+      this.to = null;
+    }
 
+    this.connected = false;
+  };
 
   /**
-   * when the mouse is hold down, this is true
-   * @type {Boolean}
+   * get the title of this edge.
+   * @return {string} title    The title of the edge, or undefined when no title
+   *                           has been set.
    */
-  var enable_detect = false;
+  Edge.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
 
   /**
-   * when touch events have been fired, this is true
-   * @type {Boolean}
+   * Retrieve the value of the edge. Can be undefined
+   * @return {Number} value
    */
-  var touch_triggered = false;
-
-
-  Hammer.event = {
-      /**
-       * simple addEventListener
-       * @param   {HTMLElement}   element
-       * @param   {String}        type
-       * @param   {Function}      handler
-       */
-      bindDom: function(element, type, handler) {
-          var types = type.split(' ');
-          for(var t=0; t<types.length; t++) {
-              element.addEventListener(types[t], handler, false);
-          }
-      },
-
-
-      /**
-       * touch events with mouse fallback
-       * @param   {HTMLElement}   element
-       * @param   {String}        eventType        like Hammer.EVENT_MOVE
-       * @param   {Function}      handler
-       */
-      onTouch: function onTouch(element, eventType, handler) {
-  		var self = this;
-
-          this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
-              var sourceEventType = ev.type.toLowerCase();
+  Edge.prototype.getValue = function() {
+    return this.value;
+  };
 
-              // onmouseup, but when touchend has been fired we do nothing.
-              // this is for touchdevices which also fire a mouseup on touchend
-              if(sourceEventType.match(/mouse/) && touch_triggered) {
-                  return;
-              }
+  /**
+   * Adjust the value range of the edge. The edge will adjust it's width
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
+   */
+  Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+      var scale = (this.widthMax - this.widthMin) / (max - min);
+      this.width = (this.value - min) * scale + this.widthMin;
+    }
+  };
 
-              // mousebutton must be down or a touch event
-              else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
-                  sourceEventType.match(/pointerdown/) || // pointerevents touch
-                  (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
-              ){
-                  enable_detect = true;
-              }
+  /**
+   * Redraw a edge
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
+  };
 
-              // we are in a touch event, set the touch triggered bool to true,
-              // this for the conflicts that may occur on ios and android
-              if(sourceEventType.match(/touch|pointer/)) {
-                  touch_triggered = true;
-              }
+  /**
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top
+   * @return {boolean}     True if location is located on the edge
+   */
+  Edge.prototype.isOverlappingWith = function(obj) {
+    if (this.connected) {
+      var distMax = 10;
+      var xFrom = this.from.x;
+      var yFrom = this.from.y;
+      var xTo = this.to.x;
+      var yTo = this.to.y;
+      var xObj = obj.left;
+      var yObj = obj.top;
 
-              // count the total touches on the screen
-              var count_touches = 0;
+      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
 
-              // when touch has been triggered in this detection session
-              // and we are now handling a mouse event, we stop that to prevent conflicts
-              if(enable_detect) {
-                  // update pointerevent
-                  if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
-                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
-                  }
-                  // touch
-                  else if(sourceEventType.match(/touch/)) {
-                      count_touches = ev.touches.length;
-                  }
-                  // mouse
-                  else if(!touch_triggered) {
-                      count_touches = sourceEventType.match(/up/) ? 0 : 1;
-                  }
+      return (dist < distMax);
+    }
+    else {
+      return false
+    }
+  };
 
-                  // if we are in a end event, but when we remove one touch and
-                  // we still have enough, set eventType to move
-                  if(count_touches > 0 && eventType == Hammer.EVENT_END) {
-                      eventType = Hammer.EVENT_MOVE;
-                  }
-                  // no touches, force the end event
-                  else if(!count_touches) {
-                      eventType = Hammer.EVENT_END;
-                  }
+  Edge.prototype._getColor = function() {
+    var colorObj = this.color;
+    if (this.inheritColor == "to") {
+      colorObj = {
+        highlight: this.to.color.highlight.border,
+        hover: this.to.color.hover.border,
+        color: this.to.color.border
+      };
+    }
+    else if (this.inheritColor == "from" || this.inheritColor == true) {
+      colorObj = {
+        highlight: this.from.color.highlight.border,
+        hover: this.from.color.hover.border,
+        color: this.from.color.border
+      };
+    }
 
-                  // because touchend has no touches, and we often want to use these in our gestures,
-                  // we send the last move event as our eventData in touchend
-                  if(!count_touches && last_move_event !== null) {
-                      ev = last_move_event;
-                  }
-                  // store the last move event
-                  else {
-                      last_move_event = ev;
-                  }
+    if (this.selected == true)   {return colorObj.highlight;}
+    else if (this.hover == true) {return colorObj.hover;}
+    else                         {return colorObj.color;}
+  }
 
-                  // trigger the handler
-                  handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
 
-                  // remove pointerevent from list
-                  if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
-                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
-                  }
-              }
+  /**
+   * Redraw a edge as a line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this._getColor();
+    ctx.lineWidth   = this._getLineWidth();
 
-              //debug(sourceEventType +" "+ eventType);
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-              // on the end we reset everything
-              if(!count_touches) {
-                  last_move_event = null;
-                  enable_detect = false;
-                  touch_triggered = false;
-                  Hammer.PointerEvent.reset();
-              }
-          });
-      },
+      // draw label
+      var point;
+      if (this.label) {
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      var x, y;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      this._circle(ctx, x, y, radius);
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      this._label(ctx, this.label, point.x, point.y);
+    }
+  };
 
+  /**
+   * Get the line width of the edge. Depends on width and whether one of the
+   * connected nodes is selected.
+   * @return {Number} width
+   * @private
+   */
+  Edge.prototype._getLineWidth = function() {
+    if (this.selected == true) {
+      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
+    }
+    else {
+      if (this.hover == true) {
+        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
+      }
+      else {
+        return this.width*this.networkScaleInv;
+      }
+    }
+  };
 
-      /**
-       * we have different events for each device/browser
-       * determine what we need and set them in the Hammer.EVENT_TYPES constant
-       */
-      determineEventTypes: function determineEventTypes() {
-          // determine the eventtype we want to set
-          var types;
+  Edge.prototype._getViaCoordinates = function () {
+    var xVia = null;
+    var yVia = null;
+    var factor = this.smoothCurves.roundness;
+    var type = this.smoothCurves.type;
+    if (factor == 0) {
+      return {x:null,y:null};
+    }
 
-          // pointerEvents magic
-          if(Hammer.HAS_POINTEREVENTS) {
-              types = Hammer.PointerEvent.getEvents();
+    var dx = Math.abs(this.from.x - this.to.x);
+    var dy = Math.abs(this.from.y - this.to.y);
+    if (type == 'discrete' || type == 'diagonalCross') {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
           }
-          // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
-          else if(Hammer.NO_MOUSEEVENTS) {
-              types = [
-                  'touchstart',
-                  'touchmove',
-                  'touchend touchcancel'];
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
           }
-          // for non pointer events browsers and mixed browsers,
-          // like chrome on windows8 touch laptop
-          else {
-              types = [
-                  'touchstart mousedown',
-                  'touchmove mousemove',
-                  'touchend touchcancel mouseup'];
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
           }
-
-          Hammer.EVENT_TYPES[Hammer.EVENT_START]  = types[0];
-          Hammer.EVENT_TYPES[Hammer.EVENT_MOVE]   = types[1];
-          Hammer.EVENT_TYPES[Hammer.EVENT_END]    = types[2];
-      },
-
-
-      /**
-       * create touchlist depending on the event
-       * @param   {Object}    ev
-       * @param   {String}    eventType   used by the fakemultitouch plugin
-       */
-      getTouchList: function getTouchList(ev/*, eventType*/) {
-          // get the fake pointerEvent touchlist
-          if(Hammer.HAS_POINTEREVENTS) {
-              return Hammer.PointerEvent.getTouchList();
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
           }
-          // get the touchlist
-          else if(ev.touches) {
-              return ev.touches;
+        }
+        if (type == "discrete") {
+          xVia = dx < factor * dy ? this.from.x : xVia;
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
           }
-          // make fake touchlist from mouse position
-          else {
-              return [{
-                  identifier: 1,
-                  pageX: ev.pageX,
-                  pageY: ev.pageY,
-                  target: ev.target
-              }];
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
           }
-      },
-
-
-      /**
-       * collect event data for Hammer js
-       * @param   {HTMLElement}   element
-       * @param   {String}        eventType        like Hammer.EVENT_MOVE
-       * @param   {Object}        eventData
-       */
-      collectEventData: function collectEventData(element, eventType, ev) {
-          var touches = this.getTouchList(ev, eventType);
-
-          // find out pointerType
-          var pointerType = Hammer.POINTER_TOUCH;
-          if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
-              pointerType = Hammer.POINTER_MOUSE;
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
           }
-
-          return {
-              center      : Hammer.utils.getCenter(touches),
-              timeStamp   : new Date().getTime(),
-              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() {
-                  if(this.srcEvent.preventManipulation) {
-                      this.srcEvent.preventManipulation();
-                  }
-
-                  if(this.srcEvent.preventDefault) {
-                      this.srcEvent.preventDefault();
-                  }
-              },
-
-              /**
-               * stop bubbling the event up to its parents
-               */
-              stopPropagation: function() {
-                  this.srcEvent.stopPropagation();
-              },
-
-              /**
-               * immediately stop gesture detection
-               * might be useful after a swipe was detected
-               * @return {*}
-               */
-              stopDetect: function() {
-                  return Hammer.detection.stopDetect();
-              }
-          };
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
+        }
+        if (type == "discrete") {
+          yVia = dy < factor * dx ? this.from.y : yVia;
+        }
       }
-  };
-
-  Hammer.PointerEvent = {
-      /**
-       * holds all pointers
-       * @type {Object}
-       */
-      pointers: {},
-
-      /**
-       * get a list of pointers
-       * @returns {Array}     touchlist
-       */
-      getTouchList: function() {
-          var self = this;
-          var touchlist = [];
-
-          // we can use forEach since pointerEvents only is in IE10
-          Object.keys(self.pointers).sort().forEach(function(id) {
-              touchlist.push(self.pointers[id]);
-          });
-          return touchlist;
-      },
-
-      /**
-       * update the position of a pointer
-       * @param   {String}   type             Hammer.EVENT_END
-       * @param   {Object}   pointerEvent
-       */
-      updatePointer: function(type, pointerEvent) {
-          if(type == Hammer.EVENT_END) {
-              this.pointers = {};
+    }
+    else if (type == "straightCross") {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        xVia = this.from.x;
+        yVia = this.to.y
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        xVia = this.to.x;
+        yVia = this.from.y;
+      }
+    }
+    else if (type == 'horizontal') {
+      xVia = this.to.x;
+      yVia = this.from.y;
+    }
+    else if (type == 'vertical') {
+      xVia = this.from.x;
+      yVia = this.to.y;
+    }
+    else { // continuous
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(1)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
           }
-          else {
-              pointerEvent.identifier = pointerEvent.pointerId;
-              this.pointers[pointerEvent.pointerId] = pointerEvent;
+          else if (this.from.x > this.to.x) {
+  //          console.log(2)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x > xVia ? this.to.x :xVia;
           }
-
-          return Object.keys(this.pointers).length;
-      },
-
-      /**
-       * check if ev matches pointertype
-       * @param   {String}        pointerType     Hammer.POINTER_MOUSE
-       * @param   {PointerEvent}  ev
-       */
-      matchType: function(pointerType, ev) {
-          if(!ev.pointerType) {
-              return false;
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(3)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
           }
-
-          var types = {};
-          types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
-          types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
-          types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
-          return types[pointerType];
-      },
+          else if (this.from.x > this.to.x) {
+  //          console.log(4, this.from.x, this.to.x)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x > xVia ? this.to.x : xVia;
+          }
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(5)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(6)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(7)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(8)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+        }
+      }
+    }
 
 
-      /**
-       * get events
-       */
-      getEvents: function() {
-          return [
-              'pointerdown MSPointerDown',
-              'pointermove MSPointerMove',
-              'pointerup pointercancel MSPointerUp MSPointerCancel'
-          ];
-      },
+    return {x:xVia, y:yVia};
+  }
 
-      /**
-       * reset the list
-       */
-      reset: function() {
-          this.pointers = {};
+  /**
+   * Draw a line between two nodes
+   * @param {CanvasRenderingContext2D} ctx
+   * @private
+   */
+  Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    if (this.smoothCurves.enabled == true) {
+      if (this.smoothCurves.dynamic == false) {
+        var via = this._getViaCoordinates();
+        if (via.x == null) {
+          ctx.lineTo(this.to.x, this.to.y);
+          ctx.stroke();
+          return null;
+        }
+        else {
+  //        this.via.x = via.x;
+  //        this.via.y = via.y;
+          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+          ctx.stroke();
+          return via;
+        }
+      }
+      else {
+        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+        ctx.stroke();
+        return this.via;
       }
+    }
+    else {
+      ctx.lineTo(this.to.x, this.to.y);
+      ctx.stroke();
+      return null;
+    }
   };
 
+  /**
+   * Draw a line from a node to itself, a circle
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @private
+   */
+  Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
+  };
 
-  Hammer.utils = {
-      /**
-       * extend method,
-       * also used for cloning when dest is an empty object
-       * @param   {Object}    dest
-       * @param   {Object}    src
-  	 * @parm	{Boolean}	merge		do a merge
-       * @returns {Object}    dest
-       */
-      extend: function extend(dest, src, merge) {
-          for (var key in src) {
-  			if(dest[key] !== undefined && merge) {
-  				continue;
-  			}
-              dest[key] = src[key];
-          }
-          return dest;
-      },
+  /**
+   * Draw label with white background and with the middle at (x, y)
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {Number} x
+   * @param {Number} y
+   * @private
+   */
+  Edge.prototype._label = function (ctx, text, x, y) {
+    if (text) {
+      // TODO: cache the calculated size
+      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+          this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontFill;
+      var width = ctx.measureText(text).width;
+      var height = this.fontSize;
+      var left = x - width / 2;
+      var top = y - height / 2;
 
+      ctx.fillRect(left, top, width, height);
 
-      /**
-       * find if a node is in the given parent
-       * used for event delegation tricks
-       * @param   {HTMLElement}   node
-       * @param   {HTMLElement}   parent
-       * @returns {boolean}       has_parent
-       */
-      hasParent: function(node, parent) {
-          while(node){
-              if(node == parent) {
-                  return true;
-              }
-              node = node.parentNode;
-          }
-          return false;
-      },
+      // draw text
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillText(text, left, top);
+    }
+  };
 
+  /**
+   * Redraw a edge as a dashed line
+   * Draw this edge in the given canvas
+   * @author David Jordan
+   * @date 2012-08-08
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;}
 
-      /**
-       * get the center of all the touches
-       * @param   {Array}     touches
-       * @returns {Object}    center
-       */
-      getCenter: function getCenter(touches) {
-          var valuesX = [], valuesY = [];
+    ctx.lineWidth = this._getLineWidth();
 
-          for(var t= 0,len=touches.length; t<len; t++) {
-              valuesX.push(touches[t].pageX);
-              valuesY.push(touches[t].pageY);
-          }
+    var via = null;
+    // only firefox and chrome support this method, else we use the legacy one.
+    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+      // configure the dash pattern
+      var pattern = [0];
+      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
+        pattern = [this.dash.length,this.dash.gap];
+      }
+      else {
+        pattern = [5,5];
+      }
 
-          return {
-              pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
-              pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
-          };
-      },
+      // set dash settings for chrome or firefox
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash(pattern);
+        ctx.lineDashOffset = 0;
 
+      } else { //Firefox
+        ctx.mozDash = pattern;
+        ctx.mozDashOffset = 0;
+      }
 
-      /**
-       * calculate the velocity between two points
-       * @param   {Number}    delta_time
-       * @param   {Number}    delta_x
-       * @param   {Number}    delta_y
-       * @returns {Object}    velocity
-       */
-      getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
-          return {
-              x: Math.abs(delta_x / delta_time) || 0,
-              y: Math.abs(delta_y / delta_time) || 0
-          };
-      },
+      // draw the line
+      via = this._line(ctx);
 
+      // restore the dash settings.
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash([0]);
+        ctx.lineDashOffset = 0;
 
-      /**
-       * calculate the angle between two coordinates
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {Number}    angle
-       */
-      getAngle: function getAngle(touch1, touch2) {
-          var y = touch2.pageY - touch1.pageY,
-              x = touch2.pageX - touch1.pageX;
-          return Math.atan2(y, x) * 180 / Math.PI;
-      },
+      } else { //Firefox
+        ctx.mozDash = [0];
+        ctx.mozDashOffset = 0;
+      }
+    }
+    else { // unsupporting smooth lines
+      // draw dashed line
+      ctx.beginPath();
+      ctx.lineCap = 'round';
+      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
+      }
+      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
+      }
+      else //If all else fails draw a line
+      {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+      }
+      ctx.stroke();
+    }
 
+    // draw label
+    if (this.label) {
+      var point;
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
+      }
+      this._label(ctx, this.label, point.x, point.y);
+    }
+  };
 
-      /**
-       * angle to direction define
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {String}    direction constant, like Hammer.DIRECTION_LEFT
-       */
-      getDirection: function getDirection(touch1, touch2) {
-          var x = Math.abs(touch1.pageX - touch2.pageX),
-              y = Math.abs(touch1.pageY - touch2.pageY);
-
-          if(x >= y) {
-              return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
-          }
-          else {
-              return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
-          }
-      },
+  /**
+   * Get a point on a line
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnLine = function (percentage) {
+    return {
+      x: (1 - percentage) * this.from.x + percentage * this.to.x,
+      y: (1 - percentage) * this.from.y + percentage * this.to.y
+    }
+  };
 
+  /**
+   * Get a point on a circle
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+      x: x + radius * Math.cos(angle),
+      y: y - radius * Math.sin(angle)
+    }
+  };
 
-      /**
-       * calculate the distance between two touches
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {Number}    distance
-       */
-      getDistance: function getDistance(touch1, touch2) {
-          var x = touch2.pageX - touch1.pageX,
-              y = touch2.pageY - touch1.pageY;
-          return Math.sqrt((x*x) + (y*y));
-      },
+  /**
+   * Redraw a edge as a line with an arrow halfway the line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawArrowCenter = function(ctx) {
+    var point;
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+    ctx.lineWidth = this._getLineWidth();
 
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-      /**
-       * calculate the scale factor between two touchLists (fingers)
-       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
-       * @param   {Array}     start
-       * @param   {Array}     end
-       * @returns {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;
-      },
+      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      // draw an arrow halfway the line
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
+      }
 
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-      /**
-       * calculate the rotation degrees between two touchLists (fingers)
-       * @param   {Array}     start
-       * @param   {Array}     end
-       * @returns {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;
-      },
+      // draw label
+      if (this.label) {
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      // draw circle
+      var x, y;
+      var radius = 0.25 * Math.max(100,this.length);
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+      }
+      this._circle(ctx, x, y, radius);
 
+      // draw all arrows
+      var angle = 0.2 * Math.PI;
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-      /**
-       * boolean if the direction is vertical
-       * @param    {String}    direction
-       * @returns  {Boolean}   is_vertical
-       */
-      isVertical: function isVertical(direction) {
-          return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
-      },
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+  };
 
 
-      /**
-       * stop browser default behavior with css props
-       * @param   {HtmlElement}   element
-       * @param   {Object}        css_props
-       */
-      stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
-          var prop,
-              vendors = ['webkit','khtml','moz','ms','o',''];
 
-          if(!css_props || !element.style) {
-              return;
-          }
+  /**
+   * Redraw a edge as a line with an arrow
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawArrow = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
 
-          // with css properties for modern browsers
-          for(var i = 0; i < vendors.length; i++) {
-              for(var p in css_props) {
-                  if(css_props.hasOwnProperty(p)) {
-                      prop = p;
+    ctx.lineWidth = this._getLineWidth();
 
-                      // vender prefix at the property
-                      if(vendors[i]) {
-                          prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
-                      }
+    var angle, length;
+    //draw a line
+    if (this.from != this.to) {
+      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var dx = (this.to.x - this.from.x);
+      var dy = (this.to.y - this.from.y);
+      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
 
-                      // set the style
-                      element.style[prop] = css_props[p];
-                  }
-              }
-          }
+      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
 
-          // also the disable onselectstart
-          if(css_props.userSelect == 'none') {
-              element.onselectstart = function() {
-                  return false;
-              };
-          }
+      var via;
+      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
+        via = this.via;
+      }
+      else if (this.smoothCurves.enabled == true) {
+        via = this._getViaCoordinates();
       }
-  };
-
-  Hammer.detection = {
-      // contains all registred Hammer.gestures in the correct order
-      gestures: [],
 
-      // data of the current Hammer.gesture detection session
-      current: null,
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+        dx = (this.to.x - via.x);
+        dy = (this.to.y - via.y);
+        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+      }
+      var toBorderDist = this.to.distanceToBorder(ctx, angle);
+      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-      // the previous Hammer.gesture session data
-      // is a full clone of the previous gesture.current object
-      previous: null,
+      var xTo,yTo;
+      if (this.smoothCurves.enabled == true && via.x != null) {
+       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+      }
+      else {
+        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+      }
 
-      // when this becomes true, no gestures are fired
-      stopped: false,
+      ctx.beginPath();
+      ctx.moveTo(xFrom,yFrom);
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+      }
+      else {
+        ctx.lineTo(xTo, yTo);
+      }
+      ctx.stroke();
 
+      // draw arrow at the end of the line
+      length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(xTo, yTo, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-      /**
-       * start Hammer.gesture detection
-       * @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;
-          }
+      // draw label
+      if (this.label) {
+        var point;
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      // draw circle
+      var node = this.from;
+      var x, y, arrow;
+      var radius = 0.25 * Math.max(100,this.length);
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+        arrow = {
+          x: x,
+          y: node.y,
+          angle: 0.9 * Math.PI
+        };
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+        arrow = {
+          x: node.x,
+          y: y,
+          angle: 0.6 * Math.PI
+        };
+      }
+      ctx.beginPath();
+      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+      ctx.stroke();
 
-          this.stopped = false;
+      // draw all arrows
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-          this.current = {
-              inst        : inst, // reference to HammerInstance we're working for
-              startEvent  : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
-              lastEvent   : false, // last eventData
-              name        : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
-          };
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+  };
 
-          this.detect(eventData);
-      },
 
 
-      /**
-       * Hammer.gesture detection
-       * @param   {Object}    eventData
-       * @param   {Object}    eventData
-       */
-      detect: function detect(eventData) {
-          if(!this.current || this.stopped) {
-              return;
-          }
+  /**
+   * Calculate the distance between a point (x3,y3) and a line segment from
+   * (x1,y1) to (x2,y2).
+   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @param {number} x3
+   * @param {number} y3
+   * @private
+   */
+  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    if (this.from != this.to) {
+      if (this.smoothCurves.enabled == true) {
+        var xVia, yVia;
+        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
+          xVia = this.via.x;
+          yVia = this.via.y;
+        }
+        else {
+          var via = this._getViaCoordinates();
+          xVia = via.x;
+          yVia = via.y;
+        }
+        var minDistance = 1e9;
+        var i,t,x,y,dx,dy;
+        for (i = 0; i < 10; i++) {
+          t = 0.1*i;
+          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+          dx = Math.abs(x3-x);
+          dy = Math.abs(y3-y);
+          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
+        }
+        return minDistance
+      }
+      else {
+        var px = x2-x1,
+            py = y2-y1,
+            something = px*px + py*py,
+            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
 
-          // extend event data with calculations about scale, distance etc
-          eventData = this.extendEventData(eventData);
+        if (u > 1) {
+          u = 1;
+        }
+        else if (u < 0) {
+          u = 0;
+        }
 
-          // instance options
-          var inst_options = this.current.inst.options;
+        var x = x1 + u * px,
+            y = y1 + u * py,
+            dx = x - x3,
+            dy = y - y3;
 
-          // call Hammer.gesture handlers
-          for(var g=0,len=this.gestures.length; g<len; g++) {
-              var gesture = this.gestures[g];
+        //# Note: If the actual distance does not matter,
+        //# if you only want to compare what this function
+        //# returns to other results of this function, you
+        //# can just return the squared distance instead
+        //# (i.e. remove the sqrt) to gain a little performance
 
-              // only when the instance options have enabled this gesture
-              if(!this.stopped && inst_options[gesture.name] !== false) {
-                  // if a handler returns false, we stop with the detection
-                  if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
-                      this.stopDetect();
-                      break;
-                  }
-              }
-          }
+        return Math.sqrt(dx*dx + dy*dy);
+      }
+    }
+    else {
+      var x, y, dx, dy;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      dx = x - x3;
+      dy = y - y3;
+      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+    }
+  };
 
-          // store as previous event event
-          if(this.current) {
-              this.current.lastEvent = eventData;
-          }
 
-          // endevent, but not the last touch, so dont stop
-          if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
-              this.stopDetect();
-          }
 
-          return eventData;
-      },
+  /**
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
+   */
+  Edge.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+  };
 
 
-      /**
-       * 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
-       */
-      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 = Hammer.utils.extend({}, this.current);
+  Edge.prototype.select = function() {
+    this.selected = true;
+  };
 
-          // reset the current
-          this.current = null;
+  Edge.prototype.unselect = function() {
+    this.selected = false;
+  };
 
-          // stopped!
-          this.stopped = true;
-      },
+  Edge.prototype.positionBezierNode = function() {
+    if (this.via !== null) {
+      this.via.x = 0.5 * (this.from.x + this.to.x);
+      this.via.y = 0.5 * (this.from.y + this.to.y);
+    }
+  };
 
+  /**
+   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
+   * @param ctx
+   */
+  Edge.prototype._drawControlNodes = function(ctx) {
+    if (this.controlNodesEnabled == true) {
+      if (this.controlNodes.from === null && this.controlNodes.to === null) {
+        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+        var nodeIdTo = "edgeIdTo:".concat(this.id);
+        var constants = {
+                        nodes:{group:'', radius:8},
+                        physics:{damping:0},
+                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+                        };
+        this.controlNodes.from = new Node(
+          {id:nodeIdFrom,
+            shape:'dot',
+              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+        this.controlNodes.to = new Node(
+          {id:nodeIdTo,
+            shape:'dot',
+            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+      }
 
-      /**
-       * extend eventData for Hammer.gestures
-       * @param   {Object}   ev
-       * @returns {Object}   ev
-       */
-      extendEventData: function extendEventData(ev) {
-          var startEv = this.current.startEvent;
+      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+        this.controlNodes.positions = this.getControlNodePositions(ctx);
+        this.controlNodes.from.x = this.controlNodes.positions.from.x;
+        this.controlNodes.from.y = this.controlNodes.positions.from.y;
+        this.controlNodes.to.x = this.controlNodes.positions.to.x;
+        this.controlNodes.to.y = this.controlNodes.positions.to.y;
+      }
 
-          // if the touches change, set the new touches over the startEvent touches
-          // this because touchevents don't have all the touches on touchstart, or the
-          // user must place his fingers at the EXACT same time on the screen, which is not realistic
-          // but, sometimes it happens that both fingers are touching at the EXACT same time
-          if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
-              // extend 1 level deep to get the touchlist with the touch objects
-              startEv.touches = [];
-              for(var i=0,len=ev.touches.length; i<len; i++) {
-                  startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
-              }
-          }
+      this.controlNodes.from.draw(ctx);
+      this.controlNodes.to.draw(ctx);
+    }
+    else {
+      this.controlNodes = {from:null, to:null, positions:{}};
+    }
+  };
 
-          var delta_time = ev.timeStamp - startEv.timeStamp,
-              delta_x = ev.center.pageX - startEv.center.pageX,
-              delta_y = ev.center.pageY - startEv.center.pageY,
-              velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
+  /**
+   * Enable control nodes.
+   * @private
+   */
+  Edge.prototype._enableControlNodes = function() {
+    this.controlNodesEnabled = true;
+  };
 
-          Hammer.utils.extend(ev, {
-              deltaTime   : delta_time,
+  /**
+   * disable control nodes
+   * @private
+   */
+  Edge.prototype._disableControlNodes = function() {
+    this.controlNodesEnabled = false;
+  };
 
-              deltaX      : delta_x,
-              deltaY      : delta_y,
+  /**
+   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+   * @param x
+   * @param y
+   * @returns {null}
+   * @private
+   */
+  Edge.prototype._getSelectedControlNode = function(x,y) {
+    var positions = this.controlNodes.positions;
+    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
 
-              velocityX   : velocity.x,
-              velocityY   : velocity.y,
+    if (fromDistance < 15) {
+      this.connectedNode = this.from;
+      this.from = this.controlNodes.from;
+      return this.controlNodes.from;
+    }
+    else if (toDistance < 15) {
+      this.connectedNode = this.to;
+      this.to = this.controlNodes.to;
+      return this.controlNodes.to;
+    }
+    else {
+      return null;
+    }
+  };
 
-              distance    : Hammer.utils.getDistance(startEv.center, ev.center),
-              angle       : Hammer.utils.getAngle(startEv.center, ev.center),
-              direction   : Hammer.utils.getDirection(startEv.center, ev.center),
 
-              scale       : Hammer.utils.getScale(startEv.touches, ev.touches),
-              rotation    : Hammer.utils.getRotation(startEv.touches, ev.touches),
+  /**
+   * this resets the control nodes to their original position.
+   * @private
+   */
+  Edge.prototype._restoreControlNodes = function() {
+    if (this.controlNodes.from.selected == true) {
+      this.from = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.from.unselect();
+    }
+    if (this.controlNodes.to.selected == true) {
+      this.to = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.to.unselect();
+    }
+  };
 
-              startEvent  : startEv
-          });
+  /**
+   * this calculates the position of the control nodes on the edges of the parent nodes.
+   *
+   * @param ctx
+   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
+   */
+  Edge.prototype.getControlNodePositions = function(ctx) {
+    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+    var dx = (this.to.x - this.from.x);
+    var dy = (this.to.y - this.from.y);
+    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
 
-          return ev;
-      },
+    var via;
+    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
+      via = this.via;
+    }
+    else if (this.smoothCurves.enabled == true) {
+      via = this._getViaCoordinates();
+    }
 
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+      dx = (this.to.x - via.x);
+      dy = (this.to.y - via.y);
+      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    }
+    var toBorderDist = this.to.distanceToBorder(ctx, angle);
+    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-      /**
-       * register new gesture
-       * @param   {Object}    gesture object, see gestures.js for documentation
-       * @returns {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 xTo,yTo;
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+    }
+    else {
+      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+    }
 
-          // extend Hammer default options with the Hammer.gesture options
-          Hammer.utils.extend(Hammer.defaults, options, true);
+    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+  };
 
-          // set its index
-          gesture.index = gesture.index || 1000;
+  module.exports = Edge;
 
-          // add Hammer.gesture to the list
-          this.gestures.push(gesture);
+/***/ },
+/* 44 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // 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;
-          });
+  /**
+   * Popup is a class to create a popup window with some text
+   * @param {Element}  container     The container object.
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {String} [text]
+   * @param {Object} [style]     An object containing borderColor,
+   *                             backgroundColor, etc.
+   */
+  function Popup(container, x, y, text, style) {
+    if (container) {
+      this.container = container;
+    }
+    else {
+      this.container = document.body;
+    }
 
-          return this.gestures;
+    // x, y and text are optional, see if a style object was passed in their place
+    if (style === undefined) {
+      if (typeof x === "object") {
+        style = x;
+        x = undefined;
+      } else if (typeof text === "object") {
+        style = text;
+        text = undefined;
+      } else {
+        // for backwards compatibility, in case clients other than Network are creating Popup directly
+        style = {
+          fontColor: 'black',
+          fontSize: 14, // px
+          fontFace: 'verdana',
+          color: {
+            border: '#666',
+            background: '#FFFFC6'
+          }
+        }
       }
-  };
+    }
 
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
 
-  Hammer.gestures = Hammer.gestures || {};
+    if (x !== undefined && y !== undefined ) {
+      this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+      this.setText(text);
+    }
 
-  /**
-   * Custom gestures
-   * ==============================
-   *
-   * Gesture object
-   * --------------------
-   * The object structure of a gesture:
-   *
-   * { name: 'mygesture',
-   *   index: 1337,
-   *   defaults: {
-   *     mygesture_option: true
-   *   }
-   *   handler: function(type, ev, inst) {
-   *     // trigger gesture event
-   *     inst.trigger(this.name, ev);
-   *   }
-   * }
+    // create the frame
+    this.frame = document.createElement("div");
+    var styleAttr = this.frame.style;
+    styleAttr.position = "absolute";
+    styleAttr.visibility = "hidden";
+    styleAttr.border = "1px solid " + style.color.border;
+    styleAttr.color = style.fontColor;
+    styleAttr.fontSize = style.fontSize + "px";
+    styleAttr.fontFamily = style.fontFace;
+    styleAttr.padding = this.padding + "px";
+    styleAttr.backgroundColor = style.color.background;
+    styleAttr.borderRadius = "3px";
+    styleAttr.MozBorderRadius = "3px";
+    styleAttr.WebkitBorderRadius = "3px";
+    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    styleAttr.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+  }
 
-   * @param   {String}    name
-   * this should be the name of the gesture, lowercase
-   * it is also being used to disable/enable the gesture per instance config.
-   *
-   * @param   {Number}    [index=1000]
-   * the index of the gesture, where it is going to be in the stack of gestures detection
-   * like when you build an gesture that depends on the drag gesture, it is a good
-   * idea to place it after the index of the drag gesture.
-   *
-   * @param   {Object}    [defaults={}]
-   * the default settings of the gesture. these are added to the instance settings,
-   * and can be overruled per instance. you can also add the name of the gesture,
-   * but this is also added by default (and set to true).
-   *
-   * @param   {Function}  handler
-   * this handles the gesture detection of your custom gesture and receives the
-   * following arguments:
-   *
-   *      @param  {Object}    eventData
-   *      event data containing the following properties:
-   *          timeStamp   {Number}        time the event occurred
-   *          target      {HTMLElement}   target element
-   *          touches     {Array}         touches (fingers, pointers, mouse) on the screen
-   *          pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
-   *          center      {Object}        center position of the touches. contains pageX and pageY
-   *          deltaTime   {Number}        the total time of the touches in the screen
-   *          deltaX      {Number}        the delta on x axis we haved moved
-   *          deltaY      {Number}        the delta on y axis we haved moved
-   *          velocityX   {Number}        the velocity on the x
-   *          velocityY   {Number}        the velocity on y
-   *          angle       {Number}        the angle we are moving
-   *          direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
-   *          distance    {Number}        the distance we haved moved
-   *          scale       {Number}        scaling of the touches, needs 2 touches
-   *          rotation    {Number}        rotation of the touches, needs 2 touches *
-   *          eventType   {String}        matches Hammer.EVENT_START|MOVE|END
-   *          srcEvent    {Object}        the source event, like TouchStart or MouseDown *
-   *          startEvent  {Object}        contains the same properties as above,
-   *                                      but from the first touch. this is used to calculate
-   *                                      distances, deltaTime, scaling etc
-   *
-   *      @param  {Hammer.Instance}    inst
-   *      the instance we are doing the detection for. you can get the options from
-   *      the inst.options object and trigger the gesture event by calling inst.trigger
-   *
-   *
-   * Handle gestures
-   * --------------------
-   * inside the handler you can get/set Hammer.detection.current. This is the current
-   * detection session. It has the following properties
-   *      @param  {String}    name
-   *      contains the name of the gesture we have detected. it has not a real function,
-   *      only to check in other gestures if something is detected.
-   *      like in the drag gesture we set it to 'drag' and in the swipe gesture we can
-   *      check if the current gesture is 'drag' by accessing Hammer.detection.current.name
-   *
-   *      @readonly
-   *      @param  {Hammer.Instance}    inst
-   *      the instance we do the detection for
-   *
-   *      @readonly
-   *      @param  {Object}    startEvent
-   *      contains the properties of the first gesture detection in this session.
-   *      Used for calculations about timing, distance, etc.
-   *
-   *      @readonly
-   *      @param  {Object}    lastEvent
-   *      contains all the properties of the last gesture detect in this session.
-   *
-   * after the gesture detection session has been completed (user has released the screen)
-   * the Hammer.detection.current object is copied into Hammer.detection.previous,
-   * this is usefull for gestures like doubletap, where you need to know if the
-   * previous gesture was a tap
-   *
-   * options that have been set by the instance can be received by calling inst.options
-   *
-   * You can trigger a gesture event by calling inst.trigger("mygesture", event).
-   * The first param is the name of your gesture, the second the event argument
-   *
-   *
-   * Register gestures
-   * --------------------
-   * When an gesture is added to the Hammer.gestures object, it is auto registered
-   * at the setup of the first Hammer instance. You can also call Hammer.detection.register
-   * manually and pass your gesture object as a param
-   *
+  /**
+   * @param {number} x   Horizontal position of the popup window
+   * @param {number} y   Vertical position of the popup window
    */
+  Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
+  };
 
   /**
-   * Hold
-   * Touch stays at the same place for x time
-   * @events  hold
+   * Set the text for the popup window. This can be HTML code
+   * @param {string} text
    */
-  Hammer.gestures.Hold = {
-      name: 'hold',
-      index: 10,
-      defaults: {
-          hold_timeout	: 500,
-          hold_threshold	: 1
-      },
-      timer: null,
-      handler: function holdGesture(ev, inst) {
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  // clear any running timers
-                  clearTimeout(this.timer);
+  Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
+  };
 
-                  // set the gesture so we can check in the timeout if it still is
-                  Hammer.detection.current.name = this.name;
+  /**
+   * Show the popup window
+   * @param {boolean} show    Optional. Show or hide the window
+   */
+  Popup.prototype.show = function (show) {
+    if (show === undefined) {
+      show = true;
+    }
 
-                  // set timer and if after the timeout it still is hold,
-                  // we trigger the hold event
-                  this.timer = setTimeout(function() {
-                      if(Hammer.detection.current.name == 'hold') {
-                          inst.trigger('hold', ev);
-                      }
-                  }, inst.options.hold_timeout);
-                  break;
+    if (show) {
+      var height = this.frame.clientHeight;
+      var width =  this.frame.clientWidth;
+      var maxHeight = this.frame.parentNode.clientHeight;
+      var maxWidth = this.frame.parentNode.clientWidth;
 
-              // when you move or end we clear the timer
-              case Hammer.EVENT_MOVE:
-                  if(ev.distance > inst.options.hold_threshold) {
-                      clearTimeout(this.timer);
-                  }
-                  break;
+      var top = (this.y - height);
+      if (top + height + this.padding > maxHeight) {
+        top = maxHeight - height - this.padding;
+      }
+      if (top < this.padding) {
+        top = this.padding;
+      }
 
-              case Hammer.EVENT_END:
-                  clearTimeout(this.timer);
-                  break;
-          }
+      var left = this.x;
+      if (left + width + this.padding > maxWidth) {
+        left = maxWidth - width - this.padding;
+      }
+      if (left < this.padding) {
+        left = this.padding;
       }
-  };
 
+      this.frame.style.left = left + "px";
+      this.frame.style.top = top + "px";
+      this.frame.style.visibility = "visible";
+    }
+    else {
+      this.hide();
+    }
+  };
 
   /**
-   * Tap/DoubleTap
-   * Quick touch at a place or double at the same place
-   * @events  tap, doubletap
+   * Hide the popup window
    */
-  Hammer.gestures.Tap = {
-      name: 'tap',
-      index: 100,
-      defaults: {
-          tap_max_touchtime	: 250,
-          tap_max_distance	: 10,
-  		tap_always			: true,
-          doubletap_distance	: 20,
-          doubletap_interval	: 300
-      },
-      handler: function tapGesture(ev, inst) {
-          if(ev.eventType == Hammer.EVENT_END) {
-              // previous gesture, for the double tap since these are two different gesture detections
-              var prev = Hammer.detection.previous,
-  				did_doubletap = false;
+  Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
+  };
 
-              // when the touchtime is higher then the max touch time
-              // or when the moving distance is too much
-              if(ev.deltaTime > inst.options.tap_max_touchtime ||
-                  ev.distance > inst.options.tap_max_distance) {
-                  return;
-              }
+  module.exports = Popup;
 
-              // check if double tap
-              if(prev && prev.name == 'tap' &&
-                  (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
-                  ev.distance < inst.options.doubletap_distance) {
-  				inst.trigger('doubletap', ev);
-  				did_doubletap = true;
-              }
 
-  			// do a single tap
-  			if(!did_doubletap || inst.options.tap_always) {
-  				Hammer.detection.current.name = 'tap';
-  				inst.trigger(Hammer.detection.current.name, ev);
-  			}
-          }
+/***/ },
+/* 45 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var PhysicsMixin = __webpack_require__(46);
+  var ClusterMixin = __webpack_require__(47);
+  var SectorsMixin = __webpack_require__(48);
+  var SelectionMixin = __webpack_require__(49);
+  var ManipulationMixin = __webpack_require__(50);
+  var NavigationMixin = __webpack_require__(51);
+  var HierarchicalLayoutMixin = __webpack_require__(52);
+
+  /**
+   * Load a mixin into the network object
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
+   * @private
+   */
+  exports._loadMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = sourceVariable[mixinFunction];
       }
+    }
   };
 
 
   /**
-   * Swipe
-   * triggers swipe events when the end velocity is above the threshold
-   * @events  swipe, swipeleft, swiperight, swipeup, swipedown
+   * removes a mixin from the network object.
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
+   * @private
    */
-  Hammer.gestures.Swipe = {
-      name: 'swipe',
-      index: 40,
-      defaults: {
-          // set 0 for unlimited, but this can conflict with transform
-          swipe_max_touches  : 1,
-          swipe_velocity     : 0.7
-      },
-      handler: function swipeGesture(ev, inst) {
-          if(ev.eventType == Hammer.EVENT_END) {
-              // max touches
-              if(inst.options.swipe_max_touches > 0 &&
-                  ev.touches.length > inst.options.swipe_max_touches) {
-                  return;
-              }
-
-              // when the distance we moved is too small we skip this gesture
-              // or we can be already in dragging
-              if(ev.velocityX > inst.options.swipe_velocity ||
-                  ev.velocityY > inst.options.swipe_velocity) {
-                  // trigger swipe events
-                  inst.trigger(this.name, ev);
-                  inst.trigger(this.name + ev.direction, ev);
-              }
-          }
+  exports._clearMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = undefined;
       }
+    }
   };
 
 
   /**
-   * Drag
-   * Move with x fingers (default 1) around on the page. Blocking the scrolling when
-   * moving left and right is a good practice. When all the drag events are blocking
-   * you disable scrolling on that area.
-   * @events  drag, drapleft, dragright, dragup, dragdown
+   * Mixin the physics system and initialize the parameters required.
+   *
+   * @private
    */
-  Hammer.gestures.Drag = {
-      name: 'drag',
-      index: 50,
-      defaults: {
-          drag_min_distance : 10,
-          // set 0 for unlimited, but this can conflict with transform
-          drag_max_touches  : 1,
-          // 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
-          drag_block_horizontal   : false,
-          drag_block_vertical     : false,
-          // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
-          // It disallows vertical directions if the initial direction was horizontal, and vice versa.
-          drag_lock_to_axis       : false,
-          // drag lock only kicks in when distance > drag_lock_min_distance
-          // This way, locking occurs only when the distance has become large enough to reliably determine the direction
-          drag_lock_min_distance : 25
-      },
-      triggered: false,
-      handler: function dragGesture(ev, inst) {
-          // current gesture isnt drag, but dragged is true
-          // this means an other gesture is busy. now call dragend
-          if(Hammer.detection.current.name != this.name && this.triggered) {
-              inst.trigger(this.name +'end', ev);
-              this.triggered = false;
-              return;
-          }
-
-          // max touches
-          if(inst.options.drag_max_touches > 0 &&
-              ev.touches.length > inst.options.drag_max_touches) {
-              return;
-          }
-
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  this.triggered = false;
-                  break;
-
-              case Hammer.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.drag_min_distance &&
-                      Hammer.detection.current.name != this.name) {
-                      return;
-                  }
-
-                  // we are dragging!
-                  Hammer.detection.current.name = this.name;
-
-                  // lock drag to axis?
-                  if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
-                      ev.drag_locked_to_axis = true;
-                  }
-                  var last_direction = Hammer.detection.current.lastEvent.direction;
-                  if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
-                      // keep direction on the axis that the drag gesture started on
-                      if(Hammer.utils.isVertical(last_direction)) {
-                          ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
-                      }
-                      else {
-                          ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
-                      }
-                  }
+  exports._loadPhysicsSystem = function () {
+    this._loadMixin(PhysicsMixin);
+    this._loadSelectedForceSolver();
+    if (this.constants.configurePhysics == true) {
+      this._loadPhysicsConfiguration();
+    }
+  };
 
-                  // first time, trigger dragstart event
-                  if(!this.triggered) {
-                      inst.trigger(this.name +'start', ev);
-                      this.triggered = true;
-                  }
 
-                  // trigger normal event
-                  inst.trigger(this.name, ev);
+  /**
+   * Mixin the cluster system and initialize the parameters required.
+   *
+   * @private
+   */
+  exports._loadClusterSystem = function () {
+    this.clusterSession = 0;
+    this.hubThreshold = 5;
+    this._loadMixin(ClusterMixin);
+  };
 
-                  // direction event, like dragdown
-                  inst.trigger(this.name + ev.direction, ev);
 
-                  // block the browser events
-                  if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
-                      (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
-                      ev.preventDefault();
-                  }
-                  break;
+  /**
+   * Mixin the sector system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadSectorSystem = function () {
+    this.sectors = {};
+    this.activeSector = ["default"];
+    this.sectors["active"] = {};
+    this.sectors["active"]["default"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
+    this.sectors["frozen"] = {};
+    this.sectors["support"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
 
-              case Hammer.EVENT_END:
-                  // trigger dragend
-                  if(this.triggered) {
-                      inst.trigger(this.name +'end', ev);
-                  }
+    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
 
-                  this.triggered = false;
-                  break;
-          }
-      }
+    this._loadMixin(SectorsMixin);
   };
 
 
   /**
-   * Transform
-   * User want to scale or rotate with 2 fingers
-   * @events  transform, pinch, pinchin, pinchout, rotate
+   * Mixin the selection system and initialize the parameters required
+   *
+   * @private
    */
-  Hammer.gestures.Transform = {
-      name: 'transform',
-      index: 45,
-      defaults: {
-          // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
-          transform_min_scale     : 0.01,
-          // rotation in degrees
-          transform_min_rotation  : 1,
-          // prevent default browser behavior when two touches are on the screen
-          // but it makes the element a blocking element
-          // when you are using the transform gesture, it is a good practice to set this true
-          transform_always_block  : false
-      },
-      triggered: false,
-      handler: function transformGesture(ev, inst) {
-          // current gesture isnt drag, but dragged is true
-          // this means an other gesture is busy. now call dragend
-          if(Hammer.detection.current.name != this.name && this.triggered) {
-              inst.trigger(this.name +'end', ev);
-              this.triggered = false;
-              return;
-          }
-
-          // atleast multitouch
-          if(ev.touches.length < 2) {
-              return;
-          }
-
-          // prevent default when two fingers are on the screen
-          if(inst.options.transform_always_block) {
-              ev.preventDefault();
-          }
-
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  this.triggered = false;
-                  break;
+  exports._loadSelectionSystem = function () {
+    this.selectionObj = {nodes: {}, edges: {}};
 
-              case Hammer.EVENT_MOVE:
-                  var scale_threshold = Math.abs(1-ev.scale);
-                  var rotation_threshold = Math.abs(ev.rotation);
+    this._loadMixin(SelectionMixin);
+  };
 
-                  // when the distance we moved is too small we skip this gesture
-                  // or we can be already in dragging
-                  if(scale_threshold < inst.options.transform_min_scale &&
-                      rotation_threshold < inst.options.transform_min_rotation) {
-                      return;
-                  }
 
-                  // we are transforming!
-                  Hammer.detection.current.name = this.name;
+  /**
+   * Mixin the navigationUI (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadManipulationSystem = function () {
+    // reset global variables -- these are used by the selection of nodes and edges.
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-                  // first time, trigger dragstart event
-                  if(!this.triggered) {
-                      inst.trigger(this.name +'start', ev);
-                      this.triggered = true;
-                  }
+    if (this.constants.dataManipulation.enabled == true) {
+      // load the manipulator HTML elements. All styling done in css.
+      if (this.manipulationDiv === undefined) {
+        this.manipulationDiv = document.createElement('div');
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
+        if (this.editMode == true) {
+          this.manipulationDiv.style.display = "block";
+        }
+        else {
+          this.manipulationDiv.style.display = "none";
+        }
+        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
+      }
 
-                  inst.trigger(this.name, ev); // basic transform event
+      if (this.editModeDiv === undefined) {
+        this.editModeDiv = document.createElement('div');
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
+        if (this.editMode == true) {
+          this.editModeDiv.style.display = "none";
+        }
+        else {
+          this.editModeDiv.style.display = "block";
+        }
+        this.containerElement.insertBefore(this.editModeDiv, this.frame);
+      }
 
-                  // trigger rotate event
-                  if(rotation_threshold > inst.options.transform_min_rotation) {
-                      inst.trigger('rotate', ev);
-                  }
+      if (this.closeDiv === undefined) {
+        this.closeDiv = document.createElement('div');
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
+        this.closeDiv.style.display = this.manipulationDiv.style.display;
+        this.containerElement.insertBefore(this.closeDiv, this.frame);
+      }
 
-                  // trigger pinch event
-                  if(scale_threshold > inst.options.transform_min_scale) {
-                      inst.trigger('pinch', ev);
-                      inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
-                  }
-                  break;
+      // load the manipulation functions
+      this._loadMixin(ManipulationMixin);
 
-              case Hammer.EVENT_END:
-                  // trigger dragend
-                  if(this.triggered) {
-                      inst.trigger(this.name +'end', ev);
-                  }
+      // create the manipulator toolbar
+      this._createManipulatorBar();
+    }
+    else {
+      if (this.manipulationDiv !== undefined) {
+        // removes all the bindings and overloads
+        this._createManipulatorBar();
+        // remove the manipulation divs
+        this.containerElement.removeChild(this.manipulationDiv);
+        this.containerElement.removeChild(this.editModeDiv);
+        this.containerElement.removeChild(this.closeDiv);
 
-                  this.triggered = false;
-                  break;
-          }
+        this.manipulationDiv = undefined;
+        this.editModeDiv = undefined;
+        this.closeDiv = undefined;
+        // remove the mixin functions
+        this._clearMixin(ManipulationMixin);
       }
+    }
   };
 
 
   /**
-   * Touch
-   * Called as first, tells the user has touched the screen
-   * @events  touch
+   * Mixin the navigation (User Interface) system and initialize the parameters required
+   *
+   * @private
    */
-  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
-          prevent_default: false,
-
-          // disable mouse events, so only touch (or pen!) input triggers events
-          prevent_mouseevents: false
-      },
-      handler: function touchGesture(ev, inst) {
-          if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
-              ev.stopDetect();
-              return;
-          }
-
-          if(inst.options.prevent_default) {
-              ev.preventDefault();
-          }
+  exports._loadNavigationControls = function () {
+    this._loadMixin(NavigationMixin);
 
-          if(ev.eventType ==  Hammer.EVENT_START) {
-              inst.trigger(this.name, ev);
-          }
-      }
+    // the clean function removes the button divs, this is done to remove the bindings.
+    this._cleanNavigation();
+    if (this.constants.navigation.enabled == true) {
+      this._loadNavigationElements();
+    }
   };
 
 
   /**
-   * Release
-   * Called as last, tells the user has released the screen
-   * @events  release
+   * Mixin the hierarchical layout system.
+   *
+   * @private
    */
-  Hammer.gestures.Release = {
-      name: 'release',
-      index: Infinity,
-      handler: function releaseGesture(ev, inst) {
-          if(ev.eventType ==  Hammer.EVENT_END) {
-              inst.trigger(this.name, ev);
-          }
-      }
+  exports._loadHierarchySystem = function () {
+    this._loadMixin(HierarchicalLayoutMixin);
   };
 
-  // node export
-  if(typeof module === 'object' && typeof module.exports === 'object'){
-      module.exports = Hammer;
-  }
-  // just window export
-  else {
-      window.Hammer = Hammer;
-
-      // requireJS module definition
-      if(typeof window.define === 'function' && window.define.amd) {
-          window.define('hammer', [], function() {
-              return Hammer;
-          });
-      }
-  }
-  })(this);
 
 /***/ },
-/* 51 */
+/* 46 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
-  //! version : 2.7.0
-  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
-  //! license : MIT
-  //! momentjs.com
-
-  (function (undefined) {
-
-      /************************************
-          Constants
-      ************************************/
+  var util = __webpack_require__(1);
+  var RepulsionMixin = __webpack_require__(128);
+  var HierarchialRepulsionMixin = __webpack_require__(129);
+  var BarnesHutMixin = __webpack_require__(130);
 
-      var moment,
-          VERSION = "2.7.0",
-          // the global-scope this is NOT the global object in Node.js
-          globalScope = typeof global !== 'undefined' ? global : this,
-          oldGlobalMoment,
-          round = Math.round,
-          i,
+  /**
+   * 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();
+  };
 
-          YEAR = 0,
-          MONTH = 1,
-          DATE = 2,
-          HOUR = 3,
-          MINUTE = 4,
-          SECOND = 5,
-          MILLISECOND = 6,
 
-          // internal storage for language config files
-          languages = {},
+  /**
+   * 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);
 
-          // moment internal properties
-          momentProperties = {
-              _isAMomentObject: null,
-              _i : null,
-              _f : null,
-              _l : null,
-              _strict : null,
-              _tzm : null,
-              _isUTC : null,
-              _offset : null,  // optional. Combine with _isUTC
-              _pf : null,
-              _lang : null  // optional
-          },
+      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;
 
-          // check for nodeJS
-          hasModule = (typeof module !== 'undefined' && module.exports),
+      this._loadMixin(BarnesHutMixin);
+    }
+    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(RepulsionMixin);
 
-          // ASP.NET json date format regex
-          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
-          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
+      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;
 
-          // 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)$/,
+      this._loadMixin(HierarchialRepulsionMixin);
+    }
+    else {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
+      this.barnesHutTree = undefined;
 
-          // 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|zz?|ZZ?|.)/g,
-          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
+      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;
 
-          // 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)
-          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
-          parseTokenOrdinal = /\d{1,2}/,
+      this._loadMixin(RepulsionMixin);
+    }
+  };
 
-          //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
+  /**
+   * 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);
+      }
 
-          // 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)?)?$/,
+      // we now start the force calculation
+      this._calculateForces();
+    }
+  };
 
-          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
 
-          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/]
-          ],
-
-          // 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
-          },
-
-          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'
-          },
-
-          // format function strings
-          formatFunctions = {},
+  /**
+   * 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
 
-          // default relative time thresholds
-          relativeTimeThresholds = {
-            s: 45,   //seconds to minutes
-            m: 45,   //minutes to hours
-            h: 22,   //hours to days
-            dd: 25,  //days to month (month == 1)
-            dm: 45,  //days to months (months > 1)
-            dy: 345  //days to year
-          },
+    this._calculateGravitationalForces();
+    this._calculateNodeForces();
 
-          // tokens to ordinalize and pad
-          ordinalizeTokens = 'DDD w W M D d'.split(' '),
-          paddedTokens = 'M D H h m s w W'.split(' '),
+    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();
+        }
+      }
+    }
+  };
 
-          formatTokenFunctions = {
-              M    : function () {
-                  return this.month() + 1;
-              },
-              MMM  : function (format) {
-                  return this.lang().monthsShort(this, format);
-              },
-              MMMM : function (format) {
-                  return this.lang().months(this, format);
-              },
-              D    : function () {
-                  return this.date();
-              },
-              DDD  : function () {
-                  return this.dayOfYear();
-              },
-              d    : function () {
-                  return this.day();
-              },
-              dd   : function (format) {
-                  return this.lang().weekdaysMin(this, format);
-              },
-              ddd  : function (format) {
-                  return this.lang().weekdaysShort(this, format);
-              },
-              dddd : function (format) {
-                  return this.lang().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.lang().meridiem(this.hours(), this.minutes(), true);
-              },
-              A    : function () {
-                  return this.lang().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.zone(),
-                      b = "+";
-                  if (a < 0) {
-                      a = -a;
-                      b = "-";
-                  }
-                  return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
-              },
-              ZZ   : function () {
-                  var a = -this.zone(),
-                      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.unix();
-              },
-              Q : function () {
-                  return this.quarter();
-              }
-          },
 
-          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
+  /**
+   * 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.
+   *
+   * @private
+   */
+  exports._updateCalculationNodes = function () {
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      this.calculationNodes = {};
+      this.calculationNodeIndices = [];
 
-      // 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");
+      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);
           }
+        }
       }
 
-      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
-          };
+      for (var idx in this.calculationNodes) {
+        if (this.calculationNodes.hasOwnProperty(idx)) {
+          this.calculationNodeIndices.push(idx);
+        }
       }
+    }
+    else {
+      this.calculationNodes = this.nodes;
+      this.calculationNodeIndices = this.nodeIndices;
+    }
+  };
 
-      function deprecate(msg, fn) {
-          var firstTime = true;
-          function printMsg() {
-              if (moment.suppressDeprecationWarnings === false &&
-                      typeof console !== 'undefined' && console.warn) {
-                  console.warn("Deprecation warning: " + msg);
-              }
-          }
-          return extend(function () {
-              if (firstTime) {
-                  printMsg();
-                  firstTime = false;
-              }
-              return fn.apply(this, arguments);
-          }, fn);
-      }
 
-      function padToken(func, count) {
-          return function (a) {
-              return leftZeroFill(func.call(this, a), count);
-          };
-      }
-      function ordinalizeToken(func, period) {
-          return function (a) {
-              return this.lang().ordinal(func.call(this, a), period);
-          };
-      }
+  /**
+   * 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;
 
-      while (ordinalizeTokens.length) {
-          i = ordinalizeTokens.pop();
-          formatTokenFunctions[i + 'o'] = ordinalizeToken(formatTokenFunctions[i], i);
+    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;
       }
-      while (paddedTokens.length) {
-          i = paddedTokens.pop();
-          formatTokenFunctions[i + i] = padToken(formatTokenFunctions[i], 2);
+      else {
+        node.fx = 0;
+        node.fy = 0;
       }
-      formatTokenFunctions.DDDD = padToken(formatTokenFunctions.DDD, 3);
+    }
+  };
 
 
-      /************************************
-          Constructors
-      ************************************/
 
-      function Language() {
 
-      }
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    var edges = this.edges;
 
-      // Moment prototype object
-      function Moment(config) {
-          checkOverflow(config);
-          extend(this, config);
-      }
+    // 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.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-      // 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;
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
-          // 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;
+            if (distance == 0) {
+              distance = 0.01;
+            }
 
-          this._data = {};
+            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-          this._bubble();
-      }
+            fx = dx * springForce;
+            fy = dy * springForce;
 
-      /************************************
-          Helpers
-      ************************************/
+            edge.from.fx += fx;
+            edge.from.fy += fy;
+            edge.to.fx -= fx;
+            edge.to.fy -= fy;
+          }
+        }
+      }
+    }
+  };
 
 
-      function extend(a, b) {
-          for (var i in b) {
-              if (b.hasOwnProperty(i)) {
-                  a[i] = b[i];
-              }
-          }
 
-          if (b.hasOwnProperty("toString")) {
-              a.toString = b.toString;
-          }
 
-          if (b.hasOwnProperty("valueOf")) {
-              a.valueOf = b.valueOf;
-          }
+  /**
+   * 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;
 
-          return a;
-      }
+    // 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;
 
-      function cloneMoment(m) {
-          var result = {}, i;
-          for (i in m) {
-              if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
-                  result[i] = m[i];
-              }
-          }
+              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
 
-          return result;
-      }
+              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
 
-      function absRound(number) {
-          if (number < 0) {
-              return Math.ceil(number);
-          } else {
-              return Math.floor(number);
+              // 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);
+            }
           }
+        }
       }
+    }
+  };
 
-      // 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;
 
-          while (output.length < targetLength) {
-              output = '0' + output;
-          }
-          return (sign ? (forceSign ? '+' : '') : '-') + output;
-      }
+  /**
+   * 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;
 
-      // helper function for _.addTime and _.subtractTime
-      function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) {
-          var milliseconds = duration._milliseconds,
-              days = duration._days,
-              months = duration._months;
-          updateOffset = updateOffset == null ? true : updateOffset;
+    dx = (node1.x - node2.x);
+    dy = (node1.y - node2.y);
+    distance = 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);
-          }
-      }
+    if (distance == 0) {
+      distance = 0.01;
+    }
 
-      // check if is an array
-      function isArray(input) {
-          return Object.prototype.toString.call(input) === '[object Array]';
-      }
+    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-      function isDate(input) {
-          return  Object.prototype.toString.call(input) === '[object Date]' ||
-                  input instanceof Date;
-      }
+    fx = dx * springForce;
+    fy = dy * springForce;
 
-      // 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;
-      }
+    node1.fx += fx;
+    node1.fy += fy;
+    node2.fx -= fx;
+    node2.fy -= fy;
+  };
 
-      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;
+  /**
+   * 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);
 
-          for (prop in inputObject) {
-              if (inputObject.hasOwnProperty(prop)) {
-                  normalizedProp = normalizeUnits(prop);
-                  if (normalizedProp) {
-                      normalizedInput[normalizedProp] = inputObject[prop];
-                  }
-              }
-          }
+      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);
 
-          return normalizedInput;
+      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");
+
+      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");
+
+      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");
+
+      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;
       }
 
-      function makeList(field) {
-          var count, setter;
+      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
+      var graph_generateOptions = document.getElementById("graph_generateOptions");
 
-          if (field.indexOf('week') === 0) {
-              count = 7;
-              setter = 'day';
-          }
-          else if (field.indexOf('month') === 0) {
-              count = 12;
-              setter = 'month';
-          }
-          else {
-              return;
-          }
+      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";
+      }
 
-          moment[field] = function (format, index) {
-              var i, getter,
-                  method = moment.fn._lang[field],
-                  results = [];
 
-              if (typeof format === 'number') {
-                  index = format;
-                  format = undefined;
-              }
+      switchConfigurations.apply(this);
 
-              getter = function (i) {
-                  var m = moment().utc().set(setter, i);
-                  return method.call(moment.fn._lang, m, format || '');
-              };
+      radioButton1.onchange = switchConfigurations.bind(this);
+      radioButton2.onchange = switchConfigurations.bind(this);
+      radioButton3.onchange = switchConfigurations.bind(this);
+    }
+  };
 
-              if (index != null) {
-                  return getter(index);
-              }
-              else {
-                  for (i = 0; i < count; i++) {
-                      results.push(getter(i));
-                  }
-                  return results;
-              }
-          };
-      }
+  /**
+   * 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;
+    }
+  };
 
-      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 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";}
 
-          return value;
-      }
+    this._configureSmoothCurves(false);
+  }
 
-      function daysInMonth(year, month) {
-          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+  /**
+   * 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();
+    }
+    else {
+      this.repositionNodes();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-      function weeksInYear(year, dow, doy) {
-          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
+  /**
+   *  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 += '}}'
       }
-
-      function daysInYear(year) {
-          return isLeapYear(year) ? 366 : 365;
+      if (this.constants.smoothCurves.enabled != this.backupConstants.smoothCurves.enabled) {
+        if (optionsSpecific.length == 0) {options = "var options = {";}
+        else {options += ", "}
+        options += "smoothCurves: " + this.constants.smoothCurves.enabled;
       }
-
-      function isLeapYear(year) {
-          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+      if (options != "No options are required, default values used.") {
+        options += '};'
       }
-
-      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] > 23 ? 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 (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
-                  overflow = DATE;
-              }
-
-              m._pf.overflow = overflow;
+    }
+    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 += '}}'
       }
-
-      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;
-              }
+      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 += ", ";
           }
-          return m._isValid;
+        }
+        options += '}},';
       }
-
-      function normalizeLanguage(key) {
-          return key ? key.toLowerCase().replace('_', '-') : key;
+      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 += '}'
       }
-
-      // Return a moment from input, that is local/utc/zone equivalent to model.
-      function makeAs(input, model) {
-          return model._isUTC ? moment(input).zone(model._offset || 0) :
-              moment(input).local();
+      else {
+        options += "enabled:true}";
       }
+      options += '};'
+    }
 
-      /************************************
-          Languages
-      ************************************/
 
+    this.optionsDiv.innerHTML = options;
+  }
 
-      extend(Language.prototype, {
+  /**
+   * 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();
+  }
 
-          set : function (config) {
-              var prop, i;
-              for (i in config) {
-                  prop = config[i];
-                  if (typeof prop === 'function') {
-                      this[i] = prop;
-                  } else {
-                      this['_' + i] = prop;
-                  }
-              }
-          },
 
-          _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          months : function (m) {
-              return this._months[m.month()];
-          },
+  /**
+   * 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;
 
-          _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          monthsShort : function (m) {
-              return this._monthsShort[m.month()];
-          },
+    if (map instanceof Array) {
+      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));
+    }
 
-          monthsParse : function (monthName) {
-              var i, mom, regex;
+    if (constantsVariableName == "hierarchicalLayout_direction" ||
+      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
+      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
+      this._setupHierarchicalLayout();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-              if (!this._monthsParse) {
-                  this._monthsParse = [];
-              }
 
-              for (i = 0; i < 12; i++) {
-                  // make the regex if we don't have it already
-                  if (!this._monthsParse[i]) {
-                      mom = moment.utc([2000, i]);
-                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
-                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
-                  }
-                  // test the regex
-                  if (this._monthsParse[i].test(monthName)) {
-                      return i;
-                  }
-              }
-          },
+/***/ },
+/* 47 */
+/***/ function(module, exports, __webpack_require__) {
 
-          _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdays : function (m) {
-              return this._weekdays[m.day()];
-          },
+  /**
+   * Creation of the ClusterMixin var.
+   *
+   * This contains all the functions the Network object can use to employ clustering
+   */
 
-          _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysShort : function (m) {
-              return this._weekdaysShort[m.day()];
-          },
+  /**
+  * 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);
 
-          _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          weekdaysMin : function (m) {
-              return this._weekdaysMin[m.day()];
-          },
+   // updates the lables after clustering
+   this.updateLabels();
 
-          weekdaysParse : function (weekdayName) {
-              var i, mom, regex;
+   // 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();
+  };
 
-              if (!this._weekdaysParse) {
-                  this._weekdaysParse = [];
-              }
+  /**
+   * 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;
 
-              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;
-                  }
-              }
-          },
+    var maxLevels = 50;
+    var level = 0;
 
-          _longDateFormat : {
-              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;
-          },
+    // we first cluster the hubs, then we pull in the outliers, repeat
+    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+      if (level % 3 == 0) {
+        this.forceAggregateHubs(true);
+        this.normalizeClusterLevels();
+      }
+      else {
+        this.increaseClusterLevel(); // this also includes a cluster normalization
+      }
 
-          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');
-          },
+      numberOfNodes = this.nodeIndices.length;
+      level += 1;
+    }
 
-          _meridiemParse : /[ap]\.?m?\.?/i,
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'pm' : 'PM';
-              } else {
-                  return isLower ? 'am' : 'AM';
-              }
-          },
+    // after the clustering we reposition the nodes to reduce the initial chaos
+    if (level > 0 && reposition == true) {
+      this.repositionNodes();
+    }
+    this._updateCalculationNodes();
+  };
 
-          _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) {
-              var output = this._calendar[key];
-              return typeof output === 'function' ? output.apply(mom) : output;
-          },
+  /**
+   * 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;
 
-          _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);
-          },
-          pastFuture : function (diff, output) {
-              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
-              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
-          },
+      // we decluster until we reach a decent number of nodes
+      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+        this.decreaseClusterLevel();
+        level += 1;
+      }
 
-          ordinal : function (number) {
-              return this._ordinal.replace("%d", number);
-          },
-          _ordinal : "%d",
+    }
+    else {
+      this._expandClusterNode(node,false,true);
 
-          preparse : function (string) {
-              return string;
-          },
+      // update the index list, dynamic edges and labels
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      this._updateCalculationNodes();
+      this.updateLabels();
+    }
 
-          postformat : function (string) {
-              return string;
-          },
+    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+    if (this.moving != isMovingBeforeClustering) {
+      this.start();
+    }
+  };
 
-          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 calls the updateClustes with default arguments
+   */
+  exports.updateClustersDefault = function() {
+    if (this.constants.clustering.enabled == true) {
+      this.updateClusters(0,false,false);
+    }
+  };
 
-          _invalidDate: 'Invalid date',
-          invalidDate: function () {
-              return this._invalidDate;
-          }
-      });
 
-      // Loads a language definition into the `languages` cache.  The function
-      // takes a key and optionally values.  If not in the browser and no values
-      // are provided, it will load the language file module.  As a convenience,
-      // this function also returns the language values.
-      function loadLang(key, values) {
-          values.abbr = key;
-          if (!languages[key]) {
-              languages[key] = new Language();
-          }
-          languages[key].set(values);
-          return languages[key];
-      }
+  /**
+   * 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);
+  };
 
-      // Remove a language from the `languages` cache. Mostly useful in tests.
-      function unloadLang(key) {
-          delete languages[key];
-      }
 
-      // Determines which language definition to use and returns it.
-      //
-      // With no parameters, it will return the global language.  If you
-      // pass in a language key, such as 'en', it will return the
-      // definition for 'en', so long as 'en' has already been loaded using
-      // moment.lang.
-      function getLangDefinition(key) {
-          var i = 0, j, lang, next, split,
-              get = function (k) {
-                  if (!languages[k] && hasModule) {
-                      try {
-                          __webpack_require__(55)("./" + k);
-                      } catch (e) { }
-                  }
-                  return languages[k];
-              };
+  /**
+   * 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);
+  };
 
-          if (!key) {
-              return moment.fn._lang;
-          }
 
-          if (!isArray(key)) {
-              //short-circuit everything else
-              lang = get(key);
-              if (lang) {
-                  return lang;
-              }
-              key = [key];
-          }
+  /**
+   * 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;
 
-          //pick the language 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
-          while (i < key.length) {
-              split = normalizeLanguage(key[i]).split('-');
-              j = split.length;
-              next = normalizeLanguage(key[i + 1]);
-              next = next ? next.split('-') : null;
-              while (j > 0) {
-                  lang = get(split.slice(0, j).join('-'));
-                  if (lang) {
-                      return lang;
-                  }
-                  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 moment.fn._lang;
+    // 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();
       }
+    }
+    this._updateNodeIndexList();
 
-      /************************************
-          Formatting
-      ************************************/
+    // 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();
+    }
 
-      function removeFormattingTokens(input) {
-          if (input.match(/\[[\s\S]/)) {
-              return input.replace(/^\[|\]$/g, "");
-          }
-          return input.replace(/\\/g, "");
-      }
+    this.previousScale = this.scale;
 
-      function makeFormatFunction(format) {
-          var array = format.match(formattingTokens), i, length;
+    // rest of the update the index list, dynamic edges and labels
+    this._updateDynamicEdges();
+    this.updateLabels();
 
-          for (i = 0, length = array.length; i < length; i++) {
-              if (formatTokenFunctions[array[i]]) {
-                  array[i] = formatTokenFunctions[array[i]];
-              } else {
-                  array[i] = removeFormattingTokens(array[i]);
-              }
-          }
+    // 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();
+    }
 
-          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;
-          };
+    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();
       }
+    }
 
-      // format date using native date object
-      function formatMoment(m, format) {
-
-          if (!m.isValid()) {
-              return m.lang().invalidDate();
-          }
-
-          format = expandFormat(format, m.lang());
+    this._updateCalculationNodes();
+  };
 
-          if (!formatFunctions[format]) {
-              formatFunctions[format] = makeFormatFunction(format);
-          }
+  /**
+   * 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)
 
-          return formatFunctions[format](m);
-      }
+    }
+  };
 
-      function expandFormat(format, lang) {
-          var i = 5;
+  /**
+   * this functions starts clustering by hubs
+   * The minimum hub threshold is set globally
+   *
+   * @private
+   */
+  exports._aggregateHubs = function(force) {
+    this._getHubSize();
+    this._formClustersByHub(force,false);
+  };
 
-          function replaceLongDateFormatTokens(input) {
-              return lang.longDateFormat(input) || input;
-          }
 
-          localFormattingTokens.lastIndex = 0;
-          while (i >= 0 && localFormattingTokens.test(format)) {
-              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
-              localFormattingTokens.lastIndex = 0;
-              i -= 1;
-          }
+  /**
+   * This function is fired by keypress. It forces hubs to form.
+   *
+   */
+  exports.forceAggregateHubs = function(doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
 
-          return format;
-      }
+    this._aggregateHubs(true);
 
+    // update the index list, dynamic edges and labels
+    this._updateNodeIndexList();
+    this._updateDynamicEdges();
+    this.updateLabels();
 
-      /************************************
-          Parsing
-      ************************************/
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length != amountOfNodes) {
+      this.clusterSession += 1;
+    }
 
+    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();
+      }
+    }
+  };
 
-      // 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 getLangDefinition(config._l)._meridiemParse;
-          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 parseTokenOrdinal;
-          default :
-              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
-              return a;
+  /**
+   * 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);
           }
+        }
       }
+    }
+  };
 
-      function timezoneMinutesFromString(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 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();
+    }
+  };
 
-      // function to convert string input to date
-      function addTimeToArrayFromToken(token, input, config) {
-          var a, datePartArray = config._a;
+  /**
+   * 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;
+      }
+      recursive = openAll ? true : recursive;
 
-          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 = getLangDefinition(config._l).monthsParse(input);
-              // 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, 10));
-              }
-              break;
-          // DAY OF YEAR
-          case 'DDD' : // fall through to DDDD
-          case 'DDDD' :
-              if (input != null) {
-                  config._dayOfYear = toInt(input);
-              }
+      // 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];
 
-              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._isPm = getLangDefinition(config._l).isPM(input);
-              break;
-          // 24 HOUR
-          case 'H' : // fall through to hh
-          case 'HH' : // fall through to hh
-          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 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 = timezoneMinutesFromString(input);
-              break;
-          // WEEKDAY - human
-          case 'dd':
-          case 'ddd':
-          case 'dddd':
-              a = getLangDefinition(config._l).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;
+            // 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);
               }
-              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);
+            }
+            else {
+              if (this._nodeInActiveArea(parentNode)) {
+                this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
               }
-              break;
-          case 'gg':
-          case 'GG':
-              config._w = config._w || {};
-              config._w[token] = moment.parseTwoDigitYear(input);
+            }
           }
+        }
       }
+    }
+  };
 
-      function dayOfYearFromWeekInfo(config) {
-          var w, weekYear, week, weekday, dow, doy, temp, lang;
+  /**
+   * 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];
 
-          w = config._w;
-          if (w.GG != null || w.W != null || w.E != null) {
-              dow = 1;
-              doy = 4;
+    // 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();
 
-              // 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 {
-              lang = getLangDefinition(config._l);
-              dow = lang._week.dow;
-              doy = lang._week.doy;
+      // put the child node back in the global nodes object
+      this.nodes[containedNodeId] = childNode;
 
-              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
-              week = dfl(w.w, 1);
+      // release the contained edges from this childNode back into the global edges
+      this._releaseContainedEdges(parentNode,childNode);
 
-              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);
+      // reconnect rerouted edges to the childNode
+      this._connectEdgeBackToChild(parentNode,childNode);
 
-          config._a[YEAR] = temp.year;
-          config._dayOfYear = temp.dayOfYear;
-      }
+      // validate all edges in dynamicEdges
+      this._validateEdges(parentNode);
 
-      // 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;
+      // undo the changes from the clustering operation on the parent node
+      parentNode.mass -= childNode.mass;
+      parentNode.clusterSize -= childNode.clusterSize;
+      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
 
-          if (config._d) {
-              return;
-          }
+      // 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());
 
-          currentDate = currentDateArray(config);
+      // remove node from the list
+      delete parentNode.containedNodes[containedNodeId];
 
-          //compute day of the year from weeks and weekdays
-          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
-              dayOfYearFromWeekInfo(config);
+      // 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;
           }
+        }
+      }
+      // if there are no others, remove the cluster session from the list
+      if (othersPresent == false) {
+        parentNode.clusterSessions.pop();
+      }
 
-          //if the day of the year is set, figure out what it is
-          if (config._dayOfYear) {
-              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
-
-              if (config._dayOfYear > daysInYear(yearToUse)) {
-                  config._pf._overflowDayOfYear = true;
-              }
+      this._repositionBezierNodes(childNode);
+  //      this._repositionBezierNodes(parentNode);
 
-              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
-              config._a[MONTH] = date.getUTCMonth();
-              config._a[DATE] = date.getUTCDate();
-          }
+      // remove the clusterSession from the child node
+      childNode.clusterSession = 0;
 
-          // 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];
-          }
+      // recalculate the size of the node on the next time the node is rendered
+      parentNode.clearSizeCache();
 
-          // 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];
-          }
+      // restart the simulation to reorganise all nodes
+      this.moving = true;
+    }
 
-          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
-          // Apply timezone offset from input. The actual zone can be changed
-          // with parseZone.
-          if (config._tzm != null) {
-              config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
-          }
-      }
+    // check if a further expansion step is possible if recursivity is enabled
+    if (recursive == true) {
+      this._expandClusterNode(childNode,recursive,force,openAll);
+    }
+  };
 
-      function dateFromObject(config) {
-          var normalizedInput;
 
-          if (config._d) {
-              return;
-          }
+  /**
+   * 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();
+    }
+  };
 
-          normalizedInput = normalizeObjectUnits(config._i);
-          config._a = [
-              normalizedInput.year,
-              normalizedInput.month,
-              normalizedInput.day,
-              normalizedInput.hour,
-              normalizedInput.minute,
-              normalizedInput.second,
-              normalizedInput.millisecond
-          ];
 
-          dateFromConfig(config);
-      }
+  /**
+   * 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();
+    }
+  };
 
-      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) {
+  /**
+   * 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;
 
-          if (config._f === moment.ISO_8601) {
-              parseISO(config);
-              return;
-          }
+    // 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);
 
-          config._a = [];
-          config._pf.empty = true;
 
-          // This array is used to make a Date, either with `new Date` or `Date.UTC`
-          var lang = getLangDefinition(config._l),
-              string = '' + config._i,
-              i, parsedInput, tokens, token, skipped,
-              stringLength = string.length,
-              totalParsedInputLength = 0;
-
-          tokens = expandFormat(config._f, lang).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;
+            if (length < minLength) {
+              // first check which node is larger
+              var parentNode = edge.from;
+              var childNode = edge.to;
+              if (edge.to.mass > edge.from.mass) {
+                parentNode = edge.to;
+                childNode = edge.from;
               }
-              // 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);
+
+              if (childNode.dynamicEdgesLength == 1) {
+                this._addToCluster(parentNode,childNode,false);
               }
-              else if (config._strict && !parsedInput) {
-                  config._pf.unusedTokens.push(token);
+              else if (parentNode.dynamicEdgesLength == 1) {
+                this._addToCluster(childNode,parentNode,false);
               }
+            }
           }
-
-          // add remaining unparsed input length to the string
-          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
-          if (string.length > 0) {
-              config._pf.unusedInput.push(string);
-          }
-
-          // handle am pm
-          if (config._isPm && config._a[HOUR] < 12) {
-              config._a[HOUR] += 12;
-          }
-          // if is 12 am, change hours to 0
-          if (config._isPm === false && config._a[HOUR] === 12) {
-              config._a[HOUR] = 0;
-          }
-
-          dateFromConfig(config);
-          checkOverflow(config);
-      }
-
-      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, '\\$&');
+        }
       }
+    }
+  };
 
-      // date from string and array of format strings
-      function makeDateFromStringAndArray(config) {
-          var tempConfig,
-              bestMoment,
+  /**
+   * 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];
 
-              scoreToBeat,
-              i,
-              currentScore;
+        // the edges can be swallowed by another decrease
+        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];
 
-          if (config._f.length === 0) {
-              config._pf.invalidFormat = true;
-              config._d = new Date(NaN);
-              return;
+          // group to the largest node
+          if (childNode.id != parentNode.id) {
+            if (parentNode.mass > childNode.mass) {
+              this._addToCluster(parentNode,childNode,true);
+            }
+            else {
+              this._addToCluster(childNode,parentNode,true);
+            }
           }
+        }
+      }
+    }
+  };
 
-          for (i = 0; i < config._f.length; i++) {
-              currentScore = 0;
-              tempConfig = extend({}, config);
-              tempConfig._pf = defaultParsingFlags();
-              tempConfig._f = config._f[i];
-              makeDateFromStringAndFormat(tempConfig);
-
-              if (!isValid(tempConfig)) {
-                  continue;
-              }
-
-              // if there is any input that was not parsed add a penalty for that format
-              currentScore += tempConfig._pf.charsLeftOver;
-
-              //or tokens
-              currentScore += tempConfig._pf.unusedTokens.length * 10;
 
-              tempConfig._pf.score = currentScore;
+  /**
+   * 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 (scoreToBeat == null || currentScore < scoreToBeat) {
-                  scoreToBeat = currentScore;
-                  bestMoment = tempConfig;
-              }
-          }
 
-          extend(config, bestMoment || tempConfig);
+        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+          smallestNeighbour = neighbour.clusterSessions.length;
+          smallestNeighbourNode = neighbour;
+        }
       }
+    }
 
-      // date from iso format
-      function parseISO(config) {
-          var i, l,
-              string = config._i,
-              match = isoRegex.exec(string);
+    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+      this._addToCluster(neighbour, node, true);
+    }
+  };
 
-          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 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 makeDateFromInput(config) {
-          var input = config._i,
-              matched = aspNetJsonRegex.exec(input);
+  /**
+   * 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;
+    }
+    // we decide if the node is a hub
+    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
+      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+      // initialize variables
+      var dx,dy,length;
+      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+      var allowCluster = false;
 
-          if (input === undefined) {
-              config._d = new Date();
-          } else if (matched) {
-              config._d = new Date(+matched[1]);
-          } else if (typeof input === 'string') {
-              makeDateFromString(config);
-          } else if (isArray(input)) {
-              config._a = input.slice(0);
-              dateFromConfig(config);
-          } else if (isDate(input)) {
-              config._d = new Date(+input);
-          } else if (typeof(input) === 'object') {
-              dateFromObject(config);
-          } else if (typeof(input) === 'number') {
-              // from milliseconds
-              config._d = new Date(input);
-          } else {
-              moment.createFromInputFallback(config);
-          }
+      // 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 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 the hub clustering is not forces, 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);
 
-          //the date constructor doesn't accept years < 1970
-          if (y < 1970) {
-              date.setFullYear(y);
+                if (length < minLength) {
+                  allowCluster = true;
+                  break;
+                }
+              }
+            }
           }
-          return date;
+        }
       }
 
-      function makeUTCDate(y) {
-          var date = new Date(Date.UTC.apply(null, arguments));
-          if (y < 1970) {
-              date.setUTCFullYear(y);
+      // start the clustering if allowed
+      if ((!force && allowCluster) || force) {
+        // we loop over all edges INITIALLY connected to this hub
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          edge = this.edges[edgesIdarray[j]];
+          // the edge can be clustered by this function in a previous loop
+          if (edge !== undefined) {
+            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+            // 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);
+            }
           }
-          return date;
+        }
       }
+    }
+  };
 
-      function parseWeekday(input, language) {
-          if (typeof input === 'string') {
-              if (!isNaN(input)) {
-                  input = parseInt(input, 10);
-              }
-              else {
-                  input = language.weekdaysParse(input);
-                  if (typeof input !== 'number') {
-                      return null;
-                  }
-              }
-          }
-          return input;
-      }
 
-      /************************************
-          Relative Time
-      ************************************/
 
+  /**
+   * 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;
 
-      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
-      function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
-          return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+    // 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
+        this._addToContainedEdges(parentNode,childNode,edge);
       }
-
-      function relativeTime(milliseconds, withoutSuffix, lang) {
-          var seconds = round(Math.abs(milliseconds) / 1000),
-              minutes = round(seconds / 60),
-              hours = round(minutes / 60),
-              days = round(hours / 24),
-              years = round(days / 365),
-              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.dd && ['dd', days] ||
-                  days <= relativeTimeThresholds.dm && ['M'] ||
-                  days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
-                  years === 1 && ['y'] || ['yy', years];
-          args[2] = withoutSuffix;
-          args[3] = milliseconds > 0;
-          args[4] = lang;
-          return substituteTimeAgo.apply({}, args);
+      else {
+        this._connectEdgeToCluster(parentNode,childNode,edge);
       }
+    }
+    // a contained node has no dynamic edges.
+    childNode.dynamicEdges = [];
 
-
-      /************************************
-          Week of Year
-      ************************************/
+    // remove circular edges from clusters
+    this._containCircularEdgesFromNode(parentNode,childNode);
 
 
-      // 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;
+    // remove the childNode from the global nodes object
+    delete this.nodes[childNode.id];
 
+    // update the properties of the child and parent
+    var massBefore = parentNode.mass;
+    childNode.clusterSession = this.clusterSession;
+    parentNode.mass += childNode.mass;
+    parentNode.clusterSize += childNode.clusterSize;
+    parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
 
-          if (daysToDayOfWeek > end) {
-              daysToDayOfWeek -= 7;
-          }
+    // 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);
+    }
 
-          if (daysToDayOfWeek < end - 7) {
-              daysToDayOfWeek += 7;
-          }
+    // forced clusters only open from screen size and double tap
+    if (force == true) {
+      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
+      parentNode.formationScale = 0;
+    }
+    else {
+      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+    }
 
-          adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
-          return {
-              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
-              year: adjustedMoment.year()
-          };
-      }
+    // recalculate the size of the node on the next time the node is rendered
+    parentNode.clearSizeCache();
 
-      //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;
+    // set the pop-out scale for the childnode
+    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
 
-          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;
+    // nullify the movement velocity of the child, this is to avoid hectic behaviour
+    childNode.clearVelocity();
 
-          return {
-              year: dayOfYear > 0 ? year : year - 1,
-              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
-          };
-      }
+    // the mass has altered, preservation of energy dictates the velocity to be updated
+    parentNode.updateVelocity(massBefore);
 
-      /************************************
-          Top Level Functions
-      ************************************/
+    // restart the simulation to reorganise all nodes
+    this.moving = true;
+  };
 
-      function makeMoment(config) {
-          var input = config._i,
-              format = config._f;
 
-          if (input === null || (format === undefined && input === '')) {
-              return moment.invalid({nullInput: true});
-          }
+  /**
+   * 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;
 
-          if (typeof input === 'string') {
-              config._i = input = getLangDefinition().preparse(input);
+      // 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;
+            }
           }
+        }
+      }
+      node.dynamicEdgesLength -= correction;
+    }
+  };
 
-          if (moment.isMoment(input)) {
-              config = cloneMoment(input);
 
-              config._d = new Date(+input._d);
-          } else if (format) {
-              if (isArray(format)) {
-                  makeDateFromStringAndArray(config);
-              } else {
-                  makeDateFromStringAndFormat(config);
-              }
-          } else {
-              makeDateFromInput(config);
-          }
+  /**
+   * 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);
 
-          return new Moment(config);
-      }
+    // remove the edge from the global edges object
+    delete this.edges[edge.id];
 
-      moment = function (input, format, lang, strict) {
-          var c;
+    // 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;
+      }
+    }
+  };
 
-          if (typeof(lang) === "boolean") {
-              strict = lang;
-              lang = 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 = lang;
-          c._strict = strict;
-          c._isUTC = false;
-          c._pf = defaultParsingFlags();
+  /**
+   * 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
 
-          return makeMoment(c);
-      };
+        edge.originalFromId.push(childNode.id);
+        edge.from = parentNode;
+        edge.fromId = parentNode.id;
+      }
 
-      moment.suppressDeprecationWarnings = false;
+      this._addToReroutedEdges(parentNode,childNode,edge);
+    }
+  };
 
-      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);
-      });
 
-      // 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;
+  /**
+   * 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);
       }
+    }
+  };
 
-      moment.min = function () {
-          var args = [].slice.call(arguments, 0);
 
-          return pickBy('isBefore', args);
-      };
+  /**
+   * 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);
 
-      moment.max = function () {
-          var args = [].slice.call(arguments, 0);
+    // this edge becomes part of the dynamicEdges of the cluster node
+    parentNode.dynamicEdges.push(edge);
+   };
 
-          return pickBy('isAfter', args);
-      };
 
-      // creating with utc
-      moment.utc = function (input, format, lang, strict) {
-          var c;
 
-          if (typeof(lang) === "boolean") {
-              strict = lang;
-              lang = undefined;
+  /**
+   * 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;
+        }
+
+        // append this edge to the list of edges connecting to the childnode
+        childNode.dynamicEdges.push(edge);
+
+        // 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;
           }
-          // 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 = lang;
-          c._i = input;
-          c._f = format;
-          c._strict = strict;
-          c._pf = defaultParsingFlags();
+        }
+      }
+      // remove the entry from the rerouted edges
+      delete parentNode.reroutedEdges[childNode.id];
+    }
+  };
 
-          return makeMoment(c).utc();
-      };
 
-      // creating with unix timestamp (in seconds)
-      moment.unix = function (input) {
-          return moment(input * 1000);
-      };
+  /**
+   * 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) {
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
+        parentNode.dynamicEdges.splice(i,1);
+      }
+    }
+  };
 
-      // duration
-      moment.duration = function (input, key) {
-          var duration = input,
-              // matching against regexp is expensive, do it on demand
-              match = null,
-              sign,
-              ret,
-              parseIso;
 
-          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])
-              };
-          }
+  /**
+   * 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];
 
-          ret = new Duration(duration);
+      // put the edge back in the global edges object
+      this.edges[edge.id] = edge;
 
-          if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
-              ret._lang = input._lang;
-          }
+      // 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];
 
-          return ret;
-      };
+  };
 
-      // version number
-      moment.version = VERSION;
 
-      // default format
-      moment.defaultFormat = isoFormat;
 
-      // constant that refers to the ISO standard
-      moment.ISO_8601 = function () {};
 
-      // Plugins that add properties should also add the key here (null value),
-      // so we can properly clone ourselves.
-      moment.momentProperties = momentProperties;
+  // ------------------- UTILITY FUNCTIONS ---------------------------- //
 
-      // 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 () {};
 
-      // This function allows you to set a threshold for relative time strings
-      moment.relativeTimeThreshold = function(threshold, limit) {
-        if (relativeTimeThresholds[threshold] === undefined) {
-          return false;
+  /**
+   * 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),"]");
         }
-        relativeTimeThresholds[threshold] = limit;
-        return true;
-      };
+      }
+    }
 
-      // This function will load languages and then set the global language.  If
-      // no arguments are passed in, it will simply return the current global
-      // language key.
-      moment.lang = function (key, values) {
-          var r;
-          if (!key) {
-              return moment.fn._lang._abbr;
+    // 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;
           }
-          if (values) {
-              loadLang(normalizeLanguage(key), values);
-          } else if (values === null) {
-              unloadLang(key);
-              key = 'en';
-          } else if (!languages[key]) {
-              getLangDefinition(key);
+          else {
+            node.label = String(node.id);
           }
-          r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
-          return r._abbr;
-      };
+        }
+      }
+    }
 
-      // returns language data
-      moment.langData = function (key) {
-          if (key && key._lang && key._lang._abbr) {
-              key = key._lang._abbr;
-          }
-          return getLangDefinition(key);
-      };
+  //    /* Debug Override */
+  //    for (nodeId in this.nodes) {
+  //      if (this.nodes.hasOwnProperty(nodeId)) {
+  //        node = this.nodes[nodeId];
+  //        node.label = String(node.level);
+  //      }
+  //    }
 
-      // compare moment object
-      moment.isMoment = function (obj) {
-          return obj instanceof Moment ||
-              (obj != null &&  obj.hasOwnProperty('_isAMomentObject'));
-      };
+  };
 
-      // for typechecking Duration objects
-      moment.isDuration = function (obj) {
-          return obj instanceof Duration;
-      };
 
-      for (i = lists.length - 1; i >= 0; --i) {
-          makeList(lists[i]);
-      }
+  /**
+   * 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;
 
-      moment.normalizeUnits = function (units) {
-          return normalizeUnits(units);
-      };
+    // 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;}
+      }
+    }
 
-      moment.invalid = function (flags) {
-          var m = moment.utc(NaN);
-          if (flags != null) {
-              extend(m._pf, flags);
-          }
-          else {
-              m._pf.userInvalidated = true;
+    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]);
           }
+        }
+      }
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      // if a cluster was formed, we increase the clusterSession
+      if (this.nodeIndices.length != amountOfNodes) {
+        this.clusterSession += 1;
+      }
+    }
+  };
 
-          return m;
-      };
 
-      moment.parseZone = function () {
-          return moment.apply(null, arguments).parseZone();
-      };
 
-      moment.parseTwoDigitYear = function (input) {
-          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
-      };
+  /**
+   * 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
+      )
+  };
 
-      /************************************
-          Moment Prototype
-      ************************************/
 
+  /**
+   * 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.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);
+      }
+    }
+  };
 
-      extend(moment.fn = Moment.prototype, {
 
-          clone : function () {
-              return moment(this);
-          },
+  /**
+   * 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;
 
-          valueOf : function () {
-              return +this._d + ((this._offset || 0) * 60000);
-          },
+    for (var i = 0; i < this.nodeIndices.length; i++) {
 
-          unix : function () {
-              return Math.floor(+this / 1000);
-          },
+      var node = this.nodes[this.nodeIndices[i]];
+      if (node.dynamicEdgesLength > largestHub) {
+        largestHub = node.dynamicEdgesLength;
+      }
+      average += node.dynamicEdgesLength;
+      averageSquared += Math.pow(node.dynamicEdgesLength,2);
+      hubCounter += 1;
+    }
+    average = average / hubCounter;
+    averageSquared = averageSquared / hubCounter;
 
-          toString : function () {
-              return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
-          },
+    var variance = averageSquared - Math.pow(average,2);
 
-          toDate : function () {
-              return this._offset ? new Date(+this) : this._d;
-          },
+    var standardDeviation = Math.sqrt(variance);
 
-          toISOString : function () {
-              var m = moment(this).utc();
-              if (0 < m.year() && m.year() <= 9999) {
-                  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]');
-              }
-          },
+    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-          toArray : function () {
-              var m = this;
-              return [
-                  m.year(),
-                  m.month(),
-                  m.date(),
-                  m.hours(),
-                  m.minutes(),
-                  m.seconds(),
-                  m.milliseconds()
-              ];
-          },
+    // always have at least one to cluster
+    if (this.hubThreshold > largestHub) {
+      this.hubThreshold = largestHub;
+    }
 
-          isValid : function () {
-              return isValid(this);
-          },
+  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
+  //  console.log("hubThreshold:",this.hubThreshold);
+  };
 
-          isDSTShifted : function () {
 
-              if (this._a) {
-                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
-              }
+  /**
+   * 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;
+          }
+        }
+      }
+    }
+  };
 
-              return false;
-          },
+  /**
+   * 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 chains/total;
+  };
 
-          parsingFlags : function () {
-              return extend({}, this._pf);
-          },
 
-          invalidAt: function () {
-              return this._pf.overflow;
-          },
+/***/ },
+/* 48 */
+/***/ function(module, exports, __webpack_require__) {
 
-          utc : function () {
-              return this.zone(0);
-          },
+  var util = __webpack_require__(1);
 
-          local : function () {
-              this.zone(0);
-              this._isUTC = false;
-              return this;
-          },
+  /**
+   * 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.
+   */
 
-          format : function (inputString) {
-              var output = formatMoment(this, inputString || moment.defaultFormat);
-              return this.lang().postformat(output);
-          },
+  /**
+   * 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;
+  };
 
-          add : function (input, val) {
-              var dur;
-              // switch args to support add('s', 1) and add(1, 's')
-              if (typeof input === 'string' && typeof val === 'string') {
-                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
-              } else if (typeof input === 'string') {
-                  dur = moment.duration(+val, input);
-              } else {
-                  dur = moment.duration(input, val);
-              }
-              addOrSubtractDurationFromMoment(this, dur, 1);
-              return this;
-          },
 
-          subtract : function (input, val) {
-              var dur;
-              // switch args to support subtract('s', 1) and subtract(1, 's')
-              if (typeof input === 'string' && typeof val === 'string') {
-                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
-              } else if (typeof input === 'string') {
-                  dur = moment.duration(+val, input);
-              } else {
-                  dur = moment.duration(input, val);
-              }
-              addOrSubtractDurationFromMoment(this, dur, -1);
-              return this;
-          },
+  /**
+   *  /**
+   * 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);
+    }
+  };
 
-          diff : function (input, units, asFloat) {
-              var that = makeAs(input, this),
-                  zoneDiff = (this.zone() - that.zone()) * 6e4,
-                  diff, output;
 
-              units = normalizeUnits(units);
+  /**
+   * 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"];
+  };
 
-              if (units === 'year' || units === 'month') {
-                  // average number of days in the months in the given dates
-                  diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
-                  // difference in months
-                  output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
-                  // adjust by taking difference in days, average number of days
-                  // and dst in the given months.
-                  output += ((this - moment(this).startOf('month')) -
-                          (that - moment(that).startOf('month'))) / diff;
-                  // same as above but with zones, to negate all dst
-                  output -= ((this.zone() - moment(this).startOf('month').zone()) -
-                          (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
-                  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(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
-          },
+  /**
+   * 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"];
+  };
 
-          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 zone'd 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.lang().calendar(format, this));
-          },
+  /**
+   * 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"];
+  };
 
-          isLeapYear : function () {
-              return isLeapYear(this.year());
-          },
 
-          isDST : function () {
-              return (this.zone() < this.clone().month(0).zone() ||
-                  this.zone() < this.clone().month(5).zone());
-          },
+  /**
+   * 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());
+  };
 
-          day : function (input) {
-              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
-              if (input != null) {
-                  input = parseWeekday(input, this.lang());
-                  return this.add({ d : input - day });
-              } else {
-                  return day;
-              }
-          },
 
-          month : makeAccessor('Month', true),
+  /**
+   * This function returns the currently active sector Id
+   *
+   * @returns {String}
+   * @private
+   */
+  exports._sector = function() {
+    return this.activeSector[this.activeSector.length-1];
+  };
 
-          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);
-              }
+  /**
+   * 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.');
+    }
+  };
 
-              // quarters are also special
-              if (units === 'quarter') {
-                  this.month(Math.floor(this.month() / 3) * 3);
-              }
 
-              return this;
-          },
+  /**
+   * 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);
+  };
 
-          endOf: function (units) {
-              units = normalizeUnits(units);
-              return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
-          },
 
-          isAfter: function (input, units) {
-              units = typeof units !== 'undefined' ? units : 'millisecond';
-              return +this.clone().startOf(units) > +moment(input).startOf(units);
-          },
+  /**
+   * 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();
+  };
 
-          isBefore: function (input, units) {
-              units = typeof units !== 'undefined' ? units : 'millisecond';
-              return +this.clone().startOf(units) < +moment(input).startOf(units);
-          },
 
-          isSame: function (input, units) {
-              units = units || 'ms';
-              return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
-          },
+  /**
+   * 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};
 
-          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;
-                   }
-           ),
+    // 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;
+  };
 
-          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;
-                  }
-          ),
 
-          // keepTime = true means only change the timezone, without affecting
-          // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
-          // It is possible that 5:31:26 doesn't exist int zone +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.
-          zone : function (input, keepTime) {
-              var offset = this._offset || 0;
-              if (input != null) {
-                  if (typeof input === "string") {
-                      input = timezoneMinutesFromString(input);
-                  }
-                  if (Math.abs(input) < 16) {
-                      input = input * 60;
-                  }
-                  this._offset = input;
-                  this._isUTC = true;
-                  if (offset !== input) {
-                      if (!keepTime || this._changeInProgress) {
-                          addOrSubtractDurationFromMoment(this,
-                                  moment.duration(offset - input, 'm'), 1, false);
-                      } else if (!this._changeInProgress) {
-                          this._changeInProgress = true;
-                          moment.updateOffset(this, true);
-                          this._changeInProgress = null;
-                      }
-                  }
-              } else {
-                  return this._isUTC ? offset : this._d.getTimezoneOffset();
-              }
-              return this;
-          },
+  /**
+   * 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];
+  };
 
-          zoneAbbr : function () {
-              return this._isUTC ? "UTC" : "";
-          },
 
-          zoneName : function () {
-              return this._isUTC ? "Coordinated Universal Time" : "";
-          },
+  /**
+   * 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];
+  };
 
-          parseZone : function () {
-              if (this._tzm) {
-                  this.zone(this._tzm);
-              } else if (typeof this._i === 'string') {
-                  this.zone(this._i);
-              }
-              return this;
-          },
 
-          hasAlignedHourOffset : function (input) {
-              if (!input) {
-                  input = 0;
-              }
-              else {
-                  input = moment(input).zone();
-              }
+  /**
+   * 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];
 
-              return (this.zone() - input) % 60 === 0;
-          },
+    // we have moved the sector data into the frozen set, we now remove it from the active set
+    this._deleteActiveSector(sectorId);
+  };
 
-          daysInMonth : function () {
-              return daysInMonth(this.year(), this.month());
-          },
 
-          dayOfYear : function (input) {
-              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
-              return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
-          },
+  /**
+   * 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];
 
-          quarter : function (input) {
-              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
-          },
+    // we have moved the sector data into the active set, we now remove it from the frozen stack
+    this._deleteFrozenSector(sectorId);
+  };
 
-          weekYear : function (input) {
-              var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
-              return input == null ? year : this.add("y", (input - year));
-          },
 
-          isoWeekYear : function (input) {
-              var year = weekOfYear(this, 1, 4).year;
-              return input == null ? year : this.add("y", (input - year));
-          },
-
-          week : function (input) {
-              var week = this.lang().week(this);
-              return input == null ? week : this.add("d", (input - week) * 7);
-          },
-
-          isoWeek : function (input) {
-              var week = weekOfYear(this, 1, 4).week;
-              return input == null ? week : this.add("d", (input - week) * 7);
-          },
-
-          weekday : function (input) {
-              var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
-              return input == null ? weekday : this.add("d", input - weekday);
-          },
-
-          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);
-          },
-
-          isoWeeksInYear : function () {
-              return weeksInYear(this.year(), 1, 4);
-          },
-
-          weeksInYear : function () {
-              var weekInfo = this._lang._week;
-              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
-          },
-
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units]();
-          },
-
-          set : function (units, value) {
-              units = normalizeUnits(units);
-              if (typeof this[units] === 'function') {
-                  this[units](value);
-              }
-              return this;
-          },
-
-          // If passed a language key, it will set the language for this
-          // instance.  Otherwise, it will return the language configuration
-          // variables for this instance.
-          lang : function (key) {
-              if (key === undefined) {
-                  return this._lang;
-              } else {
-                  this._lang = getLangDefinition(key);
-                  return this;
-              }
-          }
-      });
-
-      function rawMonthSetter(mom, value) {
-          var dayOfMonth;
-
-          // TODO: Move this out of here!
-          if (typeof value === 'string') {
-              value = mom.lang().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;
-      }
-
-      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);
-          }
+  /**
+   * 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];
       }
+    }
 
-      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);
-              }
-          };
+    // 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];
       }
+    }
 
-      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));
-
-      // 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;
-
-      /************************************
-          Duration Prototype
-      ************************************/
-
-
-      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;
-
-              // The following code bubbles up values, see the tests for
-              // examples of what that means.
-              data.milliseconds = milliseconds % 1000;
-
-              seconds = absRound(milliseconds / 1000);
-              data.seconds = seconds % 60;
-
-              minutes = absRound(seconds / 60);
-              data.minutes = minutes % 60;
-
-              hours = absRound(minutes / 60);
-              data.hours = hours % 24;
-
-              days += absRound(hours / 24);
-              data.days = days % 30;
-
-              months += absRound(days / 30);
-              data.months = months % 12;
-
-              years = absRound(months / 12);
-              data.years = years;
-          },
-
-          weeks : function () {
-              return absRound(this.days() / 7);
-          },
-
-          valueOf : function () {
-              return this._milliseconds +
-                this._days * 864e5 +
-                (this._months % 12) * 2592e6 +
-                toInt(this._months / 12) * 31536e6;
-          },
-
-          humanize : function (withSuffix) {
-              var difference = +this,
-                  output = relativeTime(difference, !withSuffix, this.lang());
-
-              if (withSuffix) {
-                  output = this.lang().pastFuture(difference, output);
-              }
-
-              return this.lang().postformat(output);
-          },
-
-          add : function (input, val) {
-              // supports only 2.0-style add(1, 's') or add(moment)
-              var dur = moment.duration(input, val);
-
-              this._milliseconds += dur._milliseconds;
-              this._days += dur._days;
-              this._months += dur._months;
-
-              this._bubble();
-
-              return this;
-          },
+    // merge the nodeIndices
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
+    }
+  };
 
-          subtract : function (input, val) {
-              var dur = moment.duration(input, val);
 
-              this._milliseconds -= dur._milliseconds;
-              this._days -= dur._days;
-              this._months -= dur._months;
+  /**
+   * 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);
+  };
 
-              this._bubble();
 
-              return this;
-          },
+  /**
+   * 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();
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units.toLowerCase() + 's']();
-          },
+  //    // 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!!");
+  //    }
 
-          as : function (units) {
-              units = normalizeUnits(units);
-              return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
-          },
+    // 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];
 
-          lang : moment.fn.lang,
+    var unqiueIdentifier = util.randomUUID();
 
-          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);
+    // we fully freeze the currently active sector
+    this._freezeSector(sector);
 
-              if (!this.asSeconds()) {
-                  // this is the same as C#'s (Noda) and python (isodate)...
-                  // but not other JS (goog.date)
-                  return 'P0D';
-              }
+    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
+    this._createNewSector(unqiueIdentifier);
 
-              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' : '');
-          }
-      });
+    // we add the active sector to the sectors array to be able to revert these steps later on
+    this._setActiveSector(unqiueIdentifier);
 
-      function makeDurationGetter(name) {
-          moment.duration.fn[name] = function () {
-              return this._data[name];
-          };
-      }
+    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
+    this._switchToSector(this._sector());
 
-      function makeDurationAsGetter(name, factor) {
-          moment.duration.fn['as' + name] = function () {
-              return +this / factor;
-          };
-      }
+    // finally we add the node we removed from our previous active sector to the new active sector
+    this.nodes[node.id] = node;
+  };
 
-      for (i in unitMillisecondFactors) {
-          if (unitMillisecondFactors.hasOwnProperty(i)) {
-              makeDurationAsGetter(i, unitMillisecondFactors[i]);
-              makeDurationGetter(i.toLowerCase());
-          }
-      }
 
-      makeDurationAsGetter('Weeks', 6048e5);
-      moment.duration.fn.asMonths = function () {
-          return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
-      };
+  /**
+   * 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();
 
-      /************************************
-          Default Lang
-      ************************************/
+        // 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);
 
-      // Set default language, other languages will inherit from English.
-      moment.lang('en', {
-          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;
-          }
-      });
+        // 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);
 
-      /* EMBED_LANGUAGES */
+        // we activate the previously active (and currently frozen) sector.
+        this._activateSector(previousSector);
 
-      /************************************
-          Exposing Moment
-      ************************************/
+        // we load the references from the newly active sector into the global references
+        this._switchToSector(previousSector);
 
-      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;
-          }
-      }
+        // we forget the previously active sector because we reverted to the one before
+        this._forgetLastSector();
 
-      // 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;
-              }
+        // finally, we update the node index list.
+        this._updateNodeIndexList();
 
-              return moment;
-          }.call(exports, __webpack_require__, exports, module)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-          makeGlobal(true);
-      } else {
-          makeGlobal();
+        // we refresh the list with calulation nodes and calculation node indices.
+        this._updateCalculationNodes();
       }
-  }).call(this);
-  
-  /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(130)(module)))
+    }
+  };
 
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Calculate the forces the nodes apply on each other based on a repulsion field.
-   * This field is linearly approximated.
+   * 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._calculateNodeForces = function () {
-    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
-
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
-
-    // approximation constants
-    var a_base = -2 / 3;
-    var b = 4 / 3;
-
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
-
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
-
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
-
-        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
-        var a = a_base / minimumDistance;
-        if (distance < 2 * minimumDistance) {
-          if (distance < 0.5 * minimumDistance) {
-            repulsingForce = 1.0;
+  exports._doInAllActiveSectors = function(runFunction,argument) {
+    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);
+          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) {
+            this[runFunction](args[0],args[1]);
           }
           else {
-            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+            this[runFunction](argument);
           }
-
-          // amplify the repulsion for clusters.
-          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
-          repulsingForce = repulsingForce / distance;
-
-          fx = dx * repulsingForce;
-          fy = dy * repulsingForce;
-
-          node1.fx -= fx;
-          node1.fy -= fy;
-          node2.fx += fx;
-          node2.fy += fy;
         }
       }
     }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
   };
 
 
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * Calculate the forces the nodes apply on eachother based on a repulsion field.
-   * This field is linearly approximated.
+   * 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._calculateNodeForces = function () {
-    var dx, dy, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
+  exports._doInSupportSector = function(runFunction,argument) {
+    if (argument === undefined) {
+      this._switchToSupportSector();
+      this[runFunction]();
+    }
+    else {
+      this._switchToSupportSector();
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
+      }
+      else {
+        this[runFunction](argument);
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
-
-    // approximation constants
-    var b = 5;
-    var a_base = 0.5 * -b;
-
-
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
-    var a = a_base / minimumDistance;
-
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
-
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        if (node1.level == node2.level) {
-
-          dx = node2.x - node1.x;
-          dy = node2.y - node1.y;
-          distance = Math.sqrt(dx * dx + dy * dy);
-
-
-          if (distance < 2 * minimumDistance) {
-            repulsingForce = a * distance + b;
-            var c = 0.05;
-            var d = 2 * minimumDistance * 2 * c;
-            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
-
-            // normalize force with
-            if (distance == 0) {
-              distance = 0.01;
-            }
-            else {
-              repulsingForce = repulsingForce / distance;
-            }
-            fx = dx * repulsingForce;
-            fy = dy * repulsingForce;
 
-            node1.fx -= fx;
-            node1.fy -= fy;
-            node2.fx += fx;
-            node2.fy += fy;
+  /**
+   * 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);
           }
         }
       }
     }
+    this._loadLatestSector();
   };
 
 
   /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
+   * 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._calculateHierarchicalSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    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)) {
-            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
-
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance == 0) {
-              distance = 0.01;
-            }
-
-            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
+  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);
+      }
+    }
+  };
 
-            // 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;
+  /**
+   * 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"];
+  };
 
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-            edge.from.fx += fx;
-            edge.from.fy += fy;
 
+  /**
+   * 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) {
 
-            var factor = 5;
-            if (distance > edgeLength) {
-              factor = 25;
-            }
+          this._switchToSector(sector,sectorType);
 
-            if (edge.from.level > edge.to.level) {
-              edge.to.fx -= factor*fx;
-              edge.to.fy -= factor*fy;
-            }
-            else if (edge.from.level < edge.to.level) {
-              edge.from.fx += factor*fx;
-              edge.from.fy += factor*fy;
+          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.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();
+  };
+
+
 /***/ },
-/* 54 */
+/* 49 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var Node = __webpack_require__(42);
+
   /**
-   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
-   * The Barnes Hut method is used to speed up this N-body simulation.
+   * This function can be called from the _doInAllSectors function
    *
+   * @param object
+   * @param overlappingNodes
    * @private
    */
-  exports._calculateNodeForces = function() {
-    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
-      var node;
-      var nodes = this.calculationNodes;
-      var nodeIndices = this.calculationNodeIndices;
-      var nodeCount = nodeIndices.length;
-
-      this._formBarnesHutTree(nodes,nodeIndices);
-
-      var barnesHutTree = this.barnesHutTree;
-
-      // place the nodes one by one recursively
-      for (var i = 0; i < nodeCount; i++) {
-        node = nodes[nodeIndices[i]];
-        // starting with root is irrelevant, it never passes the BarnesHut condition
-        this._getForceContribution(barnesHutTree.root.children.NW,node);
-        this._getForceContribution(barnesHutTree.root.children.NE,node);
-        this._getForceContribution(barnesHutTree.root.children.SW,node);
-        this._getForceContribution(barnesHutTree.root.children.SE,node);
+  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;
+  };
+
 
   /**
-   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
-   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   * Return a position object in canvasspace from a single point in screenspace
    *
-   * @param parentBranch
-   * @param node
+   * @param pointer
+   * @returns {{left: number, top: number, right: number, bottom: number}}
    * @private
    */
-  exports._getForceContribution = function(parentBranch,node) {
-    // we get no force contribution from an empty region
-    if (parentBranch.childrenCount > 0) {
-      var dx,dy,distance;
-
-      // get the distance from the center of mass to the node.
-      dx = parentBranch.centerOfMass.x - node.x;
-      dy = parentBranch.centerOfMass.y - node.y;
-      distance = Math.sqrt(dx * dx + dy * dy);
+  exports._pointerToPositionObject = function(pointer) {
+    var x = this._XconvertDOMtoCanvas(pointer.x);
+    var y = this._YconvertDOMtoCanvas(pointer.y);
 
-      // BarnesHut condition
-      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
-      // calcSize = 1/s --> d * 1/s > 1/theta = passed
-      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
-        // duplicate code to reduce function calls to speed up program
-        if (distance == 0) {
-          distance = 0.1*Math.random();
-          dx = distance;
-        }
-        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-        var fx = dx * gravityForce;
-        var fy = dy * gravityForce;
-        node.fx += fx;
-        node.fy += fy;
-      }
-      else {
-        // Did not pass the condition, go into children if available
-        if (parentBranch.childrenCount == 4) {
-          this._getForceContribution(parentBranch.children.NW,node);
-          this._getForceContribution(parentBranch.children.NE,node);
-          this._getForceContribution(parentBranch.children.SW,node);
-          this._getForceContribution(parentBranch.children.SE,node);
-        }
-        else { // parentBranch must have only one node, if it was empty we wouldnt be here
-          if (parentBranch.children.data.id != node.id) { // if it is not self
-            // duplicate code to reduce function calls to speed up program
-            if (distance == 0) {
-              distance = 0.5*Math.random();
-              dx = distance;
-            }
-            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-            var fx = dx * gravityForce;
-            var fy = dy * gravityForce;
-            node.fx += fx;
-            node.fy += fy;
-          }
-        }
-      }
-    }
+    return {
+      left:   x,
+      top:    y,
+      right:  x,
+      bottom: y
+    };
   };
 
+
   /**
-   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   * Get the top node at the a specific point (like a click)
    *
-   * @param nodes
-   * @param nodeIndices
+   * @param {{x: Number, y: Number}} pointer
+   * @return {Node | null} node
    * @private
    */
-  exports._formBarnesHutTree = function(nodes,nodeIndices) {
-    var node;
-    var nodeCount = nodeIndices.length;
-
-    var minX = Number.MAX_VALUE,
-      minY = Number.MAX_VALUE,
-      maxX =-Number.MAX_VALUE,
-      maxY =-Number.MAX_VALUE;
+  exports._getNodeAt = function (pointer) {
+    // we first check if this is an navigation controls element
+    var positionObject = this._pointerToPositionObject(pointer);
+    var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
 
-    // get the range of the nodes
-    for (var i = 0; i < nodeCount; i++) {
-      var x = nodes[nodeIndices[i]].x;
-      var y = nodes[nodeIndices[i]].y;
-      if (x < minX) { minX = x; }
-      if (x > maxX) { maxX = x; }
-      if (y < minY) { minY = y; }
-      if (y > maxY) { maxY = y; }
+    // 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]];
     }
-    // make the range a square
-    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
-    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
-    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
-
+    else {
+      return null;
+    }
+  };
 
-    var minimumTreeSize = 1e-5;
-    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
-    var halfRootSize = 0.5 * rootSize;
-    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
 
-    // construct the barnesHutTree
-    var barnesHutTree = {
-      root:{
-        centerOfMass: {x:0, y:0},
-        mass:0,
-        range: {
-          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
-          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
-        },
-        size: rootSize,
-        calcSize: 1 / rootSize,
-        children: { data:null},
-        maxWidth: 0,
-        level: 0,
-        childrenCount: 4
+  /**
+   * 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);
+        }
       }
-    };
-    this._splitBranch(barnesHutTree.root);
-
-    // place the nodes one by one recursively
-    for (i = 0; i < nodeCount; i++) {
-      node = nodes[nodeIndices[i]];
-      this._placeInTree(barnesHutTree.root,node);
     }
-
-    // make global
-    this.barnesHutTree = barnesHutTree
   };
 
 
   /**
-   * this updates the mass of a branch. this is increased by adding a node.
-   *
-   * @param parentBranch
-   * @param node
+   * 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._updateBranchMass = function(parentBranch, node) {
-    var totalMass = parentBranch.mass + node.mass;
-    var totalMassInv = 1/totalMass;
-
-    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
-    parentBranch.centerOfMass.x *= totalMassInv;
-
-    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
-    parentBranch.centerOfMass.y *= totalMassInv;
-
-    parentBranch.mass = totalMass;
-    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
-    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
-
+  exports._getAllEdgesOverlappingWith = function (object) {
+    var overlappingEdges = [];
+    this._doInAllActiveSectors("_getEdgesOverlappingWith",object,overlappingEdges);
+    return overlappingEdges;
   };
 
-
   /**
-   * determine in which branch the node will be placed.
+   * 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 parentBranch
-   * @param node
-   * @param skipMassUpdate
+   * @param pointer
+   * @returns {null}
    * @private
    */
-  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
-    if (skipMassUpdate != true || skipMassUpdate === undefined) {
-      // update the mass of the branch.
-      this._updateBranchMass(parentBranch,node);
-    }
+  exports._getEdgeAt = function(pointer) {
+    var positionObject = this._pointerToPositionObject(pointer);
+    var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
 
-    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
-        this._placeInRegion(parentBranch,node,"NW");
-      }
-      else { // in SW
-        this._placeInRegion(parentBranch,node,"SW");
-      }
+    if (overlappingEdges.length > 0) {
+      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
     }
-    else { // in NE or SE
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
-        this._placeInRegion(parentBranch,node,"NE");
-      }
-      else { // in SE
-        this._placeInRegion(parentBranch,node,"SE");
-      }
+    else {
+      return null;
     }
   };
 
 
   /**
-   * actually place the node in a region (or branch)
+   * Add object to the selection array.
    *
-   * @param parentBranch
-   * @param node
-   * @param region
+   * @param obj
    * @private
    */
-  exports._placeInRegion = function(parentBranch,node,region) {
-    switch (parentBranch.children[region].childrenCount) {
-      case 0: // place node here
-        parentBranch.children[region].children.data = node;
-        parentBranch.children[region].childrenCount = 1;
-        this._updateBranchMass(parentBranch.children[region],node);
-        break;
-      case 1: // convert into children
-        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
-        // we move one node a pixel and we do not put it in the tree.
-        if (parentBranch.children[region].children.data.x == node.x &&
-            parentBranch.children[region].children.data.y == node.y) {
-          node.x += Math.random();
-          node.y += Math.random();
-        }
-        else {
-          this._splitBranch(parentBranch.children[region]);
-          this._placeInTree(parentBranch.children[region],node);
-        }
-        break;
-      case 4: // place in branch
-        this._placeInTree(parentBranch.children[region],node);
-        break;
+  exports._addToSelection = function(obj) {
+    if (obj instanceof Node) {
+      this.selectionObj.nodes[obj.id] = obj;
+    }
+    else {
+      this.selectionObj.edges[obj.id] = obj;
     }
   };
 
-
   /**
-   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
-   * after the split is complete.
+   * Add object to the selection array.
    *
-   * @param parentBranch
+   * @param obj
    * @private
    */
-  exports._splitBranch = function(parentBranch) {
-    // if the branch is shaded with a node, replace the node in the new subset.
-    var containedNode = null;
-    if (parentBranch.childrenCount == 1) {
-      containedNode = parentBranch.children.data;
-      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+  exports._addToHover = function(obj) {
+    if (obj instanceof Node) {
+      this.hoverObj.nodes[obj.id] = obj;
     }
-    parentBranch.childrenCount = 4;
-    parentBranch.children.data = null;
-    this._insertRegion(parentBranch,"NW");
-    this._insertRegion(parentBranch,"NE");
-    this._insertRegion(parentBranch,"SW");
-    this._insertRegion(parentBranch,"SE");
-
-    if (containedNode != null) {
-      this._placeInTree(parentBranch,containedNode);
+    else {
+      this.hoverObj.edges[obj.id] = obj;
     }
   };
 
 
   /**
-   * This function subdivides the region into four new segments.
-   * Specifically, this inserts a single new segment.
-   * It fills the children section of the parentBranch
+   * Remove a single option from selection.
    *
-   * @param parentBranch
-   * @param region
-   * @param parentRange
+   * @param {Object} obj
    * @private
    */
-  exports._insertRegion = function(parentBranch, region) {
-    var minX,maxX,minY,maxY;
-    var childSize = 0.5 * parentBranch.size;
-    switch (region) {
-      case "NW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "NE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "SW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-      case "SE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
+  exports._removeFromSelection = function(obj) {
+    if (obj instanceof Node) {
+      delete this.selectionObj.nodes[obj.id];
+    }
+    else {
+      delete this.selectionObj.edges[obj.id];
     }
+  };
 
+  /**
+   * 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();
+      }
+    }
 
-    parentBranch.children[region] = {
-      centerOfMass:{x:0,y:0},
-      mass:0,
-      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
-      size: 0.5 * parentBranch.size,
-      calcSize: 2 * parentBranch.calcSize,
-      children: {data:null},
-      maxWidth: 0,
-      level: parentBranch.level+1,
-      childrenCount: 0
-    };
-  };
+    this.selectionObj = {nodes:{},edges:{}};
 
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
   /**
-   * This function is for debugging purposed, it draws the tree.
+   * Unselect all clusters. The selectionObj is useful for this.
    *
-   * @param ctx
-   * @param color
+   * @param {Boolean} [doNotTrigger] | ignore trigger
    * @private
    */
-  exports._drawTree = function(ctx,color) {
-    if (this.barnesHutTree !== undefined) {
+  exports._unselectClusters = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
 
-      ctx.lineWidth = 1;
+    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]);
+        }
+      }
+    }
 
-      this._drawBranch(this.barnesHutTree.root,ctx,color);
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
     }
   };
 
 
   /**
-   * This function is for debugging purposes. It draws the branches recursively.
+   * return the number of selected nodes
    *
-   * @param branch
-   * @param ctx
-   * @param color
+   * @returns {number}
    * @private
    */
-  exports._drawBranch = function(branch,ctx,color) {
-    if (color === undefined) {
-      color = "#FF0000";
+  exports._getSelectedNodeCount = function() {
+    var count = 0;
+    for (var nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        count += 1;
+      }
     }
+    return count;
+  };
 
-    if (branch.childrenCount == 4) {
-      this._drawBranch(branch.children.NW,ctx);
-      this._drawBranch(branch.children.NE,ctx);
-      this._drawBranch(branch.children.SE,ctx);
-      this._drawBranch(branch.children.SW,ctx);
+  /**
+   * 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];
+      }
     }
-    ctx.strokeStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.minY);
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.maxY);
-    ctx.stroke();
+    return null;
+  };
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.maxY);
-    ctx.stroke();
+  /**
+   * 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;
+  };
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.minY);
-    ctx.stroke();
 
-    /*
-     if (branch.mass > 0) {
-     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
-     ctx.stroke();
-     }
-     */
+  /**
+   * 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;
   };
 
 
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+  };
 
-  var map = {
-  	"./ar": 58,
-  	"./ar-ma": 56,
-  	"./ar-ma.js": 56,
-  	"./ar-sa": 57,
-  	"./ar-sa.js": 57,
-  	"./ar.js": 58,
-  	"./az": 59,
-  	"./az.js": 59,
-  	"./bg": 60,
-  	"./bg.js": 60,
-  	"./bn": 61,
-  	"./bn.js": 61,
-  	"./br": 62,
-  	"./br.js": 62,
-  	"./bs": 63,
-  	"./bs.js": 63,
-  	"./ca": 64,
-  	"./ca.js": 64,
-  	"./cs": 65,
-  	"./cs.js": 65,
-  	"./cv": 66,
-  	"./cv.js": 66,
-  	"./cy": 67,
-  	"./cy.js": 67,
-  	"./da": 68,
-  	"./da.js": 68,
-  	"./de": 70,
-  	"./de-at": 69,
-  	"./de-at.js": 69,
-  	"./de.js": 70,
-  	"./el": 71,
-  	"./el.js": 71,
-  	"./en-au": 72,
-  	"./en-au.js": 72,
-  	"./en-ca": 73,
-  	"./en-ca.js": 73,
-  	"./en-gb": 74,
-  	"./en-gb.js": 74,
-  	"./eo": 75,
-  	"./eo.js": 75,
-  	"./es": 76,
-  	"./es.js": 76,
-  	"./et": 77,
-  	"./et.js": 77,
-  	"./eu": 78,
-  	"./eu.js": 78,
-  	"./fa": 79,
-  	"./fa.js": 79,
-  	"./fi": 80,
-  	"./fi.js": 80,
-  	"./fo": 81,
-  	"./fo.js": 81,
-  	"./fr": 83,
-  	"./fr-ca": 82,
-  	"./fr-ca.js": 82,
-  	"./fr.js": 83,
-  	"./gl": 84,
-  	"./gl.js": 84,
-  	"./he": 85,
-  	"./he.js": 85,
-  	"./hi": 86,
-  	"./hi.js": 86,
-  	"./hr": 87,
-  	"./hr.js": 87,
-  	"./hu": 88,
-  	"./hu.js": 88,
-  	"./hy-am": 89,
-  	"./hy-am.js": 89,
-  	"./id": 90,
-  	"./id.js": 90,
-  	"./is": 91,
-  	"./is.js": 91,
-  	"./it": 92,
-  	"./it.js": 92,
-  	"./ja": 93,
-  	"./ja.js": 93,
-  	"./ka": 94,
-  	"./ka.js": 94,
-  	"./km": 95,
-  	"./km.js": 95,
-  	"./ko": 96,
-  	"./ko.js": 96,
-  	"./lb": 97,
-  	"./lb.js": 97,
-  	"./lt": 98,
-  	"./lt.js": 98,
-  	"./lv": 99,
-  	"./lv.js": 99,
-  	"./mk": 100,
-  	"./mk.js": 100,
-  	"./ml": 101,
-  	"./ml.js": 101,
-  	"./mr": 102,
-  	"./mr.js": 102,
-  	"./ms-my": 103,
-  	"./ms-my.js": 103,
-  	"./nb": 104,
-  	"./nb.js": 104,
-  	"./ne": 105,
-  	"./ne.js": 105,
-  	"./nl": 106,
-  	"./nl.js": 106,
-  	"./nn": 107,
-  	"./nn.js": 107,
-  	"./pl": 108,
-  	"./pl.js": 108,
-  	"./pt": 110,
-  	"./pt-br": 109,
-  	"./pt-br.js": 109,
-  	"./pt.js": 110,
-  	"./ro": 111,
-  	"./ro.js": 111,
-  	"./ru": 112,
-  	"./ru.js": 112,
-  	"./sk": 113,
-  	"./sk.js": 113,
-  	"./sl": 114,
-  	"./sl.js": 114,
-  	"./sq": 115,
-  	"./sq.js": 115,
-  	"./sr": 117,
-  	"./sr-cyrl": 116,
-  	"./sr-cyrl.js": 116,
-  	"./sr.js": 117,
-  	"./sv": 118,
-  	"./sv.js": 118,
-  	"./ta": 119,
-  	"./ta.js": 119,
-  	"./th": 120,
-  	"./th.js": 120,
-  	"./tl-ph": 121,
-  	"./tl-ph.js": 121,
-  	"./tr": 122,
-  	"./tr.js": 122,
-  	"./tzm": 124,
-  	"./tzm-latn": 123,
-  	"./tzm-latn.js": 123,
-  	"./tzm.js": 124,
-  	"./uk": 125,
-  	"./uk.js": 125,
-  	"./uz": 126,
-  	"./uz.js": 126,
-  	"./vi": 127,
-  	"./vi.js": 127,
-  	"./zh-cn": 128,
-  	"./zh-cn.js": 128,
-  	"./zh-tw": 129,
-  	"./zh-tw.js": 129
+  /**
+   * 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;
   };
-  function webpackContext(req) {
-  	return __webpack_require__(webpackContextResolve(req));
+
+
+  /**
+   * 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;
   };
-  function webpackContextResolve(req) {
-  	return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
+
+  /**
+   * 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);
+    }
   };
-  webpackContext.keys = function webpackContextKeys() {
-  	return Object.keys(map);
+
+  /**
+   * 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);
+    }
   };
-  webpackContext.resolve = webpackContextResolve;
-  module.exports = webpackContext;
 
 
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Moroccan Arabic (ar-ma)
-  // author : ElFadili Yassine : https://github.com/ElFadiliY
-  // author : Abdel Said : https://github.com/abdelsaid
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ar-ma', {
-          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 57 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    if (highlightEdges === undefined) {
+      highlightEdges = true;
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic Saudi Arabia (ar-sa)
-  // author : Suhail Alkowaileet : https://github.com/xsoh
+    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
+      this._unselectAll(true);
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    if (object.selected == false) {
+      object.select();
+      this._addToSelection(object);
+      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
+        this._selectConnectedEdges(object);
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
+    }
+    else {
+      object.unselect();
+      this._removeFromSelection(object);
+    }
 
-      return moment.lang('ar-sa', {
-          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
 
-/***/ },
-/* 58 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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});
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic (ar)
-  // author : Abdel Said : https://github.com/abdelsaid
-  // changes in months, weekdays : Ahmed Elkhatib
+  /**
+   * 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);
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+  /**
+   * 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) {
+  };
+
+
+  /**
+   * 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);
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
+      else {
+        this._unselectAll();
+      }
+    }
+    this.emit("click", this.getSelection());
+    this._redraw();
+  };
 
-      return moment.lang('ar', {
-          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+
+  /**
+   * 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);
+    }
+    this.emit("doubleClick", this.getSelection());
+  };
 
 
-/***/ },
-/* 59 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : azerbaijani (az)
-  // author : topchiyev : https://github.com/topchiyev
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * handle the onRelease event. These functions are here for the navigation controls module.
+   *
+    * @private
+   */
+  exports._handleOnRelease = function(pointer) {
+
+  };
+
+
+
+  /**
+   *
+   * 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};
+  };
+
+  /**
+   *
+   * retrieve the currently selected nodes
+   * @return {String[]} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedNodes = function() {
+    var idArray = [];
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        idArray.push(nodeId);
       }
-  }(function (moment) {
+    }
+    return idArray
+  };
 
-      var suffixes = {
-          1: "-inci",
-          5: "-inci",
-          8: "-inci",
-          70: "-inci",
-          80: "-inci",
+  /**
+   *
+   * retrieve the currently selected edges
+   * @return {Array} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedEdges = function() {
+    var idArray = [];
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        idArray.push(edgeId);
+      }
+    }
+    return idArray;
+  };
 
-          2: "-nci",
-          7: "-nci",
-          20: "-nci",
-          50: "-nci",
 
-          3: "-üncü",
-          4: "-üncü",
-          100: "-üncü",
+  /**
+   * select zero or more nodes
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.setSelection = function(selection) {
+    var i, iMax, id;
 
-          6: "-ncı",
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-          9: "-uncu",
-          10: "-uncu",
-          30: "-uncu",
+    // first unselect any selected node
+    this._unselectAll(true);
 
-          60: "-ıncı",
-          90: "-ıncı"
-      };
-      return moment.lang('az', {
-          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
-          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
-          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
-          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
-          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[sabah saat] LT',
-              nextWeek : '[gələn həftə] dddd [saat] LT',
-              lastDay : '[dünən] LT',
-              lastWeek : '[keçən həftə] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s əvvəl",
-              s : "birneçə saniyyə",
-              m : "bir dəqiqə",
-              mm : "%d dəqiqə",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir il",
-              yy : "%d il"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "gecə";
-              } else if (hour < 12) {
-                  return "səhər";
-              } else if (hour < 17) {
-                  return "gündüz";
-              } else {
-                  return "axşam";
-              }
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "-ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
+      }
+      this._selectObject(node,true,true);
+    }
 
+    console.log("setSelection is deprecated. Please use selectNodes instead.")
 
-/***/ },
-/* 60 */
-/***/ function(module, exports, __webpack_require__) {
+    this.redraw();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bulgarian (bg)
-  // author : Krasen Borisov : https://github.com/kraz
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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 (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
+
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
       }
-  }(function (moment) {
-      return moment.lang('bg', {
-          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
-          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Днес в] LT',
-              nextDay : '[Утре в] LT',
-              nextWeek : 'dddd [в] LT',
-              lastDay : '[Вчера в] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[В изминалата] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[В изминалия] dddd [в] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "след %s",
-              past : "преди %s",
-              s : "няколко секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дни",
-              M : "месец",
-              MM : "%d месеца",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      this._selectObject(node,true,true,highlightEdges);
+    }
+    this.redraw();
+  };
 
 
-/***/ },
-/* 61 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bengali (bn)
-  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var edge = this.edges[id];
+      if (!edge) {
+        throw new RangeError('Edge with id "' + id + '" not found');
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '১',
-          '2': '২',
-          '3': '৩',
-          '4': '৪',
-          '5': '৫',
-          '6': '৬',
-          '7': '৭',
-          '8': '৮',
-          '9': '৯',
-          '0': '০'
-      },
-      numberMap = {
-          '১': '1',
-          '২': '2',
-          '৩': '3',
-          '৪': '4',
-          '৫': '5',
-          '৬': '6',
-          '৭': '7',
-          '৮': '8',
-          '৯': '9',
-          '০': '0'
-      };
+      this._selectObject(edge,true,true,highlightEdges);
+    }
+    this.redraw();
+  };
 
-      return moment.lang('bn', {
-          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
-          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
-          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
-          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
-          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm সময়",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[আজ] LT',
-              nextDay : '[আগামীকাল] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[গতকাল] LT',
-              lastWeek : '[গত] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s পরে",
-              past : "%s আগে",
-              s : "কএক সেকেন্ড",
-              m : "এক মিনিট",
-              mm : "%d মিনিট",
-              h : "এক ঘন্টা",
-              hh : "%d ঘন্টা",
-              d : "এক দিন",
-              dd : "%d দিন",
-              M : "এক মাস",
-              MM : "%d মাস",
-              y : "এক বছর",
-              yy : "%d বছর"
-          },
-          preparse: function (string) {
-              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          //Bengali is a vast language its spoken 
-          //in different forms in various parts of the world.
-          //I have just generalized with most common one used
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "রাত";
-              } else if (hour < 10) {
-                  return "শকাল";
-              } else if (hour < 17) {
-                  return "দুপুর";
-              } else if (hour < 20) {
-                  return "বিকেল";
-              } else {
-                  return "রাত";
-              }
-          },
-          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.
-          }
-      });
-  }));
+  /**
+   * 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];
+        }
+      }
+    }
+  };
 
 
 /***/ },
-/* 62 */
+/* 50 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : breton (br)
-  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(42);
+  var Edge = __webpack_require__(43);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function relativeTimeWithMutation(number, withoutSuffix, key) {
-          var format = {
-              'mm': "munutenn",
-              'MM': "miz",
-              'dd': "devezh"
-          };
-          return number + ' ' + mutation(format[key], number);
-      }
+  /**
+   * clears the toolbar div element of children
+   *
+   * @private
+   */
+  exports._clearManipulatorBar = function() {
+    while (this.manipulationDiv.hasChildNodes()) {
+      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+    }
+  };
 
-      function specialMutationForYears(number) {
-          switch (lastNumber(number)) {
-          case 1:
-          case 3:
-          case 4:
-          case 5:
-          case 9:
-              return number + ' bloaz';
-          default:
-              return number + ' vloaz';
-          }
+  /**
+   * 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];
       }
+    }
+  };
 
-      function lastNumber(number) {
-          if (number > 9) {
-              return lastNumber(number % 10);
-          }
-          return number;
-      }
+  /**
+   * Enable or disable edit-mode.
+   *
+   * @private
+   */
+  exports._toggleEditMode = function() {
+    this.editMode = !this.editMode;
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
+    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()
+  };
 
-      function mutation(text, number) {
-          if (number === 2) {
-              return softMutation(text);
-          }
-          return text;
+  /**
+   * 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);
+    }
+
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+      this.controlNodesActive = false;
+    }
+
+    // restore overloaded functions
+    this._restoreOverloadedFunctions();
+
+    // resume calculation
+    this.freezeSimulation = false;
+
+    // reset global variables
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
+
+    if (this.editMode == true) {
+      while (this.manipulationDiv.hasChildNodes()) {
+        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+      }
+      // add the icons to the manipulator div
+      this.manipulationDiv.innerHTML = "" +
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+      }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
       }
 
-      function softMutation(text) {
-          var mutationTable = {
-              'm': 'v',
-              'b': 'v',
-              'd': 'z'
-          };
-          if (mutationTable[text.charAt(0)] === undefined) {
-              return text;
-          }
-          return mutationTable[text.charAt(0)] + text.substring(1);
+
+      // bind the icons
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
+      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
+      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        var editButton = document.getElementById("network-manipulate-editNode");
+        editButton.onclick = this._editNode.bind(this);
       }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        var editButton = document.getElementById("network-manipulate-editEdge");
+        editButton.onclick = this._createEditEdgeToolbar.bind(this);
+      }
+      if (this._selectionIsEmpty() == false) {
+        var deleteButton = document.getElementById("network-manipulate-delete");
+        deleteButton.onclick = this._deleteSelected.bind(this);
+      }
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
+      closeDiv.onclick = this._toggleEditMode.bind(this);
 
-      return moment.lang('br', {
-          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
-          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
-          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
-          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
-          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
-          longDateFormat : {
-              LT : "h[e]mm A",
-              L : "DD/MM/YYYY",
-              LL : "D [a viz] MMMM YYYY",
-              LLL : "D [a viz] MMMM YYYY LT",
-              LLLL : "dddd, D [a viz] MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Hiziv da] LT',
-              nextDay : '[Warc\'hoazh da] LT',
-              nextWeek : 'dddd [da] LT',
-              lastDay : '[Dec\'h da] LT',
-              lastWeek : 'dddd [paset da] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "a-benn %s",
-              past : "%s 'zo",
-              s : "un nebeud segondennoù",
-              m : "ur vunutenn",
-              mm : relativeTimeWithMutation,
-              h : "un eur",
-              hh : "%d eur",
-              d : "un devezh",
-              dd : relativeTimeWithMutation,
-              M : "ur miz",
-              MM : relativeTimeWithMutation,
-              y : "ur bloaz",
-              yy : specialMutationForYears
-          },
-          ordinal : function (number) {
-              var output = (number === 1) ? 'añ' : 'vet';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      this.boundFunction = this._createManipulatorBar.bind(this);
+      this.on('select', this.boundFunction);
+    }
+    else {
+      this.editModeDiv.innerHTML = "" +
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
+      editModeButton.onclick = this._toggleEditMode.bind(this);
+    }
+  };
 
 
-/***/ },
-/* 63 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bosnian (bs)
-  // author : Nedim Cholich : https://github.com/frontyard
-  // based on (hr) translation by Bojan Marković
+  /**
+   * Create the toolbar for adding Nodes
+   *
+   * @private
+   */
+  exports._createAddNodeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+    // create the toolbar contents
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
-          }
-      }
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-      return moment.lang('bs', {
-  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
-  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._addNode.bind(this);
+    this.on('select', this.boundFunction);
+  };
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * create the toolbar to connect nodes
+   *
+   * @private
+   */
+  exports._createAddEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this._unselectAll(true);
+    this.freezeSimulation = true;
 
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : catalan (ca)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+    this._unselectAll();
+    this.forceAppendSelection = false;
+    this.blockConnectingEdgeSelection = true;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ca', {
-          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
-          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
-          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
-          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
-          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextDay : function () {
-                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "fa %s",
-              s : "uns segons",
-              m : "un minut",
-              mm : "%d minuts",
-              h : "una hora",
-              hh : "%d hores",
-              d : "un dia",
-              dd : "%d dies",
-              M : "un mes",
-              MM : "%d mesos",
-              y : "un any",
-              yy : "%d anys"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-/***/ },
-/* 65 */
-/***/ function(module, exports, __webpack_require__) {
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._handleConnect.bind(this);
+    this.on('select', this.boundFunction);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : czech (cs)
-  // author : petrbela : https://github.com/petrbela
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"] = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+    this._handleTouch = this._handleConnect;
+    this._handleOnRelease = this._finishConnect;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
-          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-      function plural(n) {
-          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
-      }
+  /**
+   * create the toolbar to edit edges
+   *
+   * @private
+   */
+  exports._createEditEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this.controlNodesActive = true;
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minuty' : 'minut');
-              } else {
-                  return result + 'minutami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodin');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dny' : 'dní');
-              } else {
-                  return result + 'dny';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'měsíce' : 'měsíců');
-              } else {
-                  return result + 'měsíci';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'let');
-              } else {
-                  return result + 'lety';
-              }
-              break;
-          }
-      }
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-      return moment.lang('cs', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
-          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
-          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
-          longDateFormat : {
-              LT: "H.mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes v] LT",
-              nextDay: '[zítra v] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [v] LT';
-                  case 3:
-                      return '[ve středu v] LT';
-                  case 4:
-                      return '[ve čtvrtek v] LT';
-                  case 5:
-                      return '[v pátek v] LT';
-                  case 6:
-                      return '[v sobotu v] LT';
-                  }
-              },
-              lastDay: '[včera v] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulou neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[minulé] dddd [v] LT';
-                  case 3:
-                      return '[minulou středu v] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [v] LT';
-                  case 6:
-                      return '[minulou sobotu v] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "před %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
 
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
-/***/ },
-/* 66 */
-/***/ function(module, exports, __webpack_require__) {
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chuvash (cv)
-  // author : Anatoly Mironov : https://github.com/mirontoli
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+    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._handleOnRelease = this._releaseControlNode;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // redraw to show the unselect
+    this._redraw();
+  };
+
+
+
+
+
+  /**
+   * 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();
+  };
+
+  /**
+   * 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();
+  };
+
+  exports._releaseControlNode = function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode != null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
       }
-  }(function (moment) {
-      return moment.lang('cv', {
-          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
-          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
-          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
-          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
-          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
-              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
-              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
-          },
-          calendar : {
-              sameDay: '[Паян] LT [сехетре]',
-              nextDay: '[Ыран] LT [сехетре]',
-              lastDay: '[Ĕнер] LT [сехетре]',
-              nextWeek: '[Çитес] dddd LT [сехетре]',
-              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (output) {
-                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
-                  return output + affix;
-              },
-              past : "%s каялла",
-              s : "пĕр-ик çеккунт",
-              m : "пĕр минут",
-              mm : "%d минут",
-              h : "пĕр сехет",
-              hh : "%d сехет",
-              d : "пĕр кун",
-              dd : "%d кун",
-              M : "пĕр уйăх",
-              MM : "%d уйăх",
-              y : "пĕр çул",
-              yy : "%d çул"
-          },
-          ordinal : '%d-мĕш',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
+      }
+    }
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
+    }
+    this.freezeSimulation = false;
+    this._redraw();
+  };
 
+  /**
+   * 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("Cannot create edges to a cluster.")
+        }
+        else {
+          this._selectObject(node,false);
+          // create a node the temporary line can look at
+          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetNode'].x = node.x;
+          this.sectors['support']['nodes']['targetNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
+          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
 
-/***/ },
-/* 67 */
-/***/ function(module, exports, __webpack_require__) {
+          // create a temporary edge
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
+          this.edges['connectionEdge'].from = node;
+          this.edges['connectionEdge'].connected = true;
+          this.edges['connectionEdge'].smooth = true;
+          this.edges['connectionEdge'].selected = true;
+          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
+          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Welsh (cy)
-  // author : Robert Allen
+          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
+          this._handleOnDrag = function(event) {
+            var pointer = this._getPointer(event.gesture.center);
+            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
+            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
+            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+          };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+          this.moving = true;
+          this.start();
+        }
       }
-  }(function (moment) {
-      return moment.lang("cy", {
-          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
-          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
-          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
-          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
-          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
-          // time formats are the same as en-gb
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[Heddiw am] LT',
-              nextDay: '[Yfory am] LT',
-              nextWeek: 'dddd [am] LT',
-              lastDay: '[Ddoe am] LT',
-              lastWeek: 'dddd [diwethaf am] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "mewn %s",
-              past: "%s yn ôl",
-              s: "ychydig eiliadau",
-              m: "munud",
-              mm: "%d munud",
-              h: "awr",
-              hh: "%d awr",
-              d: "diwrnod",
-              dd: "%d diwrnod",
-              M: "mis",
-              MM: "%d mis",
-              y: "blwyddyn",
-              yy: "%d flynedd"
-          },
-          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
-          ordinal: function (number) {
-              var b = number,
-                  output = '',
-                  lookup = [
-                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
-                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
-                  ];
+    }
+  };
 
-              if (b > 20) {
-                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
-                      output = 'fed'; // not 30ain, 70ain or 90ain
-                  } else {
-                      output = 'ain';
-                  }
-              } else if (b > 0) {
-                  output = lookup[b];
-              }
+  exports._finishConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 1) {
 
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      // restore the drag function
+      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
+      delete this.cachedFunctions["_handleOnDrag"];
 
+      // remember the edge id
+      var connectFromId = this.edges['connectionEdge'].fromId;
 
-/***/ },
-/* 68 */
-/***/ 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_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : danish (da)
-  // author : Ulrik Nielsen : https://github.com/mrbase
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._createEdge(connectFromId,node.id);
+          this._createManipulatorBar();
+        }
+      }
+      this._unselectAll();
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('da', {
-          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd [d.] D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[I dag kl.] LT',
-              nextDay : '[I morgen kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[I går kl.] LT',
-              lastWeek : '[sidste] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "%s siden",
-              s : "få sekunder",
-              m : "et minut",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dage",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "et år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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 {
+          alert(this.constants.labels['addError']);
+          this._createManipulatorBar();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.nodesData.add(defaultData);
+        this._createManipulatorBar();
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
 
-/***/ },
-/* 69 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : austrian german (de-at)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
-  // author : Martin Groller : https://github.com/MadMG
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.add(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+      else {
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
       }
+    }
+  };
 
-      return moment.lang('de-at', {
-          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+  /**
+   * 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.group,
+        shape: node.shape,
+        color: {
+          background:node.color.background,
+          border:node.color.border,
+          highlight: {
+            background:node.color.highlight.background,
+            border:node.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 {
+        alert(this.constants.labels["editError"]);
+      }
+    }
+    else {
+      alert(this.constants.labels["editBoundError"]);
+    }
+  };
 
 
-/***/ },
-/* 70 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : german (de)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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 {
+            alert(this.constants.labels["deleteError"])
+          }
+        }
+        else {
+          this.edgesData.remove(selectedEdges);
+          this.nodesData.remove(selectedNodes);
+          this._unselectAll();
+          this.moving = true;
+          this.start();
+        }
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+      else {
+        alert(this.constants.labels["deleteClusterError"]);
       }
-
-      return moment.lang('de', {
-          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
 /***/ },
-/* 71 */
+/* 51 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : modern greek (el)
-  // author : Aggelos Karalias : https://github.com/mehiel
+  exports._cleanNavigation = function() {
+    // clean up previous navigation items
+    var wrapper = document.getElementById('network-navigation_wrapper');
+    if (wrapper != null) {
+      this.containerElement.removeChild(wrapper);
+    }
+    document.onmouseup = null;
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('el', {
-          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
-          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
-          months : function (momentToFormat, format) {
-              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
-                  return this._monthsGenitiveEl[momentToFormat.month()];
-              } else {
-                  return this._monthsNominativeEl[momentToFormat.month()];
-              }
-          },
-          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
-          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
-          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
-          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'μμ' : 'ΜΜ';
-              } else {
-                  return isLower ? 'πμ' : 'ΠΜ';
-              }
-          },
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendarEl : {
-              sameDay : '[Σήμερα {}] LT',
-              nextDay : '[Αύριο {}] LT',
-              nextWeek : 'dddd [{}] LT',
-              lastDay : '[Χθες {}] LT',
-              lastWeek : function() {
-                  switch (this.day()) {
-                      case 6:
-                          return '[το προηγούμενο] dddd [{}] LT';
-                      default:
-                          return '[την προηγούμενη] dddd [{}] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          calendar : function (key, mom) {
-              var output = this._calendarEl[key],
-                  hours = mom && mom.hours();
+  /**
+   * 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();
 
-              if (typeof output === 'function') {
-                  output = output.apply(mom);
-              }
+    this.navigationDivs = {};
+    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
+    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
-              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
-          },
-          relativeTime : {
-              future : "σε %s",
-              past : "%s πριν",
-              s : "δευτερόλεπτα",
-              m : "ένα λεπτό",
-              mm : "%d λεπτά",
-              h : "μία ώρα",
-              hh : "%d ώρες",
-              d : "μία μέρα",
-              dd : "%d μέρες",
-              M : "ένας μήνας",
-              MM : "%d μήνες",
-              y : "ένας χρόνος",
-              yy : "%d χρόνια"
-          },
-          ordinal : function (number) {
-              return number + 'η';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4st is the first week of the year.
-          }
-      });
-  }));
+    this.navigationDivs['wrapper'] = document.createElement('div');
+    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
 
+    for (var i = 0; i < navigationDivs.length; i++) {
+      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
+      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+    }
 
-/***/ },
-/* 72 */
-/***/ function(module, exports, __webpack_require__) {
+    document.onmouseup = this._stopMovement.bind(this);
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : australian english (en-au)
+  /**
+   * this stops all movement induced by the navigation buttons
+   *
+   * @private
+   */
+  exports._stopMovement = function() {
+    this._xStopMoving();
+    this._yStopMoving();
+    this._stopZoom();
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
+
+  /**
+   * stops the actions performed by page up and down etc.
+   *
+   * @param event
+   * @private
+   */
+  exports._preventDefault = function(event) {
+    if (event !== undefined) {
+      if (event.preventDefault) {
+        event.preventDefault();
       } else {
-          factory(window.moment); // Browser global
+        event.returnValue = false;
       }
-  }(function (moment) {
-      return moment.lang('en-au', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 73 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className += " active";
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian english (en-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('en-ca', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM, YYYY",
-              LLL : "D MMMM, YYYY LT",
-              LLLL : "dddd, D MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          }
-      });
-  }));
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['down'].className += " active";
+    }
+  };
 
 
-/***/ },
-/* 74 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className += " active";
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : great britain english (en-gb)
-  // author : Chris Gedrim : https://github.com/chrisgedrim
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('en-gb', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['right'].className += " active";
+    }
+  };
 
 
-/***/ },
-/* 75 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className += " active";
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : esperanto (eo)
-  // author : Colin Dean : https://github.com/colindean
-  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
-  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('eo', {
-          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
-          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
-          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D[-an de] MMMM, YYYY",
-              LLL : "D[-an de] MMMM, YYYY LT",
-              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'p.t.m.' : 'P.T.M.';
-              } else {
-                  return isLower ? 'a.t.m.' : 'A.T.M.';
-              }
-          },
-          calendar : {
-              sameDay : '[Hodiaŭ je] LT',
-              nextDay : '[Morgaŭ je] LT',
-              nextWeek : 'dddd [je] LT',
-              lastDay : '[Hieraŭ je] LT',
-              lastWeek : '[pasinta] dddd [je] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "je %s",
-              past : "antaŭ %s",
-              s : "sekundoj",
-              m : "minuto",
-              mm : "%d minutoj",
-              h : "horo",
-              hh : "%d horoj",
-              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
-              dd : "%d tagoj",
-              M : "monato",
-              MM : "%d monatoj",
-              y : "jaro",
-              yy : "%d jaroj"
-          },
-          ordinal : "%da",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * Zoom out
+   * @private
+   */
+  exports._zoomOut = function() {
+    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomOut'].className += " active";
+    }
+  };
 
 
-/***/ },
-/* 76 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Stop zooming and unhighlight the zoom controls
+   * @private
+   */
+  exports._stopZoom = function() {
+    this.zoomIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
+      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : spanish (es)
-  // author : Julio Napurí : https://github.com/julionc
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
-          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
+  /**
+   * Stop moving in the Y direction and unHighlight the up and down
+   * @private
+   */
+  exports._yStopMoving = function() {
+    this.yIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
+      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
+    }
+  };
 
-      return moment.lang('es', {
-          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShort[m.month()];
-              } else {
-                  return monthsShortDot[m.month()];
-              }
-          },
-          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
-          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [del] YYYY",
-              LLL : "D [de] MMMM [del] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "hace %s",
-              s : "unos segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "una hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un año",
-              yy : "%d años"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+
+  /**
+   * Stop moving in the X direction and unHighlight left and right.
+   * @private
+   */
+  exports._xStopMoving = function() {
+    this.xIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
+      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
+    }
+  };
 
 
 /***/ },
-/* 77 */
+/* 52 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : estonian (et)
-  // author : Henry Kehlmann : https://github.com/madhenry
-  // improvements : Illimar Tambek : https://github.com/ragulka
+  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;
+        }
+      }
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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) {
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
+        this.constants.hierarchicalLayout.levelSeparation *= -1;
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
-              'm' : ['ühe minuti', 'üks minut'],
-              'mm': [number + ' minuti', number + ' minutit'],
-              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
-              'hh': [number + ' tunni', number + ' tundi'],
-              'd' : ['ühe päeva', 'üks päev'],
-              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
-              'MM': [number + ' kuu', number + ' kuud'],
-              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
-              'yy': [number + ' aasta', number + ' aastat']
-          };
-          if (withoutSuffix) {
-              return format[key][2] ? format[key][2] : format[key][1];
+      else {
+        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
+      }
+
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
+        }
+      }
+      // 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;
           }
-          return isFuture ? format[key][0] : format[key][1];
+          else {
+            undefinedLevel = true;
+          }
+          if (hubsize < node.edges.length) {
+            hubsize = node.edges.length;
+          }
+        }
       }
 
-      return moment.lang('et', {
-          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
-          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
-          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
-          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
-          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
-          longDateFormat : {
-              LT   : "H:mm",
-              L    : "DD.MM.YYYY",
-              LL   : "D. MMMM YYYY",
-              LLL  : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[Täna,] LT',
-              nextDay  : '[Homme,] LT',
-              nextWeek : '[Järgmine] dddd LT',
-              lastDay  : '[Eile,] LT',
-              lastWeek : '[Eelmine] dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s pärast",
-              past   : "%s tagasi",
-              s      : processRelativeTime,
-              m      : processRelativeTime,
-              mm     : processRelativeTime,
-              h      : processRelativeTime,
-              hh     : processRelativeTime,
-              d      : processRelativeTime,
-              dd     : '%d päeva',
-              M      : processRelativeTime,
-              MM     : processRelativeTime,
-              y      : processRelativeTime,
-              yy     : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
+      // if the user defined some levels but not all, alert and run without hierarchical layout
+      if (undefinedLevel == true && definedLevel == true) {
+        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
+        this.zoomExtent(true,this.constants.clustering.enabled);
+        if (!this.constants.clustering.enabled) {
+          this.start();
+        }
+      }
+      else {
+        // setup the system to use hierarchical method.
+        this._changeConstants();
 
-/***/ },
-/* 78 */
-/***/ function(module, exports, __webpack_require__) {
+        // define levels if undefined by the users. Based on hubsize
+        if (undefinedLevel == true) {
+          this._determineLevels(hubsize);
+        }
+        // check the distribution of the nodes per level.
+        var distribution = this._getDistribution();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : euskara (eu)
-  // author : Eneko Illarramendi : https://github.com/eillarra
+        // place the nodes on the canvas. This also stablilizes the system.
+        this._placeNodesByHierarchy(distribution);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        // start the simulation.
+        this.start();
       }
-  }(function (moment) {
-      return moment.lang('eu', {
-          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
-          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
-          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
-          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
-          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY[ko] MMMM[ren] D[a]",
-              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
-              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
-              l : "YYYY-M-D",
-              ll : "YYYY[ko] MMM D[a]",
-              lll : "YYYY[ko] MMM D[a] LT",
-              llll : "ddd, YYYY[ko] MMM D[a] LT"
-          },
-          calendar : {
-              sameDay : '[gaur] LT[etan]',
-              nextDay : '[bihar] LT[etan]',
-              nextWeek : 'dddd LT[etan]',
-              lastDay : '[atzo] LT[etan]',
-              lastWeek : '[aurreko] dddd LT[etan]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s barru",
-              past : "duela %s",
-              s : "segundo batzuk",
-              m : "minutu bat",
-              mm : "%d minutu",
-              h : "ordu bat",
-              hh : "%d ordu",
-              d : "egun bat",
-              dd : "%d egun",
-              M : "hilabete bat",
-              MM : "%d hilabete",
-              y : "urte bat",
-              yy : "%d urte"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 79 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Persian Language
-  // author : Ebrahim Byagowi : https://github.com/ebraminio
+    // start placing all the level 0 nodes first. Then recursively position their branches.
+    for (nodeId in distribution[0].nodes) {
+      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
+        node = distribution[0].nodes[nodeId];
+        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+          if (node.xFixed) {
+            node.x = distribution[0].minPos;
+            node.xFixed = false;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '۱',
-          '2': '۲',
-          '3': '۳',
-          '4': '۴',
-          '5': '۵',
-          '6': '۶',
-          '7': '۷',
-          '8': '۸',
-          '9': '۹',
-          '0': '۰'
-      }, numberMap = {
-          '۱': '1',
-          '۲': '2',
-          '۳': '3',
-          '۴': '4',
-          '۵': '5',
-          '۶': '6',
-          '۷': '7',
-          '۸': '8',
-          '۹': '9',
-          '۰': '0'
-      };
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        else {
+          if (node.yFixed) {
+            node.y = distribution[0].minPos;
+            node.yFixed = false;
 
-      return moment.lang('fa', {
-          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
-          longDateFormat : {
-              LT : 'HH:mm',
-              L : 'DD/MM/YYYY',
-              LL : 'D MMMM YYYY',
-              LLL : 'D MMMM YYYY LT',
-              LLLL : 'dddd, D MMMM YYYY LT'
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "قبل از ظهر";
-              } else {
-                  return "بعد از ظهر";
-              }
-          },
-          calendar : {
-              sameDay : '[امروز ساعت] LT',
-              nextDay : '[فردا ساعت] LT',
-              nextWeek : 'dddd [ساعت] LT',
-              lastDay : '[دیروز ساعت] LT',
-              lastWeek : 'dddd [پیش] [ساعت] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : 'در %s',
-              past : '%s پیش',
-              s : 'چندین ثانیه',
-              m : 'یک دقیقه',
-              mm : '%d دقیقه',
-              h : 'یک ساعت',
-              hh : '%d ساعت',
-              d : 'یک روز',
-              dd : '%d روز',
-              M : 'یک ماه',
-              MM : '%d ماه',
-              y : 'یک سال',
-              yy : '%d سال'
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          ordinal : '%dم',
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12 // The week that contains Jan 1st is the first week of the year.
+            distribution[0].minPos += distribution[0].nodeSpacing;
           }
-      });
-  }));
+        }
+        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
+      }
+    }
 
+    // stabilize the system after positioning. This function calls zoomExtent.
+    this._stabilize();
+  };
 
-/***/ },
-/* 80 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : finnish (fi)
-  // author : Tarmo Aidantausta : https://github.com/bleadof
+  /**
+   * This function get the distribution of levels based on hubsize
+   *
+   * @returns {Object}
+   * @private
+   */
+  exports._getDistribution = function() {
+    var distribution = {};
+    var nodeId, node, level;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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.hasOwnProperty(node.level)) {
+          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+        }
+        distribution[node.level].amount += 1;
+        distribution[node.level].nodes[node.id] = node;
       }
-  }(function (moment) {
-      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
-          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
-                            numbersPast[7], numbersPast[8], numbersPast[9]];
+    }
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = "";
-          switch (key) {
-          case 's':
-              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
-          case 'm':
-              return isFuture ? 'minuutin' : 'minuutti';
-          case 'mm':
-              result = isFuture ? 'minuutin' : 'minuuttia';
-              break;
-          case 'h':
-              return isFuture ? 'tunnin' : 'tunti';
-          case 'hh':
-              result = isFuture ? 'tunnin' : 'tuntia';
-              break;
-          case 'd':
-              return isFuture ? 'päivän' : 'päivä';
-          case 'dd':
-              result = isFuture ? 'päivän' : 'päivää';
-              break;
-          case 'M':
-              return isFuture ? 'kuukauden' : 'kuukausi';
-          case 'MM':
-              result = isFuture ? 'kuukauden' : 'kuukautta';
-              break;
-          case 'y':
-              return isFuture ? 'vuoden' : 'vuosi';
-          case 'yy':
-              result = isFuture ? 'vuoden' : 'vuotta';
-              break;
-          }
-          result = verbalNumber(number, isFuture) + " " + result;
-          return result;
+    // 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;
+        }
       }
+    }
 
-      function verbalNumber(number, isFuture) {
-          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
+    // 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);
       }
+    }
 
-      return moment.lang('fi', {
-          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
-          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
-          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
-          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
-          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD.MM.YYYY",
-              LL : "Do MMMM[ta] YYYY",
-              LLL : "Do MMMM[ta] YYYY, [klo] LT",
-              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
-              l : "D.M.YYYY",
-              ll : "Do MMM YYYY",
-              lll : "Do MMM YYYY, [klo] LT",
-              llll : "ddd, Do MMM YYYY, [klo] LT"
-          },
-          calendar : {
-              sameDay : '[tänään] [klo] LT',
-              nextDay : '[huomenna] [klo] LT',
-              nextWeek : 'dddd [klo] LT',
-              lastDay : '[eilen] [klo] LT',
-              lastWeek : '[viime] dddd[na] [klo] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s päästä",
-              past : "%s sitten",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : "%d.",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    return distribution;
+  };
 
 
-/***/ },
-/* 81 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : faroese (fo)
-  // author : Ragnar Johannesen : https://github.com/ragnar123
+    // determine hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.edges.length == hubsize) {
+          node.level = 0;
+        }
+      }
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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);
+        }
       }
-  }(function (moment) {
-      return moment.lang('fo', {
-          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
-          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
-          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D. MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Í dag kl.] LT',
-              nextDay : '[Í morgin kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[Í gjár kl.] LT',
-              lastWeek : '[síðstu] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "um %s",
-              past : "%s síðani",
-              s : "fá sekund",
-              m : "ein minutt",
-              mm : "%d minuttir",
-              h : "ein tími",
-              hh : "%d tímar",
-              d : "ein dagur",
-              dd : "%d dagar",
-              M : "ein mánaði",
-              MM : "%d mánaðir",
-              y : "eitt ár",
-              yy : "%d ár"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 82 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian french (fr-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('fr-ca', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+  /**
+   * 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 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;
+        }
+      }
+
+      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);
+        }
+      }
+    }
+  };
+
+
+  /**
+   * 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 (edges.length > 1) {
+          this._setLevel(level+1, childNode.edges, childNode.id);
+        }
+      }
+    }
+  };
+
+
+  /**
+   * 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;
+      }
+    }
+  };
+
+
+/***/ },
+/* 53 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * Canvas shapes used by Network
+   */
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
+
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+      this.beginPath();
+      this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
+
+    /**
+     * 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();
+
+      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 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();
+
+      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)
+        );
+      }
+
+      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;
+      }
+    };
+
+    // TODO: add diamond shape
+  }
+
+
+/***/ },
+/* 54 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Moroccan Arabic (ar-ma)
+  // author : ElFadili Yassine : https://github.com/ElFadiliY
+  // author : Abdel Said : https://github.com/abdelsaid
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ar-ma', {
+          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
           longDateFormat : {
               LT : "HH:mm",
-              L : "YYYY-MM-DD",
+              L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
               LLL : "D MMMM YYYY LT",
               LLLL : "dddd D MMMM YYYY LT"
           },
           calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
               sameElse: 'L'
           },
           relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
           },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 83 */
+/* 55 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : french (fr)
-  // author : John Fischer : https://github.com/jfroffice
+  // language : Arabic Saudi Arabia (ar-sa)
+  // author : Suhail Alkowaileet : https://github.com/xsoh
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('fr', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
+
+      return moment.lang('ar-sa', {
+          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
           longDateFormat : {
               LT : "HH:mm",
               L : "DD/MM/YYYY",
@@ -33130,211 +30272,368 @@ return /******/ (function(modules) { // webpackBootstrap
               LLL : "D MMMM YYYY LT",
               LLLL : "dddd D MMMM YYYY LT"
           },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
           calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
               sameElse: 'L'
           },
           relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
           },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
           },
           week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 84 */
+/* 56 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : galician (gl)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+  // language : Arabic (ar)
+  // author : Abdel Said : https://github.com/abdelsaid
+  // changes in months, weekdays : Ahmed Elkhatib
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('gl', {
-          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
-          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
-          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
-          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              lastDay : function () {
-                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              sameElse : 'L'
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
+
+      return moment.lang('ar', {
+          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
           },
           relativeTime : {
-              future : function (str) {
-                  if (str === "uns segundos") {
-                      return "nuns segundos";
-                  }
-                  return "en " + str;
-              },
-              past : "hai %s",
-              s : "uns segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "unha hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un ano",
-              yy : "%d anos"
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
           },
-          ordinal : '%dº',
           week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 85 */
+/* 57 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Hebrew (he)
-  // author : Tomer Cohen : https://github.com/tomer
-  // author : Moshe Simantov : https://github.com/DevelopmentIL
-  // author : Tal Ater : https://github.com/TalAter
+  // language : azerbaijani (az)
+  // author : topchiyev : https://github.com/topchiyev
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('he', {
-          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
-          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
-          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
-          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
-          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
+
+      var suffixes = {
+          1: "-inci",
+          5: "-inci",
+          8: "-inci",
+          70: "-inci",
+          80: "-inci",
+
+          2: "-nci",
+          7: "-nci",
+          20: "-nci",
+          50: "-nci",
+
+          3: "-üncü",
+          4: "-üncü",
+          100: "-üncü",
+
+          6: "-ncı",
+
+          9: "-uncu",
+          10: "-uncu",
+          30: "-uncu",
+
+          60: "-ıncı",
+          90: "-ıncı"
+      };
+      return moment.lang('az', {
+          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
+          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
+          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
+          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
+          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
           longDateFormat : {
               LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [ב]MMMM YYYY",
-              LLL : "D [ב]MMMM YYYY LT",
-              LLLL : "dddd, D [ב]MMMM YYYY LT",
-              l : "D/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[היום ב־]LT',
-              nextDay : '[מחר ב־]LT',
-              nextWeek : 'dddd [בשעה] LT',
-              lastDay : '[אתמול ב־]LT',
-              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
+              sameDay : '[bugün saat] LT',
+              nextDay : '[sabah saat] LT',
+              nextWeek : '[gələn həftə] dddd [saat] LT',
+              lastDay : '[dünən] LT',
+              lastWeek : '[keçən həftə] dddd [saat] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "בעוד %s",
-              past : "לפני %s",
-              s : "מספר שניות",
-              m : "דקה",
-              mm : "%d דקות",
-              h : "שעה",
-              hh : function (number) {
-                  if (number === 2) {
-                      return "שעתיים";
-                  }
-                  return number + " שעות";
-              },
-              d : "יום",
-              dd : function (number) {
-                  if (number === 2) {
-                      return "יומיים";
-                  }
-                  return number + " ימים";
-              },
-              M : "חודש",
-              MM : function (number) {
-                  if (number === 2) {
-                      return "חודשיים";
+              future : "%s sonra",
+              past : "%s əvvəl",
+              s : "birneçə saniyyə",
+              m : "bir dəqiqə",
+              mm : "%d dəqiqə",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir il",
+              yy : "%d il"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "gecə";
+              } else if (hour < 12) {
+                  return "səhər";
+              } else if (hour < 17) {
+                  return "gündüz";
+              } else {
+                  return "axşam";
+              }
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "-ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
+
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 58 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bulgarian (bg)
+  // author : Krasen Borisov : https://github.com/kraz
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('bg', {
+          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
+          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Днес в] LT',
+              nextDay : '[Утре в] LT',
+              nextWeek : 'dddd [в] LT',
+              lastDay : '[Вчера в] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[В изминалата] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[В изминалия] dddd [в] LT';
                   }
-                  return number + " חודשים";
               },
-              y : "שנה",
-              yy : function (number) {
-                  if (number === 2) {
-                      return "שנתיים";
-                  }
-                  return number + " שנים";
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "след %s",
+              past : "преди %s",
+              s : "няколко секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дни",
+              M : "месец",
+              MM : "%d месеца",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
               }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 86 */
+/* 59 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hindi (hi)
-  // author : Mayank Singhal : https://github.com/mayanksinghal
+  // language : Bengali (bn)
+  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33342,68 +30641,68 @@ return /******/ (function(modules) { // webpackBootstrap
       }
   }(function (moment) {
       var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
+          '1': '১',
+          '2': '২',
+          '3': '৩',
+          '4': '৪',
+          '5': '৫',
+          '6': '৬',
+          '7': '৭',
+          '8': '৮',
+          '9': '৯',
+          '0': '০'
       },
       numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
+          '১': '1',
+          '২': '2',
+          '৩': '3',
+          '৪': '4',
+          '৫': '5',
+          '৬': '6',
+          '৭': '7',
+          '৮': '8',
+          '৯': '9',
+          '০': '0'
       };
 
-      return moment.lang('hi', {
-          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
-          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+      return moment.lang('bn', {
+          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
+          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
+          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
+          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
+          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
           longDateFormat : {
-              LT : "A h:mm बजे",
+              LT : "A h:mm সময়",
               L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
               LLL : "D MMMM YYYY, LT",
               LLLL : "dddd, D MMMM YYYY, LT"
           },
           calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[कल] LT',
+              sameDay : '[আজ] LT',
+              nextDay : '[আগামীকাল] LT',
               nextWeek : 'dddd, LT',
-              lastDay : '[कल] LT',
-              lastWeek : '[पिछले] dddd, LT',
+              lastDay : '[গতকাল] LT',
+              lastWeek : '[গত] dddd, LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s में",
-              past : "%s पहले",
-              s : "कुछ ही क्षण",
-              m : "एक मिनट",
-              mm : "%d मिनट",
-              h : "एक घंटा",
-              hh : "%d घंटे",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महीने",
-              MM : "%d महीने",
-              y : "एक वर्ष",
-              yy : "%d वर्ष"
+              future : "%s পরে",
+              past : "%s আগে",
+              s : "কএক সেকেন্ড",
+              m : "এক মিনিট",
+              mm : "%d মিনিট",
+              h : "এক ঘন্টা",
+              hh : "%d ঘন্টা",
+              d : "এক দিন",
+              dd : "%d দিন",
+              M : "এক মাস",
+              MM : "%d মাস",
+              y : "এক বছর",
+              yy : "%d বছর"
           },
           preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
                   return numberMap[match];
               });
           },
@@ -33412,19 +30711,20 @@ return /******/ (function(modules) { // webpackBootstrap
                   return symbolMap[match];
               });
           },
-          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
-          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+          //Bengali is a vast language its spoken 
+          //in different forms in various parts of the world.
+          //I have just generalized with most common one used
           meridiem : function (hour, minute, isLower) {
               if (hour < 4) {
-                  return "रात";
+                  return "রাত";
               } else if (hour < 10) {
-                  return "सुबह";
+                  return "শকাল";
               } else if (hour < 17) {
-                  return "दोपहर";
+                  return "দুপুর";
               } else if (hour < 20) {
-                  return "शाम";
+                  return "বিকেল";
               } else {
-                  return "रात";
+                  return "রাত";
               }
           },
           week : {
@@ -33436,81 +30736,193 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 87 */
+/* 60 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hrvatski (hr)
-  // author : Bojan Marković : https://github.com/bmarkovic
-
-  // based on (sl) translation by Robert Sedovšek
+  // language : breton (br)
+  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
-          }
+      function relativeTimeWithMutation(number, withoutSuffix, key) {
+          var format = {
+              'mm': "munutenn",
+              'MM': "miz",
+              'dd': "devezh"
+          };
+          return number + ' ' + mutation(format[key], number);
       }
 
-      return moment.lang('hr', {
-          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
-          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
+      function specialMutationForYears(number) {
+          switch (lastNumber(number)) {
+          case 1:
+          case 3:
+          case 4:
+          case 5:
+          case 9:
+              return number + ' bloaz';
+          default:
+              return number + ' vloaz';
+          }
+      }
+
+      function lastNumber(number) {
+          if (number > 9) {
+              return lastNumber(number % 10);
+          }
+          return number;
+      }
+
+      function mutation(text, number) {
+          if (number === 2) {
+              return softMutation(text);
+          }
+          return text;
+      }
+
+      function softMutation(text) {
+          var mutationTable = {
+              'm': 'v',
+              'b': 'v',
+              'd': 'z'
+          };
+          if (mutationTable[text.charAt(0)] === undefined) {
+              return text;
+          }
+          return mutationTable[text.charAt(0)] + text.substring(1);
+      }
+
+      return moment.lang('br', {
+          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
+          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
+          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
+          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
+          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
+          longDateFormat : {
+              LT : "h[e]mm A",
+              L : "DD/MM/YYYY",
+              LL : "D [a viz] MMMM YYYY",
+              LLL : "D [a viz] MMMM YYYY LT",
+              LLLL : "dddd, D [a viz] MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Hiziv da] LT',
+              nextDay : '[Warc\'hoazh da] LT',
+              nextWeek : 'dddd [da] LT',
+              lastDay : '[Dec\'h da] LT',
+              lastWeek : 'dddd [paset da] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "a-benn %s",
+              past : "%s 'zo",
+              s : "un nebeud segondennoù",
+              m : "ur vunutenn",
+              mm : relativeTimeWithMutation,
+              h : "un eur",
+              hh : "%d eur",
+              d : "un devezh",
+              dd : relativeTimeWithMutation,
+              M : "ur miz",
+              MM : relativeTimeWithMutation,
+              y : "ur bloaz",
+              yy : specialMutationForYears
+          },
+          ordinal : function (number) {
+              var output = (number === 1) ? 'añ' : 'vet';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bosnian (bs)
+  // author : Nedim Cholich : https://github.com/frontyard
+  // based on (hr) translation by Bojan Marković
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
+
+      return moment.lang('bs', {
+  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
+  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
           weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
           weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
           weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
@@ -33582,300 +30994,295 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 88 */
+/* 62 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hungarian (hu)
-  // author : Adam Brunner : https://github.com/adambrunner
+  // language : catalan (ca)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
-
-      function translate(number, withoutSuffix, key, isFuture) {
-          var num = number,
-              suffix;
-
-          switch (key) {
-          case 's':
-              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
-          case 'm':
-              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'mm':
-              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'h':
-              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'hh':
-              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'd':
-              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'dd':
-              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'M':
-              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'MM':
-              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'y':
-              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
-          case 'yy':
-              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
-          }
-
-          return '';
-      }
-
-      function week(isFuture) {
-          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
-      }
-
-      return moment.lang('hu', {
-          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
-          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
-          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
-          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
-          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
+      return moment.lang('ca', {
+          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
+          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
+          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
+          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
+          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
           longDateFormat : {
               LT : "H:mm",
-              L : "YYYY.MM.DD.",
-              LL : "YYYY. MMMM D.",
-              LLL : "YYYY. MMMM D., LT",
-              LLLL : "YYYY. MMMM D., dddd LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 12) {
-                  return isLower === true ? 'de' : 'DE';
-              } else {
-                  return isLower === true ? 'du' : 'DU';
-              }
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[ma] LT[-kor]',
-              nextDay : '[holnap] LT[-kor]',
+              sameDay : function () {
+                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextDay : function () {
+                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
               nextWeek : function () {
-                  return week.call(this, true);
+                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
               },
-              lastDay : '[tegnap] LT[-kor]',
               lastWeek : function () {
-                  return week.call(this, false);
+                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
               },
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s múlva",
-              past : "%s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
+              future : "en %s",
+              past : "fa %s",
+              s : "uns segons",
+              m : "un minut",
+              mm : "%d minuts",
+              h : "una hora",
+              hh : "%d hores",
+              d : "un dia",
+              dd : "%d dies",
+              M : "un mes",
+              MM : "%d mesos",
+              y : "un any",
+              yy : "%d anys"
           },
-          ordinal : '%d.',
+          ordinal : '%dº',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 89 */
+/* 63 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Armenian (hy-am)
-  // author : Armendarabyan : https://github.com/armendarabyan
+  // language : czech (cs)
+  // author : petrbela : https://github.com/petrbela
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
+      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
+          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
-              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
-          },
-
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
-
-          return months[nounCase][m.month()];
-      }
-
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
-
-          return monthsShort[m.month()];
+      function plural(n) {
+          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
       }
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
-
-          return weekdays[m.day()];
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minuty' : 'minut');
+              } else {
+                  return result + 'minutami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodin');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dny' : 'dní');
+              } else {
+                  return result + 'dny';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'měsíce' : 'měsíců');
+              } else {
+                  return result + 'měsíci';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'let');
+              } else {
+                  return result + 'lety';
+              }
+              break;
+          }
       }
 
-      return moment.lang('hy-am', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+      return moment.lang('cs', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
+          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
+          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY թ.",
-              LLL : "D MMMM YYYY թ., LT",
-              LLLL : "dddd, D MMMM YYYY թ., LT"
+              LT: "H.mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay: '[այսօր] LT',
-              nextDay: '[վաղը] LT',
-              lastDay: '[երեկ] LT',
+              sameDay: "[dnes v] LT",
+              nextDay: '[zítra v] LT',
               nextWeek: function () {
-                  return 'dddd [օրը ժամը] LT';
+                  switch (this.day()) {
+                  case 0:
+                      return '[v neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [v] LT';
+                  case 3:
+                      return '[ve středu v] LT';
+                  case 4:
+                      return '[ve čtvrtek v] LT';
+                  case 5:
+                      return '[v pátek v] LT';
+                  case 6:
+                      return '[v sobotu v] LT';
+                  }
               },
+              lastDay: '[včera v] LT',
               lastWeek: function () {
-                  return '[անցած] dddd [օրը ժամը] LT';
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulou neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[minulé] dddd [v] LT';
+                  case 3:
+                      return '[minulou středu v] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [v] LT';
+                  case 6:
+                      return '[minulou sobotu v] LT';
+                  }
               },
-              sameElse: 'L'
+              sameElse: "L"
           },
           relativeTime : {
-              future : "%s հետո",
-              past : "%s առաջ",
-              s : "մի քանի վայրկյան",
-              m : "րոպե",
-              mm : "%d րոպե",
-              h : "ժամ",
-              hh : "%d ժամ",
-              d : "օր",
-              dd : "%d օր",
-              M : "ամիս",
-              MM : "%d ամիս",
-              y : "տարի",
-              yy : "%d տարի"
-          },
-
-          meridiem : function (hour) {
-              if (hour < 4) {
-                  return "գիշերվա";
-              } else if (hour < 12) {
-                  return "առավոտվա";
-              } else if (hour < 17) {
-                  return "ցերեկվա";
-              } else {
-                  return "երեկոյան";
-              }
-          },
-
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'DDD':
-              case 'w':
-              case 'W':
-              case 'DDDo':
-                  if (number === 1) {
-                      return number + '-ին';
-                  }
-                  return number + '-րդ';
-              default:
-                  return number;
-              }
+              future : "za %s",
+              past : "před %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
           },
-
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 90 */
+/* 64 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Indonesia (id)
-  // author : Mohammad Satrio Utomo : https://github.com/tyok
-  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
+  // language : chuvash (cv)
+  // author : Anatoly Mironov : https://github.com/mirontoli
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('id', {
-          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
-          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
-          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
-          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
+      return moment.lang('cv', {
+          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
+          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
+          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
+          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
+          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
           longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'siang';
-              } else if (hours < 19) {
-                  return 'sore';
-              } else {
-                  return 'malam';
-              }
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
+              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
+              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
           },
           calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Besok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kemarin pukul] LT',
-              lastWeek : 'dddd [lalu pukul] LT',
-              sameElse : 'L'
+              sameDay: '[Паян] LT [сехетре]',
+              nextDay: '[Ыран] LT [сехетре]',
+              lastDay: '[Ĕнер] LT [сехетре]',
+              nextWeek: '[Çитес] dddd LT [сехетре]',
+              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
+              sameElse: 'L'
           },
           relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lalu",
-              s : "beberapa detik",
-              m : "semenit",
-              mm : "%d menit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
+              future : function (output) {
+                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
+                  return output + affix;
+              },
+              past : "%s каялла",
+              s : "пĕр-ик çеккунт",
+              m : "пĕр минут",
+              mm : "%d минут",
+              h : "пĕр сехет",
+              hh : "%d сехет",
+              d : "пĕр кун",
+              dd : "%d кун",
+              M : "пĕр уйăх",
+              MM : "%d уйăх",
+              y : "пĕр çул",
+              yy : "%d çул"
           },
+          ordinal : '%d-мĕш',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 7  // The week that contains Jan 1st is the first week of the year.
@@ -33885,125 +31292,140 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 91 */
+/* 65 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : icelandic (is)
-  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
+  // language : Welsh (cy)
+  // author : Robert Allen
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      function plural(n) {
-          if (n % 100 === 11) {
-              return true;
-          } else if (n % 10 === 1) {
-              return false;
-          }
-          return true;
-      }
+      return moment.lang("cy", {
+          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
+          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
+          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
+          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
+          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
+          // time formats are the same as en-gb
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[Heddiw am] LT',
+              nextDay: '[Yfory am] LT',
+              nextWeek: 'dddd [am] LT',
+              lastDay: '[Ddoe am] LT',
+              lastWeek: 'dddd [diwethaf am] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "mewn %s",
+              past: "%s yn ôl",
+              s: "ychydig eiliadau",
+              m: "munud",
+              mm: "%d munud",
+              h: "awr",
+              hh: "%d awr",
+              d: "diwrnod",
+              dd: "%d diwrnod",
+              M: "mis",
+              MM: "%d mis",
+              y: "blwyddyn",
+              yy: "%d flynedd"
+          },
+          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
+          ordinal: function (number) {
+              var b = number,
+                  output = '',
+                  lookup = [
+                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
+                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
+                  ];
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':
-              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
-          case 'm':
-              return withoutSuffix ? 'mínúta' : 'mínútu';
-          case 'mm':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
-              } else if (withoutSuffix) {
-                  return result + 'mínúta';
-              }
-              return result + 'mínútu';
-          case 'hh':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
-              }
-              return result + 'klukkustund';
-          case 'd':
-              if (withoutSuffix) {
-                  return 'dagur';
-              }
-              return isFuture ? 'dag' : 'degi';
-          case 'dd':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'dagar';
-                  }
-                  return result + (isFuture ? 'daga' : 'dögum');
-              } else if (withoutSuffix) {
-                  return result + 'dagur';
-              }
-              return result + (isFuture ? 'dag' : 'degi');
-          case 'M':
-              if (withoutSuffix) {
-                  return 'mánuður';
-              }
-              return isFuture ? 'mánuð' : 'mánuði';
-          case 'MM':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'mánuðir';
+              if (b > 20) {
+                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
+                      output = 'fed'; // not 30ain, 70ain or 90ain
+                  } else {
+                      output = 'ain';
                   }
-                  return result + (isFuture ? 'mánuði' : 'mánuðum');
-              } else if (withoutSuffix) {
-                  return result + 'mánuður';
-              }
-              return result + (isFuture ? 'mánuð' : 'mánuði');
-          case 'y':
-              return withoutSuffix || isFuture ? 'ár' : 'ári';
-          case 'yy':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
+              } else if (b > 0) {
+                  output = lookup[b];
               }
-              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
+
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-      }
+      });
+  }));
 
-      return moment.lang('is', {
-          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
-          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
-          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
-          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
+
+/***/ },
+/* 66 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : danish (da)
+  // author : Ulrik Nielsen : https://github.com/mrbase
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('da', {
+          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
           longDateFormat : {
-              LT : "H:mm",
+              LT : "HH:mm",
               L : "DD/MM/YYYY",
               LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd [d.] D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[í dag kl.] LT',
-              nextDay : '[á morgun kl.] LT',
+              sameDay : '[I dag kl.] LT',
+              nextDay : '[I morgen kl.] LT',
               nextWeek : 'dddd [kl.] LT',
-              lastDay : '[í gær kl.] LT',
-              lastWeek : '[síðasta] dddd [kl.] LT',
+              lastDay : '[I går kl.] LT',
+              lastWeek : '[sidste] dddd [kl] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "eftir %s",
-              past : "fyrir %s síðan",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : "klukkustund",
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
+              future : "om %s",
+              past : "%s siden",
+              s : "få sekunder",
+              m : "et minut",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dage",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "et år",
+              yy : "%d år"
           },
           ordinal : '%d.',
           week : {
@@ -34015,62 +31437,75 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 92 */
+/* 67 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : italian (it)
-  // author : Lorenzo : https://github.com/aliem
-  // author: Mattia Larentis: https://github.com/nostalgiaz
+  // language : austrian german (de-at)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
+  // author : Martin Groller : https://github.com/MadMG
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('it', {
-          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
-          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
-          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
-          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
-          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
+
+      return moment.lang('de-at', {
+          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay: '[Oggi alle] LT',
-              nextDay: '[Domani alle] LT',
-              nextWeek: 'dddd [alle] LT',
-              lastDay: '[Ieri alle] LT',
-              lastWeek: '[lo scorso] dddd [alle] LT',
-              sameElse: 'L'
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
           },
           relativeTime : {
-              future : function (s) {
-                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
-              },
-              past : "%s fa",
-              s : "alcuni secondi",
-              m : "un minuto",
-              mm : "%d minuti",
-              h : "un'ora",
-              hh : "%d ore",
-              d : "un giorno",
-              dd : "%d giorni",
-              M : "un mese",
-              MM : "%d mesi",
-              y : "un anno",
-              yy : "%d anni"
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
           },
-          ordinal: '%dº',
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 4  // The week that contains Jan 4th is the first week of the year.
@@ -34080,119 +31515,120 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 93 */
+/* 68 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : japanese (ja)
-  // author : LI Long : https://github.com/baryon
+  // language : german (de)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('ja', {
-          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
-          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
-          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
+
+      return moment.lang('de', {
+          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
           longDateFormat : {
-              LT : "Ah時m分",
-              L : "YYYY/MM/DD",
-              LL : "YYYY年M月D日",
-              LLL : "YYYY年M月D日LT",
-              LLLL : "YYYY年M月D日LT dddd"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "午前";
-              } else {
-                  return "午後";
-              }
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[今日] LT',
-              nextDay : '[明日] LT',
-              nextWeek : '[来週]dddd LT',
-              lastDay : '[昨日] LT',
-              lastWeek : '[前週]dddd LT',
-              sameElse : 'L'
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
           },
           relativeTime : {
-              future : "%s後",
-              past : "%s前",
-              s : "数秒",
-              m : "1分",
-              mm : "%d分",
-              h : "1時間",
-              hh : "%d時間",
-              d : "1日",
-              dd : "%d日",
-              M : "1ヶ月",
-              MM : "%dヶ月",
-              y : "1年",
-              yy : "%d年"
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 94 */
+/* 69 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Georgian (ka)
-  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
+  // language : modern greek (el)
+  // author : Aggelos Karalias : https://github.com/mehiel
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
-              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
+      return moment.lang('el', {
+          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
+          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
+          months : function (momentToFormat, format) {
+              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
+                  return this._monthsGenitiveEl[momentToFormat.month()];
+              } else {
+                  return this._monthsNominativeEl[momentToFormat.month()];
+              }
           },
-
-          nounCase = (/D[oD] *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
-
-          return months[nounCase][m.month()];
-      }
-
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
-              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
+          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
+          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
+          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
+          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'μμ' : 'ΜΜ';
+              } else {
+                  return isLower ? 'πμ' : 'ΠΜ';
+              }
           },
-
-          nounCase = (/(წინა|შემდეგ)/).test(format) ?
-              'accusative' :
-              'nominative';
-
-          return weekdays[nounCase][m.day()];
-      }
-
-      return moment.lang('ka', {
-          months : monthsCaseReplace,
-          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
-          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
           longDateFormat : {
               LT : "h:mm A",
               L : "DD/MM/YYYY",
@@ -34200,475 +31636,403 @@ return /******/ (function(modules) { // webpackBootstrap
               LLL : "D MMMM YYYY LT",
               LLLL : "dddd, D MMMM YYYY LT"
           },
-          calendar : {
-              sameDay : '[დღეს] LT[-ზე]',
-              nextDay : '[ხვალ] LT[-ზე]',
-              lastDay : '[გუშინ] LT[-ზე]',
-              nextWeek : '[შემდეგ] dddd LT[-ზე]',
-              lastWeek : '[წინა] dddd LT-ზე',
+          calendarEl : {
+              sameDay : '[Σήμερα {}] LT',
+              nextDay : '[Αύριο {}] LT',
+              nextWeek : 'dddd [{}] LT',
+              lastDay : '[Χθες {}] LT',
+              lastWeek : function() {
+                  switch (this.day()) {
+                      case 6:
+                          return '[το προηγούμενο] dddd [{}] LT';
+                      default:
+                          return '[την προηγούμενη] dddd [{}] LT';
+                  }
+              },
               sameElse : 'L'
           },
-          relativeTime : {
-              future : function (s) {
-                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
-                      s.replace(/ი$/, "ში") :
-                      s + "ში";
-              },
-              past : function (s) {
-                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
-                      return s.replace(/(ი|ე)$/, "ის წინ");
-                  }
-                  if ((/წელი/).test(s)) {
-                      return s.replace(/წელი$/, "წლის წინ");
-                  }
-              },
-              s : "რამდენიმე წამი",
-              m : "წუთი",
-              mm : "%d წუთი",
-              h : "საათი",
-              hh : "%d საათი",
-              d : "დღე",
-              dd : "%d დღე",
-              M : "თვე",
-              MM : "%d თვე",
-              y : "წელი",
-              yy : "%d წელი"
-          },
-          ordinal : function (number) {
-              if (number === 0) {
-                  return number;
-              }
-
-              if (number === 1) {
-                  return number + "-ლი";
-              }
+          calendar : function (key, mom) {
+              var output = this._calendarEl[key],
+                  hours = mom && mom.hours();
 
-              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
-                  return "მე-" + number;
+              if (typeof output === 'function') {
+                  output = output.apply(mom);
               }
 
-              return number + "-ე";
+              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
+          },
+          relativeTime : {
+              future : "σε %s",
+              past : "%s πριν",
+              s : "δευτερόλεπτα",
+              m : "ένα λεπτό",
+              mm : "%d λεπτά",
+              h : "μία ώρα",
+              hh : "%d ώρες",
+              d : "μία μέρα",
+              dd : "%d μέρες",
+              M : "ένας μήνας",
+              MM : "%d μήνες",
+              y : "ένας χρόνος",
+              yy : "%d χρόνια"
+          },
+          ordinal : function (number) {
+              return number + 'η';
           },
           week : {
-              dow : 1,
-              doy : 7
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 95 */
+/* 70 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : khmer (km)
-  // author : Kruy Vanna : https://github.com/kruyvanna
+  // language : australian english (en-au)
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('km', {
-          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
+      return moment.lang('en-au', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
           },
-          calendar: {
-              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
-              nextDay: '[ស្អែក ម៉ោង] LT',
-              nextWeek: 'dddd [ម៉ោង] LT',
-              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
-              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
-              sameElse: 'L'
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
           },
-          relativeTime: {
-              future: "%sទៀត",
-              past: "%sមុន",
-              s: "ប៉ុន្មានវិនាទី",
-              m: "មួយនាទី",
-              mm: "%d នាទី",
-              h: "មួយម៉ោង",
-              hh: "%d ម៉ោង",
-              d: "មួយថ្ងៃ",
-              dd: "%d ថ្ងៃ",
-              M: "មួយខែ",
-              MM: "%d ខែ",
-              y: "មួយឆ្នាំ",
-              yy: "%d ឆ្នាំ"
+          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"
           },
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4 // The week that contains Jan 4th is the first week of the year.
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 96 */
+/* 71 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : korean (ko)
-  //
-  // authors 
-  //
-  // - Kyungwook, Park : https://github.com/kyungw00k
-  // - Jeeeyul Lee <jeeeyul@gmail.com>
+  // language : canadian english (en-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
+
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('ko', {
-          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
-          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
-          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
+      return moment.lang('en-ca', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
           longDateFormat : {
-              LT : "A h시 mm분",
-              L : "YYYY.MM.DD",
-              LL : "YYYY년 MMMM D일",
-              LLL : "YYYY년 MMMM D일 LT",
-              LLLL : "YYYY년 MMMM D일 dddd LT"
-          },
-          meridiem : function (hour, minute, isUpper) {
-              return hour < 12 ? '오전' : '오후';
+              LT : "h:mm A",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM, YYYY",
+              LLL : "D MMMM, YYYY LT",
+              LLLL : "dddd, D MMMM, YYYY LT"
           },
           calendar : {
-              sameDay : '오늘 LT',
-              nextDay : '내일 LT',
-              nextWeek : 'dddd LT',
-              lastDay : '어제 LT',
-              lastWeek : '지난주 dddd LT',
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s 후",
-              past : "%s 전",
-              s : "몇초",
-              ss : "%d초",
-              m : "일분",
-              mm : "%d분",
-              h : "한시간",
-              hh : "%d시간",
-              d : "하루",
-              dd : "%d일",
-              M : "한달",
-              MM : "%d달",
-              y : "일년",
-              yy : "%d년"
+              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"
           },
-          ordinal : '%d일',
-          meridiemParse : /(오전|오후)/,
-          isPM : function (token) {
-              return token === "오후";
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
           }
       });
   }));
 
 
 /***/ },
-/* 97 */
+/* 72 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Luxembourgish (lb)
-  // author : mweimerskirch : https://github.com/mweimerskirch
-
-  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
-  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
-  // and "eifelerRegelAppliesToNumber" methods are meant for
+  // language : great britain english (en-gb)
+  // author : Chris Gedrim : https://github.com/chrisgedrim
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eng Minutt', 'enger Minutt'],
-              'h': ['eng Stonn', 'enger Stonn'],
-              'd': ['een Dag', 'engem Dag'],
-              'dd': [number + ' Deeg', number + ' Deeg'],
-              'M': ['ee Mount', 'engem Mount'],
-              'MM': [number + ' Méint', number + ' Méint'],
-              'y': ['ee Joer', 'engem Joer'],
-              'yy': [number + ' Joer', number + ' Joer']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
-      }
-
-      function processFutureTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "a " + string;
+      return moment.lang('en-gb', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-          return "an " + string;
-      }
+      });
+  }));
 
-      function processPastTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "viru " + string;
-          }
-          return "virun " + string;
-      }
 
-      function processLastWeek(string1) {
-          var weekday = this.format('d');
-          if (eifelerRegelAppliesToWeekday(weekday)) {
-              return '[Leschte] dddd [um] LT';
-          }
-          return '[Leschten] dddd [um] LT';
-      }
+/***/ },
+/* 73 */
+/***/ function(module, exports, __webpack_require__) {
 
-      /**
-       * Returns true if the word before the given week day loses the "-n" ending.
-       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
-       *
-       * @param weekday {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToWeekday(weekday) {
-          weekday = parseInt(weekday, 10);
-          switch (weekday) {
-          case 0: // Sonndeg
-          case 1: // Méindeg
-          case 3: // Mëttwoch
-          case 5: // Freideg
-          case 6: // Samschdeg
-              return true;
-          default: // 2 Dënschdeg, 4 Donneschdeg
-              return false;
-          }
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : esperanto (eo)
+  // author : Colin Dean : https://github.com/colindean
+  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
+  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
 
-      /**
-       * Returns true if the word before the given number loses the "-n" ending.
-       * e.g. "an 10 Deeg" but "a 5 Deeg"
-       *
-       * @param number {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToNumber(number) {
-          number = parseInt(number, 10);
-          if (isNaN(number)) {
-              return false;
-          }
-          if (number < 0) {
-              // Negative Number --> always true
-              return true;
-          } else if (number < 10) {
-              // Only 1 digit
-              if (4 <= number && number <= 7) {
-                  return true;
-              }
-              return false;
-          } else if (number < 100) {
-              // 2 digits
-              var lastDigit = number % 10, firstDigit = number / 10;
-              if (lastDigit === 0) {
-                  return eifelerRegelAppliesToNumber(firstDigit);
-              }
-              return eifelerRegelAppliesToNumber(lastDigit);
-          } else if (number < 10000) {
-              // 3 or 4 digits --> recursively check first digit
-              while (number >= 10) {
-                  number = number / 10;
-              }
-              return eifelerRegelAppliesToNumber(number);
-          } else {
-              // Anything larger than 4 digits: recursively check first n-3 digits
-              number = number / 1000;
-              return eifelerRegelAppliesToNumber(number);
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      return moment.lang('lb', {
-          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
-          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
-          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
-          longDateFormat: {
-              LT: "H:mm [Auer]",
-              L: "DD.MM.YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
+  }(function (moment) {
+      return moment.lang('eo', {
+          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
+          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
+          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D[-an de] MMMM, YYYY",
+              LLL : "D[-an de] MMMM, YYYY LT",
+              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
           },
-          calendar: {
-              sameDay: "[Haut um] LT",
-              sameElse: "L",
-              nextDay: '[Muer um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gëschter um] LT',
-              lastWeek: processLastWeek
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'p.t.m.' : 'P.T.M.';
+              } else {
+                  return isLower ? 'a.t.m.' : 'A.T.M.';
+              }
           },
-          relativeTime: {
-              future: processFutureTime,
-              past: processPastTime,
-              s: "e puer Sekonnen",
-              m: processRelativeTime,
-              mm: "%d Minutten",
-              h: processRelativeTime,
-              hh: "%d Stonnen",
-              d: processRelativeTime,
-              dd: processRelativeTime,
-              M: processRelativeTime,
-              MM: processRelativeTime,
-              y: processRelativeTime,
-              yy: processRelativeTime
+          calendar : {
+              sameDay : '[Hodiaŭ je] LT',
+              nextDay : '[Morgaŭ je] LT',
+              nextWeek : 'dddd [je] LT',
+              lastDay : '[Hieraŭ je] LT',
+              lastWeek : '[pasinta] dddd [je] LT',
+              sameElse : 'L'
           },
-          ordinal: '%d.',
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4  // The week that contains Jan 4th is the first week of the year.
+          relativeTime : {
+              future : "je %s",
+              past : "antaŭ %s",
+              s : "sekundoj",
+              m : "minuto",
+              mm : "%d minutoj",
+              h : "horo",
+              hh : "%d horoj",
+              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
+              dd : "%d tagoj",
+              M : "monato",
+              MM : "%d monatoj",
+              y : "jaro",
+              yy : "%d jaroj"
+          },
+          ordinal : "%da",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 98 */
+/* 74 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Lithuanian (lt)
-  // author : Mindaugas Mozūras : https://github.com/mmozuras
+  // language : spanish (es)
+  // author : Julio Napurí : https://github.com/julionc
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var units = {
-          "m" : "minutė_minutės_minutę",
-          "mm": "minutės_minučių_minutes",
-          "h" : "valanda_valandos_valandą",
-          "hh": "valandos_valandų_valandas",
-          "d" : "diena_dienos_dieną",
-          "dd": "dienos_dienų_dienas",
-          "M" : "mėnuo_mėnesio_mėnesį",
-          "MM": "mėnesiai_mėnesių_mėnesius",
-          "y" : "metai_metų_metus",
-          "yy": "metai_metų_metus"
-      },
-      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
-
-      function translateSeconds(number, withoutSuffix, key, isFuture) {
-          if (withoutSuffix) {
-              return "kelios sekundės";
-          } else {
-              return isFuture ? "kelių sekundžių" : "kelias sekundes";
-          }
-      }
+      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
+          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
 
-      function translateSingular(number, withoutSuffix, key, isFuture) {
-          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
-      }
-
-      function special(number) {
-          return number % 10 === 0 || (number > 10 && number < 20);
-      }
-
-      function forms(key) {
-          return units[key].split("_");
-      }
-
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          if (number === 1) {
-              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
-          } else if (withoutSuffix) {
-              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
-          } else {
-              if (isFuture) {
-                  return result + forms(key)[1];
+      return moment.lang('es', {
+          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShort[m.month()];
               } else {
-                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
+                  return monthsShortDot[m.month()];
               }
-          }
-      }
-
-      function relativeWeekDay(moment, format) {
-          var nominative = format.indexOf('dddd HH:mm') === -1,
-              weekDay = weekDays[moment.day()];
-
-          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
-      }
-
-      return moment.lang("lt", {
-          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
-          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
-          weekdays : relativeWeekDay,
-          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
-          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
+          },
+          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
+          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY [m.] MMMM D [d.]",
-              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
-              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
-              l : "YYYY-MM-DD",
-              ll : "YYYY [m.] MMMM D [d.]",
-              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
-              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [del] YYYY",
+              LLL : "D [de] MMMM [del] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
           },
           calendar : {
-              sameDay : "[Šiandien] LT",
-              nextDay : "[Rytoj] LT",
-              nextWeek : "dddd LT",
-              lastDay : "[Vakar] LT",
-              lastWeek : "[Praėjusį] dddd LT",
-              sameElse : "L"
+              sameDay : function () {
+                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "po %s",
-              past : "prieš %s",
-              s : translateSeconds,
-              m : translateSingular,
-              mm : translate,
-              h : translateSingular,
-              hh : translate,
-              d : translateSingular,
-              dd : translate,
-              M : translateSingular,
-              MM : translate,
-              y : translateSingular,
-              yy : translate
-          },
-          ordinal : function (number) {
-              return number + '-oji';
+              future : "en %s",
+              past : "hace %s",
+              s : "unos segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "una hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un año",
+              yy : "%d años"
           },
+          ordinal : '%dº',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 4  // The week that contains Jan 4th is the first week of the year.
@@ -34678,78 +32042,77 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 99 */
+/* 75 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : latvian (lv)
-  // author : Kristaps Karlsons : https://github.com/skakri
+  // language : estonian (et)
+  // author : Henry Kehlmann : https://github.com/madhenry
+  // improvements : Illimar Tambek : https://github.com/ragulka
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var units = {
-          'mm': 'minūti_minūtes_minūte_minūtes',
-          'hh': 'stundu_stundas_stunda_stundas',
-          'dd': 'dienu_dienas_diena_dienas',
-          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
-          'yy': 'gadu_gadus_gads_gadi'
-      };
-
-      function format(word, number, withoutSuffix) {
-          var forms = word.split('_');
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
+              'm' : ['ühe minuti', 'üks minut'],
+              'mm': [number + ' minuti', number + ' minutit'],
+              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
+              'hh': [number + ' tunni', number + ' tundi'],
+              'd' : ['ühe päeva', 'üks päev'],
+              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
+              'MM': [number + ' kuu', number + ' kuud'],
+              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
+              'yy': [number + ' aasta', number + ' aastat']
+          };
           if (withoutSuffix) {
-              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
-          } else {
-              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
+              return format[key][2] ? format[key][2] : format[key][1];
           }
+          return isFuture ? format[key][0] : format[key][1];
       }
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          return number + ' ' + format(units[key], number, withoutSuffix);
-      }
-
-      return moment.lang('lv', {
-          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
-          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
-          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
+      return moment.lang('et', {
+          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
+          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
+          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
+          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
+          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "YYYY. [gada] D. MMMM",
-              LLL : "YYYY. [gada] D. MMMM, LT",
-              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
+              LT   : "H:mm",
+              L    : "DD.MM.YYYY",
+              LL   : "D. MMMM YYYY",
+              LLL  : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[Šodien pulksten] LT',
-              nextDay : '[Rīt pulksten] LT',
-              nextWeek : 'dddd [pulksten] LT',
-              lastDay : '[Vakar pulksten] LT',
-              lastWeek : '[Pagājušā] dddd [pulksten] LT',
+              sameDay  : '[Täna,] LT',
+              nextDay  : '[Homme,] LT',
+              nextWeek : '[Järgmine] dddd LT',
+              lastDay  : '[Eile,] LT',
+              lastWeek : '[Eelmine] dddd LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s vēlāk",
-              past : "%s agrāk",
-              s : "dažas sekundes",
-              m : "minūti",
-              mm : relativeTimeWithPlural,
-              h : "stundu",
-              hh : relativeTimeWithPlural,
-              d : "dienu",
-              dd : relativeTimeWithPlural,
-              M : "mēnesi",
-              MM : relativeTimeWithPlural,
-              y : "gadu",
-              yy : relativeTimeWithPlural
+              future : "%s pärast",
+              past   : "%s tagasi",
+              s      : processRelativeTime,
+              m      : processRelativeTime,
+              mm     : processRelativeTime,
+              h      : processRelativeTime,
+              hh     : processRelativeTime,
+              d      : processRelativeTime,
+              dd     : '%d päeva',
+              M      : processRelativeTime,
+              MM     : processRelativeTime,
+              y      : processRelativeTime,
+              yy     : processRelativeTime
           },
           ordinal : '%d.',
           week : {
@@ -34761,89 +32124,63 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 100 */
+/* 76 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : macedonian (mk)
-  // author : Borislav Mickov : https://github.com/B0k0
+  // language : euskara (eu)
+  // author : Eneko Illarramendi : https://github.com/eillarra
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('mk', {
-          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
-          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
-          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
+      return moment.lang('eu', {
+          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
+          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
+          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
+          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
+          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
           longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY[ko] MMMM[ren] D[a]",
+              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
+              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
+              l : "YYYY-M-D",
+              ll : "YYYY[ko] MMM D[a]",
+              lll : "YYYY[ko] MMM D[a] LT",
+              llll : "ddd, YYYY[ko] MMM D[a] LT"
           },
           calendar : {
-              sameDay : '[Денес во] LT',
-              nextDay : '[Утре во] LT',
-              nextWeek : 'dddd [во] LT',
-              lastDay : '[Вчера во] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[Во изминатата] dddd [во] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[Во изминатиот] dddd [во] LT';
-                  }
-              },
+              sameDay : '[gaur] LT[etan]',
+              nextDay : '[bihar] LT[etan]',
+              nextWeek : 'dddd LT[etan]',
+              lastDay : '[atzo] LT[etan]',
+              lastWeek : '[aurreko] dddd LT[etan]',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "после %s",
-              past : "пред %s",
-              s : "неколку секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дена",
-              M : "месец",
-              MM : "%d месеци",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
+              future : "%s barru",
+              past : "duela %s",
+              s : "segundo batzuk",
+              m : "minutu bat",
+              mm : "%d minutu",
+              h : "ordu bat",
+              hh : "%d ordu",
+              d : "egun bat",
+              dd : "%d egun",
+              M : "hilabete bat",
+              MM : "%d hilabete",
+              y : "urte bat",
+              yy : "%d urte"
           },
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 7  // The week that contains Jan 1st is the first week of the year.
@@ -34853,310 +32190,269 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 101 */
+/* 77 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : malayalam (ml)
-  // author : Floyd Pink : https://github.com/floydpink
+  // language : Persian Language
+  // author : Ebrahim Byagowi : https://github.com/ebraminio
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('ml', {
-          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
-          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
-          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
-          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
-          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
+      var symbolMap = {
+          '1': '۱',
+          '2': '۲',
+          '3': '۳',
+          '4': '۴',
+          '5': '۵',
+          '6': '۶',
+          '7': '۷',
+          '8': '۸',
+          '9': '۹',
+          '0': '۰'
+      }, numberMap = {
+          '۱': '1',
+          '۲': '2',
+          '۳': '3',
+          '۴': '4',
+          '۵': '5',
+          '۶': '6',
+          '۷': '7',
+          '۸': '8',
+          '۹': '9',
+          '۰': '0'
+      };
+
+      return moment.lang('fa', {
+          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
           longDateFormat : {
-              LT : "A h:mm -നു",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
+              LT : 'HH:mm',
+              L : 'DD/MM/YYYY',
+              LL : 'D MMMM YYYY',
+              LLL : 'D MMMM YYYY LT',
+              LLLL : 'dddd, D MMMM YYYY LT'
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "قبل از ظهر";
+              } else {
+                  return "بعد از ظهر";
+              }
           },
           calendar : {
-              sameDay : '[ഇന്ന്] LT',
-              nextDay : '[നാളെ] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[ഇന്നലെ] LT',
-              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
+              sameDay : '[امروز ساعت] LT',
+              nextDay : '[فردا ساعت] LT',
+              nextWeek : 'dddd [ساعت] LT',
+              lastDay : '[دیروز ساعت] LT',
+              lastWeek : 'dddd [پیش] [ساعت] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s കഴിഞ്ഞ്",
-              past : "%s മുൻപ്",
-              s : "അൽപ നിമിഷങ്ങൾ",
-              m : "ഒരു മിനിറ്റ്",
-              mm : "%d മിനിറ്റ്",
-              h : "ഒരു മണിക്കൂർ",
-              hh : "%d മണിക്കൂർ",
-              d : "ഒരു ദിവസം",
-              dd : "%d ദിവസം",
-              M : "ഒരു മാസം",
-              MM : "%d മാസം",
-              y : "ഒരു വർഷം",
-              yy : "%d വർഷം"
+              future : 'در %s',
+              past : '%s پیش',
+              s : 'چندین ثانیه',
+              m : 'یک دقیقه',
+              mm : '%d دقیقه',
+              h : 'یک ساعت',
+              hh : '%d ساعت',
+              d : 'یک روز',
+              dd : '%d روز',
+              M : 'یک ماه',
+              MM : '%d ماه',
+              y : 'یک سال',
+              yy : '%d سال'
           },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "രാത്രി";
-              } else if (hour < 12) {
-                  return "രാവിലെ";
-              } else if (hour < 17) {
-                  return "ഉച്ച കഴിഞ്ഞ്";
-              } else if (hour < 20) {
-                  return "വൈകുന്നേരം";
-              } else {
-                  return "രാത്രി";
-              }
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          ordinal : '%dم',
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12 // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 102 */
+/* 78 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Marathi (mr)
-  // author : Harshad Kale : https://github.com/kalehv
+  // language : finnish (fi)
+  // author : Tarmo Aidantausta : https://github.com/bleadof
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
+          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
+                            numbersPast[7], numbersPast[8], numbersPast[9]];
 
-      return moment.lang('mr', {
-          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
-          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm वाजता",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[उद्या] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[काल] LT',
-              lastWeek: '[मागील] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s नंतर",
-              past : "%s पूर्वी",
-              s : "सेकंद",
-              m: "एक मिनिट",
-              mm: "%d मिनिटे",
-              h : "एक तास",
-              hh : "%d तास",
-              d : "एक दिवस",
-              dd : "%d दिवस",
-              M : "एक महिना",
-              MM : "%d महिने",
-              y : "एक वर्ष",
-              yy : "%d वर्षे"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem: function (hour, minute, isLower)
-          {
-              if (hour < 4) {
-                  return "रात्री";
-              } else if (hour < 10) {
-                  return "सकाळी";
-              } else if (hour < 17) {
-                  return "दुपारी";
-              } else if (hour < 20) {
-                  return "सायंकाळी";
-              } else {
-                  return "रात्री";
-              }
-          },
-          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.
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = "";
+          switch (key) {
+          case 's':
+              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
+          case 'm':
+              return isFuture ? 'minuutin' : 'minuutti';
+          case 'mm':
+              result = isFuture ? 'minuutin' : 'minuuttia';
+              break;
+          case 'h':
+              return isFuture ? 'tunnin' : 'tunti';
+          case 'hh':
+              result = isFuture ? 'tunnin' : 'tuntia';
+              break;
+          case 'd':
+              return isFuture ? 'päivän' : 'päivä';
+          case 'dd':
+              result = isFuture ? 'päivän' : 'päivää';
+              break;
+          case 'M':
+              return isFuture ? 'kuukauden' : 'kuukausi';
+          case 'MM':
+              result = isFuture ? 'kuukauden' : 'kuukautta';
+              break;
+          case 'y':
+              return isFuture ? 'vuoden' : 'vuosi';
+          case 'yy':
+              result = isFuture ? 'vuoden' : 'vuotta';
+              break;
           }
-      });
-  }));
-
-
-/***/ },
-/* 103 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Malaysia (ms-MY)
-  // author : Weldan Jamili : https://github.com/weldan
+          result = verbalNumber(number, isFuture) + " " + result;
+          return result;
+      }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      function verbalNumber(number, isFuture) {
+          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
       }
-  }(function (moment) {
-      return moment.lang('ms-my', {
-          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
-          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
-          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
-          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
-          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
+
+      return moment.lang('fi', {
+          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
+          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
+          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
+          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
+          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
           longDateFormat : {
               LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'tengahari';
-              } else if (hours < 19) {
-                  return 'petang';
-              } else {
-                  return 'malam';
-              }
+              L : "DD.MM.YYYY",
+              LL : "Do MMMM[ta] YYYY",
+              LLL : "Do MMMM[ta] YYYY, [klo] LT",
+              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
+              l : "D.M.YYYY",
+              ll : "Do MMM YYYY",
+              lll : "Do MMM YYYY, [klo] LT",
+              llll : "ddd, Do MMM YYYY, [klo] LT"
           },
           calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Esok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kelmarin pukul] LT',
-              lastWeek : 'dddd [lepas pukul] LT',
+              sameDay : '[tänään] [klo] LT',
+              nextDay : '[huomenna] [klo] LT',
+              nextWeek : 'dddd [klo] LT',
+              lastDay : '[eilen] [klo] LT',
+              lastWeek : '[viime] dddd[na] [klo] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lepas",
-              s : "beberapa saat",
-              m : "seminit",
-              mm : "%d minit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
+              future : "%s päästä",
+              past : "%s sitten",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
           },
+          ordinal : "%d.",
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 104 */
+/* 79 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian bokmål (nb)
-  // authors : Espen Hovlandsdal : https://github.com/rexxars
-  //           Sigurd Gartmann : https://github.com/sigurdga
+  // language : faroese (fo)
+  // author : Ragnar Johannesen : https://github.com/ragnar123
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('nb', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+      return moment.lang('fo', {
+          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
+          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
+          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
           longDateFormat : {
-              LT : "H.mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd D. MMMM YYYY [kl.] LT"
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D. MMMM, YYYY LT"
           },
           calendar : {
-              sameDay: '[i dag kl.] LT',
-              nextDay: '[i morgen kl.] LT',
-              nextWeek: 'dddd [kl.] LT',
-              lastDay: '[i går kl.] LT',
-              lastWeek: '[forrige] dddd [kl.] LT',
-              sameElse: 'L'
+              sameDay : '[Í dag kl.] LT',
+              nextDay : '[Í morgin kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[Í gjár kl.] LT',
+              lastWeek : '[síðstu] dddd [kl] LT',
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "om %s",
-              past : "for %s siden",
-              s : "noen sekunder",
-              m : "ett minutt",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dager",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "ett år",
-              yy : "%d år"
+              future : "um %s",
+              past : "%s síðani",
+              s : "fá sekund",
+              m : "ein minutt",
+              mm : "%d minuttir",
+              h : "ein tími",
+              hh : "%d tímar",
+              d : "ein dagur",
+              dd : "%d dagar",
+              M : "ein mánaði",
+              MM : "%d mánaðir",
+              y : "eitt ár",
+              yy : "%d ár"
           },
           ordinal : '%d.',
           week : {
@@ -35168,180 +32464,120 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 105 */
+/* 80 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : nepali/nepalese
-  // author : suvash : https://github.com/suvash
+  // language : canadian french (fr-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
-
-      return moment.lang('ne', {
-          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
-          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
-          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
-          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
-          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
+      return moment.lang('fr-ca', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
           longDateFormat : {
-              LT : "Aको h:mm बजे",
-              L : "DD/MM/YYYY",
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
               LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 3) {
-                  return "राती";
-              } else if (hour < 10) {
-                  return "बिहान";
-              } else if (hour < 15) {
-                  return "दिउँसो";
-              } else if (hour < 18) {
-                  return "बेलुका";
-              } else if (hour < 20) {
-                  return "साँझ";
-              } else {
-                  return "राती";
-              }
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[भोली] LT',
-              nextWeek : '[आउँदो] dddd[,] LT',
-              lastDay : '[हिजो] LT',
-              lastWeek : '[गएको] dddd[,] LT',
-              sameElse : 'L'
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
           },
           relativeTime : {
-              future : "%sमा",
-              past : "%s अगाडी",
-              s : "केही समय",
-              m : "एक मिनेट",
-              mm : "%d मिनेट",
-              h : "एक घण्टा",
-              hh : "%d घण्टा",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महिना",
-              MM : "%d महिना",
-              y : "एक बर्ष",
-              yy : "%d बर्ष"
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
           },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
           }
       });
   }));
 
 
 /***/ },
-/* 106 */
+/* 81 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : dutch (nl)
-  // author : Joris Röling : https://github.com/jjupiter
+  // language : french (fr)
+  // author : John Fischer : https://github.com/jfroffice
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
-          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
-
-      return moment.lang('nl', {
-          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShortWithoutDots[m.month()];
-              } else {
-                  return monthsShortWithDots[m.month()];
-              }
-          },
-          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
-          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
-          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
+      return moment.lang('fr', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
           longDateFormat : {
               LT : "HH:mm",
-              L : "DD-MM-YYYY",
+              L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
               LLL : "D MMMM YYYY LT",
               LLLL : "dddd D MMMM YYYY LT"
           },
           calendar : {
-              sameDay: '[vandaag om] LT',
-              nextDay: '[morgen om] LT',
-              nextWeek: 'dddd [om] LT',
-              lastDay: '[gisteren om] LT',
-              lastWeek: '[afgelopen] dddd [om] LT',
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
               sameElse: 'L'
           },
           relativeTime : {
-              future : "over %s",
-              past : "%s geleden",
-              s : "een paar seconden",
-              m : "één minuut",
-              mm : "%d minuten",
-              h : "één uur",
-              hh : "%d uur",
-              d : "één dag",
-              dd : "%d dagen",
-              M : "één maand",
-              MM : "%d maanden",
-              y : "één jaar",
-              yy : "%d jaar"
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
           },
           ordinal : function (number) {
-              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
+              return number + (number === 1 ? 'er' : '');
           },
           week : {
               dow : 1, // Monday is the first day of the week.
@@ -35352,369 +32588,525 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 107 */
+/* 82 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian nynorsk (nn)
-  // author : https://github.com/mechuwind
+  // language : galician (gl)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('nn', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
-          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
-          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
+      return moment.lang('gl', {
+          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
+          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
+          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
+          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
               LLL : "D MMMM YYYY LT",
               LLLL : "dddd D MMMM YYYY LT"
           },
           calendar : {
-              sameDay: '[I dag klokka] LT',
-              nextDay: '[I morgon klokka] LT',
-              nextWeek: 'dddd [klokka] LT',
-              lastDay: '[I går klokka] LT',
-              lastWeek: '[Føregåande] dddd [klokka] LT',
-              sameElse: 'L'
+              sameDay : function () {
+                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              lastDay : function () {
+                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "om %s",
-              past : "for %s sidan",
-              s : "nokre sekund",
-              m : "eit minutt",
-              mm : "%d minutt",
-              h : "ein time",
-              hh : "%d timar",
-              d : "ein dag",
-              dd : "%d dagar",
-              M : "ein månad",
-              MM : "%d månader",
-              y : "eit år",
-              yy : "%d år"
+              future : function (str) {
+                  if (str === "uns segundos") {
+                      return "nuns segundos";
+                  }
+                  return "en " + str;
+              },
+              past : "hai %s",
+              s : "uns segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "unha hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un ano",
+              yy : "%d anos"
           },
-          ordinal : '%d.',
+          ordinal : '%dº',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 108 */
+/* 83 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : polish (pl)
-  // author : Rafal Hirsz : https://github.com/evoL
+  // language : Hebrew (he)
+  // author : Tomer Cohen : https://github.com/tomer
+  // author : Moshe Simantov : https://github.com/DevelopmentIL
+  // author : Tal Ater : https://github.com/TalAter
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
-          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
-
-      function plural(n) {
-          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
-      }
-
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'minuta' : 'minutę';
-          case 'mm':
-              return result + (plural(number) ? 'minuty' : 'minut');
-          case 'h':
-              return withoutSuffix  ? 'godzina'  : 'godzinę';
-          case 'hh':
-              return result + (plural(number) ? 'godziny' : 'godzin');
-          case 'MM':
-              return result + (plural(number) ? 'miesiące' : 'miesięcy');
-          case 'yy':
-              return result + (plural(number) ? 'lata' : 'lat');
-          }
-      }
-
-      return moment.lang('pl', {
-          months : function (momentToFormat, format) {
-              if (/D MMMM/.test(format)) {
-                  return monthsSubjective[momentToFormat.month()];
-              } else {
-                  return monthsNominative[momentToFormat.month()];
-              }
-          },
-          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
-          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
-          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
-          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
+      return moment.lang('he', {
+          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
+          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
+          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
+          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
+          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
           longDateFormat : {
               LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
+              L : "DD/MM/YYYY",
+              LL : "D [ב]MMMM YYYY",
+              LLL : "D [ב]MMMM YYYY LT",
+              LLLL : "dddd, D [ב]MMMM YYYY LT",
+              l : "D/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
           },
           calendar : {
-              sameDay: '[Dziś o] LT',
-              nextDay: '[Jutro o] LT',
-              nextWeek: '[W] dddd [o] LT',
-              lastDay: '[Wczoraj o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[W zeszłą niedzielę o] LT';
-                  case 3:
-                      return '[W zeszłą środę o] LT';
-                  case 6:
-                      return '[W zeszłą sobotę o] LT';
-                  default:
-                      return '[W zeszły] dddd [o] LT';
-                  }
-              },
-              sameElse: 'L'
+              sameDay : '[היום ב־]LT',
+              nextDay : '[מחר ב־]LT',
+              nextWeek : 'dddd [בשעה] LT',
+              lastDay : '[אתמול ב־]LT',
+              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "za %s",
-              past : "%s temu",
-              s : "kilka sekund",
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : "1 dzień",
-              dd : '%d dni',
-              M : "miesiąc",
-              MM : translate,
-              y : "rok",
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+              future : "בעוד %s",
+              past : "לפני %s",
+              s : "מספר שניות",
+              m : "דקה",
+              mm : "%d דקות",
+              h : "שעה",
+              hh : function (number) {
+                  if (number === 2) {
+                      return "שעתיים";
+                  }
+                  return number + " שעות";
+              },
+              d : "יום",
+              dd : function (number) {
+                  if (number === 2) {
+                      return "יומיים";
+                  }
+                  return number + " ימים";
+              },
+              M : "חודש",
+              MM : function (number) {
+                  if (number === 2) {
+                      return "חודשיים";
+                  }
+                  return number + " חודשים";
+              },
+              y : "שנה",
+              yy : function (number) {
+                  if (number === 2) {
+                      return "שנתיים";
+                  }
+                  return number + " שנים";
+              }
           }
       });
   }));
 
 
 /***/ },
-/* 109 */
+/* 84 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : brazilian portuguese (pt-br)
-  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
+  // language : hindi (hi)
+  // author : Mayank Singhal : https://github.com/mayanksinghal
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('pt-br', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
+
+      return moment.lang('hi', {
+          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
+          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
           longDateFormat : {
-              LT : "HH:mm",
+              LT : "A h:mm बजे",
               L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY [às] LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
           },
           calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
+              sameDay : '[आज] LT',
+              nextDay : '[कल] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[कल] LT',
+              lastWeek : '[पिछले] dddd, LT',
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "em %s",
-              past : "%s atrás",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
+              future : "%s में",
+              past : "%s पहले",
+              s : "कुछ ही क्षण",
+              m : "एक मिनट",
+              mm : "%d मिनट",
+              h : "एक घंटा",
+              hh : "%d घंटे",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महीने",
+              MM : "%d महीने",
+              y : "एक वर्ष",
+              yy : "%d वर्ष"
           },
-          ordinal : '%dº'
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
+          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "रात";
+              } else if (hour < 10) {
+                  return "सुबह";
+              } else if (hour < 17) {
+                  return "दोपहर";
+              } else if (hour < 20) {
+                  return "शाम";
+              } else {
+                  return "रात";
+              }
+          },
+          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.
+          }
       });
   }));
 
 
 /***/ },
-/* 110 */
+/* 85 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : portuguese (pt)
-  // author : Jefferson : https://github.com/jalex79
+  // language : hrvatski (hr)
+  // author : Bojan Marković : https://github.com/bmarkovic
+
+  // based on (sl) translation by Robert Sedovšek
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('pt', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
+
+      return moment.lang('hr', {
+          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
+          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
+
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
               },
-              sameElse: 'L'
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
+                  }
+              },
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "em %s",
-              past : "há %s",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
           },
-          ordinal : '%dº',
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 111 */
+/* 86 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : romanian (ro)
-  // author : Vlad Gurdiga : https://github.com/gurdiga
-  // author : Valentin Agachi : https://github.com/avaly
+  // language : hungarian (hu)
+  // author : Adam Brunner : https://github.com/adambrunner
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'minute',
-              'hh': 'ore',
-              'dd': 'zile',
-              'MM': 'luni',
-              'yy': 'ani'
-          },
-              separator = ' ';
-          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
-              separator = ' de ';
+      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var num = number,
+              suffix;
+
+          switch (key) {
+          case 's':
+              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
+          case 'm':
+              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'mm':
+              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'h':
+              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'hh':
+              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'd':
+              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'dd':
+              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'M':
+              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'MM':
+              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'y':
+              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
+          case 'yy':
+              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
           }
 
-          return number + separator + format[key];
+          return '';
       }
 
-      return moment.lang('ro', {
-          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
-          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
-          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
-          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
-          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
+      function week(isFuture) {
+          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
+      }
+
+      return moment.lang('hu', {
+          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
+          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
+          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
+          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
+          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
           longDateFormat : {
               LT : "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY H:mm",
-              LLLL : "dddd, D MMMM YYYY H:mm"
+              L : "YYYY.MM.DD.",
+              LL : "YYYY. MMMM D.",
+              LLL : "YYYY. MMMM D., LT",
+              LLLL : "YYYY. MMMM D., dddd LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 12) {
+                  return isLower === true ? 'de' : 'DE';
+              } else {
+                  return isLower === true ? 'du' : 'DU';
+              }
           },
           calendar : {
-              sameDay: "[azi la] LT",
-              nextDay: '[mâine la] LT',
-              nextWeek: 'dddd [la] LT',
-              lastDay: '[ieri la] LT',
-              lastWeek: '[fosta] dddd [la] LT',
-              sameElse: 'L'
+              sameDay : '[ma] LT[-kor]',
+              nextDay : '[holnap] LT[-kor]',
+              nextWeek : function () {
+                  return week.call(this, true);
+              },
+              lastDay : '[tegnap] LT[-kor]',
+              lastWeek : function () {
+                  return week.call(this, false);
+              },
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "peste %s",
-              past : "%s în urmă",
-              s : "câteva secunde",
-              m : "un minut",
-              mm : relativeTimeWithPlural,
-              h : "o oră",
-              hh : relativeTimeWithPlural,
-              d : "o zi",
-              dd : relativeTimeWithPlural,
-              M : "o lună",
-              MM : relativeTimeWithPlural,
-              y : "un an",
-              yy : relativeTimeWithPlural
+              future : "%s múlva",
+              past : "%s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
           },
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 7  // The week that contains Jan 1st is the first week of the year.
@@ -35724,48 +33116,27 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 112 */
+/* 87 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : russian (ru)
-  // author : Viktorminator : https://github.com/Viktorminator
-  // Author : Menelion Elensúle : https://github.com/Oire
+  // language : Armenian (hy-am)
+  // author : Armendarabyan : https://github.com/armendarabyan
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
-      }
-
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
-              'hh': 'час_часа_часов',
-              'dd': 'день_дня_дней',
-              'MM': 'месяц_месяца_месяцев',
-              'yy': 'год_года_лет'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'минута' : 'минуту';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
-      }
 
       function monthsCaseReplace(m, format) {
           var months = {
-              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
-              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
+              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
+              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
           },
 
           nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
@@ -35776,112 +33147,80 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       function monthsShortCaseReplace(m, format) {
-          var monthsShort = {
-              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
-              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
-          },
-
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
 
-          return monthsShort[nounCase][m.month()];
+          return monthsShort[m.month()];
       }
 
       function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
-              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
-          },
-
-          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
-              'accusative' :
-              'nominative';
+          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
 
-          return weekdays[nounCase][m.day()];
+          return weekdays[m.day()];
       }
 
-      return moment.lang('ru', {
+      return moment.lang('hy-am', {
           months : monthsCaseReplace,
           monthsShort : monthsShortCaseReplace,
           weekdays : weekdaysCaseReplace,
-          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
+          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
           longDateFormat : {
               LT : "HH:mm",
               L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY г.",
-              LLL : "D MMMM YYYY г., LT",
-              LLLL : "dddd, D MMMM YYYY г., LT"
+              LL : "D MMMM YYYY թ.",
+              LLL : "D MMMM YYYY թ., LT",
+              LLLL : "dddd, D MMMM YYYY թ., LT"
           },
           calendar : {
-              sameDay: '[Сегодня в] LT',
-              nextDay: '[Завтра в] LT',
-              lastDay: '[Вчера в] LT',
+              sameDay: '[այսօր] LT',
+              nextDay: '[վաղը] LT',
+              lastDay: '[երեկ] LT',
               nextWeek: function () {
-                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
+                  return 'dddd [օրը ժամը] LT';
               },
               lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[В прошлое] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                      return '[В прошлый] dddd [в] LT';
-                  case 3:
-                  case 5:
-                  case 6:
-                      return '[В прошлую] dddd [в] LT';
-                  }
+                  return '[անցած] dddd [օրը ժամը] LT';
               },
               sameElse: 'L'
           },
           relativeTime : {
-              future : "через %s",
-              past : "%s назад",
-              s : "несколько секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "час",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "месяц",
-              MM : relativeTimeWithPlural,
-              y : "год",
-              yy : relativeTimeWithPlural
-          },
-
-          meridiemParse: /ночи|утра|дня|вечера/i,
-          isPM : function (input) {
-              return /^(дня|вечера)$/.test(input);
+              future : "%s հետո",
+              past : "%s առաջ",
+              s : "մի քանի վայրկյան",
+              m : "րոպե",
+              mm : "%d րոպե",
+              h : "ժամ",
+              hh : "%d ժամ",
+              d : "օր",
+              dd : "%d օր",
+              M : "ամիս",
+              MM : "%d ամիս",
+              y : "տարի",
+              yy : "%d տարի"
           },
 
-          meridiem : function (hour, minute, isLower) {
+          meridiem : function (hour) {
               if (hour < 4) {
-                  return "ночи";
+                  return "գիշերվա";
               } else if (hour < 12) {
-                  return "утра";
+                  return "առավոտվա";
               } else if (hour < 17) {
-                  return "дня";
+                  return "ցերեկվա";
               } else {
-                  return "вечера";
+                  return "երեկոյան";
               }
           },
 
           ordinal: function (number, period) {
               switch (period) {
-              case 'M':
-              case 'd':
               case 'DDD':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
               case 'w':
               case 'W':
-                  return number + '-я';
+              case 'DDDo':
+                  if (number === 1) {
+                      return number + '-ին';
+                  }
+                  return number + '-րդ';
               default:
                   return number;
               }
@@ -35896,346 +33235,233 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 113 */
+/* 88 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovak (sk)
-  // author : Martin Minka : https://github.com/k2s
-  // based on work of petrbela : https://github.com/petrbela
+  // language : Bahasa Indonesia (id)
+  // author : Mohammad Satrio Utomo : https://github.com/tyok
+  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
-          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
-
-      function plural(n) {
-          return (n > 1) && (n < 5);
-      }
-
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minúty' : 'minút');
-              } else {
-                  return result + 'minútami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodín');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dni' : 'dní');
-              } else {
-                  return result + 'dňami';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
-              } else {
-                  return result + 'mesiacmi';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'rokov');
+      return moment.lang('id', {
+          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
+          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
+          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
+          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'siang';
+              } else if (hours < 19) {
+                  return 'sore';
               } else {
-                  return result + 'rokmi';
-              }
-              break;
-          }
-      }
-
-      return moment.lang('sk', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+                  return 'malam';
               }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
-          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
-          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
-          longDateFormat : {
-              LT: "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
           },
           calendar : {
-              sameDay: "[dnes o] LT",
-              nextDay: '[zajtra o] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [o] LT';
-                  case 3:
-                      return '[v stredu o] LT';
-                  case 4:
-                      return '[vo štvrtok o] LT';
-                  case 5:
-                      return '[v piatok o] LT';
-                  case 6:
-                      return '[v sobotu o] LT';
-                  }
-              },
-              lastDay: '[včera o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulú nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[minulý] dddd [o] LT';
-                  case 3:
-                      return '[minulú stredu o] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [o] LT';
-                  case 6:
-                      return '[minulú sobotu o] LT';
-                  }
-              },
-              sameElse: "L"
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Besok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kemarin pukul] LT',
+              lastWeek : 'dddd [lalu pukul] LT',
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "za %s",
-              past : "pred %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
+              future : "dalam %s",
+              past : "%s yang lalu",
+              s : "beberapa detik",
+              m : "semenit",
+              mm : "%d menit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
           },
-          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 114 */
+/* 89 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovenian (sl)
-  // author : Robert Sedovšek : https://github.com/sedovsek
+  // language : icelandic (is)
+  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      function translate(number, withoutSuffix, key) {
+      function plural(n) {
+          if (n % 100 === 11) {
+              return true;
+          } else if (n % 10 === 1) {
+              return false;
+          }
+          return true;
+      }
+
+      function translate(number, withoutSuffix, key, isFuture) {
           var result = number + " ";
           switch (key) {
+          case 's':
+              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
           case 'm':
-              return withoutSuffix ? 'ena minuta' : 'eno minuto';
+              return withoutSuffix ? 'mínúta' : 'mínútu';
           case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2) {
-                  result += 'minuti';
-              } else if (number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minut';
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
+              } else if (withoutSuffix) {
+                  return result + 'mínúta';
               }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'ena ura' : 'eno uro';
+              return result + 'mínútu';
           case 'hh':
-              if (number === 1) {
-                  result += 'ura';
-              } else if (number === 2) {
-                  result += 'uri';
-              } else if (number === 3 || number === 4) {
-                  result += 'ure';
-              } else {
-                  result += 'ur';
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
               }
-              return result;
+              return result + 'klukkustund';
+          case 'd':
+              if (withoutSuffix) {
+                  return 'dagur';
+              }
+              return isFuture ? 'dag' : 'degi';
           case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dni';
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'dagar';
+                  }
+                  return result + (isFuture ? 'daga' : 'dögum');
+              } else if (withoutSuffix) {
+                  return result + 'dagur';
               }
-              return result;
+              return result + (isFuture ? 'dag' : 'degi');
+          case 'M':
+              if (withoutSuffix) {
+                  return 'mánuður';
+              }
+              return isFuture ? 'mánuð' : 'mánuði';
           case 'MM':
-              if (number === 1) {
-                  result += 'mesec';
-              } else if (number === 2) {
-                  result += 'meseca';
-              } else if (number === 3 || number === 4) {
-                  result += 'mesece';
-              } else {
-                  result += 'mesecev';
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'mánuðir';
+                  }
+                  return result + (isFuture ? 'mánuði' : 'mánuðum');
+              } else if (withoutSuffix) {
+                  return result + 'mánuður';
               }
-              return result;
+              return result + (isFuture ? 'mánuð' : 'mánuði');
+          case 'y':
+              return withoutSuffix || isFuture ? 'ár' : 'ári';
           case 'yy':
-              if (number === 1) {
-                  result += 'leto';
-              } else if (number === 2) {
-                  result += 'leti';
-              } else if (number === 3 || number === 4) {
-                  result += 'leta';
-              } else {
-                  result += 'let';
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
               }
-              return result;
+              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
           }
       }
 
-      return moment.lang('sl', {
-          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
-          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
-          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
-          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
+      return moment.lang('is', {
+          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
+          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
+          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
+          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
           longDateFormat : {
               LT : "H:mm",
-              L : "DD. MM. YYYY",
+              L : "DD/MM/YYYY",
               LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
           },
           calendar : {
-              sameDay  : '[danes ob] LT',
-              nextDay  : '[jutri ob] LT',
-
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v] [nedeljo] [ob] LT';
-                  case 3:
-                      return '[v] [sredo] [ob] LT';
-                  case 6:
-                      return '[v] [soboto] [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[v] dddd [ob] LT';
-                  }
-              },
-              lastDay  : '[včeraj ob] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[prejšnja] dddd [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prejšnji] dddd [ob] LT';
-                  }
-              },
+              sameDay : '[í dag kl.] LT',
+              nextDay : '[á morgun kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[í gær kl.] LT',
+              lastWeek : '[síðasta] dddd [kl.] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "čez %s",
-              past   : "%s nazaj",
-              s      : "nekaj sekund",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "en dan",
-              dd     : translate,
-              M      : "en mesec",
-              MM     : translate,
-              y      : "eno leto",
-              yy     : translate
+              future : "eftir %s",
+              past : "fyrir %s síðan",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : "klukkustund",
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
           },
           ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 115 */
+/* 90 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Albanian (sq)
-  // author : Flakërim Ismani : https://github.com/flakerimi
-  // author: Menelion Elensúle: https://github.com/Oire (tests)
-  // author : Oerd Cukalla : https://github.com/oerd (fixes)
+  // language : italian (it)
+  // author : Lorenzo : https://github.com/aliem
+  // author: Mattia Larentis: https://github.com/nostalgiaz
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('sq', {
-          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
-          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
-          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
-          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
-          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              return hours < 12 ? 'PD' : 'MD';
-          },
-          longDateFormat : {
+      return moment.lang('it', {
+          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
+          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
+          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
+          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
+          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
+          longDateFormat : {
               LT : "HH:mm",
               L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
@@ -36243,29 +33469,31 @@ return /******/ (function(modules) { // webpackBootstrap
               LLLL : "dddd, D MMMM YYYY LT"
           },
           calendar : {
-              sameDay : '[Sot në] LT',
-              nextDay : '[Nesër në] LT',
-              nextWeek : 'dddd [në] LT',
-              lastDay : '[Dje në] LT',
-              lastWeek : 'dddd [e kaluar në] LT',
-              sameElse : 'L'
+              sameDay: '[Oggi alle] LT',
+              nextDay: '[Domani alle] LT',
+              nextWeek: 'dddd [alle] LT',
+              lastDay: '[Ieri alle] LT',
+              lastWeek: '[lo scorso] dddd [alle] LT',
+              sameElse: 'L'
           },
           relativeTime : {
-              future : "në %s",
-              past : "%s më parë",
-              s : "disa sekonda",
-              m : "një minutë",
-              mm : "%d minuta",
-              h : "një orë",
-              hh : "%d orë",
-              d : "një ditë",
-              dd : "%d ditë",
-              M : "një muaj",
-              MM : "%d muaj",
-              y : "një vit",
-              yy : "%d vite"
+              future : function (s) {
+                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
+              },
+              past : "%s fa",
+              s : "alcuni secondi",
+              m : "un minuto",
+              mm : "%d minuti",
+              h : "un'ora",
+              hh : "%d ore",
+              d : "un giorno",
+              dd : "%d giorni",
+              M : "un mese",
+              MM : "%d mesi",
+              y : "un anno",
+              yy : "%d anni"
           },
-          ordinal : '%d.',
+          ordinal: '%dº',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 4  // The week that contains Jan 4th is the first week of the year.
@@ -36275,128 +33503,80 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 116 */
+/* 91 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-cyrillic (sr-cyrl)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+  // language : japanese (ja)
+  // author : LI Long : https://github.com/baryon
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['један минут', 'једне минуте'],
-              mm: ['минут', 'минуте', 'минута'],
-              h: ['један сат', 'једног сата'],
-              hh: ['сат', 'сата', 'сати'],
-              dd: ['дан', 'дана', 'дана'],
-              MM: ['месец', 'месеца', 'месеци'],
-              yy: ['година', 'године', 'година']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+      return moment.lang('ja', {
+          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
+          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
+          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
+          longDateFormat : {
+              LT : "Ah時m分",
+              L : "YYYY/MM/DD",
+              LL : "YYYY年M月D日",
+              LLL : "YYYY年M月D日LT",
+              LLLL : "YYYY年M月D日LT dddd"
           },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "午前";
               } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+                  return "午後";
               }
-          }
-      };
-
-      return moment.lang('sr-cyrl', {
-          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
-          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
-          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
-          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
-          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
           },
-          calendar: {
-              sameDay: '[данас у] LT',
-              nextDay: '[сутра у] LT',
-
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[у] [недељу] [у] LT';
-                  case 3:
-                      return '[у] [среду] [у] LT';
-                  case 6:
-                      return '[у] [суботу] [у] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[у] dddd [у] LT';
-                  }
-              },
-              lastDay  : '[јуче у] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[прошле] [недеље] [у] LT',
-                      '[прошлог] [понедељка] [у] LT',
-                      '[прошлог] [уторка] [у] LT',
-                      '[прошле] [среде] [у] LT',
-                      '[прошлог] [четвртка] [у] LT',
-                      '[прошлог] [петка] [у] LT',
-                      '[прошле] [суботе] [у] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
+          calendar : {
+              sameDay : '[今日] LT',
+              nextDay : '[明日] LT',
+              nextWeek : '[来週]dddd LT',
+              lastDay : '[昨日] LT',
+              lastWeek : '[前週]dddd LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "за %s",
-              past   : "пре %s",
-              s      : "неколико секунди",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "дан",
-              dd     : translator.translate,
-              M      : "месец",
-              MM     : translator.translate,
-              y      : "годину",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              future : "%s後",
+              past : "%s前",
+              s : "数秒",
+              m : "1分",
+              mm : "%d分",
+              h : "1時間",
+              hh : "%d時間",
+              d : "1日",
+              dd : "%d日",
+              M : "1ヶ月",
+              MM : "%dヶ月",
+              y : "1年",
+              yy : "%d年"
           }
       });
   }));
 
 
 /***/ },
-/* 117 */
+/* 92 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-latin (sr)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+  // language : Georgian (ka)
+  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36404,406 +33584,513 @@ return /******/ (function(modules) { // webpackBootstrap
       }
   }(function (moment) {
 
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['jedan minut', 'jedne minute'],
-              mm: ['minut', 'minute', 'minuta'],
-              h: ['jedan sat', 'jednog sata'],
-              hh: ['sat', 'sata', 'sati'],
-              dd: ['dan', 'dana', 'dana'],
-              MM: ['mesec', 'meseca', 'meseci'],
-              yy: ['godina', 'godine', 'godina']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
+              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
           },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
-              }
-          }
-      };
 
-      return moment.lang('sr', {
-          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
-          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
-          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
-          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
-          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
+          nounCase = (/D[oD] *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return months[nounCase][m.month()];
+      }
+
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
+              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
           },
-          calendar: {
-              sameDay: '[danas u] LT',
-              nextDay: '[sutra u] LT',
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedelju] [u] LT';
-                  case 3:
-                      return '[u] [sredu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[juče u] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[prošle] [nedelje] [u] LT',
-                      '[prošlog] [ponedeljka] [u] LT',
-                      '[prošlog] [utorka] [u] LT',
-                      '[prošle] [srede] [u] LT',
-                      '[prošlog] [četvrtka] [u] LT',
-                      '[prošlog] [petka] [u] LT',
-                      '[prošle] [subote] [u] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
+          nounCase = (/(წინა|შემდეგ)/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return weekdays[nounCase][m.day()];
+      }
+
+      return moment.lang('ka', {
+          months : monthsCaseReplace,
+          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
+          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[დღეს] LT[-ზე]',
+              nextDay : '[ხვალ] LT[-ზე]',
+              lastDay : '[გუშინ] LT[-ზე]',
+              nextWeek : '[შემდეგ] dddd LT[-ზე]',
+              lastWeek : '[წინა] dddd LT-ზე',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "za %s",
-              past   : "pre %s",
-              s      : "nekoliko sekundi",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "dan",
-              dd     : translator.translate,
-              M      : "mesec",
-              MM     : translator.translate,
-              y      : "godinu",
-              yy     : translator.translate
+              future : function (s) {
+                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
+                      s.replace(/ი$/, "ში") :
+                      s + "ში";
+              },
+              past : function (s) {
+                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
+                      return s.replace(/(ი|ე)$/, "ის წინ");
+                  }
+                  if ((/წელი/).test(s)) {
+                      return s.replace(/წელი$/, "წლის წინ");
+                  }
+              },
+              s : "რამდენიმე წამი",
+              m : "წუთი",
+              mm : "%d წუთი",
+              h : "საათი",
+              hh : "%d საათი",
+              d : "დღე",
+              dd : "%d დღე",
+              M : "თვე",
+              MM : "%d თვე",
+              y : "წელი",
+              yy : "%d წელი"
+          },
+          ordinal : function (number) {
+              if (number === 0) {
+                  return number;
+              }
+
+              if (number === 1) {
+                  return number + "-ლი";
+              }
+
+              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
+                  return "მე-" + number;
+              }
+
+              return number + "-ე";
           },
-          ordinal : '%d.',
           week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              dow : 1,
+              doy : 7
           }
       });
   }));
 
 
 /***/ },
-/* 118 */
+/* 93 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : swedish (sv)
-  // author : Jens Alm : https://github.com/ulmus
+  // language : khmer (km)
+  // author : Kruy Vanna : https://github.com/kruyvanna
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('sv', {
-          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
-          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
-          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
+      return moment.lang('km', {
+          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
           },
-          calendar : {
-              sameDay: '[Idag] LT',
-              nextDay: '[Imorgon] LT',
-              lastDay: '[Igår] LT',
-              nextWeek: 'dddd LT',
-              lastWeek: '[Förra] dddd[en] LT',
+          calendar: {
+              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
+              nextDay: '[ស្អែក ម៉ោង] LT',
+              nextWeek: 'dddd [ម៉ោង] LT',
+              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
+              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
               sameElse: 'L'
           },
-          relativeTime : {
-              future : "om %s",
-              past : "för %s sedan",
-              s : "några sekunder",
-              m : "en minut",
-              mm : "%d minuter",
-              h : "en timme",
-              hh : "%d timmar",
-              d : "en dag",
-              dd : "%d dagar",
-              M : "en månad",
-              MM : "%d månader",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
-                  (b === 1) ? 'a' :
-                  (b === 2) ? 'a' :
-                  (b === 3) ? 'e' : 'e';
-              return number + output;
+          relativeTime: {
+              future: "%sទៀត",
+              past: "%sមុន",
+              s: "ប៉ុន្មានវិនាទី",
+              m: "មួយនាទី",
+              mm: "%d នាទី",
+              h: "មួយម៉ោង",
+              hh: "%d ម៉ោង",
+              d: "មួយថ្ងៃ",
+              dd: "%d ថ្ងៃ",
+              M: "មួយខែ",
+              MM: "%d ខែ",
+              y: "មួយឆ្នាំ",
+              yy: "%d ឆ្នាំ"
           },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4 // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 119 */
+/* 94 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : tamil (ta)
-  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
-
+  // language : korean (ko)
+  //
+  // authors 
+  //
+  // - Kyungwook, Park : https://github.com/kyungw00k
+  // - Jeeeyul Lee <jeeeyul@gmail.com>
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      /*var symbolMap = {
-              '1': '௧',
-              '2': '௨',
-              '3': '௩',
-              '4': '௪',
-              '5': '௫',
-              '6': '௬',
-              '7': '௭',
-              '8': '௮',
-              '9': '௯',
-              '0': '௦'
-          },
-          numberMap = {
-              '௧': '1',
-              '௨': '2',
-              '௩': '3',
-              '௪': '4',
-              '௫': '5',
-              '௬': '6',
-              '௭': '7',
-              '௮': '8',
-              '௯': '9',
-              '௦': '0'
-          }; */
-
-      return moment.lang('ta', {
-          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
-          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
-          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
+      return moment.lang('ko', {
+          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
+          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
+          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
+              LT : "A h시 mm분",
+              L : "YYYY.MM.DD",
+              LL : "YYYY년 MMMM D일",
+              LLL : "YYYY년 MMMM D일 LT",
+              LLLL : "YYYY년 MMMM D일 dddd LT"
+          },
+          meridiem : function (hour, minute, isUpper) {
+              return hour < 12 ? '오전' : '오후';
           },
           calendar : {
-              sameDay : '[இன்று] LT',
-              nextDay : '[நாளை] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[நேற்று] LT',
-              lastWeek : '[கடந்த வாரம்] dddd, LT',
+              sameDay : '오늘 LT',
+              nextDay : '내일 LT',
+              nextWeek : 'dddd LT',
+              lastDay : '어제 LT',
+              lastWeek : '지난주 dddd LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s இல்",
-              past : "%s முன்",
-              s : "ஒரு சில விநாடிகள்",
-              m : "ஒரு நிமிடம்",
-              mm : "%d நிமிடங்கள்",
-              h : "ஒரு மணி நேரம்",
-              hh : "%d மணி நேரம்",
-              d : "ஒரு நாள்",
-              dd : "%d நாட்கள்",
-              M : "ஒரு மாதம்",
-              MM : "%d மாதங்கள்",
-              y : "ஒரு வருடம்",
-              yy : "%d ஆண்டுகள்"
-          },
-  /*        preparse: function (string) {
-              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },*/
-          ordinal : function (number) {
-              return number + 'வது';
-          },
-
-
-  // refer http://ta.wikipedia.org/s/1er1      
-
-          meridiem : function (hour, minute, isLower) {
-              if (hour >= 6 && hour <= 10) {
-                  return " காலை";
-              } else   if (hour >= 10 && hour <= 14) {
-                  return " நண்பகல்";
-              } else    if (hour >= 14 && hour <= 18) {
-                  return " எற்பாடு";
-              } else   if (hour >= 18 && hour <= 20) {
-                  return " மாலை";
-              } else  if (hour >= 20 && hour <= 24) {
-                  return " இரவு";
-              } else  if (hour >= 0 && hour <= 6) {
-                  return " வைகறை";
-              }
+              future : "%s 후",
+              past : "%s 전",
+              s : "몇초",
+              ss : "%d초",
+              m : "일분",
+              mm : "%d분",
+              h : "한시간",
+              hh : "%d시간",
+              d : "하루",
+              dd : "%d일",
+              M : "한달",
+              MM : "%d달",
+              y : "일년",
+              yy : "%d년"
           },
-          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.
+          ordinal : '%d일',
+          meridiemParse : /(오전|오후)/,
+          isPM : function (token) {
+              return token === "오후";
           }
       });
   }));
 
 
 /***/ },
-/* 120 */
+/* 95 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : thai (th)
-  // author : Kridsada Thanabulpong : https://github.com/sirn
+  // language : Luxembourgish (lb)
+  // author : mweimerskirch : https://github.com/mweimerskirch
+
+  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
+  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
+  // and "eifelerRegelAppliesToNumber" methods are meant for
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('th', {
-          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
-          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
-          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
-          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
-          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
-          longDateFormat : {
-              LT : "H นาฬิกา m นาที",
-              L : "YYYY/MM/DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY เวลา LT",
-              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ก่อนเที่ยง";
-              } else {
-                  return "หลังเที่ยง";
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eng Minutt', 'enger Minutt'],
+              'h': ['eng Stonn', 'enger Stonn'],
+              'd': ['een Dag', 'engem Dag'],
+              'dd': [number + ' Deeg', number + ' Deeg'],
+              'M': ['ee Mount', 'engem Mount'],
+              'MM': [number + ' Méint', number + ' Méint'],
+              'y': ['ee Joer', 'engem Joer'],
+              'yy': [number + ' Joer', number + ' Joer']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
+
+      function processFutureTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "a " + string;
+          }
+          return "an " + string;
+      }
+
+      function processPastTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "viru " + string;
+          }
+          return "virun " + string;
+      }
+
+      function processLastWeek(string1) {
+          var weekday = this.format('d');
+          if (eifelerRegelAppliesToWeekday(weekday)) {
+              return '[Leschte] dddd [um] LT';
+          }
+          return '[Leschten] dddd [um] LT';
+      }
+
+      /**
+       * Returns true if the word before the given week day loses the "-n" ending.
+       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
+       *
+       * @param weekday {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToWeekday(weekday) {
+          weekday = parseInt(weekday, 10);
+          switch (weekday) {
+          case 0: // Sonndeg
+          case 1: // Méindeg
+          case 3: // Mëttwoch
+          case 5: // Freideg
+          case 6: // Samschdeg
+              return true;
+          default: // 2 Dënschdeg, 4 Donneschdeg
+              return false;
+          }
+      }
+
+      /**
+       * Returns true if the word before the given number loses the "-n" ending.
+       * e.g. "an 10 Deeg" but "a 5 Deeg"
+       *
+       * @param number {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToNumber(number) {
+          number = parseInt(number, 10);
+          if (isNaN(number)) {
+              return false;
+          }
+          if (number < 0) {
+              // Negative Number --> always true
+              return true;
+          } else if (number < 10) {
+              // Only 1 digit
+              if (4 <= number && number <= 7) {
+                  return true;
+              }
+              return false;
+          } else if (number < 100) {
+              // 2 digits
+              var lastDigit = number % 10, firstDigit = number / 10;
+              if (lastDigit === 0) {
+                  return eifelerRegelAppliesToNumber(firstDigit);
+              }
+              return eifelerRegelAppliesToNumber(lastDigit);
+          } else if (number < 10000) {
+              // 3 or 4 digits --> recursively check first digit
+              while (number >= 10) {
+                  number = number / 10;
               }
+              return eifelerRegelAppliesToNumber(number);
+          } else {
+              // Anything larger than 4 digits: recursively check first n-3 digits
+              number = number / 1000;
+              return eifelerRegelAppliesToNumber(number);
+          }
+      }
+
+      return moment.lang('lb', {
+          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
+          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
+          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
+          longDateFormat: {
+              LT: "H:mm [Auer]",
+              L: "DD.MM.YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
           },
-          calendar : {
-              sameDay : '[วันนี้ เวลา] LT',
-              nextDay : '[พรุ่งนี้ เวลา] LT',
-              nextWeek : 'dddd[หน้า เวลา] LT',
-              lastDay : '[เมื่อวานนี้ เวลา] LT',
-              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
-              sameElse : 'L'
+          calendar: {
+              sameDay: "[Haut um] LT",
+              sameElse: "L",
+              nextDay: '[Muer um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gëschter um] LT',
+              lastWeek: processLastWeek
           },
-          relativeTime : {
-              future : "อีก %s",
-              past : "%sที่แล้ว",
-              s : "ไม่กี่วินาที",
-              m : "1 นาที",
-              mm : "%d นาที",
-              h : "1 ชั่วโมง",
-              hh : "%d ชั่วโมง",
-              d : "1 วัน",
-              dd : "%d วัน",
-              M : "1 เดือน",
-              MM : "%d เดือน",
-              y : "1 ปี",
-              yy : "%d ปี"
+          relativeTime: {
+              future: processFutureTime,
+              past: processPastTime,
+              s: "e puer Sekonnen",
+              m: processRelativeTime,
+              mm: "%d Minutten",
+              h: processRelativeTime,
+              hh: "%d Stonnen",
+              d: processRelativeTime,
+              dd: processRelativeTime,
+              M: processRelativeTime,
+              MM: processRelativeTime,
+              y: processRelativeTime,
+              yy: processRelativeTime
+          },
+          ordinal: '%d.',
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 121 */
+/* 96 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Tagalog/Filipino (tl-ph)
-  // author : Dan Hagman
+  // language : Lithuanian (lt)
+  // author : Mindaugas Mozūras : https://github.com/mmozuras
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('tl-ph', {
-          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
-          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
-          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
-          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
-          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
+      var units = {
+          "m" : "minutė_minutės_minutę",
+          "mm": "minutės_minučių_minutes",
+          "h" : "valanda_valandos_valandą",
+          "hh": "valandos_valandų_valandas",
+          "d" : "diena_dienos_dieną",
+          "dd": "dienos_dienų_dienas",
+          "M" : "mėnuo_mėnesio_mėnesį",
+          "MM": "mėnesiai_mėnesių_mėnesius",
+          "y" : "metai_metų_metus",
+          "yy": "metai_metų_metus"
+      },
+      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
+
+      function translateSeconds(number, withoutSuffix, key, isFuture) {
+          if (withoutSuffix) {
+              return "kelios sekundės";
+          } else {
+              return isFuture ? "kelių sekundžių" : "kelias sekundes";
+          }
+      }
+
+      function translateSingular(number, withoutSuffix, key, isFuture) {
+          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
+      }
+
+      function special(number) {
+          return number % 10 === 0 || (number > 10 && number < 20);
+      }
+
+      function forms(key) {
+          return units[key].split("_");
+      }
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          if (number === 1) {
+              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
+          } else if (withoutSuffix) {
+              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
+          } else {
+              if (isFuture) {
+                  return result + forms(key)[1];
+              } else {
+                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
+              }
+          }
+      }
+
+      function relativeWeekDay(moment, format) {
+          var nominative = format.indexOf('dddd HH:mm') === -1,
+              weekDay = weekDays[moment.day()];
+
+          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
+      }
+
+      return moment.lang("lt", {
+          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
+          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
+          weekdays : relativeWeekDay,
+          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
+          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
           longDateFormat : {
               LT : "HH:mm",
-              L : "MM/D/YYYY",
-              LL : "MMMM D, YYYY",
-              LLL : "MMMM D, YYYY LT",
-              LLLL : "dddd, MMMM DD, YYYY LT"
+              L : "YYYY-MM-DD",
+              LL : "YYYY [m.] MMMM D [d.]",
+              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
+              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
+              l : "YYYY-MM-DD",
+              ll : "YYYY [m.] MMMM D [d.]",
+              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
+              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
           },
           calendar : {
-              sameDay: "[Ngayon sa] LT",
-              nextDay: '[Bukas sa] LT',
-              nextWeek: 'dddd [sa] LT',
-              lastDay: '[Kahapon sa] LT',
-              lastWeek: 'dddd [huling linggo] LT',
-              sameElse: 'L'
+              sameDay : "[Šiandien] LT",
+              nextDay : "[Rytoj] LT",
+              nextWeek : "dddd LT",
+              lastDay : "[Vakar] LT",
+              lastWeek : "[Praėjusį] dddd LT",
+              sameElse : "L"
           },
           relativeTime : {
-              future : "sa loob ng %s",
-              past : "%s ang nakalipas",
-              s : "ilang segundo",
-              m : "isang minuto",
-              mm : "%d minuto",
-              h : "isang oras",
-              hh : "%d oras",
-              d : "isang araw",
-              dd : "%d araw",
-              M : "isang buwan",
-              MM : "%d buwan",
-              y : "isang taon",
-              yy : "%d taon"
+              future : "po %s",
+              past : "prieš %s",
+              s : translateSeconds,
+              m : translateSingular,
+              mm : translate,
+              h : translateSingular,
+              hh : translate,
+              d : translateSingular,
+              dd : translate,
+              M : translateSingular,
+              MM : translate,
+              y : translateSingular,
+              yy : translate
           },
           ordinal : function (number) {
-              return number;
+              return number + '-oji';
           },
           week : {
               dow : 1, // Monday is the first day of the week.
@@ -36814,510 +34101,487 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 122 */
+/* 97 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : turkish (tr)
-  // authors : Erhan Gundogan : https://github.com/erhangundogan,
-  //           Burak Yiğit Kaya: https://github.com/BYK
+  // language : latvian (lv)
+  // author : Kristaps Karlsons : https://github.com/skakri
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
+      var units = {
+          'mm': 'minūti_minūtes_minūte_minūtes',
+          'hh': 'stundu_stundas_stunda_stundas',
+          'dd': 'dienu_dienas_diena_dienas',
+          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
+          'yy': 'gadu_gadus_gads_gadi'
+      };
 
-      var suffixes = {
-          1: "'inci",
-          5: "'inci",
-          8: "'inci",
-          70: "'inci",
-          80: "'inci",
-
-          2: "'nci",
-          7: "'nci",
-          20: "'nci",
-          50: "'nci",
-
-          3: "'üncü",
-          4: "'üncü",
-          100: "'üncü",
-
-          6: "'ncı",
-
-          9: "'uncu",
-          10: "'uncu",
-          30: "'uncu",
+      function format(word, number, withoutSuffix) {
+          var forms = word.split('_');
+          if (withoutSuffix) {
+              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
+          } else {
+              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
+          }
+      }
 
-          60: "'ıncı",
-          90: "'ıncı"
-      };
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          return number + ' ' + format(units[key], number, withoutSuffix);
+      }
 
-      return moment.lang('tr', {
-          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
-          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
-          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
-          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
-          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
+      return moment.lang('lv', {
+          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
+          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
+          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
           longDateFormat : {
               LT : "HH:mm",
               L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
+              LL : "YYYY. [gada] D. MMMM",
+              LLL : "YYYY. [gada] D. MMMM, LT",
+              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
           },
           calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[yarın saat] LT',
-              nextWeek : '[haftaya] dddd [saat] LT',
-              lastDay : '[dün] LT',
-              lastWeek : '[geçen hafta] dddd [saat] LT',
+              sameDay : '[Šodien pulksten] LT',
+              nextDay : '[Rīt pulksten] LT',
+              nextWeek : 'dddd [pulksten] LT',
+              lastDay : '[Vakar pulksten] LT',
+              lastWeek : '[Pagājušā] dddd [pulksten] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "%s sonra",
-              past : "%s önce",
-              s : "birkaç saniye",
-              m : "bir dakika",
-              mm : "%d dakika",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir yıl",
-              yy : "%d yıl"
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "'ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
-
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+              future : "%s vēlāk",
+              past : "%s agrāk",
+              s : "dažas sekundes",
+              m : "minūti",
+              mm : relativeTimeWithPlural,
+              h : "stundu",
+              hh : relativeTimeWithPlural,
+              d : "dienu",
+              dd : relativeTimeWithPlural,
+              M : "mēnesi",
+              MM : relativeTimeWithPlural,
+              y : "gadu",
+              yy : relativeTimeWithPlural
           },
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 123 */
+/* 98 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
-  // author : Abdel Said : https://github.com/abdelsaid
+  // language : macedonian (mk)
+  // author : Borislav Mickov : https://github.com/B0k0
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('tzm-latn', {
-          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+      return moment.lang('mk', {
+          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
+          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
+          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
+              LT : "H:mm",
+              L : "D.MM.YYYY",
               LL : "D MMMM YYYY",
               LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
+              LLLL : "dddd, D MMMM YYYY LT"
           },
           calendar : {
-              sameDay: "[asdkh g] LT",
-              nextDay: '[aska g] LT',
-              nextWeek: 'dddd [g] LT',
-              lastDay: '[assant g] LT',
-              lastWeek: 'dddd [g] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dadkh s yan %s",
-              past : "yan %s",
-              s : "imik",
-              m : "minuḍ",
-              mm : "%d minuḍ",
-              h : "saɛa",
-              hh : "%d tassaɛin",
-              d : "ass",
-              dd : "%d ossan",
-              M : "ayowr",
-              MM : "%d iyyirn",
-              y : "asgas",
-              yy : "%d isgasn"
+              sameDay : '[Денес во] LT',
+              nextDay : '[Утре во] LT',
+              nextWeek : 'dddd [во] LT',
+              lastDay : '[Вчера во] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[Во изминатата] dddd [во] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[Во изминатиот] dddd [во] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "после %s",
+              past : "пред %s",
+              s : "неколку секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дена",
+              M : "месец",
+              MM : "%d месеци",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
+              }
           },
           week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 124 */
+/* 99 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt (tzm)
-  // author : Abdel Said : https://github.com/abdelsaid
+  // language : malayalam (ml)
+  // author : Floyd Pink : https://github.com/floydpink
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('tzm', {
-          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+      return moment.lang('ml', {
+          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
+          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
+          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
+          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
+          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
           longDateFormat : {
-              LT : "HH:mm",
+              LT : "A h:mm -നു",
               L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
           },
           calendar : {
-              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
-              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
-              nextWeek: 'dddd [ⴴ] LT',
-              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
-              lastWeek: 'dddd [ⴴ] LT',
-              sameElse: 'L'
+              sameDay : '[ഇന്ന്] LT',
+              nextDay : '[നാളെ] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[ഇന്നലെ] LT',
+              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
-              past : "ⵢⴰⵏ %s",
-              s : "ⵉⵎⵉⴽ",
-              m : "ⵎⵉⵏⵓⴺ",
-              mm : "%d ⵎⵉⵏⵓⴺ",
-              h : "ⵙⴰⵄⴰ",
-              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
-              d : "ⴰⵙⵙ",
-              dd : "%d oⵙⵙⴰⵏ",
-              M : "ⴰⵢoⵓⵔ",
-              MM : "%d ⵉⵢⵢⵉⵔⵏ",
-              y : "ⴰⵙⴳⴰⵙ",
-              yy : "%d ⵉⵙⴳⴰⵙⵏ"
+              future : "%s കഴിഞ്ഞ്",
+              past : "%s മുൻപ്",
+              s : "അൽപ നിമിഷങ്ങൾ",
+              m : "ഒരു മിനിറ്റ്",
+              mm : "%d മിനിറ്റ്",
+              h : "ഒരു മണിക്കൂർ",
+              hh : "%d മണിക്കൂർ",
+              d : "ഒരു ദിവസം",
+              dd : "%d ദിവസം",
+              M : "ഒരു മാസം",
+              MM : "%d മാസം",
+              y : "ഒരു വർഷം",
+              yy : "%d വർഷം"
           },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "രാത്രി";
+              } else if (hour < 12) {
+                  return "രാവിലെ";
+              } else if (hour < 17) {
+                  return "ഉച്ച കഴിഞ്ഞ്";
+              } else if (hour < 20) {
+                  return "വൈകുന്നേരം";
+              } else {
+                  return "രാത്രി";
+              }
           }
       });
   }));
 
 
 /***/ },
-/* 125 */
+/* 100 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : ukrainian (uk)
-  // author : zemlanin : https://github.com/zemlanin
-  // Author : Menelion Elensúle : https://github.com/Oire
+  // language : Marathi (mr)
+  // author : Harshad Kale : https://github.com/kalehv
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
-      }
-
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'хвилина_хвилини_хвилин',
-              'hh': 'година_години_годин',
-              'dd': 'день_дні_днів',
-              'MM': 'місяць_місяці_місяців',
-              'yy': 'рік_роки_років'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'хвилина' : 'хвилину';
-          }
-          else if (key === 'h') {
-              return withoutSuffix ? 'година' : 'годину';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
-      }
-
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
-              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
-          },
-
-          nounCase = (/D[oD]? *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
-
-          return months[nounCase][m.month()];
-      }
-
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
-              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
-              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
-          },
-
-          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
-              'accusative' :
-              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
-                  'genitive' :
-                  'nominative');
-
-          return weekdays[nounCase][m.day()];
-      }
-
-      function processHoursFunction(str) {
-          return function () {
-              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
-          };
-      }
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-      return moment.lang('uk', {
-          months : monthsCaseReplace,
-          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+      return moment.lang('mr', {
+          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
+          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY р.",
-              LLL : "D MMMM YYYY р., LT",
-              LLLL : "dddd, D MMMM YYYY р., LT"
+              LT : "A h:mm वाजता",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
           },
           calendar : {
-              sameDay: processHoursFunction('[Сьогодні '),
-              nextDay: processHoursFunction('[Завтра '),
-              lastDay: processHoursFunction('[Вчора '),
-              nextWeek: processHoursFunction('[У] dddd ['),
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 5:
-                  case 6:
-                      return processHoursFunction('[Минулої] dddd [').call(this);
-                  case 1:
-                  case 2:
-                  case 4:
-                      return processHoursFunction('[Минулого] dddd [').call(this);
-                  }
-              },
-              sameElse: 'L'
+              sameDay : '[आज] LT',
+              nextDay : '[उद्या] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[काल] LT',
+              lastWeek: '[मागील] dddd, LT',
+              sameElse : 'L'
           },
           relativeTime : {
-              future : "за %s",
-              past : "%s тому",
-              s : "декілька секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "годину",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "місяць",
-              MM : relativeTimeWithPlural,
-              y : "рік",
-              yy : relativeTimeWithPlural
+              future : "%s नंतर",
+              past : "%s पूर्वी",
+              s : "सेकंद",
+              m: "एक मिनिट",
+              mm: "%d मिनिटे",
+              h : "एक तास",
+              hh : "%d तास",
+              d : "एक दिवस",
+              dd : "%d दिवस",
+              M : "एक महिना",
+              MM : "%d महिने",
+              y : "एक वर्ष",
+              yy : "%d वर्षे"
           },
-
-          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
-
-          meridiem : function (hour, minute, isLower) {
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem: function (hour, minute, isLower)
+          {
               if (hour < 4) {
-                  return "ночі";
-              } else if (hour < 12) {
-                  return "ранку";
+                  return "रात्री";
+              } else if (hour < 10) {
+                  return "सकाळी";
               } else if (hour < 17) {
-                  return "дня";
+                  return "दुपारी";
+              } else if (hour < 20) {
+                  return "सायंकाळी";
               } else {
-                  return "вечора";
-              }
-          },
-
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-              case 'w':
-              case 'W':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              default:
-                  return number;
+                  return "रात्री";
               }
           },
-
           week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+              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.
           }
       });
   }));
 
 
 /***/ },
-/* 126 */
+/* 101 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : uzbek
-  // author : Sardor Muminov : https://github.com/muminoff
+  // language : Bahasa Malaysia (ms-MY)
+  // author : Weldan Jamili : https://github.com/weldan
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('uz', {
-          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
-          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
-          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
-          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
-          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
+      return moment.lang('ms-my', {
+          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
+          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
+          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
+          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
+          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
+              LT : "HH.mm",
               L : "DD/MM/YYYY",
               LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "D MMMM YYYY, dddd LT"
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'tengahari';
+              } else if (hours < 19) {
+                  return 'petang';
+              } else {
+                  return 'malam';
+              }
           },
           calendar : {
-              sameDay : '[Бугун соат] LT [да]',
-              nextDay : '[Эртага] LT [да]',
-              nextWeek : 'dddd [куни соат] LT [да]',
-              lastDay : '[Кеча соат] LT [да]',
-              lastWeek : '[Утган] dddd [куни соат] LT [да]',
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Esok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kelmarin pukul] LT',
+              lastWeek : 'dddd [lepas pukul] LT',
               sameElse : 'L'
           },
           relativeTime : {
-              future : "Якин %s ичида",
-              past : "Бир неча %s олдин",
-              s : "фурсат",
-              m : "бир дакика",
-              mm : "%d дакика",
-              h : "бир соат",
-              hh : "%d соат",
-              d : "бир кун",
-              dd : "%d кун",
-              M : "бир ой",
-              MM : "%d ой",
-              y : "бир йил",
-              yy : "%d йил"
+              future : "dalam %s",
+              past : "%s yang lepas",
+              s : "beberapa saat",
+              m : "seminit",
+              mm : "%d minit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
           },
           week : {
               dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 4th is the first week of the year.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 127 */
+/* 102 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : vietnamese (vi)
-  // author : Bang Nguyen : https://github.com/bangnk
+  // language : norwegian bokmål (nb)
+  // authors : Espen Hovlandsdal : https://github.com/rexxars
+  //           Sigurd Gartmann : https://github.com/sigurdga
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('vi', {
-          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
-          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
-          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
-          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+      return moment.lang('nb', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
           longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM [năm] YYYY",
-              LLL : "D MMMM [năm] YYYY LT",
-              LLLL : "dddd, D MMMM [năm] YYYY LT",
-              l : "DD/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
+              LT : "H.mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd D. MMMM YYYY [kl.] LT"
           },
           calendar : {
-              sameDay: "[Hôm nay lúc] LT",
-              nextDay: '[Ngày mai lúc] LT',
-              nextWeek: 'dddd [tuần tới lúc] LT',
-              lastDay: '[Hôm qua lúc] LT',
-              lastWeek: 'dddd [tuần rồi lúc] LT',
+              sameDay: '[i dag kl.] LT',
+              nextDay: '[i morgen kl.] LT',
+              nextWeek: 'dddd [kl.] LT',
+              lastDay: '[i går kl.] LT',
+              lastWeek: '[forrige] dddd [kl.] LT',
               sameElse: 'L'
           },
           relativeTime : {
-              future : "%s tới",
-              past : "%s trước",
-              s : "vài giây",
-              m : "một phút",
-              mm : "%d phút",
-              h : "một giờ",
-              hh : "%d giờ",
-              d : "một ngày",
-              dd : "%d ngày",
-              M : "một tháng",
-              MM : "%d tháng",
-              y : "một năm",
-              yy : "%d năm"
-          },
-          ordinal : function (number) {
-              return number;
+              future : "om %s",
+              past : "for %s siden",
+              s : "noen sekunder",
+              m : "ett minutt",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dager",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "ett år",
+              yy : "%d år"
           },
+          ordinal : '%d.',
           week : {
               dow : 1, // Monday is the first day of the week.
               doy : 4  // The week that contains Jan 4th is the first week of the year.
@@ -37327,112 +34591,182 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 128 */
+/* 103 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chinese
-  // author : suupic : https://github.com/suupic
-  // author : Zeno Zeng : https://github.com/zenozeng
+  // language : nepali/nepalese
+  // author : suvash : https://github.com/suvash
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('zh-cn', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
+
+      return moment.lang('ne', {
+          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
+          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
+          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
+          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
+          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
           longDateFormat : {
-              LT : "Ah点mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY-MM-DD",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
+              LT : "Aको h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
           },
           meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 600) {
-                  return "凌晨";
-              } else if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
+              if (hour < 3) {
+                  return "राती";
+              } else if (hour < 10) {
+                  return "बिहान";
+              } else if (hour < 15) {
+                  return "दिउँसो";
+              } else if (hour < 18) {
+                  return "बेलुका";
+              } else if (hour < 20) {
+                  return "साँझ";
               } else {
-                  return "晚上";
+                  return "राती";
               }
           },
           calendar : {
-              sameDay : function () {
-                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
-              },
-              nextDay : function () {
-                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
-              },
-              lastDay : function () {
-                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
-              },
-              nextWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              lastWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              sameElse : 'LL'
+              sameDay : '[आज] LT',
+              nextDay : '[भोली] LT',
+              nextWeek : '[आउँदो] dddd[,] LT',
+              lastDay : '[हिजो] LT',
+              lastWeek : '[गएको] dddd[,] LT',
+              sameElse : 'L'
           },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d":
-              case "D":
-              case "DDD":
-                  return number + "日";
-              case "M":
-                  return number + "月";
-              case "w":
-              case "W":
-                  return number + "周";
-              default:
-                  return number;
+          relativeTime : {
+              future : "%sमा",
+              past : "%s अगाडी",
+              s : "केही समय",
+              m : "एक मिनेट",
+              mm : "%d मिनेट",
+              h : "एक घण्टा",
+              hh : "%d घण्टा",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महिना",
+              MM : "%d महिना",
+              y : "एक बर्ष",
+              yy : "%d बर्ष"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 104 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : dutch (nl)
+  // author : Joris Röling : https://github.com/jjupiter
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
+          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
+
+      return moment.lang('nl', {
+          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShortWithoutDots[m.month()];
+              } else {
+                  return monthsShortWithDots[m.month()];
               }
           },
+          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
+          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
+          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[vandaag om] LT',
+              nextDay: '[morgen om] LT',
+              nextWeek: 'dddd [om] LT',
+              lastDay: '[gisteren om] LT',
+              lastWeek: '[afgelopen] dddd [om] LT',
+              sameElse: 'L'
+          },
           relativeTime : {
-              future : "%s内",
-              past : "%s前",
-              s : "几秒",
-              m : "1分钟",
-              mm : "%d分钟",
-              h : "1小时",
-              hh : "%d小时",
-              d : "1天",
-              dd : "%d天",
-              M : "1个月",
-              MM : "%d个月",
-              y : "1年",
-              yy : "%d年"
+              future : "over %s",
+              past : "%s geleden",
+              s : "een paar seconden",
+              m : "één minuut",
+              mm : "%d minuten",
+              h : "één uur",
+              hh : "%d uur",
+              d : "één dag",
+              dd : "%d dagen",
+              M : "één maand",
+              MM : "%d maanden",
+              y : "één jaar",
+              yy : "%d jaar"
+          },
+          ordinal : function (number) {
+              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
           },
           week : {
-              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
               dow : 1, // Monday is the first day of the week.
               doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
@@ -37441,109 +34775,2775 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 129 */
+/* 105 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : traditional chinese (zh-tw)
-  // author : Ben : https://github.com/ben-lin
+  // language : norwegian nynorsk (nn)
+  // author : https://github.com/mechuwind
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
           factory(window.moment); // Browser global
       }
   }(function (moment) {
-      return moment.lang('zh-tw', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+      return moment.lang('nn', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
+          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
+          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
           longDateFormat : {
-              LT : "Ah點mm",
-              L : "YYYY年MMMD日",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY年MMMD日",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
           },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
+          calendar : {
+              sameDay: '[I dag klokka] LT',
+              nextDay: '[I morgon klokka] LT',
+              nextWeek: 'dddd [klokka] LT',
+              lastDay: '[I går klokka] LT',
+              lastWeek: '[Føregåande] dddd [klokka] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s sidan",
+              s : "nokre sekund",
+              m : "eit minutt",
+              mm : "%d minutt",
+              h : "ein time",
+              hh : "%d timar",
+              d : "ein dag",
+              dd : "%d dagar",
+              M : "ein månad",
+              MM : "%d månader",
+              y : "eit år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 106 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : polish (pl)
+  // author : Rafal Hirsz : https://github.com/evoL
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
+          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
+
+      function plural(n) {
+          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
+      }
+
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'minuta' : 'minutę';
+          case 'mm':
+              return result + (plural(number) ? 'minuty' : 'minut');
+          case 'h':
+              return withoutSuffix  ? 'godzina'  : 'godzinę';
+          case 'hh':
+              return result + (plural(number) ? 'godziny' : 'godzin');
+          case 'MM':
+              return result + (plural(number) ? 'miesiące' : 'miesięcy');
+          case 'yy':
+              return result + (plural(number) ? 'lata' : 'lat');
+          }
+      }
+
+      return moment.lang('pl', {
+          months : function (momentToFormat, format) {
+              if (/D MMMM/.test(format)) {
+                  return monthsSubjective[momentToFormat.month()];
               } else {
-                  return "晚上";
+                  return monthsNominative[momentToFormat.month()];
               }
           },
-          calendar : {
-              sameDay : '[今天]LT',
-              nextDay : '[明天]LT',
-              nextWeek : '[下]ddddLT',
-              lastDay : '[昨天]LT',
-              lastWeek : '[上]ddddLT',
-              sameElse : 'L'
+          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
+          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
+          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
+          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
           },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d" :
-              case "D" :
-              case "DDD" :
-                  return number + "日";
-              case "M" :
-                  return number + "月";
-              case "w" :
-              case "W" :
-                  return number + "週";
-              default :
-                  return number;
-              }
+          calendar : {
+              sameDay: '[Dziś o] LT',
+              nextDay: '[Jutro o] LT',
+              nextWeek: '[W] dddd [o] LT',
+              lastDay: '[Wczoraj o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[W zeszłą niedzielę o] LT';
+                  case 3:
+                      return '[W zeszłą środę o] LT';
+                  case 6:
+                      return '[W zeszłą sobotę o] LT';
+                  default:
+                      return '[W zeszły] dddd [o] LT';
+                  }
+              },
+              sameElse: 'L'
           },
           relativeTime : {
-              future : "%s內",
-              past : "%s前",
-              s : "幾秒",
-              m : "一分鐘",
-              mm : "%d分鐘",
-              h : "一小時",
-              hh : "%d小時",
-              d : "一天",
-              dd : "%d天",
-              M : "一個月",
-              MM : "%d個月",
-              y : "一年",
-              yy : "%d年"
+              future : "za %s",
+              past : "%s temu",
+              s : "kilka sekund",
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : "1 dzień",
+              dd : '%d dni',
+              M : "miesiąc",
+              MM : translate,
+              y : "rok",
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
   }));
 
 
 /***/ },
-/* 130 */
+/* 107 */
 /***/ function(module, exports, __webpack_require__) {
 
-  module.exports = function(module) {
-  	if(!module.webpackPolyfill) {
-  		module.deprecate = function() {};
-  		module.paths = [];
-  		// module.parent = undefined by default
-  		module.children = [];
-  		module.webpackPolyfill = 1;
-  	}
-  	return module;
-  }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : brazilian portuguese (pt-br)
+  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt-br', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY [às] LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
+          },
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "em %s",
+              past : "%s atrás",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº'
+      });
+  }));
+
+
+/***/ },
+/* 108 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : portuguese (pt)
+  // author : Jefferson : https://github.com/jalex79
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "em %s",
+              past : "há %s",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 109 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : romanian (ro)
+  // author : Vlad Gurdiga : https://github.com/gurdiga
+  // author : Valentin Agachi : https://github.com/avaly
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'minute',
+              'hh': 'ore',
+              'dd': 'zile',
+              'MM': 'luni',
+              'yy': 'ani'
+          },
+              separator = ' ';
+          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
+              separator = ' de ';
+          }
+
+          return number + separator + format[key];
+      }
+
+      return moment.lang('ro', {
+          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
+          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
+          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
+          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
+          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY H:mm",
+              LLLL : "dddd, D MMMM YYYY H:mm"
+          },
+          calendar : {
+              sameDay: "[azi la] LT",
+              nextDay: '[mâine la] LT',
+              nextWeek: 'dddd [la] LT',
+              lastDay: '[ieri la] LT',
+              lastWeek: '[fosta] dddd [la] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "peste %s",
+              past : "%s în urmă",
+              s : "câteva secunde",
+              m : "un minut",
+              mm : relativeTimeWithPlural,
+              h : "o oră",
+              hh : relativeTimeWithPlural,
+              d : "o zi",
+              dd : relativeTimeWithPlural,
+              M : "o lună",
+              MM : relativeTimeWithPlural,
+              y : "un an",
+              yy : relativeTimeWithPlural
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 110 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : russian (ru)
+  // author : Viktorminator : https://github.com/Viktorminator
+  // Author : Menelion Elensúle : https://github.com/Oire
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      }
+
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
+              'hh': 'час_часа_часов',
+              'dd': 'день_дня_дней',
+              'MM': 'месяц_месяца_месяцев',
+              'yy': 'год_года_лет'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'минута' : 'минуту';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
+      }
+
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
+              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
+          },
+
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return months[nounCase][m.month()];
+      }
+
+      function monthsShortCaseReplace(m, format) {
+          var monthsShort = {
+              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
+              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
+          },
+
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return monthsShort[nounCase][m.month()];
+      }
+
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
+              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
+          },
+
+          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return weekdays[nounCase][m.day()];
+      }
+
+      return moment.lang('ru', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY г.",
+              LLL : "D MMMM YYYY г., LT",
+              LLLL : "dddd, D MMMM YYYY г., LT"
+          },
+          calendar : {
+              sameDay: '[Сегодня в] LT',
+              nextDay: '[Завтра в] LT',
+              lastDay: '[Вчера в] LT',
+              nextWeek: function () {
+                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
+              },
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[В прошлое] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                      return '[В прошлый] dddd [в] LT';
+                  case 3:
+                  case 5:
+                  case 6:
+                      return '[В прошлую] dddd [в] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "через %s",
+              past : "%s назад",
+              s : "несколько секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "час",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "месяц",
+              MM : relativeTimeWithPlural,
+              y : "год",
+              yy : relativeTimeWithPlural
+          },
+
+          meridiemParse: /ночи|утра|дня|вечера/i,
+          isPM : function (input) {
+              return /^(дня|вечера)$/.test(input);
+          },
+
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночи";
+              } else if (hour < 12) {
+                  return "утра";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечера";
+              }
+          },
+
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              case 'w':
+              case 'W':
+                  return number + '-я';
+              default:
+                  return number;
+              }
+          },
+
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 111 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovak (sk)
+  // author : Martin Minka : https://github.com/k2s
+  // based on work of petrbela : https://github.com/petrbela
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
+          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
+
+      function plural(n) {
+          return (n > 1) && (n < 5);
+      }
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minúty' : 'minút');
+              } else {
+                  return result + 'minútami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodín');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dni' : 'dní');
+              } else {
+                  return result + 'dňami';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
+              } else {
+                  return result + 'mesiacmi';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'rokov');
+              } else {
+                  return result + 'rokmi';
+              }
+              break;
+          }
+      }
+
+      return moment.lang('sk', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
+          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
+          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
+          longDateFormat : {
+              LT: "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes o] LT",
+              nextDay: '[zajtra o] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [o] LT';
+                  case 3:
+                      return '[v stredu o] LT';
+                  case 4:
+                      return '[vo štvrtok o] LT';
+                  case 5:
+                      return '[v piatok o] LT';
+                  case 6:
+                      return '[v sobotu o] LT';
+                  }
+              },
+              lastDay: '[včera o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulú nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[minulý] dddd [o] LT';
+                  case 3:
+                      return '[minulú stredu o] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [o] LT';
+                  case 6:
+                      return '[minulú sobotu o] LT';
+                  }
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "pred %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 112 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovenian (sl)
+  // author : Robert Sedovšek : https://github.com/sedovsek
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'ena minuta' : 'eno minuto';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2) {
+                  result += 'minuti';
+              } else if (number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minut';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'ena ura' : 'eno uro';
+          case 'hh':
+              if (number === 1) {
+                  result += 'ura';
+              } else if (number === 2) {
+                  result += 'uri';
+              } else if (number === 3 || number === 4) {
+                  result += 'ure';
+              } else {
+                  result += 'ur';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dni';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mesec';
+              } else if (number === 2) {
+                  result += 'meseca';
+              } else if (number === 3 || number === 4) {
+                  result += 'mesece';
+              } else {
+                  result += 'mesecev';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'leto';
+              } else if (number === 2) {
+                  result += 'leti';
+              } else if (number === 3 || number === 4) {
+                  result += 'leta';
+              } else {
+                  result += 'let';
+              }
+              return result;
+          }
+      }
+
+      return moment.lang('sl', {
+          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
+          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
+          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
+          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danes ob] LT',
+              nextDay  : '[jutri ob] LT',
+
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v] [nedeljo] [ob] LT';
+                  case 3:
+                      return '[v] [sredo] [ob] LT';
+                  case 6:
+                      return '[v] [soboto] [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[v] dddd [ob] LT';
+                  }
+              },
+              lastDay  : '[včeraj ob] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[prejšnja] dddd [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prejšnji] dddd [ob] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "čez %s",
+              past   : "%s nazaj",
+              s      : "nekaj sekund",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "en dan",
+              dd     : translate,
+              M      : "en mesec",
+              MM     : translate,
+              y      : "eno leto",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 113 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Albanian (sq)
+  // author : Flakërim Ismani : https://github.com/flakerimi
+  // author: Menelion Elensúle: https://github.com/Oire (tests)
+  // author : Oerd Cukalla : https://github.com/oerd (fixes)
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('sq', {
+          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
+          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
+          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
+          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
+          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              return hours < 12 ? 'PD' : 'MD';
+          },
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Sot në] LT',
+              nextDay : '[Nesër në] LT',
+              nextWeek : 'dddd [në] LT',
+              lastDay : '[Dje në] LT',
+              lastWeek : 'dddd [e kaluar në] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "në %s",
+              past : "%s më parë",
+              s : "disa sekonda",
+              m : "një minutë",
+              mm : "%d minuta",
+              h : "një orë",
+              hh : "%d orë",
+              d : "një ditë",
+              dd : "%d ditë",
+              M : "një muaj",
+              MM : "%d muaj",
+              y : "një vit",
+              yy : "%d vite"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 114 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-cyrillic (sr-cyrl)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['један минут', 'једне минуте'],
+              mm: ['минут', 'минуте', 'минута'],
+              h: ['један сат', 'једног сата'],
+              hh: ['сат', 'сата', 'сати'],
+              dd: ['дан', 'дана', 'дана'],
+              MM: ['месец', 'месеца', 'месеци'],
+              yy: ['година', 'године', 'година']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
+          }
+      };
+
+      return moment.lang('sr-cyrl', {
+          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
+          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
+          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
+          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
+          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[данас у] LT',
+              nextDay: '[сутра у] LT',
+
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[у] [недељу] [у] LT';
+                  case 3:
+                      return '[у] [среду] [у] LT';
+                  case 6:
+                      return '[у] [суботу] [у] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[у] dddd [у] LT';
+                  }
+              },
+              lastDay  : '[јуче у] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[прошле] [недеље] [у] LT',
+                      '[прошлог] [понедељка] [у] LT',
+                      '[прошлог] [уторка] [у] LT',
+                      '[прошле] [среде] [у] LT',
+                      '[прошлог] [четвртка] [у] LT',
+                      '[прошлог] [петка] [у] LT',
+                      '[прошле] [суботе] [у] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past   : "пре %s",
+              s      : "неколико секунди",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "дан",
+              dd     : translator.translate,
+              M      : "месец",
+              MM     : translator.translate,
+              y      : "годину",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 115 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-latin (sr)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['jedan minut', 'jedne minute'],
+              mm: ['minut', 'minute', 'minuta'],
+              h: ['jedan sat', 'jednog sata'],
+              hh: ['sat', 'sata', 'sati'],
+              dd: ['dan', 'dana', 'dana'],
+              MM: ['mesec', 'meseca', 'meseci'],
+              yy: ['godina', 'godine', 'godina']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
+          }
+      };
+
+      return moment.lang('sr', {
+          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
+          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
+          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
+          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[danas u] LT',
+              nextDay: '[sutra u] LT',
+
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedelju] [u] LT';
+                  case 3:
+                      return '[u] [sredu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[juče u] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[prošle] [nedelje] [u] LT',
+                      '[prošlog] [ponedeljka] [u] LT',
+                      '[prošlog] [utorka] [u] LT',
+                      '[prošle] [srede] [u] LT',
+                      '[prošlog] [četvrtka] [u] LT',
+                      '[prošlog] [petka] [u] LT',
+                      '[prošle] [subote] [u] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "pre %s",
+              s      : "nekoliko sekundi",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "dan",
+              dd     : translator.translate,
+              M      : "mesec",
+              MM     : translator.translate,
+              y      : "godinu",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 116 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : swedish (sv)
+  // author : Jens Alm : https://github.com/ulmus
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('sv', {
+          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
+          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
+          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Idag] LT',
+              nextDay: '[Imorgon] LT',
+              lastDay: '[Igår] LT',
+              nextWeek: 'dddd LT',
+              lastWeek: '[Förra] dddd[en] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "för %s sedan",
+              s : "några sekunder",
+              m : "en minut",
+              mm : "%d minuter",
+              h : "en timme",
+              hh : "%d timmar",
+              d : "en dag",
+              dd : "%d dagar",
+              M : "en månad",
+              MM : "%d månader",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
+                  (b === 1) ? 'a' :
+                  (b === 2) ? 'a' :
+                  (b === 3) ? 'e' : 'e';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 117 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : tamil (ta)
+  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      /*var symbolMap = {
+              '1': '௧',
+              '2': '௨',
+              '3': '௩',
+              '4': '௪',
+              '5': '௫',
+              '6': '௬',
+              '7': '௭',
+              '8': '௮',
+              '9': '௯',
+              '0': '௦'
+          },
+          numberMap = {
+              '௧': '1',
+              '௨': '2',
+              '௩': '3',
+              '௪': '4',
+              '௫': '5',
+              '௬': '6',
+              '௭': '7',
+              '௮': '8',
+              '௯': '9',
+              '௦': '0'
+          }; */
+
+      return moment.lang('ta', {
+          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
+          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
+          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[இன்று] LT',
+              nextDay : '[நாளை] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[நேற்று] LT',
+              lastWeek : '[கடந்த வாரம்] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s இல்",
+              past : "%s முன்",
+              s : "ஒரு சில விநாடிகள்",
+              m : "ஒரு நிமிடம்",
+              mm : "%d நிமிடங்கள்",
+              h : "ஒரு மணி நேரம்",
+              hh : "%d மணி நேரம்",
+              d : "ஒரு நாள்",
+              dd : "%d நாட்கள்",
+              M : "ஒரு மாதம்",
+              MM : "%d மாதங்கள்",
+              y : "ஒரு வருடம்",
+              yy : "%d ஆண்டுகள்"
+          },
+  /*        preparse: function (string) {
+              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },*/
+          ordinal : function (number) {
+              return number + 'வது';
+          },
+
+
+  // refer http://ta.wikipedia.org/s/1er1      
+
+          meridiem : function (hour, minute, isLower) {
+              if (hour >= 6 && hour <= 10) {
+                  return " காலை";
+              } else   if (hour >= 10 && hour <= 14) {
+                  return " நண்பகல்";
+              } else    if (hour >= 14 && hour <= 18) {
+                  return " எற்பாடு";
+              } else   if (hour >= 18 && hour <= 20) {
+                  return " மாலை";
+              } else  if (hour >= 20 && hour <= 24) {
+                  return " இரவு";
+              } else  if (hour >= 0 && hour <= 6) {
+                  return " வைகறை";
+              }
+          },
+          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.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 118 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : thai (th)
+  // author : Kridsada Thanabulpong : https://github.com/sirn
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('th', {
+          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
+          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
+          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
+          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
+          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
+          longDateFormat : {
+              LT : "H นาฬิกา m นาที",
+              L : "YYYY/MM/DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY เวลา LT",
+              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ก่อนเที่ยง";
+              } else {
+                  return "หลังเที่ยง";
+              }
+          },
+          calendar : {
+              sameDay : '[วันนี้ เวลา] LT',
+              nextDay : '[พรุ่งนี้ เวลา] LT',
+              nextWeek : 'dddd[หน้า เวลา] LT',
+              lastDay : '[เมื่อวานนี้ เวลา] LT',
+              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "อีก %s",
+              past : "%sที่แล้ว",
+              s : "ไม่กี่วินาที",
+              m : "1 นาที",
+              mm : "%d นาที",
+              h : "1 ชั่วโมง",
+              hh : "%d ชั่วโมง",
+              d : "1 วัน",
+              dd : "%d วัน",
+              M : "1 เดือน",
+              MM : "%d เดือน",
+              y : "1 ปี",
+              yy : "%d ปี"
+          }
+      });
+  }));
+
+
+/***/ },
+/* 119 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Tagalog/Filipino (tl-ph)
+  // author : Dan Hagman
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tl-ph', {
+          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
+          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
+          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
+          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
+          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "MM/D/YYYY",
+              LL : "MMMM D, YYYY",
+              LLL : "MMMM D, YYYY LT",
+              LLLL : "dddd, MMMM DD, YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Ngayon sa] LT",
+              nextDay: '[Bukas sa] LT',
+              nextWeek: 'dddd [sa] LT',
+              lastDay: '[Kahapon sa] LT',
+              lastWeek: 'dddd [huling linggo] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "sa loob ng %s",
+              past : "%s ang nakalipas",
+              s : "ilang segundo",
+              m : "isang minuto",
+              mm : "%d minuto",
+              h : "isang oras",
+              hh : "%d oras",
+              d : "isang araw",
+              dd : "%d araw",
+              M : "isang buwan",
+              MM : "%d buwan",
+              y : "isang taon",
+              yy : "%d taon"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 120 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : turkish (tr)
+  // authors : Erhan Gundogan : https://github.com/erhangundogan,
+  //           Burak Yiğit Kaya: https://github.com/BYK
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      var suffixes = {
+          1: "'inci",
+          5: "'inci",
+          8: "'inci",
+          70: "'inci",
+          80: "'inci",
+
+          2: "'nci",
+          7: "'nci",
+          20: "'nci",
+          50: "'nci",
+
+          3: "'üncü",
+          4: "'üncü",
+          100: "'üncü",
+
+          6: "'ncı",
+
+          9: "'uncu",
+          10: "'uncu",
+          30: "'uncu",
+
+          60: "'ıncı",
+          90: "'ıncı"
+      };
+
+      return moment.lang('tr', {
+          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
+          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
+          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
+          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
+          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[yarın saat] LT',
+              nextWeek : '[haftaya] dddd [saat] LT',
+              lastDay : '[dün] LT',
+              lastWeek : '[geçen hafta] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s önce",
+              s : "birkaç saniye",
+              m : "bir dakika",
+              mm : "%d dakika",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir yıl",
+              yy : "%d yıl"
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "'ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
+
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 121 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
+  // author : Abdel Said : https://github.com/abdelsaid
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tzm-latn', {
+          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[asdkh g] LT",
+              nextDay: '[aska g] LT',
+              nextWeek: 'dddd [g] LT',
+              lastDay: '[assant g] LT',
+              lastWeek: 'dddd [g] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dadkh s yan %s",
+              past : "yan %s",
+              s : "imik",
+              m : "minuḍ",
+              mm : "%d minuḍ",
+              h : "saɛa",
+              hh : "%d tassaɛin",
+              d : "ass",
+              dd : "%d ossan",
+              M : "ayowr",
+              MM : "%d iyyirn",
+              y : "asgas",
+              yy : "%d isgasn"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 122 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt (tzm)
+  // author : Abdel Said : https://github.com/abdelsaid
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tzm', {
+          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
+              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
+              nextWeek: 'dddd [ⴴ] LT',
+              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
+              lastWeek: 'dddd [ⴴ] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
+              past : "ⵢⴰⵏ %s",
+              s : "ⵉⵎⵉⴽ",
+              m : "ⵎⵉⵏⵓⴺ",
+              mm : "%d ⵎⵉⵏⵓⴺ",
+              h : "ⵙⴰⵄⴰ",
+              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
+              d : "ⴰⵙⵙ",
+              dd : "%d oⵙⵙⴰⵏ",
+              M : "ⴰⵢoⵓⵔ",
+              MM : "%d ⵉⵢⵢⵉⵔⵏ",
+              y : "ⴰⵙⴳⴰⵙ",
+              yy : "%d ⵉⵙⴳⴰⵙⵏ"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 123 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : ukrainian (uk)
+  // author : zemlanin : https://github.com/zemlanin
+  // Author : Menelion Elensúle : https://github.com/Oire
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      }
+
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'хвилина_хвилини_хвилин',
+              'hh': 'година_години_годин',
+              'dd': 'день_дні_днів',
+              'MM': 'місяць_місяці_місяців',
+              'yy': 'рік_роки_років'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'хвилина' : 'хвилину';
+          }
+          else if (key === 'h') {
+              return withoutSuffix ? 'година' : 'годину';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
+      }
+
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
+              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
+          },
+
+          nounCase = (/D[oD]? *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return months[nounCase][m.month()];
+      }
+
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
+              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
+              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
+          },
+
+          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
+              'accusative' :
+              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
+                  'genitive' :
+                  'nominative');
+
+          return weekdays[nounCase][m.day()];
+      }
+
+      function processHoursFunction(str) {
+          return function () {
+              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
+          };
+      }
+
+      return moment.lang('uk', {
+          months : monthsCaseReplace,
+          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY р.",
+              LLL : "D MMMM YYYY р., LT",
+              LLLL : "dddd, D MMMM YYYY р., LT"
+          },
+          calendar : {
+              sameDay: processHoursFunction('[Сьогодні '),
+              nextDay: processHoursFunction('[Завтра '),
+              lastDay: processHoursFunction('[Вчора '),
+              nextWeek: processHoursFunction('[У] dddd ['),
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 5:
+                  case 6:
+                      return processHoursFunction('[Минулої] dddd [').call(this);
+                  case 1:
+                  case 2:
+                  case 4:
+                      return processHoursFunction('[Минулого] dddd [').call(this);
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past : "%s тому",
+              s : "декілька секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "годину",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "місяць",
+              MM : relativeTimeWithPlural,
+              y : "рік",
+              yy : relativeTimeWithPlural
+          },
+
+          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
+
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночі";
+              } else if (hour < 12) {
+                  return "ранку";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечора";
+              }
+          },
+
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+              case 'w':
+              case 'W':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              default:
+                  return number;
+              }
+          },
+
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 124 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : uzbek
+  // author : Sardor Muminov : https://github.com/muminoff
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('uz', {
+          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
+          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
+          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
+          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
+          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "D MMMM YYYY, dddd LT"
+          },
+          calendar : {
+              sameDay : '[Бугун соат] LT [да]',
+              nextDay : '[Эртага] LT [да]',
+              nextWeek : 'dddd [куни соат] LT [да]',
+              lastDay : '[Кеча соат] LT [да]',
+              lastWeek : '[Утган] dddd [куни соат] LT [да]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "Якин %s ичида",
+              past : "Бир неча %s олдин",
+              s : "фурсат",
+              m : "бир дакика",
+              mm : "%d дакика",
+              h : "бир соат",
+              hh : "%d соат",
+              d : "бир кун",
+              dd : "%d кун",
+              M : "бир ой",
+              MM : "%d ой",
+              y : "бир йил",
+              yy : "%d йил"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 125 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : vietnamese (vi)
+  // author : Bang Nguyen : https://github.com/bangnk
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('vi', {
+          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
+          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
+          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
+          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM [năm] YYYY",
+              LLL : "D MMMM [năm] YYYY LT",
+              LLLL : "dddd, D MMMM [năm] YYYY LT",
+              l : "DD/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Hôm nay lúc] LT",
+              nextDay: '[Ngày mai lúc] LT',
+              nextWeek: 'dddd [tuần tới lúc] LT',
+              lastDay: '[Hôm qua lúc] LT',
+              lastWeek: 'dddd [tuần rồi lúc] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s tới",
+              past : "%s trước",
+              s : "vài giây",
+              m : "một phút",
+              mm : "%d phút",
+              h : "một giờ",
+              hh : "%d giờ",
+              d : "một ngày",
+              dd : "%d ngày",
+              M : "một tháng",
+              MM : "%d tháng",
+              y : "một năm",
+              yy : "%d năm"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 126 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chinese
+  // author : suupic : https://github.com/suupic
+  // author : Zeno Zeng : https://github.com/zenozeng
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-cn', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah点mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY-MM-DD",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 600) {
+                  return "凌晨";
+              } else if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : function () {
+                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
+              },
+              nextDay : function () {
+                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
+              },
+              lastDay : function () {
+                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
+              },
+              nextWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              lastWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              sameElse : 'LL'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d":
+              case "D":
+              case "DDD":
+                  return number + "日";
+              case "M":
+                  return number + "月";
+              case "w":
+              case "W":
+                  return number + "周";
+              default:
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s内",
+              past : "%s前",
+              s : "几秒",
+              m : "1分钟",
+              mm : "%d分钟",
+              h : "1小时",
+              hh : "%d小时",
+              d : "1天",
+              dd : "%d天",
+              M : "1个月",
+              MM : "%d个月",
+              y : "1年",
+              yy : "%d年"
+          },
+          week : {
+              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 127 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : traditional chinese (zh-tw)
+  // author : Ben : https://github.com/ben-lin
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-tw', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah點mm",
+              L : "YYYY年MMMD日",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY年MMMD日",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : '[今天]LT',
+              nextDay : '[明天]LT',
+              nextWeek : '[下]ddddLT',
+              lastDay : '[昨天]LT',
+              lastWeek : '[上]ddddLT',
+              sameElse : 'L'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d" :
+              case "D" :
+              case "DDD" :
+                  return number + "日";
+              case "M" :
+                  return number + "月";
+              case "w" :
+              case "W" :
+                  return number + "週";
+              default :
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s內",
+              past : "%s前",
+              s : "幾秒",
+              m : "一分鐘",
+              mm : "%d分鐘",
+              h : "一小時",
+              hh : "%d小時",
+              d : "一天",
+              dd : "%d天",
+              M : "一個月",
+              MM : "%d個月",
+              y : "一年",
+              yy : "%d年"
+          }
+      });
+  }));
+
+
+/***/ },
+/* 128 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * Calculate the forces the nodes apply on each other based on a repulsion field.
+   * This field is linearly approximated.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function () {
+    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
+
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
+
+    // approximation constants
+    var a_base = -2 / 3;
+    var b = 4 / 3;
+
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
+
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+
+        dx = node2.x - node1.x;
+        dy = node2.y - node1.y;
+        distance = Math.sqrt(dx * dx + dy * dy);
+
+        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
+        var a = a_base / minimumDistance;
+        if (distance < 2 * minimumDistance) {
+          if (distance < 0.5 * minimumDistance) {
+            repulsingForce = 1.0;
+          }
+          else {
+            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+          }
+
+          // amplify the repulsion for clusters.
+          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
+          repulsingForce = repulsingForce / distance;
+
+          fx = dx * repulsingForce;
+          fy = dy * repulsingForce;
+
+          node1.fx -= fx;
+          node1.fy -= fy;
+          node2.fx += fx;
+          node2.fy += fy;
+        }
+      }
+    }
+  };
+
+
+/***/ },
+/* 129 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * Calculate the forces the nodes apply on eachother based on a repulsion field.
+   * This field is linearly approximated.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function () {
+    var dx, dy, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
+
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
+
+    // approximation constants
+    var b = 5;
+    var a_base = 0.5 * -b;
+
+
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
+    var a = a_base / minimumDistance;
+
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        if (node1.level == node2.level) {
+
+          dx = node2.x - node1.x;
+          dy = node2.y - node1.y;
+          distance = Math.sqrt(dx * dx + dy * dy);
+
+
+          if (distance < 2 * minimumDistance) {
+            repulsingForce = a * distance + b;
+            var c = 0.05;
+            var d = 2 * minimumDistance * 2 * c;
+            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
+
+            // normalize force with
+            if (distance == 0) {
+              distance = 0.01;
+            }
+            else {
+              repulsingForce = repulsingForce / distance;
+            }
+            fx = dx * repulsingForce;
+            fy = dy * repulsingForce;
+
+            node1.fx -= fx;
+            node1.fy -= fy;
+            node2.fx += fx;
+            node2.fy += fy;
+          }
+        }
+      }
+    }
+  };
+
+
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateHierarchicalSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    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)) {
+            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance == 0) {
+              distance = 0.01;
+            }
+
+            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
+
+            // 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.to.fx -= fx;
+            edge.to.fy -= fy;
+            edge.from.fx += fx;
+            edge.from.fy += fy;
+
+
+            var factor = 5;
+            if (distance > edgeLength) {
+              factor = 25;
+            }
+
+            if (edge.from.level > edge.to.level) {
+              edge.to.fx -= factor*fx;
+              edge.to.fy -= factor*fy;
+            }
+            else if (edge.from.level < edge.to.level) {
+              edge.from.fx += factor*fx;
+              edge.from.fy += factor*fy;
+            }
+          }
+        }
+      }
+    }
+  };
+
+/***/ },
+/* 130 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+   * The Barnes Hut method is used to speed up this N-body simulation.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function() {
+    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
+      var node;
+      var nodes = this.calculationNodes;
+      var nodeIndices = this.calculationNodeIndices;
+      var nodeCount = nodeIndices.length;
+
+      this._formBarnesHutTree(nodes,nodeIndices);
+
+      var barnesHutTree = this.barnesHutTree;
+
+      // place the nodes one by one recursively
+      for (var i = 0; i < nodeCount; i++) {
+        node = nodes[nodeIndices[i]];
+        // starting with root is irrelevant, it never passes the BarnesHut condition
+        this._getForceContribution(barnesHutTree.root.children.NW,node);
+        this._getForceContribution(barnesHutTree.root.children.NE,node);
+        this._getForceContribution(barnesHutTree.root.children.SW,node);
+        this._getForceContribution(barnesHutTree.root.children.SE,node);
+      }
+    }
+  };
+
+
+  /**
+   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._getForceContribution = function(parentBranch,node) {
+    // we get no force contribution from an empty region
+    if (parentBranch.childrenCount > 0) {
+      var dx,dy,distance;
+
+      // get the distance from the center of mass to the node.
+      dx = parentBranch.centerOfMass.x - node.x;
+      dy = parentBranch.centerOfMass.y - node.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
+
+      // BarnesHut condition
+      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
+      // calcSize = 1/s --> d * 1/s > 1/theta = passed
+      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
+        // duplicate code to reduce function calls to speed up program
+        if (distance == 0) {
+          distance = 0.1*Math.random();
+          dx = distance;
+        }
+        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+        var fx = dx * gravityForce;
+        var fy = dy * gravityForce;
+        node.fx += fx;
+        node.fy += fy;
+      }
+      else {
+        // Did not pass the condition, go into children if available
+        if (parentBranch.childrenCount == 4) {
+          this._getForceContribution(parentBranch.children.NW,node);
+          this._getForceContribution(parentBranch.children.NE,node);
+          this._getForceContribution(parentBranch.children.SW,node);
+          this._getForceContribution(parentBranch.children.SE,node);
+        }
+        else { // parentBranch must have only one node, if it was empty we wouldnt be here
+          if (parentBranch.children.data.id != node.id) { // if it is not self
+            // duplicate code to reduce function calls to speed up program
+            if (distance == 0) {
+              distance = 0.5*Math.random();
+              dx = distance;
+            }
+            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+            var fx = dx * gravityForce;
+            var fy = dy * gravityForce;
+            node.fx += fx;
+            node.fy += fy;
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   *
+   * @param nodes
+   * @param nodeIndices
+   * @private
+   */
+  exports._formBarnesHutTree = function(nodes,nodeIndices) {
+    var node;
+    var nodeCount = nodeIndices.length;
+
+    var minX = Number.MAX_VALUE,
+      minY = Number.MAX_VALUE,
+      maxX =-Number.MAX_VALUE,
+      maxY =-Number.MAX_VALUE;
+
+    // get the range of the nodes
+    for (var i = 0; i < nodeCount; i++) {
+      var x = nodes[nodeIndices[i]].x;
+      var y = nodes[nodeIndices[i]].y;
+      if (x < minX) { minX = x; }
+      if (x > maxX) { maxX = x; }
+      if (y < minY) { minY = y; }
+      if (y > maxY) { maxY = y; }
+    }
+    // make the range a square
+    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
+    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
+
+
+    var minimumTreeSize = 1e-5;
+    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
+    var halfRootSize = 0.5 * rootSize;
+    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+    // construct the barnesHutTree
+    var barnesHutTree = {
+      root:{
+        centerOfMass: {x:0, y:0},
+        mass:0,
+        range: {
+          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
+          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
+        },
+        size: rootSize,
+        calcSize: 1 / rootSize,
+        children: { data:null},
+        maxWidth: 0,
+        level: 0,
+        childrenCount: 4
+      }
+    };
+    this._splitBranch(barnesHutTree.root);
+
+    // place the nodes one by one recursively
+    for (i = 0; i < nodeCount; i++) {
+      node = nodes[nodeIndices[i]];
+      this._placeInTree(barnesHutTree.root,node);
+    }
+
+    // make global
+    this.barnesHutTree = barnesHutTree
+  };
+
+
+  /**
+   * this updates the mass of a branch. this is increased by adding a node.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._updateBranchMass = function(parentBranch, node) {
+    var totalMass = parentBranch.mass + node.mass;
+    var totalMassInv = 1/totalMass;
+
+    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
+    parentBranch.centerOfMass.x *= totalMassInv;
+
+    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
+    parentBranch.centerOfMass.y *= totalMassInv;
+
+    parentBranch.mass = totalMass;
+    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
+    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+
+  };
+
+
+  /**
+   * determine in which branch the node will be placed.
+   *
+   * @param parentBranch
+   * @param node
+   * @param skipMassUpdate
+   * @private
+   */
+  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
+    if (skipMassUpdate != true || skipMassUpdate === undefined) {
+      // update the mass of the branch.
+      this._updateBranchMass(parentBranch,node);
+    }
+
+    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+        this._placeInRegion(parentBranch,node,"NW");
+      }
+      else { // in SW
+        this._placeInRegion(parentBranch,node,"SW");
+      }
+    }
+    else { // in NE or SE
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+        this._placeInRegion(parentBranch,node,"NE");
+      }
+      else { // in SE
+        this._placeInRegion(parentBranch,node,"SE");
+      }
+    }
+  };
+
+
+  /**
+   * actually place the node in a region (or branch)
+   *
+   * @param parentBranch
+   * @param node
+   * @param region
+   * @private
+   */
+  exports._placeInRegion = function(parentBranch,node,region) {
+    switch (parentBranch.children[region].childrenCount) {
+      case 0: // place node here
+        parentBranch.children[region].children.data = node;
+        parentBranch.children[region].childrenCount = 1;
+        this._updateBranchMass(parentBranch.children[region],node);
+        break;
+      case 1: // convert into children
+        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+        // we move one node a pixel and we do not put it in the tree.
+        if (parentBranch.children[region].children.data.x == node.x &&
+            parentBranch.children[region].children.data.y == node.y) {
+          node.x += Math.random();
+          node.y += Math.random();
+        }
+        else {
+          this._splitBranch(parentBranch.children[region]);
+          this._placeInTree(parentBranch.children[region],node);
+        }
+        break;
+      case 4: // place in branch
+        this._placeInTree(parentBranch.children[region],node);
+        break;
+    }
+  };
+
+
+  /**
+   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+   * after the split is complete.
+   *
+   * @param parentBranch
+   * @private
+   */
+  exports._splitBranch = function(parentBranch) {
+    // if the branch is shaded with a node, replace the node in the new subset.
+    var containedNode = null;
+    if (parentBranch.childrenCount == 1) {
+      containedNode = parentBranch.children.data;
+      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+    }
+    parentBranch.childrenCount = 4;
+    parentBranch.children.data = null;
+    this._insertRegion(parentBranch,"NW");
+    this._insertRegion(parentBranch,"NE");
+    this._insertRegion(parentBranch,"SW");
+    this._insertRegion(parentBranch,"SE");
+
+    if (containedNode != null) {
+      this._placeInTree(parentBranch,containedNode);
+    }
+  };
+
+
+  /**
+   * This function subdivides the region into four new segments.
+   * Specifically, this inserts a single new segment.
+   * It fills the children section of the parentBranch
+   *
+   * @param parentBranch
+   * @param region
+   * @param parentRange
+   * @private
+   */
+  exports._insertRegion = function(parentBranch, region) {
+    var minX,maxX,minY,maxY;
+    var childSize = 0.5 * parentBranch.size;
+    switch (region) {
+      case "NW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "NE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "SW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+      case "SE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+    }
+
+
+    parentBranch.children[region] = {
+      centerOfMass:{x:0,y:0},
+      mass:0,
+      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
+      size: 0.5 * parentBranch.size,
+      calcSize: 2 * parentBranch.calcSize,
+      children: {data:null},
+      maxWidth: 0,
+      level: parentBranch.level+1,
+      childrenCount: 0
+    };
+  };
+
+
+  /**
+   * This function is for debugging purposed, it draws the tree.
+   *
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawTree = function(ctx,color) {
+    if (this.barnesHutTree !== undefined) {
+
+      ctx.lineWidth = 1;
+
+      this._drawBranch(this.barnesHutTree.root,ctx,color);
+    }
+  };
+
+
+  /**
+   * This function is for debugging purposes. It draws the branches recursively.
+   *
+   * @param branch
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawBranch = function(branch,ctx,color) {
+    if (color === undefined) {
+      color = "#FF0000";
+    }
+
+    if (branch.childrenCount == 4) {
+      this._drawBranch(branch.children.NW,ctx);
+      this._drawBranch(branch.children.NE,ctx);
+      this._drawBranch(branch.children.SE,ctx);
+      this._drawBranch(branch.children.SW,ctx);
+    }
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.minY);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.maxY);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.maxY);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.minY);
+    ctx.stroke();
+
+    /*
+     if (branch.mass > 0) {
+     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+     ctx.stroke();
+     }
+     */
+  };
 
 
 /***/ }
diff --git a/examples/network/28_world_cup_network_performance.html b/examples/network/28_world_cup_network_performance.html
new file mode 100644
index 00000000..cffc274c
--- /dev/null
+++ b/examples/network/28_world_cup_network_performance.html
@@ -0,0 +1,10053 @@
+<!DOCTYPE html>
+<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
+<html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <title>Network |  Static smooth curves - World Cup Network</title>
+
+    <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link type="text/css" rel="stylesheet" href="../../dist/vis.css">
+
+  <style type="text/css">
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+
+<body>
+
+<h2>Performance - World Cup Network</h2>
+<div style="width:700px; font-size:14px;">
+    This example shows the performance of vis with a larger network. The edges in particular (~9200) are very computationally intensive
+    to draw. Drag and hold the graph to see the performance difference if the edges are hidden.
+    <br /><br />
+    We use the following physics configuration: <br/>
+    <code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001, springLength: 200}}</code>
+    <br /><br />
+</div>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+    var network;
+
+
+    function redrawAll() {
+      network = null;
+      // create an array with nodes
+      var nodes = [
+    {id: 1, label: 'Abdelmoumene Djabou', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Club Africain', value: 22, group: 24},
+    {id: 2, label: 'Abel Aguilar', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Toulouse', value: 24, group: 11},
+    {id: 3, label: 'Abel Hernández', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Palermo', value: 22, group: 6},
+    {id: 4, label: 'Adam Kwarasey', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Strømsgodset', value: 22, group: 5},
+    {id: 5, label: 'Adam Lallana', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Southampton', value: 26, group: 28},
+    {id: 6, label: 'Adam Taggart', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Newcastle Jets', value: 22, group: 12},
+    {id: 7, label: 'Admir Mehmedi', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'SC Freiburg', value: 24, group: 0},
+    {id: 8, label: 'Adnan Januzaj', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Manchester United', value: 34, group: 28},
+    {id: 9, label: 'Adrián Bone', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'El Nacional', value: 22, group: 4},
+    {id: 10, label: 'Adrián Ramos', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Hertha BSC', value: 23, group: 11},
+    {id: 11, label: 'Afriyie Acquah', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Parma', value: 26, group: 5},
+    {id: 12, label: 'Agustín Orión', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Boca Juniors', value: 22, group: 19},
+    {id: 13, label: 'Ahmad Alenemeh', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Naft Tehran', value: 22, group: 1},
+    {id: 14, label: 'Ahmed Musa', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'CSKA Moscow', value: 27, group: 14},
+    {id: 15, label: 'Aïssa Mandi', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Reims', value: 22, group: 24},
+    {id: 16, label: 'Alan Dzagoev', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'CSKA Moscow', value: 23, group: 2},
+    {id: 17, label: 'Alan Pulido', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'UANL', value: 22, group: 21},
+    {id: 18, label: 'Albert Adomah', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Middlesbrough', value: 23, group: 5},
+    {id: 19, label: 'Alberto Aquilani', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Fiorentina', value: 24, group: 3},
+    {id: 20, label: 'Alejandro Bedoya', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Nantes', value: 22, group: 26},
+    {id: 21, label: 'Aleksandr Kerzhakov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 26, group: 2},
+    {id: 22, label: 'Aleksandr Kokorin', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 23, group: 2},
+    {id: 23, label: 'Aleksandr Samedov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Lokomotiv Moscow', value: 23, group: 2},
+    {id: 24, label: 'Aleksei Ionov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 23, group: 2},
+    {id: 25, label: 'Aleksei Kozlov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 23, group: 2},
+    {id: 26, label: 'Alessio Cerci', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Torino', value: 23, group: 3},
+    {id: 27, label: 'Alex Oxlade-Chamberlain', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Arsenal', value: 30, group: 28},
+    {id: 28, label: 'Alex Song', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Barcelona', value: 37, group: 17},
+    {id: 29, label: 'Alex Wilkinson', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Jeonbuk Hyundai Motors', value: 22, group: 12},
+    {id: 30, label: 'Alexander Domínguez', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'LDU Quito', value: 22, group: 4},
+    {id: 31, label: 'Alexander Mejía', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Atlético Nacional', value: 22, group: 11},
+    {id: 32, label: 'Alexandros Tziolis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Kayserispor', value: 22, group: 15},
+    {id: 33, label: 'Alexis Sánchez', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Barcelona', value: 37, group: 18},
+    {id: 34, label: 'Alfredo Talavera', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Toluca', value: 22, group: 21},
+    {id: 35, label: 'Alireza Haghighi', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Sporting Covilhã', value: 22, group: 1},
+    {id: 36, label: 'Alireza Jahanbakhsh', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'NEC', value: 22, group: 1},
+    {id: 37, label: 'Allan Nyom', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Granada', value: 24, group: 17},
+    {id: 38, label: 'Álvaro González', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 6},
+    {id: 39, label: 'Álvaro Pereira', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'São Paulo', value: 22, group: 6},
+    {id: 40, label: 'Amir Hossein Sadeghi', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Esteghlal', value: 22, group: 1},
+    {id: 41, label: 'Andranik Teymourian', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Esteghlal', value: 22, group: 1},
+    {id: 42, label: 'André Almeida', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Benfica', value: 25, group: 8},
+    {id: 43, label: 'André Ayew', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Marseille', value: 24, group: 5},
+    {id: 44, label: 'André Schürrle', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Chelsea', value: 33, group: 13},
+    {id: 45, label: 'Andrea Barzagli', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Juventus', value: 28, group: 3},
+    {id: 46, label: 'Andrea Pirlo', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Juventus', value: 28, group: 3},
+    {id: 47, label: 'Andreas Samaris', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Olympiacos', value: 23, group: 15},
+    {id: 48, label: 'Andrei Semyonov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Terek Grozny', value: 22, group: 2},
+    {id: 49, label: 'Andrés Guardado', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Bayer Leverkusen', value: 24, group: 21},
+    {id: 50, label: 'Andrés Iniesta', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 51, label: 'Andrey Yeshchenko', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Anzhi Makhachkala', value: 22, group: 2},
+    {id: 52, label: 'Andy Najar', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Anderlecht', value: 23, group: 7},
+    {id: 53, label: 'Anel Hadžic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Sturm Graz', value: 22, group: 20},
+    {id: 54, label: 'Ángel di María', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Real Madrid', value: 33, group: 19},
+    {id: 55, label: 'Ante Rebic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Fiorentina', value: 24, group: 25},
+    {id: 56, label: 'Anthony Vanden Borre', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Anderlecht', value: 23, group: 28},
+    {id: 57, label: 'Antoine Griezmann', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Real Sociedad', value: 25, group: 16},
+    {id: 58, label: 'Antonio Candreva', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 3},
+    {id: 59, label: 'Antonio Cassano', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Parma', value: 24, group: 3},
+    {id: 60, label: 'Antonio Valencia (c)', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Manchester United', value: 35, group: 4},
+    {id: 61, label: 'Arjen Robben', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 22},
+    {id: 62, label: 'Aron Jóhannsson', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'AZ', value: 22, group: 26},
+    {id: 63, label: 'Arthur Boka', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'VfB Stuttgart', value: 25, group: 9},
+    {id: 64, label: 'Arturo Vidal', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Juventus', value: 32, group: 18},
+    {id: 65, label: 'Asamoah Gyan (c)', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Al-Ain', value: 22, group: 5},
+    {id: 66, label: 'Ashkan Dejagah', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Fulham', value: 24, group: 1},
+    {id: 67, label: 'Asmir Avdukic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Borac Banja Luka', value: 22, group: 20},
+    {id: 68, label: 'Asmir Begovic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Stoke City', value: 25, group: 20},
+    {id: 69, label: 'Atsuto Uchida', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Schalke 04', value: 28, group: 27},
+    {id: 70, label: 'Augusto Fernández', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Celta Vigo', value: 23, group: 19},
+    {id: 71, label: 'Aurélien Chedjou', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Galatasaray', value: 26, group: 17},
+    {id: 72, label: 'Austin Ejide', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Hapoel Beer Sheva', value: 22, group: 14},
+    {id: 73, label: 'Avdija Vršajevic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Hajduk Split', value: 22, group: 20},
+    {id: 74, label: 'Axel Witsel', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 28, group: 28},
+    {id: 75, label: 'Azubuike Egwuekwe', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Warri Wolves', value: 22, group: 14},
+    {id: 76, label: 'Bacary Sagna', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Arsenal', value: 29, group: 16},
+    {id: 77, label: 'Bailey Wright', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Preston North End', value: 22, group: 12},
+    {id: 78, label: 'Bakhtiar Rahmani', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Foolad', value: 22, group: 1},
+    {id: 79, label: 'Bastian Schweinsteiger', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 80, label: 'Ben Foster', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'West Bromwich Albion', value: 23, group: 28},
+    {id: 81, label: 'Ben Halloran', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Fortuna Düsseldorf', value: 23, group: 12},
+    {id: 82, label: 'Benedikt Höwedes', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Schalke 04', value: 27, group: 13},
+    {id: 83, label: 'Benjamin Moukandjo', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Nancy', value: 22, group: 17},
+    {id: 84, label: 'Benoît Assou-Ekotto', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Queens Park Rangers', value: 23, group: 17},
+    {id: 85, label: 'Bernard', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Shakhtar Donetsk', value: 24, group: 23},
+    {id: 86, label: 'Beto', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Sevilla', value: 25, group: 8},
+    {id: 87, label: 'Blaise Matuidi', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 29, group: 16},
+    {id: 88, label: 'Blerim Džemaili', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Napoli', value: 31, group: 0},
+    {id: 89, label: 'Boubacar Barry', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Lokeren', value: 22, group: 9},
+    {id: 90, label: 'Brad Davis', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Houston Dynamo', value: 23, group: 26},
+    {id: 91, label: 'Brad Guzan', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Aston Villa', value: 23, group: 26},
+    {id: 92, label: 'Brayan Beckeles', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Olimpia', value: 22, group: 7},
+    {id: 93, label: 'Bruno Alves', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Fenerbahçe', value: 25, group: 8},
+    {id: 94, label: 'Bruno Martins Indi', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Feyenoord', value: 22, group: 22},
+    {id: 95, label: 'Bryan Ruiz (c)', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'PSV', value: 25, group: 29},
+    {id: 96, label: 'Camilo Vargas', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Santa Fe', value: 23, group: 11},
+    {id: 97, label: 'Carl Medjani', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Valenciennes', value: 23, group: 24},
+    {id: 98, label: 'Carlo Costly', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Real España', value: 22, group: 7},
+    {id: 99, label: 'Carlos Bacca', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Sevilla', value: 25, group: 11},
+    {id: 100, label: 'Carlos Carbonero', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'River Plate', value: 22, group: 11},
+    {id: 101, label: 'Carlos Carmona', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Atalanta', value: 23, group: 18},
+    {id: 102, label: 'Carlos Gruezo', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'VfB Stuttgart', value: 25, group: 4},
+    {id: 103, label: 'Carlos Peña', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'León', value: 22, group: 21},
+    {id: 104, label: 'Carlos Salcido', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'UANL', value: 22, group: 21},
+    {id: 105, label: 'Carlos Sánchez', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Elche', value: 22, group: 11},
+    {id: 106, label: 'Carlos Valdés', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'San Lorenzo', value: 22, group: 11},
+    {id: 107, label: 'Cédric Djeugoué', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Coton Sport', value: 22, group: 17},
+    {id: 108, label: 'Cédric Si Mohamed', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'CS Constantine', value: 22, group: 24},
+    {id: 109, label: 'Celso Borges', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'AIK', value: 22, group: 29},
+    {id: 110, label: 'César Azpilicueta', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Chelsea', value: 32, group: 23},
+    {id: 111, label: 'Cesc Fàbregas', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 112, label: 'Charles Aránguiz', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Internacional', value: 22, group: 18},
+    {id: 113, label: 'Charles Itandje', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Konyaspor', value: 23, group: 17},
+    {id: 114, label: 'Cheick Tioté', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Newcastle United', value: 27, group: 9},
+    {id: 115, label: 'Chigozie Agbim', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Gombe United', value: 22, group: 14},
+    {id: 116, label: 'Chris Smalling', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Manchester United', value: 32, group: 28},
+    {id: 117, label: 'Chris Wondolowski', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'San Jose Earthquakes', value: 23, group: 26},
+    {id: 118, label: 'Christian Atsu', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Vitesse', value: 23, group: 5},
+    {id: 119, label: 'Christian Bolaños', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Copenhagen', value: 22, group: 29},
+    {id: 120, label: 'Christian Noboa', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 28, group: 4},
+    {id: 121, label: 'Christian Stuani', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Espanyol', value: 23, group: 6},
+    {id: 122, label: 'Christoph Kramer', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Borussia Mönchengladbach', value: 23, group: 13},
+    {id: 123, label: 'Ciro Immobile', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Torino', value: 23, group: 3},
+    {id: 124, label: 'Claudio Bravo (c)', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Real Sociedad', value: 25, group: 18},
+    {id: 125, label: 'Claudio Marchisio', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Juventus', value: 28, group: 3},
+    {id: 126, label: 'Clint Dempsey (c)', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Seattle Sounders FC', value: 22, group: 26},
+    {id: 127, label: 'Constant Djakpa', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Eintracht Frankfurt', value: 23, group: 9},
+    {id: 128, label: 'Cristian Gamboa', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Rosenborg', value: 23, group: 29},
+    {id: 129, label: 'Cristian Rodríguez', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 28, group: 6},
+    {id: 130, label: 'Cristián Zapata', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Milan', value: 29, group: 11},
+    {id: 131, label: 'Cristiano Ronaldo (c)', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Real Madrid', value: 31, group: 8},
+    {id: 132, label: 'Cristopher Toselli', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Universidad Católica', value: 22, group: 18},
+    {id: 133, label: 'Daley Blind', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Ajax', value: 22, group: 22},
+    {id: 134, label: 'DaMarcus Beasley', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Puebla', value: 22, group: 26},
+    {id: 135, label: 'Dani Alves', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Barcelona', value: 36, group: 23},
+    {id: 136, label: 'Daniel Cambronero', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Herediano', value: 22, group: 29},
+    {id: 137, label: 'Daniel Davari', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Eintracht Braunschweig', value: 23, group: 1},
+    {id: 138, label: 'Daniel Opare', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Standard Liège', value: 24, group: 5},
+    {id: 139, label: 'Daniel Sturridge', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Liverpool', value: 27, group: 28},
+    {id: 140, label: 'Daniel Van Buyten', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 28},
+    {id: 141, label: 'Daniele De Rossi', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Roma', value: 26, group: 3},
+    {id: 142, label: 'Danijel Pranjic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Panathinaikos', value: 23, group: 25},
+    {id: 143, label: 'Danijel Subašic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'AS Monaco', value: 25, group: 25},
+    {id: 144, label: 'Danny Welbeck', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Manchester United', value: 32, group: 28},
+    {id: 145, label: 'Dante', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 23},
+    {id: 146, label: 'Dany Nounkeu', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Be?ikta?', value: 24, group: 17},
+    {id: 147, label: 'Darijo Srna (c)', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Shakhtar Donetsk', value: 23, group: 25},
+    {id: 148, label: 'Dario Vidošic', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Sion', value: 22, group: 12},
+    {id: 149, label: 'Daryl Janmaat', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Feyenoord', value: 22, group: 22},
+    {id: 150, label: 'David de Gea', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Manchester United', value: 34, group: 23},
+    {id: 151, label: 'David Luiz', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Chelsea', value: 30, group: 23},
+    {id: 152, label: 'David Myrie', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Herediano', value: 22, group: 29},
+    {id: 153, label: 'David Ospina', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Nice', value: 22, group: 11},
+    {id: 154, label: 'David Silva', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Manchester City', value: 31, group: 23},
+    {id: 155, label: 'David Villa', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 27, group: 23},
+    {id: 156, label: 'DeAndre Yedlin', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Seattle Sounders FC', value: 22, group: 26},
+    {id: 157, label: 'Dejan Lovren', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Southampton', value: 28, group: 25},
+    {id: 158, label: 'Denis Glushakov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Spartak Moscow', value: 22, group: 2},
+    {id: 159, label: 'Didier Drogba (c)', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Galatasaray', value: 26, group: 9},
+    {id: 160, label: 'Didier Ya Konan', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Hannover 96', value: 24, group: 9},
+    {id: 161, label: 'Didier Zokora', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Trabzonspor', value: 22, group: 9},
+    {id: 162, label: 'Diego Benaglio', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 27, group: 0},
+    {id: 163, label: 'Diego Calvo', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Vålerenga', value: 22, group: 29},
+    {id: 164, label: 'Diego Costa', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 27, group: 23},
+    {id: 165, label: 'Diego Forlán', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Cerezo Osaka', value: 24, group: 6},
+    {id: 166, label: 'Diego Godín', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 28, group: 6},
+    {id: 167, label: 'Diego Lugano (c)', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'West Bromwich Albion', value: 23, group: 6},
+    {id: 168, label: 'Diego Pérez', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Bologna', value: 24, group: 6},
+    {id: 169, label: 'Diego Reyes', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Porto', value: 29, group: 21},
+    {id: 170, label: 'Dimitris Salpingidis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'PAOK', value: 22, group: 15},
+    {id: 171, label: 'Dirk Kuyt', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Fenerbahçe', value: 26, group: 22},
+    {id: 172, label: 'Divock Origi', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Lille', value: 25, group: 28},
+    {id: 173, label: 'Djamel Mesbah', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Livorno', value: 22, group: 24},
+    {id: 174, label: 'Dmitri Kombarov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Spartak Moscow', value: 22, group: 2},
+    {id: 175, label: 'Domagoj Vida', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Dynamo Kyiv', value: 24, group: 25},
+    {id: 176, label: 'Donis Escober', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Olimpia', value: 22, group: 7},
+    {id: 177, label: 'Dries Mertens', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Napoli', value: 33, group: 28},
+    {id: 178, label: 'Edder Delgado', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Real España', value: 22, group: 7},
+    {id: 179, label: 'Eden Hazard', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Chelsea', value: 33, group: 28},
+    {id: 180, label: 'Éder', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Braga', value: 22, group: 8},
+    {id: 181, label: 'Éder Álvarez Balanta', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'River Plate', value: 22, group: 11},
+    {id: 182, label: 'Edgar Salli', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Lens', value: 22, group: 17},
+    {id: 183, label: 'Edin Džeko', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Manchester City', value: 31, group: 20},
+    {id: 184, label: 'Edin Višca', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + '?stanbul Ba?ak?ehir', value: 22, group: 20},
+    {id: 185, label: 'Edinson Cavani', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 31, group: 6},
+    {id: 186, label: 'Édison Méndez', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Santa Fe', value: 23, group: 4},
+    {id: 187, label: 'Eduardo da Silva', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Shakhtar Donetsk', value: 23, group: 25},
+    {id: 188, label: 'Eduardo dos Reis Carvalho', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Braga', value: 22, group: 8},
+    {id: 189, label: 'Eduardo Vargas', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Valencia', value: 26, group: 18},
+    {id: 190, label: 'Efe Ambrose', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Celtic', value: 25, group: 14},
+    {id: 191, label: 'Egidio Arévalo Ríos', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Morelia', value: 23, group: 6},
+    {id: 192, label: 'Ehsan Hajsafi', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Sepahan', value: 22, group: 1},
+    {id: 193, label: 'Eiji Kawashima', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Standard Liège', value: 24, group: 27},
+    {id: 194, label: 'Ejike Uzoenyi', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Enugu Rangers', value: 22, group: 14},
+    {id: 195, label: 'El Arbi Hillel Soudani', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Dinamo Zagreb', value: 23, group: 24},
+    {id: 196, label: 'Eliaquim Mangala', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Porto', value: 30, group: 16},
+    {id: 197, label: 'Emilio Izaguirre', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Celtic', value: 25, group: 7},
+    {id: 198, label: 'Emir Spahic (c)', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Bayer Leverkusen', value: 24, group: 20},
+    {id: 199, label: 'Emmanuel Agyemang-Badu', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Udinese', value: 23, group: 5},
+    {id: 200, label: 'Emmanuel Emenike', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Fenerbahçe', value: 26, group: 14},
+    {id: 201, label: 'Enner Valencia', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Pachuca', value: 22, group: 4},
+    {id: 202, label: 'Enzo Pérez', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Benfica', value: 25, group: 19},
+    {id: 203, label: 'Erik Durm', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Borussia Dortmund', value: 24, group: 13},
+    {id: 204, label: 'Ermin Bicakcic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Eintracht Braunschweig', value: 23, group: 20},
+    {id: 205, label: 'Essaïd Belkalem', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Watford', value: 23, group: 24},
+    {id: 206, label: 'Esteban Granados', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Herediano', value: 22, group: 29},
+    {id: 207, label: 'Esteban Paredes', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Colo-Colo', value: 22, group: 18},
+    {id: 208, label: 'Eugene Galekovic', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Adelaide United', value: 22, group: 12},
+    {id: 209, label: 'Eugenio Mena', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Santos', value: 22, group: 18},
+    {id: 210, label: 'Eyong Enoh', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Antalyaspor', value: 22, group: 17},
+    {id: 211, label: 'Ezequiel Garay', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Benfica', value: 25, group: 19},
+    {id: 212, label: 'Ezequiel Lavezzi', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 31, group: 19},
+    {id: 213, label: 'Fabian Johnson', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + '1899 Hoffenheim', value: 23, group: 26},
+    {id: 214, label: 'Fabián Orellana', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Celta Vigo', value: 23, group: 18},
+    {id: 215, label: 'Fabian Schär', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Basel', value: 25, group: 0},
+    {id: 216, label: 'Fábio Coentrão', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Real Madrid', value: 31, group: 8},
+    {id: 217, label: 'Fabrice Olinga', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Zulte Waregem', value: 23, group: 17},
+    {id: 218, label: 'Faouzi Ghoulam', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Napoli', value: 33, group: 24},
+    {id: 219, label: 'Faryd Mondragón', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Deportivo Cali', value: 22, group: 11},
+    {id: 220, label: 'Fatau Dauda', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Orlando Pirates', value: 22, group: 5},
+    {id: 221, label: 'Federico Fernández', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Napoli', value: 32, group: 19},
+    {id: 222, label: 'Felipe Caicedo', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Al-Jazira', value: 22, group: 4},
+    {id: 223, label: 'Felipe Gutiérrez', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Twente', value: 22, group: 18},
+    {id: 224, label: 'Fernandinho', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Manchester City', value: 31, group: 23},
+    {id: 225, label: 'Fernando Gago', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Boca Juniors', value: 22, group: 19},
+    {id: 226, label: 'Fernando Muslera', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Galatasaray', value: 26, group: 6},
+    {id: 227, label: 'Fernando Torres', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Chelsea', value: 32, group: 23},
+    {id: 228, label: 'Fidel Martínez', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Tijuana', value: 22, group: 4},
+    {id: 229, label: 'Francisco Javier Rodríguez', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'América', value: 22, group: 21},
+    {id: 230, label: 'Francisco Silva', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Osasuna', value: 22, group: 18},
+    {id: 231, label: 'Frank Lampard', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Chelsea', value: 32, group: 28},
+    {id: 232, label: 'Fraser Forster', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Celtic', value: 25, group: 28},
+    {id: 233, label: 'Fred', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Fluminense', value: 22, group: 23},
+    {id: 234, label: 'Fredy Guarín', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Internazionale', value: 29, group: 11},
+    {id: 235, label: 'Frickson Erazo', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Flamengo', value: 22, group: 4},
+    {id: 236, label: 'Gabriel Achilier', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Emelec', value: 22, group: 4},
+    {id: 237, label: 'Gabriel Paletta', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Parma', value: 24, group: 3},
+    {id: 238, label: 'Gary Cahill', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Chelsea', value: 32, group: 28},
+    {id: 239, label: 'Gary Medel', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Cardiff City', value: 23, group: 18},
+    {id: 240, label: 'Gastón Ramírez', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Southampton', value: 28, group: 6},
+    {id: 241, label: 'Gelson Fernandes', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'SC Freiburg', value: 24, group: 0},
+    {id: 242, label: 'Geoff Cameron', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Stoke City', value: 25, group: 26},
+    {id: 243, label: 'Georgi Shchennikov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'CSKA Moscow', value: 23, group: 2},
+    {id: 244, label: 'Georginio Wijnaldum', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'PSV', value: 24, group: 22},
+    {id: 245, label: 'Gerard Piqué', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 246, label: 'Gervinho', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Roma', value: 26, group: 9},
+    {id: 247, label: 'Ghasem Haddadifar', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Zob Ahan', value: 22, group: 1},
+    {id: 248, label: 'Giancarlo González', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Columbus Crew', value: 22, group: 29},
+    {id: 249, label: 'Gianluigi Buffon (c)', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Juventus', value: 28, group: 3},
+    {id: 250, label: 'Giannis Fetfatzidis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Genoa', value: 24, group: 15},
+    {id: 251, label: 'Giannis Maniatis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Olympiacos', value: 23, group: 15},
+    {id: 252, label: 'Giorgio Chiellini', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Juventus', value: 28, group: 3},
+    {id: 253, label: 'Giorgos Karagounis (c)', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Fulham', value: 23, group: 15},
+    {id: 254, label: 'Giorgos Samaras', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Celtic', value: 25, group: 15},
+    {id: 255, label: 'Giorgos Tzavellas', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'PAOK', value: 22, group: 15},
+    {id: 256, label: 'Giovani dos Santos', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Villarreal', value: 22, group: 21},
+    {id: 257, label: 'Giovanni Sio', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Basel', value: 26, group: 9},
+    {id: 258, label: 'Glen Johnson', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Liverpool', value: 27, group: 28},
+    {id: 259, label: 'Godfrey Oboabona', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Çaykur Rizespor', value: 23, group: 14},
+    {id: 260, label: 'Gökhan Inler (c)', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Napoli', value: 31, group: 0},
+    {id: 261, label: 'Gonzalo Higuaín', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Napoli', value: 32, group: 19},
+    {id: 262, label: 'Gonzalo Jara', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Nottingham Forest', value: 22, group: 18},
+    {id: 263, label: 'Gordon Schildenfeld', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Panathinaikos', value: 23, group: 25},
+    {id: 264, label: 'Gotoku Sakai', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'VfB Stuttgart', value: 25, group: 27},
+    {id: 265, label: 'Graham Zusi', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Sporting Kansas City', value: 22, group: 26},
+    {id: 266, label: 'Granit Xhaka', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Borussia Mönchengladbach', value: 23, group: 0},
+    {id: 267, label: 'Guillermo Ochoa', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Ajaccio', value: 23, group: 21},
+    {id: 268, label: 'Ha Dae-sung', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Beijing Guoan', value: 22, group: 10},
+    {id: 269, label: 'Han Kook-young', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Kashiwa Reysol', value: 22, group: 10},
+    {id: 270, label: 'Haris Medunjanin', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Gaziantepspor', value: 22, group: 20},
+    {id: 271, label: 'Haris Seferovic', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Real Sociedad', value: 25, group: 0},
+    {id: 272, label: 'Harrison Afful', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Espérance', value: 22, group: 5},
+    {id: 273, label: 'Hashem Beikzadeh', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Esteghlal', value: 22, group: 1},
+    {id: 274, label: 'Hassan Yebda', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Udinese', value: 23, group: 24},
+    {id: 275, label: 'Héctor Herrera', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Porto', value: 29, group: 21},
+    {id: 276, label: 'Héctor Moreno', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Espanyol', value: 23, group: 21},
+    {id: 277, label: 'Hélder Postiga', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 8},
+    {id: 278, label: 'Henri Bedimo', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Lyon', value: 22, group: 17},
+    {id: 279, label: 'Henrique', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Napoli', value: 33, group: 23},
+    {id: 280, label: 'Hernanes', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Internazionale', value: 29, group: 23},
+    {id: 281, label: 'Hiroki Sakai', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Hannover 96', value: 24, group: 27},
+    {id: 282, label: 'Hiroshi Kiyotake', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + '1. FC Nürnberg', value: 24, group: 27},
+    {id: 283, label: 'Hong Jeong-ho', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'FC Augsburg', value: 23, group: 10},
+    {id: 284, label: 'Hossein Mahini', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Persepolis', value: 22, group: 1},
+    {id: 285, label: 'Hotaru Yamaguchi', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Cerezo Osaka', value: 23, group: 27},
+    {id: 286, label: 'Hugo Almeida', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Be?ikta?', value: 24, group: 8},
+    {id: 287, label: 'Hugo Campagnaro', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Internazionale', value: 27, group: 19},
+    {id: 288, label: 'Hugo Lloris (c)', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Tottenham Hotspur', value: 27, group: 16},
+    {id: 289, label: 'Hulk', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 29, group: 23},
+    {id: 290, label: 'Hwang Seok-ho', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Sanfrecce Hiroshima', value: 23, group: 10},
+    {id: 291, label: 'Ignazio Abate', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Milan', value: 27, group: 3},
+    {id: 292, label: 'Igor Akinfeev', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'CSKA Moscow', value: 23, group: 2},
+    {id: 293, label: 'Igor Denisov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 23, group: 2},
+    {id: 294, label: 'Iker Casillas (c)', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Real Madrid', value: 31, group: 23},
+    {id: 295, label: 'Isaác Brizuela', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Toluca', value: 22, group: 21},
+    {id: 296, label: 'Islam Slimani', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Sporting CP', value: 25, group: 24},
+    {id: 297, label: 'Ismaël Diomandé', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Saint-Étienne', value: 23, group: 9},
+    {id: 298, label: 'Ivan Franjic', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Brisbane Roar', value: 22, group: 12},
+    {id: 299, label: 'Ivan Perišic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 27, group: 25},
+    {id: 300, label: 'Ivan Rakitic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Sevilla', value: 25, group: 25},
+    {id: 301, label: 'Ivica Olic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 27, group: 25},
+    {id: 302, label: 'Izet Hajrovic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Galatasaray', value: 26, group: 20},
+    {id: 303, label: 'Jack Wilshere', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Arsenal', value: 30, group: 28},
+    {id: 304, label: 'Jackson Martínez', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Porto', value: 29, group: 11},
+    {id: 305, label: 'Jaime Ayoví', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Tijuana', value: 22, group: 4},
+    {id: 306, label: 'Jalal Hosseini', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Persepolis', value: 22, group: 1},
+    {id: 307, label: 'James Holland', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Austria Wien', value: 22, group: 12},
+    {id: 308, label: 'James Milner', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Manchester City', value: 30, group: 28},
+    {id: 309, label: 'James Rodríguez', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'AS Monaco', value: 25, group: 11},
+    {id: 310, label: 'James Troisi', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Melbourne Victory', value: 22, group: 12},
+    {id: 311, label: 'Jan Vertonghen', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Tottenham Hotspur', value: 25, group: 28},
+    {id: 312, label: 'Jasmin Fejzic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'VfR Aalen', value: 22, group: 20},
+    {id: 313, label: 'Jason Davidson', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Heracles Almelo', value: 22, group: 12},
+    {id: 314, label: 'Jasper Cillessen', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Ajax', value: 22, group: 22},
+    {id: 315, label: 'Javad Nekounam (c)', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Al-Kuwait', value: 22, group: 1},
+    {id: 316, label: 'Javi Martínez', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 23},
+    {id: 317, label: 'Javier Aquino', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Villarreal', value: 22, group: 21},
+    {id: 318, label: 'Javier Hernández', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Manchester United', value: 35, group: 21},
+    {id: 319, label: 'Javier Mascherano', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Barcelona', value: 36, group: 19},
+    {id: 320, label: 'Jean Beausejour', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Wigan Athletic', value: 24, group: 18},
+    {id: 321, label: 'Jean Makoun', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Rennes', value: 23, group: 17},
+    {id: 322, label: 'Jean-Daniel Akpa-Akpro', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Toulouse', value: 23, group: 9},
+    {id: 323, label: 'Jefferson', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Botafogo', value: 22, group: 23},
+    {id: 324, label: 'Jefferson Montero', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Morelia', value: 23, group: 4},
+    {id: 325, label: 'Jeremain Lens', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Dynamo Kyiv', value: 25, group: 22},
+    {id: 326, label: 'Jermaine Jones', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Be?ikta?', value: 24, group: 26},
+    {id: 327, label: 'Jérôme Boateng', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 328, label: 'Jerry Bengtson', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'New England Revolution', value: 22, group: 7},
+    {id: 329, label: 'Jerry Palacios', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Alajuelense', value: 24, group: 7},
+    {id: 330, label: 'Ji Dong-won', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'FC Augsburg', value: 23, group: 10},
+    {id: 331, label: 'Jô', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Atlético Mineiro', value: 22, group: 23},
+    {id: 332, label: 'João Moutinho', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'AS Monaco', value: 25, group: 8},
+    {id: 333, label: 'João Pereira', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Valencia', value: 25, group: 8},
+    {id: 334, label: 'Joao Rojas', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Cruz Azul', value: 24, group: 4},
+    {id: 335, label: 'Joe Hart', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Manchester City', value: 30, group: 28},
+    {id: 336, label: 'Joel Campbell', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Olympiacos', value: 26, group: 29},
+    {id: 337, label: 'Joël Matip', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Schalke 04', value: 28, group: 17},
+    {id: 338, label: 'Joël Veltman', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Ajax', value: 22, group: 22},
+    {id: 339, label: 'Johan Djourou', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Hamburger SV', value: 23, group: 0},
+    {id: 340, label: 'John Boye', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Rennes', value: 23, group: 5},
+    {id: 341, label: 'John Brooks', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Hertha BSC', value: 23, group: 26},
+    {id: 342, label: 'John Obi Mikel', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Chelsea', value: 33, group: 14},
+    {id: 343, label: 'Johnny Acosta', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Alajuelense', value: 23, group: 29},
+    {id: 344, label: 'Johnny Herrera', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Universidad de Chile', value: 22, group: 18},
+    {id: 345, label: 'Jonathan de Guzmán', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Swansea City', value: 23, group: 22},
+    {id: 346, label: 'Jonathan Mensah', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Évian', value: 22, group: 5},
+    {id: 347, label: 'Jordan Ayew', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Sochaux', value: 22, group: 5},
+    {id: 348, label: 'Jordan Henderson', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Liverpool', value: 27, group: 28},
+    {id: 349, label: 'Jordi Alba', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 350, label: 'Jordy Clasie', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Feyenoord', value: 22, group: 22},
+    {id: 351, label: 'Jorge Claros', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Motagua', value: 22, group: 7},
+    {id: 352, label: 'Jorge Fucile', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Porto', value: 30, group: 6},
+    {id: 353, label: 'Jorge Guagua', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Emelec', value: 22, group: 4},
+    {id: 354, label: 'Jorge Valdivia', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Palmeiras', value: 22, group: 18},
+    {id: 355, label: 'José de Jesús Corona', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Cruz Azul', value: 23, group: 21},
+    {id: 356, label: 'José Holebas', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Olympiacos', value: 23, group: 15},
+    {id: 357, label: 'José Juan Vázquez', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'León', value: 22, group: 21},
+    {id: 358, label: 'José María Basanta', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Monterrey', value: 22, group: 19},
+    {id: 359, label: 'José María Giménez', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 28, group: 6},
+    {id: 360, label: 'José Miguel Cubero', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Herediano', value: 22, group: 29},
+    {id: 361, label: 'José Pedro Fuenzalida', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Colo-Colo', value: 22, group: 18},
+    {id: 362, label: 'José Rojas', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Universidad de Chile', value: 22, group: 18},
+    {id: 363, label: 'Joseph Yobo (c)', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Norwich City', value: 23, group: 14},
+    {id: 364, label: 'Josip Drmic', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + '1. FC Nürnberg', value: 25, group: 0},
+    {id: 365, label: 'Jozy Altidore', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Sunderland', value: 23, group: 26},
+    {id: 366, label: 'Juan Camilo Zúñiga', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Napoli', value: 33, group: 11},
+    {id: 367, label: 'Juan Carlos García', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Wigan Athletic', value: 23, group: 7},
+    {id: 368, label: 'Juan Carlos Paredes', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Barcelona', value: 35, group: 4},
+    {id: 369, label: 'Juan Fernando Quintero', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Porto', value: 29, group: 11},
+    {id: 370, label: 'Juan Guillermo Cuadrado', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Fiorentina', value: 24, group: 11},
+    {id: 371, label: 'Juan Mata', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Manchester United', value: 34, group: 23},
+    {id: 372, label: 'Juan Pablo Montes', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Motagua', value: 22, group: 7},
+    {id: 373, label: 'Juanfran', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 27, group: 23},
+    {id: 374, label: 'Julian Draxler', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Schalke 04', value: 27, group: 13},
+    {id: 375, label: 'Julian Green', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 26},
+    {id: 376, label: 'Júlio César', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Toronto FC', value: 23, group: 23},
+    {id: 377, label: 'Jung Sung-ryong', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Suwon Bluewings', value: 22, group: 10},
+    {id: 378, label: 'Júnior Díaz', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Mainz 05', value: 26, group: 29},
+    {id: 379, label: 'Juwon Oshaniwa', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Ashdod', value: 22, group: 14},
+    {id: 380, label: 'Karim Ansarifard', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Tractor Sazi', value: 22, group: 1},
+    {id: 381, label: 'Karim Benzema', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Real Madrid', value: 32, group: 16},
+    {id: 382, label: 'Keisuke Honda', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Milan', value: 29, group: 27},
+    {id: 383, label: 'Kenneth Omeruo', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Middlesbrough', value: 23, group: 14},
+    {id: 384, label: 'Kevin De Bruyne', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 28, group: 28},
+    {id: 385, label: 'Kevin Großkreutz', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Borussia Dortmund', value: 24, group: 13},
+    {id: 386, label: 'Kevin Mirallas', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Everton', value: 26, group: 28},
+    {id: 387, label: 'Kevin-Prince Boateng', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Schalke 04', value: 28, group: 5},
+    {id: 388, label: 'Keylor Navas', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Levante', value: 23, group: 29},
+    {id: 389, label: 'Khosro Heydari', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Esteghlal', value: 22, group: 1},
+    {id: 390, label: 'Ki Sung-yueng', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Sunderland', value: 23, group: 10},
+    {id: 391, label: 'Kim Bo-kyung', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Cardiff City', value: 23, group: 10},
+    {id: 392, label: 'Kim Chang-soo', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Kashiwa Reysol', value: 22, group: 10},
+    {id: 393, label: 'Kim Seung-gyu', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Ulsan Hyundai', value: 22, group: 10},
+    {id: 394, label: 'Kim Shin-wook', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Ulsan Hyundai', value: 22, group: 10},
+    {id: 395, label: 'Kim Young-gwon', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Guangzhou Evergrande', value: 22, group: 10},
+    {id: 396, label: 'Klaas-Jan Huntelaar', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Schalke 04', value: 28, group: 22},
+    {id: 397, label: 'Koke', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 27, group: 23},
+    {id: 398, label: 'Kolo Touré', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Liverpool', value: 31, group: 9},
+    {id: 399, label: 'Koo Ja-cheol (c)', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Mainz 05', value: 25, group: 10},
+    {id: 400, label: 'Kostas Katsouranis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'PAOK', value: 22, group: 15},
+    {id: 401, label: 'Kostas Manolas', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Olympiacos', value: 23, group: 15},
+    {id: 402, label: 'Kostas Mitroglou', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Fulham', value: 23, group: 15},
+    {id: 403, label: 'Kunle Odunlami', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Sunshine Stars', value: 22, group: 14},
+    {id: 404, label: 'Kwadwo Asamoah', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Juventus', value: 33, group: 5},
+    {id: 405, label: 'Kwak Tae-hwi', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Al-Hilal', value: 22, group: 10},
+    {id: 406, label: 'Kyle Beckerman', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Real Salt Lake', value: 22, group: 26},
+    {id: 407, label: 'Landry N Guémo', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Bordeaux', value: 22, group: 17},
+    {id: 408, label: 'Laurent Ciman', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Standard Liège', value: 24, group: 28},
+    {id: 409, label: 'Laurent Koscielny', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Arsenal', value: 29, group: 16},
+    {id: 410, label: 'Lazaros Christodoulopoulos', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Bologna', value: 23, group: 15},
+    {id: 411, label: 'Lee Bum-young', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Busan IPark', value: 22, group: 10},
+    {id: 412, label: 'Lee Chung-yong', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Bolton Wanderers', value: 22, group: 10},
+    {id: 413, label: 'Lee Keun-ho', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Sangju Sangmu', value: 22, group: 10},
+    {id: 414, label: 'Lee Yong', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Ulsan Hyundai', value: 22, group: 10},
+    {id: 415, label: 'Leighton Baines', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Everton', value: 25, group: 28},
+    {id: 416, label: 'Leonardo Bonucci', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Juventus', value: 28, group: 3},
+    {id: 417, label: 'Leroy Fer', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Norwich City', value: 23, group: 22},
+    {id: 418, label: 'Liassine Cadamuro-Bentaïba', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Mallorca', value: 22, group: 24},
+    {id: 419, label: 'Lionel Messi (c)', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Barcelona', value: 36, group: 19},
+    {id: 420, label: 'Loïc Feudjou', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Coton Sport', value: 22, group: 17},
+    {id: 421, label: 'Loïc Rémy', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Newcastle United', value: 25, group: 16},
+    {id: 422, label: 'Lorenzo Insigne', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Napoli', value: 33, group: 3},
+    {id: 423, label: 'Loukas Vyntra', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Levante', value: 23, group: 15},
+    {id: 424, label: 'Lucas Biglia', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 19},
+    {id: 425, label: 'Lucas Digne', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 29, group: 16},
+    {id: 426, label: 'Luis Garrido', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Olimpia', value: 22, group: 7},
+    {id: 427, label: 'Luis López', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Real España', value: 22, group: 7},
+    {id: 428, label: 'Luís Neto', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 29, group: 8},
+    {id: 429, label: 'Luis Saritama', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Barcelona', value: 35, group: 4},
+    {id: 430, label: 'Luis Suárez', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Liverpool', value: 31, group: 6},
+    {id: 431, label: 'Luiz Gustavo', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 28, group: 23},
+    {id: 432, label: 'Luka Modric', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Real Madrid', value: 33, group: 25},
+    {id: 433, label: 'Lukas Podolski', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Arsenal', value: 29, group: 13},
+    {id: 434, label: 'Luke Shaw', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Southampton', value: 26, group: 28},
+    {id: 435, label: 'Madjid Bougherra (c)', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Lekhwiya', value: 22, group: 24},
+    {id: 436, label: 'Maicon', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Roma', value: 26, group: 23},
+    {id: 437, label: 'Majeed Waris', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Valenciennes', value: 23, group: 5},
+    {id: 438, label: 'Makoto Hasebe (c)', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + '1. FC Nürnberg', value: 24, group: 27},
+    {id: 439, label: 'Maksim Kanunnikov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Rubin Kazan', value: 23, group: 2},
+    {id: 440, label: 'Mamadou Sakho', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Liverpool', value: 31, group: 16},
+    {id: 441, label: 'Manabu Saito', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Yokohama F. Marinos', value: 22, group: 27},
+    {id: 442, label: 'Manuel Neuer', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 443, label: 'Marcelo', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Real Madrid', value: 33, group: 23},
+    {id: 444, label: 'Marcelo Brozovic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Dinamo Zagreb', value: 23, group: 25},
+    {id: 445, label: 'Marcelo Díaz', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Basel', value: 27, group: 18},
+    {id: 446, label: 'Marco Fabián', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Cruz Azul', value: 23, group: 21},
+    {id: 447, label: 'Marco Parolo', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Parma', value: 24, group: 3},
+    {id: 448, label: 'Marco Ureña', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Kuban Krasnodar', value: 23, group: 29},
+    {id: 449, label: 'Marco Verratti', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 29, group: 3},
+    {id: 450, label: 'Marcos Rojo', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Sporting CP', value: 25, group: 19},
+    {id: 451, label: 'Mariano Andújar', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Catania', value: 22, group: 19},
+    {id: 452, label: 'Mario Balotelli', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Milan', value: 27, group: 3},
+    {id: 453, label: 'Mario Gavranovic', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Zürich', value: 22, group: 0},
+    {id: 454, label: 'Mario Götze', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 455, label: 'Mario Mandžukic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 25},
+    {id: 456, label: 'Mario Martínez', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Real España', value: 22, group: 7},
+    {id: 457, label: 'Mario Yepes (c)', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Atalanta', value: 23, group: 11},
+    {id: 458, label: 'Mark Bresciano', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Al-Gharafa', value: 22, group: 12},
+    {id: 459, label: 'Mark Milligan', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Melbourne Victory', value: 22, group: 12},
+    {id: 460, label: 'Marouane Fellaini', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Manchester United', value: 34, group: 28},
+    {id: 461, label: 'Martín Cáceres', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Juventus', value: 33, group: 6},
+    {id: 462, label: 'Martín Demichelis', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Manchester City', value: 29, group: 19},
+    {id: 463, label: 'Martín Silva', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Vasco da Gama', value: 22, group: 6},
+    {id: 464, label: 'Marvin Chávez', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Chivas USA', value: 23, group: 7},
+    {id: 465, label: 'Masahiko Inoha', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Jubilo Iwata', value: 22, group: 27},
+    {id: 466, label: 'Masato Morishige', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'F.C. Tokyo', value: 22, group: 27},
+    {id: 467, label: 'Masoud Shojaei', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Las Palmas', value: 22, group: 1},
+    {id: 468, label: 'Massimo Luongo', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Swindon Town', value: 22, group: 12},
+    {id: 469, label: 'Mateo Kovacic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Internazionale', value: 29, group: 25},
+    {id: 470, label: 'Mathew Leckie', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'FSV Frankfurt', value: 22, group: 12},
+    {id: 471, label: 'Mathew Ryan', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Club Brugge', value: 23, group: 12},
+    {id: 472, label: 'Mathieu Debuchy', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Newcastle United', value: 25, group: 16},
+    {id: 473, label: 'Mathieu Valbuena', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Marseille', value: 24, group: 16},
+    {id: 474, label: 'Mathis Bolly', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Fortuna Düsseldorf', value: 23, group: 9},
+    {id: 475, label: 'Mats Hummels', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Borussia Dortmund', value: 24, group: 13},
+    {id: 476, label: 'Matt Besler', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Sporting Kansas City', value: 22, group: 26},
+    {id: 477, label: 'Matt McKay', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Brisbane Roar', value: 22, group: 12},
+    {id: 478, label: 'Matteo Darmian', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Torino', value: 23, group: 3},
+    {id: 479, label: 'Matthew Špiranovic', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Western Sydney Wanderers', value: 22, group: 12},
+    {id: 480, label: 'Matthias Ginter', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'SC Freiburg', value: 25, group: 13},
+    {id: 481, label: 'Mattia De Sciglio', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Milan', value: 27, group: 3},
+    {id: 482, label: 'Mattia Perin', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Genoa', value: 24, group: 3},
+    {id: 483, label: 'Mauricio Isla', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Juventus', value: 32, group: 18},
+    {id: 484, label: 'Mauricio Pinilla', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Cagliari', value: 23, group: 18},
+    {id: 485, label: 'Max Gradel', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Saint-Étienne', value: 23, group: 9},
+    {id: 486, label: 'Maxi Pereira', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Benfica', value: 26, group: 6},
+    {id: 487, label: 'Maxi Rodríguez', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Newells Old Boys', value: 22, group: 19},
+    {id: 488, label: 'Maxim Choupo-Moting', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Mainz 05', value: 26, group: 17},
+    {id: 489, label: 'Máximo Banguera', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Barcelona', value: 35, group: 4},
+    {id: 490, label: 'Maxwell', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 30, group: 23},
+    {id: 491, label: 'Maya Yoshida', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Southampton', value: 28, group: 27},
+    {id: 492, label: 'Maynor Figueroa', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Hull City', value: 23, group: 7},
+    {id: 493, label: 'Medhi Lacen', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Getafe', value: 23, group: 24},
+    {id: 494, label: 'Mehdi Mostefa', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Ajaccio', value: 23, group: 24},
+    {id: 495, label: 'Mehrdad Pouladi', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Persepolis', value: 22, group: 1},
+    {id: 496, label: 'Memphis Depay', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'PSV', value: 24, group: 22},
+    {id: 497, label: 'Mensur Mujdža', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'SC Freiburg', value: 25, group: 20},
+    {id: 498, label: 'Mesut Özil', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Arsenal', value: 29, group: 13},
+    {id: 499, label: 'Michael Arroyo', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Atlante', value: 22, group: 4},
+    {id: 500, label: 'Michael Babatunde', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Volyn Lutsk', value: 22, group: 14},
+    {id: 501, label: 'Michael Barrantes', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Aalesund', value: 22, group: 29},
+    {id: 502, label: 'Michael Bradley', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Toronto FC', value: 23, group: 26},
+    {id: 503, label: 'Michael Essien', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Milan', value: 28, group: 5},
+    {id: 504, label: 'Michael Lang', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Grasshopper', value: 22, group: 0},
+    {id: 505, label: 'Michael Uchebo', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Cercle Brugge', value: 22, group: 14},
+    {id: 506, label: 'Michael Umaña', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Saprissa', value: 22, group: 29},
+    {id: 507, label: 'Michel Vorm', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Swansea City', value: 23, group: 22},
+    {id: 508, label: 'Mickaël Landreau', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Bastia', value: 22, group: 16},
+    {id: 509, label: 'Miguel Ángel Ponce', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Toluca', value: 22, group: 21},
+    {id: 510, label: 'Miguel Layún', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'América', value: 22, group: 21},
+    {id: 511, label: 'Miguel Veloso', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Dynamo Kyiv', value: 25, group: 8},
+    {id: 512, label: 'Miiko Albornoz', title: 'Country: ' + 'Chile' + '<br>' + 'Team: ' + 'Malmö FF', value: 22, group: 18},
+    {id: 513, label: 'Mikkel Diskerud', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Rosenborg', value: 23, group: 26},
+    {id: 514, label: 'Milan Badelj', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Hamburger SV', value: 23, group: 25},
+    {id: 515, label: 'Mile Jedinak (c)', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Crystal Palace', value: 22, group: 12},
+    {id: 516, label: 'Miralem Pjanic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Roma', value: 26, group: 20},
+    {id: 517, label: 'Miroslav Klose', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 13},
+    {id: 518, label: 'Mitchell Langerak', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Borussia Dortmund', value: 27, group: 12},
+    {id: 519, label: 'Mohamed Zemmamouche', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'USM Alger', value: 22, group: 24},
+    {id: 520, label: 'Mohammed Rabiu', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Kuban Krasnodar', value: 23, group: 5},
+    {id: 521, label: 'Morgan Schneiderlin', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Southampton', value: 28, group: 16},
+    {id: 522, label: 'Mousa Dembélé', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Tottenham Hotspur', value: 25, group: 28},
+    {id: 523, label: 'Moussa Sissoko', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Newcastle United', value: 25, group: 16},
+    {id: 524, label: 'Muhamed Bešic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Ferencváros', value: 22, group: 20},
+    {id: 525, label: 'Nabil Bentaleb', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Tottenham Hotspur', value: 27, group: 24},
+    {id: 526, label: 'Nabil Ghilas', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Porto', value: 30, group: 24},
+    {id: 527, label: 'Nacer Chadli', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Tottenham Hotspur', value: 25, group: 28},
+    {id: 528, label: 'Nani', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Manchester United', value: 35, group: 8},
+    {id: 529, label: 'Neymar', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Barcelona', value: 36, group: 23},
+    {id: 530, label: 'Nick Rimando', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Real Salt Lake', value: 22, group: 26},
+    {id: 531, label: 'Nicolás Lodeiro', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Corinthians', value: 22, group: 6},
+    {id: 532, label: 'Nicolas Lombaerts', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 28, group: 28},
+    {id: 533, label: 'Nicolas N Koulou', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Marseille', value: 24, group: 17},
+    {id: 534, label: 'Nigel de Jong', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Milan', value: 29, group: 22},
+    {id: 535, label: 'Nikica Jelavic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Hull City', value: 23, group: 25},
+    {id: 536, label: 'Noel Valladares (c)', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Olimpia', value: 22, group: 7},
+    {id: 537, label: 'Ogenyi Onazi', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 14},
+    {id: 538, label: 'Ognjen Vranješ', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Elaz??spor', value: 22, group: 20},
+    {id: 539, label: 'Ognjen Vukojevic', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Dynamo Kyiv', value: 24, group: 25},
+    {id: 540, label: 'Oleg Shatov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 26, group: 2},
+    {id: 541, label: 'Oliver Bozanic', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Luzern', value: 22, group: 12},
+    {id: 542, label: 'Oliver Zelenika', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Lokomotiva', value: 22, group: 25},
+    {id: 543, label: 'Olivier Giroud', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Arsenal', value: 29, group: 16},
+    {id: 544, label: 'Omar Gonzalez', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Los Angeles Galaxy', value: 22, group: 26},
+    {id: 545, label: 'Orestis Karnezis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Granada', value: 24, group: 15},
+    {id: 546, label: 'Oribe Peralta', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'Santos Laguna', value: 22, group: 21},
+    {id: 547, label: 'Oscar', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Chelsea', value: 30, group: 23},
+    {id: 548, label: 'Óscar Bagüí', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Emelec', value: 22, group: 4},
+    {id: 549, label: 'Óscar Boniek García', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Houston Dynamo', value: 23, group: 7},
+    {id: 550, label: 'Óscar Duarte', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Club Brugge', value: 23, group: 29},
+    {id: 551, label: 'Osman Chávez', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Qingdao Jonoon', value: 22, group: 7},
+    {id: 552, label: 'Oswaldo Minda', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Chivas USA', value: 23, group: 4},
+    {id: 553, label: 'Ousmane Viera', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Çaykur Rizespor', value: 23, group: 9},
+    {id: 554, label: 'Pablo Armero', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'West Ham United', value: 22, group: 11},
+    {id: 555, label: 'Pablo Zabaleta', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Manchester City', value: 29, group: 19},
+    {id: 556, label: 'Panagiotis Glykos', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'PAOK', value: 22, group: 15},
+    {id: 557, label: 'Panagiotis Kone', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Bologna', value: 23, group: 15},
+    {id: 558, label: 'Panagiotis Tachtsidis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Torino', value: 25, group: 15},
+    {id: 559, label: 'Park Chu-young', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Watford', value: 23, group: 10},
+    {id: 560, label: 'Park Jong-woo', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Guangzhou R&F', value: 22, group: 10},
+    {id: 561, label: 'Park Joo-ho', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Mainz 05', value: 25, group: 10},
+    {id: 562, label: 'Patrice Evra', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Manchester United', value: 35, group: 16},
+    {id: 563, label: 'Patrick Pemberton', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Alajuelense', value: 23, group: 29},
+    {id: 564, label: 'Paul Aguilar', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'América', value: 22, group: 21},
+    {id: 565, label: 'Paul Pogba', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Juventus', value: 33, group: 16},
+    {id: 566, label: 'Paul Verhaegh', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'FC Augsburg', value: 24, group: 22},
+    {id: 567, label: 'Paulinho', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Tottenham Hotspur', value: 27, group: 23},
+    {id: 568, label: 'Pavel Mogilevets', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Rubin Kazan', value: 23, group: 2},
+    {id: 569, label: 'Pedro', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 570, label: 'Pejman Montazeri', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Umm Salal', value: 22, group: 1},
+    {id: 571, label: 'Pepe', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Real Madrid', value: 31, group: 8},
+    {id: 572, label: 'Pepe Reina', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Napoli', value: 32, group: 23},
+    {id: 573, label: 'Per Mertesacker', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Arsenal', value: 29, group: 13},
+    {id: 574, label: 'Peter Odemwingie', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Stoke City', value: 25, group: 14},
+    {id: 575, label: 'Phil Jagielka', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Everton', value: 25, group: 28},
+    {id: 576, label: 'Phil Jones', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Manchester United', value: 32, group: 28},
+    {id: 577, label: 'Philipp Lahm (c)', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 578, label: 'Philippe Senderos', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Valencia', value: 26, group: 0},
+    {id: 579, label: 'Pierre Webó', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Fenerbahçe', value: 26, group: 17},
+    {id: 580, label: 'Rafa Silva', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Braga', value: 22, group: 8},
+    {id: 581, label: 'Rafael Márquez (c)', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'León', value: 22, group: 21},
+    {id: 582, label: 'Rafik Halliche', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Académica', value: 22, group: 24},
+    {id: 583, label: 'Raheem Sterling', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Liverpool', value: 27, group: 28},
+    {id: 584, label: 'Rahman Ahmadi', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Sepahan', value: 22, group: 1},
+    {id: 585, label: 'Raïs M Bolhi', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'CSKA Sofia', value: 22, group: 24},
+    {id: 586, label: 'Ramires', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Chelsea', value: 30, group: 23},
+    {id: 587, label: 'Ramon Azeez', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Almería', value: 22, group: 14},
+    {id: 588, label: 'Randall Brenes', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Cartaginés', value: 22, group: 29},
+    {id: 589, label: 'Raphaël Varane', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Real Madrid', value: 32, group: 16},
+    {id: 590, label: 'Rashid Sumaila', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Mamelodi Sundowns', value: 22, group: 5},
+    {id: 591, label: 'Raúl Albiol', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Napoli', value: 32, group: 23},
+    {id: 592, label: 'Raúl Jiménez', title: 'Country: ' + 'Mexico' + '<br>' + 'Team: ' + 'América', value: 22, group: 21},
+    {id: 593, label: 'Raul Meireles', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Fenerbahçe', value: 25, group: 8},
+    {id: 594, label: 'Rémy Cabella', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Montpellier', value: 22, group: 16},
+    {id: 595, label: 'Renato Ibarra', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Vitesse', value: 23, group: 4},
+    {id: 596, label: 'Reto Ziegler', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Sassuolo', value: 22, group: 0},
+    {id: 597, label: 'Reuben Gabriel', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Waasland-Beveren', value: 22, group: 14},
+    {id: 598, label: 'Reza Ghoochannejhad', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Charlton Athletic', value: 22, group: 1},
+    {id: 599, label: 'Reza Haghighi', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Persepolis', value: 22, group: 1},
+    {id: 600, label: 'Ricardo Álvarez', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Internazionale', value: 27, group: 19},
+    {id: 601, label: 'Ricardo Costa', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Valencia', value: 25, group: 8},
+    {id: 602, label: 'Ricardo Rodríguez', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 27, group: 0},
+    {id: 603, label: 'Rickie Lambert', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Southampton', value: 26, group: 28},
+    {id: 604, label: 'Rio Mavuba', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Lille', value: 25, group: 16},
+    {id: 605, label: 'Riyad Mahrez', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Leicester City', value: 22, group: 24},
+    {id: 606, label: 'Robin van Persie (c)', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Manchester United', value: 35, group: 22},
+    {id: 607, label: 'Rodrigo Muñoz', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Libertad', value: 22, group: 6},
+    {id: 608, label: 'Rodrigo Palacio', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Internazionale', value: 27, group: 19},
+    {id: 609, label: 'Roger Espinoza', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Wigan Athletic', value: 23, group: 7},
+    {id: 610, label: 'Roman Bürki', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Grasshopper', value: 22, group: 0},
+    {id: 611, label: 'Roman Weidenfeller', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Borussia Dortmund', value: 24, group: 13},
+    {id: 612, label: 'Romelu Lukaku', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Everton', value: 26, group: 28},
+    {id: 613, label: 'Ron Vlaar', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Aston Villa', value: 23, group: 22},
+    {id: 614, label: 'Ron-Robert Zieler', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Hannover 96', value: 24, group: 13},
+    {id: 615, label: 'Rony Martínez', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Real Sociedad', value: 25, group: 7},
+    {id: 616, label: 'Ross Barkley', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Everton', value: 25, group: 28},
+    {id: 617, label: 'Roy Miller', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'New York Red Bulls', value: 23, group: 29},
+    {id: 618, label: 'Rúben Amorim', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Benfica', value: 25, group: 8},
+    {id: 619, label: 'Rui Patrício', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Sporting CP', value: 24, group: 8},
+    {id: 620, label: 'Ryan McGowan', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Shandong Luneng Taishan', value: 22, group: 12},
+    {id: 621, label: 'Salomon Kalou', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Lille', value: 25, group: 9},
+    {id: 622, label: 'Salvatore Sirigu', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 29, group: 3},
+    {id: 623, label: 'Sami Khedira', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Real Madrid', value: 33, group: 13},
+    {id: 624, label: 'Sammir', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Getafe', value: 23, group: 25},
+    {id: 625, label: 'Sammy Bossut', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Zulte Waregem', value: 23, group: 28},
+    {id: 626, label: 'Sammy N Djock', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Fethiyespor', value: 22, group: 17},
+    {id: 627, label: 'Samuel Etoo (c)', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Chelsea', value: 33, group: 17},
+    {id: 628, label: 'Samuel Inkoom', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Platanias', value: 22, group: 5},
+    {id: 629, label: 'Santi Cazorla', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Arsenal', value: 31, group: 23},
+    {id: 630, label: 'Santiago Arias', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'PSV', value: 25, group: 11},
+    {id: 631, label: 'Saphir Taïder', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Internazionale', value: 29, group: 24},
+    {id: 632, label: 'Sayouba Mandé', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Stabæk', value: 22, group: 9},
+    {id: 633, label: 'Sead Kolašinac', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Schalke 04', value: 28, group: 20},
+    {id: 634, label: 'Sebastián Coates', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Nacional', value: 22, group: 6},
+    {id: 635, label: 'Sejad Salihovic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + '1899 Hoffenheim', value: 23, group: 20},
+    {id: 636, label: 'Senad Lulic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Lazio', value: 28, group: 20},
+    {id: 637, label: 'Senijad Ibricic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Kayseri Erciyesspor', value: 22, group: 20},
+    {id: 638, label: 'Serey Die', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Basel', value: 26, group: 9},
+    {id: 639, label: 'Serge Aurier', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Toulouse', value: 23, group: 9},
+    {id: 640, label: 'Sergei Ignashevich', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'CSKA Moscow', value: 23, group: 2},
+    {id: 641, label: 'Sergey Ryzhikov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Rubin Kazan', value: 23, group: 2},
+    {id: 642, label: 'Sergio Agüero', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'Manchester City', value: 29, group: 19},
+    {id: 643, label: 'Sergio Busquets', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 644, label: 'Sergio Ramos', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Real Madrid', value: 31, group: 23},
+    {id: 645, label: 'Sergio Romero', title: 'Country: ' + 'Argentina' + '<br>' + 'Team: ' + 'AS Monaco', value: 25, group: 19},
+    {id: 646, label: 'Shinji Kagawa', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Manchester United', value: 35, group: 27},
+    {id: 647, label: 'Shinji Okazaki', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Mainz 05', value: 26, group: 27},
+    {id: 648, label: 'Shkodran Mustafi', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Sampdoria', value: 22, group: 13},
+    {id: 649, label: 'Shola Ameobi', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Newcastle United', value: 27, group: 14},
+    {id: 650, label: 'Shuichi Gonda', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'F.C. Tokyo', value: 22, group: 27},
+    {id: 651, label: 'Shusaku Nishikawa', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Urawa Red Diamonds', value: 22, group: 27},
+    {id: 652, label: 'Silvestre Varela', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Porto', value: 30, group: 8},
+    {id: 653, label: 'Šime Vrsaljko', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Genoa', value: 24, group: 25},
+    {id: 654, label: 'Simon Mignolet', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Liverpool', value: 31, group: 28},
+    {id: 655, label: 'Sofiane Feghouli', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Valencia', value: 26, group: 24},
+    {id: 656, label: 'Sokratis Papastathopoulos', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Borussia Dortmund', value: 27, group: 15},
+    {id: 657, label: 'Sol Bamba', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Trabzonspor', value: 22, group: 9},
+    {id: 658, label: 'Son Heung-min', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Bayer Leverkusen', value: 24, group: 10},
+    {id: 659, label: 'Stefan de Vrij', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Feyenoord', value: 22, group: 22},
+    {id: 660, label: 'Stefanos Kapino', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Panathinaikos', value: 24, group: 15},
+    {id: 661, label: 'Stephan Lichtsteiner', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Juventus', value: 33, group: 0},
+    {id: 662, label: 'Stéphane Mbia', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Sevilla', value: 25, group: 17},
+    {id: 663, label: 'Stéphane Ruffier', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Saint-Étienne', value: 24, group: 16},
+    {id: 664, label: 'Stephen Adams', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Aduana Stars', value: 22, group: 5},
+    {id: 665, label: 'Steve von Bergen', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Young Boys', value: 22, group: 0},
+    {id: 666, label: 'Steven Beitashour', title: 'Country: ' + 'Iran' + '<br>' + 'Team: ' + 'Vancouver Whitecaps FC', value: 22, group: 1},
+    {id: 667, label: 'Steven Defour', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Porto', value: 30, group: 28},
+    {id: 668, label: 'Steven Gerrard (c)', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Liverpool', value: 27, group: 28},
+    {id: 669, label: 'Stipe Pletikosa', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Rostov', value: 22, group: 25},
+    {id: 670, label: 'Sulley Muntari', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Milan', value: 28, group: 5},
+    {id: 671, label: 'Sylvain Gbohouo', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Séwé Sport', value: 22, group: 9},
+    {id: 672, label: 'Teófilo Gutiérrez', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'River Plate', value: 22, group: 11},
+    {id: 673, label: 'Terence Kongolo', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Feyenoord', value: 22, group: 22},
+    {id: 674, label: 'Theofanis Gekas', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Konyaspor', value: 23, group: 15},
+    {id: 675, label: 'Thiago Motta', title: 'Country: ' + 'Italy' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 29, group: 3},
+    {id: 676, label: 'Thiago Silva (c)', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 30, group: 23},
+    {id: 677, label: 'Thibaut Courtois', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 29, group: 28},
+    {id: 678, label: 'Thomas Müller', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 679, label: 'Thomas Vermaelen', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Arsenal', value: 31, group: 28},
+    {id: 680, label: 'Tim Cahill', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'New York Red Bulls', value: 23, group: 12},
+    {id: 681, label: 'Tim Howard', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + 'Everton', value: 27, group: 26},
+    {id: 682, label: 'Tim Krul', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Newcastle United', value: 27, group: 22},
+    {id: 683, label: 'Timothy Chandler', title: 'Country: ' + 'United States' + '<br>' + 'Team: ' + '1. FC Nürnberg', value: 25, group: 26},
+    {id: 684, label: 'Tino-Sven Sušic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Hajduk Split', value: 22, group: 20},
+    {id: 685, label: 'Toby Alderweireld', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Atlético Madrid', value: 29, group: 28},
+    {id: 686, label: 'Tommy Oar', title: 'Country: ' + 'Australia' + '<br>' + 'Team: ' + 'Utrecht', value: 22, group: 12},
+    {id: 687, label: 'Toni Kroos', title: 'Country: ' + 'Germany' + '<br>' + 'Team: ' + 'Bayern Munich', value: 29, group: 13},
+    {id: 688, label: 'Toni Šunjic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Zorya Luhansk', value: 22, group: 20},
+    {id: 689, label: 'Toshihiro Aoyama', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Sanfrecce Hiroshima', value: 23, group: 27},
+    {id: 690, label: 'Tranquillo Barnetta', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Eintracht Frankfurt', value: 23, group: 0},
+    {id: 691, label: 'Uche Nwofor', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Heerenveen', value: 22, group: 14},
+    {id: 692, label: 'Valentin Stocker', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Basel', value: 25, group: 0},
+    {id: 693, label: 'Valon Behrami', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Napoli', value: 31, group: 0},
+    {id: 694, label: 'Vangelis Moras', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Verona', value: 22, group: 15},
+    {id: 695, label: 'Vasili Berezutski (c)', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'CSKA Moscow', value: 23, group: 2},
+    {id: 696, label: 'Vasilis Torosidis', title: 'Country: ' + 'Greece' + '<br>' + 'Team: ' + 'Roma', value: 26, group: 15},
+    {id: 697, label: 'Vedad Ibiševic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'VfB Stuttgart', value: 25, group: 20},
+    {id: 698, label: 'Vedran Corluka', title: 'Country: ' + 'Croatia' + '<br>' + 'Team: ' + 'Lokomotiv Moscow', value: 23, group: 25},
+    {id: 699, label: 'Victor', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Atlético Mineiro', value: 22, group: 23},
+    {id: 700, label: 'Víctor Bernárdez', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'San Jose Earthquakes', value: 23, group: 7},
+    {id: 701, label: 'Víctor Ibarbo', title: 'Country: ' + 'Colombia' + '<br>' + 'Team: ' + 'Cagliari', value: 23, group: 11},
+    {id: 702, label: 'Victor Moses', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Liverpool', value: 31, group: 14},
+    {id: 703, label: 'Vieirinha', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'VfL Wolfsburg', value: 28, group: 8},
+    {id: 704, label: 'Viktor Fayzulin', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 26, group: 2},
+    {id: 705, label: 'Vincent Aboubakar', title: 'Country: ' + 'Cameroon' + '<br>' + 'Team: ' + 'Lorient', value: 22, group: 17},
+    {id: 706, label: 'Vincent Enyeama', title: 'Country: ' + 'Nigeria' + '<br>' + 'Team: ' + 'Lille', value: 25, group: 14},
+    {id: 707, label: 'Vincent Kompany (c)', title: 'Country: ' + 'Belgium' + '<br>' + 'Team: ' + 'Manchester City', value: 31, group: 28},
+    {id: 708, label: 'Vladimir Granat', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 23, group: 2},
+    {id: 709, label: 'Wakaso Mubarak', title: 'Country: ' + 'Ghana' + '<br>' + 'Team: ' + 'Rubin Kazan', value: 25, group: 5},
+    {id: 710, label: 'Walter Ayoví', title: 'Country: ' + 'Ecuador' + '<br>' + 'Team: ' + 'Pachuca', value: 22, group: 4},
+    {id: 711, label: 'Walter Gargano', title: 'Country: ' + 'Uruguay' + '<br>' + 'Team: ' + 'Parma', value: 26, group: 6},
+    {id: 712, label: 'Waylon Francis', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Columbus Crew', value: 22, group: 29},
+    {id: 713, label: 'Wayne Rooney', title: 'Country: ' + 'England' + '<br>' + 'Team: ' + 'Manchester United', value: 32, group: 28},
+    {id: 714, label: 'Wesley Sneijder', title: 'Country: ' + 'Netherlands' + '<br>' + 'Team: ' + 'Galatasaray', value: 26, group: 22},
+    {id: 715, label: 'Wilfried Bony', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Swansea City', value: 24, group: 9},
+    {id: 716, label: 'William Carvalho', title: 'Country: ' + 'Portugal' + '<br>' + 'Team: ' + 'Sporting CP', value: 24, group: 8},
+    {id: 717, label: 'Willian', title: 'Country: ' + 'Brazil' + '<br>' + 'Team: ' + 'Chelsea', value: 30, group: 23},
+    {id: 718, label: 'Wilson Palacios', title: 'Country: ' + 'Honduras' + '<br>' + 'Team: ' + 'Stoke City', value: 25, group: 7},
+    {id: 719, label: 'Xabi Alonso', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Real Madrid', value: 31, group: 23},
+    {id: 720, label: 'Xavi', title: 'Country: ' + 'Spain' + '<br>' + 'Team: ' + 'Barcelona', value: 31, group: 23},
+    {id: 721, label: 'Xherdan Shaqiri', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Bayern Munich', value: 35, group: 0},
+    {id: 722, label: 'Yacine Brahimi', title: 'Country: ' + 'Algeria' + '<br>' + 'Team: ' + 'Granada', value: 24, group: 24},
+    {id: 723, label: 'Yann Sommer', title: 'Country: ' + 'Switzerland' + '<br>' + 'Team: ' + 'Basel', value: 25, group: 0},
+    {id: 724, label: 'Yasuhito Endo', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Gamba Osaka', value: 22, group: 27},
+    {id: 725, label: 'Yasuyuki Konno', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Gamba Osaka', value: 22, group: 27},
+    {id: 726, label: 'Yaya Touré', title: 'Country: ' + 'Ivory Coast' + '<br>' + 'Team: ' + 'Manchester City', value: 31, group: 9},
+    {id: 727, label: 'Yeltsin Tejeda', title: 'Country: ' + 'Costa Rica' + '<br>' + 'Team: ' + 'Saprissa', value: 22, group: 29},
+    {id: 728, label: 'Yohan Cabaye', title: 'Country: ' + 'France' + '<br>' + 'Team: ' + 'Paris Saint-Germain', value: 29, group: 16},
+    {id: 729, label: 'Yoichiro Kakitani', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Cerezo Osaka', value: 23, group: 27},
+    {id: 730, label: 'Yoshito Okubo', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Kawasaki Frontale', value: 22, group: 27},
+    {id: 731, label: 'Yun Suk-young', title: 'Country: ' + 'South Korea' + '<br>' + 'Team: ' + 'Queens Park Rangers', value: 23, group: 10},
+    {id: 732, label: 'Yuri Lodygin', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Zenit Saint Petersburg', value: 26, group: 2},
+    {id: 733, label: 'Yuri Zhirkov', title: 'Country: ' + 'Russia' + '<br>' + 'Team: ' + 'Dynamo Moscow', value: 23, group: 2},
+    {id: 734, label: 'Yuto Nagatomo', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + 'Internazionale', value: 29, group: 27},
+    {id: 735, label: 'Yuya Osako', title: 'Country: ' + 'Japan' + '<br>' + 'Team: ' + '1860 München', value: 22, group: 27},
+    {id: 736, label: 'Zvjezdan Misimovic', title: 'Country: ' + 'Bosnia and Herzegovina' + '<br>' + 'Team: ' + 'Guizhou Renhe', value: 22, group: 20}
+
+      ];
+      // create an array with edges
+      var edges = [
+    {from: 1, to: 15},
+    {from: 1, to: 97},
+    {from: 1, to: 108},
+    {from: 1, to: 173},
+    {from: 1, to: 195},
+    {from: 1, to: 205},
+    {from: 1, to: 218},
+    {from: 1, to: 274},
+    {from: 1, to: 296},
+    {from: 1, to: 418},
+    {from: 1, to: 435},
+    {from: 1, to: 493},
+    {from: 1, to: 494},
+    {from: 1, to: 519},
+    {from: 1, to: 525},
+    {from: 1, to: 526},
+    {from: 1, to: 582},
+    {from: 1, to: 585},
+    {from: 1, to: 605},
+    {from: 1, to: 631},
+    {from: 1, to: 655},
+    {from: 1, to: 722},
+    {from: 2, to: 10},
+    {from: 2, to: 31},
+    {from: 2, to: 96},
+    {from: 2, to: 99},
+    {from: 2, to: 100},
+    {from: 2, to: 105},
+    {from: 2, to: 106},
+    {from: 2, to: 130},
+    {from: 2, to: 153},
+    {from: 2, to: 181},
+    {from: 2, to: 219},
+    {from: 2, to: 234},
+    {from: 2, to: 304},
+    {from: 2, to: 309},
+    {from: 2, to: 322},
+    {from: 2, to: 366},
+    {from: 2, to: 369},
+    {from: 2, to: 370},
+    {from: 2, to: 457},
+    {from: 2, to: 554},
+    {from: 2, to: 630},
+    {from: 2, to: 639},
+    {from: 2, to: 672},
+    {from: 2, to: 701},
+    {from: 3, to: 38},
+    {from: 3, to: 39},
+    {from: 3, to: 121},
+    {from: 3, to: 129},
+    {from: 3, to: 165},
+    {from: 3, to: 166},
+    {from: 3, to: 167},
+    {from: 3, to: 168},
+    {from: 3, to: 185},
+    {from: 3, to: 191},
+    {from: 3, to: 226},
+    {from: 3, to: 240},
+    {from: 3, to: 352},
+    {from: 3, to: 359},
+    {from: 3, to: 430},
+    {from: 3, to: 461},
+    {from: 3, to: 463},
+    {from: 3, to: 486},
+    {from: 3, to: 531},
+    {from: 3, to: 607},
+    {from: 3, to: 634},
+    {from: 3, to: 711},
+    {from: 4, to: 11},
+    {from: 4, to: 18},
+    {from: 4, to: 43},
+    {from: 4, to: 65},
+    {from: 4, to: 118},
+    {from: 4, to: 138},
+    {from: 4, to: 199},
+    {from: 4, to: 220},
+    {from: 4, to: 272},
+    {from: 4, to: 340},
+    {from: 4, to: 346},
+    {from: 4, to: 347},
+    {from: 4, to: 387},
+    {from: 4, to: 404},
+    {from: 4, to: 437},
+    {from: 4, to: 503},
+    {from: 4, to: 520},
+    {from: 4, to: 590},
+    {from: 4, to: 628},
+    {from: 4, to: 664},
+    {from: 4, to: 670},
+    {from: 4, to: 709},
+    {from: 5, to: 27},
+    {from: 5, to: 80},
+    {from: 5, to: 116},
+    {from: 5, to: 139},
+    {from: 5, to: 144},
+    {from: 5, to: 157},
+    {from: 5, to: 231},
+    {from: 5, to: 232},
+    {from: 5, to: 238},
+    {from: 5, to: 240},
+    {from: 5, to: 258},
+    {from: 5, to: 303},
+    {from: 5, to: 308},
+    {from: 5, to: 335},
+    {from: 5, to: 348},
+    {from: 5, to: 415},
+    {from: 5, to: 434},
+    {from: 5, to: 491},
+    {from: 5, to: 521},
+    {from: 5, to: 575},
+    {from: 5, to: 576},
+    {from: 5, to: 583},
+    {from: 5, to: 603},
+    {from: 5, to: 616},
+    {from: 5, to: 668},
+    {from: 5, to: 713},
+    {from: 6, to: 29},
+    {from: 6, to: 77},
+    {from: 6, to: 81},
+    {from: 6, to: 148},
+    {from: 6, to: 208},
+    {from: 6, to: 298},
+    {from: 6, to: 307},
+    {from: 6, to: 310},
+    {from: 6, to: 313},
+    {from: 6, to: 458},
+    {from: 6, to: 459},
+    {from: 6, to: 468},
+    {from: 6, to: 470},
+    {from: 6, to: 471},
+    {from: 6, to: 477},
+    {from: 6, to: 479},
+    {from: 6, to: 515},
+    {from: 6, to: 518},
+    {from: 6, to: 541},
+    {from: 6, to: 620},
+    {from: 6, to: 680},
+    {from: 6, to: 686},
+    {from: 7, to: 88},
+    {from: 7, to: 162},
+    {from: 7, to: 215},
+    {from: 7, to: 241},
+    {from: 7, to: 260},
+    {from: 7, to: 266},
+    {from: 7, to: 271},
+    {from: 7, to: 339},
+    {from: 7, to: 364},
+    {from: 7, to: 453},
+    {from: 7, to: 480},
+    {from: 7, to: 497},
+    {from: 7, to: 504},
+    {from: 7, to: 578},
+    {from: 7, to: 596},
+    {from: 7, to: 602},
+    {from: 7, to: 610},
+    {from: 7, to: 661},
+    {from: 7, to: 665},
+    {from: 7, to: 690},
+    {from: 7, to: 692},
+    {from: 7, to: 693},
+    {from: 7, to: 721},
+    {from: 7, to: 723},
+    {from: 8, to: 56},
+    {from: 8, to: 60},
+    {from: 8, to: 74},
+    {from: 8, to: 116},
+    {from: 8, to: 140},
+    {from: 8, to: 144},
+    {from: 8, to: 150},
+    {from: 8, to: 172},
+    {from: 8, to: 177},
+    {from: 8, to: 179},
+    {from: 8, to: 311},
+    {from: 8, to: 318},
+    {from: 8, to: 371},
+    {from: 8, to: 384},
+    {from: 8, to: 386},
+    {from: 8, to: 408},
+    {from: 8, to: 460},
+    {from: 8, to: 522},
+    {from: 8, to: 527},
+    {from: 8, to: 528},
+    {from: 8, to: 532},
+    {from: 8, to: 562},
+    {from: 8, to: 576},
+    {from: 8, to: 606},
+    {from: 8, to: 612},
+    {from: 8, to: 625},
+    {from: 8, to: 646},
+    {from: 8, to: 654},
+    {from: 8, to: 667},
+    {from: 8, to: 677},
+    {from: 8, to: 679},
+    {from: 8, to: 685},
+    {from: 8, to: 707},
+    {from: 8, to: 713},
+    {from: 9, to: 30},
+    {from: 9, to: 60},
+    {from: 9, to: 102},
+    {from: 9, to: 120},
+    {from: 9, to: 186},
+    {from: 9, to: 201},
+    {from: 9, to: 222},
+    {from: 9, to: 228},
+    {from: 9, to: 235},
+    {from: 9, to: 236},
+    {from: 9, to: 305},
+    {from: 9, to: 324},
+    {from: 9, to: 334},
+    {from: 9, to: 353},
+    {from: 9, to: 368},
+    {from: 9, to: 429},
+    {from: 9, to: 489},
+    {from: 9, to: 499},
+    {from: 9, to: 548},
+    {from: 9, to: 552},
+    {from: 9, to: 595},
+    {from: 9, to: 710},
+    {from: 10, to: 31},
+    {from: 10, to: 96},
+    {from: 10, to: 99},
+    {from: 10, to: 100},
+    {from: 10, to: 105},
+    {from: 10, to: 106},
+    {from: 10, to: 130},
+    {from: 10, to: 153},
+    {from: 10, to: 181},
+    {from: 10, to: 219},
+    {from: 10, to: 234},
+    {from: 10, to: 304},
+    {from: 10, to: 309},
+    {from: 10, to: 341},
+    {from: 10, to: 366},
+    {from: 10, to: 369},
+    {from: 10, to: 370},
+    {from: 10, to: 457},
+    {from: 10, to: 554},
+    {from: 10, to: 630},
+    {from: 10, to: 672},
+    {from: 10, to: 701},
+    {from: 11, to: 18},
+    {from: 11, to: 43},
+    {from: 11, to: 59},
+    {from: 11, to: 65},
+    {from: 11, to: 118},
+    {from: 11, to: 138},
+    {from: 11, to: 199},
+    {from: 11, to: 220},
+    {from: 11, to: 237},
+    {from: 11, to: 272},
+    {from: 11, to: 340},
+    {from: 11, to: 346},
+    {from: 11, to: 347},
+    {from: 11, to: 387},
+    {from: 11, to: 404},
+    {from: 11, to: 437},
+    {from: 11, to: 447},
+    {from: 11, to: 503},
+    {from: 11, to: 520},
+    {from: 11, to: 590},
+    {from: 11, to: 628},
+    {from: 11, to: 664},
+    {from: 11, to: 670},
+    {from: 11, to: 709},
+    {from: 11, to: 711},
+    {from: 12, to: 54},
+    {from: 12, to: 70},
+    {from: 12, to: 202},
+    {from: 12, to: 211},
+    {from: 12, to: 212},
+    {from: 12, to: 221},
+    {from: 12, to: 225},
+    {from: 12, to: 261},
+    {from: 12, to: 287},
+    {from: 12, to: 319},
+    {from: 12, to: 358},
+    {from: 12, to: 419},
+    {from: 12, to: 424},
+    {from: 12, to: 450},
+    {from: 12, to: 451},
+    {from: 12, to: 462},
+    {from: 12, to: 487},
+    {from: 12, to: 555},
+    {from: 12, to: 600},
+    {from: 12, to: 608},
+    {from: 12, to: 642},
+    {from: 12, to: 645},
+    {from: 13, to: 35},
+    {from: 13, to: 36},
+    {from: 13, to: 40},
+    {from: 13, to: 41},
+    {from: 13, to: 66},
+    {from: 13, to: 78},
+    {from: 13, to: 137},
+    {from: 13, to: 192},
+    {from: 13, to: 247},
+    {from: 13, to: 273},
+    {from: 13, to: 284},
+    {from: 13, to: 306},
+    {from: 13, to: 315},
+    {from: 13, to: 380},
+    {from: 13, to: 389},
+    {from: 13, to: 467},
+    {from: 13, to: 495},
+    {from: 13, to: 570},
+    {from: 13, to: 584},
+    {from: 13, to: 598},
+    {from: 13, to: 599},
+    {from: 13, to: 666},
+    {from: 14, to: 16},
+    {from: 14, to: 72},
+    {from: 14, to: 75},
+    {from: 14, to: 115},
+    {from: 14, to: 190},
+    {from: 14, to: 194},
+    {from: 14, to: 200},
+    {from: 14, to: 243},
+    {from: 14, to: 259},
+    {from: 14, to: 292},
+    {from: 14, to: 342},
+    {from: 14, to: 363},
+    {from: 14, to: 379},
+    {from: 14, to: 383},
+    {from: 14, to: 403},
+    {from: 14, to: 500},
+    {from: 14, to: 505},
+    {from: 14, to: 537},
+    {from: 14, to: 574},
+    {from: 14, to: 587},
+    {from: 14, to: 597},
+    {from: 14, to: 640},
+    {from: 14, to: 649},
+    {from: 14, to: 691},
+    {from: 14, to: 695},
+    {from: 14, to: 702},
+    {from: 14, to: 706},
+    {from: 15, to: 97},
+    {from: 15, to: 108},
+    {from: 15, to: 173},
+    {from: 15, to: 195},
+    {from: 15, to: 205},
+    {from: 15, to: 218},
+    {from: 15, to: 274},
+    {from: 15, to: 296},
+    {from: 15, to: 418},
+    {from: 15, to: 435},
+    {from: 15, to: 493},
+    {from: 15, to: 494},
+    {from: 15, to: 519},
+    {from: 15, to: 525},
+    {from: 15, to: 526},
+    {from: 15, to: 582},
+    {from: 15, to: 585},
+    {from: 15, to: 605},
+    {from: 15, to: 631},
+    {from: 15, to: 655},
+    {from: 15, to: 722},
+    {from: 16, to: 21},
+    {from: 16, to: 22},
+    {from: 16, to: 23},
+    {from: 16, to: 24},
+    {from: 16, to: 25},
+    {from: 16, to: 48},
+    {from: 16, to: 51},
+    {from: 16, to: 158},
+    {from: 16, to: 174},
+    {from: 16, to: 243},
+    {from: 16, to: 292},
+    {from: 16, to: 293},
+    {from: 16, to: 439},
+    {from: 16, to: 540},
+    {from: 16, to: 568},
+    {from: 16, to: 640},
+    {from: 16, to: 641},
+    {from: 16, to: 695},
+    {from: 16, to: 704},
+    {from: 16, to: 708},
+    {from: 16, to: 732},
+    {from: 16, to: 733},
+    {from: 17, to: 34},
+    {from: 17, to: 49},
+    {from: 17, to: 103},
+    {from: 17, to: 104},
+    {from: 17, to: 169},
+    {from: 17, to: 229},
+    {from: 17, to: 256},
+    {from: 17, to: 267},
+    {from: 17, to: 275},
+    {from: 17, to: 276},
+    {from: 17, to: 295},
+    {from: 17, to: 317},
+    {from: 17, to: 318},
+    {from: 17, to: 355},
+    {from: 17, to: 357},
+    {from: 17, to: 446},
+    {from: 17, to: 509},
+    {from: 17, to: 510},
+    {from: 17, to: 546},
+    {from: 17, to: 564},
+    {from: 17, to: 581},
+    {from: 17, to: 592},
+    {from: 18, to: 43},
+    {from: 18, to: 65},
+    {from: 18, to: 118},
+    {from: 18, to: 138},
+    {from: 18, to: 199},
+    {from: 18, to: 220},
+    {from: 18, to: 272},
+    {from: 18, to: 340},
+    {from: 18, to: 346},
+    {from: 18, to: 347},
+    {from: 18, to: 383},
+    {from: 18, to: 387},
+    {from: 18, to: 404},
+    {from: 18, to: 437},
+    {from: 18, to: 503},
+    {from: 18, to: 520},
+    {from: 18, to: 590},
+    {from: 18, to: 628},
+    {from: 18, to: 664},
+    {from: 18, to: 670},
+    {from: 18, to: 709},
+    {from: 19, to: 26},
+    {from: 19, to: 45},
+    {from: 19, to: 46},
+    {from: 19, to: 55},
+    {from: 19, to: 58},
+    {from: 19, to: 59},
+    {from: 19, to: 123},
+    {from: 19, to: 125},
+    {from: 19, to: 141},
+    {from: 19, to: 237},
+    {from: 19, to: 249},
+    {from: 19, to: 252},
+    {from: 19, to: 291},
+    {from: 19, to: 370},
+    {from: 19, to: 416},
+    {from: 19, to: 422},
+    {from: 19, to: 447},
+    {from: 19, to: 449},
+    {from: 19, to: 452},
+    {from: 19, to: 478},
+    {from: 19, to: 481},
+    {from: 19, to: 482},
+    {from: 19, to: 622},
+    {from: 19, to: 675},
+    {from: 20, to: 62},
+    {from: 20, to: 90},
+    {from: 20, to: 91},
+    {from: 20, to: 117},
+    {from: 20, to: 126},
+    {from: 20, to: 134},
+    {from: 20, to: 156},
+    {from: 20, to: 213},
+    {from: 20, to: 242},
+    {from: 20, to: 265},
+    {from: 20, to: 326},
+    {from: 20, to: 341},
+    {from: 20, to: 365},
+    {from: 20, to: 375},
+    {from: 20, to: 406},
+    {from: 20, to: 476},
+    {from: 20, to: 502},
+    {from: 20, to: 513},
+    {from: 20, to: 530},
+    {from: 20, to: 544},
+    {from: 20, to: 681},
+    {from: 20, to: 683},
+    {from: 21, to: 22},
+    {from: 21, to: 23},
+    {from: 21, to: 24},
+    {from: 21, to: 25},
+    {from: 21, to: 48},
+    {from: 21, to: 51},
+    {from: 21, to: 74},
+    {from: 21, to: 158},
+    {from: 21, to: 174},
+    {from: 21, to: 243},
+    {from: 21, to: 289},
+    {from: 21, to: 292},
+    {from: 21, to: 293},
+    {from: 21, to: 428},
+    {from: 21, to: 439},
+    {from: 21, to: 532},
+    {from: 21, to: 540},
+    {from: 21, to: 568},
+    {from: 21, to: 640},
+    {from: 21, to: 641},
+    {from: 21, to: 695},
+    {from: 21, to: 704},
+    {from: 21, to: 708},
+    {from: 21, to: 732},
+    {from: 21, to: 733},
+    {from: 22, to: 23},
+    {from: 22, to: 24},
+    {from: 22, to: 25},
+    {from: 22, to: 48},
+    {from: 22, to: 51},
+    {from: 22, to: 120},
+    {from: 22, to: 158},
+    {from: 22, to: 174},
+    {from: 22, to: 243},
+    {from: 22, to: 292},
+    {from: 22, to: 293},
+    {from: 22, to: 439},
+    {from: 22, to: 540},
+    {from: 22, to: 568},
+    {from: 22, to: 640},
+    {from: 22, to: 641},
+    {from: 22, to: 695},
+    {from: 22, to: 704},
+    {from: 22, to: 708},
+    {from: 22, to: 732},
+    {from: 22, to: 733},
+    {from: 23, to: 24},
+    {from: 23, to: 25},
+    {from: 23, to: 48},
+    {from: 23, to: 51},
+    {from: 23, to: 158},
+    {from: 23, to: 174},
+    {from: 23, to: 243},
+    {from: 23, to: 292},
+    {from: 23, to: 293},
+    {from: 23, to: 439},
+    {from: 23, to: 540},
+    {from: 23, to: 568},
+    {from: 23, to: 640},
+    {from: 23, to: 641},
+    {from: 23, to: 695},
+    {from: 23, to: 698},
+    {from: 23, to: 704},
+    {from: 23, to: 708},
+    {from: 23, to: 732},
+    {from: 23, to: 733},
+    {from: 24, to: 25},
+    {from: 24, to: 48},
+    {from: 24, to: 51},
+    {from: 24, to: 120},
+    {from: 24, to: 158},
+    {from: 24, to: 174},
+    {from: 24, to: 243},
+    {from: 24, to: 292},
+    {from: 24, to: 293},
+    {from: 24, to: 439},
+    {from: 24, to: 540},
+    {from: 24, to: 568},
+    {from: 24, to: 640},
+    {from: 24, to: 641},
+    {from: 24, to: 695},
+    {from: 24, to: 704},
+    {from: 24, to: 708},
+    {from: 24, to: 732},
+    {from: 24, to: 733},
+    {from: 25, to: 48},
+    {from: 25, to: 51},
+    {from: 25, to: 120},
+    {from: 25, to: 158},
+    {from: 25, to: 174},
+    {from: 25, to: 243},
+    {from: 25, to: 292},
+    {from: 25, to: 293},
+    {from: 25, to: 439},
+    {from: 25, to: 540},
+    {from: 25, to: 568},
+    {from: 25, to: 640},
+    {from: 25, to: 641},
+    {from: 25, to: 695},
+    {from: 25, to: 704},
+    {from: 25, to: 708},
+    {from: 25, to: 732},
+    {from: 25, to: 733},
+    {from: 26, to: 45},
+    {from: 26, to: 46},
+    {from: 26, to: 58},
+    {from: 26, to: 59},
+    {from: 26, to: 123},
+    {from: 26, to: 125},
+    {from: 26, to: 141},
+    {from: 26, to: 237},
+    {from: 26, to: 249},
+    {from: 26, to: 252},
+    {from: 26, to: 291},
+    {from: 26, to: 416},
+    {from: 26, to: 422},
+    {from: 26, to: 447},
+    {from: 26, to: 449},
+    {from: 26, to: 452},
+    {from: 26, to: 478},
+    {from: 26, to: 481},
+    {from: 26, to: 482},
+    {from: 26, to: 558},
+    {from: 26, to: 622},
+    {from: 26, to: 675},
+    {from: 27, to: 76},
+    {from: 27, to: 80},
+    {from: 27, to: 116},
+    {from: 27, to: 139},
+    {from: 27, to: 144},
+    {from: 27, to: 231},
+    {from: 27, to: 232},
+    {from: 27, to: 238},
+    {from: 27, to: 258},
+    {from: 27, to: 303},
+    {from: 27, to: 308},
+    {from: 27, to: 335},
+    {from: 27, to: 348},
+    {from: 27, to: 409},
+    {from: 27, to: 415},
+    {from: 27, to: 433},
+    {from: 27, to: 434},
+    {from: 27, to: 498},
+    {from: 27, to: 543},
+    {from: 27, to: 573},
+    {from: 27, to: 575},
+    {from: 27, to: 576},
+    {from: 27, to: 583},
+    {from: 27, to: 603},
+    {from: 27, to: 616},
+    {from: 27, to: 629},
+    {from: 27, to: 668},
+    {from: 27, to: 679},
+    {from: 27, to: 713},
+    {from: 28, to: 33},
+    {from: 28, to: 37},
+    {from: 28, to: 50},
+    {from: 28, to: 71},
+    {from: 28, to: 83},
+    {from: 28, to: 84},
+    {from: 28, to: 107},
+    {from: 28, to: 111},
+    {from: 28, to: 113},
+    {from: 28, to: 135},
+    {from: 28, to: 146},
+    {from: 28, to: 182},
+    {from: 28, to: 210},
+    {from: 28, to: 217},
+    {from: 28, to: 245},
+    {from: 28, to: 278},
+    {from: 28, to: 319},
+    {from: 28, to: 321},
+    {from: 28, to: 337},
+    {from: 28, to: 349},
+    {from: 28, to: 368},
+    {from: 28, to: 407},
+    {from: 28, to: 419},
+    {from: 28, to: 420},
+    {from: 28, to: 429},
+    {from: 28, to: 488},
+    {from: 28, to: 489},
+    {from: 28, to: 529},
+    {from: 28, to: 533},
+    {from: 28, to: 569},
+    {from: 28, to: 579},
+    {from: 28, to: 626},
+    {from: 28, to: 627},
+    {from: 28, to: 643},
+    {from: 28, to: 662},
+    {from: 28, to: 705},
+    {from: 28, to: 720},
+    {from: 29, to: 77},
+    {from: 29, to: 81},
+    {from: 29, to: 148},
+    {from: 29, to: 208},
+    {from: 29, to: 298},
+    {from: 29, to: 307},
+    {from: 29, to: 310},
+    {from: 29, to: 313},
+    {from: 29, to: 458},
+    {from: 29, to: 459},
+    {from: 29, to: 468},
+    {from: 29, to: 470},
+    {from: 29, to: 471},
+    {from: 29, to: 477},
+    {from: 29, to: 479},
+    {from: 29, to: 515},
+    {from: 29, to: 518},
+    {from: 29, to: 541},
+    {from: 29, to: 620},
+    {from: 29, to: 680},
+    {from: 29, to: 686},
+    {from: 30, to: 60},
+    {from: 30, to: 102},
+    {from: 30, to: 120},
+    {from: 30, to: 186},
+    {from: 30, to: 201},
+    {from: 30, to: 222},
+    {from: 30, to: 228},
+    {from: 30, to: 235},
+    {from: 30, to: 236},
+    {from: 30, to: 305},
+    {from: 30, to: 324},
+    {from: 30, to: 334},
+    {from: 30, to: 353},
+    {from: 30, to: 368},
+    {from: 30, to: 429},
+    {from: 30, to: 489},
+    {from: 30, to: 499},
+    {from: 30, to: 548},
+    {from: 30, to: 552},
+    {from: 30, to: 595},
+    {from: 30, to: 710},
+    {from: 31, to: 96},
+    {from: 31, to: 99},
+    {from: 31, to: 100},
+    {from: 31, to: 105},
+    {from: 31, to: 106},
+    {from: 31, to: 130},
+    {from: 31, to: 153},
+    {from: 31, to: 181},
+    {from: 31, to: 219},
+    {from: 31, to: 234},
+    {from: 31, to: 304},
+    {from: 31, to: 309},
+    {from: 31, to: 366},
+    {from: 31, to: 369},
+    {from: 31, to: 370},
+    {from: 31, to: 457},
+    {from: 31, to: 554},
+    {from: 31, to: 630},
+    {from: 31, to: 672},
+    {from: 31, to: 701},
+    {from: 32, to: 47},
+    {from: 32, to: 170},
+    {from: 32, to: 250},
+    {from: 32, to: 251},
+    {from: 32, to: 253},
+    {from: 32, to: 254},
+    {from: 32, to: 255},
+    {from: 32, to: 356},
+    {from: 32, to: 400},
+    {from: 32, to: 401},
+    {from: 32, to: 402},
+    {from: 32, to: 410},
+    {from: 32, to: 423},
+    {from: 32, to: 545},
+    {from: 32, to: 556},
+    {from: 32, to: 557},
+    {from: 32, to: 558},
+    {from: 32, to: 656},
+    {from: 32, to: 660},
+    {from: 32, to: 674},
+    {from: 32, to: 694},
+    {from: 32, to: 696},
+    {from: 33, to: 50},
+    {from: 33, to: 64},
+    {from: 33, to: 101},
+    {from: 33, to: 111},
+    {from: 33, to: 112},
+    {from: 33, to: 124},
+    {from: 33, to: 132},
+    {from: 33, to: 135},
+    {from: 33, to: 189},
+    {from: 33, to: 207},
+    {from: 33, to: 209},
+    {from: 33, to: 214},
+    {from: 33, to: 223},
+    {from: 33, to: 230},
+    {from: 33, to: 239},
+    {from: 33, to: 245},
+    {from: 33, to: 262},
+    {from: 33, to: 319},
+    {from: 33, to: 320},
+    {from: 33, to: 344},
+    {from: 33, to: 349},
+    {from: 33, to: 354},
+    {from: 33, to: 361},
+    {from: 33, to: 362},
+    {from: 33, to: 368},
+    {from: 33, to: 419},
+    {from: 33, to: 429},
+    {from: 33, to: 445},
+    {from: 33, to: 483},
+    {from: 33, to: 484},
+    {from: 33, to: 489},
+    {from: 33, to: 512},
+    {from: 33, to: 529},
+    {from: 33, to: 569},
+    {from: 33, to: 643},
+    {from: 33, to: 720},
+    {from: 34, to: 49},
+    {from: 34, to: 103},
+    {from: 34, to: 104},
+    {from: 34, to: 169},
+    {from: 34, to: 229},
+    {from: 34, to: 256},
+    {from: 34, to: 267},
+    {from: 34, to: 275},
+    {from: 34, to: 276},
+    {from: 34, to: 295},
+    {from: 34, to: 317},
+    {from: 34, to: 318},
+    {from: 34, to: 355},
+    {from: 34, to: 357},
+    {from: 34, to: 446},
+    {from: 34, to: 509},
+    {from: 34, to: 510},
+    {from: 34, to: 546},
+    {from: 34, to: 564},
+    {from: 34, to: 581},
+    {from: 34, to: 592},
+    {from: 35, to: 36},
+    {from: 35, to: 40},
+    {from: 35, to: 41},
+    {from: 35, to: 66},
+    {from: 35, to: 78},
+    {from: 35, to: 137},
+    {from: 35, to: 192},
+    {from: 35, to: 247},
+    {from: 35, to: 273},
+    {from: 35, to: 284},
+    {from: 35, to: 306},
+    {from: 35, to: 315},
+    {from: 35, to: 380},
+    {from: 35, to: 389},
+    {from: 35, to: 467},
+    {from: 35, to: 495},
+    {from: 35, to: 570},
+    {from: 35, to: 584},
+    {from: 35, to: 598},
+    {from: 35, to: 599},
+    {from: 35, to: 666},
+    {from: 36, to: 40},
+    {from: 36, to: 41},
+    {from: 36, to: 66},
+    {from: 36, to: 78},
+    {from: 36, to: 137},
+    {from: 36, to: 192},
+    {from: 36, to: 247},
+    {from: 36, to: 273},
+    {from: 36, to: 284},
+    {from: 36, to: 306},
+    {from: 36, to: 315},
+    {from: 36, to: 380},
+    {from: 36, to: 389},
+    {from: 36, to: 467},
+    {from: 36, to: 495},
+    {from: 36, to: 570},
+    {from: 36, to: 584},
+    {from: 36, to: 598},
+    {from: 36, to: 599},
+    {from: 36, to: 666},
+    {from: 37, to: 71},
+    {from: 37, to: 83},
+    {from: 37, to: 84},
+    {from: 37, to: 107},
+    {from: 37, to: 113},
+    {from: 37, to: 146},
+    {from: 37, to: 182},
+    {from: 37, to: 210},
+    {from: 37, to: 217},
+    {from: 37, to: 278},
+    {from: 37, to: 321},
+    {from: 37, to: 337},
+    {from: 37, to: 407},
+    {from: 37, to: 420},
+    {from: 37, to: 488},
+    {from: 37, to: 533},
+    {from: 37, to: 545},
+    {from: 37, to: 579},
+    {from: 37, to: 626},
+    {from: 37, to: 627},
+    {from: 37, to: 662},
+    {from: 37, to: 705},
+    {from: 37, to: 722},
+    {from: 38, to: 39},
+    {from: 38, to: 58},
+    {from: 38, to: 121},
+    {from: 38, to: 129},
+    {from: 38, to: 165},
+    {from: 38, to: 166},
+    {from: 38, to: 167},
+    {from: 38, to: 168},
+    {from: 38, to: 185},
+    {from: 38, to: 191},
+    {from: 38, to: 226},
+    {from: 38, to: 240},
+    {from: 38, to: 277},
+    {from: 38, to: 352},
+    {from: 38, to: 359},
+    {from: 38, to: 424},
+    {from: 38, to: 430},
+    {from: 38, to: 461},
+    {from: 38, to: 463},
+    {from: 38, to: 486},
+    {from: 38, to: 517},
+    {from: 38, to: 531},
+    {from: 38, to: 537},
+    {from: 38, to: 607},
+    {from: 38, to: 634},
+    {from: 38, to: 636},
+    {from: 38, to: 711},
+    {from: 39, to: 121},
+    {from: 39, to: 129},
+    {from: 39, to: 165},
+    {from: 39, to: 166},
+    {from: 39, to: 167},
+    {from: 39, to: 168},
+    {from: 39, to: 185},
+    {from: 39, to: 191},
+    {from: 39, to: 226},
+    {from: 39, to: 240},
+    {from: 39, to: 352},
+    {from: 39, to: 359},
+    {from: 39, to: 430},
+    {from: 39, to: 461},
+    {from: 39, to: 463},
+    {from: 39, to: 486},
+    {from: 39, to: 531},
+    {from: 39, to: 607},
+    {from: 39, to: 634},
+    {from: 39, to: 711},
+    {from: 40, to: 41},
+    {from: 40, to: 66},
+    {from: 40, to: 78},
+    {from: 40, to: 137},
+    {from: 40, to: 192},
+    {from: 40, to: 247},
+    {from: 40, to: 273},
+    {from: 40, to: 284},
+    {from: 40, to: 306},
+    {from: 40, to: 315},
+    {from: 40, to: 380},
+    {from: 40, to: 389},
+    {from: 40, to: 467},
+    {from: 40, to: 495},
+    {from: 40, to: 570},
+    {from: 40, to: 584},
+    {from: 40, to: 598},
+    {from: 40, to: 599},
+    {from: 40, to: 666},
+    {from: 41, to: 66},
+    {from: 41, to: 78},
+    {from: 41, to: 137},
+    {from: 41, to: 192},
+    {from: 41, to: 247},
+    {from: 41, to: 273},
+    {from: 41, to: 284},
+    {from: 41, to: 306},
+    {from: 41, to: 315},
+    {from: 41, to: 380},
+    {from: 41, to: 389},
+    {from: 41, to: 467},
+    {from: 41, to: 495},
+    {from: 41, to: 570},
+    {from: 41, to: 584},
+    {from: 41, to: 598},
+    {from: 41, to: 599},
+    {from: 41, to: 666},
+    {from: 42, to: 86},
+    {from: 42, to: 93},
+    {from: 42, to: 131},
+    {from: 42, to: 180},
+    {from: 42, to: 188},
+    {from: 42, to: 202},
+    {from: 42, to: 211},
+    {from: 42, to: 216},
+    {from: 42, to: 277},
+    {from: 42, to: 286},
+    {from: 42, to: 332},
+    {from: 42, to: 333},
+    {from: 42, to: 428},
+    {from: 42, to: 486},
+    {from: 42, to: 511},
+    {from: 42, to: 528},
+    {from: 42, to: 571},
+    {from: 42, to: 580},
+    {from: 42, to: 593},
+    {from: 42, to: 601},
+    {from: 42, to: 618},
+    {from: 42, to: 619},
+    {from: 42, to: 652},
+    {from: 42, to: 703},
+    {from: 42, to: 716},
+    {from: 43, to: 65},
+    {from: 43, to: 118},
+    {from: 43, to: 138},
+    {from: 43, to: 199},
+    {from: 43, to: 220},
+    {from: 43, to: 272},
+    {from: 43, to: 340},
+    {from: 43, to: 346},
+    {from: 43, to: 347},
+    {from: 43, to: 387},
+    {from: 43, to: 404},
+    {from: 43, to: 437},
+    {from: 43, to: 473},
+    {from: 43, to: 503},
+    {from: 43, to: 520},
+    {from: 43, to: 533},
+    {from: 43, to: 590},
+    {from: 43, to: 628},
+    {from: 43, to: 664},
+    {from: 43, to: 670},
+    {from: 43, to: 709},
+    {from: 44, to: 79},
+    {from: 44, to: 82},
+    {from: 44, to: 110},
+    {from: 44, to: 122},
+    {from: 44, to: 151},
+    {from: 44, to: 179},
+    {from: 44, to: 203},
+    {from: 44, to: 227},
+    {from: 44, to: 231},
+    {from: 44, to: 238},
+    {from: 44, to: 327},
+    {from: 44, to: 342},
+    {from: 44, to: 374},
+    {from: 44, to: 385},
+    {from: 44, to: 433},
+    {from: 44, to: 442},
+    {from: 44, to: 454},
+    {from: 44, to: 475},
+    {from: 44, to: 480},
+    {from: 44, to: 498},
+    {from: 44, to: 517},
+    {from: 44, to: 547},
+    {from: 44, to: 573},
+    {from: 44, to: 577},
+    {from: 44, to: 586},
+    {from: 44, to: 611},
+    {from: 44, to: 614},
+    {from: 44, to: 623},
+    {from: 44, to: 627},
+    {from: 44, to: 648},
+    {from: 44, to: 678},
+    {from: 44, to: 687},
+    {from: 44, to: 717},
+    {from: 45, to: 46},
+    {from: 45, to: 58},
+    {from: 45, to: 59},
+    {from: 45, to: 64},
+    {from: 45, to: 123},
+    {from: 45, to: 125},
+    {from: 45, to: 141},
+    {from: 45, to: 237},
+    {from: 45, to: 249},
+    {from: 45, to: 252},
+    {from: 45, to: 291},
+    {from: 45, to: 404},
+    {from: 45, to: 416},
+    {from: 45, to: 422},
+    {from: 45, to: 447},
+    {from: 45, to: 449},
+    {from: 45, to: 452},
+    {from: 45, to: 461},
+    {from: 45, to: 478},
+    {from: 45, to: 481},
+    {from: 45, to: 482},
+    {from: 45, to: 483},
+    {from: 45, to: 565},
+    {from: 45, to: 622},
+    {from: 45, to: 661},
+    {from: 45, to: 675},
+    {from: 46, to: 58},
+    {from: 46, to: 59},
+    {from: 46, to: 64},
+    {from: 46, to: 123},
+    {from: 46, to: 125},
+    {from: 46, to: 141},
+    {from: 46, to: 237},
+    {from: 46, to: 249},
+    {from: 46, to: 252},
+    {from: 46, to: 291},
+    {from: 46, to: 404},
+    {from: 46, to: 416},
+    {from: 46, to: 422},
+    {from: 46, to: 447},
+    {from: 46, to: 449},
+    {from: 46, to: 452},
+    {from: 46, to: 461},
+    {from: 46, to: 478},
+    {from: 46, to: 481},
+    {from: 46, to: 482},
+    {from: 46, to: 483},
+    {from: 46, to: 565},
+    {from: 46, to: 622},
+    {from: 46, to: 661},
+    {from: 46, to: 675},
+    {from: 47, to: 170},
+    {from: 47, to: 250},
+    {from: 47, to: 251},
+    {from: 47, to: 253},
+    {from: 47, to: 254},
+    {from: 47, to: 255},
+    {from: 47, to: 336},
+    {from: 47, to: 356},
+    {from: 47, to: 400},
+    {from: 47, to: 401},
+    {from: 47, to: 402},
+    {from: 47, to: 410},
+    {from: 47, to: 423},
+    {from: 47, to: 545},
+    {from: 47, to: 556},
+    {from: 47, to: 557},
+    {from: 47, to: 558},
+    {from: 47, to: 656},
+    {from: 47, to: 660},
+    {from: 47, to: 674},
+    {from: 47, to: 694},
+    {from: 47, to: 696},
+    {from: 48, to: 51},
+    {from: 48, to: 158},
+    {from: 48, to: 174},
+    {from: 48, to: 243},
+    {from: 48, to: 292},
+    {from: 48, to: 293},
+    {from: 48, to: 439},
+    {from: 48, to: 540},
+    {from: 48, to: 568},
+    {from: 48, to: 640},
+    {from: 48, to: 641},
+    {from: 48, to: 695},
+    {from: 48, to: 704},
+    {from: 48, to: 708},
+    {from: 48, to: 732},
+    {from: 48, to: 733},
+    {from: 49, to: 103},
+    {from: 49, to: 104},
+    {from: 49, to: 169},
+    {from: 49, to: 198},
+    {from: 49, to: 229},
+    {from: 49, to: 256},
+    {from: 49, to: 267},
+    {from: 49, to: 275},
+    {from: 49, to: 276},
+    {from: 49, to: 295},
+    {from: 49, to: 317},
+    {from: 49, to: 318},
+    {from: 49, to: 355},
+    {from: 49, to: 357},
+    {from: 49, to: 446},
+    {from: 49, to: 509},
+    {from: 49, to: 510},
+    {from: 49, to: 546},
+    {from: 49, to: 564},
+    {from: 49, to: 581},
+    {from: 49, to: 592},
+    {from: 49, to: 658},
+    {from: 50, to: 110},
+    {from: 50, to: 111},
+    {from: 50, to: 135},
+    {from: 50, to: 150},
+    {from: 50, to: 154},
+    {from: 50, to: 155},
+    {from: 50, to: 164},
+    {from: 50, to: 227},
+    {from: 50, to: 245},
+    {from: 50, to: 294},
+    {from: 50, to: 316},
+    {from: 50, to: 319},
+    {from: 50, to: 349},
+    {from: 50, to: 368},
+    {from: 50, to: 371},
+    {from: 50, to: 373},
+    {from: 50, to: 397},
+    {from: 50, to: 419},
+    {from: 50, to: 429},
+    {from: 50, to: 489},
+    {from: 50, to: 529},
+    {from: 50, to: 569},
+    {from: 50, to: 572},
+    {from: 50, to: 591},
+    {from: 50, to: 629},
+    {from: 50, to: 643},
+    {from: 50, to: 644},
+    {from: 50, to: 719},
+    {from: 50, to: 720},
+    {from: 51, to: 158},
+    {from: 51, to: 174},
+    {from: 51, to: 243},
+    {from: 51, to: 292},
+    {from: 51, to: 293},
+    {from: 51, to: 439},
+    {from: 51, to: 540},
+    {from: 51, to: 568},
+    {from: 51, to: 640},
+    {from: 51, to: 641},
+    {from: 51, to: 695},
+    {from: 51, to: 704},
+    {from: 51, to: 708},
+    {from: 51, to: 732},
+    {from: 51, to: 733},
+    {from: 52, to: 56},
+    {from: 52, to: 92},
+    {from: 52, to: 98},
+    {from: 52, to: 176},
+    {from: 52, to: 178},
+    {from: 52, to: 197},
+    {from: 52, to: 328},
+    {from: 52, to: 329},
+    {from: 52, to: 351},
+    {from: 52, to: 367},
+    {from: 52, to: 372},
+    {from: 52, to: 426},
+    {from: 52, to: 427},
+    {from: 52, to: 456},
+    {from: 52, to: 464},
+    {from: 52, to: 492},
+    {from: 52, to: 536},
+    {from: 52, to: 549},
+    {from: 52, to: 551},
+    {from: 52, to: 609},
+    {from: 52, to: 615},
+    {from: 52, to: 700},
+    {from: 52, to: 718},
+    {from: 53, to: 67},
+    {from: 53, to: 68},
+    {from: 53, to: 73},
+    {from: 53, to: 183},
+    {from: 53, to: 184},
+    {from: 53, to: 198},
+    {from: 53, to: 204},
+    {from: 53, to: 270},
+    {from: 53, to: 302},
+    {from: 53, to: 312},
+    {from: 53, to: 497},
+    {from: 53, to: 516},
+    {from: 53, to: 524},
+    {from: 53, to: 538},
+    {from: 53, to: 633},
+    {from: 53, to: 635},
+    {from: 53, to: 636},
+    {from: 53, to: 637},
+    {from: 53, to: 684},
+    {from: 53, to: 688},
+    {from: 53, to: 697},
+    {from: 53, to: 736},
+    {from: 54, to: 70},
+    {from: 54, to: 131},
+    {from: 54, to: 202},
+    {from: 54, to: 211},
+    {from: 54, to: 212},
+    {from: 54, to: 216},
+    {from: 54, to: 221},
+    {from: 54, to: 225},
+    {from: 54, to: 261},
+    {from: 54, to: 287},
+    {from: 54, to: 294},
+    {from: 54, to: 319},
+    {from: 54, to: 358},
+    {from: 54, to: 381},
+    {from: 54, to: 419},
+    {from: 54, to: 424},
+    {from: 54, to: 432},
+    {from: 54, to: 443},
+    {from: 54, to: 450},
+    {from: 54, to: 451},
+    {from: 54, to: 462},
+    {from: 54, to: 487},
+    {from: 54, to: 555},
+    {from: 54, to: 571},
+    {from: 54, to: 589},
+    {from: 54, to: 600},
+    {from: 54, to: 608},
+    {from: 54, to: 623},
+    {from: 54, to: 642},
+    {from: 54, to: 644},
+    {from: 54, to: 645},
+    {from: 54, to: 719},
+    {from: 55, to: 142},
+    {from: 55, to: 143},
+    {from: 55, to: 147},
+    {from: 55, to: 157},
+    {from: 55, to: 175},
+    {from: 55, to: 187},
+    {from: 55, to: 263},
+    {from: 55, to: 299},
+    {from: 55, to: 300},
+    {from: 55, to: 301},
+    {from: 55, to: 370},
+    {from: 55, to: 432},
+    {from: 55, to: 444},
+    {from: 55, to: 455},
+    {from: 55, to: 469},
+    {from: 55, to: 514},
+    {from: 55, to: 535},
+    {from: 55, to: 539},
+    {from: 55, to: 542},
+    {from: 55, to: 624},
+    {from: 55, to: 653},
+    {from: 55, to: 669},
+    {from: 55, to: 698},
+    {from: 56, to: 74},
+    {from: 56, to: 140},
+    {from: 56, to: 172},
+    {from: 56, to: 177},
+    {from: 56, to: 179},
+    {from: 56, to: 311},
+    {from: 56, to: 384},
+    {from: 56, to: 386},
+    {from: 56, to: 408},
+    {from: 56, to: 460},
+    {from: 56, to: 522},
+    {from: 56, to: 527},
+    {from: 56, to: 532},
+    {from: 56, to: 612},
+    {from: 56, to: 625},
+    {from: 56, to: 654},
+    {from: 56, to: 667},
+    {from: 56, to: 677},
+    {from: 56, to: 679},
+    {from: 56, to: 685},
+    {from: 56, to: 707},
+    {from: 57, to: 76},
+    {from: 57, to: 87},
+    {from: 57, to: 124},
+    {from: 57, to: 196},
+    {from: 57, to: 271},
+    {from: 57, to: 288},
+    {from: 57, to: 381},
+    {from: 57, to: 409},
+    {from: 57, to: 421},
+    {from: 57, to: 425},
+    {from: 57, to: 440},
+    {from: 57, to: 472},
+    {from: 57, to: 473},
+    {from: 57, to: 508},
+    {from: 57, to: 521},
+    {from: 57, to: 523},
+    {from: 57, to: 543},
+    {from: 57, to: 562},
+    {from: 57, to: 565},
+    {from: 57, to: 589},
+    {from: 57, to: 594},
+    {from: 57, to: 604},
+    {from: 57, to: 615},
+    {from: 57, to: 663},
+    {from: 57, to: 728},
+    {from: 58, to: 59},
+    {from: 58, to: 123},
+    {from: 58, to: 125},
+    {from: 58, to: 141},
+    {from: 58, to: 237},
+    {from: 58, to: 249},
+    {from: 58, to: 252},
+    {from: 58, to: 277},
+    {from: 58, to: 291},
+    {from: 58, to: 416},
+    {from: 58, to: 422},
+    {from: 58, to: 424},
+    {from: 58, to: 447},
+    {from: 58, to: 449},
+    {from: 58, to: 452},
+    {from: 58, to: 478},
+    {from: 58, to: 481},
+    {from: 58, to: 482},
+    {from: 58, to: 517},
+    {from: 58, to: 537},
+    {from: 58, to: 622},
+    {from: 58, to: 636},
+    {from: 58, to: 675},
+    {from: 59, to: 123},
+    {from: 59, to: 125},
+    {from: 59, to: 141},
+    {from: 59, to: 237},
+    {from: 59, to: 249},
+    {from: 59, to: 252},
+    {from: 59, to: 291},
+    {from: 59, to: 416},
+    {from: 59, to: 422},
+    {from: 59, to: 447},
+    {from: 59, to: 449},
+    {from: 59, to: 452},
+    {from: 59, to: 478},
+    {from: 59, to: 481},
+    {from: 59, to: 482},
+    {from: 59, to: 622},
+    {from: 59, to: 675},
+    {from: 59, to: 711},
+    {from: 60, to: 102},
+    {from: 60, to: 116},
+    {from: 60, to: 120},
+    {from: 60, to: 144},
+    {from: 60, to: 150},
+    {from: 60, to: 186},
+    {from: 60, to: 201},
+    {from: 60, to: 222},
+    {from: 60, to: 228},
+    {from: 60, to: 235},
+    {from: 60, to: 236},
+    {from: 60, to: 305},
+    {from: 60, to: 318},
+    {from: 60, to: 324},
+    {from: 60, to: 334},
+    {from: 60, to: 353},
+    {from: 60, to: 368},
+    {from: 60, to: 371},
+    {from: 60, to: 429},
+    {from: 60, to: 460},
+    {from: 60, to: 489},
+    {from: 60, to: 499},
+    {from: 60, to: 528},
+    {from: 60, to: 548},
+    {from: 60, to: 552},
+    {from: 60, to: 562},
+    {from: 60, to: 576},
+    {from: 60, to: 595},
+    {from: 60, to: 606},
+    {from: 60, to: 646},
+    {from: 60, to: 710},
+    {from: 60, to: 713},
+    {from: 61, to: 79},
+    {from: 61, to: 94},
+    {from: 61, to: 133},
+    {from: 61, to: 140},
+    {from: 61, to: 145},
+    {from: 61, to: 149},
+    {from: 61, to: 171},
+    {from: 61, to: 244},
+    {from: 61, to: 314},
+    {from: 61, to: 316},
+    {from: 61, to: 325},
+    {from: 61, to: 327},
+    {from: 61, to: 338},
+    {from: 61, to: 345},
+    {from: 61, to: 350},
+    {from: 61, to: 375},
+    {from: 61, to: 396},
+    {from: 61, to: 417},
+    {from: 61, to: 442},
+    {from: 61, to: 454},
+    {from: 61, to: 455},
+    {from: 61, to: 496},
+    {from: 61, to: 507},
+    {from: 61, to: 534},
+    {from: 61, to: 566},
+    {from: 61, to: 577},
+    {from: 61, to: 606},
+    {from: 61, to: 613},
+    {from: 61, to: 659},
+    {from: 61, to: 673},
+    {from: 61, to: 678},
+    {from: 61, to: 682},
+    {from: 61, to: 687},
+    {from: 61, to: 714},
+    {from: 61, to: 721},
+    {from: 62, to: 90},
+    {from: 62, to: 91},
+    {from: 62, to: 117},
+    {from: 62, to: 126},
+    {from: 62, to: 134},
+    {from: 62, to: 156},
+    {from: 62, to: 213},
+    {from: 62, to: 242},
+    {from: 62, to: 265},
+    {from: 62, to: 326},
+    {from: 62, to: 341},
+    {from: 62, to: 365},
+    {from: 62, to: 375},
+    {from: 62, to: 406},
+    {from: 62, to: 476},
+    {from: 62, to: 502},
+    {from: 62, to: 513},
+    {from: 62, to: 530},
+    {from: 62, to: 544},
+    {from: 62, to: 681},
+    {from: 62, to: 683},
+    {from: 63, to: 89},
+    {from: 63, to: 102},
+    {from: 63, to: 114},
+    {from: 63, to: 127},
+    {from: 63, to: 159},
+    {from: 63, to: 160},
+    {from: 63, to: 161},
+    {from: 63, to: 246},
+    {from: 63, to: 257},
+    {from: 63, to: 264},
+    {from: 63, to: 297},
+    {from: 63, to: 322},
+    {from: 63, to: 398},
+    {from: 63, to: 474},
+    {from: 63, to: 485},
+    {from: 63, to: 553},
+    {from: 63, to: 621},
+    {from: 63, to: 632},
+    {from: 63, to: 638},
+    {from: 63, to: 639},
+    {from: 63, to: 657},
+    {from: 63, to: 671},
+    {from: 63, to: 697},
+    {from: 63, to: 715},
+    {from: 63, to: 726},
+    {from: 64, to: 101},
+    {from: 64, to: 112},
+    {from: 64, to: 124},
+    {from: 64, to: 125},
+    {from: 64, to: 132},
+    {from: 64, to: 189},
+    {from: 64, to: 207},
+    {from: 64, to: 209},
+    {from: 64, to: 214},
+    {from: 64, to: 223},
+    {from: 64, to: 230},
+    {from: 64, to: 239},
+    {from: 64, to: 249},
+    {from: 64, to: 252},
+    {from: 64, to: 262},
+    {from: 64, to: 320},
+    {from: 64, to: 344},
+    {from: 64, to: 354},
+    {from: 64, to: 361},
+    {from: 64, to: 362},
+    {from: 64, to: 404},
+    {from: 64, to: 416},
+    {from: 64, to: 445},
+    {from: 64, to: 461},
+    {from: 64, to: 483},
+    {from: 64, to: 484},
+    {from: 64, to: 512},
+    {from: 64, to: 565},
+    {from: 64, to: 661},
+    {from: 65, to: 118},
+    {from: 65, to: 138},
+    {from: 65, to: 199},
+    {from: 65, to: 220},
+    {from: 65, to: 272},
+    {from: 65, to: 340},
+    {from: 65, to: 346},
+    {from: 65, to: 347},
+    {from: 65, to: 387},
+    {from: 65, to: 404},
+    {from: 65, to: 437},
+    {from: 65, to: 503},
+    {from: 65, to: 520},
+    {from: 65, to: 590},
+    {from: 65, to: 628},
+    {from: 65, to: 664},
+    {from: 65, to: 670},
+    {from: 65, to: 709},
+    {from: 66, to: 78},
+    {from: 66, to: 137},
+    {from: 66, to: 192},
+    {from: 66, to: 247},
+    {from: 66, to: 253},
+    {from: 66, to: 273},
+    {from: 66, to: 284},
+    {from: 66, to: 306},
+    {from: 66, to: 315},
+    {from: 66, to: 380},
+    {from: 66, to: 389},
+    {from: 66, to: 402},
+    {from: 66, to: 467},
+    {from: 66, to: 495},
+    {from: 66, to: 570},
+    {from: 66, to: 584},
+    {from: 66, to: 598},
+    {from: 66, to: 599},
+    {from: 66, to: 666},
+    {from: 67, to: 68},
+    {from: 67, to: 73},
+    {from: 67, to: 183},
+    {from: 67, to: 184},
+    {from: 67, to: 198},
+    {from: 67, to: 204},
+    {from: 67, to: 270},
+    {from: 67, to: 302},
+    {from: 67, to: 312},
+    {from: 67, to: 497},
+    {from: 67, to: 516},
+    {from: 67, to: 524},
+    {from: 67, to: 538},
+    {from: 67, to: 633},
+    {from: 67, to: 635},
+    {from: 67, to: 636},
+    {from: 67, to: 637},
+    {from: 67, to: 684},
+    {from: 67, to: 688},
+    {from: 67, to: 697},
+    {from: 67, to: 736},
+    {from: 68, to: 73},
+    {from: 68, to: 183},
+    {from: 68, to: 184},
+    {from: 68, to: 198},
+    {from: 68, to: 204},
+    {from: 68, to: 242},
+    {from: 68, to: 270},
+    {from: 68, to: 302},
+    {from: 68, to: 312},
+    {from: 68, to: 497},
+    {from: 68, to: 516},
+    {from: 68, to: 524},
+    {from: 68, to: 538},
+    {from: 68, to: 574},
+    {from: 68, to: 633},
+    {from: 68, to: 635},
+    {from: 68, to: 636},
+    {from: 68, to: 637},
+    {from: 68, to: 684},
+    {from: 68, to: 688},
+    {from: 68, to: 697},
+    {from: 68, to: 718},
+    {from: 68, to: 736},
+    {from: 69, to: 82},
+    {from: 69, to: 193},
+    {from: 69, to: 264},
+    {from: 69, to: 281},
+    {from: 69, to: 282},
+    {from: 69, to: 285},
+    {from: 69, to: 337},
+    {from: 69, to: 374},
+    {from: 69, to: 382},
+    {from: 69, to: 387},
+    {from: 69, to: 396},
+    {from: 69, to: 438},
+    {from: 69, to: 441},
+    {from: 69, to: 465},
+    {from: 69, to: 466},
+    {from: 69, to: 491},
+    {from: 69, to: 633},
+    {from: 69, to: 646},
+    {from: 69, to: 647},
+    {from: 69, to: 650},
+    {from: 69, to: 651},
+    {from: 69, to: 689},
+    {from: 69, to: 724},
+    {from: 69, to: 725},
+    {from: 69, to: 729},
+    {from: 69, to: 730},
+    {from: 69, to: 734},
+    {from: 69, to: 735},
+    {from: 70, to: 202},
+    {from: 70, to: 211},
+    {from: 70, to: 212},
+    {from: 70, to: 214},
+    {from: 70, to: 221},
+    {from: 70, to: 225},
+    {from: 70, to: 261},
+    {from: 70, to: 287},
+    {from: 70, to: 319},
+    {from: 70, to: 358},
+    {from: 70, to: 419},
+    {from: 70, to: 424},
+    {from: 70, to: 450},
+    {from: 70, to: 451},
+    {from: 70, to: 462},
+    {from: 70, to: 487},
+    {from: 70, to: 555},
+    {from: 70, to: 600},
+    {from: 70, to: 608},
+    {from: 70, to: 642},
+    {from: 70, to: 645},
+    {from: 71, to: 83},
+    {from: 71, to: 84},
+    {from: 71, to: 107},
+    {from: 71, to: 113},
+    {from: 71, to: 146},
+    {from: 71, to: 159},
+    {from: 71, to: 182},
+    {from: 71, to: 210},
+    {from: 71, to: 217},
+    {from: 71, to: 226},
+    {from: 71, to: 278},
+    {from: 71, to: 302},
+    {from: 71, to: 321},
+    {from: 71, to: 337},
+    {from: 71, to: 407},
+    {from: 71, to: 420},
+    {from: 71, to: 488},
+    {from: 71, to: 533},
+    {from: 71, to: 579},
+    {from: 71, to: 626},
+    {from: 71, to: 627},
+    {from: 71, to: 662},
+    {from: 71, to: 705},
+    {from: 71, to: 714},
+    {from: 72, to: 75},
+    {from: 72, to: 115},
+    {from: 72, to: 190},
+    {from: 72, to: 194},
+    {from: 72, to: 200},
+    {from: 72, to: 259},
+    {from: 72, to: 342},
+    {from: 72, to: 363},
+    {from: 72, to: 379},
+    {from: 72, to: 383},
+    {from: 72, to: 403},
+    {from: 72, to: 500},
+    {from: 72, to: 505},
+    {from: 72, to: 537},
+    {from: 72, to: 574},
+    {from: 72, to: 587},
+    {from: 72, to: 597},
+    {from: 72, to: 649},
+    {from: 72, to: 691},
+    {from: 72, to: 702},
+    {from: 72, to: 706},
+    {from: 73, to: 183},
+    {from: 73, to: 184},
+    {from: 73, to: 198},
+    {from: 73, to: 204},
+    {from: 73, to: 270},
+    {from: 73, to: 302},
+    {from: 73, to: 312},
+    {from: 73, to: 497},
+    {from: 73, to: 516},
+    {from: 73, to: 524},
+    {from: 73, to: 538},
+    {from: 73, to: 633},
+    {from: 73, to: 635},
+    {from: 73, to: 636},
+    {from: 73, to: 637},
+    {from: 73, to: 684},
+    {from: 73, to: 688},
+    {from: 73, to: 697},
+    {from: 73, to: 736},
+    {from: 74, to: 140},
+    {from: 74, to: 172},
+    {from: 74, to: 177},
+    {from: 74, to: 179},
+    {from: 74, to: 289},
+    {from: 74, to: 311},
+    {from: 74, to: 384},
+    {from: 74, to: 386},
+    {from: 74, to: 408},
+    {from: 74, to: 428},
+    {from: 74, to: 460},
+    {from: 74, to: 522},
+    {from: 74, to: 527},
+    {from: 74, to: 532},
+    {from: 74, to: 540},
+    {from: 74, to: 612},
+    {from: 74, to: 625},
+    {from: 74, to: 654},
+    {from: 74, to: 667},
+    {from: 74, to: 677},
+    {from: 74, to: 679},
+    {from: 74, to: 685},
+    {from: 74, to: 704},
+    {from: 74, to: 707},
+    {from: 74, to: 732},
+    {from: 75, to: 115},
+    {from: 75, to: 190},
+    {from: 75, to: 194},
+    {from: 75, to: 200},
+    {from: 75, to: 259},
+    {from: 75, to: 342},
+    {from: 75, to: 363},
+    {from: 75, to: 379},
+    {from: 75, to: 383},
+    {from: 75, to: 403},
+    {from: 75, to: 500},
+    {from: 75, to: 505},
+    {from: 75, to: 537},
+    {from: 75, to: 574},
+    {from: 75, to: 587},
+    {from: 75, to: 597},
+    {from: 75, to: 649},
+    {from: 75, to: 691},
+    {from: 75, to: 702},
+    {from: 75, to: 706},
+    {from: 76, to: 87},
+    {from: 76, to: 196},
+    {from: 76, to: 288},
+    {from: 76, to: 303},
+    {from: 76, to: 381},
+    {from: 76, to: 409},
+    {from: 76, to: 421},
+    {from: 76, to: 425},
+    {from: 76, to: 433},
+    {from: 76, to: 440},
+    {from: 76, to: 472},
+    {from: 76, to: 473},
+    {from: 76, to: 498},
+    {from: 76, to: 508},
+    {from: 76, to: 521},
+    {from: 76, to: 523},
+    {from: 76, to: 543},
+    {from: 76, to: 562},
+    {from: 76, to: 565},
+    {from: 76, to: 573},
+    {from: 76, to: 589},
+    {from: 76, to: 594},
+    {from: 76, to: 604},
+    {from: 76, to: 629},
+    {from: 76, to: 663},
+    {from: 76, to: 679},
+    {from: 76, to: 728},
+    {from: 77, to: 81},
+    {from: 77, to: 148},
+    {from: 77, to: 208},
+    {from: 77, to: 298},
+    {from: 77, to: 307},
+    {from: 77, to: 310},
+    {from: 77, to: 313},
+    {from: 77, to: 458},
+    {from: 77, to: 459},
+    {from: 77, to: 468},
+    {from: 77, to: 470},
+    {from: 77, to: 471},
+    {from: 77, to: 477},
+    {from: 77, to: 479},
+    {from: 77, to: 515},
+    {from: 77, to: 518},
+    {from: 77, to: 541},
+    {from: 77, to: 620},
+    {from: 77, to: 680},
+    {from: 77, to: 686},
+    {from: 78, to: 137},
+    {from: 78, to: 192},
+    {from: 78, to: 247},
+    {from: 78, to: 273},
+    {from: 78, to: 284},
+    {from: 78, to: 306},
+    {from: 78, to: 315},
+    {from: 78, to: 380},
+    {from: 78, to: 389},
+    {from: 78, to: 467},
+    {from: 78, to: 495},
+    {from: 78, to: 570},
+    {from: 78, to: 584},
+    {from: 78, to: 598},
+    {from: 78, to: 599},
+    {from: 78, to: 666},
+    {from: 79, to: 82},
+    {from: 79, to: 122},
+    {from: 79, to: 140},
+    {from: 79, to: 145},
+    {from: 79, to: 203},
+    {from: 79, to: 316},
+    {from: 79, to: 327},
+    {from: 79, to: 374},
+    {from: 79, to: 375},
+    {from: 79, to: 385},
+    {from: 79, to: 433},
+    {from: 79, to: 442},
+    {from: 79, to: 454},
+    {from: 79, to: 455},
+    {from: 79, to: 475},
+    {from: 79, to: 480},
+    {from: 79, to: 498},
+    {from: 79, to: 517},
+    {from: 79, to: 573},
+    {from: 79, to: 577},
+    {from: 79, to: 611},
+    {from: 79, to: 614},
+    {from: 79, to: 623},
+    {from: 79, to: 648},
+    {from: 79, to: 678},
+    {from: 79, to: 687},
+    {from: 79, to: 721},
+    {from: 80, to: 116},
+    {from: 80, to: 139},
+    {from: 80, to: 144},
+    {from: 80, to: 167},
+    {from: 80, to: 231},
+    {from: 80, to: 232},
+    {from: 80, to: 238},
+    {from: 80, to: 258},
+    {from: 80, to: 303},
+    {from: 80, to: 308},
+    {from: 80, to: 335},
+    {from: 80, to: 348},
+    {from: 80, to: 415},
+    {from: 80, to: 434},
+    {from: 80, to: 575},
+    {from: 80, to: 576},
+    {from: 80, to: 583},
+    {from: 80, to: 603},
+    {from: 80, to: 616},
+    {from: 80, to: 668},
+    {from: 80, to: 713},
+    {from: 81, to: 148},
+    {from: 81, to: 208},
+    {from: 81, to: 298},
+    {from: 81, to: 307},
+    {from: 81, to: 310},
+    {from: 81, to: 313},
+    {from: 81, to: 458},
+    {from: 81, to: 459},
+    {from: 81, to: 468},
+    {from: 81, to: 470},
+    {from: 81, to: 471},
+    {from: 81, to: 474},
+    {from: 81, to: 477},
+    {from: 81, to: 479},
+    {from: 81, to: 515},
+    {from: 81, to: 518},
+    {from: 81, to: 541},
+    {from: 81, to: 620},
+    {from: 81, to: 680},
+    {from: 81, to: 686},
+    {from: 82, to: 122},
+    {from: 82, to: 203},
+    {from: 82, to: 327},
+    {from: 82, to: 337},
+    {from: 82, to: 374},
+    {from: 82, to: 385},
+    {from: 82, to: 387},
+    {from: 82, to: 396},
+    {from: 82, to: 433},
+    {from: 82, to: 442},
+    {from: 82, to: 454},
+    {from: 82, to: 475},
+    {from: 82, to: 480},
+    {from: 82, to: 498},
+    {from: 82, to: 517},
+    {from: 82, to: 573},
+    {from: 82, to: 577},
+    {from: 82, to: 611},
+    {from: 82, to: 614},
+    {from: 82, to: 623},
+    {from: 82, to: 633},
+    {from: 82, to: 648},
+    {from: 82, to: 678},
+    {from: 82, to: 687},
+    {from: 83, to: 84},
+    {from: 83, to: 107},
+    {from: 83, to: 113},
+    {from: 83, to: 146},
+    {from: 83, to: 182},
+    {from: 83, to: 210},
+    {from: 83, to: 217},
+    {from: 83, to: 278},
+    {from: 83, to: 321},
+    {from: 83, to: 337},
+    {from: 83, to: 407},
+    {from: 83, to: 420},
+    {from: 83, to: 488},
+    {from: 83, to: 533},
+    {from: 83, to: 579},
+    {from: 83, to: 626},
+    {from: 83, to: 627},
+    {from: 83, to: 662},
+    {from: 83, to: 705},
+    {from: 84, to: 107},
+    {from: 84, to: 113},
+    {from: 84, to: 146},
+    {from: 84, to: 182},
+    {from: 84, to: 210},
+    {from: 84, to: 217},
+    {from: 84, to: 278},
+    {from: 84, to: 321},
+    {from: 84, to: 337},
+    {from: 84, to: 407},
+    {from: 84, to: 420},
+    {from: 84, to: 488},
+    {from: 84, to: 533},
+    {from: 84, to: 579},
+    {from: 84, to: 626},
+    {from: 84, to: 627},
+    {from: 84, to: 662},
+    {from: 84, to: 705},
+    {from: 84, to: 731},
+    {from: 85, to: 135},
+    {from: 85, to: 145},
+    {from: 85, to: 147},
+    {from: 85, to: 151},
+    {from: 85, to: 187},
+    {from: 85, to: 224},
+    {from: 85, to: 233},
+    {from: 85, to: 279},
+    {from: 85, to: 280},
+    {from: 85, to: 289},
+    {from: 85, to: 323},
+    {from: 85, to: 331},
+    {from: 85, to: 376},
+    {from: 85, to: 431},
+    {from: 85, to: 436},
+    {from: 85, to: 443},
+    {from: 85, to: 490},
+    {from: 85, to: 529},
+    {from: 85, to: 547},
+    {from: 85, to: 567},
+    {from: 85, to: 586},
+    {from: 85, to: 676},
+    {from: 85, to: 699},
+    {from: 85, to: 717},
+    {from: 86, to: 93},
+    {from: 86, to: 99},
+    {from: 86, to: 131},
+    {from: 86, to: 180},
+    {from: 86, to: 188},
+    {from: 86, to: 216},
+    {from: 86, to: 277},
+    {from: 86, to: 286},
+    {from: 86, to: 300},
+    {from: 86, to: 332},
+    {from: 86, to: 333},
+    {from: 86, to: 428},
+    {from: 86, to: 511},
+    {from: 86, to: 528},
+    {from: 86, to: 571},
+    {from: 86, to: 580},
+    {from: 86, to: 593},
+    {from: 86, to: 601},
+    {from: 86, to: 618},
+    {from: 86, to: 619},
+    {from: 86, to: 652},
+    {from: 86, to: 662},
+    {from: 86, to: 703},
+    {from: 86, to: 716},
+    {from: 87, to: 185},
+    {from: 87, to: 196},
+    {from: 87, to: 212},
+    {from: 87, to: 288},
+    {from: 87, to: 381},
+    {from: 87, to: 409},
+    {from: 87, to: 421},
+    {from: 87, to: 425},
+    {from: 87, to: 440},
+    {from: 87, to: 449},
+    {from: 87, to: 472},
+    {from: 87, to: 473},
+    {from: 87, to: 490},
+    {from: 87, to: 508},
+    {from: 87, to: 521},
+    {from: 87, to: 523},
+    {from: 87, to: 543},
+    {from: 87, to: 562},
+    {from: 87, to: 565},
+    {from: 87, to: 589},
+    {from: 87, to: 594},
+    {from: 87, to: 604},
+    {from: 87, to: 622},
+    {from: 87, to: 663},
+    {from: 87, to: 675},
+    {from: 87, to: 676},
+    {from: 87, to: 728},
+    {from: 88, to: 162},
+    {from: 88, to: 177},
+    {from: 88, to: 215},
+    {from: 88, to: 218},
+    {from: 88, to: 221},
+    {from: 88, to: 241},
+    {from: 88, to: 260},
+    {from: 88, to: 261},
+    {from: 88, to: 266},
+    {from: 88, to: 271},
+    {from: 88, to: 279},
+    {from: 88, to: 339},
+    {from: 88, to: 364},
+    {from: 88, to: 366},
+    {from: 88, to: 422},
+    {from: 88, to: 453},
+    {from: 88, to: 504},
+    {from: 88, to: 572},
+    {from: 88, to: 578},
+    {from: 88, to: 591},
+    {from: 88, to: 596},
+    {from: 88, to: 602},
+    {from: 88, to: 610},
+    {from: 88, to: 661},
+    {from: 88, to: 665},
+    {from: 88, to: 690},
+    {from: 88, to: 692},
+    {from: 88, to: 693},
+    {from: 88, to: 721},
+    {from: 88, to: 723},
+    {from: 89, to: 114},
+    {from: 89, to: 127},
+    {from: 89, to: 159},
+    {from: 89, to: 160},
+    {from: 89, to: 161},
+    {from: 89, to: 246},
+    {from: 89, to: 257},
+    {from: 89, to: 297},
+    {from: 89, to: 322},
+    {from: 89, to: 398},
+    {from: 89, to: 474},
+    {from: 89, to: 485},
+    {from: 89, to: 553},
+    {from: 89, to: 621},
+    {from: 89, to: 632},
+    {from: 89, to: 638},
+    {from: 89, to: 639},
+    {from: 89, to: 657},
+    {from: 89, to: 671},
+    {from: 89, to: 715},
+    {from: 89, to: 726},
+    {from: 90, to: 91},
+    {from: 90, to: 117},
+    {from: 90, to: 126},
+    {from: 90, to: 134},
+    {from: 90, to: 156},
+    {from: 90, to: 213},
+    {from: 90, to: 242},
+    {from: 90, to: 265},
+    {from: 90, to: 326},
+    {from: 90, to: 341},
+    {from: 90, to: 365},
+    {from: 90, to: 375},
+    {from: 90, to: 406},
+    {from: 90, to: 476},
+    {from: 90, to: 502},
+    {from: 90, to: 513},
+    {from: 90, to: 530},
+    {from: 90, to: 544},
+    {from: 90, to: 549},
+    {from: 90, to: 681},
+    {from: 90, to: 683},
+    {from: 91, to: 117},
+    {from: 91, to: 126},
+    {from: 91, to: 134},
+    {from: 91, to: 156},
+    {from: 91, to: 213},
+    {from: 91, to: 242},
+    {from: 91, to: 265},
+    {from: 91, to: 326},
+    {from: 91, to: 341},
+    {from: 91, to: 365},
+    {from: 91, to: 375},
+    {from: 91, to: 406},
+    {from: 91, to: 476},
+    {from: 91, to: 502},
+    {from: 91, to: 513},
+    {from: 91, to: 530},
+    {from: 91, to: 544},
+    {from: 91, to: 613},
+    {from: 91, to: 681},
+    {from: 91, to: 683},
+    {from: 92, to: 98},
+    {from: 92, to: 176},
+    {from: 92, to: 178},
+    {from: 92, to: 197},
+    {from: 92, to: 328},
+    {from: 92, to: 329},
+    {from: 92, to: 351},
+    {from: 92, to: 367},
+    {from: 92, to: 372},
+    {from: 92, to: 426},
+    {from: 92, to: 427},
+    {from: 92, to: 456},
+    {from: 92, to: 464},
+    {from: 92, to: 492},
+    {from: 92, to: 536},
+    {from: 92, to: 549},
+    {from: 92, to: 551},
+    {from: 92, to: 609},
+    {from: 92, to: 615},
+    {from: 92, to: 700},
+    {from: 92, to: 718},
+    {from: 93, to: 131},
+    {from: 93, to: 171},
+    {from: 93, to: 180},
+    {from: 93, to: 188},
+    {from: 93, to: 200},
+    {from: 93, to: 216},
+    {from: 93, to: 277},
+    {from: 93, to: 286},
+    {from: 93, to: 332},
+    {from: 93, to: 333},
+    {from: 93, to: 428},
+    {from: 93, to: 511},
+    {from: 93, to: 528},
+    {from: 93, to: 571},
+    {from: 93, to: 579},
+    {from: 93, to: 580},
+    {from: 93, to: 593},
+    {from: 93, to: 601},
+    {from: 93, to: 618},
+    {from: 93, to: 619},
+    {from: 93, to: 652},
+    {from: 93, to: 703},
+    {from: 93, to: 716},
+    {from: 94, to: 133},
+    {from: 94, to: 149},
+    {from: 94, to: 171},
+    {from: 94, to: 244},
+    {from: 94, to: 314},
+    {from: 94, to: 325},
+    {from: 94, to: 338},
+    {from: 94, to: 345},
+    {from: 94, to: 350},
+    {from: 94, to: 396},
+    {from: 94, to: 417},
+    {from: 94, to: 496},
+    {from: 94, to: 507},
+    {from: 94, to: 534},
+    {from: 94, to: 566},
+    {from: 94, to: 606},
+    {from: 94, to: 613},
+    {from: 94, to: 659},
+    {from: 94, to: 673},
+    {from: 94, to: 682},
+    {from: 94, to: 714},
+    {from: 95, to: 109},
+    {from: 95, to: 119},
+    {from: 95, to: 128},
+    {from: 95, to: 136},
+    {from: 95, to: 152},
+    {from: 95, to: 163},
+    {from: 95, to: 206},
+    {from: 95, to: 244},
+    {from: 95, to: 248},
+    {from: 95, to: 336},
+    {from: 95, to: 343},
+    {from: 95, to: 360},
+    {from: 95, to: 378},
+    {from: 95, to: 388},
+    {from: 95, to: 448},
+    {from: 95, to: 496},
+    {from: 95, to: 501},
+    {from: 95, to: 506},
+    {from: 95, to: 550},
+    {from: 95, to: 563},
+    {from: 95, to: 588},
+    {from: 95, to: 617},
+    {from: 95, to: 630},
+    {from: 95, to: 712},
+    {from: 95, to: 727},
+    {from: 96, to: 99},
+    {from: 96, to: 100},
+    {from: 96, to: 105},
+    {from: 96, to: 106},
+    {from: 96, to: 130},
+    {from: 96, to: 153},
+    {from: 96, to: 181},
+    {from: 96, to: 186},
+    {from: 96, to: 219},
+    {from: 96, to: 234},
+    {from: 96, to: 304},
+    {from: 96, to: 309},
+    {from: 96, to: 366},
+    {from: 96, to: 369},
+    {from: 96, to: 370},
+    {from: 96, to: 457},
+    {from: 96, to: 554},
+    {from: 96, to: 630},
+    {from: 96, to: 672},
+    {from: 96, to: 701},
+    {from: 97, to: 108},
+    {from: 97, to: 173},
+    {from: 97, to: 195},
+    {from: 97, to: 205},
+    {from: 97, to: 218},
+    {from: 97, to: 274},
+    {from: 97, to: 296},
+    {from: 97, to: 418},
+    {from: 97, to: 435},
+    {from: 97, to: 437},
+    {from: 97, to: 493},
+    {from: 97, to: 494},
+    {from: 97, to: 519},
+    {from: 97, to: 525},
+    {from: 97, to: 526},
+    {from: 97, to: 582},
+    {from: 97, to: 585},
+    {from: 97, to: 605},
+    {from: 97, to: 631},
+    {from: 97, to: 655},
+    {from: 97, to: 722},
+    {from: 98, to: 176},
+    {from: 98, to: 178},
+    {from: 98, to: 197},
+    {from: 98, to: 328},
+    {from: 98, to: 329},
+    {from: 98, to: 351},
+    {from: 98, to: 367},
+    {from: 98, to: 372},
+    {from: 98, to: 426},
+    {from: 98, to: 427},
+    {from: 98, to: 456},
+    {from: 98, to: 464},
+    {from: 98, to: 492},
+    {from: 98, to: 536},
+    {from: 98, to: 549},
+    {from: 98, to: 551},
+    {from: 98, to: 609},
+    {from: 98, to: 615},
+    {from: 98, to: 700},
+    {from: 98, to: 718},
+    {from: 99, to: 100},
+    {from: 99, to: 105},
+    {from: 99, to: 106},
+    {from: 99, to: 130},
+    {from: 99, to: 153},
+    {from: 99, to: 181},
+    {from: 99, to: 219},
+    {from: 99, to: 234},
+    {from: 99, to: 300},
+    {from: 99, to: 304},
+    {from: 99, to: 309},
+    {from: 99, to: 366},
+    {from: 99, to: 369},
+    {from: 99, to: 370},
+    {from: 99, to: 457},
+    {from: 99, to: 554},
+    {from: 99, to: 630},
+    {from: 99, to: 662},
+    {from: 99, to: 672},
+    {from: 99, to: 701},
+    {from: 100, to: 105},
+    {from: 100, to: 106},
+    {from: 100, to: 130},
+    {from: 100, to: 153},
+    {from: 100, to: 181},
+    {from: 100, to: 219},
+    {from: 100, to: 234},
+    {from: 100, to: 304},
+    {from: 100, to: 309},
+    {from: 100, to: 366},
+    {from: 100, to: 369},
+    {from: 100, to: 370},
+    {from: 100, to: 457},
+    {from: 100, to: 554},
+    {from: 100, to: 630},
+    {from: 100, to: 672},
+    {from: 100, to: 701},
+    {from: 101, to: 112},
+    {from: 101, to: 124},
+    {from: 101, to: 132},
+    {from: 101, to: 189},
+    {from: 101, to: 207},
+    {from: 101, to: 209},
+    {from: 101, to: 214},
+    {from: 101, to: 223},
+    {from: 101, to: 230},
+    {from: 101, to: 239},
+    {from: 101, to: 262},
+    {from: 101, to: 320},
+    {from: 101, to: 344},
+    {from: 101, to: 354},
+    {from: 101, to: 361},
+    {from: 101, to: 362},
+    {from: 101, to: 445},
+    {from: 101, to: 457},
+    {from: 101, to: 483},
+    {from: 101, to: 484},
+    {from: 101, to: 512},
+    {from: 102, to: 120},
+    {from: 102, to: 186},
+    {from: 102, to: 201},
+    {from: 102, to: 222},
+    {from: 102, to: 228},
+    {from: 102, to: 235},
+    {from: 102, to: 236},
+    {from: 102, to: 264},
+    {from: 102, to: 305},
+    {from: 102, to: 324},
+    {from: 102, to: 334},
+    {from: 102, to: 353},
+    {from: 102, to: 368},
+    {from: 102, to: 429},
+    {from: 102, to: 489},
+    {from: 102, to: 499},
+    {from: 102, to: 548},
+    {from: 102, to: 552},
+    {from: 102, to: 595},
+    {from: 102, to: 697},
+    {from: 102, to: 710},
+    {from: 103, to: 104},
+    {from: 103, to: 169},
+    {from: 103, to: 229},
+    {from: 103, to: 256},
+    {from: 103, to: 267},
+    {from: 103, to: 275},
+    {from: 103, to: 276},
+    {from: 103, to: 295},
+    {from: 103, to: 317},
+    {from: 103, to: 318},
+    {from: 103, to: 355},
+    {from: 103, to: 357},
+    {from: 103, to: 446},
+    {from: 103, to: 509},
+    {from: 103, to: 510},
+    {from: 103, to: 546},
+    {from: 103, to: 564},
+    {from: 103, to: 581},
+    {from: 103, to: 592},
+    {from: 104, to: 169},
+    {from: 104, to: 229},
+    {from: 104, to: 256},
+    {from: 104, to: 267},
+    {from: 104, to: 275},
+    {from: 104, to: 276},
+    {from: 104, to: 295},
+    {from: 104, to: 317},
+    {from: 104, to: 318},
+    {from: 104, to: 355},
+    {from: 104, to: 357},
+    {from: 104, to: 446},
+    {from: 104, to: 509},
+    {from: 104, to: 510},
+    {from: 104, to: 546},
+    {from: 104, to: 564},
+    {from: 104, to: 581},
+    {from: 104, to: 592},
+    {from: 105, to: 106},
+    {from: 105, to: 130},
+    {from: 105, to: 153},
+    {from: 105, to: 181},
+    {from: 105, to: 219},
+    {from: 105, to: 234},
+    {from: 105, to: 304},
+    {from: 105, to: 309},
+    {from: 105, to: 366},
+    {from: 105, to: 369},
+    {from: 105, to: 370},
+    {from: 105, to: 457},
+    {from: 105, to: 554},
+    {from: 105, to: 630},
+    {from: 105, to: 672},
+    {from: 105, to: 701},
+    {from: 106, to: 130},
+    {from: 106, to: 153},
+    {from: 106, to: 181},
+    {from: 106, to: 219},
+    {from: 106, to: 234},
+    {from: 106, to: 304},
+    {from: 106, to: 309},
+    {from: 106, to: 366},
+    {from: 106, to: 369},
+    {from: 106, to: 370},
+    {from: 106, to: 457},
+    {from: 106, to: 554},
+    {from: 106, to: 630},
+    {from: 106, to: 672},
+    {from: 106, to: 701},
+    {from: 107, to: 113},
+    {from: 107, to: 146},
+    {from: 107, to: 182},
+    {from: 107, to: 210},
+    {from: 107, to: 217},
+    {from: 107, to: 278},
+    {from: 107, to: 321},
+    {from: 107, to: 337},
+    {from: 107, to: 407},
+    {from: 107, to: 420},
+    {from: 107, to: 488},
+    {from: 107, to: 533},
+    {from: 107, to: 579},
+    {from: 107, to: 626},
+    {from: 107, to: 627},
+    {from: 107, to: 662},
+    {from: 107, to: 705},
+    {from: 108, to: 173},
+    {from: 108, to: 195},
+    {from: 108, to: 205},
+    {from: 108, to: 218},
+    {from: 108, to: 274},
+    {from: 108, to: 296},
+    {from: 108, to: 418},
+    {from: 108, to: 435},
+    {from: 108, to: 493},
+    {from: 108, to: 494},
+    {from: 108, to: 519},
+    {from: 108, to: 525},
+    {from: 108, to: 526},
+    {from: 108, to: 582},
+    {from: 108, to: 585},
+    {from: 108, to: 605},
+    {from: 108, to: 631},
+    {from: 108, to: 655},
+    {from: 108, to: 722},
+    {from: 109, to: 119},
+    {from: 109, to: 128},
+    {from: 109, to: 136},
+    {from: 109, to: 152},
+    {from: 109, to: 163},
+    {from: 109, to: 206},
+    {from: 109, to: 248},
+    {from: 109, to: 336},
+    {from: 109, to: 343},
+    {from: 109, to: 360},
+    {from: 109, to: 378},
+    {from: 109, to: 388},
+    {from: 109, to: 448},
+    {from: 109, to: 501},
+    {from: 109, to: 506},
+    {from: 109, to: 550},
+    {from: 109, to: 563},
+    {from: 109, to: 588},
+    {from: 109, to: 617},
+    {from: 109, to: 712},
+    {from: 109, to: 727},
+    {from: 110, to: 111},
+    {from: 110, to: 150},
+    {from: 110, to: 151},
+    {from: 110, to: 154},
+    {from: 110, to: 155},
+    {from: 110, to: 164},
+    {from: 110, to: 179},
+    {from: 110, to: 227},
+    {from: 110, to: 231},
+    {from: 110, to: 238},
+    {from: 110, to: 245},
+    {from: 110, to: 294},
+    {from: 110, to: 316},
+    {from: 110, to: 342},
+    {from: 110, to: 349},
+    {from: 110, to: 371},
+    {from: 110, to: 373},
+    {from: 110, to: 397},
+    {from: 110, to: 547},
+    {from: 110, to: 569},
+    {from: 110, to: 572},
+    {from: 110, to: 586},
+    {from: 110, to: 591},
+    {from: 110, to: 627},
+    {from: 110, to: 629},
+    {from: 110, to: 643},
+    {from: 110, to: 644},
+    {from: 110, to: 717},
+    {from: 110, to: 719},
+    {from: 110, to: 720},
+    {from: 111, to: 135},
+    {from: 111, to: 150},
+    {from: 111, to: 154},
+    {from: 111, to: 155},
+    {from: 111, to: 164},
+    {from: 111, to: 227},
+    {from: 111, to: 245},
+    {from: 111, to: 294},
+    {from: 111, to: 316},
+    {from: 111, to: 319},
+    {from: 111, to: 349},
+    {from: 111, to: 368},
+    {from: 111, to: 371},
+    {from: 111, to: 373},
+    {from: 111, to: 397},
+    {from: 111, to: 419},
+    {from: 111, to: 429},
+    {from: 111, to: 489},
+    {from: 111, to: 529},
+    {from: 111, to: 569},
+    {from: 111, to: 572},
+    {from: 111, to: 591},
+    {from: 111, to: 629},
+    {from: 111, to: 643},
+    {from: 111, to: 644},
+    {from: 111, to: 719},
+    {from: 111, to: 720},
+    {from: 112, to: 124},
+    {from: 112, to: 132},
+    {from: 112, to: 189},
+    {from: 112, to: 207},
+    {from: 112, to: 209},
+    {from: 112, to: 214},
+    {from: 112, to: 223},
+    {from: 112, to: 230},
+    {from: 112, to: 239},
+    {from: 112, to: 262},
+    {from: 112, to: 320},
+    {from: 112, to: 344},
+    {from: 112, to: 354},
+    {from: 112, to: 361},
+    {from: 112, to: 362},
+    {from: 112, to: 445},
+    {from: 112, to: 483},
+    {from: 112, to: 484},
+    {from: 112, to: 512},
+    {from: 113, to: 146},
+    {from: 113, to: 182},
+    {from: 113, to: 210},
+    {from: 113, to: 217},
+    {from: 113, to: 278},
+    {from: 113, to: 321},
+    {from: 113, to: 337},
+    {from: 113, to: 407},
+    {from: 113, to: 420},
+    {from: 113, to: 488},
+    {from: 113, to: 533},
+    {from: 113, to: 579},
+    {from: 113, to: 626},
+    {from: 113, to: 627},
+    {from: 113, to: 662},
+    {from: 113, to: 674},
+    {from: 113, to: 705},
+    {from: 114, to: 127},
+    {from: 114, to: 159},
+    {from: 114, to: 160},
+    {from: 114, to: 161},
+    {from: 114, to: 246},
+    {from: 114, to: 257},
+    {from: 114, to: 297},
+    {from: 114, to: 322},
+    {from: 114, to: 398},
+    {from: 114, to: 421},
+    {from: 114, to: 472},
+    {from: 114, to: 474},
+    {from: 114, to: 485},
+    {from: 114, to: 523},
+    {from: 114, to: 553},
+    {from: 114, to: 621},
+    {from: 114, to: 632},
+    {from: 114, to: 638},
+    {from: 114, to: 639},
+    {from: 114, to: 649},
+    {from: 114, to: 657},
+    {from: 114, to: 671},
+    {from: 114, to: 682},
+    {from: 114, to: 715},
+    {from: 114, to: 726},
+    {from: 115, to: 190},
+    {from: 115, to: 194},
+    {from: 115, to: 200},
+    {from: 115, to: 259},
+    {from: 115, to: 342},
+    {from: 115, to: 363},
+    {from: 115, to: 379},
+    {from: 115, to: 383},
+    {from: 115, to: 403},
+    {from: 115, to: 500},
+    {from: 115, to: 505},
+    {from: 115, to: 537},
+    {from: 115, to: 574},
+    {from: 115, to: 587},
+    {from: 115, to: 597},
+    {from: 115, to: 649},
+    {from: 115, to: 691},
+    {from: 115, to: 702},
+    {from: 115, to: 706},
+    {from: 116, to: 139},
+    {from: 116, to: 144},
+    {from: 116, to: 150},
+    {from: 116, to: 231},
+    {from: 116, to: 232},
+    {from: 116, to: 238},
+    {from: 116, to: 258},
+    {from: 116, to: 303},
+    {from: 116, to: 308},
+    {from: 116, to: 318},
+    {from: 116, to: 335},
+    {from: 116, to: 348},
+    {from: 116, to: 371},
+    {from: 116, to: 415},
+    {from: 116, to: 434},
+    {from: 116, to: 460},
+    {from: 116, to: 528},
+    {from: 116, to: 562},
+    {from: 116, to: 575},
+    {from: 116, to: 576},
+    {from: 116, to: 583},
+    {from: 116, to: 603},
+    {from: 116, to: 606},
+    {from: 116, to: 616},
+    {from: 116, to: 646},
+    {from: 116, to: 668},
+    {from: 116, to: 713},
+    {from: 117, to: 126},
+    {from: 117, to: 134},
+    {from: 117, to: 156},
+    {from: 117, to: 213},
+    {from: 117, to: 242},
+    {from: 117, to: 265},
+    {from: 117, to: 326},
+    {from: 117, to: 341},
+    {from: 117, to: 365},
+    {from: 117, to: 375},
+    {from: 117, to: 406},
+    {from: 117, to: 476},
+    {from: 117, to: 502},
+    {from: 117, to: 513},
+    {from: 117, to: 530},
+    {from: 117, to: 544},
+    {from: 117, to: 681},
+    {from: 117, to: 683},
+    {from: 117, to: 700},
+    {from: 118, to: 138},
+    {from: 118, to: 199},
+    {from: 118, to: 220},
+    {from: 118, to: 272},
+    {from: 118, to: 340},
+    {from: 118, to: 346},
+    {from: 118, to: 347},
+    {from: 118, to: 387},
+    {from: 118, to: 404},
+    {from: 118, to: 437},
+    {from: 118, to: 503},
+    {from: 118, to: 520},
+    {from: 118, to: 590},
+    {from: 118, to: 595},
+    {from: 118, to: 628},
+    {from: 118, to: 664},
+    {from: 118, to: 670},
+    {from: 118, to: 709},
+    {from: 119, to: 128},
+    {from: 119, to: 136},
+    {from: 119, to: 152},
+    {from: 119, to: 163},
+    {from: 119, to: 206},
+    {from: 119, to: 248},
+    {from: 119, to: 336},
+    {from: 119, to: 343},
+    {from: 119, to: 360},
+    {from: 119, to: 378},
+    {from: 119, to: 388},
+    {from: 119, to: 448},
+    {from: 119, to: 501},
+    {from: 119, to: 506},
+    {from: 119, to: 550},
+    {from: 119, to: 563},
+    {from: 119, to: 588},
+    {from: 119, to: 617},
+    {from: 119, to: 712},
+    {from: 119, to: 727},
+    {from: 120, to: 186},
+    {from: 120, to: 201},
+    {from: 120, to: 222},
+    {from: 120, to: 228},
+    {from: 120, to: 235},
+    {from: 120, to: 236},
+    {from: 120, to: 293},
+    {from: 120, to: 305},
+    {from: 120, to: 324},
+    {from: 120, to: 334},
+    {from: 120, to: 353},
+    {from: 120, to: 368},
+    {from: 120, to: 429},
+    {from: 120, to: 489},
+    {from: 120, to: 499},
+    {from: 120, to: 548},
+    {from: 120, to: 552},
+    {from: 120, to: 595},
+    {from: 120, to: 708},
+    {from: 120, to: 710},
+    {from: 120, to: 733},
+    {from: 121, to: 129},
+    {from: 121, to: 165},
+    {from: 121, to: 166},
+    {from: 121, to: 167},
+    {from: 121, to: 168},
+    {from: 121, to: 185},
+    {from: 121, to: 191},
+    {from: 121, to: 226},
+    {from: 121, to: 240},
+    {from: 121, to: 276},
+    {from: 121, to: 352},
+    {from: 121, to: 359},
+    {from: 121, to: 430},
+    {from: 121, to: 461},
+    {from: 121, to: 463},
+    {from: 121, to: 486},
+    {from: 121, to: 531},
+    {from: 121, to: 607},
+    {from: 121, to: 634},
+    {from: 121, to: 711},
+    {from: 122, to: 203},
+    {from: 122, to: 266},
+    {from: 122, to: 327},
+    {from: 122, to: 374},
+    {from: 122, to: 385},
+    {from: 122, to: 433},
+    {from: 122, to: 442},
+    {from: 122, to: 454},
+    {from: 122, to: 475},
+    {from: 122, to: 480},
+    {from: 122, to: 498},
+    {from: 122, to: 517},
+    {from: 122, to: 573},
+    {from: 122, to: 577},
+    {from: 122, to: 611},
+    {from: 122, to: 614},
+    {from: 122, to: 623},
+    {from: 122, to: 648},
+    {from: 122, to: 678},
+    {from: 122, to: 687},
+    {from: 123, to: 125},
+    {from: 123, to: 141},
+    {from: 123, to: 237},
+    {from: 123, to: 249},
+    {from: 123, to: 252},
+    {from: 123, to: 291},
+    {from: 123, to: 416},
+    {from: 123, to: 422},
+    {from: 123, to: 447},
+    {from: 123, to: 449},
+    {from: 123, to: 452},
+    {from: 123, to: 478},
+    {from: 123, to: 481},
+    {from: 123, to: 482},
+    {from: 123, to: 558},
+    {from: 123, to: 622},
+    {from: 123, to: 675},
+    {from: 124, to: 132},
+    {from: 124, to: 189},
+    {from: 124, to: 207},
+    {from: 124, to: 209},
+    {from: 124, to: 214},
+    {from: 124, to: 223},
+    {from: 124, to: 230},
+    {from: 124, to: 239},
+    {from: 124, to: 262},
+    {from: 124, to: 271},
+    {from: 124, to: 320},
+    {from: 124, to: 344},
+    {from: 124, to: 354},
+    {from: 124, to: 361},
+    {from: 124, to: 362},
+    {from: 124, to: 445},
+    {from: 124, to: 483},
+    {from: 124, to: 484},
+    {from: 124, to: 512},
+    {from: 124, to: 615},
+    {from: 125, to: 141},
+    {from: 125, to: 237},
+    {from: 125, to: 249},
+    {from: 125, to: 252},
+    {from: 125, to: 291},
+    {from: 125, to: 404},
+    {from: 125, to: 416},
+    {from: 125, to: 422},
+    {from: 125, to: 447},
+    {from: 125, to: 449},
+    {from: 125, to: 452},
+    {from: 125, to: 461},
+    {from: 125, to: 478},
+    {from: 125, to: 481},
+    {from: 125, to: 482},
+    {from: 125, to: 483},
+    {from: 125, to: 565},
+    {from: 125, to: 622},
+    {from: 125, to: 661},
+    {from: 125, to: 675},
+    {from: 126, to: 134},
+    {from: 126, to: 156},
+    {from: 126, to: 213},
+    {from: 126, to: 242},
+    {from: 126, to: 265},
+    {from: 126, to: 326},
+    {from: 126, to: 341},
+    {from: 126, to: 365},
+    {from: 126, to: 375},
+    {from: 126, to: 406},
+    {from: 126, to: 476},
+    {from: 126, to: 502},
+    {from: 126, to: 513},
+    {from: 126, to: 530},
+    {from: 126, to: 544},
+    {from: 126, to: 681},
+    {from: 126, to: 683},
+    {from: 127, to: 159},
+    {from: 127, to: 160},
+    {from: 127, to: 161},
+    {from: 127, to: 246},
+    {from: 127, to: 257},
+    {from: 127, to: 297},
+    {from: 127, to: 322},
+    {from: 127, to: 398},
+    {from: 127, to: 474},
+    {from: 127, to: 485},
+    {from: 127, to: 553},
+    {from: 127, to: 621},
+    {from: 127, to: 632},
+    {from: 127, to: 638},
+    {from: 127, to: 639},
+    {from: 127, to: 657},
+    {from: 127, to: 671},
+    {from: 127, to: 690},
+    {from: 127, to: 715},
+    {from: 127, to: 726},
+    {from: 128, to: 136},
+    {from: 128, to: 152},
+    {from: 128, to: 163},
+    {from: 128, to: 206},
+    {from: 128, to: 248},
+    {from: 128, to: 336},
+    {from: 128, to: 343},
+    {from: 128, to: 360},
+    {from: 128, to: 378},
+    {from: 128, to: 388},
+    {from: 128, to: 448},
+    {from: 128, to: 501},
+    {from: 128, to: 506},
+    {from: 128, to: 513},
+    {from: 128, to: 550},
+    {from: 128, to: 563},
+    {from: 128, to: 588},
+    {from: 128, to: 617},
+    {from: 128, to: 712},
+    {from: 128, to: 727},
+    {from: 129, to: 155},
+    {from: 129, to: 164},
+    {from: 129, to: 165},
+    {from: 129, to: 166},
+    {from: 129, to: 167},
+    {from: 129, to: 168},
+    {from: 129, to: 185},
+    {from: 129, to: 191},
+    {from: 129, to: 226},
+    {from: 129, to: 240},
+    {from: 129, to: 352},
+    {from: 129, to: 359},
+    {from: 129, to: 373},
+    {from: 129, to: 397},
+    {from: 129, to: 430},
+    {from: 129, to: 461},
+    {from: 129, to: 463},
+    {from: 129, to: 486},
+    {from: 129, to: 531},
+    {from: 129, to: 607},
+    {from: 129, to: 634},
+    {from: 129, to: 677},
+    {from: 129, to: 685},
+    {from: 129, to: 711},
+    {from: 130, to: 153},
+    {from: 130, to: 181},
+    {from: 130, to: 219},
+    {from: 130, to: 234},
+    {from: 130, to: 291},
+    {from: 130, to: 304},
+    {from: 130, to: 309},
+    {from: 130, to: 366},
+    {from: 130, to: 369},
+    {from: 130, to: 370},
+    {from: 130, to: 382},
+    {from: 130, to: 452},
+    {from: 130, to: 457},
+    {from: 130, to: 481},
+    {from: 130, to: 503},
+    {from: 130, to: 534},
+    {from: 130, to: 554},
+    {from: 130, to: 630},
+    {from: 130, to: 670},
+    {from: 130, to: 672},
+    {from: 130, to: 701},
+    {from: 131, to: 180},
+    {from: 131, to: 188},
+    {from: 131, to: 216},
+    {from: 131, to: 277},
+    {from: 131, to: 286},
+    {from: 131, to: 294},
+    {from: 131, to: 332},
+    {from: 131, to: 333},
+    {from: 131, to: 381},
+    {from: 131, to: 428},
+    {from: 131, to: 432},
+    {from: 131, to: 443},
+    {from: 131, to: 511},
+    {from: 131, to: 528},
+    {from: 131, to: 571},
+    {from: 131, to: 580},
+    {from: 131, to: 589},
+    {from: 131, to: 593},
+    {from: 131, to: 601},
+    {from: 131, to: 618},
+    {from: 131, to: 619},
+    {from: 131, to: 623},
+    {from: 131, to: 644},
+    {from: 131, to: 652},
+    {from: 131, to: 703},
+    {from: 131, to: 716},
+    {from: 131, to: 719},
+    {from: 132, to: 189},
+    {from: 132, to: 207},
+    {from: 132, to: 209},
+    {from: 132, to: 214},
+    {from: 132, to: 223},
+    {from: 132, to: 230},
+    {from: 132, to: 239},
+    {from: 132, to: 262},
+    {from: 132, to: 320},
+    {from: 132, to: 344},
+    {from: 132, to: 354},
+    {from: 132, to: 361},
+    {from: 132, to: 362},
+    {from: 132, to: 445},
+    {from: 132, to: 483},
+    {from: 132, to: 484},
+    {from: 132, to: 512},
+    {from: 133, to: 149},
+    {from: 133, to: 171},
+    {from: 133, to: 244},
+    {from: 133, to: 314},
+    {from: 133, to: 325},
+    {from: 133, to: 338},
+    {from: 133, to: 345},
+    {from: 133, to: 350},
+    {from: 133, to: 396},
+    {from: 133, to: 417},
+    {from: 133, to: 496},
+    {from: 133, to: 507},
+    {from: 133, to: 534},
+    {from: 133, to: 566},
+    {from: 133, to: 606},
+    {from: 133, to: 613},
+    {from: 133, to: 659},
+    {from: 133, to: 673},
+    {from: 133, to: 682},
+    {from: 133, to: 714},
+    {from: 134, to: 156},
+    {from: 134, to: 213},
+    {from: 134, to: 242},
+    {from: 134, to: 265},
+    {from: 134, to: 326},
+    {from: 134, to: 341},
+    {from: 134, to: 365},
+    {from: 134, to: 375},
+    {from: 134, to: 406},
+    {from: 134, to: 476},
+    {from: 134, to: 502},
+    {from: 134, to: 513},
+    {from: 134, to: 530},
+    {from: 134, to: 544},
+    {from: 134, to: 681},
+    {from: 134, to: 683},
+    {from: 135, to: 145},
+    {from: 135, to: 151},
+    {from: 135, to: 224},
+    {from: 135, to: 233},
+    {from: 135, to: 245},
+    {from: 135, to: 279},
+    {from: 135, to: 280},
+    {from: 135, to: 289},
+    {from: 135, to: 319},
+    {from: 135, to: 323},
+    {from: 135, to: 331},
+    {from: 135, to: 349},
+    {from: 135, to: 368},
+    {from: 135, to: 376},
+    {from: 135, to: 419},
+    {from: 135, to: 429},
+    {from: 135, to: 431},
+    {from: 135, to: 436},
+    {from: 135, to: 443},
+    {from: 135, to: 489},
+    {from: 135, to: 490},
+    {from: 135, to: 529},
+    {from: 135, to: 547},
+    {from: 135, to: 567},
+    {from: 135, to: 569},
+    {from: 135, to: 586},
+    {from: 135, to: 643},
+    {from: 135, to: 676},
+    {from: 135, to: 699},
+    {from: 135, to: 717},
+    {from: 135, to: 720},
+    {from: 136, to: 152},
+    {from: 136, to: 163},
+    {from: 136, to: 206},
+    {from: 136, to: 248},
+    {from: 136, to: 336},
+    {from: 136, to: 343},
+    {from: 136, to: 360},
+    {from: 136, to: 378},
+    {from: 136, to: 388},
+    {from: 136, to: 448},
+    {from: 136, to: 501},
+    {from: 136, to: 506},
+    {from: 136, to: 550},
+    {from: 136, to: 563},
+    {from: 136, to: 588},
+    {from: 136, to: 617},
+    {from: 136, to: 712},
+    {from: 136, to: 727},
+    {from: 137, to: 192},
+    {from: 137, to: 204},
+    {from: 137, to: 247},
+    {from: 137, to: 273},
+    {from: 137, to: 284},
+    {from: 137, to: 306},
+    {from: 137, to: 315},
+    {from: 137, to: 380},
+    {from: 137, to: 389},
+    {from: 137, to: 467},
+    {from: 137, to: 495},
+    {from: 137, to: 570},
+    {from: 137, to: 584},
+    {from: 137, to: 598},
+    {from: 137, to: 599},
+    {from: 137, to: 666},
+    {from: 138, to: 193},
+    {from: 138, to: 199},
+    {from: 138, to: 220},
+    {from: 138, to: 272},
+    {from: 138, to: 340},
+    {from: 138, to: 346},
+    {from: 138, to: 347},
+    {from: 138, to: 387},
+    {from: 138, to: 404},
+    {from: 138, to: 408},
+    {from: 138, to: 437},
+    {from: 138, to: 503},
+    {from: 138, to: 520},
+    {from: 138, to: 590},
+    {from: 138, to: 628},
+    {from: 138, to: 664},
+    {from: 138, to: 670},
+    {from: 138, to: 709},
+    {from: 139, to: 144},
+    {from: 139, to: 231},
+    {from: 139, to: 232},
+    {from: 139, to: 238},
+    {from: 139, to: 258},
+    {from: 139, to: 303},
+    {from: 139, to: 308},
+    {from: 139, to: 335},
+    {from: 139, to: 348},
+    {from: 139, to: 398},
+    {from: 139, to: 415},
+    {from: 139, to: 430},
+    {from: 139, to: 434},
+    {from: 139, to: 440},
+    {from: 139, to: 575},
+    {from: 139, to: 576},
+    {from: 139, to: 583},
+    {from: 139, to: 603},
+    {from: 139, to: 616},
+    {from: 139, to: 654},
+    {from: 139, to: 668},
+    {from: 139, to: 702},
+    {from: 139, to: 713},
+    {from: 140, to: 145},
+    {from: 140, to: 172},
+    {from: 140, to: 177},
+    {from: 140, to: 179},
+    {from: 140, to: 311},
+    {from: 140, to: 316},
+    {from: 140, to: 327},
+    {from: 140, to: 375},
+    {from: 140, to: 384},
+    {from: 140, to: 386},
+    {from: 140, to: 408},
+    {from: 140, to: 442},
+    {from: 140, to: 454},
+    {from: 140, to: 455},
+    {from: 140, to: 460},
+    {from: 140, to: 522},
+    {from: 140, to: 527},
+    {from: 140, to: 532},
+    {from: 140, to: 577},
+    {from: 140, to: 612},
+    {from: 140, to: 625},
+    {from: 140, to: 654},
+    {from: 140, to: 667},
+    {from: 140, to: 677},
+    {from: 140, to: 678},
+    {from: 140, to: 679},
+    {from: 140, to: 685},
+    {from: 140, to: 687},
+    {from: 140, to: 707},
+    {from: 140, to: 721},
+    {from: 141, to: 237},
+    {from: 141, to: 246},
+    {from: 141, to: 249},
+    {from: 141, to: 252},
+    {from: 141, to: 291},
+    {from: 141, to: 416},
+    {from: 141, to: 422},
+    {from: 141, to: 436},
+    {from: 141, to: 447},
+    {from: 141, to: 449},
+    {from: 141, to: 452},
+    {from: 141, to: 478},
+    {from: 141, to: 481},
+    {from: 141, to: 482},
+    {from: 141, to: 516},
+    {from: 141, to: 622},
+    {from: 141, to: 675},
+    {from: 141, to: 696},
+    {from: 142, to: 143},
+    {from: 142, to: 147},
+    {from: 142, to: 157},
+    {from: 142, to: 175},
+    {from: 142, to: 187},
+    {from: 142, to: 263},
+    {from: 142, to: 299},
+    {from: 142, to: 300},
+    {from: 142, to: 301},
+    {from: 142, to: 432},
+    {from: 142, to: 444},
+    {from: 142, to: 455},
+    {from: 142, to: 469},
+    {from: 142, to: 514},
+    {from: 142, to: 535},
+    {from: 142, to: 539},
+    {from: 142, to: 542},
+    {from: 142, to: 624},
+    {from: 142, to: 653},
+    {from: 142, to: 660},
+    {from: 142, to: 669},
+    {from: 142, to: 698},
+    {from: 143, to: 147},
+    {from: 143, to: 157},
+    {from: 143, to: 175},
+    {from: 143, to: 187},
+    {from: 143, to: 263},
+    {from: 143, to: 299},
+    {from: 143, to: 300},
+    {from: 143, to: 301},
+    {from: 143, to: 309},
+    {from: 143, to: 332},
+    {from: 143, to: 432},
+    {from: 143, to: 444},
+    {from: 143, to: 455},
+    {from: 143, to: 469},
+    {from: 143, to: 514},
+    {from: 143, to: 535},
+    {from: 143, to: 539},
+    {from: 143, to: 542},
+    {from: 143, to: 624},
+    {from: 143, to: 645},
+    {from: 143, to: 653},
+    {from: 143, to: 669},
+    {from: 143, to: 698},
+    {from: 144, to: 150},
+    {from: 144, to: 231},
+    {from: 144, to: 232},
+    {from: 144, to: 238},
+    {from: 144, to: 258},
+    {from: 144, to: 303},
+    {from: 144, to: 308},
+    {from: 144, to: 318},
+    {from: 144, to: 335},
+    {from: 144, to: 348},
+    {from: 144, to: 371},
+    {from: 144, to: 415},
+    {from: 144, to: 434},
+    {from: 144, to: 460},
+    {from: 144, to: 528},
+    {from: 144, to: 562},
+    {from: 144, to: 575},
+    {from: 144, to: 576},
+    {from: 144, to: 583},
+    {from: 144, to: 603},
+    {from: 144, to: 606},
+    {from: 144, to: 616},
+    {from: 144, to: 646},
+    {from: 144, to: 668},
+    {from: 144, to: 713},
+    {from: 145, to: 151},
+    {from: 145, to: 224},
+    {from: 145, to: 233},
+    {from: 145, to: 279},
+    {from: 145, to: 280},
+    {from: 145, to: 289},
+    {from: 145, to: 316},
+    {from: 145, to: 323},
+    {from: 145, to: 327},
+    {from: 145, to: 331},
+    {from: 145, to: 375},
+    {from: 145, to: 376},
+    {from: 145, to: 431},
+    {from: 145, to: 436},
+    {from: 145, to: 442},
+    {from: 145, to: 443},
+    {from: 145, to: 454},
+    {from: 145, to: 455},
+    {from: 145, to: 490},
+    {from: 145, to: 529},
+    {from: 145, to: 547},
+    {from: 145, to: 567},
+    {from: 145, to: 577},
+    {from: 145, to: 586},
+    {from: 145, to: 676},
+    {from: 145, to: 678},
+    {from: 145, to: 687},
+    {from: 145, to: 699},
+    {from: 145, to: 717},
+    {from: 145, to: 721},
+    {from: 146, to: 182},
+    {from: 146, to: 210},
+    {from: 146, to: 217},
+    {from: 146, to: 278},
+    {from: 146, to: 286},
+    {from: 146, to: 321},
+    {from: 146, to: 326},
+    {from: 146, to: 337},
+    {from: 146, to: 407},
+    {from: 146, to: 420},
+    {from: 146, to: 488},
+    {from: 146, to: 533},
+    {from: 146, to: 579},
+    {from: 146, to: 626},
+    {from: 146, to: 627},
+    {from: 146, to: 662},
+    {from: 146, to: 705},
+    {from: 147, to: 157},
+    {from: 147, to: 175},
+    {from: 147, to: 187},
+    {from: 147, to: 263},
+    {from: 147, to: 299},
+    {from: 147, to: 300},
+    {from: 147, to: 301},
+    {from: 147, to: 432},
+    {from: 147, to: 444},
+    {from: 147, to: 455},
+    {from: 147, to: 469},
+    {from: 147, to: 514},
+    {from: 147, to: 535},
+    {from: 147, to: 539},
+    {from: 147, to: 542},
+    {from: 147, to: 624},
+    {from: 147, to: 653},
+    {from: 147, to: 669},
+    {from: 147, to: 698},
+    {from: 148, to: 208},
+    {from: 148, to: 298},
+    {from: 148, to: 307},
+    {from: 148, to: 310},
+    {from: 148, to: 313},
+    {from: 148, to: 458},
+    {from: 148, to: 459},
+    {from: 148, to: 468},
+    {from: 148, to: 470},
+    {from: 148, to: 471},
+    {from: 148, to: 477},
+    {from: 148, to: 479},
+    {from: 148, to: 515},
+    {from: 148, to: 518},
+    {from: 148, to: 541},
+    {from: 148, to: 620},
+    {from: 148, to: 680},
+    {from: 148, to: 686},
+    {from: 149, to: 171},
+    {from: 149, to: 244},
+    {from: 149, to: 314},
+    {from: 149, to: 325},
+    {from: 149, to: 338},
+    {from: 149, to: 345},
+    {from: 149, to: 350},
+    {from: 149, to: 396},
+    {from: 149, to: 417},
+    {from: 149, to: 496},
+    {from: 149, to: 507},
+    {from: 149, to: 534},
+    {from: 149, to: 566},
+    {from: 149, to: 606},
+    {from: 149, to: 613},
+    {from: 149, to: 659},
+    {from: 149, to: 673},
+    {from: 149, to: 682},
+    {from: 149, to: 714},
+    {from: 150, to: 154},
+    {from: 150, to: 155},
+    {from: 150, to: 164},
+    {from: 150, to: 227},
+    {from: 150, to: 245},
+    {from: 150, to: 294},
+    {from: 150, to: 316},
+    {from: 150, to: 318},
+    {from: 150, to: 349},
+    {from: 150, to: 371},
+    {from: 150, to: 373},
+    {from: 150, to: 397},
+    {from: 150, to: 460},
+    {from: 150, to: 528},
+    {from: 150, to: 562},
+    {from: 150, to: 569},
+    {from: 150, to: 572},
+    {from: 150, to: 576},
+    {from: 150, to: 591},
+    {from: 150, to: 606},
+    {from: 150, to: 629},
+    {from: 150, to: 643},
+    {from: 150, to: 644},
+    {from: 150, to: 646},
+    {from: 150, to: 713},
+    {from: 150, to: 719},
+    {from: 150, to: 720},
+    {from: 151, to: 179},
+    {from: 151, to: 224},
+    {from: 151, to: 227},
+    {from: 151, to: 231},
+    {from: 151, to: 233},
+    {from: 151, to: 238},
+    {from: 151, to: 279},
+    {from: 151, to: 280},
+    {from: 151, to: 289},
+    {from: 151, to: 323},
+    {from: 151, to: 331},
+    {from: 151, to: 342},
+    {from: 151, to: 376},
+    {from: 151, to: 431},
+    {from: 151, to: 436},
+    {from: 151, to: 443},
+    {from: 151, to: 490},
+    {from: 151, to: 529},
+    {from: 151, to: 547},
+    {from: 151, to: 567},
+    {from: 151, to: 586},
+    {from: 151, to: 627},
+    {from: 151, to: 676},
+    {from: 151, to: 699},
+    {from: 151, to: 717},
+    {from: 152, to: 163},
+    {from: 152, to: 206},
+    {from: 152, to: 248},
+    {from: 152, to: 336},
+    {from: 152, to: 343},
+    {from: 152, to: 360},
+    {from: 152, to: 378},
+    {from: 152, to: 388},
+    {from: 152, to: 448},
+    {from: 152, to: 501},
+    {from: 152, to: 506},
+    {from: 152, to: 550},
+    {from: 152, to: 563},
+    {from: 152, to: 588},
+    {from: 152, to: 617},
+    {from: 152, to: 712},
+    {from: 152, to: 727},
+    {from: 153, to: 181},
+    {from: 153, to: 219},
+    {from: 153, to: 234},
+    {from: 153, to: 304},
+    {from: 153, to: 309},
+    {from: 153, to: 366},
+    {from: 153, to: 369},
+    {from: 153, to: 370},
+    {from: 153, to: 457},
+    {from: 153, to: 554},
+    {from: 153, to: 630},
+    {from: 153, to: 672},
+    {from: 153, to: 701},
+    {from: 154, to: 155},
+    {from: 154, to: 164},
+    {from: 154, to: 183},
+    {from: 154, to: 224},
+    {from: 154, to: 227},
+    {from: 154, to: 245},
+    {from: 154, to: 294},
+    {from: 154, to: 308},
+    {from: 154, to: 316},
+    {from: 154, to: 335},
+    {from: 154, to: 349},
+    {from: 154, to: 371},
+    {from: 154, to: 373},
+    {from: 154, to: 397},
+    {from: 154, to: 462},
+    {from: 154, to: 555},
+    {from: 154, to: 569},
+    {from: 154, to: 572},
+    {from: 154, to: 591},
+    {from: 154, to: 629},
+    {from: 154, to: 642},
+    {from: 154, to: 643},
+    {from: 154, to: 644},
+    {from: 154, to: 707},
+    {from: 154, to: 719},
+    {from: 154, to: 720},
+    {from: 154, to: 726},
+    {from: 155, to: 164},
+    {from: 155, to: 166},
+    {from: 155, to: 227},
+    {from: 155, to: 245},
+    {from: 155, to: 294},
+    {from: 155, to: 316},
+    {from: 155, to: 349},
+    {from: 155, to: 359},
+    {from: 155, to: 371},
+    {from: 155, to: 373},
+    {from: 155, to: 397},
+    {from: 155, to: 569},
+    {from: 155, to: 572},
+    {from: 155, to: 591},
+    {from: 155, to: 629},
+    {from: 155, to: 643},
+    {from: 155, to: 644},
+    {from: 155, to: 677},
+    {from: 155, to: 685},
+    {from: 155, to: 719},
+    {from: 155, to: 720},
+    {from: 156, to: 213},
+    {from: 156, to: 242},
+    {from: 156, to: 265},
+    {from: 156, to: 326},
+    {from: 156, to: 341},
+    {from: 156, to: 365},
+    {from: 156, to: 375},
+    {from: 156, to: 406},
+    {from: 156, to: 476},
+    {from: 156, to: 502},
+    {from: 156, to: 513},
+    {from: 156, to: 530},
+    {from: 156, to: 544},
+    {from: 156, to: 681},
+    {from: 156, to: 683},
+    {from: 157, to: 175},
+    {from: 157, to: 187},
+    {from: 157, to: 240},
+    {from: 157, to: 263},
+    {from: 157, to: 299},
+    {from: 157, to: 300},
+    {from: 157, to: 301},
+    {from: 157, to: 432},
+    {from: 157, to: 434},
+    {from: 157, to: 444},
+    {from: 157, to: 455},
+    {from: 157, to: 469},
+    {from: 157, to: 491},
+    {from: 157, to: 514},
+    {from: 157, to: 521},
+    {from: 157, to: 535},
+    {from: 157, to: 539},
+    {from: 157, to: 542},
+    {from: 157, to: 603},
+    {from: 157, to: 624},
+    {from: 157, to: 653},
+    {from: 157, to: 669},
+    {from: 157, to: 698},
+    {from: 158, to: 174},
+    {from: 158, to: 243},
+    {from: 158, to: 292},
+    {from: 158, to: 293},
+    {from: 158, to: 439},
+    {from: 158, to: 540},
+    {from: 158, to: 568},
+    {from: 158, to: 640},
+    {from: 158, to: 641},
+    {from: 158, to: 695},
+    {from: 158, to: 704},
+    {from: 158, to: 708},
+    {from: 158, to: 732},
+    {from: 158, to: 733},
+    {from: 159, to: 160},
+    {from: 159, to: 161},
+    {from: 159, to: 226},
+    {from: 159, to: 246},
+    {from: 159, to: 257},
+    {from: 159, to: 297},
+    {from: 159, to: 302},
+    {from: 159, to: 322},
+    {from: 159, to: 398},
+    {from: 159, to: 474},
+    {from: 159, to: 485},
+    {from: 159, to: 553},
+    {from: 159, to: 621},
+    {from: 159, to: 632},
+    {from: 159, to: 638},
+    {from: 159, to: 639},
+    {from: 159, to: 657},
+    {from: 159, to: 671},
+    {from: 159, to: 714},
+    {from: 159, to: 715},
+    {from: 159, to: 726},
+    {from: 160, to: 161},
+    {from: 160, to: 246},
+    {from: 160, to: 257},
+    {from: 160, to: 281},
+    {from: 160, to: 297},
+    {from: 160, to: 322},
+    {from: 160, to: 398},
+    {from: 160, to: 474},
+    {from: 160, to: 485},
+    {from: 160, to: 553},
+    {from: 160, to: 614},
+    {from: 160, to: 621},
+    {from: 160, to: 632},
+    {from: 160, to: 638},
+    {from: 160, to: 639},
+    {from: 160, to: 657},
+    {from: 160, to: 671},
+    {from: 160, to: 715},
+    {from: 160, to: 726},
+    {from: 161, to: 246},
+    {from: 161, to: 257},
+    {from: 161, to: 297},
+    {from: 161, to: 322},
+    {from: 161, to: 398},
+    {from: 161, to: 474},
+    {from: 161, to: 485},
+    {from: 161, to: 553},
+    {from: 161, to: 621},
+    {from: 161, to: 632},
+    {from: 161, to: 638},
+    {from: 161, to: 639},
+    {from: 161, to: 657},
+    {from: 161, to: 671},
+    {from: 161, to: 715},
+    {from: 161, to: 726},
+    {from: 162, to: 215},
+    {from: 162, to: 241},
+    {from: 162, to: 260},
+    {from: 162, to: 266},
+    {from: 162, to: 271},
+    {from: 162, to: 299},
+    {from: 162, to: 301},
+    {from: 162, to: 339},
+    {from: 162, to: 364},
+    {from: 162, to: 384},
+    {from: 162, to: 431},
+    {from: 162, to: 453},
+    {from: 162, to: 504},
+    {from: 162, to: 578},
+    {from: 162, to: 596},
+    {from: 162, to: 602},
+    {from: 162, to: 610},
+    {from: 162, to: 661},
+    {from: 162, to: 665},
+    {from: 162, to: 690},
+    {from: 162, to: 692},
+    {from: 162, to: 693},
+    {from: 162, to: 703},
+    {from: 162, to: 721},
+    {from: 162, to: 723},
+    {from: 163, to: 206},
+    {from: 163, to: 248},
+    {from: 163, to: 336},
+    {from: 163, to: 343},
+    {from: 163, to: 360},
+    {from: 163, to: 378},
+    {from: 163, to: 388},
+    {from: 163, to: 448},
+    {from: 163, to: 501},
+    {from: 163, to: 506},
+    {from: 163, to: 550},
+    {from: 163, to: 563},
+    {from: 163, to: 588},
+    {from: 163, to: 617},
+    {from: 163, to: 712},
+    {from: 163, to: 727},
+    {from: 164, to: 166},
+    {from: 164, to: 227},
+    {from: 164, to: 245},
+    {from: 164, to: 294},
+    {from: 164, to: 316},
+    {from: 164, to: 349},
+    {from: 164, to: 359},
+    {from: 164, to: 371},
+    {from: 164, to: 373},
+    {from: 164, to: 397},
+    {from: 164, to: 569},
+    {from: 164, to: 572},
+    {from: 164, to: 591},
+    {from: 164, to: 629},
+    {from: 164, to: 643},
+    {from: 164, to: 644},
+    {from: 164, to: 677},
+    {from: 164, to: 685},
+    {from: 164, to: 719},
+    {from: 164, to: 720},
+    {from: 165, to: 166},
+    {from: 165, to: 167},
+    {from: 165, to: 168},
+    {from: 165, to: 185},
+    {from: 165, to: 191},
+    {from: 165, to: 226},
+    {from: 165, to: 240},
+    {from: 165, to: 285},
+    {from: 165, to: 352},
+    {from: 165, to: 359},
+    {from: 165, to: 430},
+    {from: 165, to: 461},
+    {from: 165, to: 463},
+    {from: 165, to: 486},
+    {from: 165, to: 531},
+    {from: 165, to: 607},
+    {from: 165, to: 634},
+    {from: 165, to: 711},
+    {from: 165, to: 729},
+    {from: 166, to: 167},
+    {from: 166, to: 168},
+    {from: 166, to: 185},
+    {from: 166, to: 191},
+    {from: 166, to: 226},
+    {from: 166, to: 240},
+    {from: 166, to: 352},
+    {from: 166, to: 359},
+    {from: 166, to: 373},
+    {from: 166, to: 397},
+    {from: 166, to: 430},
+    {from: 166, to: 461},
+    {from: 166, to: 463},
+    {from: 166, to: 486},
+    {from: 166, to: 531},
+    {from: 166, to: 607},
+    {from: 166, to: 634},
+    {from: 166, to: 677},
+    {from: 166, to: 685},
+    {from: 166, to: 711},
+    {from: 167, to: 168},
+    {from: 167, to: 185},
+    {from: 167, to: 191},
+    {from: 167, to: 226},
+    {from: 167, to: 240},
+    {from: 167, to: 352},
+    {from: 167, to: 359},
+    {from: 167, to: 430},
+    {from: 167, to: 461},
+    {from: 167, to: 463},
+    {from: 167, to: 486},
+    {from: 167, to: 531},
+    {from: 167, to: 607},
+    {from: 167, to: 634},
+    {from: 167, to: 711},
+    {from: 168, to: 185},
+    {from: 168, to: 191},
+    {from: 168, to: 226},
+    {from: 168, to: 240},
+    {from: 168, to: 352},
+    {from: 168, to: 359},
+    {from: 168, to: 410},
+    {from: 168, to: 430},
+    {from: 168, to: 461},
+    {from: 168, to: 463},
+    {from: 168, to: 486},
+    {from: 168, to: 531},
+    {from: 168, to: 557},
+    {from: 168, to: 607},
+    {from: 168, to: 634},
+    {from: 168, to: 711},
+    {from: 169, to: 196},
+    {from: 169, to: 229},
+    {from: 169, to: 256},
+    {from: 169, to: 267},
+    {from: 169, to: 275},
+    {from: 169, to: 276},
+    {from: 169, to: 295},
+    {from: 169, to: 304},
+    {from: 169, to: 317},
+    {from: 169, to: 318},
+    {from: 169, to: 352},
+    {from: 169, to: 355},
+    {from: 169, to: 357},
+    {from: 169, to: 369},
+    {from: 169, to: 446},
+    {from: 169, to: 509},
+    {from: 169, to: 510},
+    {from: 169, to: 526},
+    {from: 169, to: 546},
+    {from: 169, to: 564},
+    {from: 169, to: 581},
+    {from: 169, to: 592},
+    {from: 169, to: 652},
+    {from: 169, to: 667},
+    {from: 170, to: 250},
+    {from: 170, to: 251},
+    {from: 170, to: 253},
+    {from: 170, to: 254},
+    {from: 170, to: 255},
+    {from: 170, to: 356},
+    {from: 170, to: 400},
+    {from: 170, to: 401},
+    {from: 170, to: 402},
+    {from: 170, to: 410},
+    {from: 170, to: 423},
+    {from: 170, to: 545},
+    {from: 170, to: 556},
+    {from: 170, to: 557},
+    {from: 170, to: 558},
+    {from: 170, to: 656},
+    {from: 170, to: 660},
+    {from: 170, to: 674},
+    {from: 170, to: 694},
+    {from: 170, to: 696},
+    {from: 171, to: 200},
+    {from: 171, to: 244},
+    {from: 171, to: 314},
+    {from: 171, to: 325},
+    {from: 171, to: 338},
+    {from: 171, to: 345},
+    {from: 171, to: 350},
+    {from: 171, to: 396},
+    {from: 171, to: 417},
+    {from: 171, to: 496},
+    {from: 171, to: 507},
+    {from: 171, to: 534},
+    {from: 171, to: 566},
+    {from: 171, to: 579},
+    {from: 171, to: 593},
+    {from: 171, to: 606},
+    {from: 171, to: 613},
+    {from: 171, to: 659},
+    {from: 171, to: 673},
+    {from: 171, to: 682},
+    {from: 171, to: 714},
+    {from: 172, to: 177},
+    {from: 172, to: 179},
+    {from: 172, to: 311},
+    {from: 172, to: 384},
+    {from: 172, to: 386},
+    {from: 172, to: 408},
+    {from: 172, to: 460},
+    {from: 172, to: 522},
+    {from: 172, to: 527},
+    {from: 172, to: 532},
+    {from: 172, to: 604},
+    {from: 172, to: 612},
+    {from: 172, to: 621},
+    {from: 172, to: 625},
+    {from: 172, to: 654},
+    {from: 172, to: 667},
+    {from: 172, to: 677},
+    {from: 172, to: 679},
+    {from: 172, to: 685},
+    {from: 172, to: 706},
+    {from: 172, to: 707},
+    {from: 173, to: 195},
+    {from: 173, to: 205},
+    {from: 173, to: 218},
+    {from: 173, to: 274},
+    {from: 173, to: 296},
+    {from: 173, to: 418},
+    {from: 173, to: 435},
+    {from: 173, to: 493},
+    {from: 173, to: 494},
+    {from: 173, to: 519},
+    {from: 173, to: 525},
+    {from: 173, to: 526},
+    {from: 173, to: 582},
+    {from: 173, to: 585},
+    {from: 173, to: 605},
+    {from: 173, to: 631},
+    {from: 173, to: 655},
+    {from: 173, to: 722},
+    {from: 174, to: 243},
+    {from: 174, to: 292},
+    {from: 174, to: 293},
+    {from: 174, to: 439},
+    {from: 174, to: 540},
+    {from: 174, to: 568},
+    {from: 174, to: 640},
+    {from: 174, to: 641},
+    {from: 174, to: 695},
+    {from: 174, to: 704},
+    {from: 174, to: 708},
+    {from: 174, to: 732},
+    {from: 174, to: 733},
+    {from: 175, to: 187},
+    {from: 175, to: 263},
+    {from: 175, to: 299},
+    {from: 175, to: 300},
+    {from: 175, to: 301},
+    {from: 175, to: 325},
+    {from: 175, to: 432},
+    {from: 175, to: 444},
+    {from: 175, to: 455},
+    {from: 175, to: 469},
+    {from: 175, to: 511},
+    {from: 175, to: 514},
+    {from: 175, to: 535},
+    {from: 175, to: 539},
+    {from: 175, to: 542},
+    {from: 175, to: 624},
+    {from: 175, to: 653},
+    {from: 175, to: 669},
+    {from: 175, to: 698},
+    {from: 176, to: 178},
+    {from: 176, to: 197},
+    {from: 176, to: 328},
+    {from: 176, to: 329},
+    {from: 176, to: 351},
+    {from: 176, to: 367},
+    {from: 176, to: 372},
+    {from: 176, to: 426},
+    {from: 176, to: 427},
+    {from: 176, to: 456},
+    {from: 176, to: 464},
+    {from: 176, to: 492},
+    {from: 176, to: 536},
+    {from: 176, to: 549},
+    {from: 176, to: 551},
+    {from: 176, to: 609},
+    {from: 176, to: 615},
+    {from: 176, to: 700},
+    {from: 176, to: 718},
+    {from: 177, to: 179},
+    {from: 177, to: 218},
+    {from: 177, to: 221},
+    {from: 177, to: 260},
+    {from: 177, to: 261},
+    {from: 177, to: 279},
+    {from: 177, to: 311},
+    {from: 177, to: 366},
+    {from: 177, to: 384},
+    {from: 177, to: 386},
+    {from: 177, to: 408},
+    {from: 177, to: 422},
+    {from: 177, to: 460},
+    {from: 177, to: 522},
+    {from: 177, to: 527},
+    {from: 177, to: 532},
+    {from: 177, to: 572},
+    {from: 177, to: 591},
+    {from: 177, to: 612},
+    {from: 177, to: 625},
+    {from: 177, to: 654},
+    {from: 177, to: 667},
+    {from: 177, to: 677},
+    {from: 177, to: 679},
+    {from: 177, to: 685},
+    {from: 177, to: 693},
+    {from: 177, to: 707},
+    {from: 178, to: 197},
+    {from: 178, to: 328},
+    {from: 178, to: 329},
+    {from: 178, to: 351},
+    {from: 178, to: 367},
+    {from: 178, to: 372},
+    {from: 178, to: 426},
+    {from: 178, to: 427},
+    {from: 178, to: 456},
+    {from: 178, to: 464},
+    {from: 178, to: 492},
+    {from: 178, to: 536},
+    {from: 178, to: 549},
+    {from: 178, to: 551},
+    {from: 178, to: 609},
+    {from: 178, to: 615},
+    {from: 178, to: 700},
+    {from: 178, to: 718},
+    {from: 179, to: 227},
+    {from: 179, to: 231},
+    {from: 179, to: 238},
+    {from: 179, to: 311},
+    {from: 179, to: 342},
+    {from: 179, to: 384},
+    {from: 179, to: 386},
+    {from: 179, to: 408},
+    {from: 179, to: 460},
+    {from: 179, to: 522},
+    {from: 179, to: 527},
+    {from: 179, to: 532},
+    {from: 179, to: 547},
+    {from: 179, to: 586},
+    {from: 179, to: 612},
+    {from: 179, to: 625},
+    {from: 179, to: 627},
+    {from: 179, to: 654},
+    {from: 179, to: 667},
+    {from: 179, to: 677},
+    {from: 179, to: 679},
+    {from: 179, to: 685},
+    {from: 179, to: 707},
+    {from: 179, to: 717},
+    {from: 180, to: 188},
+    {from: 180, to: 216},
+    {from: 180, to: 277},
+    {from: 180, to: 286},
+    {from: 180, to: 332},
+    {from: 180, to: 333},
+    {from: 180, to: 428},
+    {from: 180, to: 511},
+    {from: 180, to: 528},
+    {from: 180, to: 571},
+    {from: 180, to: 580},
+    {from: 180, to: 593},
+    {from: 180, to: 601},
+    {from: 180, to: 618},
+    {from: 180, to: 619},
+    {from: 180, to: 652},
+    {from: 180, to: 703},
+    {from: 180, to: 716},
+    {from: 181, to: 219},
+    {from: 181, to: 234},
+    {from: 181, to: 304},
+    {from: 181, to: 309},
+    {from: 181, to: 366},
+    {from: 181, to: 369},
+    {from: 181, to: 370},
+    {from: 181, to: 457},
+    {from: 181, to: 554},
+    {from: 181, to: 630},
+    {from: 181, to: 672},
+    {from: 181, to: 701},
+    {from: 182, to: 210},
+    {from: 182, to: 217},
+    {from: 182, to: 278},
+    {from: 182, to: 321},
+    {from: 182, to: 337},
+    {from: 182, to: 407},
+    {from: 182, to: 420},
+    {from: 182, to: 488},
+    {from: 182, to: 533},
+    {from: 182, to: 579},
+    {from: 182, to: 626},
+    {from: 182, to: 627},
+    {from: 182, to: 662},
+    {from: 182, to: 705},
+    {from: 183, to: 184},
+    {from: 183, to: 198},
+    {from: 183, to: 204},
+    {from: 183, to: 224},
+    {from: 183, to: 270},
+    {from: 183, to: 302},
+    {from: 183, to: 308},
+    {from: 183, to: 312},
+    {from: 183, to: 335},
+    {from: 183, to: 462},
+    {from: 183, to: 497},
+    {from: 183, to: 516},
+    {from: 183, to: 524},
+    {from: 183, to: 538},
+    {from: 183, to: 555},
+    {from: 183, to: 633},
+    {from: 183, to: 635},
+    {from: 183, to: 636},
+    {from: 183, to: 637},
+    {from: 183, to: 642},
+    {from: 183, to: 684},
+    {from: 183, to: 688},
+    {from: 183, to: 697},
+    {from: 183, to: 707},
+    {from: 183, to: 726},
+    {from: 183, to: 736},
+    {from: 184, to: 198},
+    {from: 184, to: 204},
+    {from: 184, to: 270},
+    {from: 184, to: 302},
+    {from: 184, to: 312},
+    {from: 184, to: 497},
+    {from: 184, to: 516},
+    {from: 184, to: 524},
+    {from: 184, to: 538},
+    {from: 184, to: 633},
+    {from: 184, to: 635},
+    {from: 184, to: 636},
+    {from: 184, to: 637},
+    {from: 184, to: 684},
+    {from: 184, to: 688},
+    {from: 184, to: 697},
+    {from: 184, to: 736},
+    {from: 185, to: 191},
+    {from: 185, to: 212},
+    {from: 185, to: 226},
+    {from: 185, to: 240},
+    {from: 185, to: 352},
+    {from: 185, to: 359},
+    {from: 185, to: 425},
+    {from: 185, to: 430},
+    {from: 185, to: 449},
+    {from: 185, to: 461},
+    {from: 185, to: 463},
+    {from: 185, to: 486},
+    {from: 185, to: 490},
+    {from: 185, to: 531},
+    {from: 185, to: 607},
+    {from: 185, to: 622},
+    {from: 185, to: 634},
+    {from: 185, to: 675},
+    {from: 185, to: 676},
+    {from: 185, to: 711},
+    {from: 185, to: 728},
+    {from: 186, to: 201},
+    {from: 186, to: 222},
+    {from: 186, to: 228},
+    {from: 186, to: 235},
+    {from: 186, to: 236},
+    {from: 186, to: 305},
+    {from: 186, to: 324},
+    {from: 186, to: 334},
+    {from: 186, to: 353},
+    {from: 186, to: 368},
+    {from: 186, to: 429},
+    {from: 186, to: 489},
+    {from: 186, to: 499},
+    {from: 186, to: 548},
+    {from: 186, to: 552},
+    {from: 186, to: 595},
+    {from: 186, to: 710},
+    {from: 187, to: 263},
+    {from: 187, to: 299},
+    {from: 187, to: 300},
+    {from: 187, to: 301},
+    {from: 187, to: 432},
+    {from: 187, to: 444},
+    {from: 187, to: 455},
+    {from: 187, to: 469},
+    {from: 187, to: 514},
+    {from: 187, to: 535},
+    {from: 187, to: 539},
+    {from: 187, to: 542},
+    {from: 187, to: 624},
+    {from: 187, to: 653},
+    {from: 187, to: 669},
+    {from: 187, to: 698},
+    {from: 188, to: 216},
+    {from: 188, to: 277},
+    {from: 188, to: 286},
+    {from: 188, to: 332},
+    {from: 188, to: 333},
+    {from: 188, to: 428},
+    {from: 188, to: 511},
+    {from: 188, to: 528},
+    {from: 188, to: 571},
+    {from: 188, to: 580},
+    {from: 188, to: 593},
+    {from: 188, to: 601},
+    {from: 188, to: 618},
+    {from: 188, to: 619},
+    {from: 188, to: 652},
+    {from: 188, to: 703},
+    {from: 188, to: 716},
+    {from: 189, to: 207},
+    {from: 189, to: 209},
+    {from: 189, to: 214},
+    {from: 189, to: 223},
+    {from: 189, to: 230},
+    {from: 189, to: 239},
+    {from: 189, to: 262},
+    {from: 189, to: 320},
+    {from: 189, to: 333},
+    {from: 189, to: 344},
+    {from: 189, to: 354},
+    {from: 189, to: 361},
+    {from: 189, to: 362},
+    {from: 189, to: 445},
+    {from: 189, to: 483},
+    {from: 189, to: 484},
+    {from: 189, to: 512},
+    {from: 189, to: 578},
+    {from: 189, to: 601},
+    {from: 189, to: 655},
+    {from: 190, to: 194},
+    {from: 190, to: 197},
+    {from: 190, to: 200},
+    {from: 190, to: 232},
+    {from: 190, to: 254},
+    {from: 190, to: 259},
+    {from: 190, to: 342},
+    {from: 190, to: 363},
+    {from: 190, to: 379},
+    {from: 190, to: 383},
+    {from: 190, to: 403},
+    {from: 190, to: 500},
+    {from: 190, to: 505},
+    {from: 190, to: 537},
+    {from: 190, to: 574},
+    {from: 190, to: 587},
+    {from: 190, to: 597},
+    {from: 190, to: 649},
+    {from: 190, to: 691},
+    {from: 190, to: 702},
+    {from: 190, to: 706},
+    {from: 191, to: 226},
+    {from: 191, to: 240},
+    {from: 191, to: 324},
+    {from: 191, to: 352},
+    {from: 191, to: 359},
+    {from: 191, to: 430},
+    {from: 191, to: 461},
+    {from: 191, to: 463},
+    {from: 191, to: 486},
+    {from: 191, to: 531},
+    {from: 191, to: 607},
+    {from: 191, to: 634},
+    {from: 191, to: 711},
+    {from: 192, to: 247},
+    {from: 192, to: 273},
+    {from: 192, to: 284},
+    {from: 192, to: 306},
+    {from: 192, to: 315},
+    {from: 192, to: 380},
+    {from: 192, to: 389},
+    {from: 192, to: 467},
+    {from: 192, to: 495},
+    {from: 192, to: 570},
+    {from: 192, to: 584},
+    {from: 192, to: 598},
+    {from: 192, to: 599},
+    {from: 192, to: 666},
+    {from: 193, to: 264},
+    {from: 193, to: 281},
+    {from: 193, to: 282},
+    {from: 193, to: 285},
+    {from: 193, to: 382},
+    {from: 193, to: 408},
+    {from: 193, to: 438},
+    {from: 193, to: 441},
+    {from: 193, to: 465},
+    {from: 193, to: 466},
+    {from: 193, to: 491},
+    {from: 193, to: 646},
+    {from: 193, to: 647},
+    {from: 193, to: 650},
+    {from: 193, to: 651},
+    {from: 193, to: 689},
+    {from: 193, to: 724},
+    {from: 193, to: 725},
+    {from: 193, to: 729},
+    {from: 193, to: 730},
+    {from: 193, to: 734},
+    {from: 193, to: 735},
+    {from: 194, to: 200},
+    {from: 194, to: 259},
+    {from: 194, to: 342},
+    {from: 194, to: 363},
+    {from: 194, to: 379},
+    {from: 194, to: 383},
+    {from: 194, to: 403},
+    {from: 194, to: 500},
+    {from: 194, to: 505},
+    {from: 194, to: 537},
+    {from: 194, to: 574},
+    {from: 194, to: 587},
+    {from: 194, to: 597},
+    {from: 194, to: 649},
+    {from: 194, to: 691},
+    {from: 194, to: 702},
+    {from: 194, to: 706},
+    {from: 195, to: 205},
+    {from: 195, to: 218},
+    {from: 195, to: 274},
+    {from: 195, to: 296},
+    {from: 195, to: 418},
+    {from: 195, to: 435},
+    {from: 195, to: 444},
+    {from: 195, to: 493},
+    {from: 195, to: 494},
+    {from: 195, to: 519},
+    {from: 195, to: 525},
+    {from: 195, to: 526},
+    {from: 195, to: 582},
+    {from: 195, to: 585},
+    {from: 195, to: 605},
+    {from: 195, to: 631},
+    {from: 195, to: 655},
+    {from: 195, to: 722},
+    {from: 196, to: 275},
+    {from: 196, to: 288},
+    {from: 196, to: 304},
+    {from: 196, to: 352},
+    {from: 196, to: 369},
+    {from: 196, to: 381},
+    {from: 196, to: 409},
+    {from: 196, to: 421},
+    {from: 196, to: 425},
+    {from: 196, to: 440},
+    {from: 196, to: 472},
+    {from: 196, to: 473},
+    {from: 196, to: 508},
+    {from: 196, to: 521},
+    {from: 196, to: 523},
+    {from: 196, to: 526},
+    {from: 196, to: 543},
+    {from: 196, to: 562},
+    {from: 196, to: 565},
+    {from: 196, to: 589},
+    {from: 196, to: 594},
+    {from: 196, to: 604},
+    {from: 196, to: 652},
+    {from: 196, to: 663},
+    {from: 196, to: 667},
+    {from: 196, to: 728},
+    {from: 197, to: 232},
+    {from: 197, to: 254},
+    {from: 197, to: 328},
+    {from: 197, to: 329},
+    {from: 197, to: 351},
+    {from: 197, to: 367},
+    {from: 197, to: 372},
+    {from: 197, to: 426},
+    {from: 197, to: 427},
+    {from: 197, to: 456},
+    {from: 197, to: 464},
+    {from: 197, to: 492},
+    {from: 197, to: 536},
+    {from: 197, to: 549},
+    {from: 197, to: 551},
+    {from: 197, to: 609},
+    {from: 197, to: 615},
+    {from: 197, to: 700},
+    {from: 197, to: 718},
+    {from: 198, to: 204},
+    {from: 198, to: 270},
+    {from: 198, to: 302},
+    {from: 198, to: 312},
+    {from: 198, to: 497},
+    {from: 198, to: 516},
+    {from: 198, to: 524},
+    {from: 198, to: 538},
+    {from: 198, to: 633},
+    {from: 198, to: 635},
+    {from: 198, to: 636},
+    {from: 198, to: 637},
+    {from: 198, to: 658},
+    {from: 198, to: 684},
+    {from: 198, to: 688},
+    {from: 198, to: 697},
+    {from: 198, to: 736},
+    {from: 199, to: 220},
+    {from: 199, to: 272},
+    {from: 199, to: 274},
+    {from: 199, to: 340},
+    {from: 199, to: 346},
+    {from: 199, to: 347},
+    {from: 199, to: 387},
+    {from: 199, to: 404},
+    {from: 199, to: 437},
+    {from: 199, to: 503},
+    {from: 199, to: 520},
+    {from: 199, to: 590},
+    {from: 199, to: 628},
+    {from: 199, to: 664},
+    {from: 199, to: 670},
+    {from: 199, to: 709},
+    {from: 200, to: 259},
+    {from: 200, to: 342},
+    {from: 200, to: 363},
+    {from: 200, to: 379},
+    {from: 200, to: 383},
+    {from: 200, to: 403},
+    {from: 200, to: 500},
+    {from: 200, to: 505},
+    {from: 200, to: 537},
+    {from: 200, to: 574},
+    {from: 200, to: 579},
+    {from: 200, to: 587},
+    {from: 200, to: 593},
+    {from: 200, to: 597},
+    {from: 200, to: 649},
+    {from: 200, to: 691},
+    {from: 200, to: 702},
+    {from: 200, to: 706},
+    {from: 201, to: 222},
+    {from: 201, to: 228},
+    {from: 201, to: 235},
+    {from: 201, to: 236},
+    {from: 201, to: 305},
+    {from: 201, to: 324},
+    {from: 201, to: 334},
+    {from: 201, to: 353},
+    {from: 201, to: 368},
+    {from: 201, to: 429},
+    {from: 201, to: 489},
+    {from: 201, to: 499},
+    {from: 201, to: 548},
+    {from: 201, to: 552},
+    {from: 201, to: 595},
+    {from: 201, to: 710},
+    {from: 202, to: 211},
+    {from: 202, to: 212},
+    {from: 202, to: 221},
+    {from: 202, to: 225},
+    {from: 202, to: 261},
+    {from: 202, to: 287},
+    {from: 202, to: 319},
+    {from: 202, to: 358},
+    {from: 202, to: 419},
+    {from: 202, to: 424},
+    {from: 202, to: 450},
+    {from: 202, to: 451},
+    {from: 202, to: 462},
+    {from: 202, to: 486},
+    {from: 202, to: 487},
+    {from: 202, to: 555},
+    {from: 202, to: 600},
+    {from: 202, to: 608},
+    {from: 202, to: 618},
+    {from: 202, to: 642},
+    {from: 202, to: 645},
+    {from: 203, to: 327},
+    {from: 203, to: 374},
+    {from: 203, to: 385},
+    {from: 203, to: 433},
+    {from: 203, to: 442},
+    {from: 203, to: 454},
+    {from: 203, to: 475},
+    {from: 203, to: 480},
+    {from: 203, to: 498},
+    {from: 203, to: 517},
+    {from: 203, to: 518},
+    {from: 203, to: 573},
+    {from: 203, to: 577},
+    {from: 203, to: 611},
+    {from: 203, to: 614},
+    {from: 203, to: 623},
+    {from: 203, to: 648},
+    {from: 203, to: 656},
+    {from: 203, to: 678},
+    {from: 203, to: 687},
+    {from: 204, to: 270},
+    {from: 204, to: 302},
+    {from: 204, to: 312},
+    {from: 204, to: 497},
+    {from: 204, to: 516},
+    {from: 204, to: 524},
+    {from: 204, to: 538},
+    {from: 204, to: 633},
+    {from: 204, to: 635},
+    {from: 204, to: 636},
+    {from: 204, to: 637},
+    {from: 204, to: 684},
+    {from: 204, to: 688},
+    {from: 204, to: 697},
+    {from: 204, to: 736},
+    {from: 205, to: 218},
+    {from: 205, to: 274},
+    {from: 205, to: 296},
+    {from: 205, to: 418},
+    {from: 205, to: 435},
+    {from: 205, to: 493},
+    {from: 205, to: 494},
+    {from: 205, to: 519},
+    {from: 205, to: 525},
+    {from: 205, to: 526},
+    {from: 205, to: 559},
+    {from: 205, to: 582},
+    {from: 205, to: 585},
+    {from: 205, to: 605},
+    {from: 205, to: 631},
+    {from: 205, to: 655},
+    {from: 205, to: 722},
+    {from: 206, to: 248},
+    {from: 206, to: 336},
+    {from: 206, to: 343},
+    {from: 206, to: 360},
+    {from: 206, to: 378},
+    {from: 206, to: 388},
+    {from: 206, to: 448},
+    {from: 206, to: 501},
+    {from: 206, to: 506},
+    {from: 206, to: 550},
+    {from: 206, to: 563},
+    {from: 206, to: 588},
+    {from: 206, to: 617},
+    {from: 206, to: 712},
+    {from: 206, to: 727},
+    {from: 207, to: 209},
+    {from: 207, to: 214},
+    {from: 207, to: 223},
+    {from: 207, to: 230},
+    {from: 207, to: 239},
+    {from: 207, to: 262},
+    {from: 207, to: 320},
+    {from: 207, to: 344},
+    {from: 207, to: 354},
+    {from: 207, to: 361},
+    {from: 207, to: 362},
+    {from: 207, to: 445},
+    {from: 207, to: 483},
+    {from: 207, to: 484},
+    {from: 207, to: 512},
+    {from: 208, to: 298},
+    {from: 208, to: 307},
+    {from: 208, to: 310},
+    {from: 208, to: 313},
+    {from: 208, to: 458},
+    {from: 208, to: 459},
+    {from: 208, to: 468},
+    {from: 208, to: 470},
+    {from: 208, to: 471},
+    {from: 208, to: 477},
+    {from: 208, to: 479},
+    {from: 208, to: 515},
+    {from: 208, to: 518},
+    {from: 208, to: 541},
+    {from: 208, to: 620},
+    {from: 208, to: 680},
+    {from: 208, to: 686},
+    {from: 209, to: 214},
+    {from: 209, to: 223},
+    {from: 209, to: 230},
+    {from: 209, to: 239},
+    {from: 209, to: 262},
+    {from: 209, to: 320},
+    {from: 209, to: 344},
+    {from: 209, to: 354},
+    {from: 209, to: 361},
+    {from: 209, to: 362},
+    {from: 209, to: 445},
+    {from: 209, to: 483},
+    {from: 209, to: 484},
+    {from: 209, to: 512},
+    {from: 210, to: 217},
+    {from: 210, to: 278},
+    {from: 210, to: 321},
+    {from: 210, to: 337},
+    {from: 210, to: 407},
+    {from: 210, to: 420},
+    {from: 210, to: 488},
+    {from: 210, to: 533},
+    {from: 210, to: 579},
+    {from: 210, to: 626},
+    {from: 210, to: 627},
+    {from: 210, to: 662},
+    {from: 210, to: 705},
+    {from: 211, to: 212},
+    {from: 211, to: 221},
+    {from: 211, to: 225},
+    {from: 211, to: 261},
+    {from: 211, to: 287},
+    {from: 211, to: 319},
+    {from: 211, to: 358},
+    {from: 211, to: 419},
+    {from: 211, to: 424},
+    {from: 211, to: 450},
+    {from: 211, to: 451},
+    {from: 211, to: 462},
+    {from: 211, to: 486},
+    {from: 211, to: 487},
+    {from: 211, to: 555},
+    {from: 211, to: 600},
+    {from: 211, to: 608},
+    {from: 211, to: 618},
+    {from: 211, to: 642},
+    {from: 211, to: 645},
+    {from: 212, to: 221},
+    {from: 212, to: 225},
+    {from: 212, to: 261},
+    {from: 212, to: 287},
+    {from: 212, to: 319},
+    {from: 212, to: 358},
+    {from: 212, to: 419},
+    {from: 212, to: 424},
+    {from: 212, to: 425},
+    {from: 212, to: 449},
+    {from: 212, to: 450},
+    {from: 212, to: 451},
+    {from: 212, to: 462},
+    {from: 212, to: 487},
+    {from: 212, to: 490},
+    {from: 212, to: 555},
+    {from: 212, to: 600},
+    {from: 212, to: 608},
+    {from: 212, to: 622},
+    {from: 212, to: 642},
+    {from: 212, to: 645},
+    {from: 212, to: 675},
+    {from: 212, to: 676},
+    {from: 212, to: 728},
+    {from: 213, to: 242},
+    {from: 213, to: 265},
+    {from: 213, to: 326},
+    {from: 213, to: 341},
+    {from: 213, to: 365},
+    {from: 213, to: 375},
+    {from: 213, to: 406},
+    {from: 213, to: 476},
+    {from: 213, to: 502},
+    {from: 213, to: 513},
+    {from: 213, to: 530},
+    {from: 213, to: 544},
+    {from: 213, to: 635},
+    {from: 213, to: 681},
+    {from: 213, to: 683},
+    {from: 214, to: 223},
+    {from: 214, to: 230},
+    {from: 214, to: 239},
+    {from: 214, to: 262},
+    {from: 214, to: 320},
+    {from: 214, to: 344},
+    {from: 214, to: 354},
+    {from: 214, to: 361},
+    {from: 214, to: 362},
+    {from: 214, to: 445},
+    {from: 214, to: 483},
+    {from: 214, to: 484},
+    {from: 214, to: 512},
+    {from: 215, to: 241},
+    {from: 215, to: 257},
+    {from: 215, to: 260},
+    {from: 215, to: 266},
+    {from: 215, to: 271},
+    {from: 215, to: 339},
+    {from: 215, to: 364},
+    {from: 215, to: 445},
+    {from: 215, to: 453},
+    {from: 215, to: 504},
+    {from: 215, to: 578},
+    {from: 215, to: 596},
+    {from: 215, to: 602},
+    {from: 215, to: 610},
+    {from: 215, to: 638},
+    {from: 215, to: 661},
+    {from: 215, to: 665},
+    {from: 215, to: 690},
+    {from: 215, to: 692},
+    {from: 215, to: 693},
+    {from: 215, to: 721},
+    {from: 215, to: 723},
+    {from: 216, to: 277},
+    {from: 216, to: 286},
+    {from: 216, to: 294},
+    {from: 216, to: 332},
+    {from: 216, to: 333},
+    {from: 216, to: 381},
+    {from: 216, to: 428},
+    {from: 216, to: 432},
+    {from: 216, to: 443},
+    {from: 216, to: 511},
+    {from: 216, to: 528},
+    {from: 216, to: 571},
+    {from: 216, to: 580},
+    {from: 216, to: 589},
+    {from: 216, to: 593},
+    {from: 216, to: 601},
+    {from: 216, to: 618},
+    {from: 216, to: 619},
+    {from: 216, to: 623},
+    {from: 216, to: 644},
+    {from: 216, to: 652},
+    {from: 216, to: 703},
+    {from: 216, to: 716},
+    {from: 216, to: 719},
+    {from: 217, to: 278},
+    {from: 217, to: 321},
+    {from: 217, to: 337},
+    {from: 217, to: 407},
+    {from: 217, to: 420},
+    {from: 217, to: 488},
+    {from: 217, to: 533},
+    {from: 217, to: 579},
+    {from: 217, to: 625},
+    {from: 217, to: 626},
+    {from: 217, to: 627},
+    {from: 217, to: 662},
+    {from: 217, to: 705},
+    {from: 218, to: 221},
+    {from: 218, to: 260},
+    {from: 218, to: 261},
+    {from: 218, to: 274},
+    {from: 218, to: 279},
+    {from: 218, to: 296},
+    {from: 218, to: 366},
+    {from: 218, to: 418},
+    {from: 218, to: 422},
+    {from: 218, to: 435},
+    {from: 218, to: 493},
+    {from: 218, to: 494},
+    {from: 218, to: 519},
+    {from: 218, to: 525},
+    {from: 218, to: 526},
+    {from: 218, to: 572},
+    {from: 218, to: 582},
+    {from: 218, to: 585},
+    {from: 218, to: 591},
+    {from: 218, to: 605},
+    {from: 218, to: 631},
+    {from: 218, to: 655},
+    {from: 218, to: 693},
+    {from: 218, to: 722},
+    {from: 219, to: 234},
+    {from: 219, to: 304},
+    {from: 219, to: 309},
+    {from: 219, to: 366},
+    {from: 219, to: 369},
+    {from: 219, to: 370},
+    {from: 219, to: 457},
+    {from: 219, to: 554},
+    {from: 219, to: 630},
+    {from: 219, to: 672},
+    {from: 219, to: 701},
+    {from: 220, to: 272},
+    {from: 220, to: 340},
+    {from: 220, to: 346},
+    {from: 220, to: 347},
+    {from: 220, to: 387},
+    {from: 220, to: 404},
+    {from: 220, to: 437},
+    {from: 220, to: 503},
+    {from: 220, to: 520},
+    {from: 220, to: 590},
+    {from: 220, to: 628},
+    {from: 220, to: 664},
+    {from: 220, to: 670},
+    {from: 220, to: 709},
+    {from: 221, to: 225},
+    {from: 221, to: 260},
+    {from: 221, to: 261},
+    {from: 221, to: 279},
+    {from: 221, to: 287},
+    {from: 221, to: 319},
+    {from: 221, to: 358},
+    {from: 221, to: 366},
+    {from: 221, to: 419},
+    {from: 221, to: 422},
+    {from: 221, to: 424},
+    {from: 221, to: 450},
+    {from: 221, to: 451},
+    {from: 221, to: 462},
+    {from: 221, to: 487},
+    {from: 221, to: 555},
+    {from: 221, to: 572},
+    {from: 221, to: 591},
+    {from: 221, to: 600},
+    {from: 221, to: 608},
+    {from: 221, to: 642},
+    {from: 221, to: 645},
+    {from: 221, to: 693},
+    {from: 222, to: 228},
+    {from: 222, to: 235},
+    {from: 222, to: 236},
+    {from: 222, to: 305},
+    {from: 222, to: 324},
+    {from: 222, to: 334},
+    {from: 222, to: 353},
+    {from: 222, to: 368},
+    {from: 222, to: 429},
+    {from: 222, to: 489},
+    {from: 222, to: 499},
+    {from: 222, to: 548},
+    {from: 222, to: 552},
+    {from: 222, to: 595},
+    {from: 222, to: 710},
+    {from: 223, to: 230},
+    {from: 223, to: 239},
+    {from: 223, to: 262},
+    {from: 223, to: 320},
+    {from: 223, to: 344},
+    {from: 223, to: 354},
+    {from: 223, to: 361},
+    {from: 223, to: 362},
+    {from: 223, to: 445},
+    {from: 223, to: 483},
+    {from: 223, to: 484},
+    {from: 223, to: 512},
+    {from: 224, to: 233},
+    {from: 224, to: 279},
+    {from: 224, to: 280},
+    {from: 224, to: 289},
+    {from: 224, to: 308},
+    {from: 224, to: 323},
+    {from: 224, to: 331},
+    {from: 224, to: 335},
+    {from: 224, to: 376},
+    {from: 224, to: 431},
+    {from: 224, to: 436},
+    {from: 224, to: 443},
+    {from: 224, to: 462},
+    {from: 224, to: 490},
+    {from: 224, to: 529},
+    {from: 224, to: 547},
+    {from: 224, to: 555},
+    {from: 224, to: 567},
+    {from: 224, to: 586},
+    {from: 224, to: 642},
+    {from: 224, to: 676},
+    {from: 224, to: 699},
+    {from: 224, to: 707},
+    {from: 224, to: 717},
+    {from: 224, to: 726},
+    {from: 225, to: 261},
+    {from: 225, to: 287},
+    {from: 225, to: 319},
+    {from: 225, to: 358},
+    {from: 225, to: 419},
+    {from: 225, to: 424},
+    {from: 225, to: 450},
+    {from: 225, to: 451},
+    {from: 225, to: 462},
+    {from: 225, to: 487},
+    {from: 225, to: 555},
+    {from: 225, to: 600},
+    {from: 225, to: 608},
+    {from: 225, to: 642},
+    {from: 225, to: 645},
+    {from: 226, to: 240},
+    {from: 226, to: 302},
+    {from: 226, to: 352},
+    {from: 226, to: 359},
+    {from: 226, to: 430},
+    {from: 226, to: 461},
+    {from: 226, to: 463},
+    {from: 226, to: 486},
+    {from: 226, to: 531},
+    {from: 226, to: 607},
+    {from: 226, to: 634},
+    {from: 226, to: 711},
+    {from: 226, to: 714},
+    {from: 227, to: 231},
+    {from: 227, to: 238},
+    {from: 227, to: 245},
+    {from: 227, to: 294},
+    {from: 227, to: 316},
+    {from: 227, to: 342},
+    {from: 227, to: 349},
+    {from: 227, to: 371},
+    {from: 227, to: 373},
+    {from: 227, to: 397},
+    {from: 227, to: 547},
+    {from: 227, to: 569},
+    {from: 227, to: 572},
+    {from: 227, to: 586},
+    {from: 227, to: 591},
+    {from: 227, to: 627},
+    {from: 227, to: 629},
+    {from: 227, to: 643},
+    {from: 227, to: 644},
+    {from: 227, to: 717},
+    {from: 227, to: 719},
+    {from: 227, to: 720},
+    {from: 228, to: 235},
+    {from: 228, to: 236},
+    {from: 228, to: 305},
+    {from: 228, to: 324},
+    {from: 228, to: 334},
+    {from: 228, to: 353},
+    {from: 228, to: 368},
+    {from: 228, to: 429},
+    {from: 228, to: 489},
+    {from: 228, to: 499},
+    {from: 228, to: 548},
+    {from: 228, to: 552},
+    {from: 228, to: 595},
+    {from: 228, to: 710},
+    {from: 229, to: 256},
+    {from: 229, to: 267},
+    {from: 229, to: 275},
+    {from: 229, to: 276},
+    {from: 229, to: 295},
+    {from: 229, to: 317},
+    {from: 229, to: 318},
+    {from: 229, to: 355},
+    {from: 229, to: 357},
+    {from: 229, to: 446},
+    {from: 229, to: 509},
+    {from: 229, to: 510},
+    {from: 229, to: 546},
+    {from: 229, to: 564},
+    {from: 229, to: 581},
+    {from: 229, to: 592},
+    {from: 230, to: 239},
+    {from: 230, to: 262},
+    {from: 230, to: 320},
+    {from: 230, to: 344},
+    {from: 230, to: 354},
+    {from: 230, to: 361},
+    {from: 230, to: 362},
+    {from: 230, to: 445},
+    {from: 230, to: 483},
+    {from: 230, to: 484},
+    {from: 230, to: 512},
+    {from: 231, to: 232},
+    {from: 231, to: 238},
+    {from: 231, to: 258},
+    {from: 231, to: 303},
+    {from: 231, to: 308},
+    {from: 231, to: 335},
+    {from: 231, to: 342},
+    {from: 231, to: 348},
+    {from: 231, to: 415},
+    {from: 231, to: 434},
+    {from: 231, to: 547},
+    {from: 231, to: 575},
+    {from: 231, to: 576},
+    {from: 231, to: 583},
+    {from: 231, to: 586},
+    {from: 231, to: 603},
+    {from: 231, to: 616},
+    {from: 231, to: 627},
+    {from: 231, to: 668},
+    {from: 231, to: 713},
+    {from: 231, to: 717},
+    {from: 232, to: 238},
+    {from: 232, to: 254},
+    {from: 232, to: 258},
+    {from: 232, to: 303},
+    {from: 232, to: 308},
+    {from: 232, to: 335},
+    {from: 232, to: 348},
+    {from: 232, to: 415},
+    {from: 232, to: 434},
+    {from: 232, to: 575},
+    {from: 232, to: 576},
+    {from: 232, to: 583},
+    {from: 232, to: 603},
+    {from: 232, to: 616},
+    {from: 232, to: 668},
+    {from: 232, to: 713},
+    {from: 233, to: 279},
+    {from: 233, to: 280},
+    {from: 233, to: 289},
+    {from: 233, to: 323},
+    {from: 233, to: 331},
+    {from: 233, to: 376},
+    {from: 233, to: 431},
+    {from: 233, to: 436},
+    {from: 233, to: 443},
+    {from: 233, to: 490},
+    {from: 233, to: 529},
+    {from: 233, to: 547},
+    {from: 233, to: 567},
+    {from: 233, to: 586},
+    {from: 233, to: 676},
+    {from: 233, to: 699},
+    {from: 233, to: 717},
+    {from: 234, to: 280},
+    {from: 234, to: 287},
+    {from: 234, to: 304},
+    {from: 234, to: 309},
+    {from: 234, to: 366},
+    {from: 234, to: 369},
+    {from: 234, to: 370},
+    {from: 234, to: 457},
+    {from: 234, to: 469},
+    {from: 234, to: 554},
+    {from: 234, to: 600},
+    {from: 234, to: 608},
+    {from: 234, to: 630},
+    {from: 234, to: 631},
+    {from: 234, to: 672},
+    {from: 234, to: 701},
+    {from: 234, to: 734},
+    {from: 235, to: 236},
+    {from: 235, to: 305},
+    {from: 235, to: 324},
+    {from: 235, to: 334},
+    {from: 235, to: 353},
+    {from: 235, to: 368},
+    {from: 235, to: 429},
+    {from: 235, to: 489},
+    {from: 235, to: 499},
+    {from: 235, to: 548},
+    {from: 235, to: 552},
+    {from: 235, to: 595},
+    {from: 235, to: 710},
+    {from: 236, to: 305},
+    {from: 236, to: 324},
+    {from: 236, to: 334},
+    {from: 236, to: 353},
+    {from: 236, to: 368},
+    {from: 236, to: 429},
+    {from: 236, to: 489},
+    {from: 236, to: 499},
+    {from: 236, to: 548},
+    {from: 236, to: 552},
+    {from: 236, to: 595},
+    {from: 236, to: 710},
+    {from: 237, to: 249},
+    {from: 237, to: 252},
+    {from: 237, to: 291},
+    {from: 237, to: 416},
+    {from: 237, to: 422},
+    {from: 237, to: 447},
+    {from: 237, to: 449},
+    {from: 237, to: 452},
+    {from: 237, to: 478},
+    {from: 237, to: 481},
+    {from: 237, to: 482},
+    {from: 237, to: 622},
+    {from: 237, to: 675},
+    {from: 237, to: 711},
+    {from: 238, to: 258},
+    {from: 238, to: 303},
+    {from: 238, to: 308},
+    {from: 238, to: 335},
+    {from: 238, to: 342},
+    {from: 238, to: 348},
+    {from: 238, to: 415},
+    {from: 238, to: 434},
+    {from: 238, to: 547},
+    {from: 238, to: 575},
+    {from: 238, to: 576},
+    {from: 238, to: 583},
+    {from: 238, to: 586},
+    {from: 238, to: 603},
+    {from: 238, to: 616},
+    {from: 238, to: 627},
+    {from: 238, to: 668},
+    {from: 238, to: 713},
+    {from: 238, to: 717},
+    {from: 239, to: 262},
+    {from: 239, to: 320},
+    {from: 239, to: 344},
+    {from: 239, to: 354},
+    {from: 239, to: 361},
+    {from: 239, to: 362},
+    {from: 239, to: 391},
+    {from: 239, to: 445},
+    {from: 239, to: 483},
+    {from: 239, to: 484},
+    {from: 239, to: 512},
+    {from: 240, to: 352},
+    {from: 240, to: 359},
+    {from: 240, to: 430},
+    {from: 240, to: 434},
+    {from: 240, to: 461},
+    {from: 240, to: 463},
+    {from: 240, to: 486},
+    {from: 240, to: 491},
+    {from: 240, to: 521},
+    {from: 240, to: 531},
+    {from: 240, to: 603},
+    {from: 240, to: 607},
+    {from: 240, to: 634},
+    {from: 240, to: 711},
+    {from: 241, to: 260},
+    {from: 241, to: 266},
+    {from: 241, to: 271},
+    {from: 241, to: 339},
+    {from: 241, to: 364},
+    {from: 241, to: 453},
+    {from: 241, to: 480},
+    {from: 241, to: 497},
+    {from: 241, to: 504},
+    {from: 241, to: 578},
+    {from: 241, to: 596},
+    {from: 241, to: 602},
+    {from: 241, to: 610},
+    {from: 241, to: 661},
+    {from: 241, to: 665},
+    {from: 241, to: 690},
+    {from: 241, to: 692},
+    {from: 241, to: 693},
+    {from: 241, to: 721},
+    {from: 241, to: 723},
+    {from: 242, to: 265},
+    {from: 242, to: 326},
+    {from: 242, to: 341},
+    {from: 242, to: 365},
+    {from: 242, to: 375},
+    {from: 242, to: 406},
+    {from: 242, to: 476},
+    {from: 242, to: 502},
+    {from: 242, to: 513},
+    {from: 242, to: 530},
+    {from: 242, to: 544},
+    {from: 242, to: 574},
+    {from: 242, to: 681},
+    {from: 242, to: 683},
+    {from: 242, to: 718},
+    {from: 243, to: 292},
+    {from: 243, to: 293},
+    {from: 243, to: 439},
+    {from: 243, to: 540},
+    {from: 243, to: 568},
+    {from: 243, to: 640},
+    {from: 243, to: 641},
+    {from: 243, to: 695},
+    {from: 243, to: 704},
+    {from: 243, to: 708},
+    {from: 243, to: 732},
+    {from: 243, to: 733},
+    {from: 244, to: 314},
+    {from: 244, to: 325},
+    {from: 244, to: 338},
+    {from: 244, to: 345},
+    {from: 244, to: 350},
+    {from: 244, to: 396},
+    {from: 244, to: 417},
+    {from: 244, to: 496},
+    {from: 244, to: 507},
+    {from: 244, to: 534},
+    {from: 244, to: 566},
+    {from: 244, to: 606},
+    {from: 244, to: 613},
+    {from: 244, to: 630},
+    {from: 244, to: 659},
+    {from: 244, to: 673},
+    {from: 244, to: 682},
+    {from: 244, to: 714},
+    {from: 245, to: 294},
+    {from: 245, to: 316},
+    {from: 245, to: 319},
+    {from: 245, to: 349},
+    {from: 245, to: 368},
+    {from: 245, to: 371},
+    {from: 245, to: 373},
+    {from: 245, to: 397},
+    {from: 245, to: 419},
+    {from: 245, to: 429},
+    {from: 245, to: 489},
+    {from: 245, to: 529},
+    {from: 245, to: 569},
+    {from: 245, to: 572},
+    {from: 245, to: 591},
+    {from: 245, to: 629},
+    {from: 245, to: 643},
+    {from: 245, to: 644},
+    {from: 245, to: 719},
+    {from: 245, to: 720},
+    {from: 246, to: 257},
+    {from: 246, to: 297},
+    {from: 246, to: 322},
+    {from: 246, to: 398},
+    {from: 246, to: 436},
+    {from: 246, to: 474},
+    {from: 246, to: 485},
+    {from: 246, to: 516},
+    {from: 246, to: 553},
+    {from: 246, to: 621},
+    {from: 246, to: 632},
+    {from: 246, to: 638},
+    {from: 246, to: 639},
+    {from: 246, to: 657},
+    {from: 246, to: 671},
+    {from: 246, to: 696},
+    {from: 246, to: 715},
+    {from: 246, to: 726},
+    {from: 247, to: 273},
+    {from: 247, to: 284},
+    {from: 247, to: 306},
+    {from: 247, to: 315},
+    {from: 247, to: 380},
+    {from: 247, to: 389},
+    {from: 247, to: 467},
+    {from: 247, to: 495},
+    {from: 247, to: 570},
+    {from: 247, to: 584},
+    {from: 247, to: 598},
+    {from: 247, to: 599},
+    {from: 247, to: 666},
+    {from: 248, to: 336},
+    {from: 248, to: 343},
+    {from: 248, to: 360},
+    {from: 248, to: 378},
+    {from: 248, to: 388},
+    {from: 248, to: 448},
+    {from: 248, to: 501},
+    {from: 248, to: 506},
+    {from: 248, to: 550},
+    {from: 248, to: 563},
+    {from: 248, to: 588},
+    {from: 248, to: 617},
+    {from: 248, to: 712},
+    {from: 248, to: 727},
+    {from: 249, to: 252},
+    {from: 249, to: 291},
+    {from: 249, to: 404},
+    {from: 249, to: 416},
+    {from: 249, to: 422},
+    {from: 249, to: 447},
+    {from: 249, to: 449},
+    {from: 249, to: 452},
+    {from: 249, to: 461},
+    {from: 249, to: 478},
+    {from: 249, to: 481},
+    {from: 249, to: 482},
+    {from: 249, to: 483},
+    {from: 249, to: 565},
+    {from: 249, to: 622},
+    {from: 249, to: 661},
+    {from: 249, to: 675},
+    {from: 250, to: 251},
+    {from: 250, to: 253},
+    {from: 250, to: 254},
+    {from: 250, to: 255},
+    {from: 250, to: 356},
+    {from: 250, to: 400},
+    {from: 250, to: 401},
+    {from: 250, to: 402},
+    {from: 250, to: 410},
+    {from: 250, to: 423},
+    {from: 250, to: 482},
+    {from: 250, to: 545},
+    {from: 250, to: 556},
+    {from: 250, to: 557},
+    {from: 250, to: 558},
+    {from: 250, to: 653},
+    {from: 250, to: 656},
+    {from: 250, to: 660},
+    {from: 250, to: 674},
+    {from: 250, to: 694},
+    {from: 250, to: 696},
+    {from: 251, to: 253},
+    {from: 251, to: 254},
+    {from: 251, to: 255},
+    {from: 251, to: 336},
+    {from: 251, to: 356},
+    {from: 251, to: 400},
+    {from: 251, to: 401},
+    {from: 251, to: 402},
+    {from: 251, to: 410},
+    {from: 251, to: 423},
+    {from: 251, to: 545},
+    {from: 251, to: 556},
+    {from: 251, to: 557},
+    {from: 251, to: 558},
+    {from: 251, to: 656},
+    {from: 251, to: 660},
+    {from: 251, to: 674},
+    {from: 251, to: 694},
+    {from: 251, to: 696},
+    {from: 252, to: 291},
+    {from: 252, to: 404},
+    {from: 252, to: 416},
+    {from: 252, to: 422},
+    {from: 252, to: 447},
+    {from: 252, to: 449},
+    {from: 252, to: 452},
+    {from: 252, to: 461},
+    {from: 252, to: 478},
+    {from: 252, to: 481},
+    {from: 252, to: 482},
+    {from: 252, to: 483},
+    {from: 252, to: 565},
+    {from: 252, to: 622},
+    {from: 252, to: 661},
+    {from: 252, to: 675},
+    {from: 253, to: 254},
+    {from: 253, to: 255},
+    {from: 253, to: 356},
+    {from: 253, to: 400},
+    {from: 253, to: 401},
+    {from: 253, to: 402},
+    {from: 253, to: 410},
+    {from: 253, to: 423},
+    {from: 253, to: 545},
+    {from: 253, to: 556},
+    {from: 253, to: 557},
+    {from: 253, to: 558},
+    {from: 253, to: 656},
+    {from: 253, to: 660},
+    {from: 253, to: 674},
+    {from: 253, to: 694},
+    {from: 253, to: 696},
+    {from: 254, to: 255},
+    {from: 254, to: 356},
+    {from: 254, to: 400},
+    {from: 254, to: 401},
+    {from: 254, to: 402},
+    {from: 254, to: 410},
+    {from: 254, to: 423},
+    {from: 254, to: 545},
+    {from: 254, to: 556},
+    {from: 254, to: 557},
+    {from: 254, to: 558},
+    {from: 254, to: 656},
+    {from: 254, to: 660},
+    {from: 254, to: 674},
+    {from: 254, to: 694},
+    {from: 254, to: 696},
+    {from: 255, to: 356},
+    {from: 255, to: 400},
+    {from: 255, to: 401},
+    {from: 255, to: 402},
+    {from: 255, to: 410},
+    {from: 255, to: 423},
+    {from: 255, to: 545},
+    {from: 255, to: 556},
+    {from: 255, to: 557},
+    {from: 255, to: 558},
+    {from: 255, to: 656},
+    {from: 255, to: 660},
+    {from: 255, to: 674},
+    {from: 255, to: 694},
+    {from: 255, to: 696},
+    {from: 256, to: 267},
+    {from: 256, to: 275},
+    {from: 256, to: 276},
+    {from: 256, to: 295},
+    {from: 256, to: 317},
+    {from: 256, to: 318},
+    {from: 256, to: 355},
+    {from: 256, to: 357},
+    {from: 256, to: 446},
+    {from: 256, to: 509},
+    {from: 256, to: 510},
+    {from: 256, to: 546},
+    {from: 256, to: 564},
+    {from: 256, to: 581},
+    {from: 256, to: 592},
+    {from: 257, to: 297},
+    {from: 257, to: 322},
+    {from: 257, to: 398},
+    {from: 257, to: 445},
+    {from: 257, to: 474},
+    {from: 257, to: 485},
+    {from: 257, to: 553},
+    {from: 257, to: 621},
+    {from: 257, to: 632},
+    {from: 257, to: 638},
+    {from: 257, to: 639},
+    {from: 257, to: 657},
+    {from: 257, to: 671},
+    {from: 257, to: 692},
+    {from: 257, to: 715},
+    {from: 257, to: 723},
+    {from: 257, to: 726},
+    {from: 258, to: 303},
+    {from: 258, to: 308},
+    {from: 258, to: 335},
+    {from: 258, to: 348},
+    {from: 258, to: 398},
+    {from: 258, to: 415},
+    {from: 258, to: 430},
+    {from: 258, to: 434},
+    {from: 258, to: 440},
+    {from: 258, to: 575},
+    {from: 258, to: 576},
+    {from: 258, to: 583},
+    {from: 258, to: 603},
+    {from: 258, to: 616},
+    {from: 258, to: 654},
+    {from: 258, to: 668},
+    {from: 258, to: 702},
+    {from: 258, to: 713},
+    {from: 259, to: 342},
+    {from: 259, to: 363},
+    {from: 259, to: 379},
+    {from: 259, to: 383},
+    {from: 259, to: 403},
+    {from: 259, to: 500},
+    {from: 259, to: 505},
+    {from: 259, to: 537},
+    {from: 259, to: 553},
+    {from: 259, to: 574},
+    {from: 259, to: 587},
+    {from: 259, to: 597},
+    {from: 259, to: 649},
+    {from: 259, to: 691},
+    {from: 259, to: 702},
+    {from: 259, to: 706},
+    {from: 260, to: 261},
+    {from: 260, to: 266},
+    {from: 260, to: 271},
+    {from: 260, to: 279},
+    {from: 260, to: 339},
+    {from: 260, to: 364},
+    {from: 260, to: 366},
+    {from: 260, to: 422},
+    {from: 260, to: 453},
+    {from: 260, to: 504},
+    {from: 260, to: 572},
+    {from: 260, to: 578},
+    {from: 260, to: 591},
+    {from: 260, to: 596},
+    {from: 260, to: 602},
+    {from: 260, to: 610},
+    {from: 260, to: 661},
+    {from: 260, to: 665},
+    {from: 260, to: 690},
+    {from: 260, to: 692},
+    {from: 260, to: 693},
+    {from: 260, to: 721},
+    {from: 260, to: 723},
+    {from: 261, to: 279},
+    {from: 261, to: 287},
+    {from: 261, to: 319},
+    {from: 261, to: 358},
+    {from: 261, to: 366},
+    {from: 261, to: 419},
+    {from: 261, to: 422},
+    {from: 261, to: 424},
+    {from: 261, to: 450},
+    {from: 261, to: 451},
+    {from: 261, to: 462},
+    {from: 261, to: 487},
+    {from: 261, to: 555},
+    {from: 261, to: 572},
+    {from: 261, to: 591},
+    {from: 261, to: 600},
+    {from: 261, to: 608},
+    {from: 261, to: 642},
+    {from: 261, to: 645},
+    {from: 261, to: 693},
+    {from: 262, to: 320},
+    {from: 262, to: 344},
+    {from: 262, to: 354},
+    {from: 262, to: 361},
+    {from: 262, to: 362},
+    {from: 262, to: 445},
+    {from: 262, to: 483},
+    {from: 262, to: 484},
+    {from: 262, to: 512},
+    {from: 263, to: 299},
+    {from: 263, to: 300},
+    {from: 263, to: 301},
+    {from: 263, to: 432},
+    {from: 263, to: 444},
+    {from: 263, to: 455},
+    {from: 263, to: 469},
+    {from: 263, to: 514},
+    {from: 263, to: 535},
+    {from: 263, to: 539},
+    {from: 263, to: 542},
+    {from: 263, to: 624},
+    {from: 263, to: 653},
+    {from: 263, to: 660},
+    {from: 263, to: 669},
+    {from: 263, to: 698},
+    {from: 264, to: 281},
+    {from: 264, to: 282},
+    {from: 264, to: 285},
+    {from: 264, to: 382},
+    {from: 264, to: 438},
+    {from: 264, to: 441},
+    {from: 264, to: 465},
+    {from: 264, to: 466},
+    {from: 264, to: 491},
+    {from: 264, to: 646},
+    {from: 264, to: 647},
+    {from: 264, to: 650},
+    {from: 264, to: 651},
+    {from: 264, to: 689},
+    {from: 264, to: 697},
+    {from: 264, to: 724},
+    {from: 264, to: 725},
+    {from: 264, to: 729},
+    {from: 264, to: 730},
+    {from: 264, to: 734},
+    {from: 264, to: 735},
+    {from: 265, to: 326},
+    {from: 265, to: 341},
+    {from: 265, to: 365},
+    {from: 265, to: 375},
+    {from: 265, to: 406},
+    {from: 265, to: 476},
+    {from: 265, to: 502},
+    {from: 265, to: 513},
+    {from: 265, to: 530},
+    {from: 265, to: 544},
+    {from: 265, to: 681},
+    {from: 265, to: 683},
+    {from: 266, to: 271},
+    {from: 266, to: 339},
+    {from: 266, to: 364},
+    {from: 266, to: 453},
+    {from: 266, to: 504},
+    {from: 266, to: 578},
+    {from: 266, to: 596},
+    {from: 266, to: 602},
+    {from: 266, to: 610},
+    {from: 266, to: 661},
+    {from: 266, to: 665},
+    {from: 266, to: 690},
+    {from: 266, to: 692},
+    {from: 266, to: 693},
+    {from: 266, to: 721},
+    {from: 266, to: 723},
+    {from: 267, to: 275},
+    {from: 267, to: 276},
+    {from: 267, to: 295},
+    {from: 267, to: 317},
+    {from: 267, to: 318},
+    {from: 267, to: 355},
+    {from: 267, to: 357},
+    {from: 267, to: 446},
+    {from: 267, to: 494},
+    {from: 267, to: 509},
+    {from: 267, to: 510},
+    {from: 267, to: 546},
+    {from: 267, to: 564},
+    {from: 267, to: 581},
+    {from: 267, to: 592},
+    {from: 268, to: 269},
+    {from: 268, to: 283},
+    {from: 268, to: 290},
+    {from: 268, to: 330},
+    {from: 268, to: 377},
+    {from: 268, to: 390},
+    {from: 268, to: 391},
+    {from: 268, to: 392},
+    {from: 268, to: 393},
+    {from: 268, to: 394},
+    {from: 268, to: 395},
+    {from: 268, to: 399},
+    {from: 268, to: 405},
+    {from: 268, to: 411},
+    {from: 268, to: 412},
+    {from: 268, to: 413},
+    {from: 268, to: 414},
+    {from: 268, to: 559},
+    {from: 268, to: 560},
+    {from: 268, to: 561},
+    {from: 268, to: 658},
+    {from: 268, to: 731},
+    {from: 269, to: 283},
+    {from: 269, to: 290},
+    {from: 269, to: 330},
+    {from: 269, to: 377},
+    {from: 269, to: 390},
+    {from: 269, to: 391},
+    {from: 269, to: 392},
+    {from: 269, to: 393},
+    {from: 269, to: 394},
+    {from: 269, to: 395},
+    {from: 269, to: 399},
+    {from: 269, to: 405},
+    {from: 269, to: 411},
+    {from: 269, to: 412},
+    {from: 269, to: 413},
+    {from: 269, to: 414},
+    {from: 269, to: 559},
+    {from: 269, to: 560},
+    {from: 269, to: 561},
+    {from: 269, to: 658},
+    {from: 269, to: 731},
+    {from: 270, to: 302},
+    {from: 270, to: 312},
+    {from: 270, to: 497},
+    {from: 270, to: 516},
+    {from: 270, to: 524},
+    {from: 270, to: 538},
+    {from: 270, to: 633},
+    {from: 270, to: 635},
+    {from: 270, to: 636},
+    {from: 270, to: 637},
+    {from: 270, to: 684},
+    {from: 270, to: 688},
+    {from: 270, to: 697},
+    {from: 270, to: 736},
+    {from: 271, to: 339},
+    {from: 271, to: 364},
+    {from: 271, to: 453},
+    {from: 271, to: 504},
+    {from: 271, to: 578},
+    {from: 271, to: 596},
+    {from: 271, to: 602},
+    {from: 271, to: 610},
+    {from: 271, to: 615},
+    {from: 271, to: 661},
+    {from: 271, to: 665},
+    {from: 271, to: 690},
+    {from: 271, to: 692},
+    {from: 271, to: 693},
+    {from: 271, to: 721},
+    {from: 271, to: 723},
+    {from: 272, to: 340},
+    {from: 272, to: 346},
+    {from: 272, to: 347},
+    {from: 272, to: 387},
+    {from: 272, to: 404},
+    {from: 272, to: 437},
+    {from: 272, to: 503},
+    {from: 272, to: 520},
+    {from: 272, to: 590},
+    {from: 272, to: 628},
+    {from: 272, to: 664},
+    {from: 272, to: 670},
+    {from: 272, to: 709},
+    {from: 273, to: 284},
+    {from: 273, to: 306},
+    {from: 273, to: 315},
+    {from: 273, to: 380},
+    {from: 273, to: 389},
+    {from: 273, to: 467},
+    {from: 273, to: 495},
+    {from: 273, to: 570},
+    {from: 273, to: 584},
+    {from: 273, to: 598},
+    {from: 273, to: 599},
+    {from: 273, to: 666},
+    {from: 274, to: 296},
+    {from: 274, to: 418},
+    {from: 274, to: 435},
+    {from: 274, to: 493},
+    {from: 274, to: 494},
+    {from: 274, to: 519},
+    {from: 274, to: 525},
+    {from: 274, to: 526},
+    {from: 274, to: 582},
+    {from: 274, to: 585},
+    {from: 274, to: 605},
+    {from: 274, to: 631},
+    {from: 274, to: 655},
+    {from: 274, to: 722},
+    {from: 275, to: 276},
+    {from: 275, to: 295},
+    {from: 275, to: 304},
+    {from: 275, to: 317},
+    {from: 275, to: 318},
+    {from: 275, to: 352},
+    {from: 275, to: 355},
+    {from: 275, to: 357},
+    {from: 275, to: 369},
+    {from: 275, to: 446},
+    {from: 275, to: 509},
+    {from: 275, to: 510},
+    {from: 275, to: 526},
+    {from: 275, to: 546},
+    {from: 275, to: 564},
+    {from: 275, to: 581},
+    {from: 275, to: 592},
+    {from: 275, to: 652},
+    {from: 275, to: 667},
+    {from: 276, to: 295},
+    {from: 276, to: 317},
+    {from: 276, to: 318},
+    {from: 276, to: 355},
+    {from: 276, to: 357},
+    {from: 276, to: 446},
+    {from: 276, to: 509},
+    {from: 276, to: 510},
+    {from: 276, to: 546},
+    {from: 276, to: 564},
+    {from: 276, to: 581},
+    {from: 276, to: 592},
+    {from: 277, to: 286},
+    {from: 277, to: 332},
+    {from: 277, to: 333},
+    {from: 277, to: 424},
+    {from: 277, to: 428},
+    {from: 277, to: 511},
+    {from: 277, to: 517},
+    {from: 277, to: 528},
+    {from: 277, to: 537},
+    {from: 277, to: 571},
+    {from: 277, to: 580},
+    {from: 277, to: 593},
+    {from: 277, to: 601},
+    {from: 277, to: 618},
+    {from: 277, to: 619},
+    {from: 277, to: 636},
+    {from: 277, to: 652},
+    {from: 277, to: 703},
+    {from: 277, to: 716},
+    {from: 278, to: 321},
+    {from: 278, to: 337},
+    {from: 278, to: 407},
+    {from: 278, to: 420},
+    {from: 278, to: 488},
+    {from: 278, to: 533},
+    {from: 278, to: 579},
+    {from: 278, to: 626},
+    {from: 278, to: 627},
+    {from: 278, to: 662},
+    {from: 278, to: 705},
+    {from: 279, to: 280},
+    {from: 279, to: 289},
+    {from: 279, to: 323},
+    {from: 279, to: 331},
+    {from: 279, to: 366},
+    {from: 279, to: 376},
+    {from: 279, to: 422},
+    {from: 279, to: 431},
+    {from: 279, to: 436},
+    {from: 279, to: 443},
+    {from: 279, to: 490},
+    {from: 279, to: 529},
+    {from: 279, to: 547},
+    {from: 279, to: 567},
+    {from: 279, to: 572},
+    {from: 279, to: 586},
+    {from: 279, to: 591},
+    {from: 279, to: 676},
+    {from: 279, to: 693},
+    {from: 279, to: 699},
+    {from: 279, to: 717},
+    {from: 280, to: 287},
+    {from: 280, to: 289},
+    {from: 280, to: 323},
+    {from: 280, to: 331},
+    {from: 280, to: 376},
+    {from: 280, to: 431},
+    {from: 280, to: 436},
+    {from: 280, to: 443},
+    {from: 280, to: 469},
+    {from: 280, to: 490},
+    {from: 280, to: 529},
+    {from: 280, to: 547},
+    {from: 280, to: 567},
+    {from: 280, to: 586},
+    {from: 280, to: 600},
+    {from: 280, to: 608},
+    {from: 280, to: 631},
+    {from: 280, to: 676},
+    {from: 280, to: 699},
+    {from: 280, to: 717},
+    {from: 280, to: 734},
+    {from: 281, to: 282},
+    {from: 281, to: 285},
+    {from: 281, to: 382},
+    {from: 281, to: 438},
+    {from: 281, to: 441},
+    {from: 281, to: 465},
+    {from: 281, to: 466},
+    {from: 281, to: 491},
+    {from: 281, to: 614},
+    {from: 281, to: 646},
+    {from: 281, to: 647},
+    {from: 281, to: 650},
+    {from: 281, to: 651},
+    {from: 281, to: 689},
+    {from: 281, to: 724},
+    {from: 281, to: 725},
+    {from: 281, to: 729},
+    {from: 281, to: 730},
+    {from: 281, to: 734},
+    {from: 281, to: 735},
+    {from: 282, to: 285},
+    {from: 282, to: 364},
+    {from: 282, to: 382},
+    {from: 282, to: 438},
+    {from: 282, to: 441},
+    {from: 282, to: 465},
+    {from: 282, to: 466},
+    {from: 282, to: 491},
+    {from: 282, to: 646},
+    {from: 282, to: 647},
+    {from: 282, to: 650},
+    {from: 282, to: 651},
+    {from: 282, to: 683},
+    {from: 282, to: 689},
+    {from: 282, to: 724},
+    {from: 282, to: 725},
+    {from: 282, to: 729},
+    {from: 282, to: 730},
+    {from: 282, to: 734},
+    {from: 282, to: 735},
+    {from: 283, to: 290},
+    {from: 283, to: 330},
+    {from: 283, to: 377},
+    {from: 283, to: 390},
+    {from: 283, to: 391},
+    {from: 283, to: 392},
+    {from: 283, to: 393},
+    {from: 283, to: 394},
+    {from: 283, to: 395},
+    {from: 283, to: 399},
+    {from: 283, to: 405},
+    {from: 283, to: 411},
+    {from: 283, to: 412},
+    {from: 283, to: 413},
+    {from: 283, to: 414},
+    {from: 283, to: 559},
+    {from: 283, to: 560},
+    {from: 283, to: 561},
+    {from: 283, to: 566},
+    {from: 283, to: 658},
+    {from: 283, to: 731},
+    {from: 284, to: 306},
+    {from: 284, to: 315},
+    {from: 284, to: 380},
+    {from: 284, to: 389},
+    {from: 284, to: 467},
+    {from: 284, to: 495},
+    {from: 284, to: 570},
+    {from: 284, to: 584},
+    {from: 284, to: 598},
+    {from: 284, to: 599},
+    {from: 284, to: 666},
+    {from: 285, to: 382},
+    {from: 285, to: 438},
+    {from: 285, to: 441},
+    {from: 285, to: 465},
+    {from: 285, to: 466},
+    {from: 285, to: 491},
+    {from: 285, to: 646},
+    {from: 285, to: 647},
+    {from: 285, to: 650},
+    {from: 285, to: 651},
+    {from: 285, to: 689},
+    {from: 285, to: 724},
+    {from: 285, to: 725},
+    {from: 285, to: 729},
+    {from: 285, to: 730},
+    {from: 285, to: 734},
+    {from: 285, to: 735},
+    {from: 286, to: 326},
+    {from: 286, to: 332},
+    {from: 286, to: 333},
+    {from: 286, to: 428},
+    {from: 286, to: 511},
+    {from: 286, to: 528},
+    {from: 286, to: 571},
+    {from: 286, to: 580},
+    {from: 286, to: 593},
+    {from: 286, to: 601},
+    {from: 286, to: 618},
+    {from: 286, to: 619},
+    {from: 286, to: 652},
+    {from: 286, to: 703},
+    {from: 286, to: 716},
+    {from: 287, to: 319},
+    {from: 287, to: 358},
+    {from: 287, to: 419},
+    {from: 287, to: 424},
+    {from: 287, to: 450},
+    {from: 287, to: 451},
+    {from: 287, to: 462},
+    {from: 287, to: 469},
+    {from: 287, to: 487},
+    {from: 287, to: 555},
+    {from: 287, to: 600},
+    {from: 287, to: 608},
+    {from: 287, to: 631},
+    {from: 287, to: 642},
+    {from: 287, to: 645},
+    {from: 287, to: 734},
+    {from: 288, to: 311},
+    {from: 288, to: 381},
+    {from: 288, to: 409},
+    {from: 288, to: 421},
+    {from: 288, to: 425},
+    {from: 288, to: 440},
+    {from: 288, to: 472},
+    {from: 288, to: 473},
+    {from: 288, to: 508},
+    {from: 288, to: 521},
+    {from: 288, to: 522},
+    {from: 288, to: 523},
+    {from: 288, to: 525},
+    {from: 288, to: 527},
+    {from: 288, to: 543},
+    {from: 288, to: 562},
+    {from: 288, to: 565},
+    {from: 288, to: 567},
+    {from: 288, to: 589},
+    {from: 288, to: 594},
+    {from: 288, to: 604},
+    {from: 288, to: 663},
+    {from: 288, to: 728},
+    {from: 289, to: 323},
+    {from: 289, to: 331},
+    {from: 289, to: 376},
+    {from: 289, to: 428},
+    {from: 289, to: 431},
+    {from: 289, to: 436},
+    {from: 289, to: 443},
+    {from: 289, to: 490},
+    {from: 289, to: 529},
+    {from: 289, to: 532},
+    {from: 289, to: 540},
+    {from: 289, to: 547},
+    {from: 289, to: 567},
+    {from: 289, to: 586},
+    {from: 289, to: 676},
+    {from: 289, to: 699},
+    {from: 289, to: 704},
+    {from: 289, to: 717},
+    {from: 289, to: 732},
+    {from: 290, to: 330},
+    {from: 290, to: 377},
+    {from: 290, to: 390},
+    {from: 290, to: 391},
+    {from: 290, to: 392},
+    {from: 290, to: 393},
+    {from: 290, to: 394},
+    {from: 290, to: 395},
+    {from: 290, to: 399},
+    {from: 290, to: 405},
+    {from: 290, to: 411},
+    {from: 290, to: 412},
+    {from: 290, to: 413},
+    {from: 290, to: 414},
+    {from: 290, to: 559},
+    {from: 290, to: 560},
+    {from: 290, to: 561},
+    {from: 290, to: 658},
+    {from: 290, to: 689},
+    {from: 290, to: 731},
+    {from: 291, to: 382},
+    {from: 291, to: 416},
+    {from: 291, to: 422},
+    {from: 291, to: 447},
+    {from: 291, to: 449},
+    {from: 291, to: 452},
+    {from: 291, to: 478},
+    {from: 291, to: 481},
+    {from: 291, to: 482},
+    {from: 291, to: 503},
+    {from: 291, to: 534},
+    {from: 291, to: 622},
+    {from: 291, to: 670},
+    {from: 291, to: 675},
+    {from: 292, to: 293},
+    {from: 292, to: 439},
+    {from: 292, to: 540},
+    {from: 292, to: 568},
+    {from: 292, to: 640},
+    {from: 292, to: 641},
+    {from: 292, to: 695},
+    {from: 292, to: 704},
+    {from: 292, to: 708},
+    {from: 292, to: 732},
+    {from: 292, to: 733},
+    {from: 293, to: 439},
+    {from: 293, to: 540},
+    {from: 293, to: 568},
+    {from: 293, to: 640},
+    {from: 293, to: 641},
+    {from: 293, to: 695},
+    {from: 293, to: 704},
+    {from: 293, to: 708},
+    {from: 293, to: 732},
+    {from: 293, to: 733},
+    {from: 294, to: 316},
+    {from: 294, to: 349},
+    {from: 294, to: 371},
+    {from: 294, to: 373},
+    {from: 294, to: 381},
+    {from: 294, to: 397},
+    {from: 294, to: 432},
+    {from: 294, to: 443},
+    {from: 294, to: 569},
+    {from: 294, to: 571},
+    {from: 294, to: 572},
+    {from: 294, to: 589},
+    {from: 294, to: 591},
+    {from: 294, to: 623},
+    {from: 294, to: 629},
+    {from: 294, to: 643},
+    {from: 294, to: 644},
+    {from: 294, to: 719},
+    {from: 294, to: 720},
+    {from: 295, to: 317},
+    {from: 295, to: 318},
+    {from: 295, to: 355},
+    {from: 295, to: 357},
+    {from: 295, to: 446},
+    {from: 295, to: 509},
+    {from: 295, to: 510},
+    {from: 295, to: 546},
+    {from: 295, to: 564},
+    {from: 295, to: 581},
+    {from: 295, to: 592},
+    {from: 296, to: 418},
+    {from: 296, to: 435},
+    {from: 296, to: 450},
+    {from: 296, to: 493},
+    {from: 296, to: 494},
+    {from: 296, to: 519},
+    {from: 296, to: 525},
+    {from: 296, to: 526},
+    {from: 296, to: 582},
+    {from: 296, to: 585},
+    {from: 296, to: 605},
+    {from: 296, to: 619},
+    {from: 296, to: 631},
+    {from: 296, to: 655},
+    {from: 296, to: 716},
+    {from: 296, to: 722},
+    {from: 297, to: 322},
+    {from: 297, to: 398},
+    {from: 297, to: 474},
+    {from: 297, to: 485},
+    {from: 297, to: 553},
+    {from: 297, to: 621},
+    {from: 297, to: 632},
+    {from: 297, to: 638},
+    {from: 297, to: 639},
+    {from: 297, to: 657},
+    {from: 297, to: 663},
+    {from: 297, to: 671},
+    {from: 297, to: 715},
+    {from: 297, to: 726},
+    {from: 298, to: 307},
+    {from: 298, to: 310},
+    {from: 298, to: 313},
+    {from: 298, to: 458},
+    {from: 298, to: 459},
+    {from: 298, to: 468},
+    {from: 298, to: 470},
+    {from: 298, to: 471},
+    {from: 298, to: 477},
+    {from: 298, to: 479},
+    {from: 298, to: 515},
+    {from: 298, to: 518},
+    {from: 298, to: 541},
+    {from: 298, to: 620},
+    {from: 298, to: 680},
+    {from: 298, to: 686},
+    {from: 299, to: 300},
+    {from: 299, to: 301},
+    {from: 299, to: 384},
+    {from: 299, to: 431},
+    {from: 299, to: 432},
+    {from: 299, to: 444},
+    {from: 299, to: 455},
+    {from: 299, to: 469},
+    {from: 299, to: 514},
+    {from: 299, to: 535},
+    {from: 299, to: 539},
+    {from: 299, to: 542},
+    {from: 299, to: 602},
+    {from: 299, to: 624},
+    {from: 299, to: 653},
+    {from: 299, to: 669},
+    {from: 299, to: 698},
+    {from: 299, to: 703},
+    {from: 300, to: 301},
+    {from: 300, to: 432},
+    {from: 300, to: 444},
+    {from: 300, to: 455},
+    {from: 300, to: 469},
+    {from: 300, to: 514},
+    {from: 300, to: 535},
+    {from: 300, to: 539},
+    {from: 300, to: 542},
+    {from: 300, to: 624},
+    {from: 300, to: 653},
+    {from: 300, to: 662},
+    {from: 300, to: 669},
+    {from: 300, to: 698},
+    {from: 301, to: 384},
+    {from: 301, to: 431},
+    {from: 301, to: 432},
+    {from: 301, to: 444},
+    {from: 301, to: 455},
+    {from: 301, to: 469},
+    {from: 301, to: 514},
+    {from: 301, to: 535},
+    {from: 301, to: 539},
+    {from: 301, to: 542},
+    {from: 301, to: 602},
+    {from: 301, to: 624},
+    {from: 301, to: 653},
+    {from: 301, to: 669},
+    {from: 301, to: 698},
+    {from: 301, to: 703},
+    {from: 302, to: 312},
+    {from: 302, to: 497},
+    {from: 302, to: 516},
+    {from: 302, to: 524},
+    {from: 302, to: 538},
+    {from: 302, to: 633},
+    {from: 302, to: 635},
+    {from: 302, to: 636},
+    {from: 302, to: 637},
+    {from: 302, to: 684},
+    {from: 302, to: 688},
+    {from: 302, to: 697},
+    {from: 302, to: 714},
+    {from: 302, to: 736},
+    {from: 303, to: 308},
+    {from: 303, to: 335},
+    {from: 303, to: 348},
+    {from: 303, to: 409},
+    {from: 303, to: 415},
+    {from: 303, to: 433},
+    {from: 303, to: 434},
+    {from: 303, to: 498},
+    {from: 303, to: 543},
+    {from: 303, to: 573},
+    {from: 303, to: 575},
+    {from: 303, to: 576},
+    {from: 303, to: 583},
+    {from: 303, to: 603},
+    {from: 303, to: 616},
+    {from: 303, to: 629},
+    {from: 303, to: 668},
+    {from: 303, to: 679},
+    {from: 303, to: 713},
+    {from: 304, to: 309},
+    {from: 304, to: 352},
+    {from: 304, to: 366},
+    {from: 304, to: 369},
+    {from: 304, to: 370},
+    {from: 304, to: 457},
+    {from: 304, to: 526},
+    {from: 304, to: 554},
+    {from: 304, to: 630},
+    {from: 304, to: 652},
+    {from: 304, to: 667},
+    {from: 304, to: 672},
+    {from: 304, to: 701},
+    {from: 305, to: 324},
+    {from: 305, to: 334},
+    {from: 305, to: 353},
+    {from: 305, to: 368},
+    {from: 305, to: 429},
+    {from: 305, to: 489},
+    {from: 305, to: 499},
+    {from: 305, to: 548},
+    {from: 305, to: 552},
+    {from: 305, to: 595},
+    {from: 305, to: 710},
+    {from: 306, to: 315},
+    {from: 306, to: 380},
+    {from: 306, to: 389},
+    {from: 306, to: 467},
+    {from: 306, to: 495},
+    {from: 306, to: 570},
+    {from: 306, to: 584},
+    {from: 306, to: 598},
+    {from: 306, to: 599},
+    {from: 306, to: 666},
+    {from: 307, to: 310},
+    {from: 307, to: 313},
+    {from: 307, to: 458},
+    {from: 307, to: 459},
+    {from: 307, to: 468},
+    {from: 307, to: 470},
+    {from: 307, to: 471},
+    {from: 307, to: 477},
+    {from: 307, to: 479},
+    {from: 307, to: 515},
+    {from: 307, to: 518},
+    {from: 307, to: 541},
+    {from: 307, to: 620},
+    {from: 307, to: 680},
+    {from: 307, to: 686},
+    {from: 308, to: 335},
+    {from: 308, to: 348},
+    {from: 308, to: 415},
+    {from: 308, to: 434},
+    {from: 308, to: 462},
+    {from: 308, to: 555},
+    {from: 308, to: 575},
+    {from: 308, to: 576},
+    {from: 308, to: 583},
+    {from: 308, to: 603},
+    {from: 308, to: 616},
+    {from: 308, to: 642},
+    {from: 308, to: 668},
+    {from: 308, to: 707},
+    {from: 308, to: 713},
+    {from: 308, to: 726},
+    {from: 309, to: 332},
+    {from: 309, to: 366},
+    {from: 309, to: 369},
+    {from: 309, to: 370},
+    {from: 309, to: 457},
+    {from: 309, to: 554},
+    {from: 309, to: 630},
+    {from: 309, to: 645},
+    {from: 309, to: 672},
+    {from: 309, to: 701},
+    {from: 310, to: 313},
+    {from: 310, to: 458},
+    {from: 310, to: 459},
+    {from: 310, to: 468},
+    {from: 310, to: 470},
+    {from: 310, to: 471},
+    {from: 310, to: 477},
+    {from: 310, to: 479},
+    {from: 310, to: 515},
+    {from: 310, to: 518},
+    {from: 310, to: 541},
+    {from: 310, to: 620},
+    {from: 310, to: 680},
+    {from: 310, to: 686},
+    {from: 311, to: 384},
+    {from: 311, to: 386},
+    {from: 311, to: 408},
+    {from: 311, to: 460},
+    {from: 311, to: 522},
+    {from: 311, to: 525},
+    {from: 311, to: 527},
+    {from: 311, to: 532},
+    {from: 311, to: 567},
+    {from: 311, to: 612},
+    {from: 311, to: 625},
+    {from: 311, to: 654},
+    {from: 311, to: 667},
+    {from: 311, to: 677},
+    {from: 311, to: 679},
+    {from: 311, to: 685},
+    {from: 311, to: 707},
+    {from: 312, to: 497},
+    {from: 312, to: 516},
+    {from: 312, to: 524},
+    {from: 312, to: 538},
+    {from: 312, to: 633},
+    {from: 312, to: 635},
+    {from: 312, to: 636},
+    {from: 312, to: 637},
+    {from: 312, to: 684},
+    {from: 312, to: 688},
+    {from: 312, to: 697},
+    {from: 312, to: 736},
+    {from: 313, to: 458},
+    {from: 313, to: 459},
+    {from: 313, to: 468},
+    {from: 313, to: 470},
+    {from: 313, to: 471},
+    {from: 313, to: 477},
+    {from: 313, to: 479},
+    {from: 313, to: 515},
+    {from: 313, to: 518},
+    {from: 313, to: 541},
+    {from: 313, to: 620},
+    {from: 313, to: 680},
+    {from: 313, to: 686},
+    {from: 314, to: 325},
+    {from: 314, to: 338},
+    {from: 314, to: 345},
+    {from: 314, to: 350},
+    {from: 314, to: 396},
+    {from: 314, to: 417},
+    {from: 314, to: 496},
+    {from: 314, to: 507},
+    {from: 314, to: 534},
+    {from: 314, to: 566},
+    {from: 314, to: 606},
+    {from: 314, to: 613},
+    {from: 314, to: 659},
+    {from: 314, to: 673},
+    {from: 314, to: 682},
+    {from: 314, to: 714},
+    {from: 315, to: 380},
+    {from: 315, to: 389},
+    {from: 315, to: 467},
+    {from: 315, to: 495},
+    {from: 315, to: 570},
+    {from: 315, to: 584},
+    {from: 315, to: 598},
+    {from: 315, to: 599},
+    {from: 315, to: 666},
+    {from: 316, to: 327},
+    {from: 316, to: 349},
+    {from: 316, to: 371},
+    {from: 316, to: 373},
+    {from: 316, to: 375},
+    {from: 316, to: 397},
+    {from: 316, to: 442},
+    {from: 316, to: 454},
+    {from: 316, to: 455},
+    {from: 316, to: 569},
+    {from: 316, to: 572},
+    {from: 316, to: 577},
+    {from: 316, to: 591},
+    {from: 316, to: 629},
+    {from: 316, to: 643},
+    {from: 316, to: 644},
+    {from: 316, to: 678},
+    {from: 316, to: 687},
+    {from: 316, to: 719},
+    {from: 316, to: 720},
+    {from: 316, to: 721},
+    {from: 317, to: 318},
+    {from: 317, to: 355},
+    {from: 317, to: 357},
+    {from: 317, to: 446},
+    {from: 317, to: 509},
+    {from: 317, to: 510},
+    {from: 317, to: 546},
+    {from: 317, to: 564},
+    {from: 317, to: 581},
+    {from: 317, to: 592},
+    {from: 318, to: 355},
+    {from: 318, to: 357},
+    {from: 318, to: 371},
+    {from: 318, to: 446},
+    {from: 318, to: 460},
+    {from: 318, to: 509},
+    {from: 318, to: 510},
+    {from: 318, to: 528},
+    {from: 318, to: 546},
+    {from: 318, to: 562},
+    {from: 318, to: 564},
+    {from: 318, to: 576},
+    {from: 318, to: 581},
+    {from: 318, to: 592},
+    {from: 318, to: 606},
+    {from: 318, to: 646},
+    {from: 318, to: 713},
+    {from: 319, to: 349},
+    {from: 319, to: 358},
+    {from: 319, to: 368},
+    {from: 319, to: 419},
+    {from: 319, to: 424},
+    {from: 319, to: 429},
+    {from: 319, to: 450},
+    {from: 319, to: 451},
+    {from: 319, to: 462},
+    {from: 319, to: 487},
+    {from: 319, to: 489},
+    {from: 319, to: 529},
+    {from: 319, to: 555},
+    {from: 319, to: 569},
+    {from: 319, to: 600},
+    {from: 319, to: 608},
+    {from: 319, to: 642},
+    {from: 319, to: 643},
+    {from: 319, to: 645},
+    {from: 319, to: 720},
+    {from: 320, to: 344},
+    {from: 320, to: 354},
+    {from: 320, to: 361},
+    {from: 320, to: 362},
+    {from: 320, to: 367},
+    {from: 320, to: 445},
+    {from: 320, to: 483},
+    {from: 320, to: 484},
+    {from: 320, to: 512},
+    {from: 320, to: 609},
+    {from: 321, to: 337},
+    {from: 321, to: 340},
+    {from: 321, to: 407},
+    {from: 321, to: 420},
+    {from: 321, to: 488},
+    {from: 321, to: 533},
+    {from: 321, to: 579},
+    {from: 321, to: 626},
+    {from: 321, to: 627},
+    {from: 321, to: 662},
+    {from: 321, to: 705},
+    {from: 322, to: 398},
+    {from: 322, to: 474},
+    {from: 322, to: 485},
+    {from: 322, to: 553},
+    {from: 322, to: 621},
+    {from: 322, to: 632},
+    {from: 322, to: 638},
+    {from: 322, to: 639},
+    {from: 322, to: 657},
+    {from: 322, to: 671},
+    {from: 322, to: 715},
+    {from: 322, to: 726},
+    {from: 323, to: 331},
+    {from: 323, to: 376},
+    {from: 323, to: 431},
+    {from: 323, to: 436},
+    {from: 323, to: 443},
+    {from: 323, to: 490},
+    {from: 323, to: 529},
+    {from: 323, to: 547},
+    {from: 323, to: 567},
+    {from: 323, to: 586},
+    {from: 323, to: 676},
+    {from: 323, to: 699},
+    {from: 323, to: 717},
+    {from: 324, to: 334},
+    {from: 324, to: 353},
+    {from: 324, to: 368},
+    {from: 324, to: 429},
+    {from: 324, to: 489},
+    {from: 324, to: 499},
+    {from: 324, to: 548},
+    {from: 324, to: 552},
+    {from: 324, to: 595},
+    {from: 324, to: 710},
+    {from: 325, to: 338},
+    {from: 325, to: 345},
+    {from: 325, to: 350},
+    {from: 325, to: 396},
+    {from: 325, to: 417},
+    {from: 325, to: 496},
+    {from: 325, to: 507},
+    {from: 325, to: 511},
+    {from: 325, to: 534},
+    {from: 325, to: 539},
+    {from: 325, to: 566},
+    {from: 325, to: 606},
+    {from: 325, to: 613},
+    {from: 325, to: 659},
+    {from: 325, to: 673},
+    {from: 325, to: 682},
+    {from: 325, to: 714},
+    {from: 326, to: 341},
+    {from: 326, to: 365},
+    {from: 326, to: 375},
+    {from: 326, to: 406},
+    {from: 326, to: 476},
+    {from: 326, to: 502},
+    {from: 326, to: 513},
+    {from: 326, to: 530},
+    {from: 326, to: 544},
+    {from: 326, to: 681},
+    {from: 326, to: 683},
+    {from: 327, to: 374},
+    {from: 327, to: 375},
+    {from: 327, to: 385},
+    {from: 327, to: 433},
+    {from: 327, to: 442},
+    {from: 327, to: 454},
+    {from: 327, to: 455},
+    {from: 327, to: 475},
+    {from: 327, to: 480},
+    {from: 327, to: 498},
+    {from: 327, to: 517},
+    {from: 327, to: 573},
+    {from: 327, to: 577},
+    {from: 327, to: 611},
+    {from: 327, to: 614},
+    {from: 327, to: 623},
+    {from: 327, to: 648},
+    {from: 327, to: 678},
+    {from: 327, to: 687},
+    {from: 327, to: 721},
+    {from: 328, to: 329},
+    {from: 328, to: 351},
+    {from: 328, to: 367},
+    {from: 328, to: 372},
+    {from: 328, to: 426},
+    {from: 328, to: 427},
+    {from: 328, to: 456},
+    {from: 328, to: 464},
+    {from: 328, to: 492},
+    {from: 328, to: 536},
+    {from: 328, to: 549},
+    {from: 328, to: 551},
+    {from: 328, to: 609},
+    {from: 328, to: 615},
+    {from: 328, to: 700},
+    {from: 328, to: 718},
+    {from: 329, to: 343},
+    {from: 329, to: 351},
+    {from: 329, to: 367},
+    {from: 329, to: 372},
+    {from: 329, to: 426},
+    {from: 329, to: 427},
+    {from: 329, to: 456},
+    {from: 329, to: 464},
+    {from: 329, to: 492},
+    {from: 329, to: 536},
+    {from: 329, to: 549},
+    {from: 329, to: 551},
+    {from: 329, to: 563},
+    {from: 329, to: 609},
+    {from: 329, to: 615},
+    {from: 329, to: 700},
+    {from: 329, to: 718},
+    {from: 330, to: 377},
+    {from: 330, to: 390},
+    {from: 330, to: 391},
+    {from: 330, to: 392},
+    {from: 330, to: 393},
+    {from: 330, to: 394},
+    {from: 330, to: 395},
+    {from: 330, to: 399},
+    {from: 330, to: 405},
+    {from: 330, to: 411},
+    {from: 330, to: 412},
+    {from: 330, to: 413},
+    {from: 330, to: 414},
+    {from: 330, to: 559},
+    {from: 330, to: 560},
+    {from: 330, to: 561},
+    {from: 330, to: 566},
+    {from: 330, to: 658},
+    {from: 330, to: 731},
+    {from: 331, to: 376},
+    {from: 331, to: 431},
+    {from: 331, to: 436},
+    {from: 331, to: 443},
+    {from: 331, to: 490},
+    {from: 331, to: 529},
+    {from: 331, to: 547},
+    {from: 331, to: 567},
+    {from: 331, to: 586},
+    {from: 331, to: 676},
+    {from: 331, to: 699},
+    {from: 331, to: 717},
+    {from: 332, to: 333},
+    {from: 332, to: 428},
+    {from: 332, to: 511},
+    {from: 332, to: 528},
+    {from: 332, to: 571},
+    {from: 332, to: 580},
+    {from: 332, to: 593},
+    {from: 332, to: 601},
+    {from: 332, to: 618},
+    {from: 332, to: 619},
+    {from: 332, to: 645},
+    {from: 332, to: 652},
+    {from: 332, to: 703},
+    {from: 332, to: 716},
+    {from: 333, to: 428},
+    {from: 333, to: 511},
+    {from: 333, to: 528},
+    {from: 333, to: 571},
+    {from: 333, to: 578},
+    {from: 333, to: 580},
+    {from: 333, to: 593},
+    {from: 333, to: 601},
+    {from: 333, to: 618},
+    {from: 333, to: 619},
+    {from: 333, to: 652},
+    {from: 333, to: 655},
+    {from: 333, to: 703},
+    {from: 333, to: 716},
+    {from: 334, to: 353},
+    {from: 334, to: 355},
+    {from: 334, to: 368},
+    {from: 334, to: 429},
+    {from: 334, to: 446},
+    {from: 334, to: 489},
+    {from: 334, to: 499},
+    {from: 334, to: 548},
+    {from: 334, to: 552},
+    {from: 334, to: 595},
+    {from: 334, to: 710},
+    {from: 335, to: 348},
+    {from: 335, to: 415},
+    {from: 335, to: 434},
+    {from: 335, to: 462},
+    {from: 335, to: 555},
+    {from: 335, to: 575},
+    {from: 335, to: 576},
+    {from: 335, to: 583},
+    {from: 335, to: 603},
+    {from: 335, to: 616},
+    {from: 335, to: 642},
+    {from: 335, to: 668},
+    {from: 335, to: 707},
+    {from: 335, to: 713},
+    {from: 335, to: 726},
+    {from: 336, to: 343},
+    {from: 336, to: 356},
+    {from: 336, to: 360},
+    {from: 336, to: 378},
+    {from: 336, to: 388},
+    {from: 336, to: 401},
+    {from: 336, to: 448},
+    {from: 336, to: 501},
+    {from: 336, to: 506},
+    {from: 336, to: 550},
+    {from: 336, to: 563},
+    {from: 336, to: 588},
+    {from: 336, to: 617},
+    {from: 336, to: 712},
+    {from: 336, to: 727},
+    {from: 337, to: 374},
+    {from: 337, to: 387},
+    {from: 337, to: 396},
+    {from: 337, to: 407},
+    {from: 337, to: 420},
+    {from: 337, to: 488},
+    {from: 337, to: 533},
+    {from: 337, to: 579},
+    {from: 337, to: 626},
+    {from: 337, to: 627},
+    {from: 337, to: 633},
+    {from: 337, to: 662},
+    {from: 337, to: 705},
+    {from: 338, to: 345},
+    {from: 338, to: 350},
+    {from: 338, to: 396},
+    {from: 338, to: 417},
+    {from: 338, to: 496},
+    {from: 338, to: 507},
+    {from: 338, to: 534},
+    {from: 338, to: 566},
+    {from: 338, to: 606},
+    {from: 338, to: 613},
+    {from: 338, to: 659},
+    {from: 338, to: 673},
+    {from: 338, to: 682},
+    {from: 338, to: 714},
+    {from: 339, to: 364},
+    {from: 339, to: 453},
+    {from: 339, to: 504},
+    {from: 339, to: 514},
+    {from: 339, to: 578},
+    {from: 339, to: 596},
+    {from: 339, to: 602},
+    {from: 339, to: 610},
+    {from: 339, to: 661},
+    {from: 339, to: 665},
+    {from: 339, to: 690},
+    {from: 339, to: 692},
+    {from: 339, to: 693},
+    {from: 339, to: 721},
+    {from: 339, to: 723},
+    {from: 340, to: 346},
+    {from: 340, to: 347},
+    {from: 340, to: 387},
+    {from: 340, to: 404},
+    {from: 340, to: 437},
+    {from: 340, to: 503},
+    {from: 340, to: 520},
+    {from: 340, to: 590},
+    {from: 340, to: 628},
+    {from: 340, to: 664},
+    {from: 340, to: 670},
+    {from: 340, to: 709},
+    {from: 341, to: 365},
+    {from: 341, to: 375},
+    {from: 341, to: 406},
+    {from: 341, to: 476},
+    {from: 341, to: 502},
+    {from: 341, to: 513},
+    {from: 341, to: 530},
+    {from: 341, to: 544},
+    {from: 341, to: 681},
+    {from: 341, to: 683},
+    {from: 342, to: 363},
+    {from: 342, to: 379},
+    {from: 342, to: 383},
+    {from: 342, to: 403},
+    {from: 342, to: 500},
+    {from: 342, to: 505},
+    {from: 342, to: 537},
+    {from: 342, to: 547},
+    {from: 342, to: 574},
+    {from: 342, to: 586},
+    {from: 342, to: 587},
+    {from: 342, to: 597},
+    {from: 342, to: 627},
+    {from: 342, to: 649},
+    {from: 342, to: 691},
+    {from: 342, to: 702},
+    {from: 342, to: 706},
+    {from: 342, to: 717},
+    {from: 343, to: 360},
+    {from: 343, to: 378},
+    {from: 343, to: 388},
+    {from: 343, to: 448},
+    {from: 343, to: 501},
+    {from: 343, to: 506},
+    {from: 343, to: 550},
+    {from: 343, to: 563},
+    {from: 343, to: 588},
+    {from: 343, to: 617},
+    {from: 343, to: 712},
+    {from: 343, to: 727},
+    {from: 344, to: 354},
+    {from: 344, to: 361},
+    {from: 344, to: 362},
+    {from: 344, to: 445},
+    {from: 344, to: 483},
+    {from: 344, to: 484},
+    {from: 344, to: 512},
+    {from: 345, to: 350},
+    {from: 345, to: 396},
+    {from: 345, to: 417},
+    {from: 345, to: 496},
+    {from: 345, to: 507},
+    {from: 345, to: 534},
+    {from: 345, to: 566},
+    {from: 345, to: 606},
+    {from: 345, to: 613},
+    {from: 345, to: 659},
+    {from: 345, to: 673},
+    {from: 345, to: 682},
+    {from: 345, to: 714},
+    {from: 345, to: 715},
+    {from: 346, to: 347},
+    {from: 346, to: 387},
+    {from: 346, to: 404},
+    {from: 346, to: 437},
+    {from: 346, to: 503},
+    {from: 346, to: 520},
+    {from: 346, to: 590},
+    {from: 346, to: 628},
+    {from: 346, to: 664},
+    {from: 346, to: 670},
+    {from: 346, to: 709},
+    {from: 347, to: 387},
+    {from: 347, to: 404},
+    {from: 347, to: 437},
+    {from: 347, to: 503},
+    {from: 347, to: 520},
+    {from: 347, to: 590},
+    {from: 347, to: 628},
+    {from: 347, to: 664},
+    {from: 347, to: 670},
+    {from: 347, to: 709},
+    {from: 348, to: 398},
+    {from: 348, to: 415},
+    {from: 348, to: 430},
+    {from: 348, to: 434},
+    {from: 348, to: 440},
+    {from: 348, to: 575},
+    {from: 348, to: 576},
+    {from: 348, to: 583},
+    {from: 348, to: 603},
+    {from: 348, to: 616},
+    {from: 348, to: 654},
+    {from: 348, to: 668},
+    {from: 348, to: 702},
+    {from: 348, to: 713},
+    {from: 349, to: 368},
+    {from: 349, to: 371},
+    {from: 349, to: 373},
+    {from: 349, to: 397},
+    {from: 349, to: 419},
+    {from: 349, to: 429},
+    {from: 349, to: 489},
+    {from: 349, to: 529},
+    {from: 349, to: 569},
+    {from: 349, to: 572},
+    {from: 349, to: 591},
+    {from: 349, to: 629},
+    {from: 349, to: 643},
+    {from: 349, to: 644},
+    {from: 349, to: 719},
+    {from: 349, to: 720},
+    {from: 350, to: 396},
+    {from: 350, to: 417},
+    {from: 350, to: 496},
+    {from: 350, to: 507},
+    {from: 350, to: 534},
+    {from: 350, to: 566},
+    {from: 350, to: 606},
+    {from: 350, to: 613},
+    {from: 350, to: 659},
+    {from: 350, to: 673},
+    {from: 350, to: 682},
+    {from: 350, to: 714},
+    {from: 351, to: 367},
+    {from: 351, to: 372},
+    {from: 351, to: 426},
+    {from: 351, to: 427},
+    {from: 351, to: 456},
+    {from: 351, to: 464},
+    {from: 351, to: 492},
+    {from: 351, to: 536},
+    {from: 351, to: 549},
+    {from: 351, to: 551},
+    {from: 351, to: 609},
+    {from: 351, to: 615},
+    {from: 351, to: 700},
+    {from: 351, to: 718},
+    {from: 352, to: 359},
+    {from: 352, to: 369},
+    {from: 352, to: 430},
+    {from: 352, to: 461},
+    {from: 352, to: 463},
+    {from: 352, to: 486},
+    {from: 352, to: 526},
+    {from: 352, to: 531},
+    {from: 352, to: 607},
+    {from: 352, to: 634},
+    {from: 352, to: 652},
+    {from: 352, to: 667},
+    {from: 352, to: 711},
+    {from: 353, to: 368},
+    {from: 353, to: 429},
+    {from: 353, to: 489},
+    {from: 353, to: 499},
+    {from: 353, to: 548},
+    {from: 353, to: 552},
+    {from: 353, to: 595},
+    {from: 353, to: 710},
+    {from: 354, to: 361},
+    {from: 354, to: 362},
+    {from: 354, to: 445},
+    {from: 354, to: 483},
+    {from: 354, to: 484},
+    {from: 354, to: 512},
+    {from: 355, to: 357},
+    {from: 355, to: 446},
+    {from: 355, to: 509},
+    {from: 355, to: 510},
+    {from: 355, to: 546},
+    {from: 355, to: 564},
+    {from: 355, to: 581},
+    {from: 355, to: 592},
+    {from: 356, to: 400},
+    {from: 356, to: 401},
+    {from: 356, to: 402},
+    {from: 356, to: 410},
+    {from: 356, to: 423},
+    {from: 356, to: 545},
+    {from: 356, to: 556},
+    {from: 356, to: 557},
+    {from: 356, to: 558},
+    {from: 356, to: 656},
+    {from: 356, to: 660},
+    {from: 356, to: 674},
+    {from: 356, to: 694},
+    {from: 356, to: 696},
+    {from: 357, to: 446},
+    {from: 357, to: 509},
+    {from: 357, to: 510},
+    {from: 357, to: 546},
+    {from: 357, to: 564},
+    {from: 357, to: 581},
+    {from: 357, to: 592},
+    {from: 358, to: 419},
+    {from: 358, to: 424},
+    {from: 358, to: 450},
+    {from: 358, to: 451},
+    {from: 358, to: 462},
+    {from: 358, to: 487},
+    {from: 358, to: 555},
+    {from: 358, to: 600},
+    {from: 358, to: 608},
+    {from: 358, to: 642},
+    {from: 358, to: 645},
+    {from: 359, to: 373},
+    {from: 359, to: 397},
+    {from: 359, to: 430},
+    {from: 359, to: 461},
+    {from: 359, to: 463},
+    {from: 359, to: 486},
+    {from: 359, to: 531},
+    {from: 359, to: 607},
+    {from: 359, to: 634},
+    {from: 359, to: 677},
+    {from: 359, to: 685},
+    {from: 359, to: 711},
+    {from: 360, to: 378},
+    {from: 360, to: 388},
+    {from: 360, to: 448},
+    {from: 360, to: 501},
+    {from: 360, to: 506},
+    {from: 360, to: 550},
+    {from: 360, to: 563},
+    {from: 360, to: 588},
+    {from: 360, to: 617},
+    {from: 360, to: 712},
+    {from: 360, to: 727},
+    {from: 361, to: 362},
+    {from: 361, to: 445},
+    {from: 361, to: 483},
+    {from: 361, to: 484},
+    {from: 361, to: 512},
+    {from: 362, to: 445},
+    {from: 362, to: 483},
+    {from: 362, to: 484},
+    {from: 362, to: 512},
+    {from: 363, to: 379},
+    {from: 363, to: 383},
+    {from: 363, to: 403},
+    {from: 363, to: 417},
+    {from: 363, to: 500},
+    {from: 363, to: 505},
+    {from: 363, to: 537},
+    {from: 363, to: 574},
+    {from: 363, to: 587},
+    {from: 363, to: 597},
+    {from: 363, to: 649},
+    {from: 363, to: 691},
+    {from: 363, to: 702},
+    {from: 363, to: 706},
+    {from: 364, to: 438},
+    {from: 364, to: 453},
+    {from: 364, to: 504},
+    {from: 364, to: 578},
+    {from: 364, to: 596},
+    {from: 364, to: 602},
+    {from: 364, to: 610},
+    {from: 364, to: 661},
+    {from: 364, to: 665},
+    {from: 364, to: 683},
+    {from: 364, to: 690},
+    {from: 364, to: 692},
+    {from: 364, to: 693},
+    {from: 364, to: 721},
+    {from: 364, to: 723},
+    {from: 365, to: 375},
+    {from: 365, to: 390},
+    {from: 365, to: 406},
+    {from: 365, to: 476},
+    {from: 365, to: 502},
+    {from: 365, to: 513},
+    {from: 365, to: 530},
+    {from: 365, to: 544},
+    {from: 365, to: 681},
+    {from: 365, to: 683},
+    {from: 366, to: 369},
+    {from: 366, to: 370},
+    {from: 366, to: 422},
+    {from: 366, to: 457},
+    {from: 366, to: 554},
+    {from: 366, to: 572},
+    {from: 366, to: 591},
+    {from: 366, to: 630},
+    {from: 366, to: 672},
+    {from: 366, to: 693},
+    {from: 366, to: 701},
+    {from: 367, to: 372},
+    {from: 367, to: 426},
+    {from: 367, to: 427},
+    {from: 367, to: 456},
+    {from: 367, to: 464},
+    {from: 367, to: 492},
+    {from: 367, to: 536},
+    {from: 367, to: 549},
+    {from: 367, to: 551},
+    {from: 367, to: 609},
+    {from: 367, to: 615},
+    {from: 367, to: 700},
+    {from: 367, to: 718},
+    {from: 368, to: 419},
+    {from: 368, to: 429},
+    {from: 368, to: 489},
+    {from: 368, to: 499},
+    {from: 368, to: 529},
+    {from: 368, to: 548},
+    {from: 368, to: 552},
+    {from: 368, to: 569},
+    {from: 368, to: 595},
+    {from: 368, to: 643},
+    {from: 368, to: 710},
+    {from: 368, to: 720},
+    {from: 369, to: 370},
+    {from: 369, to: 457},
+    {from: 369, to: 526},
+    {from: 369, to: 554},
+    {from: 369, to: 630},
+    {from: 369, to: 652},
+    {from: 369, to: 667},
+    {from: 369, to: 672},
+    {from: 369, to: 701},
+    {from: 370, to: 457},
+    {from: 370, to: 554},
+    {from: 370, to: 630},
+    {from: 370, to: 672},
+    {from: 370, to: 701},
+    {from: 371, to: 373},
+    {from: 371, to: 397},
+    {from: 371, to: 460},
+    {from: 371, to: 528},
+    {from: 371, to: 562},
+    {from: 371, to: 569},
+    {from: 371, to: 572},
+    {from: 371, to: 576},
+    {from: 371, to: 591},
+    {from: 371, to: 606},
+    {from: 371, to: 629},
+    {from: 371, to: 643},
+    {from: 371, to: 644},
+    {from: 371, to: 646},
+    {from: 371, to: 713},
+    {from: 371, to: 719},
+    {from: 371, to: 720},
+    {from: 372, to: 426},
+    {from: 372, to: 427},
+    {from: 372, to: 456},
+    {from: 372, to: 464},
+    {from: 372, to: 492},
+    {from: 372, to: 536},
+    {from: 372, to: 549},
+    {from: 372, to: 551},
+    {from: 372, to: 609},
+    {from: 372, to: 615},
+    {from: 372, to: 700},
+    {from: 372, to: 718},
+    {from: 373, to: 397},
+    {from: 373, to: 569},
+    {from: 373, to: 572},
+    {from: 373, to: 591},
+    {from: 373, to: 629},
+    {from: 373, to: 643},
+    {from: 373, to: 644},
+    {from: 373, to: 677},
+    {from: 373, to: 685},
+    {from: 373, to: 719},
+    {from: 373, to: 720},
+    {from: 374, to: 385},
+    {from: 374, to: 387},
+    {from: 374, to: 396},
+    {from: 374, to: 433},
+    {from: 374, to: 442},
+    {from: 374, to: 454},
+    {from: 374, to: 475},
+    {from: 374, to: 480},
+    {from: 374, to: 498},
+    {from: 374, to: 517},
+    {from: 374, to: 573},
+    {from: 374, to: 577},
+    {from: 374, to: 611},
+    {from: 374, to: 614},
+    {from: 374, to: 623},
+    {from: 374, to: 633},
+    {from: 374, to: 648},
+    {from: 374, to: 678},
+    {from: 374, to: 687},
+    {from: 375, to: 406},
+    {from: 375, to: 442},
+    {from: 375, to: 454},
+    {from: 375, to: 455},
+    {from: 375, to: 476},
+    {from: 375, to: 502},
+    {from: 375, to: 513},
+    {from: 375, to: 530},
+    {from: 375, to: 544},
+    {from: 375, to: 577},
+    {from: 375, to: 678},
+    {from: 375, to: 681},
+    {from: 375, to: 683},
+    {from: 375, to: 687},
+    {from: 375, to: 721},
+    {from: 376, to: 431},
+    {from: 376, to: 436},
+    {from: 376, to: 443},
+    {from: 376, to: 490},
+    {from: 376, to: 502},
+    {from: 376, to: 529},
+    {from: 376, to: 547},
+    {from: 376, to: 567},
+    {from: 376, to: 586},
+    {from: 376, to: 676},
+    {from: 376, to: 699},
+    {from: 376, to: 717},
+    {from: 377, to: 390},
+    {from: 377, to: 391},
+    {from: 377, to: 392},
+    {from: 377, to: 393},
+    {from: 377, to: 394},
+    {from: 377, to: 395},
+    {from: 377, to: 399},
+    {from: 377, to: 405},
+    {from: 377, to: 411},
+    {from: 377, to: 412},
+    {from: 377, to: 413},
+    {from: 377, to: 414},
+    {from: 377, to: 559},
+    {from: 377, to: 560},
+    {from: 377, to: 561},
+    {from: 377, to: 658},
+    {from: 377, to: 731},
+    {from: 378, to: 388},
+    {from: 378, to: 399},
+    {from: 378, to: 448},
+    {from: 378, to: 488},
+    {from: 378, to: 501},
+    {from: 378, to: 506},
+    {from: 378, to: 550},
+    {from: 378, to: 561},
+    {from: 378, to: 563},
+    {from: 378, to: 588},
+    {from: 378, to: 617},
+    {from: 378, to: 647},
+    {from: 378, to: 712},
+    {from: 378, to: 727},
+    {from: 379, to: 383},
+    {from: 379, to: 403},
+    {from: 379, to: 500},
+    {from: 379, to: 505},
+    {from: 379, to: 537},
+    {from: 379, to: 574},
+    {from: 379, to: 587},
+    {from: 379, to: 597},
+    {from: 379, to: 649},
+    {from: 379, to: 691},
+    {from: 379, to: 702},
+    {from: 379, to: 706},
+    {from: 380, to: 389},
+    {from: 380, to: 467},
+    {from: 380, to: 495},
+    {from: 380, to: 570},
+    {from: 380, to: 584},
+    {from: 380, to: 598},
+    {from: 380, to: 599},
+    {from: 380, to: 666},
+    {from: 381, to: 409},
+    {from: 381, to: 421},
+    {from: 381, to: 425},
+    {from: 381, to: 432},
+    {from: 381, to: 440},
+    {from: 381, to: 443},
+    {from: 381, to: 472},
+    {from: 381, to: 473},
+    {from: 381, to: 508},
+    {from: 381, to: 521},
+    {from: 381, to: 523},
+    {from: 381, to: 543},
+    {from: 381, to: 562},
+    {from: 381, to: 565},
+    {from: 381, to: 571},
+    {from: 381, to: 589},
+    {from: 381, to: 594},
+    {from: 381, to: 604},
+    {from: 381, to: 623},
+    {from: 381, to: 644},
+    {from: 381, to: 663},
+    {from: 381, to: 719},
+    {from: 381, to: 728},
+    {from: 382, to: 438},
+    {from: 382, to: 441},
+    {from: 382, to: 452},
+    {from: 382, to: 465},
+    {from: 382, to: 466},
+    {from: 382, to: 481},
+    {from: 382, to: 491},
+    {from: 382, to: 503},
+    {from: 382, to: 534},
+    {from: 382, to: 646},
+    {from: 382, to: 647},
+    {from: 382, to: 650},
+    {from: 382, to: 651},
+    {from: 382, to: 670},
+    {from: 382, to: 689},
+    {from: 382, to: 724},
+    {from: 382, to: 725},
+    {from: 382, to: 729},
+    {from: 382, to: 730},
+    {from: 382, to: 734},
+    {from: 382, to: 735},
+    {from: 383, to: 403},
+    {from: 383, to: 500},
+    {from: 383, to: 505},
+    {from: 383, to: 537},
+    {from: 383, to: 574},
+    {from: 383, to: 587},
+    {from: 383, to: 597},
+    {from: 383, to: 649},
+    {from: 383, to: 691},
+    {from: 383, to: 702},
+    {from: 383, to: 706},
+    {from: 384, to: 386},
+    {from: 384, to: 408},
+    {from: 384, to: 431},
+    {from: 384, to: 460},
+    {from: 384, to: 522},
+    {from: 384, to: 527},
+    {from: 384, to: 532},
+    {from: 384, to: 602},
+    {from: 384, to: 612},
+    {from: 384, to: 625},
+    {from: 384, to: 654},
+    {from: 384, to: 667},
+    {from: 384, to: 677},
+    {from: 384, to: 679},
+    {from: 384, to: 685},
+    {from: 384, to: 703},
+    {from: 384, to: 707},
+    {from: 385, to: 433},
+    {from: 385, to: 442},
+    {from: 385, to: 454},
+    {from: 385, to: 475},
+    {from: 385, to: 480},
+    {from: 385, to: 498},
+    {from: 385, to: 517},
+    {from: 385, to: 518},
+    {from: 385, to: 573},
+    {from: 385, to: 577},
+    {from: 385, to: 611},
+    {from: 385, to: 614},
+    {from: 385, to: 623},
+    {from: 385, to: 648},
+    {from: 385, to: 656},
+    {from: 385, to: 678},
+    {from: 385, to: 687},
+    {from: 386, to: 408},
+    {from: 386, to: 415},
+    {from: 386, to: 460},
+    {from: 386, to: 522},
+    {from: 386, to: 527},
+    {from: 386, to: 532},
+    {from: 386, to: 575},
+    {from: 386, to: 612},
+    {from: 386, to: 616},
+    {from: 386, to: 625},
+    {from: 386, to: 654},
+    {from: 386, to: 667},
+    {from: 386, to: 677},
+    {from: 386, to: 679},
+    {from: 386, to: 681},
+    {from: 386, to: 685},
+    {from: 386, to: 707},
+    {from: 387, to: 396},
+    {from: 387, to: 404},
+    {from: 387, to: 437},
+    {from: 387, to: 503},
+    {from: 387, to: 520},
+    {from: 387, to: 590},
+    {from: 387, to: 628},
+    {from: 387, to: 633},
+    {from: 387, to: 664},
+    {from: 387, to: 670},
+    {from: 387, to: 709},
+    {from: 388, to: 423},
+    {from: 388, to: 448},
+    {from: 388, to: 501},
+    {from: 388, to: 506},
+    {from: 388, to: 550},
+    {from: 388, to: 563},
+    {from: 388, to: 588},
+    {from: 388, to: 617},
+    {from: 388, to: 712},
+    {from: 388, to: 727},
+    {from: 389, to: 467},
+    {from: 389, to: 495},
+    {from: 389, to: 570},
+    {from: 389, to: 584},
+    {from: 389, to: 598},
+    {from: 389, to: 599},
+    {from: 389, to: 666},
+    {from: 390, to: 391},
+    {from: 390, to: 392},
+    {from: 390, to: 393},
+    {from: 390, to: 394},
+    {from: 390, to: 395},
+    {from: 390, to: 399},
+    {from: 390, to: 405},
+    {from: 390, to: 411},
+    {from: 390, to: 412},
+    {from: 390, to: 413},
+    {from: 390, to: 414},
+    {from: 390, to: 559},
+    {from: 390, to: 560},
+    {from: 390, to: 561},
+    {from: 390, to: 658},
+    {from: 390, to: 731},
+    {from: 391, to: 392},
+    {from: 391, to: 393},
+    {from: 391, to: 394},
+    {from: 391, to: 395},
+    {from: 391, to: 399},
+    {from: 391, to: 405},
+    {from: 391, to: 411},
+    {from: 391, to: 412},
+    {from: 391, to: 413},
+    {from: 391, to: 414},
+    {from: 391, to: 559},
+    {from: 391, to: 560},
+    {from: 391, to: 561},
+    {from: 391, to: 658},
+    {from: 391, to: 731},
+    {from: 392, to: 393},
+    {from: 392, to: 394},
+    {from: 392, to: 395},
+    {from: 392, to: 399},
+    {from: 392, to: 405},
+    {from: 392, to: 411},
+    {from: 392, to: 412},
+    {from: 392, to: 413},
+    {from: 392, to: 414},
+    {from: 392, to: 559},
+    {from: 392, to: 560},
+    {from: 392, to: 561},
+    {from: 392, to: 658},
+    {from: 392, to: 731},
+    {from: 393, to: 394},
+    {from: 393, to: 395},
+    {from: 393, to: 399},
+    {from: 393, to: 405},
+    {from: 393, to: 411},
+    {from: 393, to: 412},
+    {from: 393, to: 413},
+    {from: 393, to: 414},
+    {from: 393, to: 559},
+    {from: 393, to: 560},
+    {from: 393, to: 561},
+    {from: 393, to: 658},
+    {from: 393, to: 731},
+    {from: 394, to: 395},
+    {from: 394, to: 399},
+    {from: 394, to: 405},
+    {from: 394, to: 411},
+    {from: 394, to: 412},
+    {from: 394, to: 413},
+    {from: 394, to: 414},
+    {from: 394, to: 559},
+    {from: 394, to: 560},
+    {from: 394, to: 561},
+    {from: 394, to: 658},
+    {from: 394, to: 731},
+    {from: 395, to: 399},
+    {from: 395, to: 405},
+    {from: 395, to: 411},
+    {from: 395, to: 412},
+    {from: 395, to: 413},
+    {from: 395, to: 414},
+    {from: 395, to: 559},
+    {from: 395, to: 560},
+    {from: 395, to: 561},
+    {from: 395, to: 658},
+    {from: 395, to: 731},
+    {from: 396, to: 417},
+    {from: 396, to: 496},
+    {from: 396, to: 507},
+    {from: 396, to: 534},
+    {from: 396, to: 566},
+    {from: 396, to: 606},
+    {from: 396, to: 613},
+    {from: 396, to: 633},
+    {from: 396, to: 659},
+    {from: 396, to: 673},
+    {from: 396, to: 682},
+    {from: 396, to: 714},
+    {from: 397, to: 569},
+    {from: 397, to: 572},
+    {from: 397, to: 591},
+    {from: 397, to: 629},
+    {from: 397, to: 643},
+    {from: 397, to: 644},
+    {from: 397, to: 677},
+    {from: 397, to: 685},
+    {from: 397, to: 719},
+    {from: 397, to: 720},
+    {from: 398, to: 430},
+    {from: 398, to: 440},
+    {from: 398, to: 474},
+    {from: 398, to: 485},
+    {from: 398, to: 553},
+    {from: 398, to: 583},
+    {from: 398, to: 621},
+    {from: 398, to: 632},
+    {from: 398, to: 638},
+    {from: 398, to: 639},
+    {from: 398, to: 654},
+    {from: 398, to: 657},
+    {from: 398, to: 668},
+    {from: 398, to: 671},
+    {from: 398, to: 702},
+    {from: 398, to: 715},
+    {from: 398, to: 726},
+    {from: 399, to: 405},
+    {from: 399, to: 411},
+    {from: 399, to: 412},
+    {from: 399, to: 413},
+    {from: 399, to: 414},
+    {from: 399, to: 488},
+    {from: 399, to: 559},
+    {from: 399, to: 560},
+    {from: 399, to: 561},
+    {from: 399, to: 647},
+    {from: 399, to: 658},
+    {from: 399, to: 731},
+    {from: 400, to: 401},
+    {from: 400, to: 402},
+    {from: 400, to: 410},
+    {from: 400, to: 423},
+    {from: 400, to: 545},
+    {from: 400, to: 556},
+    {from: 400, to: 557},
+    {from: 400, to: 558},
+    {from: 400, to: 656},
+    {from: 400, to: 660},
+    {from: 400, to: 674},
+    {from: 400, to: 694},
+    {from: 400, to: 696},
+    {from: 401, to: 402},
+    {from: 401, to: 410},
+    {from: 401, to: 423},
+    {from: 401, to: 545},
+    {from: 401, to: 556},
+    {from: 401, to: 557},
+    {from: 401, to: 558},
+    {from: 401, to: 656},
+    {from: 401, to: 660},
+    {from: 401, to: 674},
+    {from: 401, to: 694},
+    {from: 401, to: 696},
+    {from: 402, to: 410},
+    {from: 402, to: 423},
+    {from: 402, to: 545},
+    {from: 402, to: 556},
+    {from: 402, to: 557},
+    {from: 402, to: 558},
+    {from: 402, to: 656},
+    {from: 402, to: 660},
+    {from: 402, to: 674},
+    {from: 402, to: 694},
+    {from: 402, to: 696},
+    {from: 403, to: 500},
+    {from: 403, to: 505},
+    {from: 403, to: 537},
+    {from: 403, to: 574},
+    {from: 403, to: 587},
+    {from: 403, to: 597},
+    {from: 403, to: 649},
+    {from: 403, to: 691},
+    {from: 403, to: 702},
+    {from: 403, to: 706},
+    {from: 404, to: 416},
+    {from: 404, to: 437},
+    {from: 404, to: 461},
+    {from: 404, to: 483},
+    {from: 404, to: 503},
+    {from: 404, to: 520},
+    {from: 404, to: 565},
+    {from: 404, to: 590},
+    {from: 404, to: 628},
+    {from: 404, to: 661},
+    {from: 404, to: 664},
+    {from: 404, to: 670},
+    {from: 404, to: 709},
+    {from: 405, to: 411},
+    {from: 405, to: 412},
+    {from: 405, to: 413},
+    {from: 405, to: 414},
+    {from: 405, to: 559},
+    {from: 405, to: 560},
+    {from: 405, to: 561},
+    {from: 405, to: 658},
+    {from: 405, to: 731},
+    {from: 406, to: 476},
+    {from: 406, to: 502},
+    {from: 406, to: 513},
+    {from: 406, to: 530},
+    {from: 406, to: 544},
+    {from: 406, to: 681},
+    {from: 406, to: 683},
+    {from: 407, to: 420},
+    {from: 407, to: 488},
+    {from: 407, to: 533},
+    {from: 407, to: 579},
+    {from: 407, to: 626},
+    {from: 407, to: 627},
+    {from: 407, to: 662},
+    {from: 407, to: 705},
+    {from: 408, to: 460},
+    {from: 408, to: 522},
+    {from: 408, to: 527},
+    {from: 408, to: 532},
+    {from: 408, to: 612},
+    {from: 408, to: 625},
+    {from: 408, to: 654},
+    {from: 408, to: 667},
+    {from: 408, to: 677},
+    {from: 408, to: 679},
+    {from: 408, to: 685},
+    {from: 408, to: 707},
+    {from: 409, to: 421},
+    {from: 409, to: 425},
+    {from: 409, to: 433},
+    {from: 409, to: 440},
+    {from: 409, to: 472},
+    {from: 409, to: 473},
+    {from: 409, to: 498},
+    {from: 409, to: 508},
+    {from: 409, to: 521},
+    {from: 409, to: 523},
+    {from: 409, to: 543},
+    {from: 409, to: 562},
+    {from: 409, to: 565},
+    {from: 409, to: 573},
+    {from: 409, to: 589},
+    {from: 409, to: 594},
+    {from: 409, to: 604},
+    {from: 409, to: 629},
+    {from: 409, to: 663},
+    {from: 409, to: 679},
+    {from: 409, to: 728},
+    {from: 410, to: 423},
+    {from: 410, to: 545},
+    {from: 410, to: 556},
+    {from: 410, to: 557},
+    {from: 410, to: 558},
+    {from: 410, to: 656},
+    {from: 410, to: 660},
+    {from: 410, to: 674},
+    {from: 410, to: 694},
+    {from: 410, to: 696},
+    {from: 411, to: 412},
+    {from: 411, to: 413},
+    {from: 411, to: 414},
+    {from: 411, to: 559},
+    {from: 411, to: 560},
+    {from: 411, to: 561},
+    {from: 411, to: 658},
+    {from: 411, to: 731},
+    {from: 412, to: 413},
+    {from: 412, to: 414},
+    {from: 412, to: 559},
+    {from: 412, to: 560},
+    {from: 412, to: 561},
+    {from: 412, to: 658},
+    {from: 412, to: 731},
+    {from: 413, to: 414},
+    {from: 413, to: 559},
+    {from: 413, to: 560},
+    {from: 413, to: 561},
+    {from: 413, to: 658},
+    {from: 413, to: 731},
+    {from: 414, to: 559},
+    {from: 414, to: 560},
+    {from: 414, to: 561},
+    {from: 414, to: 658},
+    {from: 414, to: 731},
+    {from: 415, to: 434},
+    {from: 415, to: 575},
+    {from: 415, to: 576},
+    {from: 415, to: 583},
+    {from: 415, to: 603},
+    {from: 415, to: 612},
+    {from: 415, to: 616},
+    {from: 415, to: 668},
+    {from: 415, to: 681},
+    {from: 415, to: 713},
+    {from: 416, to: 422},
+    {from: 416, to: 447},
+    {from: 416, to: 449},
+    {from: 416, to: 452},
+    {from: 416, to: 461},
+    {from: 416, to: 478},
+    {from: 416, to: 481},
+    {from: 416, to: 482},
+    {from: 416, to: 483},
+    {from: 416, to: 565},
+    {from: 416, to: 622},
+    {from: 416, to: 661},
+    {from: 416, to: 675},
+    {from: 417, to: 496},
+    {from: 417, to: 507},
+    {from: 417, to: 534},
+    {from: 417, to: 566},
+    {from: 417, to: 606},
+    {from: 417, to: 613},
+    {from: 417, to: 659},
+    {from: 417, to: 673},
+    {from: 417, to: 682},
+    {from: 417, to: 714},
+    {from: 418, to: 435},
+    {from: 418, to: 493},
+    {from: 418, to: 494},
+    {from: 418, to: 519},
+    {from: 418, to: 525},
+    {from: 418, to: 526},
+    {from: 418, to: 582},
+    {from: 418, to: 585},
+    {from: 418, to: 605},
+    {from: 418, to: 631},
+    {from: 418, to: 655},
+    {from: 418, to: 722},
+    {from: 419, to: 424},
+    {from: 419, to: 429},
+    {from: 419, to: 450},
+    {from: 419, to: 451},
+    {from: 419, to: 462},
+    {from: 419, to: 487},
+    {from: 419, to: 489},
+    {from: 419, to: 529},
+    {from: 419, to: 555},
+    {from: 419, to: 569},
+    {from: 419, to: 600},
+    {from: 419, to: 608},
+    {from: 419, to: 642},
+    {from: 419, to: 643},
+    {from: 419, to: 645},
+    {from: 419, to: 720},
+    {from: 420, to: 488},
+    {from: 420, to: 533},
+    {from: 420, to: 579},
+    {from: 420, to: 626},
+    {from: 420, to: 627},
+    {from: 420, to: 662},
+    {from: 420, to: 705},
+    {from: 421, to: 425},
+    {from: 421, to: 440},
+    {from: 421, to: 472},
+    {from: 421, to: 473},
+    {from: 421, to: 508},
+    {from: 421, to: 521},
+    {from: 421, to: 523},
+    {from: 421, to: 543},
+    {from: 421, to: 562},
+    {from: 421, to: 565},
+    {from: 421, to: 589},
+    {from: 421, to: 594},
+    {from: 421, to: 604},
+    {from: 421, to: 649},
+    {from: 421, to: 663},
+    {from: 421, to: 682},
+    {from: 421, to: 728},
+    {from: 422, to: 447},
+    {from: 422, to: 449},
+    {from: 422, to: 452},
+    {from: 422, to: 478},
+    {from: 422, to: 481},
+    {from: 422, to: 482},
+    {from: 422, to: 572},
+    {from: 422, to: 591},
+    {from: 422, to: 622},
+    {from: 422, to: 675},
+    {from: 422, to: 693},
+    {from: 423, to: 545},
+    {from: 423, to: 556},
+    {from: 423, to: 557},
+    {from: 423, to: 558},
+    {from: 423, to: 656},
+    {from: 423, to: 660},
+    {from: 423, to: 674},
+    {from: 423, to: 694},
+    {from: 423, to: 696},
+    {from: 424, to: 450},
+    {from: 424, to: 451},
+    {from: 424, to: 462},
+    {from: 424, to: 487},
+    {from: 424, to: 517},
+    {from: 424, to: 537},
+    {from: 424, to: 555},
+    {from: 424, to: 600},
+    {from: 424, to: 608},
+    {from: 424, to: 636},
+    {from: 424, to: 642},
+    {from: 424, to: 645},
+    {from: 425, to: 440},
+    {from: 425, to: 449},
+    {from: 425, to: 472},
+    {from: 425, to: 473},
+    {from: 425, to: 490},
+    {from: 425, to: 508},
+    {from: 425, to: 521},
+    {from: 425, to: 523},
+    {from: 425, to: 543},
+    {from: 425, to: 562},
+    {from: 425, to: 565},
+    {from: 425, to: 589},
+    {from: 425, to: 594},
+    {from: 425, to: 604},
+    {from: 425, to: 622},
+    {from: 425, to: 663},
+    {from: 425, to: 675},
+    {from: 425, to: 676},
+    {from: 425, to: 728},
+    {from: 426, to: 427},
+    {from: 426, to: 456},
+    {from: 426, to: 464},
+    {from: 426, to: 492},
+    {from: 426, to: 536},
+    {from: 426, to: 549},
+    {from: 426, to: 551},
+    {from: 426, to: 609},
+    {from: 426, to: 615},
+    {from: 426, to: 700},
+    {from: 426, to: 718},
+    {from: 427, to: 456},
+    {from: 427, to: 464},
+    {from: 427, to: 492},
+    {from: 427, to: 536},
+    {from: 427, to: 549},
+    {from: 427, to: 551},
+    {from: 427, to: 609},
+    {from: 427, to: 615},
+    {from: 427, to: 700},
+    {from: 427, to: 718},
+    {from: 428, to: 511},
+    {from: 428, to: 528},
+    {from: 428, to: 532},
+    {from: 428, to: 540},
+    {from: 428, to: 571},
+    {from: 428, to: 580},
+    {from: 428, to: 593},
+    {from: 428, to: 601},
+    {from: 428, to: 618},
+    {from: 428, to: 619},
+    {from: 428, to: 652},
+    {from: 428, to: 703},
+    {from: 428, to: 704},
+    {from: 428, to: 716},
+    {from: 428, to: 732},
+    {from: 429, to: 489},
+    {from: 429, to: 499},
+    {from: 429, to: 529},
+    {from: 429, to: 548},
+    {from: 429, to: 552},
+    {from: 429, to: 569},
+    {from: 429, to: 595},
+    {from: 429, to: 643},
+    {from: 429, to: 710},
+    {from: 429, to: 720},
+    {from: 430, to: 440},
+    {from: 430, to: 461},
+    {from: 430, to: 463},
+    {from: 430, to: 486},
+    {from: 430, to: 531},
+    {from: 430, to: 583},
+    {from: 430, to: 607},
+    {from: 430, to: 634},
+    {from: 430, to: 654},
+    {from: 430, to: 668},
+    {from: 430, to: 702},
+    {from: 430, to: 711},
+    {from: 431, to: 436},
+    {from: 431, to: 443},
+    {from: 431, to: 490},
+    {from: 431, to: 529},
+    {from: 431, to: 547},
+    {from: 431, to: 567},
+    {from: 431, to: 586},
+    {from: 431, to: 602},
+    {from: 431, to: 676},
+    {from: 431, to: 699},
+    {from: 431, to: 703},
+    {from: 431, to: 717},
+    {from: 432, to: 443},
+    {from: 432, to: 444},
+    {from: 432, to: 455},
+    {from: 432, to: 469},
+    {from: 432, to: 514},
+    {from: 432, to: 535},
+    {from: 432, to: 539},
+    {from: 432, to: 542},
+    {from: 432, to: 571},
+    {from: 432, to: 589},
+    {from: 432, to: 623},
+    {from: 432, to: 624},
+    {from: 432, to: 644},
+    {from: 432, to: 653},
+    {from: 432, to: 669},
+    {from: 432, to: 698},
+    {from: 432, to: 719},
+    {from: 433, to: 442},
+    {from: 433, to: 454},
+    {from: 433, to: 475},
+    {from: 433, to: 480},
+    {from: 433, to: 498},
+    {from: 433, to: 517},
+    {from: 433, to: 543},
+    {from: 433, to: 573},
+    {from: 433, to: 577},
+    {from: 433, to: 611},
+    {from: 433, to: 614},
+    {from: 433, to: 623},
+    {from: 433, to: 629},
+    {from: 433, to: 648},
+    {from: 433, to: 678},
+    {from: 433, to: 679},
+    {from: 433, to: 687},
+    {from: 434, to: 491},
+    {from: 434, to: 521},
+    {from: 434, to: 575},
+    {from: 434, to: 576},
+    {from: 434, to: 583},
+    {from: 434, to: 603},
+    {from: 434, to: 616},
+    {from: 434, to: 668},
+    {from: 434, to: 713},
+    {from: 435, to: 493},
+    {from: 435, to: 494},
+    {from: 435, to: 519},
+    {from: 435, to: 525},
+    {from: 435, to: 526},
+    {from: 435, to: 582},
+    {from: 435, to: 585},
+    {from: 435, to: 605},
+    {from: 435, to: 631},
+    {from: 435, to: 655},
+    {from: 435, to: 722},
+    {from: 436, to: 443},
+    {from: 436, to: 490},
+    {from: 436, to: 516},
+    {from: 436, to: 529},
+    {from: 436, to: 547},
+    {from: 436, to: 567},
+    {from: 436, to: 586},
+    {from: 436, to: 676},
+    {from: 436, to: 696},
+    {from: 436, to: 699},
+    {from: 436, to: 717},
+    {from: 437, to: 503},
+    {from: 437, to: 520},
+    {from: 437, to: 590},
+    {from: 437, to: 628},
+    {from: 437, to: 664},
+    {from: 437, to: 670},
+    {from: 437, to: 709},
+    {from: 438, to: 441},
+    {from: 438, to: 465},
+    {from: 438, to: 466},
+    {from: 438, to: 491},
+    {from: 438, to: 646},
+    {from: 438, to: 647},
+    {from: 438, to: 650},
+    {from: 438, to: 651},
+    {from: 438, to: 683},
+    {from: 438, to: 689},
+    {from: 438, to: 724},
+    {from: 438, to: 725},
+    {from: 438, to: 729},
+    {from: 438, to: 730},
+    {from: 438, to: 734},
+    {from: 438, to: 735},
+    {from: 439, to: 540},
+    {from: 439, to: 568},
+    {from: 439, to: 640},
+    {from: 439, to: 641},
+    {from: 439, to: 695},
+    {from: 439, to: 704},
+    {from: 439, to: 708},
+    {from: 439, to: 709},
+    {from: 439, to: 732},
+    {from: 439, to: 733},
+    {from: 440, to: 472},
+    {from: 440, to: 473},
+    {from: 440, to: 508},
+    {from: 440, to: 521},
+    {from: 440, to: 523},
+    {from: 440, to: 543},
+    {from: 440, to: 562},
+    {from: 440, to: 565},
+    {from: 440, to: 583},
+    {from: 440, to: 589},
+    {from: 440, to: 594},
+    {from: 440, to: 604},
+    {from: 440, to: 654},
+    {from: 440, to: 663},
+    {from: 440, to: 668},
+    {from: 440, to: 702},
+    {from: 440, to: 728},
+    {from: 441, to: 465},
+    {from: 441, to: 466},
+    {from: 441, to: 491},
+    {from: 441, to: 646},
+    {from: 441, to: 647},
+    {from: 441, to: 650},
+    {from: 441, to: 651},
+    {from: 441, to: 689},
+    {from: 441, to: 724},
+    {from: 441, to: 725},
+    {from: 441, to: 729},
+    {from: 441, to: 730},
+    {from: 441, to: 734},
+    {from: 441, to: 735},
+    {from: 442, to: 454},
+    {from: 442, to: 455},
+    {from: 442, to: 475},
+    {from: 442, to: 480},
+    {from: 442, to: 498},
+    {from: 442, to: 517},
+    {from: 442, to: 573},
+    {from: 442, to: 577},
+    {from: 442, to: 611},
+    {from: 442, to: 614},
+    {from: 442, to: 623},
+    {from: 442, to: 648},
+    {from: 442, to: 678},
+    {from: 442, to: 687},
+    {from: 442, to: 721},
+    {from: 443, to: 490},
+    {from: 443, to: 529},
+    {from: 443, to: 547},
+    {from: 443, to: 567},
+    {from: 443, to: 571},
+    {from: 443, to: 586},
+    {from: 443, to: 589},
+    {from: 443, to: 623},
+    {from: 443, to: 644},
+    {from: 443, to: 676},
+    {from: 443, to: 699},
+    {from: 443, to: 717},
+    {from: 443, to: 719},
+    {from: 444, to: 455},
+    {from: 444, to: 469},
+    {from: 444, to: 514},
+    {from: 444, to: 535},
+    {from: 444, to: 539},
+    {from: 444, to: 542},
+    {from: 444, to: 624},
+    {from: 444, to: 653},
+    {from: 444, to: 669},
+    {from: 444, to: 698},
+    {from: 445, to: 483},
+    {from: 445, to: 484},
+    {from: 445, to: 512},
+    {from: 445, to: 638},
+    {from: 445, to: 692},
+    {from: 445, to: 723},
+    {from: 446, to: 509},
+    {from: 446, to: 510},
+    {from: 446, to: 546},
+    {from: 446, to: 564},
+    {from: 446, to: 581},
+    {from: 446, to: 592},
+    {from: 447, to: 449},
+    {from: 447, to: 452},
+    {from: 447, to: 478},
+    {from: 447, to: 481},
+    {from: 447, to: 482},
+    {from: 447, to: 622},
+    {from: 447, to: 675},
+    {from: 447, to: 711},
+    {from: 448, to: 501},
+    {from: 448, to: 506},
+    {from: 448, to: 520},
+    {from: 448, to: 550},
+    {from: 448, to: 563},
+    {from: 448, to: 588},
+    {from: 448, to: 617},
+    {from: 448, to: 712},
+    {from: 448, to: 727},
+    {from: 449, to: 452},
+    {from: 449, to: 478},
+    {from: 449, to: 481},
+    {from: 449, to: 482},
+    {from: 449, to: 490},
+    {from: 449, to: 622},
+    {from: 449, to: 675},
+    {from: 449, to: 676},
+    {from: 449, to: 728},
+    {from: 450, to: 451},
+    {from: 450, to: 462},
+    {from: 450, to: 487},
+    {from: 450, to: 555},
+    {from: 450, to: 600},
+    {from: 450, to: 608},
+    {from: 450, to: 619},
+    {from: 450, to: 642},
+    {from: 450, to: 645},
+    {from: 450, to: 716},
+    {from: 451, to: 462},
+    {from: 451, to: 487},
+    {from: 451, to: 555},
+    {from: 451, to: 600},
+    {from: 451, to: 608},
+    {from: 451, to: 642},
+    {from: 451, to: 645},
+    {from: 452, to: 478},
+    {from: 452, to: 481},
+    {from: 452, to: 482},
+    {from: 452, to: 503},
+    {from: 452, to: 534},
+    {from: 452, to: 622},
+    {from: 452, to: 670},
+    {from: 452, to: 675},
+    {from: 453, to: 504},
+    {from: 453, to: 578},
+    {from: 453, to: 596},
+    {from: 453, to: 602},
+    {from: 453, to: 610},
+    {from: 453, to: 661},
+    {from: 453, to: 665},
+    {from: 453, to: 690},
+    {from: 453, to: 692},
+    {from: 453, to: 693},
+    {from: 453, to: 721},
+    {from: 453, to: 723},
+    {from: 454, to: 455},
+    {from: 454, to: 475},
+    {from: 454, to: 480},
+    {from: 454, to: 498},
+    {from: 454, to: 517},
+    {from: 454, to: 573},
+    {from: 454, to: 577},
+    {from: 454, to: 611},
+    {from: 454, to: 614},
+    {from: 454, to: 623},
+    {from: 454, to: 648},
+    {from: 454, to: 678},
+    {from: 454, to: 687},
+    {from: 454, to: 721},
+    {from: 455, to: 469},
+    {from: 455, to: 514},
+    {from: 455, to: 535},
+    {from: 455, to: 539},
+    {from: 455, to: 542},
+    {from: 455, to: 577},
+    {from: 455, to: 624},
+    {from: 455, to: 653},
+    {from: 455, to: 669},
+    {from: 455, to: 678},
+    {from: 455, to: 687},
+    {from: 455, to: 698},
+    {from: 455, to: 721},
+    {from: 456, to: 464},
+    {from: 456, to: 492},
+    {from: 456, to: 536},
+    {from: 456, to: 549},
+    {from: 456, to: 551},
+    {from: 456, to: 609},
+    {from: 456, to: 615},
+    {from: 456, to: 700},
+    {from: 456, to: 718},
+    {from: 457, to: 554},
+    {from: 457, to: 630},
+    {from: 457, to: 672},
+    {from: 457, to: 701},
+    {from: 458, to: 459},
+    {from: 458, to: 468},
+    {from: 458, to: 470},
+    {from: 458, to: 471},
+    {from: 458, to: 477},
+    {from: 458, to: 479},
+    {from: 458, to: 515},
+    {from: 458, to: 518},
+    {from: 458, to: 541},
+    {from: 458, to: 620},
+    {from: 458, to: 680},
+    {from: 458, to: 686},
+    {from: 459, to: 468},
+    {from: 459, to: 470},
+    {from: 459, to: 471},
+    {from: 459, to: 477},
+    {from: 459, to: 479},
+    {from: 459, to: 515},
+    {from: 459, to: 518},
+    {from: 459, to: 541},
+    {from: 459, to: 620},
+    {from: 459, to: 680},
+    {from: 459, to: 686},
+    {from: 460, to: 522},
+    {from: 460, to: 527},
+    {from: 460, to: 528},
+    {from: 460, to: 532},
+    {from: 460, to: 562},
+    {from: 460, to: 576},
+    {from: 460, to: 606},
+    {from: 460, to: 612},
+    {from: 460, to: 625},
+    {from: 460, to: 646},
+    {from: 460, to: 654},
+    {from: 460, to: 667},
+    {from: 460, to: 677},
+    {from: 460, to: 679},
+    {from: 460, to: 685},
+    {from: 460, to: 707},
+    {from: 460, to: 713},
+    {from: 461, to: 463},
+    {from: 461, to: 483},
+    {from: 461, to: 486},
+    {from: 461, to: 531},
+    {from: 461, to: 565},
+    {from: 461, to: 607},
+    {from: 461, to: 634},
+    {from: 461, to: 661},
+    {from: 461, to: 711},
+    {from: 462, to: 487},
+    {from: 462, to: 555},
+    {from: 462, to: 600},
+    {from: 462, to: 608},
+    {from: 462, to: 642},
+    {from: 462, to: 645},
+    {from: 462, to: 707},
+    {from: 462, to: 726},
+    {from: 463, to: 486},
+    {from: 463, to: 531},
+    {from: 463, to: 607},
+    {from: 463, to: 634},
+    {from: 463, to: 711},
+    {from: 464, to: 492},
+    {from: 464, to: 536},
+    {from: 464, to: 549},
+    {from: 464, to: 551},
+    {from: 464, to: 552},
+    {from: 464, to: 609},
+    {from: 464, to: 615},
+    {from: 464, to: 700},
+    {from: 464, to: 718},
+    {from: 465, to: 466},
+    {from: 465, to: 491},
+    {from: 465, to: 646},
+    {from: 465, to: 647},
+    {from: 465, to: 650},
+    {from: 465, to: 651},
+    {from: 465, to: 689},
+    {from: 465, to: 724},
+    {from: 465, to: 725},
+    {from: 465, to: 729},
+    {from: 465, to: 730},
+    {from: 465, to: 734},
+    {from: 465, to: 735},
+    {from: 466, to: 491},
+    {from: 466, to: 646},
+    {from: 466, to: 647},
+    {from: 466, to: 650},
+    {from: 466, to: 651},
+    {from: 466, to: 689},
+    {from: 466, to: 724},
+    {from: 466, to: 725},
+    {from: 466, to: 729},
+    {from: 466, to: 730},
+    {from: 466, to: 734},
+    {from: 466, to: 735},
+    {from: 467, to: 495},
+    {from: 467, to: 570},
+    {from: 467, to: 584},
+    {from: 467, to: 598},
+    {from: 467, to: 599},
+    {from: 467, to: 666},
+    {from: 468, to: 470},
+    {from: 468, to: 471},
+    {from: 468, to: 477},
+    {from: 468, to: 479},
+    {from: 468, to: 515},
+    {from: 468, to: 518},
+    {from: 468, to: 541},
+    {from: 468, to: 620},
+    {from: 468, to: 680},
+    {from: 468, to: 686},
+    {from: 469, to: 514},
+    {from: 469, to: 535},
+    {from: 469, to: 539},
+    {from: 469, to: 542},
+    {from: 469, to: 600},
+    {from: 469, to: 608},
+    {from: 469, to: 624},
+    {from: 469, to: 631},
+    {from: 469, to: 653},
+    {from: 469, to: 669},
+    {from: 469, to: 698},
+    {from: 469, to: 734},
+    {from: 470, to: 471},
+    {from: 470, to: 477},
+    {from: 470, to: 479},
+    {from: 470, to: 515},
+    {from: 470, to: 518},
+    {from: 470, to: 541},
+    {from: 470, to: 620},
+    {from: 470, to: 680},
+    {from: 470, to: 686},
+    {from: 471, to: 477},
+    {from: 471, to: 479},
+    {from: 471, to: 515},
+    {from: 471, to: 518},
+    {from: 471, to: 541},
+    {from: 471, to: 550},
+    {from: 471, to: 620},
+    {from: 471, to: 680},
+    {from: 471, to: 686},
+    {from: 472, to: 473},
+    {from: 472, to: 508},
+    {from: 472, to: 521},
+    {from: 472, to: 523},
+    {from: 472, to: 543},
+    {from: 472, to: 562},
+    {from: 472, to: 565},
+    {from: 472, to: 589},
+    {from: 472, to: 594},
+    {from: 472, to: 604},
+    {from: 472, to: 649},
+    {from: 472, to: 663},
+    {from: 472, to: 682},
+    {from: 472, to: 728},
+    {from: 473, to: 508},
+    {from: 473, to: 521},
+    {from: 473, to: 523},
+    {from: 473, to: 533},
+    {from: 473, to: 543},
+    {from: 473, to: 562},
+    {from: 473, to: 565},
+    {from: 473, to: 589},
+    {from: 473, to: 594},
+    {from: 473, to: 604},
+    {from: 473, to: 663},
+    {from: 473, to: 728},
+    {from: 474, to: 485},
+    {from: 474, to: 553},
+    {from: 474, to: 621},
+    {from: 474, to: 632},
+    {from: 474, to: 638},
+    {from: 474, to: 639},
+    {from: 474, to: 657},
+    {from: 474, to: 671},
+    {from: 474, to: 715},
+    {from: 474, to: 726},
+    {from: 475, to: 480},
+    {from: 475, to: 498},
+    {from: 475, to: 517},
+    {from: 475, to: 518},
+    {from: 475, to: 573},
+    {from: 475, to: 577},
+    {from: 475, to: 611},
+    {from: 475, to: 614},
+    {from: 475, to: 623},
+    {from: 475, to: 648},
+    {from: 475, to: 656},
+    {from: 475, to: 678},
+    {from: 475, to: 687},
+    {from: 476, to: 502},
+    {from: 476, to: 513},
+    {from: 476, to: 530},
+    {from: 476, to: 544},
+    {from: 476, to: 681},
+    {from: 476, to: 683},
+    {from: 477, to: 479},
+    {from: 477, to: 515},
+    {from: 477, to: 518},
+    {from: 477, to: 541},
+    {from: 477, to: 620},
+    {from: 477, to: 680},
+    {from: 477, to: 686},
+    {from: 478, to: 481},
+    {from: 478, to: 482},
+    {from: 478, to: 558},
+    {from: 478, to: 622},
+    {from: 478, to: 675},
+    {from: 479, to: 515},
+    {from: 479, to: 518},
+    {from: 479, to: 541},
+    {from: 479, to: 620},
+    {from: 479, to: 680},
+    {from: 479, to: 686},
+    {from: 480, to: 497},
+    {from: 480, to: 498},
+    {from: 480, to: 517},
+    {from: 480, to: 573},
+    {from: 480, to: 577},
+    {from: 480, to: 611},
+    {from: 480, to: 614},
+    {from: 480, to: 623},
+    {from: 480, to: 648},
+    {from: 480, to: 678},
+    {from: 480, to: 687},
+    {from: 481, to: 482},
+    {from: 481, to: 503},
+    {from: 481, to: 534},
+    {from: 481, to: 622},
+    {from: 481, to: 670},
+    {from: 481, to: 675},
+    {from: 482, to: 622},
+    {from: 482, to: 653},
+    {from: 482, to: 675},
+    {from: 483, to: 484},
+    {from: 483, to: 512},
+    {from: 483, to: 565},
+    {from: 483, to: 661},
+    {from: 484, to: 512},
+    {from: 484, to: 701},
+    {from: 485, to: 553},
+    {from: 485, to: 621},
+    {from: 485, to: 632},
+    {from: 485, to: 638},
+    {from: 485, to: 639},
+    {from: 485, to: 657},
+    {from: 485, to: 663},
+    {from: 485, to: 671},
+    {from: 485, to: 715},
+    {from: 485, to: 726},
+    {from: 486, to: 531},
+    {from: 486, to: 607},
+    {from: 486, to: 618},
+    {from: 486, to: 634},
+    {from: 486, to: 711},
+    {from: 487, to: 555},
+    {from: 487, to: 600},
+    {from: 487, to: 608},
+    {from: 487, to: 642},
+    {from: 487, to: 645},
+    {from: 488, to: 533},
+    {from: 488, to: 561},
+    {from: 488, to: 579},
+    {from: 488, to: 626},
+    {from: 488, to: 627},
+    {from: 488, to: 647},
+    {from: 488, to: 662},
+    {from: 488, to: 705},
+    {from: 489, to: 499},
+    {from: 489, to: 529},
+    {from: 489, to: 548},
+    {from: 489, to: 552},
+    {from: 489, to: 569},
+    {from: 489, to: 595},
+    {from: 489, to: 643},
+    {from: 489, to: 710},
+    {from: 489, to: 720},
+    {from: 490, to: 529},
+    {from: 490, to: 547},
+    {from: 490, to: 567},
+    {from: 490, to: 586},
+    {from: 490, to: 622},
+    {from: 490, to: 675},
+    {from: 490, to: 676},
+    {from: 490, to: 699},
+    {from: 490, to: 717},
+    {from: 490, to: 728},
+    {from: 491, to: 521},
+    {from: 491, to: 603},
+    {from: 491, to: 646},
+    {from: 491, to: 647},
+    {from: 491, to: 650},
+    {from: 491, to: 651},
+    {from: 491, to: 689},
+    {from: 491, to: 724},
+    {from: 491, to: 725},
+    {from: 491, to: 729},
+    {from: 491, to: 730},
+    {from: 491, to: 734},
+    {from: 491, to: 735},
+    {from: 492, to: 535},
+    {from: 492, to: 536},
+    {from: 492, to: 549},
+    {from: 492, to: 551},
+    {from: 492, to: 609},
+    {from: 492, to: 615},
+    {from: 492, to: 700},
+    {from: 492, to: 718},
+    {from: 493, to: 494},
+    {from: 493, to: 519},
+    {from: 493, to: 525},
+    {from: 493, to: 526},
+    {from: 493, to: 582},
+    {from: 493, to: 585},
+    {from: 493, to: 605},
+    {from: 493, to: 624},
+    {from: 493, to: 631},
+    {from: 493, to: 655},
+    {from: 493, to: 722},
+    {from: 494, to: 519},
+    {from: 494, to: 525},
+    {from: 494, to: 526},
+    {from: 494, to: 582},
+    {from: 494, to: 585},
+    {from: 494, to: 605},
+    {from: 494, to: 631},
+    {from: 494, to: 655},
+    {from: 494, to: 722},
+    {from: 495, to: 570},
+    {from: 495, to: 584},
+    {from: 495, to: 598},
+    {from: 495, to: 599},
+    {from: 495, to: 666},
+    {from: 496, to: 507},
+    {from: 496, to: 534},
+    {from: 496, to: 566},
+    {from: 496, to: 606},
+    {from: 496, to: 613},
+    {from: 496, to: 630},
+    {from: 496, to: 659},
+    {from: 496, to: 673},
+    {from: 496, to: 682},
+    {from: 496, to: 714},
+    {from: 497, to: 516},
+    {from: 497, to: 524},
+    {from: 497, to: 538},
+    {from: 497, to: 633},
+    {from: 497, to: 635},
+    {from: 497, to: 636},
+    {from: 497, to: 637},
+    {from: 497, to: 684},
+    {from: 497, to: 688},
+    {from: 497, to: 697},
+    {from: 497, to: 736},
+    {from: 498, to: 517},
+    {from: 498, to: 543},
+    {from: 498, to: 573},
+    {from: 498, to: 577},
+    {from: 498, to: 611},
+    {from: 498, to: 614},
+    {from: 498, to: 623},
+    {from: 498, to: 629},
+    {from: 498, to: 648},
+    {from: 498, to: 678},
+    {from: 498, to: 679},
+    {from: 498, to: 687},
+    {from: 499, to: 548},
+    {from: 499, to: 552},
+    {from: 499, to: 595},
+    {from: 499, to: 710},
+    {from: 500, to: 505},
+    {from: 500, to: 537},
+    {from: 500, to: 574},
+    {from: 500, to: 587},
+    {from: 500, to: 597},
+    {from: 500, to: 649},
+    {from: 500, to: 691},
+    {from: 500, to: 702},
+    {from: 500, to: 706},
+    {from: 501, to: 506},
+    {from: 501, to: 550},
+    {from: 501, to: 563},
+    {from: 501, to: 588},
+    {from: 501, to: 617},
+    {from: 501, to: 712},
+    {from: 501, to: 727},
+    {from: 502, to: 513},
+    {from: 502, to: 530},
+    {from: 502, to: 544},
+    {from: 502, to: 681},
+    {from: 502, to: 683},
+    {from: 503, to: 520},
+    {from: 503, to: 534},
+    {from: 503, to: 590},
+    {from: 503, to: 628},
+    {from: 503, to: 664},
+    {from: 503, to: 670},
+    {from: 503, to: 709},
+    {from: 504, to: 578},
+    {from: 504, to: 596},
+    {from: 504, to: 602},
+    {from: 504, to: 610},
+    {from: 504, to: 661},
+    {from: 504, to: 665},
+    {from: 504, to: 690},
+    {from: 504, to: 692},
+    {from: 504, to: 693},
+    {from: 504, to: 721},
+    {from: 504, to: 723},
+    {from: 505, to: 537},
+    {from: 505, to: 574},
+    {from: 505, to: 587},
+    {from: 505, to: 597},
+    {from: 505, to: 649},
+    {from: 505, to: 691},
+    {from: 505, to: 702},
+    {from: 505, to: 706},
+    {from: 506, to: 550},
+    {from: 506, to: 563},
+    {from: 506, to: 588},
+    {from: 506, to: 617},
+    {from: 506, to: 712},
+    {from: 506, to: 727},
+    {from: 507, to: 534},
+    {from: 507, to: 566},
+    {from: 507, to: 606},
+    {from: 507, to: 613},
+    {from: 507, to: 659},
+    {from: 507, to: 673},
+    {from: 507, to: 682},
+    {from: 507, to: 714},
+    {from: 507, to: 715},
+    {from: 508, to: 521},
+    {from: 508, to: 523},
+    {from: 508, to: 543},
+    {from: 508, to: 562},
+    {from: 508, to: 565},
+    {from: 508, to: 589},
+    {from: 508, to: 594},
+    {from: 508, to: 604},
+    {from: 508, to: 663},
+    {from: 508, to: 728},
+    {from: 509, to: 510},
+    {from: 509, to: 546},
+    {from: 509, to: 564},
+    {from: 509, to: 581},
+    {from: 509, to: 592},
+    {from: 510, to: 546},
+    {from: 510, to: 564},
+    {from: 510, to: 581},
+    {from: 510, to: 592},
+    {from: 511, to: 528},
+    {from: 511, to: 539},
+    {from: 511, to: 571},
+    {from: 511, to: 580},
+    {from: 511, to: 593},
+    {from: 511, to: 601},
+    {from: 511, to: 618},
+    {from: 511, to: 619},
+    {from: 511, to: 652},
+    {from: 511, to: 703},
+    {from: 511, to: 716},
+    {from: 513, to: 530},
+    {from: 513, to: 544},
+    {from: 513, to: 681},
+    {from: 513, to: 683},
+    {from: 514, to: 535},
+    {from: 514, to: 539},
+    {from: 514, to: 542},
+    {from: 514, to: 624},
+    {from: 514, to: 653},
+    {from: 514, to: 669},
+    {from: 514, to: 698},
+    {from: 515, to: 518},
+    {from: 515, to: 541},
+    {from: 515, to: 620},
+    {from: 515, to: 680},
+    {from: 515, to: 686},
+    {from: 516, to: 524},
+    {from: 516, to: 538},
+    {from: 516, to: 633},
+    {from: 516, to: 635},
+    {from: 516, to: 636},
+    {from: 516, to: 637},
+    {from: 516, to: 684},
+    {from: 516, to: 688},
+    {from: 516, to: 696},
+    {from: 516, to: 697},
+    {from: 516, to: 736},
+    {from: 517, to: 537},
+    {from: 517, to: 573},
+    {from: 517, to: 577},
+    {from: 517, to: 611},
+    {from: 517, to: 614},
+    {from: 517, to: 623},
+    {from: 517, to: 636},
+    {from: 517, to: 648},
+    {from: 517, to: 678},
+    {from: 517, to: 687},
+    {from: 518, to: 541},
+    {from: 518, to: 611},
+    {from: 518, to: 620},
+    {from: 518, to: 656},
+    {from: 518, to: 680},
+    {from: 518, to: 686},
+    {from: 519, to: 525},
+    {from: 519, to: 526},
+    {from: 519, to: 582},
+    {from: 519, to: 585},
+    {from: 519, to: 605},
+    {from: 519, to: 631},
+    {from: 519, to: 655},
+    {from: 519, to: 722},
+    {from: 520, to: 590},
+    {from: 520, to: 628},
+    {from: 520, to: 664},
+    {from: 520, to: 670},
+    {from: 520, to: 709},
+    {from: 521, to: 523},
+    {from: 521, to: 543},
+    {from: 521, to: 562},
+    {from: 521, to: 565},
+    {from: 521, to: 589},
+    {from: 521, to: 594},
+    {from: 521, to: 603},
+    {from: 521, to: 604},
+    {from: 521, to: 663},
+    {from: 521, to: 728},
+    {from: 522, to: 525},
+    {from: 522, to: 527},
+    {from: 522, to: 532},
+    {from: 522, to: 567},
+    {from: 522, to: 612},
+    {from: 522, to: 625},
+    {from: 522, to: 654},
+    {from: 522, to: 667},
+    {from: 522, to: 677},
+    {from: 522, to: 679},
+    {from: 522, to: 685},
+    {from: 522, to: 707},
+    {from: 523, to: 543},
+    {from: 523, to: 562},
+    {from: 523, to: 565},
+    {from: 523, to: 589},
+    {from: 523, to: 594},
+    {from: 523, to: 604},
+    {from: 523, to: 649},
+    {from: 523, to: 663},
+    {from: 523, to: 682},
+    {from: 523, to: 728},
+    {from: 524, to: 538},
+    {from: 524, to: 633},
+    {from: 524, to: 635},
+    {from: 524, to: 636},
+    {from: 524, to: 637},
+    {from: 524, to: 684},
+    {from: 524, to: 688},
+    {from: 524, to: 697},
+    {from: 524, to: 736},
+    {from: 525, to: 526},
+    {from: 525, to: 527},
+    {from: 525, to: 567},
+    {from: 525, to: 582},
+    {from: 525, to: 585},
+    {from: 525, to: 605},
+    {from: 525, to: 631},
+    {from: 525, to: 655},
+    {from: 525, to: 722},
+    {from: 526, to: 582},
+    {from: 526, to: 585},
+    {from: 526, to: 605},
+    {from: 526, to: 631},
+    {from: 526, to: 652},
+    {from: 526, to: 655},
+    {from: 526, to: 667},
+    {from: 526, to: 722},
+    {from: 527, to: 532},
+    {from: 527, to: 567},
+    {from: 527, to: 612},
+    {from: 527, to: 625},
+    {from: 527, to: 654},
+    {from: 527, to: 667},
+    {from: 527, to: 677},
+    {from: 527, to: 679},
+    {from: 527, to: 685},
+    {from: 527, to: 707},
+    {from: 528, to: 562},
+    {from: 528, to: 571},
+    {from: 528, to: 576},
+    {from: 528, to: 580},
+    {from: 528, to: 593},
+    {from: 528, to: 601},
+    {from: 528, to: 606},
+    {from: 528, to: 618},
+    {from: 528, to: 619},
+    {from: 528, to: 646},
+    {from: 528, to: 652},
+    {from: 528, to: 703},
+    {from: 528, to: 713},
+    {from: 528, to: 716},
+    {from: 529, to: 547},
+    {from: 529, to: 567},
+    {from: 529, to: 569},
+    {from: 529, to: 586},
+    {from: 529, to: 643},
+    {from: 529, to: 676},
+    {from: 529, to: 699},
+    {from: 529, to: 717},
+    {from: 529, to: 720},
+    {from: 530, to: 544},
+    {from: 530, to: 681},
+    {from: 530, to: 683},
+    {from: 531, to: 607},
+    {from: 531, to: 634},
+    {from: 531, to: 711},
+    {from: 532, to: 540},
+    {from: 532, to: 612},
+    {from: 532, to: 625},
+    {from: 532, to: 654},
+    {from: 532, to: 667},
+    {from: 532, to: 677},
+    {from: 532, to: 679},
+    {from: 532, to: 685},
+    {from: 532, to: 704},
+    {from: 532, to: 707},
+    {from: 532, to: 732},
+    {from: 533, to: 579},
+    {from: 533, to: 626},
+    {from: 533, to: 627},
+    {from: 533, to: 662},
+    {from: 533, to: 705},
+    {from: 534, to: 566},
+    {from: 534, to: 606},
+    {from: 534, to: 613},
+    {from: 534, to: 659},
+    {from: 534, to: 670},
+    {from: 534, to: 673},
+    {from: 534, to: 682},
+    {from: 534, to: 714},
+    {from: 535, to: 539},
+    {from: 535, to: 542},
+    {from: 535, to: 624},
+    {from: 535, to: 653},
+    {from: 535, to: 669},
+    {from: 535, to: 698},
+    {from: 536, to: 549},
+    {from: 536, to: 551},
+    {from: 536, to: 609},
+    {from: 536, to: 615},
+    {from: 536, to: 700},
+    {from: 536, to: 718},
+    {from: 537, to: 574},
+    {from: 537, to: 587},
+    {from: 537, to: 597},
+    {from: 537, to: 636},
+    {from: 537, to: 649},
+    {from: 537, to: 691},
+    {from: 537, to: 702},
+    {from: 537, to: 706},
+    {from: 538, to: 633},
+    {from: 538, to: 635},
+    {from: 538, to: 636},
+    {from: 538, to: 637},
+    {from: 538, to: 684},
+    {from: 538, to: 688},
+    {from: 538, to: 697},
+    {from: 538, to: 736},
+    {from: 539, to: 542},
+    {from: 539, to: 624},
+    {from: 539, to: 653},
+    {from: 539, to: 669},
+    {from: 539, to: 698},
+    {from: 540, to: 568},
+    {from: 540, to: 640},
+    {from: 540, to: 641},
+    {from: 540, to: 695},
+    {from: 540, to: 704},
+    {from: 540, to: 708},
+    {from: 540, to: 732},
+    {from: 540, to: 733},
+    {from: 541, to: 620},
+    {from: 541, to: 680},
+    {from: 541, to: 686},
+    {from: 542, to: 624},
+    {from: 542, to: 653},
+    {from: 542, to: 669},
+    {from: 542, to: 698},
+    {from: 543, to: 562},
+    {from: 543, to: 565},
+    {from: 543, to: 573},
+    {from: 543, to: 589},
+    {from: 543, to: 594},
+    {from: 543, to: 604},
+    {from: 543, to: 629},
+    {from: 543, to: 663},
+    {from: 543, to: 679},
+    {from: 543, to: 728},
+    {from: 544, to: 681},
+    {from: 544, to: 683},
+    {from: 545, to: 556},
+    {from: 545, to: 557},
+    {from: 545, to: 558},
+    {from: 545, to: 656},
+    {from: 545, to: 660},
+    {from: 545, to: 674},
+    {from: 545, to: 694},
+    {from: 545, to: 696},
+    {from: 545, to: 722},
+    {from: 546, to: 564},
+    {from: 546, to: 581},
+    {from: 546, to: 592},
+    {from: 547, to: 567},
+    {from: 547, to: 586},
+    {from: 547, to: 627},
+    {from: 547, to: 676},
+    {from: 547, to: 699},
+    {from: 547, to: 717},
+    {from: 548, to: 552},
+    {from: 548, to: 595},
+    {from: 548, to: 710},
+    {from: 549, to: 551},
+    {from: 549, to: 609},
+    {from: 549, to: 615},
+    {from: 549, to: 700},
+    {from: 549, to: 718},
+    {from: 550, to: 563},
+    {from: 550, to: 588},
+    {from: 550, to: 617},
+    {from: 550, to: 712},
+    {from: 550, to: 727},
+    {from: 551, to: 609},
+    {from: 551, to: 615},
+    {from: 551, to: 700},
+    {from: 551, to: 718},
+    {from: 552, to: 595},
+    {from: 552, to: 710},
+    {from: 553, to: 621},
+    {from: 553, to: 632},
+    {from: 553, to: 638},
+    {from: 553, to: 639},
+    {from: 553, to: 657},
+    {from: 553, to: 671},
+    {from: 553, to: 715},
+    {from: 553, to: 726},
+    {from: 554, to: 630},
+    {from: 554, to: 672},
+    {from: 554, to: 701},
+    {from: 555, to: 600},
+    {from: 555, to: 608},
+    {from: 555, to: 642},
+    {from: 555, to: 645},
+    {from: 555, to: 707},
+    {from: 555, to: 726},
+    {from: 556, to: 557},
+    {from: 556, to: 558},
+    {from: 556, to: 656},
+    {from: 556, to: 660},
+    {from: 556, to: 674},
+    {from: 556, to: 694},
+    {from: 556, to: 696},
+    {from: 557, to: 558},
+    {from: 557, to: 656},
+    {from: 557, to: 660},
+    {from: 557, to: 674},
+    {from: 557, to: 694},
+    {from: 557, to: 696},
+    {from: 558, to: 656},
+    {from: 558, to: 660},
+    {from: 558, to: 674},
+    {from: 558, to: 694},
+    {from: 558, to: 696},
+    {from: 559, to: 560},
+    {from: 559, to: 561},
+    {from: 559, to: 658},
+    {from: 559, to: 731},
+    {from: 560, to: 561},
+    {from: 560, to: 658},
+    {from: 560, to: 731},
+    {from: 561, to: 647},
+    {from: 561, to: 658},
+    {from: 561, to: 731},
+    {from: 562, to: 565},
+    {from: 562, to: 576},
+    {from: 562, to: 589},
+    {from: 562, to: 594},
+    {from: 562, to: 604},
+    {from: 562, to: 606},
+    {from: 562, to: 646},
+    {from: 562, to: 663},
+    {from: 562, to: 713},
+    {from: 562, to: 728},
+    {from: 563, to: 588},
+    {from: 563, to: 617},
+    {from: 563, to: 712},
+    {from: 563, to: 727},
+    {from: 564, to: 581},
+    {from: 564, to: 592},
+    {from: 565, to: 589},
+    {from: 565, to: 594},
+    {from: 565, to: 604},
+    {from: 565, to: 661},
+    {from: 565, to: 663},
+    {from: 565, to: 728},
+    {from: 566, to: 606},
+    {from: 566, to: 613},
+    {from: 566, to: 659},
+    {from: 566, to: 673},
+    {from: 566, to: 682},
+    {from: 566, to: 714},
+    {from: 567, to: 586},
+    {from: 567, to: 676},
+    {from: 567, to: 699},
+    {from: 567, to: 717},
+    {from: 568, to: 640},
+    {from: 568, to: 641},
+    {from: 568, to: 695},
+    {from: 568, to: 704},
+    {from: 568, to: 708},
+    {from: 568, to: 709},
+    {from: 568, to: 732},
+    {from: 568, to: 733},
+    {from: 569, to: 572},
+    {from: 569, to: 591},
+    {from: 569, to: 629},
+    {from: 569, to: 643},
+    {from: 569, to: 644},
+    {from: 569, to: 719},
+    {from: 569, to: 720},
+    {from: 570, to: 584},
+    {from: 570, to: 598},
+    {from: 570, to: 599},
+    {from: 570, to: 666},
+    {from: 571, to: 580},
+    {from: 571, to: 589},
+    {from: 571, to: 593},
+    {from: 571, to: 601},
+    {from: 571, to: 618},
+    {from: 571, to: 619},
+    {from: 571, to: 623},
+    {from: 571, to: 644},
+    {from: 571, to: 652},
+    {from: 571, to: 703},
+    {from: 571, to: 716},
+    {from: 571, to: 719},
+    {from: 572, to: 591},
+    {from: 572, to: 629},
+    {from: 572, to: 643},
+    {from: 572, to: 644},
+    {from: 572, to: 693},
+    {from: 572, to: 719},
+    {from: 572, to: 720},
+    {from: 573, to: 577},
+    {from: 573, to: 611},
+    {from: 573, to: 614},
+    {from: 573, to: 623},
+    {from: 573, to: 629},
+    {from: 573, to: 648},
+    {from: 573, to: 678},
+    {from: 573, to: 679},
+    {from: 573, to: 687},
+    {from: 574, to: 587},
+    {from: 574, to: 597},
+    {from: 574, to: 649},
+    {from: 574, to: 691},
+    {from: 574, to: 702},
+    {from: 574, to: 706},
+    {from: 574, to: 718},
+    {from: 575, to: 576},
+    {from: 575, to: 583},
+    {from: 575, to: 603},
+    {from: 575, to: 612},
+    {from: 575, to: 616},
+    {from: 575, to: 668},
+    {from: 575, to: 681},
+    {from: 575, to: 713},
+    {from: 576, to: 583},
+    {from: 576, to: 603},
+    {from: 576, to: 606},
+    {from: 576, to: 616},
+    {from: 576, to: 646},
+    {from: 576, to: 668},
+    {from: 576, to: 713},
+    {from: 577, to: 611},
+    {from: 577, to: 614},
+    {from: 577, to: 623},
+    {from: 577, to: 648},
+    {from: 577, to: 678},
+    {from: 577, to: 687},
+    {from: 577, to: 721},
+    {from: 578, to: 596},
+    {from: 578, to: 601},
+    {from: 578, to: 602},
+    {from: 578, to: 610},
+    {from: 578, to: 655},
+    {from: 578, to: 661},
+    {from: 578, to: 665},
+    {from: 578, to: 690},
+    {from: 578, to: 692},
+    {from: 578, to: 693},
+    {from: 578, to: 721},
+    {from: 578, to: 723},
+    {from: 579, to: 593},
+    {from: 579, to: 626},
+    {from: 579, to: 627},
+    {from: 579, to: 662},
+    {from: 579, to: 705},
+    {from: 580, to: 593},
+    {from: 580, to: 601},
+    {from: 580, to: 618},
+    {from: 580, to: 619},
+    {from: 580, to: 652},
+    {from: 580, to: 703},
+    {from: 580, to: 716},
+    {from: 581, to: 592},
+    {from: 582, to: 585},
+    {from: 582, to: 605},
+    {from: 582, to: 631},
+    {from: 582, to: 655},
+    {from: 582, to: 722},
+    {from: 583, to: 603},
+    {from: 583, to: 616},
+    {from: 583, to: 654},
+    {from: 583, to: 668},
+    {from: 583, to: 702},
+    {from: 583, to: 713},
+    {from: 584, to: 598},
+    {from: 584, to: 599},
+    {from: 584, to: 666},
+    {from: 585, to: 605},
+    {from: 585, to: 631},
+    {from: 585, to: 655},
+    {from: 585, to: 722},
+    {from: 586, to: 627},
+    {from: 586, to: 676},
+    {from: 586, to: 699},
+    {from: 586, to: 717},
+    {from: 587, to: 597},
+    {from: 587, to: 649},
+    {from: 587, to: 691},
+    {from: 587, to: 702},
+    {from: 587, to: 706},
+    {from: 588, to: 617},
+    {from: 588, to: 712},
+    {from: 588, to: 727},
+    {from: 589, to: 594},
+    {from: 589, to: 604},
+    {from: 589, to: 623},
+    {from: 589, to: 644},
+    {from: 589, to: 663},
+    {from: 589, to: 719},
+    {from: 589, to: 728},
+    {from: 590, to: 628},
+    {from: 590, to: 664},
+    {from: 590, to: 670},
+    {from: 590, to: 709},
+    {from: 591, to: 629},
+    {from: 591, to: 643},
+    {from: 591, to: 644},
+    {from: 591, to: 693},
+    {from: 591, to: 719},
+    {from: 591, to: 720},
+    {from: 593, to: 601},
+    {from: 593, to: 618},
+    {from: 593, to: 619},
+    {from: 593, to: 652},
+    {from: 593, to: 703},
+    {from: 593, to: 716},
+    {from: 594, to: 604},
+    {from: 594, to: 663},
+    {from: 594, to: 728},
+    {from: 595, to: 710},
+    {from: 596, to: 602},
+    {from: 596, to: 610},
+    {from: 596, to: 661},
+    {from: 596, to: 665},
+    {from: 596, to: 690},
+    {from: 596, to: 692},
+    {from: 596, to: 693},
+    {from: 596, to: 721},
+    {from: 596, to: 723},
+    {from: 597, to: 649},
+    {from: 597, to: 691},
+    {from: 597, to: 702},
+    {from: 597, to: 706},
+    {from: 598, to: 599},
+    {from: 598, to: 666},
+    {from: 599, to: 666},
+    {from: 600, to: 608},
+    {from: 600, to: 631},
+    {from: 600, to: 642},
+    {from: 600, to: 645},
+    {from: 600, to: 734},
+    {from: 601, to: 618},
+    {from: 601, to: 619},
+    {from: 601, to: 652},
+    {from: 601, to: 655},
+    {from: 601, to: 703},
+    {from: 601, to: 716},
+    {from: 602, to: 610},
+    {from: 602, to: 661},
+    {from: 602, to: 665},
+    {from: 602, to: 690},
+    {from: 602, to: 692},
+    {from: 602, to: 693},
+    {from: 602, to: 703},
+    {from: 602, to: 721},
+    {from: 602, to: 723},
+    {from: 603, to: 616},
+    {from: 603, to: 668},
+    {from: 603, to: 713},
+    {from: 604, to: 621},
+    {from: 604, to: 663},
+    {from: 604, to: 706},
+    {from: 604, to: 728},
+    {from: 605, to: 631},
+    {from: 605, to: 655},
+    {from: 605, to: 722},
+    {from: 606, to: 613},
+    {from: 606, to: 646},
+    {from: 606, to: 659},
+    {from: 606, to: 673},
+    {from: 606, to: 682},
+    {from: 606, to: 713},
+    {from: 606, to: 714},
+    {from: 607, to: 634},
+    {from: 607, to: 711},
+    {from: 608, to: 631},
+    {from: 608, to: 642},
+    {from: 608, to: 645},
+    {from: 608, to: 734},
+    {from: 609, to: 615},
+    {from: 609, to: 700},
+    {from: 609, to: 718},
+    {from: 610, to: 661},
+    {from: 610, to: 665},
+    {from: 610, to: 690},
+    {from: 610, to: 692},
+    {from: 610, to: 693},
+    {from: 610, to: 721},
+    {from: 610, to: 723},
+    {from: 611, to: 614},
+    {from: 611, to: 623},
+    {from: 611, to: 648},
+    {from: 611, to: 656},
+    {from: 611, to: 678},
+    {from: 611, to: 687},
+    {from: 612, to: 616},
+    {from: 612, to: 625},
+    {from: 612, to: 654},
+    {from: 612, to: 667},
+    {from: 612, to: 677},
+    {from: 612, to: 679},
+    {from: 612, to: 681},
+    {from: 612, to: 685},
+    {from: 612, to: 707},
+    {from: 613, to: 659},
+    {from: 613, to: 673},
+    {from: 613, to: 682},
+    {from: 613, to: 714},
+    {from: 614, to: 623},
+    {from: 614, to: 648},
+    {from: 614, to: 678},
+    {from: 614, to: 687},
+    {from: 615, to: 700},
+    {from: 615, to: 718},
+    {from: 616, to: 668},
+    {from: 616, to: 681},
+    {from: 616, to: 713},
+    {from: 617, to: 680},
+    {from: 617, to: 712},
+    {from: 617, to: 727},
+    {from: 618, to: 619},
+    {from: 618, to: 652},
+    {from: 618, to: 703},
+    {from: 618, to: 716},
+    {from: 619, to: 652},
+    {from: 619, to: 703},
+    {from: 619, to: 716},
+    {from: 620, to: 680},
+    {from: 620, to: 686},
+    {from: 621, to: 632},
+    {from: 621, to: 638},
+    {from: 621, to: 639},
+    {from: 621, to: 657},
+    {from: 621, to: 671},
+    {from: 621, to: 706},
+    {from: 621, to: 715},
+    {from: 621, to: 726},
+    {from: 622, to: 675},
+    {from: 622, to: 676},
+    {from: 622, to: 728},
+    {from: 623, to: 644},
+    {from: 623, to: 648},
+    {from: 623, to: 678},
+    {from: 623, to: 687},
+    {from: 623, to: 719},
+    {from: 624, to: 653},
+    {from: 624, to: 669},
+    {from: 624, to: 698},
+    {from: 625, to: 654},
+    {from: 625, to: 667},
+    {from: 625, to: 677},
+    {from: 625, to: 679},
+    {from: 625, to: 685},
+    {from: 625, to: 707},
+    {from: 626, to: 627},
+    {from: 626, to: 662},
+    {from: 626, to: 705},
+    {from: 627, to: 662},
+    {from: 627, to: 705},
+    {from: 627, to: 717},
+    {from: 628, to: 664},
+    {from: 628, to: 670},
+    {from: 628, to: 709},
+    {from: 629, to: 643},
+    {from: 629, to: 644},
+    {from: 629, to: 679},
+    {from: 629, to: 719},
+    {from: 629, to: 720},
+    {from: 630, to: 672},
+    {from: 630, to: 701},
+    {from: 631, to: 655},
+    {from: 631, to: 722},
+    {from: 631, to: 734},
+    {from: 632, to: 638},
+    {from: 632, to: 639},
+    {from: 632, to: 657},
+    {from: 632, to: 671},
+    {from: 632, to: 715},
+    {from: 632, to: 726},
+    {from: 633, to: 635},
+    {from: 633, to: 636},
+    {from: 633, to: 637},
+    {from: 633, to: 684},
+    {from: 633, to: 688},
+    {from: 633, to: 697},
+    {from: 633, to: 736},
+    {from: 634, to: 711},
+    {from: 635, to: 636},
+    {from: 635, to: 637},
+    {from: 635, to: 684},
+    {from: 635, to: 688},
+    {from: 635, to: 697},
+    {from: 635, to: 736},
+    {from: 636, to: 637},
+    {from: 636, to: 684},
+    {from: 636, to: 688},
+    {from: 636, to: 697},
+    {from: 636, to: 736},
+    {from: 637, to: 684},
+    {from: 637, to: 688},
+    {from: 637, to: 697},
+    {from: 637, to: 736},
+    {from: 638, to: 639},
+    {from: 638, to: 657},
+    {from: 638, to: 671},
+    {from: 638, to: 692},
+    {from: 638, to: 715},
+    {from: 638, to: 723},
+    {from: 638, to: 726},
+    {from: 639, to: 657},
+    {from: 639, to: 671},
+    {from: 639, to: 715},
+    {from: 639, to: 726},
+    {from: 640, to: 641},
+    {from: 640, to: 695},
+    {from: 640, to: 704},
+    {from: 640, to: 708},
+    {from: 640, to: 732},
+    {from: 640, to: 733},
+    {from: 641, to: 695},
+    {from: 641, to: 704},
+    {from: 641, to: 708},
+    {from: 641, to: 709},
+    {from: 641, to: 732},
+    {from: 641, to: 733},
+    {from: 642, to: 645},
+    {from: 642, to: 707},
+    {from: 642, to: 726},
+    {from: 643, to: 644},
+    {from: 643, to: 719},
+    {from: 643, to: 720},
+    {from: 644, to: 719},
+    {from: 644, to: 720},
+    {from: 646, to: 647},
+    {from: 646, to: 650},
+    {from: 646, to: 651},
+    {from: 646, to: 689},
+    {from: 646, to: 713},
+    {from: 646, to: 724},
+    {from: 646, to: 725},
+    {from: 646, to: 729},
+    {from: 646, to: 730},
+    {from: 646, to: 734},
+    {from: 646, to: 735},
+    {from: 647, to: 650},
+    {from: 647, to: 651},
+    {from: 647, to: 689},
+    {from: 647, to: 724},
+    {from: 647, to: 725},
+    {from: 647, to: 729},
+    {from: 647, to: 730},
+    {from: 647, to: 734},
+    {from: 647, to: 735},
+    {from: 648, to: 678},
+    {from: 648, to: 687},
+    {from: 649, to: 682},
+    {from: 649, to: 691},
+    {from: 649, to: 702},
+    {from: 649, to: 706},
+    {from: 650, to: 651},
+    {from: 650, to: 689},
+    {from: 650, to: 724},
+    {from: 650, to: 725},
+    {from: 650, to: 729},
+    {from: 650, to: 730},
+    {from: 650, to: 734},
+    {from: 650, to: 735},
+    {from: 651, to: 689},
+    {from: 651, to: 724},
+    {from: 651, to: 725},
+    {from: 651, to: 729},
+    {from: 651, to: 730},
+    {from: 651, to: 734},
+    {from: 651, to: 735},
+    {from: 652, to: 667},
+    {from: 652, to: 703},
+    {from: 652, to: 716},
+    {from: 653, to: 669},
+    {from: 653, to: 698},
+    {from: 654, to: 667},
+    {from: 654, to: 668},
+    {from: 654, to: 677},
+    {from: 654, to: 679},
+    {from: 654, to: 685},
+    {from: 654, to: 702},
+    {from: 654, to: 707},
+    {from: 655, to: 722},
+    {from: 656, to: 660},
+    {from: 656, to: 674},
+    {from: 656, to: 694},
+    {from: 656, to: 696},
+    {from: 657, to: 671},
+    {from: 657, to: 715},
+    {from: 657, to: 726},
+    {from: 658, to: 731},
+    {from: 659, to: 673},
+    {from: 659, to: 682},
+    {from: 659, to: 714},
+    {from: 660, to: 674},
+    {from: 660, to: 694},
+    {from: 660, to: 696},
+    {from: 661, to: 665},
+    {from: 661, to: 690},
+    {from: 661, to: 692},
+    {from: 661, to: 693},
+    {from: 661, to: 721},
+    {from: 661, to: 723},
+    {from: 662, to: 705},
+    {from: 663, to: 728},
+    {from: 664, to: 670},
+    {from: 664, to: 709},
+    {from: 665, to: 690},
+    {from: 665, to: 692},
+    {from: 665, to: 693},
+    {from: 665, to: 721},
+    {from: 665, to: 723},
+    {from: 667, to: 677},
+    {from: 667, to: 679},
+    {from: 667, to: 685},
+    {from: 667, to: 707},
+    {from: 668, to: 702},
+    {from: 668, to: 713},
+    {from: 669, to: 698},
+    {from: 670, to: 709},
+    {from: 671, to: 715},
+    {from: 671, to: 726},
+    {from: 672, to: 701},
+    {from: 673, to: 682},
+    {from: 673, to: 714},
+    {from: 674, to: 694},
+    {from: 674, to: 696},
+    {from: 675, to: 676},
+    {from: 675, to: 728},
+    {from: 676, to: 699},
+    {from: 676, to: 717},
+    {from: 676, to: 728},
+    {from: 677, to: 679},
+    {from: 677, to: 685},
+    {from: 677, to: 707},
+    {from: 678, to: 687},
+    {from: 678, to: 721},
+    {from: 679, to: 685},
+    {from: 679, to: 707},
+    {from: 680, to: 686},
+    {from: 681, to: 683},
+    {from: 682, to: 714},
+    {from: 684, to: 688},
+    {from: 684, to: 697},
+    {from: 684, to: 736},
+    {from: 685, to: 707},
+    {from: 687, to: 721},
+    {from: 688, to: 697},
+    {from: 688, to: 736},
+    {from: 689, to: 724},
+    {from: 689, to: 725},
+    {from: 689, to: 729},
+    {from: 689, to: 730},
+    {from: 689, to: 734},
+    {from: 689, to: 735},
+    {from: 690, to: 692},
+    {from: 690, to: 693},
+    {from: 690, to: 721},
+    {from: 690, to: 723},
+    {from: 691, to: 702},
+    {from: 691, to: 706},
+    {from: 692, to: 693},
+    {from: 692, to: 721},
+    {from: 692, to: 723},
+    {from: 693, to: 721},
+    {from: 693, to: 723},
+    {from: 694, to: 696},
+    {from: 695, to: 704},
+    {from: 695, to: 708},
+    {from: 695, to: 732},
+    {from: 695, to: 733},
+    {from: 697, to: 736},
+    {from: 699, to: 717},
+    {from: 700, to: 718},
+    {from: 702, to: 706},
+    {from: 703, to: 716},
+    {from: 704, to: 708},
+    {from: 704, to: 732},
+    {from: 704, to: 733},
+    {from: 707, to: 726},
+    {from: 708, to: 732},
+    {from: 708, to: 733},
+    {from: 712, to: 727},
+    {from: 715, to: 726},
+    {from: 719, to: 720},
+    {from: 721, to: 723},
+    {from: 724, to: 725},
+    {from: 724, to: 729},
+    {from: 724, to: 730},
+    {from: 724, to: 734},
+    {from: 724, to: 735},
+    {from: 725, to: 729},
+    {from: 725, to: 730},
+    {from: 725, to: 734},
+    {from: 725, to: 735},
+    {from: 729, to: 730},
+    {from: 729, to: 734},
+    {from: 729, to: 735},
+    {from: 730, to: 734},
+    {from: 730, to: 735},
+    {from: 732, to: 733},
+    {from: 734, to: 735}
+
+      ];
+      // create a network
+
+
+        var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+            shape: 'dot',
+            radiusMin: 10,
+            radiusMax: 30,
+            fontSize: 12,
+            fontFace: "Tahoma"
+            },
+        edges: {
+            width: 0.15,
+            inheritColor: "from"
+            },
+        tooltip: {
+            delay: 200,
+            fontSize: 12,
+            color: {
+                background: "#fff"
+                }
+            },
+          stabilize: false,
+        smoothCurves: {dynamic:false, type: "continuous"},
+        physics: {barnesHut: {gravitationalConstant: -80000, springConstant: 0.001, springLength: 200}},
+        hideEdgesOnDrag: true
+      };
+
+      network = new vis.Network(container, data, options);
+    }
+
+
+    redrawAll()
+
+</script>
+
+
+
+</body></html>
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 1e0283ba..7848d8e0 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -107,7 +107,7 @@ function Network (container, data, options) {
         gap: 5,
         altLength: undefined
       },
-      inheritColor: false // to, from, false, true (== from)
+      inheritColor: "from" // to, from, false, true (== from)
     },
     configurePhysics:false,
     physics: {
diff --git a/lib/network/mixins/physics/PhysicsMixin.js b/lib/network/mixins/physics/PhysicsMixin.js
index 18c4de5e..404dd150 100644
--- a/lib/network/mixins/physics/PhysicsMixin.js
+++ b/lib/network/mixins/physics/PhysicsMixin.js
@@ -95,7 +95,7 @@ exports._calculateForces = function () {
   this._calculateGravitationalForces();
   this._calculateNodeForces();
 
-  if (this.constants.springConstant > 0) {
+  if (this.constants.physics.springConstant > 0) {
     if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
       this._calculateSpringForcesWithSupport();
     }

From 13427a76f3ab2265ccb0513e21d74df94c58c6ac Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Fri, 11 Jul 2014 16:20:33 +0200
Subject: [PATCH 2/6] added roundness explaination in example 27

---
 examples/network/27_world_cup_network.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/network/27_world_cup_network.html b/examples/network/27_world_cup_network.html
index 6f4d7844..a081e254 100644
--- a/examples/network/27_world_cup_network.html
+++ b/examples/network/27_world_cup_network.html
@@ -47,7 +47,7 @@ inheritColor option:
     <option value="to">to</option>
     <option value="false">false</option>
 </select><br/>
-Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5">
+Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
 <br />
 Hide edges on drag: <input type="checkbox" checked="checked" id="hideEdgesOnDrag"><br/>
 Hide nodes on drag: <input type="checkbox"  id="hideNodesOnDrag">

From 00e0718ed93242f8202fd2ee8a86c5126e7ac28d Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Fri, 11 Jul 2014 16:28:43 +0200
Subject: [PATCH 3/6] updated max velocity

---
 dist/vis.js            | 28698 +++++++++++++++++++--------------------
 lib/network/Network.js |     2 +-
 2 files changed, 14350 insertions(+), 14350 deletions(-)

diff --git a/dist/vis.js b/dist/vis.js
index 7c960390..0b7be4d4 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -123,12 +123,12 @@ return /******/ (function(modules) { // webpackBootstrap
   // Network
   exports.Network = __webpack_require__(37);
   exports.network = {
-    Edge: __webpack_require__(43),
+    Edge: __webpack_require__(38),
     Groups: __webpack_require__(40),
     Images: __webpack_require__(41),
-    Node: __webpack_require__(42),
-    Popup: __webpack_require__(44),
-    dotparser: __webpack_require__(39)
+    Node: __webpack_require__(39),
+    Popup: __webpack_require__(42),
+    dotparser: __webpack_require__(43)
   };
 
   // Deprecated since v3.0.0
@@ -5490,154 +5490,154 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ function(module, exports, __webpack_require__) {
 
   var map = {
-  	"./ar": 56,
-  	"./ar-ma": 54,
-  	"./ar-ma.js": 54,
-  	"./ar-sa": 55,
-  	"./ar-sa.js": 55,
-  	"./ar.js": 56,
-  	"./az": 57,
-  	"./az.js": 57,
-  	"./bg": 58,
-  	"./bg.js": 58,
-  	"./bn": 59,
-  	"./bn.js": 59,
-  	"./br": 60,
-  	"./br.js": 60,
-  	"./bs": 61,
-  	"./bs.js": 61,
-  	"./ca": 62,
-  	"./ca.js": 62,
-  	"./cs": 63,
-  	"./cs.js": 63,
-  	"./cv": 64,
-  	"./cv.js": 64,
-  	"./cy": 65,
-  	"./cy.js": 65,
-  	"./da": 66,
-  	"./da.js": 66,
-  	"./de": 68,
-  	"./de-at": 67,
-  	"./de-at.js": 67,
-  	"./de.js": 68,
-  	"./el": 69,
-  	"./el.js": 69,
-  	"./en-au": 70,
-  	"./en-au.js": 70,
-  	"./en-ca": 71,
-  	"./en-ca.js": 71,
-  	"./en-gb": 72,
-  	"./en-gb.js": 72,
-  	"./eo": 73,
-  	"./eo.js": 73,
-  	"./es": 74,
-  	"./es.js": 74,
-  	"./et": 75,
-  	"./et.js": 75,
-  	"./eu": 76,
-  	"./eu.js": 76,
-  	"./fa": 77,
-  	"./fa.js": 77,
-  	"./fi": 78,
-  	"./fi.js": 78,
-  	"./fo": 79,
-  	"./fo.js": 79,
-  	"./fr": 81,
-  	"./fr-ca": 80,
-  	"./fr-ca.js": 80,
-  	"./fr.js": 81,
-  	"./gl": 82,
-  	"./gl.js": 82,
-  	"./he": 83,
-  	"./he.js": 83,
-  	"./hi": 84,
-  	"./hi.js": 84,
-  	"./hr": 85,
-  	"./hr.js": 85,
-  	"./hu": 86,
-  	"./hu.js": 86,
-  	"./hy-am": 87,
-  	"./hy-am.js": 87,
-  	"./id": 88,
-  	"./id.js": 88,
-  	"./is": 89,
-  	"./is.js": 89,
-  	"./it": 90,
-  	"./it.js": 90,
-  	"./ja": 91,
-  	"./ja.js": 91,
-  	"./ka": 92,
-  	"./ka.js": 92,
-  	"./km": 93,
-  	"./km.js": 93,
-  	"./ko": 94,
-  	"./ko.js": 94,
-  	"./lb": 95,
-  	"./lb.js": 95,
-  	"./lt": 96,
-  	"./lt.js": 96,
-  	"./lv": 97,
-  	"./lv.js": 97,
-  	"./mk": 98,
-  	"./mk.js": 98,
-  	"./ml": 99,
-  	"./ml.js": 99,
-  	"./mr": 100,
-  	"./mr.js": 100,
-  	"./ms-my": 101,
-  	"./ms-my.js": 101,
-  	"./nb": 102,
-  	"./nb.js": 102,
-  	"./ne": 103,
-  	"./ne.js": 103,
-  	"./nl": 104,
-  	"./nl.js": 104,
-  	"./nn": 105,
-  	"./nn.js": 105,
-  	"./pl": 106,
-  	"./pl.js": 106,
-  	"./pt": 108,
-  	"./pt-br": 107,
-  	"./pt-br.js": 107,
-  	"./pt.js": 108,
-  	"./ro": 109,
-  	"./ro.js": 109,
-  	"./ru": 110,
-  	"./ru.js": 110,
-  	"./sk": 111,
-  	"./sk.js": 111,
-  	"./sl": 112,
-  	"./sl.js": 112,
-  	"./sq": 113,
-  	"./sq.js": 113,
-  	"./sr": 115,
-  	"./sr-cyrl": 114,
-  	"./sr-cyrl.js": 114,
-  	"./sr.js": 115,
-  	"./sv": 116,
-  	"./sv.js": 116,
-  	"./ta": 117,
-  	"./ta.js": 117,
-  	"./th": 118,
-  	"./th.js": 118,
-  	"./tl-ph": 119,
-  	"./tl-ph.js": 119,
-  	"./tr": 120,
-  	"./tr.js": 120,
-  	"./tzm": 122,
-  	"./tzm-latn": 121,
-  	"./tzm-latn.js": 121,
-  	"./tzm.js": 122,
-  	"./uk": 123,
-  	"./uk.js": 123,
-  	"./uz": 124,
-  	"./uz.js": 124,
-  	"./vi": 125,
-  	"./vi.js": 125,
-  	"./zh-cn": 126,
-  	"./zh-cn.js": 126,
-  	"./zh-tw": 127,
-  	"./zh-tw.js": 127
+  	"./ar": 46,
+  	"./ar-ma": 44,
+  	"./ar-ma.js": 44,
+  	"./ar-sa": 45,
+  	"./ar-sa.js": 45,
+  	"./ar.js": 46,
+  	"./az": 47,
+  	"./az.js": 47,
+  	"./bg": 48,
+  	"./bg.js": 48,
+  	"./bn": 49,
+  	"./bn.js": 49,
+  	"./br": 50,
+  	"./br.js": 50,
+  	"./bs": 51,
+  	"./bs.js": 51,
+  	"./ca": 52,
+  	"./ca.js": 52,
+  	"./cs": 53,
+  	"./cs.js": 53,
+  	"./cv": 54,
+  	"./cv.js": 54,
+  	"./cy": 55,
+  	"./cy.js": 55,
+  	"./da": 56,
+  	"./da.js": 56,
+  	"./de": 58,
+  	"./de-at": 57,
+  	"./de-at.js": 57,
+  	"./de.js": 58,
+  	"./el": 59,
+  	"./el.js": 59,
+  	"./en-au": 60,
+  	"./en-au.js": 60,
+  	"./en-ca": 61,
+  	"./en-ca.js": 61,
+  	"./en-gb": 62,
+  	"./en-gb.js": 62,
+  	"./eo": 63,
+  	"./eo.js": 63,
+  	"./es": 64,
+  	"./es.js": 64,
+  	"./et": 65,
+  	"./et.js": 65,
+  	"./eu": 66,
+  	"./eu.js": 66,
+  	"./fa": 67,
+  	"./fa.js": 67,
+  	"./fi": 68,
+  	"./fi.js": 68,
+  	"./fo": 69,
+  	"./fo.js": 69,
+  	"./fr": 71,
+  	"./fr-ca": 70,
+  	"./fr-ca.js": 70,
+  	"./fr.js": 71,
+  	"./gl": 72,
+  	"./gl.js": 72,
+  	"./he": 73,
+  	"./he.js": 73,
+  	"./hi": 74,
+  	"./hi.js": 74,
+  	"./hr": 75,
+  	"./hr.js": 75,
+  	"./hu": 76,
+  	"./hu.js": 76,
+  	"./hy-am": 77,
+  	"./hy-am.js": 77,
+  	"./id": 78,
+  	"./id.js": 78,
+  	"./is": 79,
+  	"./is.js": 79,
+  	"./it": 80,
+  	"./it.js": 80,
+  	"./ja": 81,
+  	"./ja.js": 81,
+  	"./ka": 82,
+  	"./ka.js": 82,
+  	"./km": 83,
+  	"./km.js": 83,
+  	"./ko": 84,
+  	"./ko.js": 84,
+  	"./lb": 85,
+  	"./lb.js": 85,
+  	"./lt": 86,
+  	"./lt.js": 86,
+  	"./lv": 87,
+  	"./lv.js": 87,
+  	"./mk": 88,
+  	"./mk.js": 88,
+  	"./ml": 89,
+  	"./ml.js": 89,
+  	"./mr": 90,
+  	"./mr.js": 90,
+  	"./ms-my": 91,
+  	"./ms-my.js": 91,
+  	"./nb": 92,
+  	"./nb.js": 92,
+  	"./ne": 93,
+  	"./ne.js": 93,
+  	"./nl": 94,
+  	"./nl.js": 94,
+  	"./nn": 95,
+  	"./nn.js": 95,
+  	"./pl": 96,
+  	"./pl.js": 96,
+  	"./pt": 98,
+  	"./pt-br": 97,
+  	"./pt-br.js": 97,
+  	"./pt.js": 98,
+  	"./ro": 99,
+  	"./ro.js": 99,
+  	"./ru": 100,
+  	"./ru.js": 100,
+  	"./sk": 101,
+  	"./sk.js": 101,
+  	"./sl": 102,
+  	"./sl.js": 102,
+  	"./sq": 103,
+  	"./sq.js": 103,
+  	"./sr": 105,
+  	"./sr-cyrl": 104,
+  	"./sr-cyrl.js": 104,
+  	"./sr.js": 105,
+  	"./sv": 106,
+  	"./sv.js": 106,
+  	"./ta": 107,
+  	"./ta.js": 107,
+  	"./th": 108,
+  	"./th.js": 108,
+  	"./tl-ph": 109,
+  	"./tl-ph.js": 109,
+  	"./tr": 110,
+  	"./tr.js": 110,
+  	"./tzm": 112,
+  	"./tzm-latn": 111,
+  	"./tzm-latn.js": 111,
+  	"./tzm.js": 112,
+  	"./uk": 113,
+  	"./uk.js": 113,
+  	"./uz": 114,
+  	"./uz.js": 114,
+  	"./vi": 115,
+  	"./vi.js": 115,
+  	"./zh-cn": 116,
+  	"./zh-cn.js": 116,
+  	"./zh-tw": 117,
+  	"./zh-tw.js": 117
   };
   function webpackContext(req) {
   	return __webpack_require__(webpackContextResolve(req));
@@ -19077,20 +19077,20 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(3);
-  var mousetrap = __webpack_require__(38);
+  var mousetrap = __webpack_require__(118);
   var util = __webpack_require__(1);
   var DataSet = __webpack_require__(9);
   var DataView = __webpack_require__(10);
-  var dotparser = __webpack_require__(39);
+  var dotparser = __webpack_require__(43);
   var Groups = __webpack_require__(40);
   var Images = __webpack_require__(41);
-  var Node = __webpack_require__(42);
-  var Edge = __webpack_require__(43);
-  var Popup = __webpack_require__(44);
-  var MixinLoader = __webpack_require__(45);
+  var Node = __webpack_require__(39);
+  var Edge = __webpack_require__(38);
+  var Popup = __webpack_require__(42);
+  var MixinLoader = __webpack_require__(119);
 
   // Load custom shapes into CanvasRenderingContext2D
-  __webpack_require__(53);
+  __webpack_require__(130);
 
   /**
    * @constructor Network
@@ -19263,7 +19263,7 @@ return /******/ (function(modules) { // webpackBootstrap
         roundness: 0.5
       },
       dynamicSmoothCurves: true,
-      maxVelocity:  10,
+      maxVelocity:  30,
       minVelocity:  0.1,   // px/s
       stabilizationIterations: 1000,  // maximum number of iteration to stabilize
       labels:{
@@ -21425,16125 +21425,16125 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 38 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(39);
+
   /**
-   * Copyright 2012 Craig Campbell
-   *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   * http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Mousetrap is a simple keyboard shortcut library for Javascript with
-   * no external dependencies
+   * @class Edge
    *
-   * @version 1.1.2
-   * @url craig.is/killing/mice
+   * A edge connects two nodes
+   * @param {Object} properties     Object with properties. Must contain
+   *                                At least properties from and to.
+   *                                Available properties: from (number),
+   *                                to (number), label (string, color (string),
+   *                                width (number), style (string),
+   *                                length (number), title (string)
+   * @param {Network} network       A Network object, used to find and edge to
+   *                                nodes.
+   * @param {Object} constants      An object with default values for
+   *                                example for the color
    */
+  function Edge (properties, network, constants) {
+    if (!network) {
+      throw "No network provided";
+    }
+    this.network = network;
 
-    /**
-     * mapping of special keycodes to their corresponding keys
-     *
-     * everything in this dictionary cannot use keypress events
-     * so it has to be here to map to the correct keycodes for
-     * keyup/keydown events
-     *
-     * @type {Object}
-     */
-    var _MAP = {
-            8: 'backspace',
-            9: 'tab',
-            13: 'enter',
-            16: 'shift',
-            17: 'ctrl',
-            18: 'alt',
-            20: 'capslock',
-            27: 'esc',
-            32: 'space',
-            33: 'pageup',
-            34: 'pagedown',
-            35: 'end',
-            36: 'home',
-            37: 'left',
-            38: 'up',
-            39: 'right',
-            40: 'down',
-            45: 'ins',
-            46: 'del',
-            91: 'meta',
-            93: 'meta',
-            224: 'meta'
-        },
-
-        /**
-         * mapping for special characters so they can support
-         *
-         * this dictionary is only used incase you want to bind a
-         * keyup or keydown event to one of these keys
-         *
-         * @type {Object}
-         */
-        _KEYCODE_MAP = {
-            106: '*',
-            107: '+',
-            109: '-',
-            110: '.',
-            111 : '/',
-            186: ';',
-            187: '=',
-            188: ',',
-            189: '-',
-            190: '.',
-            191: '/',
-            192: '`',
-            219: '[',
-            220: '\\',
-            221: ']',
-            222: '\''
-        },
-
-        /**
-         * this is a mapping of keys that require shift on a US keypad
-         * back to the non shift equivelents
-         *
-         * this is so you can use keyup events with these keys
-         *
-         * note that this will only work reliably on US keyboards
-         *
-         * @type {Object}
-         */
-        _SHIFT_MAP = {
-            '~': '`',
-            '!': '1',
-            '@': '2',
-            '#': '3',
-            '$': '4',
-            '%': '5',
-            '^': '6',
-            '&': '7',
-            '*': '8',
-            '(': '9',
-            ')': '0',
-            '_': '-',
-            '+': '=',
-            ':': ';',
-            '\"': '\'',
-            '<': ',',
-            '>': '.',
-            '?': '/',
-            '|': '\\'
-        },
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
 
-        /**
-         * this is a list of special strings you can use to map
-         * to modifier keys when you specify your keyboard shortcuts
-         *
-         * @type {Object}
-         */
-        _SPECIAL_ALIASES = {
-            'option': 'alt',
-            'command': 'meta',
-            'return': 'enter',
-            'escape': 'esc'
-        },
+    // initialize variables
+    this.id     = undefined;
+    this.fromId = undefined;
+    this.toId   = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+    this.hoverWidth = constants.edges.hoverWidth;
+    this.value  = undefined;
+    this.length = constants.physics.springLength;
+    this.customLength = false;
+    this.selected = false;
+    this.hover = false;
+    this.smoothCurves = constants.smoothCurves;
+    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
+    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
+    this.inheritColor = constants.edges.inheritColor;
 
-        /**
-         * variable to store the flipped version of _MAP from above
-         * needed to check if we should use keypress or not when no action
-         * is specified
-         *
-         * @type {Object|undefined}
-         */
-        _REVERSE_MAP,
+    this.from = null;   // a node
+    this.to = null;     // a node
+    this.via = null;    // a temp node
 
-        /**
-         * a list of all the callbacks setup via Mousetrap.bind()
-         *
-         * @type {Object}
-         */
-        _callbacks = {},
+    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+    // by storing the original information we can revert to the original connection when the cluser is opened.
+    this.originalFromId = [];
+    this.originalToId = [];
 
-        /**
-         * direct map of string combinations to callbacks used for trigger()
-         *
-         * @type {Object}
-         */
-        _direct_map = {},
+    this.connected = false;
 
-        /**
-         * keeps track of what level each sequence is at since multiple
-         * sequences can start out with the same sequence
-         *
-         * @type {Object}
-         */
-        _sequence_levels = {},
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-        /**
-         * variable to store the setTimeout call
-         *
-         * @type {null|number}
-         */
-        _reset_timer,
+    this.color       = {color:constants.edges.color.color,
+                        highlight:constants.edges.color.highlight,
+                        hover:constants.edges.color.hover};
+    this.widthFixed  = false;
+    this.lengthFixed = false;
 
-        /**
-         * temporary state where we will ignore the next keyup
-         *
-         * @type {boolean|string}
-         */
-        _ignore_next_keyup = false,
+    this.setProperties(properties, constants);
 
-        /**
-         * are we currently inside of a sequence?
-         * type of action ("keyup" or "keydown" or "keypress") or false
-         *
-         * @type {boolean|string}
-         */
-        _inside_sequence = false;
+    this.controlNodesEnabled = false;
+    this.controlNodes = {from:null, to:null, positions:{}};
+    this.connectedNode = null;
+  }
 
-    /**
-     * loop through the f keys, f1 to f19 and add them to the map
-     * programatically
-     */
-    for (var i = 1; i < 20; ++i) {
-        _MAP[111 + i] = 'f' + i;
+  /**
+   * Set or overwrite properties for the edge
+   * @param {Object} properties  an object with properties
+   * @param {Object} constants   and object with default, global properties
+   */
+  Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
     }
 
-    /**
-     * loop through to map numbers on the numeric keypad
-     */
-    for (i = 0; i <= 9; ++i) {
-        _MAP[i + 96] = i;
-    }
+    if (properties.from !== undefined)           {this.fromId = properties.from;}
+    if (properties.to !== undefined)             {this.toId = properties.to;}
 
-    /**
-     * cross browser add event method
-     *
-     * @param {Element|HTMLDocument} object
-     * @param {string} type
-     * @param {Function} callback
-     * @returns void
-     */
-    function _addEvent(object, type, callback) {
-        if (object.addEventListener) {
-            return object.addEventListener(type, callback, false);
-        }
+    if (properties.id !== undefined)             {this.id = properties.id;}
+    if (properties.style !== undefined)          {this.style = properties.style;}
+    if (properties.label !== undefined)          {this.label = properties.label;}
 
-        object.attachEvent('on' + type, callback);
+    if (this.label) {
+      this.fontSize = constants.edges.fontSize;
+      this.fontFace = constants.edges.fontFace;
+      this.fontColor = constants.edges.fontColor;
+      this.fontFill = constants.edges.fontFill;
+
+      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
+      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
+      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
+      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
     }
 
-    /**
-     * takes the event and returns the key character
-     *
-     * @param {Event} e
-     * @return {string}
-     */
-    function _characterFromEvent(e) {
+    if (properties.title !== undefined)        {this.title = properties.title;}
+    if (properties.width !== undefined)        {this.width = properties.width;}
+    if (properties.widthSelectionMultiplier !== undefined)
+                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
+    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
+    if (properties.value !== undefined)        {this.value = properties.value;}
+    if (properties.length !== undefined)       {this.length = properties.length;
+                                                this.customLength = true;}
 
-        // for keypress events we should return the character as is
-        if (e.type == 'keypress') {
-            return String.fromCharCode(e.which);
-        }
+    // scale the arrow
+    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
 
-        // for non keypress events the special maps are needed
-        if (_MAP[e.which]) {
-            return _MAP[e.which];
-        }
+    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
 
-        if (_KEYCODE_MAP[e.which]) {
-            return _KEYCODE_MAP[e.which];
-        }
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dash) {
+      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
+      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
+      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+    }
 
-        // if it is not in the special map
-        return String.fromCharCode(e.which).toLowerCase();
+    if (properties.color !== undefined) {
+      if (util.isString(properties.color)) {
+        this.color.color = properties.color;
+        this.color.highlight = properties.color;
+      }
+      else {
+        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
+      }
     }
 
-    /**
-     * should we stop this event before firing off callbacks
-     *
-     * @param {Event} e
-     * @return {boolean}
-     */
-    function _stop(e) {
-        var element = e.target || e.srcElement,
-            tag_name = element.tagName;
+    // A node is connected when it has a from and to node.
+    this.connect();
 
-        // if the element has the class "mousetrap" then no need to stop
-        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
-            return false;
-        }
+    this.widthFixed = this.widthFixed || (properties.width !== undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
 
-        // stop for input, select, and textarea
-        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
-    }
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
 
-    /**
-     * checks if two arrays are equal
-     *
-     * @param {Array} modifiers1
-     * @param {Array} modifiers2
-     * @returns {boolean}
-     */
-    function _modifiersMatch(modifiers1, modifiers2) {
-        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
+    // set draw method based on style
+    switch (this.style) {
+      case 'line':          this.draw = this._drawLine; break;
+      case 'arrow':         this.draw = this._drawArrow; break;
+      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
+      case 'dash-line':     this.draw = this._drawDashLine; break;
+      default:              this.draw = this._drawLine; break;
     }
+  };
 
-    /**
-     * resets all sequence counters except for the ones passed in
-     *
-     * @param {Object} do_not_reset
-     * @returns void
-     */
-    function _resetSequences(do_not_reset) {
-        do_not_reset = do_not_reset || {};
+  /**
+   * Connect an edge to its nodes
+   */
+  Edge.prototype.connect = function () {
+    this.disconnect();
 
-        var active_sequences = false,
-            key;
+    this.from = this.network.nodes[this.fromId] || null;
+    this.to = this.network.nodes[this.toId] || null;
+    this.connected = (this.from && this.to);
 
-        for (key in _sequence_levels) {
-            if (do_not_reset[key]) {
-                active_sequences = true;
-                continue;
-            }
-            _sequence_levels[key] = 0;
-        }
+    if (this.connected) {
+      this.from.attachEdge(this);
+      this.to.attachEdge(this);
+    }
+    else {
+      if (this.from) {
+        this.from.detachEdge(this);
+      }
+      if (this.to) {
+        this.to.detachEdge(this);
+      }
+    }
+  };
 
-        if (!active_sequences) {
-            _inside_sequence = false;
-        }
+  /**
+   * Disconnect an edge from its nodes
+   */
+  Edge.prototype.disconnect = function () {
+    if (this.from) {
+      this.from.detachEdge(this);
+      this.from = null;
+    }
+    if (this.to) {
+      this.to.detachEdge(this);
+      this.to = null;
     }
 
-    /**
-     * finds all callbacks that match based on the keycode, modifiers,
-     * and action
-     *
-     * @param {string} character
-     * @param {Array} modifiers
-     * @param {string} action
-     * @param {boolean=} remove - should we remove any matches
-     * @param {string=} combination
-     * @returns {Array}
-     */
-    function _getMatches(character, modifiers, action, remove, combination) {
-        var i,
-            callback,
-            matches = [];
+    this.connected = false;
+  };
 
-        // if there are no events related to this keycode
-        if (!_callbacks[character]) {
-            return [];
-        }
+  /**
+   * get the title of this edge.
+   * @return {string} title    The title of the edge, or undefined when no title
+   *                           has been set.
+   */
+  Edge.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-        // if a modifier key is coming up on its own we should allow it
-        if (action == 'keyup' && _isModifier(character)) {
-            modifiers = [character];
-        }
 
-        // loop through all callbacks for the key that was pressed
-        // and see if any of them match
-        for (i = 0; i < _callbacks[character].length; ++i) {
-            callback = _callbacks[character][i];
+  /**
+   * Retrieve the value of the edge. Can be undefined
+   * @return {Number} value
+   */
+  Edge.prototype.getValue = function() {
+    return this.value;
+  };
 
-            // if this is a sequence but it is not at the right level
-            // then move onto the next match
-            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
-                continue;
-            }
+  /**
+   * Adjust the value range of the edge. The edge will adjust it's width
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
+   */
+  Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+      var scale = (this.widthMax - this.widthMin) / (max - min);
+      this.width = (this.value - min) * scale + this.widthMin;
+    }
+  };
 
-            // if the action we are looking for doesn't match the action we got
-            // then we should keep going
-            if (action != callback.action) {
-                continue;
-            }
+  /**
+   * Redraw a edge
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
+  };
 
-            // if this is a keypress event that means that we need to only
-            // look at the character, otherwise check the modifiers as
-            // well
-            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
+  /**
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top
+   * @return {boolean}     True if location is located on the edge
+   */
+  Edge.prototype.isOverlappingWith = function(obj) {
+    if (this.connected) {
+      var distMax = 10;
+      var xFrom = this.from.x;
+      var yFrom = this.from.y;
+      var xTo = this.to.x;
+      var yTo = this.to.y;
+      var xObj = obj.left;
+      var yObj = obj.top;
 
-                // remove is used so if you change your mind and call bind a
-                // second time with a new function the first one is overwritten
-                if (remove && callback.combo == combination) {
-                    _callbacks[character].splice(i, 1);
-                }
+      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
 
-                matches.push(callback);
-            }
-        }
+      return (dist < distMax);
+    }
+    else {
+      return false
+    }
+  };
 
-        return matches;
+  Edge.prototype._getColor = function() {
+    var colorObj = this.color;
+    if (this.inheritColor == "to") {
+      colorObj = {
+        highlight: this.to.color.highlight.border,
+        hover: this.to.color.hover.border,
+        color: this.to.color.border
+      };
+    }
+    else if (this.inheritColor == "from" || this.inheritColor == true) {
+      colorObj = {
+        highlight: this.from.color.highlight.border,
+        hover: this.from.color.hover.border,
+        color: this.from.color.border
+      };
     }
 
-    /**
-     * takes a key event and figures out what the modifiers are
-     *
-     * @param {Event} e
-     * @returns {Array}
-     */
-    function _eventModifiers(e) {
-        var modifiers = [];
+    if (this.selected == true)   {return colorObj.highlight;}
+    else if (this.hover == true) {return colorObj.hover;}
+    else                         {return colorObj.color;}
+  }
 
-        if (e.shiftKey) {
-            modifiers.push('shift');
-        }
 
-        if (e.altKey) {
-            modifiers.push('alt');
-        }
+  /**
+   * Redraw a edge as a line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this._getColor();
+    ctx.lineWidth   = this._getLineWidth();
 
-        if (e.ctrlKey) {
-            modifiers.push('ctrl');
-        }
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-        if (e.metaKey) {
-            modifiers.push('meta');
+      // draw label
+      var point;
+      if (this.label) {
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
         }
-
-        return modifiers;
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      var x, y;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      this._circle(ctx, x, y, radius);
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      this._label(ctx, this.label, point.x, point.y);
     }
+  };
 
-    /**
-     * actually calls the callback function
-     *
-     * if your callback function returns false this will use the jquery
-     * convention - prevent default and stop propogation on the event
-     *
-     * @param {Function} callback
-     * @param {Event} e
-     * @returns void
-     */
-    function _fireCallback(callback, e) {
-        if (callback(e) === false) {
-            if (e.preventDefault) {
-                e.preventDefault();
-            }
+  /**
+   * Get the line width of the edge. Depends on width and whether one of the
+   * connected nodes is selected.
+   * @return {Number} width
+   * @private
+   */
+  Edge.prototype._getLineWidth = function() {
+    if (this.selected == true) {
+      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
+    }
+    else {
+      if (this.hover == true) {
+        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
+      }
+      else {
+        return this.width*this.networkScaleInv;
+      }
+    }
+  };
 
-            if (e.stopPropagation) {
-                e.stopPropagation();
-            }
+  Edge.prototype._getViaCoordinates = function () {
+    var xVia = null;
+    var yVia = null;
+    var factor = this.smoothCurves.roundness;
+    var type = this.smoothCurves.type;
+    if (factor == 0) {
+      return {x:null,y:null};
+    }
 
-            e.returnValue = false;
-            e.cancelBubble = true;
+    var dx = Math.abs(this.from.x - this.to.x);
+    var dy = Math.abs(this.from.y - this.to.y);
+    if (type == 'discrete' || type == 'diagonalCross') {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+          }
+        }
+        if (type == "discrete") {
+          xVia = dx < factor * dy ? this.from.x : xVia;
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
         }
+        if (type == "discrete") {
+          yVia = dy < factor * dx ? this.from.y : yVia;
+        }
+      }
     }
-
-    /**
-     * handles a character key event
-     *
-     * @param {string} character
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleCharacter(character, e) {
-
-        // if this event should not happen stop here
-        if (_stop(e)) {
-            return;
+    else if (type == "straightCross") {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        xVia = this.from.x;
+        yVia = this.to.y
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        xVia = this.to.x;
+        yVia = this.from.y;
+      }
+    }
+    else if (type == 'horizontal') {
+      xVia = this.to.x;
+      yVia = this.from.y;
+    }
+    else if (type == 'vertical') {
+      xVia = this.from.x;
+      yVia = this.to.y;
+    }
+    else { // continuous
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(1)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(2)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x > xVia ? this.to.x :xVia;
+          }
         }
-
-        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
-            i,
-            do_not_reset = {},
-            processed_sequence_callback = false;
-
-        // loop through matching callbacks for this key event
-        for (i = 0; i < callbacks.length; ++i) {
-
-            // fire for all sequence callbacks
-            // this is because if for example you have multiple sequences
-            // bound such as "g i" and "g t" they both need to fire the
-            // callback for matching g cause otherwise you can only ever
-            // match the first one
-            if (callbacks[i].seq) {
-                processed_sequence_callback = true;
-
-                // keep a list of which sequences were matches for later
-                do_not_reset[callbacks[i].seq] = 1;
-                _fireCallback(callbacks[i].callback, e);
-                continue;
-            }
-
-            // if there were no sequence matches but we are still here
-            // that means this is a regular match so we should fire that
-            if (!processed_sequence_callback && !_inside_sequence) {
-                _fireCallback(callbacks[i].callback, e);
-            }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(3)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(4, this.from.x, this.to.x)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x > xVia ? this.to.x : xVia;
+          }
         }
-
-        // if you are inside of a sequence and the key you are pressing
-        // is not a modifier key then we should reset all sequences
-        // that were not matched by this key event
-        if (e.type == _inside_sequence && !_isModifier(character)) {
-            _resetSequences(do_not_reset);
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(5)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(6)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(7)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(8)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
         }
+      }
     }
 
-    /**
-     * handles a keydown event
-     *
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleKey(e) {
-
-        // normalize e.which for key events
-        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
-        e.which = typeof e.which == "number" ? e.which : e.keyCode;
 
-        var character = _characterFromEvent(e);
+    return {x:xVia, y:yVia};
+  }
 
-        // no character found then stop
-        if (!character) {
-            return;
+  /**
+   * Draw a line between two nodes
+   * @param {CanvasRenderingContext2D} ctx
+   * @private
+   */
+  Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    if (this.smoothCurves.enabled == true) {
+      if (this.smoothCurves.dynamic == false) {
+        var via = this._getViaCoordinates();
+        if (via.x == null) {
+          ctx.lineTo(this.to.x, this.to.y);
+          ctx.stroke();
+          return null;
         }
-
-        if (e.type == 'keyup' && _ignore_next_keyup == character) {
-            _ignore_next_keyup = false;
-            return;
+        else {
+  //        this.via.x = via.x;
+  //        this.via.y = via.y;
+          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+          ctx.stroke();
+          return via;
         }
-
-        _handleCharacter(character, e);
+      }
+      else {
+        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+        ctx.stroke();
+        return this.via;
+      }
     }
-
-    /**
-     * determines if the keycode specified is a modifier key or not
-     *
-     * @param {string} key
-     * @returns {boolean}
-     */
-    function _isModifier(key) {
-        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
+    else {
+      ctx.lineTo(this.to.x, this.to.y);
+      ctx.stroke();
+      return null;
     }
+  };
 
-    /**
-     * called to set a 1 second timeout on the specified sequence
-     *
-     * this is so after each key press in the sequence you have 1 second
-     * to press the next key before you have to start over
-     *
-     * @returns void
-     */
-    function _resetSequenceTimer() {
-        clearTimeout(_reset_timer);
-        _reset_timer = setTimeout(_resetSequences, 1000);
-    }
+  /**
+   * Draw a line from a node to itself, a circle
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @private
+   */
+  Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
+  };
 
-    /**
-     * reverses the map lookup so that we can look for specific keys
-     * to see what can and can't use keypress
-     *
-     * @return {Object}
-     */
-    function _getReverseMap() {
-        if (!_REVERSE_MAP) {
-            _REVERSE_MAP = {};
-            for (var key in _MAP) {
+  /**
+   * Draw label with white background and with the middle at (x, y)
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {Number} x
+   * @param {Number} y
+   * @private
+   */
+  Edge.prototype._label = function (ctx, text, x, y) {
+    if (text) {
+      // TODO: cache the calculated size
+      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+          this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontFill;
+      var width = ctx.measureText(text).width;
+      var height = this.fontSize;
+      var left = x - width / 2;
+      var top = y - height / 2;
 
-                // pull out the numeric keypad from here cause keypress should
-                // be able to detect the keys from the character
-                if (key > 95 && key < 112) {
-                    continue;
-                }
+      ctx.fillRect(left, top, width, height);
 
-                if (_MAP.hasOwnProperty(key)) {
-                    _REVERSE_MAP[_MAP[key]] = key;
-                }
-            }
-        }
-        return _REVERSE_MAP;
+      // draw text
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillText(text, left, top);
     }
+  };
 
-    /**
-     * picks the best action based on the key combination
-     *
-     * @param {string} key - character for key
-     * @param {Array} modifiers
-     * @param {string=} action passed in
-     */
-    function _pickBestAction(key, modifiers, action) {
+  /**
+   * Redraw a edge as a dashed line
+   * Draw this edge in the given canvas
+   * @author David Jordan
+   * @date 2012-08-08
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;}
 
-        // if no action was picked in we should try to pick the one
-        // that we think would work best for this key
-        if (!action) {
-            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
-        }
+    ctx.lineWidth = this._getLineWidth();
 
-        // modifier keys don't work as expected with keypress,
-        // switch to keydown
-        if (action == 'keypress' && modifiers.length) {
-            action = 'keydown';
-        }
+    var via = null;
+    // only firefox and chrome support this method, else we use the legacy one.
+    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+      // configure the dash pattern
+      var pattern = [0];
+      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
+        pattern = [this.dash.length,this.dash.gap];
+      }
+      else {
+        pattern = [5,5];
+      }
 
-        return action;
-    }
+      // set dash settings for chrome or firefox
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash(pattern);
+        ctx.lineDashOffset = 0;
 
-    /**
-     * binds a key sequence to an event
-     *
-     * @param {string} combo - combo specified in bind call
-     * @param {Array} keys
-     * @param {Function} callback
-     * @param {string=} action
-     * @returns void
-     */
-    function _bindSequence(combo, keys, callback, action) {
-
-        // start off by adding a sequence level record for this combination
-        // and setting the level to 0
-        _sequence_levels[combo] = 0;
-
-        // if there is no action pick the best one for the first key
-        // in the sequence
-        if (!action) {
-            action = _pickBestAction(keys[0], []);
-        }
+      } else { //Firefox
+        ctx.mozDash = pattern;
+        ctx.mozDashOffset = 0;
+      }
 
-        /**
-         * callback to increase the sequence level for this sequence and reset
-         * all other sequences that were active
-         *
-         * @param {Event} e
-         * @returns void
-         */
-        var _increaseSequence = function(e) {
-                _inside_sequence = action;
-                ++_sequence_levels[combo];
-                _resetSequenceTimer();
-            },
+      // draw the line
+      via = this._line(ctx);
 
-            /**
-             * wraps the specified callback inside of another function in order
-             * to reset all sequence counters as soon as this sequence is done
-             *
-             * @param {Event} e
-             * @returns void
-             */
-            _callbackAndReset = function(e) {
-                _fireCallback(callback, e);
+      // restore the dash settings.
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash([0]);
+        ctx.lineDashOffset = 0;
 
-                // we should ignore the next key up if the action is key down
-                // or keypress.  this is so if you finish a sequence and
-                // release the key the final key will not trigger a keyup
-                if (action !== 'keyup') {
-                    _ignore_next_keyup = _characterFromEvent(e);
-                }
+      } else { //Firefox
+        ctx.mozDash = [0];
+        ctx.mozDashOffset = 0;
+      }
+    }
+    else { // unsupporting smooth lines
+      // draw dashed line
+      ctx.beginPath();
+      ctx.lineCap = 'round';
+      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
+      }
+      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
+      }
+      else //If all else fails draw a line
+      {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+      }
+      ctx.stroke();
+    }
 
-                // weird race condition if a sequence ends with the key
-                // another sequence begins with
-                setTimeout(_resetSequences, 10);
-            },
-            i;
+    // draw label
+    if (this.label) {
+      var point;
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
+      }
+      this._label(ctx, this.label, point.x, point.y);
+    }
+  };
 
-        // loop through keys one at a time and bind the appropriate callback
-        // function.  for any key leading up to the final one it should
-        // increase the sequence. after the final, it should reset all sequences
-        for (i = 0; i < keys.length; ++i) {
-            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
-        }
+  /**
+   * Get a point on a line
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnLine = function (percentage) {
+    return {
+      x: (1 - percentage) * this.from.x + percentage * this.to.x,
+      y: (1 - percentage) * this.from.y + percentage * this.to.y
     }
+  };
 
-    /**
-     * binds a single keyboard combination
-     *
-     * @param {string} combination
-     * @param {Function} callback
-     * @param {string=} action
-     * @param {string=} sequence_name - name of sequence if part of sequence
-     * @param {number=} level - what part of the sequence the command is
-     * @returns void
-     */
-    function _bindSingle(combination, callback, action, sequence_name, level) {
+  /**
+   * Get a point on a circle
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+      x: x + radius * Math.cos(angle),
+      y: y - radius * Math.sin(angle)
+    }
+  };
 
-        // make sure multiple spaces in a row become a single space
-        combination = combination.replace(/\s+/g, ' ');
+  /**
+   * Redraw a edge as a line with an arrow halfway the line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawArrowCenter = function(ctx) {
+    var point;
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+    ctx.lineWidth = this._getLineWidth();
 
-        var sequence = combination.split(' '),
-            i,
-            key,
-            keys,
-            modifiers = [];
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-        // if this pattern is a sequence of keys then run through this method
-        // to reprocess each pattern one key at a time
-        if (sequence.length > 1) {
-            return _bindSequence(combination, sequence, callback, action);
-        }
+      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      // draw an arrow halfway the line
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
+      }
 
-        // take the keys from this pattern and figure out what the actual
-        // pattern is all about
-        keys = combination === '+' ? ['+'] : combination.split('+');
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-        for (i = 0; i < keys.length; ++i) {
-            key = keys[i];
+      // draw label
+      if (this.label) {
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      // draw circle
+      var x, y;
+      var radius = 0.25 * Math.max(100,this.length);
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+      }
+      this._circle(ctx, x, y, radius);
 
-            // normalize key names
-            if (_SPECIAL_ALIASES[key]) {
-                key = _SPECIAL_ALIASES[key];
-            }
+      // draw all arrows
+      var angle = 0.2 * Math.PI;
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-            // if this is not a keypress event then we should
-            // be smart about using shift keys
-            // this will only work for US keyboards however
-            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
-                key = _SHIFT_MAP[key];
-                modifiers.push('shift');
-            }
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+  };
 
-            // if this key is a modifier then add it to the list of modifiers
-            if (_isModifier(key)) {
-                modifiers.push(key);
-            }
-        }
 
-        // depending on what the key combination is
-        // we will try to pick the best event for it
-        action = _pickBestAction(key, modifiers, action);
 
-        // make sure to initialize array if this is the first time
-        // a callback is added for this key
-        if (!_callbacks[key]) {
-            _callbacks[key] = [];
-        }
+  /**
+   * Redraw a edge as a line with an arrow
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawArrow = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
 
-        // remove an existing match if there is one
-        _getMatches(key, modifiers, action, !sequence_name, combination);
+    ctx.lineWidth = this._getLineWidth();
 
-        // add this call back to the array
-        // if it is a sequence put it at the beginning
-        // if not put it at the end
-        //
-        // this is important because the way these are processed expects
-        // the sequence ones to come first
-        _callbacks[key][sequence_name ? 'unshift' : 'push']({
-            callback: callback,
-            modifiers: modifiers,
-            action: action,
-            seq: sequence_name,
-            level: level,
-            combo: combination
-        });
-    }
+    var angle, length;
+    //draw a line
+    if (this.from != this.to) {
+      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var dx = (this.to.x - this.from.x);
+      var dy = (this.to.y - this.from.y);
+      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
 
-    /**
-     * binds multiple combinations to the same callback
-     *
-     * @param {Array} combinations
-     * @param {Function} callback
-     * @param {string|undefined} action
-     * @returns void
-     */
-    function _bindMultiple(combinations, callback, action) {
-        for (var i = 0; i < combinations.length; ++i) {
-            _bindSingle(combinations[i], callback, action);
-        }
-    }
+      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
 
-    // start!
-    _addEvent(document, 'keypress', _handleKey);
-    _addEvent(document, 'keydown', _handleKey);
-    _addEvent(document, 'keyup', _handleKey);
+      var via;
+      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
+        via = this.via;
+      }
+      else if (this.smoothCurves.enabled == true) {
+        via = this._getViaCoordinates();
+      }
 
-    var mousetrap = {
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+        dx = (this.to.x - via.x);
+        dy = (this.to.y - via.y);
+        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+      }
+      var toBorderDist = this.to.distanceToBorder(ctx, angle);
+      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-        /**
-         * binds an event to mousetrap
-         *
-         * can be a single key, a combination of keys separated with +,
-         * a comma separated list of keys, an array of keys, or
-         * a sequence of keys separated by spaces
-         *
-         * be sure to list the modifier keys first to make sure that the
-         * correct key ends up getting bound (the last key in the pattern)
-         *
-         * @param {string|Array} keys
-         * @param {Function} callback
-         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
-         * @returns void
-         */
-        bind: function(keys, callback, action) {
-            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
-            _direct_map[keys + ':' + action] = callback;
-            return this;
-        },
+      var xTo,yTo;
+      if (this.smoothCurves.enabled == true && via.x != null) {
+       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+      }
+      else {
+        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+      }
 
-        /**
-         * unbinds an event to mousetrap
-         *
-         * the unbinding sets the callback function of the specified key combo
-         * to an empty function and deletes the corresponding key in the
-         * _direct_map dict.
-         *
-         * the keycombo+action has to be exactly the same as
-         * it was defined in the bind method
-         *
-         * TODO: actually remove this from the _callbacks dictionary instead
-         * of binding an empty function
-         *
-         * @param {string|Array} keys
-         * @param {string} action
-         * @returns void
-         */
-        unbind: function(keys, action) {
-            if (_direct_map[keys + ':' + action]) {
-                delete _direct_map[keys + ':' + action];
-                this.bind(keys, function() {}, action);
-            }
-            return this;
-        },
+      ctx.beginPath();
+      ctx.moveTo(xFrom,yFrom);
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+      }
+      else {
+        ctx.lineTo(xTo, yTo);
+      }
+      ctx.stroke();
 
-        /**
-         * triggers an event that has already been bound
-         *
-         * @param {string} keys
-         * @param {string=} action
-         * @returns void
-         */
-        trigger: function(keys, action) {
-            _direct_map[keys + ':' + action]();
-            return this;
-        },
+      // draw arrow at the end of the line
+      length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(xTo, yTo, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-        /**
-         * resets the library back to its initial state.  this is useful
-         * if you want to clear out the current keyboard shortcuts and bind
-         * new ones - for example if you switch to another page
-         *
-         * @returns void
-         */
-        reset: function() {
-            _callbacks = {};
-            _direct_map = {};
-            return this;
+      // draw label
+      if (this.label) {
+        var point;
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
         }
-    };
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      // draw circle
+      var node = this.from;
+      var x, y, arrow;
+      var radius = 0.25 * Math.max(100,this.length);
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+        arrow = {
+          x: x,
+          y: node.y,
+          angle: 0.9 * Math.PI
+        };
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+        arrow = {
+          x: node.x,
+          y: y,
+          angle: 0.6 * Math.PI
+        };
+      }
+      ctx.beginPath();
+      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+      ctx.stroke();
 
-  module.exports = mousetrap;
+      // draw all arrows
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+      ctx.fill();
+      ctx.stroke();
 
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+  };
 
 
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Parse a text source containing data in DOT language into a JSON object.
-   * The object contains two lists: one with nodes and one with edges.
-   *
-   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
-   *
-   * @param {String} data     Text containing a graph in DOT-notation
-   * @return {Object} graph   An object containing two parameters:
-   *                          {Object[]} nodes
-   *                          {Object[]} edges
+   * Calculate the distance between a point (x3,y3) and a line segment from
+   * (x1,y1) to (x2,y2).
+   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @param {number} x3
+   * @param {number} y3
+   * @private
    */
-  function parseDOT (data) {
-    dot = data;
-    return parseGraph();
-  }
-
-  // token types enumeration
-  var TOKENTYPE = {
-    NULL : 0,
-    DELIMITER : 1,
-    IDENTIFIER: 2,
-    UNKNOWN : 3
-  };
-
-  // map with all delimiters
-  var DELIMITERS = {
-    '{': true,
-    '}': true,
-    '[': true,
-    ']': true,
-    ';': true,
-    '=': true,
-    ',': true,
+  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    if (this.from != this.to) {
+      if (this.smoothCurves.enabled == true) {
+        var xVia, yVia;
+        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
+          xVia = this.via.x;
+          yVia = this.via.y;
+        }
+        else {
+          var via = this._getViaCoordinates();
+          xVia = via.x;
+          yVia = via.y;
+        }
+        var minDistance = 1e9;
+        var i,t,x,y,dx,dy;
+        for (i = 0; i < 10; i++) {
+          t = 0.1*i;
+          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+          dx = Math.abs(x3-x);
+          dy = Math.abs(y3-y);
+          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
+        }
+        return minDistance
+      }
+      else {
+        var px = x2-x1,
+            py = y2-y1,
+            something = px*px + py*py,
+            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
 
-    '->': true,
-    '--': true
+        if (u > 1) {
+          u = 1;
+        }
+        else if (u < 0) {
+          u = 0;
+        }
+
+        var x = x1 + u * px,
+            y = y1 + u * py,
+            dx = x - x3,
+            dy = y - y3;
+
+        //# Note: If the actual distance does not matter,
+        //# if you only want to compare what this function
+        //# returns to other results of this function, you
+        //# can just return the squared distance instead
+        //# (i.e. remove the sqrt) to gain a little performance
+
+        return Math.sqrt(dx*dx + dy*dy);
+      }
+    }
+    else {
+      var x, y, dx, dy;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      dx = x - x3;
+      dy = y - y3;
+      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+    }
   };
 
-  var dot = '';                   // current dot file
-  var index = 0;                  // current index in dot file
-  var c = '';                     // current token character in expr
-  var token = '';                 // current token
-  var tokenType = TOKENTYPE.NULL; // type of the token
+
 
   /**
-   * Get the first character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
    */
-  function first() {
-    index = 0;
-    c = dot.charAt(0);
-  }
+  Edge.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+  };
+
+
+  Edge.prototype.select = function() {
+    this.selected = true;
+  };
+
+  Edge.prototype.unselect = function() {
+    this.selected = false;
+  };
+
+  Edge.prototype.positionBezierNode = function() {
+    if (this.via !== null) {
+      this.via.x = 0.5 * (this.from.x + this.to.x);
+      this.via.y = 0.5 * (this.from.y + this.to.y);
+    }
+  };
 
   /**
-   * Get the next character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
+   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
+   * @param ctx
    */
-  function next() {
-    index++;
-    c = dot.charAt(index);
-  }
+  Edge.prototype._drawControlNodes = function(ctx) {
+    if (this.controlNodesEnabled == true) {
+      if (this.controlNodes.from === null && this.controlNodes.to === null) {
+        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+        var nodeIdTo = "edgeIdTo:".concat(this.id);
+        var constants = {
+                        nodes:{group:'', radius:8},
+                        physics:{damping:0},
+                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+                        };
+        this.controlNodes.from = new Node(
+          {id:nodeIdFrom,
+            shape:'dot',
+              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+        this.controlNodes.to = new Node(
+          {id:nodeIdTo,
+            shape:'dot',
+            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+      }
+
+      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+        this.controlNodes.positions = this.getControlNodePositions(ctx);
+        this.controlNodes.from.x = this.controlNodes.positions.from.x;
+        this.controlNodes.from.y = this.controlNodes.positions.from.y;
+        this.controlNodes.to.x = this.controlNodes.positions.to.x;
+        this.controlNodes.to.y = this.controlNodes.positions.to.y;
+      }
+
+      this.controlNodes.from.draw(ctx);
+      this.controlNodes.to.draw(ctx);
+    }
+    else {
+      this.controlNodes = {from:null, to:null, positions:{}};
+    }
+  };
 
   /**
-   * Preview the next character from the dot file.
-   * @return {String} cNext
+   * Enable control nodes.
+   * @private
    */
-  function nextPreview() {
-    return dot.charAt(index + 1);
-  }
+  Edge.prototype._enableControlNodes = function() {
+    this.controlNodesEnabled = true;
+  };
 
   /**
-   * Test whether given character is alphabetic or numeric
-   * @param {String} c
-   * @return {Boolean} isAlphaNumeric
+   * disable control nodes
+   * @private
    */
-  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
-  function isAlphaNumeric(c) {
-    return regexAlphaNumeric.test(c);
-  }
+  Edge.prototype._disableControlNodes = function() {
+    this.controlNodesEnabled = false;
+  };
 
   /**
-   * Merge all properties of object b into object b
-   * @param {Object} a
-   * @param {Object} b
-   * @return {Object} a
+   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+   * @param x
+   * @param y
+   * @returns {null}
+   * @private
    */
-  function merge (a, b) {
-    if (!a) {
-      a = {};
-    }
+  Edge.prototype._getSelectedControlNode = function(x,y) {
+    var positions = this.controlNodes.positions;
+    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
 
-    if (b) {
-      for (var name in b) {
-        if (b.hasOwnProperty(name)) {
-          a[name] = b[name];
-        }
-      }
+    if (fromDistance < 15) {
+      this.connectedNode = this.from;
+      this.from = this.controlNodes.from;
+      return this.controlNodes.from;
     }
-    return a;
-  }
+    else if (toDistance < 15) {
+      this.connectedNode = this.to;
+      this.to = this.controlNodes.to;
+      return this.controlNodes.to;
+    }
+    else {
+      return null;
+    }
+  };
+
 
   /**
-   * Set a value in an object, where the provided parameter name can be a
-   * path with nested parameters. For example:
-   *
-   *     var obj = {a: 2};
-   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
-   *
-   * @param {Object} obj
-   * @param {String} path  A parameter name or dot-separated parameter path,
-   *                      like "color.highlight.border".
-   * @param {*} value
+   * this resets the control nodes to their original position.
+   * @private
    */
-  function setValue(obj, path, value) {
-    var keys = path.split('.');
-    var o = obj;
-    while (keys.length) {
-      var key = keys.shift();
-      if (keys.length) {
-        // this isn't the end point
-        if (!o[key]) {
-          o[key] = {};
-        }
-        o = o[key];
-      }
-      else {
-        // this is the end point
-        o[key] = value;
-      }
+  Edge.prototype._restoreControlNodes = function() {
+    if (this.controlNodes.from.selected == true) {
+      this.from = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.from.unselect();
     }
-  }
+    if (this.controlNodes.to.selected == true) {
+      this.to = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.to.unselect();
+    }
+  };
 
   /**
-   * Add a node to a graph object. If there is already a node with
-   * the same id, their attributes will be merged.
-   * @param {Object} graph
-   * @param {Object} node
+   * this calculates the position of the control nodes on the edges of the parent nodes.
+   *
+   * @param ctx
+   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
    */
-  function addNode(graph, node) {
-    var i, len;
-    var current = null;
+  Edge.prototype.getControlNodePositions = function(ctx) {
+    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+    var dx = (this.to.x - this.from.x);
+    var dy = (this.to.y - this.from.y);
+    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
 
-    // find root graph (in case of subgraph)
-    var graphs = [graph]; // list with all graphs from current graph to root graph
-    var root = graph;
-    while (root.parent) {
-      graphs.push(root.parent);
-      root = root.parent;
+    var via;
+    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
+      via = this.via;
+    }
+    else if (this.smoothCurves.enabled == true) {
+      via = this._getViaCoordinates();
     }
 
-    // find existing node (at root level) by its id
-    if (root.nodes) {
-      for (i = 0, len = root.nodes.length; i < len; i++) {
-        if (node.id === root.nodes[i].id) {
-          current = root.nodes[i];
-          break;
-        }
-      }
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+      dx = (this.to.x - via.x);
+      dy = (this.to.y - via.y);
+      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
     }
+    var toBorderDist = this.to.distanceToBorder(ctx, angle);
+    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-    if (!current) {
-      // this is a new node
-      current = {
-        id: node.id
-      };
-      if (graph.node) {
-        // clone default attributes
-        current.attr = merge(current.attr, graph.node);
-      }
+    var xTo,yTo;
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+    }
+    else {
+      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
     }
 
-    // add node to this (sub)graph and all its parent graphs
-    for (i = graphs.length - 1; i >= 0; i--) {
-      var g = graphs[i];
+    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+  };
 
-      if (!g.nodes) {
-        g.nodes = [];
-      }
-      if (g.nodes.indexOf(current) == -1) {
-        g.nodes.push(current);
-      }
-    }
+  module.exports = Edge;
 
-    // merge attributes
-    if (node.attr) {
-      current.attr = merge(current.attr, node.attr);
-    }
-  }
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
 
   /**
-   * Add an edge to a graph object
-   * @param {Object} graph
-   * @param {Object} edge
+   * @class Node
+   * A node. A node can be connected to other nodes via one or multiple edges.
+   * @param {object} properties An object containing properties for the node. All
+   *                            properties are optional, except for the id.
+   *                              {number} id     Id of the node. Required
+   *                              {string} label  Text label for the node
+   *                              {number} x      Horizontal position of the node
+   *                              {number} y      Vertical position of the node
+   *                              {string} shape  Node shape, available:
+   *                                              "database", "circle", "ellipse",
+   *                                              "box", "image", "text", "dot",
+   *                                              "star", "triangle", "triangleDown",
+   *                                              "square"
+   *                              {string} image  An image url
+   *                              {string} title  An title text, can be HTML
+   *                              {anytype} group A group name or number
+   * @param {Network.Images} imagelist    A list with images. Only needed
+   *                                            when the node has an image
+   * @param {Network.Groups} grouplist    A list with groups. Needed for
+   *                                            retrieving group properties
+   * @param {Object}               constants    An object with default values for
+   *                                            example for the color
+   *
    */
-  function addEdge(graph, edge) {
-    if (!graph.edges) {
-      graph.edges = [];
-    }
-    graph.edges.push(edge);
-    if (graph.edge) {
-      var attr = merge({}, graph.edge);     // clone default attributes
-      edge.attr = merge(attr, edge.attr); // merge attributes
-    }
+  function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
+    this.hover = false;
+
+    this.edges = []; // all edges connected to this node
+    this.dynamicEdges = [];
+    this.reroutedEdges = {};
+
+    this.group = constants.nodes.group;
+    this.fontSize = Number(constants.nodes.fontSize);
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
+    this.fontDrawThreshold = 3;
+
+    this.color = constants.nodes.color;
+
+    // set defaults for the properties
+    this.id = undefined;
+    this.shape = constants.nodes.shape;
+    this.image = constants.nodes.image;
+    this.x = null;
+    this.y = null;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.horizontalAlignLeft = true; // these are for the navigation controls
+    this.verticalAlignTop    = true; // these are for the navigation controls
+    this.radius = constants.nodes.radius;
+    this.baseRadiusValue = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+    this.level = -1;
+    this.preassignedLevel = false;
+
+
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
+
+    // physics properties
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = constants.physics.damping;
+    this.mass = 1;  // kg
+    this.fixedData = {x:null,y:null};
+
+    this.setProperties(properties, constants);
+
+    // creating the variables for clustering
+    this.resetCluster();
+    this.dynamicEdgesLength = 0;
+    this.clusterSession = 0;
+    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
+    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
+    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
+    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
+    this.growthIndicator = 0;
+
+    // variables to tell the node about the network.
+    this.networkScaleInv = 1;
+    this.networkScale = 1;
+    this.canvasTopLeft = {"x": -300, "y": -300};
+    this.canvasBottomRight = {"x":  300, "y":  300};
+    this.parentEdgeId = null;
   }
 
   /**
-   * Create an edge to a graph object
-   * @param {Object} graph
-   * @param {String | Number | Object} from
-   * @param {String | Number | Object} to
-   * @param {String} type
-   * @param {Object | null} attr
-   * @return {Object} edge
+   * (re)setting the clustering variables and objects
    */
-  function createEdge(graph, from, to, type, attr) {
-    var edge = {
-      from: from,
-      to: to,
-      type: type
-    };
+  Node.prototype.resetCluster = function() {
+    // clustering variables
+    this.formationScale = undefined; // this is used to determine when to open the cluster
+    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
+    this.containedNodes = {};
+    this.containedEdges = {};
+    this.clusterSessions = [];
+  };
 
-    if (graph.edge) {
-      edge.attr = merge({}, graph.edge);  // clone default attributes
+  /**
+   * Attach a edge to the node
+   * @param {Edge} edge
+   */
+  Node.prototype.attachEdge = function(edge) {
+    if (this.edges.indexOf(edge) == -1) {
+      this.edges.push(edge);
     }
-    edge.attr = merge(edge.attr || {}, attr); // merge attributes
-
-    return edge;
-  }
+    if (this.dynamicEdges.indexOf(edge) == -1) {
+      this.dynamicEdges.push(edge);
+    }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
+  };
 
   /**
-   * Get next token in the current dot file.
-   * The token and token type are available as token and tokenType
+   * Detach a edge from the node
+   * @param {Edge} edge
    */
-  function getToken() {
-    tokenType = TOKENTYPE.NULL;
-    token = '';
-
-    // skip over whitespaces
-    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-      next();
+  Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+      this.edges.splice(index, 1);
+      this.dynamicEdges.splice(index, 1);
     }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
+  };
 
-    do {
-      var isComment = false;
 
-      // skip comment
-      if (c == '#') {
-        // find the previous non-space character
-        var i = index - 1;
-        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
-          i--;
-        }
-        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
-          // the # is at the start of a line, this is indeed a line comment
-          while (c != '' && c != '\n') {
-            next();
-          }
-          isComment = true;
-        }
-      }
-      if (c == '/' && nextPreview() == '/') {
-        // skip line comment
-        while (c != '' && c != '\n') {
-          next();
-        }
-        isComment = true;
-      }
-      if (c == '/' && nextPreview() == '*') {
-        // skip block comment
-        while (c != '') {
-          if (c == '*' && nextPreview() == '/') {
-            // end of block comment found. skip these last two characters
-            next();
-            next();
-            break;
-          }
-          else {
-            next();
-          }
-        }
-        isComment = true;
-      }
-
-      // skip over whitespaces
-      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-        next();
-      }
-    }
-    while (isComment);
-
-    // check for end of dot file
-    if (c == '') {
-      // token is still empty
-      tokenType = TOKENTYPE.DELIMITER;
+  /**
+   * Set or overwrite properties for the node
+   * @param {Object} properties an object with properties
+   * @param {Object} constants  and object with default, global properties
+   */
+  Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
       return;
     }
+    this.originalLabel = undefined;
+    // basic properties
+    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.group !== undefined)     {this.group = properties.group;}
+    if (properties.x !== undefined)         {this.x = properties.x;}
+    if (properties.y !== undefined)         {this.y = properties.y;}
+    if (properties.value !== undefined)     {this.value = properties.value;}
+    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
-    // check for delimiters consisting of 2 characters
-    var c2 = c + nextPreview();
-    if (DELIMITERS[c2]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c2;
-      next();
-      next();
-      return;
+
+    // physics
+    if (properties.mass !== undefined)                {this.mass = properties.mass;}
+
+    // navigation controls properties
+    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
+
+    if (this.id === undefined) {
+      throw "Node must have an id";
     }
 
-    // check for delimiters consisting of 1 character
-    if (DELIMITERS[c]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c;
-      next();
-      return;
+    // copy group properties
+    if (this.group) {
+      var groupObj = this.grouplist.get(this.group);
+      for (var prop in groupObj) {
+        if (groupObj.hasOwnProperty(prop)) {
+          this[prop] = groupObj[prop];
+        }
+      }
     }
 
-    // check for an identifier (number or string)
-    // TODO: more precise parsing of numbers/strings (and the port separator ':')
-    if (isAlphaNumeric(c) || c == '-') {
-      token += c;
-      next();
+    // individual shape properties
+    if (properties.shape !== undefined)          {this.shape = properties.shape;}
+    if (properties.image !== undefined)          {this.image = properties.image;}
+    if (properties.radius !== undefined)         {this.radius = properties.radius;}
+    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
-      while (isAlphaNumeric(c)) {
-        token += c;
-        next();
-      }
-      if (token == 'false') {
-        token = false;   // convert to boolean
-      }
-      else if (token == 'true') {
-        token = true;   // convert to boolean
+    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
+
+    if (this.image !== undefined && this.image != "") {
+      if (this.imagelist) {
+        this.imageObj = this.imagelist.load(this.image);
       }
-      else if (!isNaN(Number(token))) {
-        token = Number(token); // convert to number
+      else {
+        throw "No imagelist provided";
       }
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
     }
 
-    // check for a string enclosed by double quotes
-    if (c == '"') {
-      next();
-      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
-        token += c;
-        if (c == '"') { // skip the escape character
-          next();
-        }
-        next();
-      }
-      if (c != '"') {
-        throw newSyntaxError('End of string " expected');
-      }
-      next();
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
+    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
+    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
+
+    if (this.shape == 'image') {
+      this.radiusMin = constants.nodes.widthMin;
+      this.radiusMax = constants.nodes.widthMax;
     }
 
-    // something unknown is found, wrong characters, a syntax error
-    tokenType = TOKENTYPE.UNKNOWN;
-    while (c != '') {
-      token += c;
-      next();
+    // choose draw method depending on the shape
+    switch (this.shape) {
+      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
+      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+      // TODO: add diamond shape
+      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
     }
-    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
-  }
+    // reset the size of the node, this can be changed
+    this._reset();
+  };
 
   /**
-   * Parse a graph.
-   * @returns {Object} graph
+   * select this node
    */
-  function parseGraph() {
-    var graph = {};
+  Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
+  };
 
-    first();
-    getToken();
+  /**
+   * unselect this node
+   */
+  Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
+  };
 
-    // optional strict keyword
-    if (token == 'strict') {
-      graph.strict = true;
-      getToken();
-    }
 
-    // graph or digraph keyword
-    if (token == 'graph' || token == 'digraph') {
-      graph.type = token;
-      getToken();
-    }
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   */
+  Node.prototype.clearSizeCache = function() {
+    this._reset();
+  };
 
-    // optional graph id
-    if (tokenType == TOKENTYPE.IDENTIFIER) {
-      graph.id = token;
-      getToken();
-    }
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   * @private
+   */
+  Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
+  };
 
-    // open angle bracket
-    if (token != '{') {
-      throw newSyntaxError('Angle bracket { expected');
-    }
-    getToken();
+  /**
+   * get the title of this node.
+   * @return {string} title    The title of the node, or undefined when no title
+   *                           has been set.
+   */
+  Node.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-    // statements
-    parseStatements(graph);
+  /**
+   * Calculate the distance to the border of the Node
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Number} angle        Angle in radians
+   * @returns {number} distance   Distance to the border in pixels
+   */
+  Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
 
-    // close angle bracket
-    if (token != '}') {
-      throw newSyntaxError('Angle bracket } expected');
+    if (!this.width) {
+      this.resize(ctx);
     }
-    getToken();
 
-    // end of file
-    if (token !== '') {
-      throw newSyntaxError('End of file expected');
-    }
-    getToken();
+    switch (this.shape) {
+      case 'circle':
+      case 'dot':
+        return this.radius + borderWidth;
 
-    // remove temporary default properties
-    delete graph.node;
-    delete graph.edge;
-    delete graph.graph;
+      case 'ellipse':
+        var a = this.width / 2;
+        var b = this.height / 2;
+        var w = (Math.sin(angle) * a);
+        var h = (Math.cos(angle) * b);
+        return a * b / Math.sqrt(w * w + h * h);
 
-    return graph;
-  }
+      // TODO: implement distanceToBorder for database
+      // TODO: implement distanceToBorder for triangle
+      // TODO: implement distanceToBorder for triangleDown
+
+      case 'box':
+      case 'image':
+      case 'text':
+      default:
+        if (this.width) {
+          return Math.min(
+              Math.abs(this.width / 2 / Math.cos(angle)),
+              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+          // TODO: reckon with border radius too in case of box
+        }
+        else {
+          return 0;
+        }
+
+    }
+    // TODO: implement calculation of distance to border for all shapes
+  };
 
   /**
-   * Parse a list with statements.
-   * @param {Object} graph
+   * Set forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
    */
-  function parseStatements (graph) {
-    while (token !== '' && token != '}') {
-      parseStatement(graph);
-      if (token == ';') {
-        getToken();
-      }
-    }
-  }
+  Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
+  };
 
   /**
-   * Parse a single statement. Can be a an attribute statement, node
-   * statement, a series of node statements and edge statements, or a
-   * parameter.
-   * @param {Object} graph
+   * Add forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
+   * @private
    */
-  function parseStatement(graph) {
-    // parse subgraph
-    var subgraph = parseSubgraph(graph);
-    if (subgraph) {
-      // edge statements
-      parseEdge(graph, subgraph);
+  Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
+  };
 
-      return;
+  /**
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   */
+  Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.x  += this.vx * interval;          // position
     }
 
-    // parse an attribute statement
-    var attr = parseAttributeStatement(graph);
-    if (attr) {
-      return;
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.y  += this.vy * interval;          // position
     }
+  };
 
-    // parse node
-    if (tokenType != TOKENTYPE.IDENTIFIER) {
-      throw newSyntaxError('Identifier expected');
+
+
+  /**
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   * @param {number} maxVelocity The speed limit imposed on the velocity
+   */
+  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
+      this.x  += this.vx * interval;          // position
+    }
+    else {
+      this.fx = 0;
     }
-    var id = token; // id can be a string or a number
-    getToken();
 
-    if (token == '=') {
-      // id statement
-      getToken();
-      if (tokenType != TOKENTYPE.IDENTIFIER) {
-        throw newSyntaxError('Identifier expected');
-      }
-      graph[id] = token;
-      getToken();
-      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
+      this.y  += this.vy * interval;          // position
     }
     else {
-      parseNodeStatement(graph, id);
+      this.fy = 0;
     }
-  }
+  };
 
   /**
-   * Parse a subgraph
-   * @param {Object} graph    parent graph object
-   * @return {Object | null} subgraph
+   * Check if this node has a fixed x and y position
+   * @return {boolean}      true if fixed, false if not
    */
-  function parseSubgraph (graph) {
-    var subgraph = null;
+  Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
+  };
 
-    // optional subgraph keyword
-    if (token == 'subgraph') {
-      subgraph = {};
-      subgraph.type = 'subgraph';
-      getToken();
+  /**
+   * Check if this node is moving
+   * @param {number} vmin   the minimum velocity considered as "moving"
+   * @return {boolean}      true if moving, false if it has no velocity
+   */
+  // TODO: replace this method with calculating the kinetic energy
+  Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  };
 
-      // optional graph id
-      if (tokenType == TOKENTYPE.IDENTIFIER) {
-        subgraph.id = token;
-        getToken();
-      }
-    }
+  /**
+   * check if this node is selecte
+   * @return {boolean} selected   True if node is selected, else false
+   */
+  Node.prototype.isSelected = function() {
+    return this.selected;
+  };
 
-    // open angle bracket
-    if (token == '{') {
-      getToken();
+  /**
+   * Retrieve the value of the node. Can be undefined
+   * @return {Number} value
+   */
+  Node.prototype.getValue = function() {
+    return this.value;
+  };
 
-      if (!subgraph) {
-        subgraph = {};
-      }
-      subgraph.parent = graph;
-      subgraph.node = graph.node;
-      subgraph.edge = graph.edge;
-      subgraph.graph = graph.graph;
+  /**
+   * Calculate the distance from the nodes location to the given location (x,y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Number} value
+   */
+  Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
 
-      // statements
-      parseStatements(subgraph);
 
-      // close angle bracket
-      if (token != '}') {
-        throw newSyntaxError('Angle bracket } expected');
+  /**
+   * Adjust the value range of the node. The node will adjust it's radius
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
+   */
+  Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+      if (max == min) {
+        this.radius = (this.radiusMin + this.radiusMax) / 2;
       }
-      getToken();
-
-      // remove temporary default properties
-      delete subgraph.node;
-      delete subgraph.edge;
-      delete subgraph.graph;
-      delete subgraph.parent;
-
-      // register at the parent graph
-      if (!graph.subgraphs) {
-        graph.subgraphs = [];
+      else {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
       }
-      graph.subgraphs.push(subgraph);
     }
+    this.baseRadiusValue = this.radius;
+  };
 
-    return subgraph;
-  }
+  /**
+   * Draw this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
+  };
 
   /**
-   * parse an attribute statement like "node [shape=circle fontSize=16]".
-   * Available keywords are 'node', 'edge', 'graph'.
-   * The previous list with default attributes will be replaced
-   * @param {Object} graph
-   * @returns {String | null} keyword Returns the name of the parsed attribute
-   *                                  (node, edge, graph), or null if nothing
-   *                                  is parsed.
+   * Recalculate the size of this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    */
-  function parseAttributeStatement (graph) {
-    // attribute statements
-    if (token == 'node') {
-      getToken();
-
-      // node attributes
-      graph.node = parseAttributeList();
-      return 'node';
-    }
-    else if (token == 'edge') {
-      getToken();
-
-      // edge attributes
-      graph.edge = parseAttributeList();
-      return 'edge';
-    }
-    else if (token == 'graph') {
-      getToken();
-
-      // graph attributes
-      graph.graph = parseAttributeList();
-      return 'graph';
-    }
-
-    return null;
-  }
+  Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
+  };
 
   /**
-   * parse a node statement
-   * @param {Object} graph
-   * @param {String | Number} id
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top, right, bottom
+   * @return {boolean}     True if location is located on node
    */
-  function parseNodeStatement(graph, id) {
-    // node statement
-    var node = {
-      id: id
-    };
-    var attr = parseAttributeList();
-    if (attr) {
-      node.attr = attr;
-    }
-    addNode(graph, node);
-
-    // edge statements
-    parseEdge(graph, id);
-  }
+  Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left              < obj.right  &&
+            this.left + this.width > obj.left   &&
+            this.top               < obj.bottom &&
+            this.top + this.height > obj.top);
+  };
 
-  /**
-   * Parse an edge or a series of edges
-   * @param {Object} graph
-   * @param {String | Number} from        Id of the from node
-   */
-  function parseEdge(graph, from) {
-    while (token == '->' || token == '--') {
-      var to;
-      var type = token;
-      getToken();
+  Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
 
-      var subgraph = parseSubgraph(graph);
-      if (subgraph) {
-        to = subgraph;
+    if (!this.width || !this.height) {  // undefined or 0
+      var width, height;
+      if (this.value) {
+        this.radius = this.baseRadiusValue;
+        var scale = this.imageObj.height / this.imageObj.width;
+        if (scale !== undefined) {
+          width = this.radius || this.imageObj.width;
+          height = this.radius * scale || this.imageObj.height;
+        }
+        else {
+          width = 0;
+          height = 0;
+        }
       }
       else {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Identifier or subgraph expected');
-        }
-        to = token;
-        addNode(graph, {
-          id: to
-        });
-        getToken();
+        width = this.imageObj.width;
+        height = this.imageObj.height;
       }
+      this.width  = width;
+      this.height = height;
 
-      // parse edge attributes
-      var attr = parseAttributeList();
-
-      // create edge
-      var edge = createEdge(graph, from, to, type, attr);
-      addEdge(graph, edge);
-
-      from = to;
+      this.growthIndicator = 0;
+      if (this.width > 0 && this.height > 0) {
+        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
+        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+        this.growthIndicator = this.width - width;
+      }
     }
-  }
 
-  /**
-   * Parse a set with attributes,
-   * for example [label="1.000", shape=solid]
-   * @return {Object | null} attr
-   */
-  function parseAttributeList() {
-    var attr = null;
+  };
 
-    while (token == '[') {
-      getToken();
-      attr = {};
-      while (token !== '' && token != ']') {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute name expected');
-        }
-        var name = token;
+  Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
 
-        getToken();
-        if (token != '=') {
-          throw newSyntaxError('Equal sign = expected');
-        }
-        getToken();
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
 
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute value expected');
-        }
-        var value = token;
-        setValue(attr, name, value); // name can be a path
+    var yLabel;
+    if (this.imageObj.width != 0 ) {
+      // draw the shade
+      if (this.clusterSize > 1) {
+        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
+        lineWidth *= this.networkScaleInv;
+        lineWidth = Math.min(0.2 * this.width,lineWidth);
 
-        getToken();
-        if (token ==',') {
-          getToken();
-        }
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
       }
 
-      if (token != ']') {
-        throw newSyntaxError('Bracket ] expected');
-      }
-      getToken();
+      // draw the image
+      ctx.globalAlpha = 1.0;
+      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      yLabel = this.y + this.height / 2;
+    }
+    else {
+      // image still loading... just draw the label for now
+      yLabel = this.y;
     }
 
-    return attr;
-  }
+    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
+  };
 
-  /**
-   * Create a syntax error with extra information on current token and index.
-   * @param {String} message
-   * @returns {SyntaxError} err
-   */
-  function newSyntaxError(message) {
-    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
-  }
 
-  /**
-   * Chop off text after a maximum length
-   * @param {String} text
-   * @param {Number} maxLength
-   * @returns {String}
-   */
-  function chop (text, maxLength) {
-    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
-  }
+  Node.prototype._resizeBox = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
+
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
 
-  /**
-   * Execute a function fn for each pair of elements in two arrays
-   * @param {Array | *} array1
-   * @param {Array | *} array2
-   * @param {function} fn
-   */
-  function forEach2(array1, array2, fn) {
-    if (array1 instanceof Array) {
-      array1.forEach(function (elem1) {
-        if (array2 instanceof Array) {
-          array2.forEach(function (elem2)  {
-            fn(elem1, elem2);
-          });
-        }
-        else {
-          fn(elem1, array2);
-        }
-      });
-    }
-    else {
-      if (array2 instanceof Array) {
-        array2.forEach(function (elem2)  {
-          fn(array1, elem2);
-        });
-      }
-      else {
-        fn(array1, array2);
-      }
     }
-  }
+  };
 
-  /**
-   * Convert a string containing a graph in DOT language into a map containing
-   * with nodes and edges in the format of graph.
-   * @param {String} data         Text containing a graph in DOT-notation
-   * @return {Object} graphData
-   */
-  function DOTToGraph (data) {
-    // parse the DOT file
-    var dotData = parseDOT(data);
-    var graphData = {
-      nodes: [],
-      edges: [],
-      options: {}
-    };
+  Node.prototype._drawBox = function (ctx) {
+    this._resizeBox(ctx);
 
-    // copy the nodes
-    if (dotData.nodes) {
-      dotData.nodes.forEach(function (dotNode) {
-        var graphNode = {
-          id: dotNode.id,
-          label: String(dotNode.label || dotNode.id)
-        };
-        merge(graphNode, dotNode.attr);
-        if (graphNode.image) {
-          graphNode.shape = 'image';
-        }
-        graphData.nodes.push(graphNode);
-      });
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    // copy the edges
-    if (dotData.edges) {
-      /**
-       * Convert an edge in DOT format to an edge with VisGraph format
-       * @param {Object} dotEdge
-       * @returns {Object} graphEdge
-       */
-      function convertEdge(dotEdge) {
-        var graphEdge = {
-          from: dotEdge.from,
-          to: dotEdge.to
-        };
-        merge(graphEdge, dotEdge.attr);
-        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
-        return graphEdge;
-      }
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
 
-      dotData.edges.forEach(function (dotEdge) {
-        var from, to;
-        if (dotEdge.from instanceof Object) {
-          from = dotEdge.from.nodes;
-        }
-        else {
-          from = {
-            id: dotEdge.from
-          }
-        }
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-        if (dotEdge.to instanceof Object) {
-          to = dotEdge.to.nodes;
-        }
-        else {
-          to = {
-            id: dotEdge.to
-          }
-        }
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
-          dotEdge.from.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
 
-        forEach2(from, to, function (from, to) {
-          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
-          var graphEdge = convertEdge(subEdge);
-          graphData.edges.push(graphEdge);
-        });
+  Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var size = textSize.width + 2 * margin;
+      this.width = size;
+      this.height = size;
 
-        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
-          dotEdge.to.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
-      });
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
+  };
 
-    // copy the options
-    if (dotData.attr) {
-      graphData.options = dotData.attr;
-    }
+  Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    return graphData;
-  }
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-  // exports
-  exports.parseDOT = parseDOT;
-  exports.DOTToGraph = DOTToGraph;
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-/***/ },
-/* 40 */
-/***/ function(module, exports, __webpack_require__) {
+      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  var util = __webpack_require__(1);
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
 
-  /**
-   * @class Groups
-   * This class can store groups and properties specific for groups.
-   */
-  function Groups() {
-    this.clear();
-    this.defaultIndex = 0;
-  }
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
 
-  /**
-   * default constants for group colors
-   */
-  Groups.DEFAULT = [
-    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
-    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
-    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
-    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
-    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
-    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
-    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
-    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
-    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
-    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
-  ];
+  Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+      this.radius = diameter / 2;
 
+      this.width = diameter;
+      this.height = diameter;
 
-  /**
-   * Clear all groups
-   */
-  Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-      var i = 0;
-      for ( var p in this ) {
-        if (this.hasOwnProperty(p)) {
-          i++;
-        }
-      }
-      return i;
+      // scaling used for clustering
+  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.radius - 0.5*diameter;
     }
   };
 
+  Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  /**
-   * get group properties of a groupname. If groupname is not found, a new group
-   * is added.
-   * @param {*} groupname        Can be a number, string, Date, etc.
-   * @return {Object} group      The created group, containing all group properties
-   */
-  Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-    if (group == undefined) {
-      // create new group
-      var index = this.defaultIndex % Groups.DEFAULT.length;
-      this.defaultIndex++;
-      group = {};
-      group.color = Groups.DEFAULT[index];
-      this.groups[groupname] = group;
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    return group;
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  /**
-   * Add a custom group style
-   * @param {String} groupname
-   * @param {Object} style       An object containing borderColor,
-   *                             backgroundColor, etc.
-   * @return {Object} group      The created group object
-   */
-  Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    if (style.color) {
-      style.color = util.parseColor(style.color);
+  Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+      var textSize = this.getTextSize(ctx);
+
+      this.width = textSize.width * 1.5;
+      this.height = textSize.height * 2;
+      if (this.width < this.height) {
+        this.width = this.height;
+      }
+      var defaultSize = this.width;
+
+        // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - defaultSize;
     }
-    return style;
   };
 
-  module.exports = Groups;
+  Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-/***/ },
-/* 41 */
-/***/ function(module, exports, __webpack_require__) {
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-  /**
-   * @class Images
-   * This class loads images and keeps them stored.
-   */
-  function Images() {
-    this.images = {};
-
-    this.callback = undefined;
-  }
-
-  /**
-   * Set an onload callback function. This will be called each time an image
-   * is loaded
-   * @param {function} callback
-   */
-  Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
-  };
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   *
-   * @param {string} url          Url of the image
-   * @return {Image} img          The image object
-   */
-  Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-      // create the image
-      var images = this;
-      img = new Image();
-      this.images[url] = img;
-      img.onload = function() {
-        if (images.callback) {
-          images.callback(this);
-        }
-      };
-      img.src = url;
+      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    return img;
-  };
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
-  module.exports = Images;
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
+  Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+  };
 
-/***/ },
-/* 42 */
-/***/ function(module, exports, __webpack_require__) {
+  Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
+  };
 
-  var util = __webpack_require__(1);
+  Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
+  };
 
-  /**
-   * @class Node
-   * A node. A node can be connected to other nodes via one or multiple edges.
-   * @param {object} properties An object containing properties for the node. All
-   *                            properties are optional, except for the id.
-   *                              {number} id     Id of the node. Required
-   *                              {string} label  Text label for the node
-   *                              {number} x      Horizontal position of the node
-   *                              {number} y      Vertical position of the node
-   *                              {string} shape  Node shape, available:
-   *                                              "database", "circle", "ellipse",
-   *                                              "box", "image", "text", "dot",
-   *                                              "star", "triangle", "triangleDown",
-   *                                              "square"
-   *                              {string} image  An image url
-   *                              {string} title  An title text, can be HTML
-   *                              {anytype} group A group name or number
-   * @param {Network.Images} imagelist    A list with images. Only needed
-   *                                            when the node has an image
-   * @param {Network.Groups} grouplist    A list with groups. Needed for
-   *                                            retrieving group properties
-   * @param {Object}               constants    An object with default values for
-   *                                            example for the color
-   *
-   */
-  function Node(properties, imagelist, grouplist, constants) {
-    this.selected = false;
-    this.hover = false;
+  Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
+  };
 
-    this.edges = []; // all edges connected to this node
-    this.dynamicEdges = [];
-    this.reroutedEdges = {};
+  Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+  };
 
-    this.group = constants.nodes.group;
-    this.fontSize = Number(constants.nodes.fontSize);
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-    this.fontDrawThreshold = 3;
+  Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+      this.radius = this.baseRadiusValue;
+      var size = 2 * this.radius;
+      this.width = size;
+      this.height = size;
 
-    this.color = constants.nodes.color;
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
+    }
+  };
 
-    // set defaults for the properties
-    this.id = undefined;
-    this.shape = constants.nodes.shape;
-    this.image = constants.nodes.image;
-    this.x = null;
-    this.y = null;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.horizontalAlignLeft = true; // these are for the navigation controls
-    this.verticalAlignTop    = true; // these are for the navigation controls
-    this.radius = constants.nodes.radius;
-    this.baseRadiusValue = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
-    this.level = -1;
-    this.preassignedLevel = false;
+  Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
 
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    this.imagelist = imagelist;
-    this.grouplist = grouplist;
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+    var radiusMultiplier = 2;
 
-    // physics properties
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = constants.physics.damping;
-    this.mass = 1;  // kg
-    this.fixedData = {x:null,y:null};
+    // choose draw method depending on the shape
+    switch (shape) {
+      case 'dot':           radiusMultiplier = 2; break;
+      case 'square':        radiusMultiplier = 2; break;
+      case 'triangle':      radiusMultiplier = 3; break;
+      case 'triangleDown':  radiusMultiplier = 3; break;
+      case 'star':          radiusMultiplier = 4; break;
+    }
 
-    this.setProperties(properties, constants);
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    // creating the variables for clustering
-    this.resetCluster();
-    this.dynamicEdgesLength = 0;
-    this.clusterSession = 0;
-    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
-    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
-    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
-    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
-    this.growthIndicator = 0;
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    // variables to tell the node about the network.
-    this.networkScaleInv = 1;
-    this.networkScale = 1;
-    this.canvasTopLeft = {"x": -300, "y": -300};
-    this.canvasBottomRight = {"x":  300, "y":  300};
-    this.parentEdgeId = null;
-  }
+      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   * (re)setting the clustering variables and objects
-   */
-  Node.prototype.resetCluster = function() {
-    // clustering variables
-    this.formationScale = undefined; // this is used to determine when to open the cluster
-    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
-    this.containedNodes = {};
-    this.containedEdges = {};
-    this.clusterSessions = [];
-  };
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-  /**
-   * Attach a edge to the node
-   * @param {Edge} edge
-   */
-  Node.prototype.attachEdge = function(edge) {
-    if (this.edges.indexOf(edge) == -1) {
-      this.edges.push(edge);
-    }
-    if (this.dynamicEdges.indexOf(edge) == -1) {
-      this.dynamicEdges.push(edge);
+    if (this.label) {
+      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
-  /**
-   * Detach a edge from the node
-   * @param {Edge} edge
-   */
-  Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-      this.edges.splice(index, 1);
-      this.dynamicEdges.splice(index, 1);
+  Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
+  Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  /**
-   * Set or overwrite properties for the node
-   * @param {Object} properties an object with properties
-   * @param {Object} constants  and object with default, global properties
-   */
-  Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
-    this.originalLabel = undefined;
-    // basic properties
-    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.group !== undefined)     {this.group = properties.group;}
-    if (properties.x !== undefined)         {this.x = properties.x;}
-    if (properties.y !== undefined)         {this.y = properties.y;}
-    if (properties.value !== undefined)     {this.value = properties.value;}
-    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
-
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-    // physics
-    if (properties.mass !== undefined)                {this.mass = properties.mass;}
 
-    // navigation controls properties
-    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
-    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
-    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
+  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
+    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = align || "center";
+      ctx.textBaseline = baseline || "middle";
 
-    if (this.id === undefined) {
-      throw "Node must have an id";
-    }
+      var lines = text.split('\n');
+      var lineCount = lines.length;
+      var fontSize = (this.fontSize + 4);
+      var yLine = y + (1 - lineCount) / 2 * fontSize;
+      if (labelUnderNode == true) {
+        yLine = y + (1 - lineCount) / (2 * fontSize);
+      }
 
-    // copy group properties
-    if (this.group) {
-      var groupObj = this.grouplist.get(this.group);
-      for (var prop in groupObj) {
-        if (groupObj.hasOwnProperty(prop)) {
-          this[prop] = groupObj[prop];
-        }
+      for (var i = 0; i < lineCount; i++) {
+        ctx.fillText(lines[i], x, yLine);
+        yLine += fontSize;
       }
     }
+  };
 
-    // individual shape properties
-    if (properties.shape !== undefined)          {this.shape = properties.shape;}
-    if (properties.image !== undefined)          {this.image = properties.image;}
-    if (properties.radius !== undefined)         {this.radius = properties.radius;}
-    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
-    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
+  Node.prototype.getTextSize = function(ctx) {
+    if (this.label !== undefined) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
 
-    if (this.image !== undefined && this.image != "") {
-      if (this.imagelist) {
-        this.imageObj = this.imagelist.load(this.image);
-      }
-      else {
-        throw "No imagelist provided";
-      }
-    }
+      var lines = this.label.split('\n'),
+          height = (this.fontSize + 4) * lines.length,
+          width = 0;
 
-    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
-    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
-    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
+      for (var i = 0, iMax = lines.length; i < iMax; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width);
+      }
 
-    if (this.shape == 'image') {
-      this.radiusMin = constants.nodes.widthMin;
-      this.radiusMax = constants.nodes.widthMax;
+      return {"width": width, "height": height};
     }
-
-    // choose draw method depending on the shape
-    switch (this.shape) {
-      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
-      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-      // TODO: add diamond shape
-      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+    else {
+      return {"width": 0, "height": 0};
     }
-    // reset the size of the node, this can be changed
-    this._reset();
   };
 
   /**
-   * select this node
+   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+   * there is a safety margin of 0.3 * width;
+   *
+   * @returns {boolean}
    */
-  Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
+  Node.prototype.inArea = function() {
+    if (this.width !== undefined) {
+    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
+            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
+            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
+            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+    }
+    else {
+      return true;
+    }
   };
 
   /**
-   * unselect this node
+   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+   * @returns {boolean}
    */
-  Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
+  Node.prototype.inView = function() {
+    return (this.x >= this.canvasTopLeft.x    &&
+            this.x < this.canvasBottomRight.x &&
+            this.y >= this.canvasTopLeft.y    &&
+            this.y < this.canvasBottomRight.y);
   };
 
-
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
+   * This allows the zoom level of the network to influence the rendering
+   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+   *
+   * @param scale
+   * @param canvasTopLeft
+   * @param canvasBottomRight
    */
-  Node.prototype.clearSizeCache = function() {
-    this._reset();
+  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+    this.canvasTopLeft = canvasTopLeft;
+    this.canvasBottomRight = canvasBottomRight;
   };
 
+
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
-   * @private
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
    */
-  Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
+  Node.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
   };
 
+
+
   /**
-   * get the title of this node.
-   * @return {string} title    The title of the node, or undefined when no title
-   *                           has been set.
+   * set the velocity at 0. Is called when this node is contained in another during clustering
    */
-  Node.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
+  Node.prototype.clearVelocity = function() {
+    this.vx = 0;
+    this.vy = 0;
   };
 
+
   /**
-   * Calculate the distance to the border of the Node
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Number} angle        Angle in radians
-   * @returns {number} distance   Distance to the border in pixels
+   * Basic preservation of (kinectic) energy
+   *
+   * @param massBeforeClustering
    */
-  Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
-
-    if (!this.width) {
-      this.resize(ctx);
-    }
-
-    switch (this.shape) {
-      case 'circle':
-      case 'dot':
-        return this.radius + borderWidth;
+  Node.prototype.updateVelocity = function(massBeforeClustering) {
+    var energyBefore = this.vx * this.vx * massBeforeClustering;
+    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vx = Math.sqrt(energyBefore/this.mass);
+    energyBefore = this.vy * this.vy * massBeforeClustering;
+    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vy = Math.sqrt(energyBefore/this.mass);
+  };
 
-      case 'ellipse':
-        var a = this.width / 2;
-        var b = this.height / 2;
-        var w = (Math.sin(angle) * a);
-        var h = (Math.cos(angle) * b);
-        return a * b / Math.sqrt(w * w + h * h);
+  module.exports = Node;
 
-      // TODO: implement distanceToBorder for database
-      // TODO: implement distanceToBorder for triangle
-      // TODO: implement distanceToBorder for triangleDown
 
-      case 'box':
-      case 'image':
-      case 'text':
-      default:
-        if (this.width) {
-          return Math.min(
-              Math.abs(this.width / 2 / Math.cos(angle)),
-              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-          // TODO: reckon with border radius too in case of box
-        }
-        else {
-          return 0;
-        }
+/***/ },
+/* 40 */
+/***/ function(module, exports, __webpack_require__) {
 
-    }
-    // TODO: implement calculation of distance to border for all shapes
-  };
+  var util = __webpack_require__(1);
 
   /**
-   * Set forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
+   * @class Groups
+   * This class can store groups and properties specific for groups.
    */
-  Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
-  };
+  function Groups() {
+    this.clear();
+    this.defaultIndex = 0;
+  }
+
 
   /**
-   * Add forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
-   * @private
+   * default constants for group colors
    */
-  Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
-  };
+  Groups.DEFAULT = [
+    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
+  ];
+
 
   /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
+   * Clear all groups
    */
-  Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.x  += this.vx * interval;          // position
-    }
-
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.y  += this.vy * interval;          // position
+  Groups.prototype.clear = function () {
+    this.groups = {};
+    this.groups.length = function()
+    {
+      var i = 0;
+      for ( var p in this ) {
+        if (this.hasOwnProperty(p)) {
+          i++;
+        }
+      }
+      return i;
     }
   };
 
 
-
   /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   * @param {number} maxVelocity The speed limit imposed on the velocity
+   * get group properties of a groupname. If groupname is not found, a new group
+   * is added.
+   * @param {*} groupname        Can be a number, string, Date, etc.
+   * @return {Object} group      The created group, containing all group properties
    */
-  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
-      this.x  += this.vx * interval;          // position
-    }
-    else {
-      this.fx = 0;
-    }
+  Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
 
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
-      this.y  += this.vy * interval;          // position
-    }
-    else {
-      this.fy = 0;
+    if (group == undefined) {
+      // create new group
+      var index = this.defaultIndex % Groups.DEFAULT.length;
+      this.defaultIndex++;
+      group = {};
+      group.color = Groups.DEFAULT[index];
+      this.groups[groupname] = group;
     }
-  };
 
-  /**
-   * Check if this node has a fixed x and y position
-   * @return {boolean}      true if fixed, false if not
-   */
-  Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
+    return group;
   };
 
   /**
-   * Check if this node is moving
-   * @param {number} vmin   the minimum velocity considered as "moving"
-   * @return {boolean}      true if moving, false if it has no velocity
+   * Add a custom group style
+   * @param {String} groupname
+   * @param {Object} style       An object containing borderColor,
+   *                             backgroundColor, etc.
+   * @return {Object} group      The created group object
    */
-  // TODO: replace this method with calculating the kinetic energy
-  Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    if (style.color) {
+      style.color = util.parseColor(style.color);
+    }
+    return style;
   };
 
+  module.exports = Groups;
+
+
+/***/ },
+/* 41 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * check if this node is selecte
-   * @return {boolean} selected   True if node is selected, else false
+   * @class Images
+   * This class loads images and keeps them stored.
    */
-  Node.prototype.isSelected = function() {
-    return this.selected;
-  };
+  function Images() {
+    this.images = {};
+
+    this.callback = undefined;
+  }
 
   /**
-   * Retrieve the value of the node. Can be undefined
-   * @return {Number} value
+   * Set an onload callback function. This will be called each time an image
+   * is loaded
+   * @param {function} callback
    */
-  Node.prototype.getValue = function() {
-    return this.value;
+  Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
   };
 
   /**
-   * Calculate the distance from the nodes location to the given location (x,y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Number} value
+   *
+   * @param {string} url          Url of the image
+   * @return {Image} img          The image object
    */
-  Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
+  Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+      // create the image
+      var images = this;
+      img = new Image();
+      this.images[url] = img;
+      img.onload = function() {
+        if (images.callback) {
+          images.callback(this);
+        }
+      };
+      img.src = url;
+    }
+
+    return img;
   };
 
+  module.exports = Images;
+
+
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Adjust the value range of the node. The node will adjust it's radius
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
+   * Popup is a class to create a popup window with some text
+   * @param {Element}  container     The container object.
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {String} [text]
+   * @param {Object} [style]     An object containing borderColor,
+   *                             backgroundColor, etc.
    */
-  Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-      if (max == min) {
-        this.radius = (this.radiusMin + this.radiusMax) / 2;
-      }
-      else {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
+  function Popup(container, x, y, text, style) {
+    if (container) {
+      this.container = container;
+    }
+    else {
+      this.container = document.body;
+    }
+
+    // x, y and text are optional, see if a style object was passed in their place
+    if (style === undefined) {
+      if (typeof x === "object") {
+        style = x;
+        x = undefined;
+      } else if (typeof text === "object") {
+        style = text;
+        text = undefined;
+      } else {
+        // for backwards compatibility, in case clients other than Network are creating Popup directly
+        style = {
+          fontColor: 'black',
+          fontSize: 14, // px
+          fontFace: 'verdana',
+          color: {
+            border: '#666',
+            background: '#FFFFC6'
+          }
+        }
       }
     }
-    this.baseRadiusValue = this.radius;
-  };
+
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
+
+    if (x !== undefined && y !== undefined ) {
+      this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+      this.setText(text);
+    }
+
+    // create the frame
+    this.frame = document.createElement("div");
+    var styleAttr = this.frame.style;
+    styleAttr.position = "absolute";
+    styleAttr.visibility = "hidden";
+    styleAttr.border = "1px solid " + style.color.border;
+    styleAttr.color = style.fontColor;
+    styleAttr.fontSize = style.fontSize + "px";
+    styleAttr.fontFamily = style.fontFace;
+    styleAttr.padding = this.padding + "px";
+    styleAttr.backgroundColor = style.color.background;
+    styleAttr.borderRadius = "3px";
+    styleAttr.MozBorderRadius = "3px";
+    styleAttr.WebkitBorderRadius = "3px";
+    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    styleAttr.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+  }
 
   /**
-   * Draw this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * @param {number} x   Horizontal position of the popup window
+   * @param {number} y   Vertical position of the popup window
    */
-  Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
+  Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
   };
 
   /**
-   * Recalculate the size of this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * Set the text for the popup window. This can be HTML code
+   * @param {string} text
    */
-  Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
+  Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
   };
 
   /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top, right, bottom
-   * @return {boolean}     True if location is located on node
+   * Show the popup window
+   * @param {boolean} show    Optional. Show or hide the window
    */
-  Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left              < obj.right  &&
-            this.left + this.width > obj.left   &&
-            this.top               < obj.bottom &&
-            this.top + this.height > obj.top);
-  };
+  Popup.prototype.show = function (show) {
+    if (show === undefined) {
+      show = true;
+    }
 
-  Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
+    if (show) {
+      var height = this.frame.clientHeight;
+      var width =  this.frame.clientWidth;
+      var maxHeight = this.frame.parentNode.clientHeight;
+      var maxWidth = this.frame.parentNode.clientWidth;
 
-    if (!this.width || !this.height) {  // undefined or 0
-      var width, height;
-      if (this.value) {
-        this.radius = this.baseRadiusValue;
-        var scale = this.imageObj.height / this.imageObj.width;
-        if (scale !== undefined) {
-          width = this.radius || this.imageObj.width;
-          height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-          width = 0;
-          height = 0;
-        }
+      var top = (this.y - height);
+      if (top + height + this.padding > maxHeight) {
+        top = maxHeight - height - this.padding;
       }
-      else {
-        width = this.imageObj.width;
-        height = this.imageObj.height;
+      if (top < this.padding) {
+        top = this.padding;
       }
-      this.width  = width;
-      this.height = height;
 
-      this.growthIndicator = 0;
-      if (this.width > 0 && this.height > 0) {
-        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
-        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-        this.growthIndicator = this.width - width;
+      var left = this.x;
+      if (left + width + this.padding > maxWidth) {
+        left = maxWidth - width - this.padding;
       }
-    }
-
-  };
-
-  Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
-
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
-
-    var yLabel;
-    if (this.imageObj.width != 0 ) {
-      // draw the shade
-      if (this.clusterSize > 1) {
-        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
-        lineWidth *= this.networkScaleInv;
-        lineWidth = Math.min(0.2 * this.width,lineWidth);
-
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+      if (left < this.padding) {
+        left = this.padding;
       }
 
-      // draw the image
-      ctx.globalAlpha = 1.0;
-      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-      yLabel = this.y + this.height / 2;
+      this.frame.style.left = left + "px";
+      this.frame.style.top = top + "px";
+      this.frame.style.visibility = "visible";
     }
     else {
-      // image still loading... just draw the label for now
-      yLabel = this.y;
+      this.hide();
     }
-
-    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
   };
 
-
-  Node.prototype._resizeBox = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
-
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-
-    }
+  /**
+   * Hide the popup window
+   */
+  Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
   };
 
-  Node.prototype._drawBox = function (ctx) {
-    this._resizeBox(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  module.exports = Popup;
 
-      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
-      ctx.stroke();
-    }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+/***/ },
+/* 43 */
+/***/ function(module, exports, __webpack_require__) {
 
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
+  /**
+   * Parse a text source containing data in DOT language into a JSON object.
+   * The object contains two lists: one with nodes and one with edges.
+   *
+   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+   *
+   * @param {String} data     Text containing a graph in DOT-notation
+   * @return {Object} graph   An object containing two parameters:
+   *                          {Object[]} nodes
+   *                          {Object[]} edges
+   */
+  function parseDOT (data) {
+    dot = data;
+    return parseGraph();
+  }
 
-    this._label(ctx, this.label, this.x, this.y);
+  // token types enumeration
+  var TOKENTYPE = {
+    NULL : 0,
+    DELIMITER : 1,
+    IDENTIFIER: 2,
+    UNKNOWN : 3
   };
 
+  // map with all delimiters
+  var DELIMITERS = {
+    '{': true,
+    '}': true,
+    '[': true,
+    ']': true,
+    ';': true,
+    '=': true,
+    ',': true,
 
-  Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var size = textSize.width + 2 * margin;
-      this.width = size;
-      this.height = size;
-
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
-    }
+    '->': true,
+    '--': true
   };
 
-  Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+  var dot = '';                   // current dot file
+  var index = 0;                  // current index in dot file
+  var c = '';                     // current token character in expr
+  var token = '';                 // current token
+  var tokenType = TOKENTYPE.NULL; // type of the token
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+  /**
+   * Get the first character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
+   */
+  function first() {
+    index = 0;
+    c = dot.charAt(0);
+  }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * Get the next character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
+   */
+  function next() {
+    index++;
+    c = dot.charAt(index);
+  }
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * Preview the next character from the dot file.
+   * @return {String} cNext
+   */
+  function nextPreview() {
+    return dot.charAt(index + 1);
+  }
 
-      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
-      ctx.stroke();
+  /**
+   * Test whether given character is alphabetic or numeric
+   * @param {String} c
+   * @return {Boolean} isAlphaNumeric
+   */
+  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+  function isAlphaNumeric(c) {
+    return regexAlphaNumeric.test(c);
+  }
+
+  /**
+   * Merge all properties of object b into object b
+   * @param {Object} a
+   * @param {Object} b
+   * @return {Object} a
+   */
+  function merge (a, b) {
+    if (!a) {
+      a = {};
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
+    if (b) {
+      for (var name in b) {
+        if (b.hasOwnProperty(name)) {
+          a[name] = b[name];
+        }
+      }
+    }
+    return a;
+  }
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
-
-
-  Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-      this.radius = diameter / 2;
-
-      this.width = diameter;
-      this.height = diameter;
-
-      // scaling used for clustering
-  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.radius - 0.5*diameter;
+  /**
+   * Set a value in an object, where the provided parameter name can be a
+   * path with nested parameters. For example:
+   *
+   *     var obj = {a: 2};
+   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   *
+   * @param {Object} obj
+   * @param {String} path  A parameter name or dot-separated parameter path,
+   *                      like "color.highlight.border".
+   * @param {*} value
+   */
+  function setValue(obj, path, value) {
+    var keys = path.split('.');
+    var o = obj;
+    while (keys.length) {
+      var key = keys.shift();
+      if (keys.length) {
+        // this isn't the end point
+        if (!o[key]) {
+          o[key] = {};
+        }
+        o = o[key];
+      }
+      else {
+        // this is the end point
+        o[key] = value;
+      }
     }
-  };
-
-  Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  }
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * Add a node to a graph object. If there is already a node with
+   * the same id, their attributes will be merged.
+   * @param {Object} graph
+   * @param {Object} node
+   */
+  function addNode(graph, node) {
+    var i, len;
+    var current = null;
 
-      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
-      ctx.stroke();
+    // find root graph (in case of subgraph)
+    var graphs = [graph]; // list with all graphs from current graph to root graph
+    var root = graph;
+    while (root.parent) {
+      graphs.push(root.parent);
+      root = root.parent;
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
+    // find existing node (at root level) by its id
+    if (root.nodes) {
+      for (i = 0, len = root.nodes.length; i < len; i++) {
+        if (node.id === root.nodes[i].id) {
+          current = root.nodes[i];
+          break;
+        }
+      }
+    }
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    if (!current) {
+      // this is a new node
+      current = {
+        id: node.id
+      };
+      if (graph.node) {
+        // clone default attributes
+        current.attr = merge(current.attr, graph.node);
+      }
+    }
 
-  Node.prototype._resizeEllipse = function (ctx) {
-    if (!this.width) {
-      var textSize = this.getTextSize(ctx);
+    // add node to this (sub)graph and all its parent graphs
+    for (i = graphs.length - 1; i >= 0; i--) {
+      var g = graphs[i];
 
-      this.width = textSize.width * 1.5;
-      this.height = textSize.height * 2;
-      if (this.width < this.height) {
-        this.width = this.height;
+      if (!g.nodes) {
+        g.nodes = [];
+      }
+      if (g.nodes.indexOf(current) == -1) {
+        g.nodes.push(current);
       }
-      var defaultSize = this.width;
-
-        // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - defaultSize;
     }
-  };
-
-  Node.prototype._drawEllipse = function (ctx) {
-    this._resizeEllipse(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+    // merge attributes
+    if (node.attr) {
+      current.attr = merge(current.attr, node.attr);
+    }
+  }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * Add an edge to a graph object
+   * @param {Object} graph
+   * @param {Object} edge
+   */
+  function addEdge(graph, edge) {
+    if (!graph.edges) {
+      graph.edges = [];
+    }
+    graph.edges.push(edge);
+    if (graph.edge) {
+      var attr = merge({}, graph.edge);     // clone default attributes
+      edge.attr = merge(attr, edge.attr); // merge attributes
+    }
+  }
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * Create an edge to a graph object
+   * @param {Object} graph
+   * @param {String | Number | Object} from
+   * @param {String | Number | Object} to
+   * @param {String} type
+   * @param {Object | null} attr
+   * @return {Object} edge
+   */
+  function createEdge(graph, from, to, type, attr) {
+    var edge = {
+      from: from,
+      to: to,
+      type: type
+    };
 
-      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
-      ctx.stroke();
+    if (graph.edge) {
+      edge.attr = merge({}, graph.edge);  // clone default attributes
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    edge.attr = merge(edge.attr || {}, attr); // merge attributes
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    return edge;
+  }
 
-    ctx.ellipse(this.left, this.top, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-    this._label(ctx, this.label, this.x, this.y);
-  };
+  /**
+   * Get next token in the current dot file.
+   * The token and token type are available as token and tokenType
+   */
+  function getToken() {
+    tokenType = TOKENTYPE.NULL;
+    token = '';
 
-  Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
-  };
+    // skip over whitespaces
+    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+      next();
+    }
 
-  Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
-  };
+    do {
+      var isComment = false;
 
-  Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-  };
+      // skip comment
+      if (c == '#') {
+        // find the previous non-space character
+        var i = index - 1;
+        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+          i--;
+        }
+        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+          // the # is at the start of a line, this is indeed a line comment
+          while (c != '' && c != '\n') {
+            next();
+          }
+          isComment = true;
+        }
+      }
+      if (c == '/' && nextPreview() == '/') {
+        // skip line comment
+        while (c != '' && c != '\n') {
+          next();
+        }
+        isComment = true;
+      }
+      if (c == '/' && nextPreview() == '*') {
+        // skip block comment
+        while (c != '') {
+          if (c == '*' && nextPreview() == '/') {
+            // end of block comment found. skip these last two characters
+            next();
+            next();
+            break;
+          }
+          else {
+            next();
+          }
+        }
+        isComment = true;
+      }
 
-  Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
-  };
+      // skip over whitespaces
+      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+        next();
+      }
+    }
+    while (isComment);
 
-  Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
-  };
+    // check for end of dot file
+    if (c == '') {
+      // token is still empty
+      tokenType = TOKENTYPE.DELIMITER;
+      return;
+    }
 
-  Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-      this.radius = this.baseRadiusValue;
-      var size = 2 * this.radius;
-      this.width = size;
-      this.height = size;
+    // check for delimiters consisting of 2 characters
+    var c2 = c + nextPreview();
+    if (DELIMITERS[c2]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c2;
+      next();
+      next();
+      return;
+    }
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+    // check for delimiters consisting of 1 character
+    if (DELIMITERS[c]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c;
+      next();
+      return;
     }
-  };
 
-  Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
+    // check for an identifier (number or string)
+    // TODO: more precise parsing of numbers/strings (and the port separator ':')
+    if (isAlphaNumeric(c) || c == '-') {
+      token += c;
+      next();
 
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+      while (isAlphaNumeric(c)) {
+        token += c;
+        next();
+      }
+      if (token == 'false') {
+        token = false;   // convert to boolean
+      }
+      else if (token == 'true') {
+        token = true;   // convert to boolean
+      }
+      else if (!isNaN(Number(token))) {
+        token = Number(token); // convert to number
+      }
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
+    }
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-    var radiusMultiplier = 2;
+    // check for a string enclosed by double quotes
+    if (c == '"') {
+      next();
+      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+        token += c;
+        if (c == '"') { // skip the escape character
+          next();
+        }
+        next();
+      }
+      if (c != '"') {
+        throw newSyntaxError('End of string " expected');
+      }
+      next();
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
+    }
 
-    // choose draw method depending on the shape
-    switch (shape) {
-      case 'dot':           radiusMultiplier = 2; break;
-      case 'square':        radiusMultiplier = 2; break;
-      case 'triangle':      radiusMultiplier = 3; break;
-      case 'triangleDown':  radiusMultiplier = 3; break;
-      case 'star':          radiusMultiplier = 4; break;
+    // something unknown is found, wrong characters, a syntax error
+    tokenType = TOKENTYPE.UNKNOWN;
+    while (c != '') {
+      token += c;
+      next();
     }
+    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+  }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * Parse a graph.
+   * @returns {Object} graph
+   */
+  function parseGraph() {
+    var graph = {};
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    first();
+    getToken();
 
-      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
-      ctx.stroke();
+    // optional strict keyword
+    if (token == 'strict') {
+      graph.strict = true;
+      getToken();
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
 
-    if (this.label) {
-      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
+    // graph or digraph keyword
+    if (token == 'graph' || token == 'digraph') {
+      graph.type = token;
+      getToken();
     }
-  };
 
-  Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+    // optional graph id
+    if (tokenType == TOKENTYPE.IDENTIFIER) {
+      graph.id = token;
+      getToken();
+    }
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+    // open angle bracket
+    if (token != '{') {
+      throw newSyntaxError('Angle bracket { expected');
     }
-  };
+    getToken();
 
-  Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    // statements
+    parseStatements(graph);
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    // close angle bracket
+    if (token != '}') {
+      throw newSyntaxError('Angle bracket } expected');
+    }
+    getToken();
 
+    // end of file
+    if (token !== '') {
+      throw newSyntaxError('End of file expected');
+    }
+    getToken();
 
-  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = align || "center";
-      ctx.textBaseline = baseline || "middle";
+    // remove temporary default properties
+    delete graph.node;
+    delete graph.edge;
+    delete graph.graph;
 
-      var lines = text.split('\n');
-      var lineCount = lines.length;
-      var fontSize = (this.fontSize + 4);
-      var yLine = y + (1 - lineCount) / 2 * fontSize;
-      if (labelUnderNode == true) {
-        yLine = y + (1 - lineCount) / (2 * fontSize);
-      }
+    return graph;
+  }
 
-      for (var i = 0; i < lineCount; i++) {
-        ctx.fillText(lines[i], x, yLine);
-        yLine += fontSize;
+  /**
+   * Parse a list with statements.
+   * @param {Object} graph
+   */
+  function parseStatements (graph) {
+    while (token !== '' && token != '}') {
+      parseStatement(graph);
+      if (token == ';') {
+        getToken();
       }
     }
-  };
+  }
 
+  /**
+   * Parse a single statement. Can be a an attribute statement, node
+   * statement, a series of node statements and edge statements, or a
+   * parameter.
+   * @param {Object} graph
+   */
+  function parseStatement(graph) {
+    // parse subgraph
+    var subgraph = parseSubgraph(graph);
+    if (subgraph) {
+      // edge statements
+      parseEdge(graph, subgraph);
 
-  Node.prototype.getTextSize = function(ctx) {
-    if (this.label !== undefined) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+      return;
+    }
 
-      var lines = this.label.split('\n'),
-          height = (this.fontSize + 4) * lines.length,
-          width = 0;
+    // parse an attribute statement
+    var attr = parseAttributeStatement(graph);
+    if (attr) {
+      return;
+    }
 
-      for (var i = 0, iMax = lines.length; i < iMax; i++) {
-        width = Math.max(width, ctx.measureText(lines[i]).width);
-      }
+    // parse node
+    if (tokenType != TOKENTYPE.IDENTIFIER) {
+      throw newSyntaxError('Identifier expected');
+    }
+    var id = token; // id can be a string or a number
+    getToken();
 
-      return {"width": width, "height": height};
+    if (token == '=') {
+      // id statement
+      getToken();
+      if (tokenType != TOKENTYPE.IDENTIFIER) {
+        throw newSyntaxError('Identifier expected');
+      }
+      graph[id] = token;
+      getToken();
+      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
     }
     else {
-      return {"width": 0, "height": 0};
+      parseNodeStatement(graph, id);
     }
-  };
+  }
 
   /**
-   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
-   * there is a safety margin of 0.3 * width;
-   *
-   * @returns {boolean}
+   * Parse a subgraph
+   * @param {Object} graph    parent graph object
+   * @return {Object | null} subgraph
    */
-  Node.prototype.inArea = function() {
-    if (this.width !== undefined) {
-    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
-            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
-            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
-            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
-    }
-    else {
-      return true;
-    }
-  };
+  function parseSubgraph (graph) {
+    var subgraph = null;
 
-  /**
-   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
-   * @returns {boolean}
-   */
-  Node.prototype.inView = function() {
-    return (this.x >= this.canvasTopLeft.x    &&
-            this.x < this.canvasBottomRight.x &&
-            this.y >= this.canvasTopLeft.y    &&
-            this.y < this.canvasBottomRight.y);
-  };
+    // optional subgraph keyword
+    if (token == 'subgraph') {
+      subgraph = {};
+      subgraph.type = 'subgraph';
+      getToken();
 
-  /**
-   * This allows the zoom level of the network to influence the rendering
-   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
-   *
-   * @param scale
-   * @param canvasTopLeft
-   * @param canvasBottomRight
-   */
-  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-    this.canvasTopLeft = canvasTopLeft;
-    this.canvasBottomRight = canvasBottomRight;
-  };
+      // optional graph id
+      if (tokenType == TOKENTYPE.IDENTIFIER) {
+        subgraph.id = token;
+        getToken();
+      }
+    }
 
+    // open angle bracket
+    if (token == '{') {
+      getToken();
 
-  /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
-   */
-  Node.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-  };
+      if (!subgraph) {
+        subgraph = {};
+      }
+      subgraph.parent = graph;
+      subgraph.node = graph.node;
+      subgraph.edge = graph.edge;
+      subgraph.graph = graph.graph;
+
+      // statements
+      parseStatements(subgraph);
 
+      // close angle bracket
+      if (token != '}') {
+        throw newSyntaxError('Angle bracket } expected');
+      }
+      getToken();
 
+      // remove temporary default properties
+      delete subgraph.node;
+      delete subgraph.edge;
+      delete subgraph.graph;
+      delete subgraph.parent;
 
-  /**
-   * set the velocity at 0. Is called when this node is contained in another during clustering
-   */
-  Node.prototype.clearVelocity = function() {
-    this.vx = 0;
-    this.vy = 0;
-  };
+      // register at the parent graph
+      if (!graph.subgraphs) {
+        graph.subgraphs = [];
+      }
+      graph.subgraphs.push(subgraph);
+    }
 
+    return subgraph;
+  }
 
   /**
-   * Basic preservation of (kinectic) energy
-   *
-   * @param massBeforeClustering
+   * parse an attribute statement like "node [shape=circle fontSize=16]".
+   * Available keywords are 'node', 'edge', 'graph'.
+   * The previous list with default attributes will be replaced
+   * @param {Object} graph
+   * @returns {String | null} keyword Returns the name of the parsed attribute
+   *                                  (node, edge, graph), or null if nothing
+   *                                  is parsed.
    */
-  Node.prototype.updateVelocity = function(massBeforeClustering) {
-    var energyBefore = this.vx * this.vx * massBeforeClustering;
-    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vx = Math.sqrt(energyBefore/this.mass);
-    energyBefore = this.vy * this.vy * massBeforeClustering;
-    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vy = Math.sqrt(energyBefore/this.mass);
-  };
+  function parseAttributeStatement (graph) {
+    // attribute statements
+    if (token == 'node') {
+      getToken();
 
-  module.exports = Node;
+      // node attributes
+      graph.node = parseAttributeList();
+      return 'node';
+    }
+    else if (token == 'edge') {
+      getToken();
 
+      // edge attributes
+      graph.edge = parseAttributeList();
+      return 'edge';
+    }
+    else if (token == 'graph') {
+      getToken();
 
-/***/ },
-/* 43 */
-/***/ function(module, exports, __webpack_require__) {
+      // graph attributes
+      graph.graph = parseAttributeList();
+      return 'graph';
+    }
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(42);
+    return null;
+  }
 
   /**
-   * @class Edge
-   *
-   * A edge connects two nodes
-   * @param {Object} properties     Object with properties. Must contain
-   *                                At least properties from and to.
-   *                                Available properties: from (number),
-   *                                to (number), label (string, color (string),
-   *                                width (number), style (string),
-   *                                length (number), title (string)
-   * @param {Network} network       A Network object, used to find and edge to
-   *                                nodes.
-   * @param {Object} constants      An object with default values for
-   *                                example for the color
+   * parse a node statement
+   * @param {Object} graph
+   * @param {String | Number} id
    */
-  function Edge (properties, network, constants) {
-    if (!network) {
-      throw "No network provided";
+  function parseNodeStatement(graph, id) {
+    // node statement
+    var node = {
+      id: id
+    };
+    var attr = parseAttributeList();
+    if (attr) {
+      node.attr = attr;
     }
-    this.network = network;
-
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
-
-    // initialize variables
-    this.id     = undefined;
-    this.fromId = undefined;
-    this.toId   = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
-    this.hoverWidth = constants.edges.hoverWidth;
-    this.value  = undefined;
-    this.length = constants.physics.springLength;
-    this.customLength = false;
-    this.selected = false;
-    this.hover = false;
-    this.smoothCurves = constants.smoothCurves;
-    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
-    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
-    this.inheritColor = constants.edges.inheritColor;
-
-    this.from = null;   // a node
-    this.to = null;     // a node
-    this.via = null;    // a temp node
-
-    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
-    // by storing the original information we can revert to the original connection when the cluser is opened.
-    this.originalFromId = [];
-    this.originalToId = [];
-
-    this.connected = false;
-
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
-
-    this.color       = {color:constants.edges.color.color,
-                        highlight:constants.edges.color.highlight,
-                        hover:constants.edges.color.hover};
-    this.widthFixed  = false;
-    this.lengthFixed = false;
-
-    this.setProperties(properties, constants);
+    addNode(graph, node);
 
-    this.controlNodesEnabled = false;
-    this.controlNodes = {from:null, to:null, positions:{}};
-    this.connectedNode = null;
+    // edge statements
+    parseEdge(graph, id);
   }
 
   /**
-   * Set or overwrite properties for the edge
-   * @param {Object} properties  an object with properties
-   * @param {Object} constants   and object with default, global properties
+   * Parse an edge or a series of edges
+   * @param {Object} graph
+   * @param {String | Number} from        Id of the from node
    */
-  Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
-
-    if (properties.from !== undefined)           {this.fromId = properties.from;}
-    if (properties.to !== undefined)             {this.toId = properties.to;}
-
-    if (properties.id !== undefined)             {this.id = properties.id;}
-    if (properties.style !== undefined)          {this.style = properties.style;}
-    if (properties.label !== undefined)          {this.label = properties.label;}
-
-    if (this.label) {
-      this.fontSize = constants.edges.fontSize;
-      this.fontFace = constants.edges.fontFace;
-      this.fontColor = constants.edges.fontColor;
-      this.fontFill = constants.edges.fontFill;
-
-      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
-      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
-      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
-      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
-    }
-
-    if (properties.title !== undefined)        {this.title = properties.title;}
-    if (properties.width !== undefined)        {this.width = properties.width;}
-    if (properties.widthSelectionMultiplier !== undefined)
-                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
-    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
-    if (properties.value !== undefined)        {this.value = properties.value;}
-    if (properties.length !== undefined)       {this.length = properties.length;
-                                                this.customLength = true;}
-
-    // scale the arrow
-    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
-
-    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
-
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dash) {
-      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
-      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
-      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
-    }
+  function parseEdge(graph, from) {
+    while (token == '->' || token == '--') {
+      var to;
+      var type = token;
+      getToken();
 
-    if (properties.color !== undefined) {
-      if (util.isString(properties.color)) {
-        this.color.color = properties.color;
-        this.color.highlight = properties.color;
+      var subgraph = parseSubgraph(graph);
+      if (subgraph) {
+        to = subgraph;
       }
       else {
-        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
-        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
-        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Identifier or subgraph expected');
+        }
+        to = token;
+        addNode(graph, {
+          id: to
+        });
+        getToken();
       }
-    }
-
-    // A node is connected when it has a from and to node.
-    this.connect();
 
-    this.widthFixed = this.widthFixed || (properties.width !== undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
+      // parse edge attributes
+      var attr = parseAttributeList();
 
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
+      // create edge
+      var edge = createEdge(graph, from, to, type, attr);
+      addEdge(graph, edge);
 
-    // set draw method based on style
-    switch (this.style) {
-      case 'line':          this.draw = this._drawLine; break;
-      case 'arrow':         this.draw = this._drawArrow; break;
-      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
-      case 'dash-line':     this.draw = this._drawDashLine; break;
-      default:              this.draw = this._drawLine; break;
+      from = to;
     }
-  };
+  }
 
   /**
-   * Connect an edge to its nodes
+   * Parse a set with attributes,
+   * for example [label="1.000", shape=solid]
+   * @return {Object | null} attr
    */
-  Edge.prototype.connect = function () {
-    this.disconnect();
+  function parseAttributeList() {
+    var attr = null;
 
-    this.from = this.network.nodes[this.fromId] || null;
-    this.to = this.network.nodes[this.toId] || null;
-    this.connected = (this.from && this.to);
+    while (token == '[') {
+      getToken();
+      attr = {};
+      while (token !== '' && token != ']') {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute name expected');
+        }
+        var name = token;
 
-    if (this.connected) {
-      this.from.attachEdge(this);
-      this.to.attachEdge(this);
-    }
-    else {
-      if (this.from) {
-        this.from.detachEdge(this);
-      }
-      if (this.to) {
-        this.to.detachEdge(this);
+        getToken();
+        if (token != '=') {
+          throw newSyntaxError('Equal sign = expected');
+        }
+        getToken();
+
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute value expected');
+        }
+        var value = token;
+        setValue(attr, name, value); // name can be a path
+
+        getToken();
+        if (token ==',') {
+          getToken();
+        }
       }
-    }
-  };
 
-  /**
-   * Disconnect an edge from its nodes
-   */
-  Edge.prototype.disconnect = function () {
-    if (this.from) {
-      this.from.detachEdge(this);
-      this.from = null;
-    }
-    if (this.to) {
-      this.to.detachEdge(this);
-      this.to = null;
+      if (token != ']') {
+        throw newSyntaxError('Bracket ] expected');
+      }
+      getToken();
     }
 
-    this.connected = false;
-  };
+    return attr;
+  }
 
   /**
-   * get the title of this edge.
-   * @return {string} title    The title of the edge, or undefined when no title
-   *                           has been set.
+   * Create a syntax error with extra information on current token and index.
+   * @param {String} message
+   * @returns {SyntaxError} err
    */
-  Edge.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
-  };
-
+  function newSyntaxError(message) {
+    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+  }
 
   /**
-   * Retrieve the value of the edge. Can be undefined
-   * @return {Number} value
+   * Chop off text after a maximum length
+   * @param {String} text
+   * @param {Number} maxLength
+   * @returns {String}
    */
-  Edge.prototype.getValue = function() {
-    return this.value;
-  };
+  function chop (text, maxLength) {
+    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+  }
 
   /**
-   * Adjust the value range of the edge. The edge will adjust it's width
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
+   * Execute a function fn for each pair of elements in two arrays
+   * @param {Array | *} array1
+   * @param {Array | *} array2
+   * @param {function} fn
    */
-  Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-      var scale = (this.widthMax - this.widthMin) / (max - min);
-      this.width = (this.value - min) * scale + this.widthMin;
+  function forEach2(array1, array2, fn) {
+    if (array1 instanceof Array) {
+      array1.forEach(function (elem1) {
+        if (array2 instanceof Array) {
+          array2.forEach(function (elem2)  {
+            fn(elem1, elem2);
+          });
+        }
+        else {
+          fn(elem1, array2);
+        }
+      });
     }
-  };
-
-  /**
-   * Redraw a edge
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
-  };
+    else {
+      if (array2 instanceof Array) {
+        array2.forEach(function (elem2)  {
+          fn(array1, elem2);
+        });
+      }
+      else {
+        fn(array1, array2);
+      }
+    }
+  }
 
   /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top
-   * @return {boolean}     True if location is located on the edge
+   * Convert a string containing a graph in DOT language into a map containing
+   * with nodes and edges in the format of graph.
+   * @param {String} data         Text containing a graph in DOT-notation
+   * @return {Object} graphData
    */
-  Edge.prototype.isOverlappingWith = function(obj) {
-    if (this.connected) {
-      var distMax = 10;
-      var xFrom = this.from.x;
-      var yFrom = this.from.y;
-      var xTo = this.to.x;
-      var yTo = this.to.y;
-      var xObj = obj.left;
-      var yObj = obj.top;
-
-      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+  function DOTToGraph (data) {
+    // parse the DOT file
+    var dotData = parseDOT(data);
+    var graphData = {
+      nodes: [],
+      edges: [],
+      options: {}
+    };
 
-      return (dist < distMax);
-    }
-    else {
-      return false
+    // copy the nodes
+    if (dotData.nodes) {
+      dotData.nodes.forEach(function (dotNode) {
+        var graphNode = {
+          id: dotNode.id,
+          label: String(dotNode.label || dotNode.id)
+        };
+        merge(graphNode, dotNode.attr);
+        if (graphNode.image) {
+          graphNode.shape = 'image';
+        }
+        graphData.nodes.push(graphNode);
+      });
     }
-  };
 
-  Edge.prototype._getColor = function() {
-    var colorObj = this.color;
-    if (this.inheritColor == "to") {
-      colorObj = {
-        highlight: this.to.color.highlight.border,
-        hover: this.to.color.hover.border,
-        color: this.to.color.border
-      };
-    }
-    else if (this.inheritColor == "from" || this.inheritColor == true) {
-      colorObj = {
-        highlight: this.from.color.highlight.border,
-        hover: this.from.color.hover.border,
-        color: this.from.color.border
-      };
-    }
-
-    if (this.selected == true)   {return colorObj.highlight;}
-    else if (this.hover == true) {return colorObj.hover;}
-    else                         {return colorObj.color;}
-  }
-
-
-  /**
-   * Redraw a edge as a line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this._getColor();
-    ctx.lineWidth   = this._getLineWidth();
-
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
-
-      // draw label
-      var point;
-      if (this.label) {
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
-        }
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      var x, y;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
-      }
-      this._circle(ctx, x, y, radius);
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      this._label(ctx, this.label, point.x, point.y);
-    }
-  };
-
-  /**
-   * Get the line width of the edge. Depends on width and whether one of the
-   * connected nodes is selected.
-   * @return {Number} width
-   * @private
-   */
-  Edge.prototype._getLineWidth = function() {
-    if (this.selected == true) {
-      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
-    }
-    else {
-      if (this.hover == true) {
-        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
-      }
-      else {
-        return this.width*this.networkScaleInv;
+    // copy the edges
+    if (dotData.edges) {
+      /**
+       * Convert an edge in DOT format to an edge with VisGraph format
+       * @param {Object} dotEdge
+       * @returns {Object} graphEdge
+       */
+      function convertEdge(dotEdge) {
+        var graphEdge = {
+          from: dotEdge.from,
+          to: dotEdge.to
+        };
+        merge(graphEdge, dotEdge.attr);
+        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+        return graphEdge;
       }
-    }
-  };
-
-  Edge.prototype._getViaCoordinates = function () {
-    var xVia = null;
-    var yVia = null;
-    var factor = this.smoothCurves.roundness;
-    var type = this.smoothCurves.type;
-    if (factor == 0) {
-      return {x:null,y:null};
-    }
 
-    var dx = Math.abs(this.from.x - this.to.x);
-    var dy = Math.abs(this.from.y - this.to.y);
-    if (type == 'discrete' || type == 'diagonalCross') {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-        }
-        if (type == "discrete") {
-          xVia = dx < factor * dy ? this.from.x : xVia;
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-        }
-        if (type == "discrete") {
-          yVia = dy < factor * dx ? this.from.y : yVia;
-        }
-      }
-    }
-    else if (type == "straightCross") {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        xVia = this.from.x;
-        yVia = this.to.y
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        xVia = this.to.x;
-        yVia = this.from.y;
-      }
-    }
-    else if (type == 'horizontal') {
-      xVia = this.to.x;
-      yVia = this.from.y;
-    }
-    else if (type == 'vertical') {
-      xVia = this.from.x;
-      yVia = this.to.y;
-    }
-    else { // continuous
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(1)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(2)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x > xVia ? this.to.x :xVia;
-          }
+      dotData.edges.forEach(function (dotEdge) {
+        var from, to;
+        if (dotEdge.from instanceof Object) {
+          from = dotEdge.from.nodes;
         }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(3)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(4, this.from.x, this.to.x)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x > xVia ? this.to.x : xVia;
+        else {
+          from = {
+            id: dotEdge.from
           }
         }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(5)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(6)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
+
+        if (dotEdge.to instanceof Object) {
+          to = dotEdge.to.nodes;
         }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(7)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(8)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
+        else {
+          to = {
+            id: dotEdge.to
           }
         }
-      }
-    }
 
+        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+          dotEdge.from.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
 
-    return {x:xVia, y:yVia};
-  }
+        forEach2(from, to, function (from, to) {
+          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+          var graphEdge = convertEdge(subEdge);
+          graphData.edges.push(graphEdge);
+        });
 
-  /**
-   * Draw a line between two nodes
-   * @param {CanvasRenderingContext2D} ctx
-   * @private
-   */
-  Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    if (this.smoothCurves.enabled == true) {
-      if (this.smoothCurves.dynamic == false) {
-        var via = this._getViaCoordinates();
-        if (via.x == null) {
-          ctx.lineTo(this.to.x, this.to.y);
-          ctx.stroke();
-          return null;
-        }
-        else {
-  //        this.via.x = via.x;
-  //        this.via.y = via.y;
-          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
-          ctx.stroke();
-          return via;
+        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+          dotEdge.to.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
         }
-      }
-      else {
-        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
-        ctx.stroke();
-        return this.via;
-      }
-    }
-    else {
-      ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return null;
+      });
     }
-  };
-
-  /**
-   * Draw a line from a node to itself, a circle
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @private
-   */
-  Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
-  };
-
-  /**
-   * Draw label with white background and with the middle at (x, y)
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {Number} x
-   * @param {Number} y
-   * @private
-   */
-  Edge.prototype._label = function (ctx, text, x, y) {
-    if (text) {
-      // TODO: cache the calculated size
-      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-          this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontFill;
-      var width = ctx.measureText(text).width;
-      var height = this.fontSize;
-      var left = x - width / 2;
-      var top = y - height / 2;
 
-      ctx.fillRect(left, top, width, height);
-
-      // draw text
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = "left";
-      ctx.textBaseline = "top";
-      ctx.fillText(text, left, top);
+    // copy the options
+    if (dotData.attr) {
+      graphData.options = dotData.attr;
     }
-  };
 
-  /**
-   * Redraw a edge as a dashed line
-   * Draw this edge in the given canvas
-   * @author David Jordan
-   * @date 2012-08-08
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;}
+    return graphData;
+  }
 
-    ctx.lineWidth = this._getLineWidth();
+  // exports
+  exports.parseDOT = parseDOT;
+  exports.DOTToGraph = DOTToGraph;
 
-    var via = null;
-    // only firefox and chrome support this method, else we use the legacy one.
-    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
-      // configure the dash pattern
-      var pattern = [0];
-      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
-        pattern = [this.dash.length,this.dash.gap];
-      }
-      else {
-        pattern = [5,5];
-      }
 
-      // set dash settings for chrome or firefox
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash(pattern);
-        ctx.lineDashOffset = 0;
+/***/ },
+/* 44 */
+/***/ function(module, exports, __webpack_require__) {
 
-      } else { //Firefox
-        ctx.mozDash = pattern;
-        ctx.mozDashOffset = 0;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Moroccan Arabic (ar-ma)
+  // author : ElFadili Yassine : https://github.com/ElFadiliY
+  // author : Abdel Said : https://github.com/abdelsaid
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('ar-ma', {
+          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // draw the line
-      via = this._line(ctx);
 
-      // restore the dash settings.
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash([0]);
-        ctx.lineDashOffset = 0;
+/***/ },
+/* 45 */
+/***/ function(module, exports, __webpack_require__) {
 
-      } else { //Firefox
-        ctx.mozDash = [0];
-        ctx.mozDashOffset = 0;
-      }
-    }
-    else { // unsupporting smooth lines
-      // draw dashed line
-      ctx.beginPath();
-      ctx.lineCap = 'round';
-      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
-      }
-      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap]);
-      }
-      else //If all else fails draw a line
-      {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
-      }
-      ctx.stroke();
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic Saudi Arabia (ar-sa)
+  // author : Suhail Alkowaileet : https://github.com/xsoh
 
-    // draw label
-    if (this.label) {
-      var point;
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      this._label(ctx, this.label, point.x, point.y);
-    }
-  };
-
-  /**
-   * Get a point on a line
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnLine = function (percentage) {
-    return {
-      x: (1 - percentage) * this.from.x + percentage * this.to.x,
-      y: (1 - percentage) * this.from.y + percentage * this.to.y
-    }
-  };
-
-  /**
-   * Get a point on a circle
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-      x: x + radius * Math.cos(angle),
-      y: y - radius * Math.sin(angle)
-    }
-  };
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
 
-  /**
-   * Redraw a edge as a line with an arrow halfway the line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawArrowCenter = function(ctx) {
-    var point;
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-    ctx.lineWidth = this._getLineWidth();
+      return moment.lang('ar-sa', {
+          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
 
-      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      // draw an arrow halfway the line
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
-      }
+/***/ },
+/* 46 */
+/***/ function(module, exports, __webpack_require__) {
 
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic (ar)
+  // author : Abdel Said : https://github.com/abdelsaid
+  // changes in months, weekdays : Ahmed Elkhatib
 
-      // draw label
-      if (this.label) {
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      // draw circle
-      var x, y;
-      var radius = 0.25 * Math.max(100,this.length);
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      this._circle(ctx, x, y, radius);
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
 
-      // draw all arrows
-      var angle = 0.2 * Math.PI;
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+      return moment.lang('ar', {
+          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-  };
 
+/***/ },
+/* 47 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : azerbaijani (az)
+  // author : topchiyev : https://github.com/topchiyev
 
-  /**
-   * Redraw a edge as a line with an arrow
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawArrow = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-    ctx.lineWidth = this._getLineWidth();
+      var suffixes = {
+          1: "-inci",
+          5: "-inci",
+          8: "-inci",
+          70: "-inci",
+          80: "-inci",
 
-    var angle, length;
-    //draw a line
-    if (this.from != this.to) {
-      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var dx = (this.to.x - this.from.x);
-      var dy = (this.to.y - this.from.y);
-      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+          2: "-nci",
+          7: "-nci",
+          20: "-nci",
+          50: "-nci",
 
-      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+          3: "-üncü",
+          4: "-üncü",
+          100: "-üncü",
 
-      var via;
-      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
-        via = this.via;
-      }
-      else if (this.smoothCurves.enabled == true) {
-        via = this._getViaCoordinates();
-      }
+          6: "-ncı",
 
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-        dx = (this.to.x - via.x);
-        dy = (this.to.y - via.y);
-        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-      }
-      var toBorderDist = this.to.distanceToBorder(ctx, angle);
-      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+          9: "-uncu",
+          10: "-uncu",
+          30: "-uncu",
 
-      var xTo,yTo;
-      if (this.smoothCurves.enabled == true && via.x != null) {
-       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-      }
-      else {
-        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-      }
+          60: "-ıncı",
+          90: "-ıncı"
+      };
+      return moment.lang('az', {
+          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
+          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
+          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
+          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
+          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[sabah saat] LT',
+              nextWeek : '[gələn həftə] dddd [saat] LT',
+              lastDay : '[dünən] LT',
+              lastWeek : '[keçən həftə] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s əvvəl",
+              s : "birneçə saniyyə",
+              m : "bir dəqiqə",
+              mm : "%d dəqiqə",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir il",
+              yy : "%d il"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "gecə";
+              } else if (hour < 12) {
+                  return "səhər";
+              } else if (hour < 17) {
+                  return "gündüz";
+              } else {
+                  return "axşam";
+              }
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "-ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
 
-      ctx.beginPath();
-      ctx.moveTo(xFrom,yFrom);
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
-      }
-      else {
-        ctx.lineTo(xTo, yTo);
-      }
-      ctx.stroke();
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // draw arrow at the end of the line
-      length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(xTo, yTo, angle, length);
-      ctx.fill();
-      ctx.stroke();
 
-      // draw label
-      if (this.label) {
-        var point;
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
-        }
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      // draw circle
-      var node = this.from;
-      var x, y, arrow;
-      var radius = 0.25 * Math.max(100,this.length);
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-        arrow = {
-          x: x,
-          y: node.y,
-          angle: 0.9 * Math.PI
-        };
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-        arrow = {
-          x: node.x,
-          y: y,
-          angle: 0.6 * Math.PI
-        };
-      }
-      ctx.beginPath();
-      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-      ctx.stroke();
+/***/ },
+/* 48 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // draw all arrows
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-      ctx.fill();
-      ctx.stroke();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bulgarian (bg)
+  // author : Krasen Borisov : https://github.com/kraz
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-
-
-  /**
-   * Calculate the distance between a point (x3,y3) and a line segment from
-   * (x1,y1) to (x2,y2).
-   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
-   * @param {number} x1
-   * @param {number} y1
-   * @param {number} x2
-   * @param {number} y2
-   * @param {number} x3
-   * @param {number} y3
-   * @private
-   */
-  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    if (this.from != this.to) {
-      if (this.smoothCurves.enabled == true) {
-        var xVia, yVia;
-        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
-          xVia = this.via.x;
-          yVia = this.via.y;
-        }
-        else {
-          var via = this._getViaCoordinates();
-          xVia = via.x;
-          yVia = via.y;
-        }
-        var minDistance = 1e9;
-        var i,t,x,y,dx,dy;
-        for (i = 0; i < 10; i++) {
-          t = 0.1*i;
-          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
-          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
-          dx = Math.abs(x3-x);
-          dy = Math.abs(y3-y);
-          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
-        }
-        return minDistance
-      }
-      else {
-        var px = x2-x1,
-            py = y2-y1,
-            something = px*px + py*py,
-            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+  }(function (moment) {
+      return moment.lang('bg', {
+          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
+          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Днес в] LT',
+              nextDay : '[Утре в] LT',
+              nextWeek : 'dddd [в] LT',
+              lastDay : '[Вчера в] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[В изминалата] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[В изминалия] dddd [в] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "след %s",
+              past : "преди %s",
+              s : "няколко секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дни",
+              M : "месец",
+              MM : "%d месеца",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
+              }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-        if (u > 1) {
-          u = 1;
-        }
-        else if (u < 0) {
-          u = 0;
-        }
 
-        var x = x1 + u * px,
-            y = y1 + u * py,
-            dx = x - x3,
-            dy = y - y3;
+/***/ },
+/* 49 */
+/***/ function(module, exports, __webpack_require__) {
 
-        //# Note: If the actual distance does not matter,
-        //# if you only want to compare what this function
-        //# returns to other results of this function, you
-        //# can just return the squared distance instead
-        //# (i.e. remove the sqrt) to gain a little performance
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bengali (bn)
+  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
 
-        return Math.sqrt(dx*dx + dy*dy);
-      }
-    }
-    else {
-      var x, y, dx, dy;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      dx = x - x3;
-      dy = y - y3;
-      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
-    }
-  };
+  }(function (moment) {
+      var symbolMap = {
+          '1': '১',
+          '2': '২',
+          '3': '৩',
+          '4': '৪',
+          '5': '৫',
+          '6': '৬',
+          '7': '৭',
+          '8': '৮',
+          '9': '৯',
+          '0': '০'
+      },
+      numberMap = {
+          '১': '1',
+          '২': '2',
+          '৩': '3',
+          '৪': '4',
+          '৫': '5',
+          '৬': '6',
+          '৭': '7',
+          '৮': '8',
+          '৯': '9',
+          '০': '0'
+      };
 
+      return moment.lang('bn', {
+          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
+          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
+          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
+          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
+          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm সময়",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[আজ] LT',
+              nextDay : '[আগামীকাল] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[গতকাল] LT',
+              lastWeek : '[গত] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s পরে",
+              past : "%s আগে",
+              s : "কএক সেকেন্ড",
+              m : "এক মিনিট",
+              mm : "%d মিনিট",
+              h : "এক ঘন্টা",
+              hh : "%d ঘন্টা",
+              d : "এক দিন",
+              dd : "%d দিন",
+              M : "এক মাস",
+              MM : "%d মাস",
+              y : "এক বছর",
+              yy : "%d বছর"
+          },
+          preparse: function (string) {
+              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          //Bengali is a vast language its spoken 
+          //in different forms in various parts of the world.
+          //I have just generalized with most common one used
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "রাত";
+              } else if (hour < 10) {
+                  return "শকাল";
+              } else if (hour < 17) {
+                  return "দুপুর";
+              } else if (hour < 20) {
+                  return "বিকেল";
+              } else {
+                  return "রাত";
+              }
+          },
+          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 allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
-   */
-  Edge.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-  };
+/***/ },
+/* 50 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : breton (br)
+  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
 
-  Edge.prototype.select = function() {
-    this.selected = true;
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function relativeTimeWithMutation(number, withoutSuffix, key) {
+          var format = {
+              'mm': "munutenn",
+              'MM': "miz",
+              'dd': "devezh"
+          };
+          return number + ' ' + mutation(format[key], number);
+      }
 
-  Edge.prototype.unselect = function() {
-    this.selected = false;
-  };
+      function specialMutationForYears(number) {
+          switch (lastNumber(number)) {
+          case 1:
+          case 3:
+          case 4:
+          case 5:
+          case 9:
+              return number + ' bloaz';
+          default:
+              return number + ' vloaz';
+          }
+      }
 
-  Edge.prototype.positionBezierNode = function() {
-    if (this.via !== null) {
-      this.via.x = 0.5 * (this.from.x + this.to.x);
-      this.via.y = 0.5 * (this.from.y + this.to.y);
-    }
-  };
+      function lastNumber(number) {
+          if (number > 9) {
+              return lastNumber(number % 10);
+          }
+          return number;
+      }
 
-  /**
-   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
-   * @param ctx
-   */
-  Edge.prototype._drawControlNodes = function(ctx) {
-    if (this.controlNodesEnabled == true) {
-      if (this.controlNodes.from === null && this.controlNodes.to === null) {
-        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
-        var nodeIdTo = "edgeIdTo:".concat(this.id);
-        var constants = {
-                        nodes:{group:'', radius:8},
-                        physics:{damping:0},
-                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
-                        };
-        this.controlNodes.from = new Node(
-          {id:nodeIdFrom,
-            shape:'dot',
-              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-        this.controlNodes.to = new Node(
-          {id:nodeIdTo,
-            shape:'dot',
-            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
+      function mutation(text, number) {
+          if (number === 2) {
+              return softMutation(text);
+          }
+          return text;
       }
 
-      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
-        this.controlNodes.positions = this.getControlNodePositions(ctx);
-        this.controlNodes.from.x = this.controlNodes.positions.from.x;
-        this.controlNodes.from.y = this.controlNodes.positions.from.y;
-        this.controlNodes.to.x = this.controlNodes.positions.to.x;
-        this.controlNodes.to.y = this.controlNodes.positions.to.y;
+      function softMutation(text) {
+          var mutationTable = {
+              'm': 'v',
+              'b': 'v',
+              'd': 'z'
+          };
+          if (mutationTable[text.charAt(0)] === undefined) {
+              return text;
+          }
+          return mutationTable[text.charAt(0)] + text.substring(1);
       }
 
-      this.controlNodes.from.draw(ctx);
-      this.controlNodes.to.draw(ctx);
-    }
-    else {
-      this.controlNodes = {from:null, to:null, positions:{}};
-    }
-  };
+      return moment.lang('br', {
+          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
+          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
+          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
+          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
+          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
+          longDateFormat : {
+              LT : "h[e]mm A",
+              L : "DD/MM/YYYY",
+              LL : "D [a viz] MMMM YYYY",
+              LLL : "D [a viz] MMMM YYYY LT",
+              LLLL : "dddd, D [a viz] MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Hiziv da] LT',
+              nextDay : '[Warc\'hoazh da] LT',
+              nextWeek : 'dddd [da] LT',
+              lastDay : '[Dec\'h da] LT',
+              lastWeek : 'dddd [paset da] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "a-benn %s",
+              past : "%s 'zo",
+              s : "un nebeud segondennoù",
+              m : "ur vunutenn",
+              mm : relativeTimeWithMutation,
+              h : "un eur",
+              hh : "%d eur",
+              d : "un devezh",
+              dd : relativeTimeWithMutation,
+              M : "ur miz",
+              MM : relativeTimeWithMutation,
+              y : "ur bloaz",
+              yy : specialMutationForYears
+          },
+          ordinal : function (number) {
+              var output = (number === 1) ? 'añ' : 'vet';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * Enable control nodes.
-   * @private
-   */
-  Edge.prototype._enableControlNodes = function() {
-    this.controlNodesEnabled = true;
-  };
 
-  /**
-   * disable control nodes
-   * @private
-   */
-  Edge.prototype._disableControlNodes = function() {
-    this.controlNodesEnabled = false;
-  };
+/***/ },
+/* 51 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
-   * @param x
-   * @param y
-   * @returns {null}
-   * @private
-   */
-  Edge.prototype._getSelectedControlNode = function(x,y) {
-    var positions = this.controlNodes.positions;
-    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
-    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bosnian (bs)
+  // author : Nedim Cholich : https://github.com/frontyard
+  // based on (hr) translation by Bojan Marković
 
-    if (fromDistance < 15) {
-      this.connectedNode = this.from;
-      this.from = this.controlNodes.from;
-      return this.controlNodes.from;
-    }
-    else if (toDistance < 15) {
-      this.connectedNode = this.to;
-      this.to = this.controlNodes.to;
-      return this.controlNodes.to;
-    }
-    else {
-      return null;
-    }
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
 
-  /**
-   * this resets the control nodes to their original position.
-   * @private
-   */
-  Edge.prototype._restoreControlNodes = function() {
-    if (this.controlNodes.from.selected == true) {
-      this.from = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.from.unselect();
-    }
-    if (this.controlNodes.to.selected == true) {
-      this.to = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.to.unselect();
-    }
-  };
-
-  /**
-   * this calculates the position of the control nodes on the edges of the parent nodes.
-   *
-   * @param ctx
-   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
-   */
-  Edge.prototype.getControlNodePositions = function(ctx) {
-    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-    var dx = (this.to.x - this.from.x);
-    var dy = (this.to.y - this.from.y);
-    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
-    var via;
-    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
-      via = this.via;
-    }
-    else if (this.smoothCurves.enabled == true) {
-      via = this._getViaCoordinates();
-    }
-
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-      dx = (this.to.x - via.x);
-      dy = (this.to.y - via.y);
-      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    }
-    var toBorderDist = this.to.distanceToBorder(ctx, angle);
-    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
-
-    var xTo,yTo;
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-    }
-    else {
-      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-    }
+      return moment.lang('bs', {
+  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
+  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
 
-    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
-  };
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  module.exports = Edge;
 
 /***/ },
-/* 44 */
+/* 52 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Popup is a class to create a popup window with some text
-   * @param {Element}  container     The container object.
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {String} [text]
-   * @param {Object} [style]     An object containing borderColor,
-   *                             backgroundColor, etc.
-   */
-  function Popup(container, x, y, text, style) {
-    if (container) {
-      this.container = container;
-    }
-    else {
-      this.container = document.body;
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : catalan (ca)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
-    // x, y and text are optional, see if a style object was passed in their place
-    if (style === undefined) {
-      if (typeof x === "object") {
-        style = x;
-        x = undefined;
-      } else if (typeof text === "object") {
-        style = text;
-        text = undefined;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
       } else {
-        // for backwards compatibility, in case clients other than Network are creating Popup directly
-        style = {
-          fontColor: 'black',
-          fontSize: 14, // px
-          fontFace: 'verdana',
-          color: {
-            border: '#666',
-            background: '#FFFFC6'
-          }
-        }
+          factory(window.moment); // Browser global
       }
-    }
-
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
-
-    if (x !== undefined && y !== undefined ) {
-      this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-      this.setText(text);
-    }
-
-    // create the frame
-    this.frame = document.createElement("div");
-    var styleAttr = this.frame.style;
-    styleAttr.position = "absolute";
-    styleAttr.visibility = "hidden";
-    styleAttr.border = "1px solid " + style.color.border;
-    styleAttr.color = style.fontColor;
-    styleAttr.fontSize = style.fontSize + "px";
-    styleAttr.fontFamily = style.fontFace;
-    styleAttr.padding = this.padding + "px";
-    styleAttr.backgroundColor = style.color.background;
-    styleAttr.borderRadius = "3px";
-    styleAttr.MozBorderRadius = "3px";
-    styleAttr.WebkitBorderRadius = "3px";
-    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    styleAttr.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
-  }
-
-  /**
-   * @param {number} x   Horizontal position of the popup window
-   * @param {number} y   Vertical position of the popup window
-   */
-  Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
-  };
+  }(function (moment) {
+      return moment.lang('ca', {
+          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
+          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
+          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
+          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
+          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextDay : function () {
+                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "en %s",
+              past : "fa %s",
+              s : "uns segons",
+              m : "un minut",
+              mm : "%d minuts",
+              h : "una hora",
+              hh : "%d hores",
+              d : "un dia",
+              dd : "%d dies",
+              M : "un mes",
+              MM : "%d mesos",
+              y : "un any",
+              yy : "%d anys"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * Set the text for the popup window. This can be HTML code
-   * @param {string} text
-   */
-  Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
-  };
 
-  /**
-   * Show the popup window
-   * @param {boolean} show    Optional. Show or hide the window
-   */
-  Popup.prototype.show = function (show) {
-    if (show === undefined) {
-      show = true;
-    }
+/***/ },
+/* 53 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (show) {
-      var height = this.frame.clientHeight;
-      var width =  this.frame.clientWidth;
-      var maxHeight = this.frame.parentNode.clientHeight;
-      var maxWidth = this.frame.parentNode.clientWidth;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : czech (cs)
+  // author : petrbela : https://github.com/petrbela
 
-      var top = (this.y - height);
-      if (top + height + this.padding > maxHeight) {
-        top = maxHeight - height - this.padding;
-      }
-      if (top < this.padding) {
-        top = this.padding;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
+          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
 
-      var left = this.x;
-      if (left + width + this.padding > maxWidth) {
-        left = maxWidth - width - this.padding;
-      }
-      if (left < this.padding) {
-        left = this.padding;
+      function plural(n) {
+          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
       }
 
-      this.frame.style.left = left + "px";
-      this.frame.style.top = top + "px";
-      this.frame.style.visibility = "visible";
-    }
-    else {
-      this.hide();
-    }
-  };
-
-  /**
-   * Hide the popup window
-   */
-  Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
-  };
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minuty' : 'minut');
+              } else {
+                  return result + 'minutami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodin');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dny' : 'dní');
+              } else {
+                  return result + 'dny';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'měsíce' : 'měsíců');
+              } else {
+                  return result + 'měsíci';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'let');
+              } else {
+                  return result + 'lety';
+              }
+              break;
+          }
+      }
 
-  module.exports = Popup;
+      return moment.lang('cs', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
+          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
+          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
+          longDateFormat : {
+              LT: "H.mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes v] LT",
+              nextDay: '[zítra v] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [v] LT';
+                  case 3:
+                      return '[ve středu v] LT';
+                  case 4:
+                      return '[ve čtvrtek v] LT';
+                  case 5:
+                      return '[v pátek v] LT';
+                  case 6:
+                      return '[v sobotu v] LT';
+                  }
+              },
+              lastDay: '[včera v] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulou neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[minulé] dddd [v] LT';
+                  case 3:
+                      return '[minulou středu v] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [v] LT';
+                  case 6:
+                      return '[minulou sobotu v] LT';
+                  }
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "před %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 45 */
+/* 54 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var PhysicsMixin = __webpack_require__(46);
-  var ClusterMixin = __webpack_require__(47);
-  var SectorsMixin = __webpack_require__(48);
-  var SelectionMixin = __webpack_require__(49);
-  var ManipulationMixin = __webpack_require__(50);
-  var NavigationMixin = __webpack_require__(51);
-  var HierarchicalLayoutMixin = __webpack_require__(52);
-
-  /**
-   * Load a mixin into the network object
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
-   * @private
-   */
-  exports._loadMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = sourceVariable[mixinFunction];
-      }
-    }
-  };
-
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chuvash (cv)
+  // author : Anatoly Mironov : https://github.com/mirontoli
 
-  /**
-   * removes a mixin from the network object.
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
-   * @private
-   */
-  exports._clearMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = undefined;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-
-  /**
-   * Mixin the physics system and initialize the parameters required.
-   *
-   * @private
-   */
-  exports._loadPhysicsSystem = function () {
-    this._loadMixin(PhysicsMixin);
-    this._loadSelectedForceSolver();
-    if (this.constants.configurePhysics == true) {
-      this._loadPhysicsConfiguration();
-    }
-  };
-
-
-  /**
-   * Mixin the cluster system and initialize the parameters required.
-   *
-   * @private
-   */
-  exports._loadClusterSystem = function () {
-    this.clusterSession = 0;
-    this.hubThreshold = 5;
-    this._loadMixin(ClusterMixin);
-  };
-
+  }(function (moment) {
+      return moment.lang('cv', {
+          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
+          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
+          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
+          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
+          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
+              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
+              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
+          },
+          calendar : {
+              sameDay: '[Паян] LT [сехетре]',
+              nextDay: '[Ыран] LT [сехетре]',
+              lastDay: '[Ĕнер] LT [сехетре]',
+              nextWeek: '[Çитес] dddd LT [сехетре]',
+              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : function (output) {
+                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
+                  return output + affix;
+              },
+              past : "%s каялла",
+              s : "пĕр-ик çеккунт",
+              m : "пĕр минут",
+              mm : "%d минут",
+              h : "пĕр сехет",
+              hh : "%d сехет",
+              d : "пĕр кун",
+              dd : "%d кун",
+              M : "пĕр уйăх",
+              MM : "%d уйăх",
+              y : "пĕр çул",
+              yy : "%d çул"
+          },
+          ordinal : '%d-мĕш',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * Mixin the sector system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadSectorSystem = function () {
-    this.sectors = {};
-    this.activeSector = ["default"];
-    this.sectors["active"] = {};
-    this.sectors["active"]["default"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
-    this.sectors["frozen"] = {};
-    this.sectors["support"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
 
-    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
+/***/ },
+/* 55 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this._loadMixin(SectorsMixin);
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Welsh (cy)
+  // author : Robert Allen
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang("cy", {
+          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
+          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
+          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
+          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
+          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
+          // time formats are the same as en-gb
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[Heddiw am] LT',
+              nextDay: '[Yfory am] LT',
+              nextWeek: 'dddd [am] LT',
+              lastDay: '[Ddoe am] LT',
+              lastWeek: 'dddd [diwethaf am] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "mewn %s",
+              past: "%s yn ôl",
+              s: "ychydig eiliadau",
+              m: "munud",
+              mm: "%d munud",
+              h: "awr",
+              hh: "%d awr",
+              d: "diwrnod",
+              dd: "%d diwrnod",
+              M: "mis",
+              MM: "%d mis",
+              y: "blwyddyn",
+              yy: "%d flynedd"
+          },
+          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
+          ordinal: function (number) {
+              var b = number,
+                  output = '',
+                  lookup = [
+                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
+                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
+                  ];
 
-  /**
-   * Mixin the selection system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadSelectionSystem = function () {
-    this.selectionObj = {nodes: {}, edges: {}};
+              if (b > 20) {
+                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
+                      output = 'fed'; // not 30ain, 70ain or 90ain
+                  } else {
+                      output = 'ain';
+                  }
+              } else if (b > 0) {
+                  output = lookup[b];
+              }
 
-    this._loadMixin(SelectionMixin);
-  };
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * Mixin the navigationUI (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadManipulationSystem = function () {
-    // reset global variables -- these are used by the selection of nodes and edges.
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+/***/ },
+/* 56 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (this.constants.dataManipulation.enabled == true) {
-      // load the manipulator HTML elements. All styling done in css.
-      if (this.manipulationDiv === undefined) {
-        this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'network-manipulationDiv';
-        this.manipulationDiv.id = 'network-manipulationDiv';
-        if (this.editMode == true) {
-          this.manipulationDiv.style.display = "block";
-        }
-        else {
-          this.manipulationDiv.style.display = "none";
-        }
-        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : danish (da)
+  // author : Ulrik Nielsen : https://github.com/mrbase
 
-      if (this.editModeDiv === undefined) {
-        this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'network-manipulation-editMode';
-        this.editModeDiv.id = 'network-manipulation-editMode';
-        if (this.editMode == true) {
-          this.editModeDiv.style.display = "none";
-        }
-        else {
-          this.editModeDiv.style.display = "block";
-        }
-        this.containerElement.insertBefore(this.editModeDiv, this.frame);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('da', {
+          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd [d.] D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[I dag kl.] LT',
+              nextDay : '[I morgen kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[I går kl.] LT',
+              lastWeek : '[sidste] dddd [kl] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "%s siden",
+              s : "få sekunder",
+              m : "et minut",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dage",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "et år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      if (this.closeDiv === undefined) {
-        this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'network-manipulation-closeDiv';
-        this.closeDiv.id = 'network-manipulation-closeDiv';
-        this.closeDiv.style.display = this.manipulationDiv.style.display;
-        this.containerElement.insertBefore(this.closeDiv, this.frame);
-      }
 
-      // load the manipulation functions
-      this._loadMixin(ManipulationMixin);
+/***/ },
+/* 57 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // create the manipulator toolbar
-      this._createManipulatorBar();
-    }
-    else {
-      if (this.manipulationDiv !== undefined) {
-        // removes all the bindings and overloads
-        this._createManipulatorBar();
-        // remove the manipulation divs
-        this.containerElement.removeChild(this.manipulationDiv);
-        this.containerElement.removeChild(this.editModeDiv);
-        this.containerElement.removeChild(this.closeDiv);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : austrian german (de-at)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
+  // author : Martin Groller : https://github.com/MadMG
 
-        this.manipulationDiv = undefined;
-        this.editModeDiv = undefined;
-        this.closeDiv = undefined;
-        // remove the mixin functions
-        this._clearMixin(ManipulationMixin);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
       }
-    }
-  };
-
-
-  /**
-   * Mixin the navigation (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadNavigationControls = function () {
-    this._loadMixin(NavigationMixin);
-
-    // the clean function removes the button divs, this is done to remove the bindings.
-    this._cleanNavigation();
-    if (this.constants.navigation.enabled == true) {
-      this._loadNavigationElements();
-    }
-  };
-
 
-  /**
-   * Mixin the hierarchical layout system.
-   *
-   * @private
-   */
-  exports._loadHierarchySystem = function () {
-    this._loadMixin(HierarchicalLayoutMixin);
-  };
+      return moment.lang('de-at', {
+          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
+          },
+          relativeTime : {
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 46 */
+/* 58 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var RepulsionMixin = __webpack_require__(128);
-  var HierarchialRepulsionMixin = __webpack_require__(129);
-  var BarnesHutMixin = __webpack_require__(130);
-
-  /**
-   * 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();
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : german (de)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
 
-  /**
-   * 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);
+      return moment.lang('de', {
+          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
+          },
+          relativeTime : {
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      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;
 
-      this._loadMixin(BarnesHutMixin);
-    }
-    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(RepulsionMixin);
+/***/ },
+/* 59 */
+/***/ function(module, exports, __webpack_require__) {
 
-      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 __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : modern greek (el)
+  // author : Aggelos Karalias : https://github.com/mehiel
 
-      this._loadMixin(HierarchialRepulsionMixin);
-    }
-    else {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
-      this.barnesHutTree = undefined;
-
-      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;
-
-      this._loadMixin(RepulsionMixin);
-    }
-  };
-
-  /**
-   * 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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('el', {
+          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
+          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
+          months : function (momentToFormat, format) {
+              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
+                  return this._monthsGenitiveEl[momentToFormat.month()];
+              } else {
+                  return this._monthsNominativeEl[momentToFormat.month()];
+              }
+          },
+          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
+          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
+          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
+          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'μμ' : 'ΜΜ';
+              } else {
+                  return isLower ? 'πμ' : 'ΠΜ';
+              }
+          },
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendarEl : {
+              sameDay : '[Σήμερα {}] LT',
+              nextDay : '[Αύριο {}] LT',
+              nextWeek : 'dddd [{}] LT',
+              lastDay : '[Χθες {}] LT',
+              lastWeek : function() {
+                  switch (this.day()) {
+                      case 6:
+                          return '[το προηγούμενο] dddd [{}] LT';
+                      default:
+                          return '[την προηγούμενη] dddd [{}] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          calendar : function (key, mom) {
+              var output = this._calendarEl[key],
+                  hours = mom && mom.hours();
 
-      // we now start the force calculation
-      this._calculateForces();
-    }
-  };
-
-
-  /**
-   * 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
+              if (typeof output === 'function') {
+                  output = output.apply(mom);
+              }
 
-    this._calculateGravitationalForces();
-    this._calculateNodeForces();
+              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
+          },
+          relativeTime : {
+              future : "σε %s",
+              past : "%s πριν",
+              s : "δευτερόλεπτα",
+              m : "ένα λεπτό",
+              mm : "%d λεπτά",
+              h : "μία ώρα",
+              hh : "%d ώρες",
+              d : "μία μέρα",
+              dd : "%d μέρες",
+              M : "ένας μήνας",
+              MM : "%d μήνες",
+              y : "ένας χρόνος",
+              yy : "%d χρόνια"
+          },
+          ordinal : function (number) {
+              return number + 'η';
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4st is the first week of the year.
+          }
+      });
+  }));
 
-    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();
-        }
-      }
-    }
-  };
 
+/***/ },
+/* 60 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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.
-   *
-   * @private
-   */
-  exports._updateCalculationNodes = function () {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this.calculationNodes = {};
-      this.calculationNodeIndices = [];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : australian english (en-au)
 
-      for (var nodeId in this.nodes) {
-        if (this.nodes.hasOwnProperty(nodeId)) {
-          this.calculationNodes[nodeId] = this.nodes[nodeId];
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      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);
+  }(function (moment) {
+      return moment.lang('en-au', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-
-      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
-   */
-  exports._calculateGravitationalForces = function () {
-    var dx, dy, distance, node, i;
-    var nodes = this.calculationNodes;
-    var gravity = this.constants.physics.centralGravity;
-    var gravityForce = 0;
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
 
-    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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : canadian english (en-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
 
-        gravityForce = (distance == 0) ? 0 : (gravity / distance);
-        node.fx = dx * gravityForce;
-        node.fy = dy * gravityForce;
-      }
-      else {
-        node.fx = 0;
-        node.fy = 0;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-
+  }(function (moment) {
+      return moment.lang('en-ca', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM, YYYY",
+              LLL : "D MMMM, YYYY LT",
+              LLLL : "dddd, D MMMM, YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          }
+      });
+  }));
 
 
-  /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
-   * @private
-   */
-  exports._calculateSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+/***/ },
+/* 62 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // 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.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : great britain english (en-gb)
+  // author : Chris Gedrim : https://github.com/chrisgedrim
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('en-gb', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+/***/ },
+/* 63 */
+/***/ function(module, exports, __webpack_require__) {
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : esperanto (eo)
+  // author : Colin Dean : https://github.com/colindean
+  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
+  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
 
-            edge.from.fx += fx;
-            edge.from.fy += fy;
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-          }
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('eo', {
+          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
+          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
+          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D[-an de] MMMM, YYYY",
+              LLL : "D[-an de] MMMM, YYYY LT",
+              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'p.t.m.' : 'P.T.M.';
+              } else {
+                  return isLower ? 'a.t.m.' : 'A.T.M.';
+              }
+          },
+          calendar : {
+              sameDay : '[Hodiaŭ je] LT',
+              nextDay : '[Morgaŭ je] LT',
+              nextWeek : 'dddd [je] LT',
+              lastDay : '[Hieraŭ je] LT',
+              lastWeek : '[pasinta] dddd [je] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "je %s",
+              past : "antaŭ %s",
+              s : "sekundoj",
+              m : "minuto",
+              mm : "%d minutoj",
+              h : "horo",
+              hh : "%d horoj",
+              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
+              dd : "%d tagoj",
+              M : "monato",
+              MM : "%d monatoj",
+              y : "jaro",
+              yy : "%d jaroj"
+          },
+          ordinal : "%da",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : spanish (es)
+  // author : Julio Napurí : https://github.com/julionc
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
+          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
 
-    // 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;
+      return moment.lang('es', {
+          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShort[m.month()];
+              } else {
+                  return monthsShortDot[m.month()];
+              }
+          },
+          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
+          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [del] YYYY",
+              LLL : "D [de] MMMM [del] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "en %s",
+              past : "hace %s",
+              s : "unos segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "una hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un año",
+              yy : "%d años"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
 
-              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
 
-              // 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);
-            }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : estonian (et)
+  // author : Henry Kehlmann : https://github.com/madhenry
+  // improvements : Illimar Tambek : https://github.com/ragulka
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
+              'm' : ['ühe minuti', 'üks minut'],
+              'mm': [number + ' minuti', number + ' minutit'],
+              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
+              'hh': [number + ' tunni', number + ' tundi'],
+              'd' : ['ühe päeva', 'üks päev'],
+              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
+              'MM': [number + ' kuu', number + ' kuud'],
+              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
+              'yy': [number + ' aasta', number + ' aastat']
+          };
+          if (withoutSuffix) {
+              return format[key][2] ? format[key][2] : format[key][1];
           }
-        }
+          return isFuture ? format[key][0] : format[key][1];
       }
-    }
-  };
 
+      return moment.lang('et', {
+          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
+          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
+          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
+          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
+          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
+          longDateFormat : {
+              LT   : "H:mm",
+              L    : "DD.MM.YYYY",
+              LL   : "D. MMMM YYYY",
+              LLL  : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[Täna,] LT',
+              nextDay  : '[Homme,] LT',
+              nextWeek : '[Järgmine] dddd LT',
+              lastDay  : '[Eile,] LT',
+              lastWeek : '[Eelmine] dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s pärast",
+              past   : "%s tagasi",
+              s      : processRelativeTime,
+              m      : processRelativeTime,
+              mm     : processRelativeTime,
+              h      : processRelativeTime,
+              hh     : processRelativeTime,
+              d      : processRelativeTime,
+              dd     : '%d päeva',
+              M      : processRelativeTime,
+              MM     : processRelativeTime,
+              y      : processRelativeTime,
+              yy     : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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;
 
-    dx = (node1.x - node2.x);
-    dy = (node1.y - node2.y);
-    distance = Math.sqrt(dx * dx + dy * dy);
+/***/ },
+/* 66 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (distance == 0) {
-      distance = 0.01;
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : euskara (eu)
+  // author : Eneko Illarramendi : https://github.com/eillarra
 
-    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('eu', {
+          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
+          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
+          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
+          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
+          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY[ko] MMMM[ren] D[a]",
+              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
+              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
+              l : "YYYY-M-D",
+              ll : "YYYY[ko] MMM D[a]",
+              lll : "YYYY[ko] MMM D[a] LT",
+              llll : "ddd, YYYY[ko] MMM D[a] LT"
+          },
+          calendar : {
+              sameDay : '[gaur] LT[etan]',
+              nextDay : '[bihar] LT[etan]',
+              nextWeek : 'dddd LT[etan]',
+              lastDay : '[atzo] LT[etan]',
+              lastWeek : '[aurreko] dddd LT[etan]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s barru",
+              past : "duela %s",
+              s : "segundo batzuk",
+              m : "minutu bat",
+              mm : "%d minutu",
+              h : "ordu bat",
+              hh : "%d ordu",
+              d : "egun bat",
+              dd : "%d egun",
+              M : "hilabete bat",
+              MM : "%d hilabete",
+              y : "urte bat",
+              yy : "%d urte"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    fx = dx * springForce;
-    fy = dy * springForce;
 
-    node1.fx += fx;
-    node1.fy += fy;
-    node2.fx -= fx;
-    node2.fy -= fy;
-  };
+/***/ },
+/* 67 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Persian Language
+  // author : Ebrahim Byagowi : https://github.com/ebraminio
 
-  /**
-   * 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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '۱',
+          '2': '۲',
+          '3': '۳',
+          '4': '۴',
+          '5': '۵',
+          '6': '۶',
+          '7': '۷',
+          '8': '۸',
+          '9': '۹',
+          '0': '۰'
+      }, numberMap = {
+          '۱': '1',
+          '۲': '2',
+          '۳': '3',
+          '۴': '4',
+          '۵': '5',
+          '۶': '6',
+          '۷': '7',
+          '۸': '8',
+          '۹': '9',
+          '۰': '0'
+      };
 
-      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);
+      return moment.lang('fa', {
+          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
+          longDateFormat : {
+              LT : 'HH:mm',
+              L : 'DD/MM/YYYY',
+              LL : 'D MMMM YYYY',
+              LLL : 'D MMMM YYYY LT',
+              LLLL : 'dddd, D MMMM YYYY LT'
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "قبل از ظهر";
+              } else {
+                  return "بعد از ظهر";
+              }
+          },
+          calendar : {
+              sameDay : '[امروز ساعت] LT',
+              nextDay : '[فردا ساعت] LT',
+              nextWeek : 'dddd [ساعت] LT',
+              lastDay : '[دیروز ساعت] LT',
+              lastWeek : 'dddd [پیش] [ساعت] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : 'در %s',
+              past : '%s پیش',
+              s : 'چندین ثانیه',
+              m : 'یک دقیقه',
+              mm : '%d دقیقه',
+              h : 'یک ساعت',
+              hh : '%d ساعت',
+              d : 'یک روز',
+              dd : '%d روز',
+              M : 'یک ماه',
+              MM : '%d ماه',
+              y : 'یک سال',
+              yy : '%d سال'
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          ordinal : '%dم',
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12 // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      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");
 
-      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");
+/***/ },
+/* 68 */
+/***/ function(module, exports, __webpack_require__) {
 
-      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");
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : finnish (fi)
+  // author : Tarmo Aidantausta : https://github.com/bleadof
 
-      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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
+          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
+                            numbersPast[7], numbersPast[8], numbersPast[9]];
 
-      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
-      var graph_generateOptions = document.getElementById("graph_generateOptions");
-
-      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";
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = "";
+          switch (key) {
+          case 's':
+              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
+          case 'm':
+              return isFuture ? 'minuutin' : 'minuutti';
+          case 'mm':
+              result = isFuture ? 'minuutin' : 'minuuttia';
+              break;
+          case 'h':
+              return isFuture ? 'tunnin' : 'tunti';
+          case 'hh':
+              result = isFuture ? 'tunnin' : 'tuntia';
+              break;
+          case 'd':
+              return isFuture ? 'päivän' : 'päivä';
+          case 'dd':
+              result = isFuture ? 'päivän' : 'päivää';
+              break;
+          case 'M':
+              return isFuture ? 'kuukauden' : 'kuukausi';
+          case 'MM':
+              result = isFuture ? 'kuukauden' : 'kuukautta';
+              break;
+          case 'y':
+              return isFuture ? 'vuoden' : 'vuosi';
+          case 'yy':
+              result = isFuture ? 'vuoden' : 'vuotta';
+              break;
+          }
+          result = verbalNumber(number, isFuture) + " " + result;
+          return result;
       }
 
+      function verbalNumber(number, isFuture) {
+          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
+      }
 
-      switchConfigurations.apply(this);
-
-      radioButton1.onchange = switchConfigurations.bind(this);
-      radioButton2.onchange = switchConfigurations.bind(this);
-      radioButton3.onchange = switchConfigurations.bind(this);
-    }
-  };
-
-  /**
-   * 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;
-    }
-  };
-
+      return moment.lang('fi', {
+          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
+          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
+          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
+          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
+          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD.MM.YYYY",
+              LL : "Do MMMM[ta] YYYY",
+              LLL : "Do MMMM[ta] YYYY, [klo] LT",
+              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
+              l : "D.M.YYYY",
+              ll : "Do MMM YYYY",
+              lll : "Do MMM YYYY, [klo] LT",
+              llll : "ddd, Do MMM YYYY, [klo] LT"
+          },
+          calendar : {
+              sameDay : '[tänään] [klo] LT',
+              nextDay : '[huomenna] [klo] LT',
+              nextWeek : 'dddd [klo] LT',
+              lastDay : '[eilen] [klo] LT',
+              lastWeek : '[viime] dddd[na] [klo] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s päästä",
+              past : "%s sitten",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : "%d.",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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);
-  }
+/***/ },
+/* 69 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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();
-    }
-    else {
-      this.repositionNodes();
-    }
-    this.moving = true;
-    this.start();
-  }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : faroese (fo)
+  // author : Ragnar Johannesen : https://github.com/ragnar123
 
-  /**
-   *  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 += '}},';
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      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 += ", "
+  }(function (moment) {
+      return moment.lang('fo', {
+          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
+          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
+          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D. MMMM, YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Í dag kl.] LT',
+              nextDay : '[Í morgin kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[Í gjár kl.] LT',
+              lastWeek : '[síðstu] dddd [kl] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "um %s",
+              past : "%s síðani",
+              s : "fá sekund",
+              m : "ein minutt",
+              mm : "%d minuttir",
+              h : "ein tími",
+              hh : "%d tímar",
+              d : "ein dagur",
+              dd : "%d dagar",
+              M : "ein mánaði",
+              MM : "%d mánaðir",
+              y : "eitt ár",
+              yy : "%d ár"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-        options += '}'
-      }
-      else {
-        options += "enabled:true}";
-      }
-      options += '};'
-    }
+      });
+  }));
 
 
-    this.optionsDiv.innerHTML = options;
-  }
+/***/ },
+/* 70 */
+/***/ 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();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : canadian french (fr-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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();
-  }
+  }(function (moment) {
+      return moment.lang('fr-ca', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
+          },
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 71 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (map instanceof Array) {
-      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));
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : french (fr)
+  // author : John Fischer : https://github.com/jfroffice
 
-    if (constantsVariableName == "hierarchicalLayout_direction" ||
-      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
-      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
-      this._setupHierarchicalLayout();
-    }
-    this.moving = true;
-    this.start();
-  }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fr', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
+          },
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 47 */
+/* 72 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Creation of the ClusterMixin var.
-   *
-   * This contains all the functions the Network object can use to employ clustering
-   */
-
-  /**
-  * 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);
-
-   // updates the lables after clustering
-   this.updateLabels();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : galician (gl)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
-   // 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();
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('gl', {
+          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
+          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
+          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
+          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              lastDay : function () {
+                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : function (str) {
+                  if (str === "uns segundos") {
+                      return "nuns segundos";
+                  }
+                  return "en " + str;
+              },
+              past : "hai %s",
+              s : "uns segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "unha hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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;
 
-    var maxLevels = 50;
-    var level = 0;
+/***/ },
+/* 73 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // we first cluster the hubs, then we pull in the outliers, repeat
-    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-      if (level % 3 == 0) {
-        this.forceAggregateHubs(true);
-        this.normalizeClusterLevels();
-      }
-      else {
-        this.increaseClusterLevel(); // this also includes a cluster normalization
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Hebrew (he)
+  // author : Tomer Cohen : https://github.com/tomer
+  // author : Moshe Simantov : https://github.com/DevelopmentIL
+  // author : Tal Ater : https://github.com/TalAter
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('he', {
+          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
+          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
+          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
+          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
+          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [ב]MMMM YYYY",
+              LLL : "D [ב]MMMM YYYY LT",
+              LLLL : "dddd, D [ב]MMMM YYYY LT",
+              l : "D/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[היום ב־]LT',
+              nextDay : '[מחר ב־]LT',
+              nextWeek : 'dddd [בשעה] LT',
+              lastDay : '[אתמול ב־]LT',
+              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "בעוד %s",
+              past : "לפני %s",
+              s : "מספר שניות",
+              m : "דקה",
+              mm : "%d דקות",
+              h : "שעה",
+              hh : function (number) {
+                  if (number === 2) {
+                      return "שעתיים";
+                  }
+                  return number + " שעות";
+              },
+              d : "יום",
+              dd : function (number) {
+                  if (number === 2) {
+                      return "יומיים";
+                  }
+                  return number + " ימים";
+              },
+              M : "חודש",
+              MM : function (number) {
+                  if (number === 2) {
+                      return "חודשיים";
+                  }
+                  return number + " חודשים";
+              },
+              y : "שנה",
+              yy : function (number) {
+                  if (number === 2) {
+                      return "שנתיים";
+                  }
+                  return number + " שנים";
+              }
+          }
+      });
+  }));
 
-      numberOfNodes = this.nodeIndices.length;
-      level += 1;
-    }
 
-    // after the clustering we reposition the nodes to reduce the initial chaos
-    if (level > 0 && reposition == true) {
-      this.repositionNodes();
-    }
-    this._updateCalculationNodes();
-  };
+/***/ },
+/* 74 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hindi (hi)
+  // author : Mayank Singhal : https://github.com/mayanksinghal
 
-      // we decluster until we reach a decent number of nodes
-      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
-        this.decreaseClusterLevel();
-        level += 1;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-    }
-    else {
-      this._expandClusterNode(node,false,true);
+      return moment.lang('hi', {
+          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
+          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[कल] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[कल] LT',
+              lastWeek : '[पिछले] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s में",
+              past : "%s पहले",
+              s : "कुछ ही क्षण",
+              m : "एक मिनट",
+              mm : "%d मिनट",
+              h : "एक घंटा",
+              hh : "%d घंटे",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महीने",
+              MM : "%d महीने",
+              y : "एक वर्ष",
+              yy : "%d वर्ष"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
+          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "रात";
+              } else if (hour < 10) {
+                  return "सुबह";
+              } else if (hour < 17) {
+                  return "दोपहर";
+              } else if (hour < 20) {
+                  return "शाम";
+              } else {
+                  return "रात";
+              }
+          },
+          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.
+          }
+      });
+  }));
 
-      // update the index list, dynamic edges and labels
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      this._updateCalculationNodes();
-      this.updateLabels();
-    }
 
-    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-    if (this.moving != isMovingBeforeClustering) {
-      this.start();
-    }
-  };
+/***/ },
+/* 75 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hrvatski (hr)
+  // author : Bojan Marković : https://github.com/bmarkovic
 
-  /**
-   * This calls the updateClustes with default arguments
-   */
-  exports.updateClustersDefault = function() {
-    if (this.constants.clustering.enabled == true) {
-      this.updateClusters(0,false,false);
-    }
-  };
+  // based on (sl) translation by Robert Sedovšek
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-  /**
-   * 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);
-  };
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
 
+      return moment.lang('hr', {
+          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
+          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
 
-  /**
-   * 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);
-  };
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 76 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // 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();
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hungarian (hu)
+  // author : Adam Brunner : https://github.com/adambrunner
 
-    // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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;
+  }(function (moment) {
+      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
 
-    // rest of the update the index list, dynamic edges and labels
-    this._updateDynamicEdges();
-    this.updateLabels();
+      function translate(number, withoutSuffix, key, isFuture) {
+          var num = number,
+              suffix;
 
-    // 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();
-    }
+          switch (key) {
+          case 's':
+              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
+          case 'm':
+              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'mm':
+              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'h':
+              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'hh':
+              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'd':
+              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'dd':
+              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'M':
+              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'MM':
+              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'y':
+              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
+          case 'yy':
+              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
+          }
 
-    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();
+          return '';
       }
-    }
-
-    this._updateCalculationNodes();
-  };
 
-  /**
-   * 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 week(isFuture) {
+          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
+      }
 
-    }
-  };
+      return moment.lang('hu', {
+          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
+          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
+          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
+          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
+          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "YYYY.MM.DD.",
+              LL : "YYYY. MMMM D.",
+              LLL : "YYYY. MMMM D., LT",
+              LLLL : "YYYY. MMMM D., dddd LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 12) {
+                  return isLower === true ? 'de' : 'DE';
+              } else {
+                  return isLower === true ? 'du' : 'DU';
+              }
+          },
+          calendar : {
+              sameDay : '[ma] LT[-kor]',
+              nextDay : '[holnap] LT[-kor]',
+              nextWeek : function () {
+                  return week.call(this, true);
+              },
+              lastDay : '[tegnap] LT[-kor]',
+              lastWeek : function () {
+                  return week.call(this, false);
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s múlva",
+              past : "%s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * this functions starts clustering by hubs
-   * The minimum hub threshold is set globally
-   *
-   * @private
-   */
-  exports._aggregateHubs = function(force) {
-    this._getHubSize();
-    this._formClustersByHub(force,false);
-  };
 
+/***/ },
+/* 77 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * This function is fired by keypress. It forces hubs to form.
-   *
-   */
-  exports.forceAggregateHubs = function(doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Armenian (hy-am)
+  // author : Armendarabyan : https://github.com/armendarabyan
 
-    this._aggregateHubs(true);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-    // update the index list, dynamic edges and labels
-    this._updateNodeIndexList();
-    this._updateDynamicEdges();
-    this.updateLabels();
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
+              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
+          },
 
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length != amountOfNodes) {
-      this.clusterSession += 1;
-    }
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-    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();
+          return months[nounCase][m.month()];
       }
-    }
-  };
 
-  /**
-   * 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);
-          }
-        }
-      }
-    }
-  };
+      function monthsShortCaseReplace(m, format) {
+          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
 
+          return monthsShort[m.month()];
+      }
 
-  /**
-   * 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();
-    }
-  };
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
 
-  /**
-   * 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;
+          return weekdays[m.day()];
       }
-      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];
+      return moment.lang('hy-am', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY թ.",
+              LLL : "D MMMM YYYY թ., LT",
+              LLLL : "dddd, D MMMM YYYY թ., LT"
+          },
+          calendar : {
+              sameDay: '[այսօր] LT',
+              nextDay: '[վաղը] LT',
+              lastDay: '[երեկ] LT',
+              nextWeek: function () {
+                  return 'dddd [օրը ժամը] LT';
+              },
+              lastWeek: function () {
+                  return '[անցած] dddd [օրը ժամը] LT';
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s հետո",
+              past : "%s առաջ",
+              s : "մի քանի վայրկյան",
+              m : "րոպե",
+              mm : "%d րոպե",
+              h : "ժամ",
+              hh : "%d ժամ",
+              d : "օր",
+              dd : "%d օր",
+              M : "ամիս",
+              MM : "%d ամիս",
+              y : "տարի",
+              yy : "%d տարի"
+          },
 
-            // 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);
+          meridiem : function (hour) {
+              if (hour < 4) {
+                  return "գիշերվա";
+              } else if (hour < 12) {
+                  return "առավոտվա";
+              } else if (hour < 17) {
+                  return "ցերեկվա";
+              } else {
+                  return "երեկոյան";
               }
-            }
-          }
-        }
-      }
-    }
-  };
+          },
 
-  /**
-   * 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];
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'DDD':
+              case 'w':
+              case 'W':
+              case 'DDDo':
+                  if (number === 1) {
+                      return number + '-ին';
+                  }
+                  return number + '-րդ';
+              default:
+                  return number;
+              }
+          },
 
-    // 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();
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // put the child node back in the global nodes object
-      this.nodes[containedNodeId] = childNode;
 
-      // release the contained edges from this childNode back into the global edges
-      this._releaseContainedEdges(parentNode,childNode);
+/***/ },
+/* 78 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // reconnect rerouted edges to the childNode
-      this._connectEdgeBackToChild(parentNode,childNode);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bahasa Indonesia (id)
+  // author : Mohammad Satrio Utomo : https://github.com/tyok
+  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
 
-      // validate all edges in dynamicEdges
-      this._validateEdges(parentNode);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('id', {
+          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
+          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
+          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
+          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'siang';
+              } else if (hours < 19) {
+                  return 'sore';
+              } else {
+                  return 'malam';
+              }
+          },
+          calendar : {
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Besok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kemarin pukul] LT',
+              lastWeek : 'dddd [lalu pukul] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "dalam %s",
+              past : "%s yang lalu",
+              s : "beberapa detik",
+              m : "semenit",
+              mm : "%d menit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // undo the changes from the clustering operation on the parent node
-      parentNode.mass -= childNode.mass;
-      parentNode.clusterSize -= childNode.clusterSize;
-      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-      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());
-      childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
+/***/ },
+/* 79 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // remove node from the list
-      delete parentNode.containedNodes[containedNodeId];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : icelandic (is)
+  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
 
-      // 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;
-          }
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      // if there are no others, remove the cluster session from the list
-      if (othersPresent == false) {
-        parentNode.clusterSessions.pop();
+  }(function (moment) {
+      function plural(n) {
+          if (n % 100 === 11) {
+              return true;
+          } else if (n % 10 === 1) {
+              return false;
+          }
+          return true;
       }
 
-      this._repositionBezierNodes(childNode);
-  //      this._repositionBezierNodes(parentNode);
-
-      // remove the clusterSession from the child node
-      childNode.clusterSession = 0;
-
-      // recalculate the size of the node on the next time the node is rendered
-      parentNode.clearSizeCache();
-
-      // restart the simulation to reorganise all nodes
-      this.moving = true;
-    }
-
-    // check if a further expansion step is possible if recursivity is enabled
-    if (recursive == true) {
-      this._expandClusterNode(childNode,recursive,force,openAll);
-    }
-  };
-
-
-  /**
-   * 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();
-    }
-  };
-
-
-  /**
-   * 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();
-    }
-  };
-
-
-  /**
-   * 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 (length < minLength) {
-              // first check which node is larger
-              var parentNode = edge.from;
-              var childNode = edge.to;
-              if (edge.to.mass > edge.from.mass) {
-                parentNode = edge.to;
-                childNode = edge.from;
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':
+              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
+          case 'm':
+              return withoutSuffix ? 'mínúta' : 'mínútu';
+          case 'mm':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
+              } else if (withoutSuffix) {
+                  return result + 'mínúta';
               }
-
-              if (childNode.dynamicEdgesLength == 1) {
-                this._addToCluster(parentNode,childNode,false);
+              return result + 'mínútu';
+          case 'hh':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
               }
-              else if (parentNode.dynamicEdgesLength == 1) {
-                this._addToCluster(childNode,parentNode,false);
+              return result + 'klukkustund';
+          case 'd':
+              if (withoutSuffix) {
+                  return 'dagur';
               }
-            }
+              return isFuture ? 'dag' : 'degi';
+          case 'dd':
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'dagar';
+                  }
+                  return result + (isFuture ? 'daga' : 'dögum');
+              } else if (withoutSuffix) {
+                  return result + 'dagur';
+              }
+              return result + (isFuture ? 'dag' : 'degi');
+          case 'M':
+              if (withoutSuffix) {
+                  return 'mánuður';
+              }
+              return isFuture ? 'mánuð' : 'mánuði';
+          case 'MM':
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'mánuðir';
+                  }
+                  return result + (isFuture ? 'mánuði' : 'mánuðum');
+              } else if (withoutSuffix) {
+                  return result + 'mánuður';
+              }
+              return result + (isFuture ? 'mánuð' : 'mánuði');
+          case 'y':
+              return withoutSuffix || isFuture ? 'ár' : 'ári';
+          case 'yy':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
+              }
+              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
           }
-        }
       }
-    }
-  };
-
-  /**
-   * 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];
-
-        // the edges can be swallowed by another decrease
-        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.mass > childNode.mass) {
-              this._addToCluster(parentNode,childNode,true);
-            }
-            else {
-              this._addToCluster(childNode,parentNode,true);
-            }
+      return moment.lang('is', {
+          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
+          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
+          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
+          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
+          },
+          calendar : {
+              sameDay : '[í dag kl.] LT',
+              nextDay : '[á morgun kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[í gær kl.] LT',
+              lastWeek : '[síðasta] dddd [kl.] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "eftir %s",
+              past : "fyrir %s síðan",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : "klukkustund",
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-    }
-  };
+      });
+  }));
 
 
-  /**
-   * 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;
-        }
+/***/ },
+/* 80 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : italian (it)
+  // author : Lorenzo : https://github.com/aliem
+  // author: Mattia Larentis: https://github.com/nostalgiaz
 
-        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
-          smallestNeighbour = neighbour.clusterSessions.length;
-          smallestNeighbourNode = neighbour;
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
-      this._addToCluster(neighbour, node, true);
-    }
-  };
+  }(function (moment) {
+      return moment.lang('it', {
+          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
+          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
+          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
+          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
+          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Oggi alle] LT',
+              nextDay: '[Domani alle] LT',
+              nextWeek: 'dddd [alle] LT',
+              lastDay: '[Ieri alle] LT',
+              lastWeek: '[lo scorso] dddd [alle] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : function (s) {
+                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
+              },
+              past : "%s fa",
+              s : "alcuni secondi",
+              m : "un minuto",
+              mm : "%d minuti",
+              h : "un'ora",
+              hh : "%d ore",
+              d : "un giorno",
+              dd : "%d giorni",
+              M : "un mese",
+              MM : "%d mesi",
+              y : "un anno",
+              yy : "%d anni"
+          },
+          ordinal: '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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);
-      }
-    }
-  };
+/***/ },
+/* 81 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
-    }
-    // we decide if the node is a hub
-    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
-      // initialize variables
-      var dx,dy,length;
-      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-      var allowCluster = false;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : japanese (ja)
+  // author : LI Long : https://github.com/baryon
 
-      // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      // if the hub clustering is not forces, 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);
-
-                if (length < minLength) {
-                  allowCluster = true;
-                  break;
-                }
+  }(function (moment) {
+      return moment.lang('ja', {
+          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
+          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
+          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
+          longDateFormat : {
+              LT : "Ah時m分",
+              L : "YYYY/MM/DD",
+              LL : "YYYY年M月D日",
+              LLL : "YYYY年M月D日LT",
+              LLLL : "YYYY年M月D日LT dddd"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "午前";
+              } else {
+                  return "午後";
               }
-            }
-          }
-        }
-      }
-
-      // start the clustering if allowed
-      if ((!force && allowCluster) || force) {
-        // we loop over all edges INITIALLY connected to this hub
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          edge = this.edges[edgesIdarray[j]];
-          // the edge can be clustered by this function in a previous loop
-          if (edge !== undefined) {
-            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
-            // 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);
-            }
+          },
+          calendar : {
+              sameDay : '[今日] LT',
+              nextDay : '[明日] LT',
+              nextWeek : '[来週]dddd LT',
+              lastDay : '[昨日] LT',
+              lastWeek : '[前週]dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s後",
+              past : "%s前",
+              s : "数秒",
+              m : "1分",
+              mm : "%d分",
+              h : "1時間",
+              hh : "%d時間",
+              d : "1日",
+              dd : "%d日",
+              M : "1ヶ月",
+              MM : "%dヶ月",
+              y : "1年",
+              yy : "%d年"
           }
-        }
-      }
-    }
-  };
+      });
+  }));
 
 
+/***/ },
+/* 82 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Georgian (ka)
+  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
 
-    // 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
-        this._addToContainedEdges(parentNode,childNode,edge);
-      }
-      else {
-        this._connectEdgeToCluster(parentNode,childNode,edge);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    // a contained node has no dynamic edges.
-    childNode.dynamicEdges = [];
-
-    // remove circular edges from clusters
-    this._containCircularEdgesFromNode(parentNode,childNode);
-
-
-    // remove the childNode from the global nodes object
-    delete this.nodes[childNode.id];
-
-    // update the properties of the child and parent
-    var massBefore = parentNode.mass;
-    childNode.clusterSession = this.clusterSession;
-    parentNode.mass += childNode.mass;
-    parentNode.clusterSize += childNode.clusterSize;
-    parentNode.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);
-    }
-
-    // forced clusters only open from screen size and double tap
-    if (force == true) {
-      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
-      parentNode.formationScale = 0;
-    }
-    else {
-      parentNode.formationScale = this.scale; // The latest child has been added on this scale
-    }
+  }(function (moment) {
 
-    // recalculate the size of the node on the next time the node is rendered
-    parentNode.clearSizeCache();
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
+              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
+          },
 
-    // set the pop-out scale for the childnode
-    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+          nounCase = (/D[oD] *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-    // nullify the movement velocity of the child, this is to avoid hectic behaviour
-    childNode.clearVelocity();
+          return months[nounCase][m.month()];
+      }
 
-    // the mass has altered, preservation of energy dictates the velocity to be updated
-    parentNode.updateVelocity(massBefore);
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
+              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
+          },
 
-    // restart the simulation to reorganise all nodes
-    this.moving = true;
-  };
+          nounCase = (/(წინა|შემდეგ)/).test(format) ?
+              'accusative' :
+              'nominative';
 
+          return weekdays[nounCase][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;
+      return moment.lang('ka', {
+          months : monthsCaseReplace,
+          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
+          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[დღეს] LT[-ზე]',
+              nextDay : '[ხვალ] LT[-ზე]',
+              lastDay : '[გუშინ] LT[-ზე]',
+              nextWeek : '[შემდეგ] dddd LT[-ზე]',
+              lastWeek : '[წინა] dddd LT-ზე',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : function (s) {
+                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
+                      s.replace(/ი$/, "ში") :
+                      s + "ში";
+              },
+              past : function (s) {
+                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
+                      return s.replace(/(ი|ე)$/, "ის წინ");
+                  }
+                  if ((/წელი/).test(s)) {
+                      return s.replace(/წელი$/, "წლის წინ");
+                  }
+              },
+              s : "რამდენიმე წამი",
+              m : "წუთი",
+              mm : "%d წუთი",
+              h : "საათი",
+              hh : "%d საათი",
+              d : "დღე",
+              dd : "%d დღე",
+              M : "თვე",
+              MM : "%d თვე",
+              y : "წელი",
+              yy : "%d წელი"
+          },
+          ordinal : function (number) {
+              if (number === 0) {
+                  return number;
+              }
 
-      // 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;
-            }
-          }
-        }
-      }
-      node.dynamicEdgesLength -= correction;
-    }
-  };
+              if (number === 1) {
+                  return number + "-ლი";
+              }
 
+              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
+                  return "მე-" + number;
+              }
 
-  /**
-   * 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);
+              return number + "-ე";
+          },
+          week : {
+              dow : 1,
+              doy : 7
+          }
+      });
+  }));
 
-    // 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;
-      }
-    }
-  };
+/***/ },
+/* 83 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : khmer (km)
+  // author : Kruy Vanna : https://github.com/kruyvanna
 
-        edge.originalFromId.push(childNode.id);
-        edge.from = parentNode;
-        edge.fromId = parentNode.id;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('km', {
+          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
+              nextDay: '[ស្អែក ម៉ោង] LT',
+              nextWeek: 'dddd [ម៉ោង] LT',
+              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
+              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "%sទៀត",
+              past: "%sមុន",
+              s: "ប៉ុន្មានវិនាទី",
+              m: "មួយនាទី",
+              mm: "%d នាទី",
+              h: "មួយម៉ោង",
+              hh: "%d ម៉ោង",
+              d: "មួយថ្ងៃ",
+              dd: "%d ថ្ងៃ",
+              M: "មួយខែ",
+              MM: "%d ខែ",
+              y: "មួយឆ្នាំ",
+              yy: "%d ឆ្នាំ"
+          },
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4 // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      this._addToReroutedEdges(parentNode,childNode,edge);
-    }
-  };
 
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : korean (ko)
+  //
+  // authors 
+  //
+  // - Kyungwook, Park : https://github.com/kyungw00k
+  // - Jeeeyul Lee <jeeeyul@gmail.com>
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-
-  /**
-   * 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);
+  }(function (moment) {
+      return moment.lang('ko', {
+          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
+          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
+          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
+          longDateFormat : {
+              LT : "A h시 mm분",
+              L : "YYYY.MM.DD",
+              LL : "YYYY년 MMMM D일",
+              LLL : "YYYY년 MMMM D일 LT",
+              LLLL : "YYYY년 MMMM D일 dddd LT"
+          },
+          meridiem : function (hour, minute, isUpper) {
+              return hour < 12 ? '오전' : '오후';
+          },
+          calendar : {
+              sameDay : '오늘 LT',
+              nextDay : '내일 LT',
+              nextWeek : 'dddd LT',
+              lastDay : '어제 LT',
+              lastWeek : '지난주 dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s 후",
+              past : "%s 전",
+              s : "몇초",
+              ss : "%d초",
+              m : "일분",
+              mm : "%d분",
+              h : "한시간",
+              hh : "%d시간",
+              d : "하루",
+              dd : "%d일",
+              M : "한달",
+              MM : "%d달",
+              y : "일년",
+              yy : "%d년"
+          },
+          ordinal : '%d일',
+          meridiemParse : /(오전|오후)/,
+          isPM : function (token) {
+              return token === "오후";
+          }
+      });
+  }));
 
-    // this edge becomes part of the dynamicEdges of the cluster node
-    parentNode.dynamicEdges.push(edge);
-   };
 
+/***/ },
+/* 85 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Luxembourgish (lb)
+  // author : mweimerskirch : https://github.com/mweimerskirch
 
-  /**
-   * 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;
-        }
+  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
+  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
+  // and "eifelerRegelAppliesToNumber" methods are meant for
 
-        // append this edge to the list of edges connecting to the childnode
-        childNode.dynamicEdges.push(edge);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eng Minutt', 'enger Minutt'],
+              'h': ['eng Stonn', 'enger Stonn'],
+              'd': ['een Dag', 'engem Dag'],
+              'dd': [number + ' Deeg', number + ' Deeg'],
+              'M': ['ee Mount', 'engem Mount'],
+              'MM': [number + ' Méint', number + ' Méint'],
+              'y': ['ee Joer', 'engem Joer'],
+              'yy': [number + ' Joer', number + ' Joer']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
 
-        // 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;
+      function processFutureTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "a " + string;
           }
-        }
+          return "an " + string;
       }
-      // remove the entry from the rerouted edges
-      delete parentNode.reroutedEdges[childNode.id];
-    }
-  };
-
 
-  /**
-   * 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) {
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
-        parentNode.dynamicEdges.splice(i,1);
+      function processPastTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "viru " + string;
+          }
+          return "virun " + string;
       }
-    }
-  };
-
-
-  /**
-   * 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];
-
-      // put the edge back in the global edges object
-      this.edges[edge.id] = edge;
-
-      // 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];
-
-  };
-
-
-
-
-  // ------------------- UTILITY FUNCTIONS ---------------------------- //
 
+      function processLastWeek(string1) {
+          var weekday = this.format('d');
+          if (eifelerRegelAppliesToWeekday(weekday)) {
+              return '[Leschte] dddd [um] LT';
+          }
+          return '[Leschten] dddd [um] LT';
+      }
 
-  /**
-   * 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),"]");
-        }
+      /**
+       * Returns true if the word before the given week day loses the "-n" ending.
+       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
+       *
+       * @param weekday {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToWeekday(weekday) {
+          weekday = parseInt(weekday, 10);
+          switch (weekday) {
+          case 0: // Sonndeg
+          case 1: // Méindeg
+          case 3: // Mëttwoch
+          case 5: // Freideg
+          case 6: // Samschdeg
+              return true;
+          default: // 2 Dënschdeg, 4 Donneschdeg
+              return false;
+          }
       }
-    }
 
-    // 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;
+      /**
+       * Returns true if the word before the given number loses the "-n" ending.
+       * e.g. "an 10 Deeg" but "a 5 Deeg"
+       *
+       * @param number {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToNumber(number) {
+          number = parseInt(number, 10);
+          if (isNaN(number)) {
+              return false;
           }
-          else {
-            node.label = String(node.id);
+          if (number < 0) {
+              // Negative Number --> always true
+              return true;
+          } else if (number < 10) {
+              // Only 1 digit
+              if (4 <= number && number <= 7) {
+                  return true;
+              }
+              return false;
+          } else if (number < 100) {
+              // 2 digits
+              var lastDigit = number % 10, firstDigit = number / 10;
+              if (lastDigit === 0) {
+                  return eifelerRegelAppliesToNumber(firstDigit);
+              }
+              return eifelerRegelAppliesToNumber(lastDigit);
+          } else if (number < 10000) {
+              // 3 or 4 digits --> recursively check first digit
+              while (number >= 10) {
+                  number = number / 10;
+              }
+              return eifelerRegelAppliesToNumber(number);
+          } else {
+              // Anything larger than 4 digits: recursively check first n-3 digits
+              number = number / 1000;
+              return eifelerRegelAppliesToNumber(number);
           }
-        }
       }
-    }
-
-  //    /* Debug Override */
-  //    for (nodeId in this.nodes) {
-  //      if (this.nodes.hasOwnProperty(nodeId)) {
-  //        node = this.nodes[nodeId];
-  //        node.label = String(node.level);
-  //      }
-  //    }
 
-  };
+      return moment.lang('lb', {
+          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
+          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
+          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
+          longDateFormat: {
+              LT: "H:mm [Auer]",
+              L: "DD.MM.YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: "[Haut um] LT",
+              sameElse: "L",
+              nextDay: '[Muer um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gëschter um] LT',
+              lastWeek: processLastWeek
+          },
+          relativeTime: {
+              future: processFutureTime,
+              past: processPastTime,
+              s: "e puer Sekonnen",
+              m: processRelativeTime,
+              mm: "%d Minutten",
+              h: processRelativeTime,
+              hh: "%d Stonnen",
+              d: processRelativeTime,
+              dd: processRelativeTime,
+              M: processRelativeTime,
+              MM: processRelativeTime,
+              y: processRelativeTime,
+              yy: processRelativeTime
+          },
+          ordinal: '%d.',
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 86 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // 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;}
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Lithuanian (lt)
+  // author : Mindaugas Mozūras : https://github.com/mmozuras
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
+  }(function (moment) {
+      var units = {
+          "m" : "minutė_minutės_minutę",
+          "mm": "minutės_minučių_minutes",
+          "h" : "valanda_valandos_valandą",
+          "hh": "valandos_valandų_valandas",
+          "d" : "diena_dienos_dieną",
+          "dd": "dienos_dienų_dienas",
+          "M" : "mėnuo_mėnesio_mėnesį",
+          "MM": "mėnesiai_mėnesių_mėnesius",
+          "y" : "metai_metų_metus",
+          "yy": "metai_metų_metus"
+      },
+      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
 
-    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 translateSeconds(number, withoutSuffix, key, isFuture) {
+          if (withoutSuffix) {
+              return "kelios sekundės";
+          } else {
+              return isFuture ? "kelių sekundžių" : "kelias sekundes";
           }
-        }
       }
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      // if a cluster was formed, we increase the clusterSession
-      if (this.nodeIndices.length != amountOfNodes) {
-        this.clusterSession += 1;
-      }
-    }
-  };
-
-
-
-  /**
-   * 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 translateSingular(number, withoutSuffix, key, isFuture) {
+          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
+      }
 
-  /**
-   * 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.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);
+      function special(number) {
+          return number % 10 === 0 || (number > 10 && number < 20);
       }
-    }
-  };
 
+      function forms(key) {
+          return units[key].split("_");
+      }
 
-  /**
-   * 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;
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          if (number === 1) {
+              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
+          } else if (withoutSuffix) {
+              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
+          } else {
+              if (isFuture) {
+                  return result + forms(key)[1];
+              } else {
+                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
+              }
+          }
+      }
 
-    for (var i = 0; i < this.nodeIndices.length; i++) {
+      function relativeWeekDay(moment, format) {
+          var nominative = format.indexOf('dddd HH:mm') === -1,
+              weekDay = weekDays[moment.day()];
 
-      var node = this.nodes[this.nodeIndices[i]];
-      if (node.dynamicEdgesLength > largestHub) {
-        largestHub = node.dynamicEdgesLength;
+          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
       }
-      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);
+      return moment.lang("lt", {
+          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
+          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
+          weekdays : relativeWeekDay,
+          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
+          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY [m.] MMMM D [d.]",
+              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
+              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
+              l : "YYYY-MM-DD",
+              ll : "YYYY [m.] MMMM D [d.]",
+              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
+              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
+          },
+          calendar : {
+              sameDay : "[Šiandien] LT",
+              nextDay : "[Rytoj] LT",
+              nextWeek : "dddd LT",
+              lastDay : "[Vakar] LT",
+              lastWeek : "[Praėjusį] dddd LT",
+              sameElse : "L"
+          },
+          relativeTime : {
+              future : "po %s",
+              past : "prieš %s",
+              s : translateSeconds,
+              m : translateSingular,
+              mm : translate,
+              h : translateSingular,
+              hh : translate,
+              d : translateSingular,
+              dd : translate,
+              M : translateSingular,
+              MM : translate,
+              y : translateSingular,
+              yy : translate
+          },
+          ordinal : function (number) {
+              return number + '-oji';
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-    // always have at least one to cluster
-    if (this.hubThreshold > largestHub) {
-      this.hubThreshold = largestHub;
-    }
+/***/ },
+/* 87 */
+/***/ function(module, exports, __webpack_require__) {
 
-  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
-  //  console.log("hubThreshold:",this.hubThreshold);
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : latvian (lv)
+  // author : Kristaps Karlsons : https://github.com/skakri
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var units = {
+          'mm': 'minūti_minūtes_minūte_minūtes',
+          'hh': 'stundu_stundas_stunda_stundas',
+          'dd': 'dienu_dienas_diena_dienas',
+          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
+          'yy': 'gadu_gadus_gads_gadi'
+      };
 
-  /**
-   * 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;
+      function format(word, number, withoutSuffix) {
+          var forms = word.split('_');
+          if (withoutSuffix) {
+              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
+          } else {
+              return number % 10 === 1 && number !== 11 ? forms[0] : forms[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;
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          return number + ' ' + format(units[key], number, withoutSuffix);
       }
-    }
-    return chains/total;
-  };
+
+      return moment.lang('lv', {
+          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
+          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
+          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "YYYY. [gada] D. MMMM",
+              LLL : "YYYY. [gada] D. MMMM, LT",
+              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
+          },
+          calendar : {
+              sameDay : '[Šodien pulksten] LT',
+              nextDay : '[Rīt pulksten] LT',
+              nextWeek : 'dddd [pulksten] LT',
+              lastDay : '[Vakar pulksten] LT',
+              lastWeek : '[Pagājušā] dddd [pulksten] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s vēlāk",
+              past : "%s agrāk",
+              s : "dažas sekundes",
+              m : "minūti",
+              mm : relativeTimeWithPlural,
+              h : "stundu",
+              hh : relativeTimeWithPlural,
+              d : "dienu",
+              dd : relativeTimeWithPlural,
+              M : "mēnesi",
+              MM : relativeTimeWithPlural,
+              y : "gadu",
+              yy : relativeTimeWithPlural
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 48 */
+/* 88 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-
-  /**
-   * 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;
-  };
-
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : macedonian (mk)
+  // author : Borislav Mickov : https://github.com/B0k0
 
-  /**
-   *  /**
-   * 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);
-    }
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('mk', {
+          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
+          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
+          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Денес во] LT',
+              nextDay : '[Утре во] LT',
+              nextWeek : 'dddd [во] LT',
+              lastDay : '[Вчера во] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[Во изминатата] dddd [во] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[Во изминатиот] dddd [во] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "после %s",
+              past : "пред %s",
+              s : "неколку секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дена",
+              M : "месец",
+              MM : "%d месеци",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
+              }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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"];
-  };
+/***/ },
+/* 89 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : malayalam (ml)
+  // author : Floyd Pink : https://github.com/floydpink
 
-  /**
-   * 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);
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ml', {
+          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
+          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
+          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
+          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
+          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm -നു",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[ഇന്ന്] LT',
+              nextDay : '[നാളെ] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[ഇന്നലെ] LT',
+              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s കഴിഞ്ഞ്",
+              past : "%s മുൻപ്",
+              s : "അൽപ നിമിഷങ്ങൾ",
+              m : "ഒരു മിനിറ്റ്",
+              mm : "%d മിനിറ്റ്",
+              h : "ഒരു മണിക്കൂർ",
+              hh : "%d മണിക്കൂർ",
+              d : "ഒരു ദിവസം",
+              dd : "%d ദിവസം",
+              M : "ഒരു മാസം",
+              MM : "%d മാസം",
+              y : "ഒരു വർഷം",
+              yy : "%d വർഷം"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "രാത്രി";
+              } else if (hour < 12) {
+                  return "രാവിലെ";
+              } else if (hour < 17) {
+                  return "ഉച്ച കഴിഞ്ഞ്";
+              } else if (hour < 20) {
+                  return "വൈകുന്നേരം";
+              } else {
+                  return "രാത്രി";
+              }
+          }
+      });
+  }));
 
 
-  /**
-   * 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();
-  };
+/***/ },
+/* 90 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Marathi (mr)
+  // author : Harshad Kale : https://github.com/kalehv
 
-  /**
-   * 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};
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-    // 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"
+      return moment.lang('mr', {
+          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
+          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm वाजता",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[उद्या] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[काल] LT',
+              lastWeek: '[मागील] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s नंतर",
+              past : "%s पूर्वी",
+              s : "सेकंद",
+              m: "एक मिनिट",
+              mm: "%d मिनिटे",
+              h : "एक तास",
+              hh : "%d तास",
+              d : "एक दिवस",
+              dd : "%d दिवस",
+              M : "एक महिना",
+              MM : "%d महिने",
+              y : "एक वर्ष",
+              yy : "%d वर्षे"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem: function (hour, minute, isLower)
+          {
+              if (hour < 4) {
+                  return "रात्री";
+              } else if (hour < 10) {
+                  return "सकाळी";
+              } else if (hour < 17) {
+                  return "दुपारी";
+              } else if (hour < 20) {
+                  return "सायंकाळी";
+              } else {
+                  return "रात्री";
+              }
+          },
+          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.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];
-  };
 
+/***/ },
+/* 91 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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];
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bahasa Malaysia (ms-MY)
+  // author : Weldan Jamili : https://github.com/weldan
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ms-my', {
+          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
+          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
+          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
+          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
+          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'tengahari';
+              } else if (hours < 19) {
+                  return 'petang';
+              } else {
+                  return 'malam';
+              }
+          },
+          calendar : {
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Esok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kelmarin pukul] LT',
+              lastWeek : 'dddd [lepas pukul] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "dalam %s",
+              past : "%s yang lepas",
+              s : "beberapa saat",
+              m : "seminit",
+              mm : "%d minit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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);
-  };
+/***/ },
+/* 92 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : norwegian bokmål (nb)
+  // authors : Espen Hovlandsdal : https://github.com/rexxars
+  //           Sigurd Gartmann : https://github.com/sigurdga
 
-  /**
-   * 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('nb', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "H.mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd D. MMMM YYYY [kl.] LT"
+          },
+          calendar : {
+              sameDay: '[i dag kl.] LT',
+              nextDay: '[i morgen kl.] LT',
+              nextWeek: 'dddd [kl.] LT',
+              lastDay: '[i går kl.] LT',
+              lastWeek: '[forrige] dddd [kl.] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s siden",
+              s : "noen sekunder",
+              m : "ett minutt",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dager",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // we have moved the sector data into the active set, we now remove it from the frozen stack
-    this._deleteFrozenSector(sectorId);
-  };
 
+/***/ },
+/* 93 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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];
-      }
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : nepali/nepalese
+  // author : suvash : https://github.com/suvash
 
-    // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    // merge the nodeIndices
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
-    }
-  };
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
+      return moment.lang('ne', {
+          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
+          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
+          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
+          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
+          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
+          longDateFormat : {
+              LT : "Aको h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 3) {
+                  return "राती";
+              } else if (hour < 10) {
+                  return "बिहान";
+              } else if (hour < 15) {
+                  return "दिउँसो";
+              } else if (hour < 18) {
+                  return "बेलुका";
+              } else if (hour < 20) {
+                  return "साँझ";
+              } else {
+                  return "राती";
+              }
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[भोली] LT',
+              nextWeek : '[आउँदो] dddd[,] LT',
+              lastDay : '[हिजो] LT',
+              lastWeek : '[गएको] dddd[,] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%sमा",
+              past : "%s अगाडी",
+              s : "केही समय",
+              m : "एक मिनेट",
+              mm : "%d मिनेट",
+              h : "एक घण्टा",
+              hh : "%d घण्टा",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महिना",
+              MM : "%d महिना",
+              y : "एक बर्ष",
+              yy : "%d बर्ष"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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);
-  };
 
+/***/ },
+/* 94 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : dutch (nl)
+  // author : Joris Röling : https://github.com/jjupiter
 
-  //    // 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!!");
-  //    }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
+          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
 
-    // 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];
+      return moment.lang('nl', {
+          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShortWithoutDots[m.month()];
+              } else {
+                  return monthsShortWithDots[m.month()];
+              }
+          },
+          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
+          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
+          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[vandaag om] LT',
+              nextDay: '[morgen om] LT',
+              nextWeek: 'dddd [om] LT',
+              lastDay: '[gisteren om] LT',
+              lastWeek: '[afgelopen] dddd [om] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "over %s",
+              past : "%s geleden",
+              s : "een paar seconden",
+              m : "één minuut",
+              mm : "%d minuten",
+              h : "één uur",
+              hh : "%d uur",
+              d : "één dag",
+              dd : "%d dagen",
+              M : "één maand",
+              MM : "%d maanden",
+              y : "één jaar",
+              yy : "%d jaar"
+          },
+          ordinal : function (number) {
+              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    var unqiueIdentifier = util.randomUUID();
 
-    // we fully freeze the currently active sector
-    this._freezeSector(sector);
+/***/ },
+/* 95 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
-    this._createNewSector(unqiueIdentifier);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : norwegian nynorsk (nn)
+  // author : https://github.com/mechuwind
 
-    // we add the active sector to the sectors array to be able to revert these steps later on
-    this._setActiveSector(unqiueIdentifier);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('nn', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
+          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
+          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[I dag klokka] LT',
+              nextDay: '[I morgon klokka] LT',
+              nextWeek: 'dddd [klokka] LT',
+              lastDay: '[I går klokka] LT',
+              lastWeek: '[Føregåande] dddd [klokka] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s sidan",
+              s : "nokre sekund",
+              m : "eit minutt",
+              mm : "%d minutt",
+              h : "ein time",
+              hh : "%d timar",
+              d : "ein dag",
+              dd : "%d dagar",
+              M : "ein månad",
+              MM : "%d månader",
+              y : "eit år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // 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;
-  };
+/***/ },
+/* 96 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : polish (pl)
+  // author : Rafal Hirsz : https://github.com/evoL
 
-  /**
-   * 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
+          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
 
-    // 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();
+      function plural(n) {
+          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
+      }
 
-        // we collapse the sector back to a single cluster
-        this._collapseThisToSingleCluster();
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'minuta' : 'minutę';
+          case 'mm':
+              return result + (plural(number) ? 'minuty' : 'minut');
+          case 'h':
+              return withoutSuffix  ? 'godzina'  : 'godzinę';
+          case 'hh':
+              return result + (plural(number) ? 'godziny' : 'godzin');
+          case 'MM':
+              return result + (plural(number) ? 'miesiące' : 'miesięcy');
+          case 'yy':
+              return result + (plural(number) ? 'lata' : 'lat');
+          }
+      }
 
-        // we move the remaining nodes, edges and nodeIndices to the previous sector.
-        // This previous sector is the one we will reactivate
-        this._mergeThisWithFrozen(previousSector);
+      return moment.lang('pl', {
+          months : function (momentToFormat, format) {
+              if (/D MMMM/.test(format)) {
+                  return monthsSubjective[momentToFormat.month()];
+              } else {
+                  return monthsNominative[momentToFormat.month()];
+              }
+          },
+          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
+          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
+          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
+          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Dziś o] LT',
+              nextDay: '[Jutro o] LT',
+              nextWeek: '[W] dddd [o] LT',
+              lastDay: '[Wczoraj o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[W zeszłą niedzielę o] LT';
+                  case 3:
+                      return '[W zeszłą środę o] LT';
+                  case 6:
+                      return '[W zeszłą sobotę o] LT';
+                  default:
+                      return '[W zeszły] dddd [o] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "%s temu",
+              s : "kilka sekund",
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : "1 dzień",
+              dd : '%d dni',
+              M : "miesiąc",
+              MM : translate,
+              y : "rok",
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-        // 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);
+/***/ },
+/* 97 */
+/***/ function(module, exports, __webpack_require__) {
 
-        // we load the references from the newly active sector into the global references
-        this._switchToSector(previousSector);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : brazilian portuguese (pt-br)
+  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
 
-        // we forget the previously active sector because we reverted to the one before
-        this._forgetLastSector();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt-br', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY [às] LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
+          },
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "em %s",
+              past : "%s atrás",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº'
+      });
+  }));
 
-        // finally, we update the node index list.
-        this._updateNodeIndexList();
 
-        // we refresh the list with calulation nodes and calculation node indices.
-        this._updateCalculationNodes();
-      }
-    }
-  };
+/***/ },
+/* 98 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : portuguese (pt)
+  // author : Jefferson : https://github.com/jalex79
 
-  /**
-   * 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) {
-    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);
-          this[runFunction]();
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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) {
-            this[runFunction](args[0],args[1]);
-          }
-          else {
-            this[runFunction](argument);
+  }(function (moment) {
+      return moment.lang('pt', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "em %s",
+              past : "há %s",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-  };
+      });
+  }));
 
 
-  /**
-   * 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) {
-    if (argument === undefined) {
-      this._switchToSupportSector();
-      this[runFunction]();
-    }
-    else {
-      this._switchToSupportSector();
-      var args = Array.prototype.splice.call(arguments, 1);
-      if (args.length > 1) {
-        this[runFunction](args[0],args[1]);
-      }
-      else {
-        this[runFunction](argument);
-      }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-  };
+/***/ },
+/* 99 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : romanian (ro)
+  // author : Vlad Gurdiga : https://github.com/gurdiga
+  // author : Valentin Agachi : https://github.com/avaly
 
-  /**
-   * 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]();
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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);
+  }(function (moment) {
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'minute',
+              'hh': 'ore',
+              'dd': 'zile',
+              'MM': 'luni',
+              'yy': 'ani'
+          },
+              separator = ' ';
+          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
+              separator = ' de ';
           }
-        }
-      }
-    }
-    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);
+          return number + separator + format[key];
       }
-    }
-  };
-
-
-  /**
-   * 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"];
-  };
-
-
-  /**
-   * 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) {
 
-          this._switchToSector(sector,sectorType);
-
-          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;}
-            }
+      return moment.lang('ro', {
+          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
+          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
+          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
+          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
+          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY H:mm",
+              LLLL : "dddd, D MMMM YYYY H:mm"
+          },
+          calendar : {
+              sameDay: "[azi la] LT",
+              nextDay: '[mâine la] LT',
+              nextWeek: 'dddd [la] LT',
+              lastDay: '[ieri la] LT',
+              lastWeek: '[fosta] dddd [la] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "peste %s",
+              past : "%s în urmă",
+              s : "câteva secunde",
+              m : "un minut",
+              mm : relativeTimeWithPlural,
+              h : "o oră",
+              hh : relativeTimeWithPlural,
+              d : "o zi",
+              dd : relativeTimeWithPlural,
+              M : "o lună",
+              MM : relativeTimeWithPlural,
+              y : "un an",
+              yy : relativeTimeWithPlural
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-          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.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();
-  };
+      });
+  }));
 
 
 /***/ },
-/* 49 */
+/* 100 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Node = __webpack_require__(42);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : russian (ru)
+  // author : Viktorminator : https://github.com/Viktorminator
+  // Author : Menelion Elensúle : https://github.com/Oire
 
-  /**
-   * 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);
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
       }
-    }
-  };
 
-  /**
-   * 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;
-  };
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
+              'hh': 'час_часа_часов',
+              'dd': 'день_дня_дней',
+              'MM': 'месяц_месяца_месяцев',
+              'yy': 'год_года_лет'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'минута' : 'минуту';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
+      }
 
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
+              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
+          },
 
-  /**
-   * 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);
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-    return {
-      left:   x,
-      top:    y,
-      right:  x,
-      bottom: y
-    };
-  };
+          return months[nounCase][m.month()];
+      }
 
+      function monthsShortCaseReplace(m, format) {
+          var monthsShort = {
+              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
+              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
+          },
 
-  /**
-   * 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);
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-    // 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 monthsShort[nounCase][m.month()];
+      }
 
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
+              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
+          },
 
-  /**
-   * 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);
-        }
+          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return weekdays[nounCase][m.day()];
       }
-    }
-  };
 
+      return moment.lang('ru', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY г.",
+              LLL : "D MMMM YYYY г., LT",
+              LLLL : "dddd, D MMMM YYYY г., LT"
+          },
+          calendar : {
+              sameDay: '[Сегодня в] LT',
+              nextDay: '[Завтра в] LT',
+              lastDay: '[Вчера в] LT',
+              nextWeek: function () {
+                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
+              },
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[В прошлое] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                      return '[В прошлый] dddd [в] LT';
+                  case 3:
+                  case 5:
+                  case 6:
+                      return '[В прошлую] dddd [в] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "через %s",
+              past : "%s назад",
+              s : "несколько секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "час",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "месяц",
+              MM : relativeTimeWithPlural,
+              y : "год",
+              yy : relativeTimeWithPlural
+          },
 
-  /**
-   * 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;
-  };
+          meridiemParse: /ночи|утра|дня|вечера/i,
+          isPM : function (input) {
+              return /^(дня|вечера)$/.test(input);
+          },
 
-  /**
-   * 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);
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночи";
+              } else if (hour < 12) {
+                  return "утра";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечера";
+              }
+          },
 
-    if (overlappingEdges.length > 0) {
-      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
-    }
-    else {
-      return null;
-    }
-  };
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              case 'w':
+              case 'W':
+                  return number + '-я';
+              default:
+                  return number;
+              }
+          },
 
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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;
-    }
-  };
 
-  /**
-   * 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;
-    }
-  };
+/***/ },
+/* 101 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovak (sk)
+  // author : Martin Minka : https://github.com/k2s
+  // based on work of petrbela : https://github.com/petrbela
 
-  /**
-   * 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
+          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
 
-  /**
-   * 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();
+      function plural(n) {
+          return (n > 1) && (n < 5);
       }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        this.selectionObj.edges[edgeId].unselect();
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minúty' : 'minút');
+              } else {
+                  return result + 'minútami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodín');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dni' : 'dní');
+              } else {
+                  return result + 'dňami';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
+              } else {
+                  return result + 'mesiacmi';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'rokov');
+              } else {
+                  return result + 'rokmi';
+              }
+              break;
+          }
+      }
+
+      return moment.lang('sk', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
+          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
+          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
+          longDateFormat : {
+              LT: "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes o] LT",
+              nextDay: '[zajtra o] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [o] LT';
+                  case 3:
+                      return '[v stredu o] LT';
+                  case 4:
+                      return '[vo štvrtok o] LT';
+                  case 5:
+                      return '[v piatok o] LT';
+                  case 6:
+                      return '[v sobotu o] LT';
+                  }
+              },
+              lastDay: '[včera o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulú nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[minulý] dddd [o] LT';
+                  case 3:
+                      return '[minulú stredu o] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [o] LT';
+                  case 6:
+                      return '[minulú sobotu o] LT';
+                  }
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "pred %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 102 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovenian (sl)
+  // author : Robert Sedovšek : https://github.com/sedovsek
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'ena minuta' : 'eno minuto';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2) {
+                  result += 'minuti';
+              } else if (number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minut';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'ena ura' : 'eno uro';
+          case 'hh':
+              if (number === 1) {
+                  result += 'ura';
+              } else if (number === 2) {
+                  result += 'uri';
+              } else if (number === 3 || number === 4) {
+                  result += 'ure';
+              } else {
+                  result += 'ur';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dni';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mesec';
+              } else if (number === 2) {
+                  result += 'meseca';
+              } else if (number === 3 || number === 4) {
+                  result += 'mesece';
+              } else {
+                  result += 'mesecev';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'leto';
+              } else if (number === 2) {
+                  result += 'leti';
+              } else if (number === 3 || number === 4) {
+                  result += 'leta';
+              } else {
+                  result += 'let';
+              }
+              return result;
+          }
       }
-    }
-
-    this.selectionObj = {nodes:{},edges:{}};
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+      return moment.lang('sl', {
+          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
+          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
+          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
+          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danes ob] LT',
+              nextDay  : '[jutri ob] LT',
 
-  /**
-   * Unselect all clusters. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectClusters = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v] [nedeljo] [ob] LT';
+                  case 3:
+                      return '[v] [sredo] [ob] LT';
+                  case 6:
+                      return '[v] [soboto] [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[v] dddd [ob] LT';
+                  }
+              },
+              lastDay  : '[včeraj ob] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[prejšnja] dddd [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prejšnji] dddd [ob] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "čez %s",
+              past   : "%s nazaj",
+              s      : "nekaj sekund",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "en dan",
+              dd     : translate,
+              M      : "en mesec",
+              MM     : translate,
+              y      : "eno leto",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    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]);
-        }
-      }
-    }
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+/***/ },
+/* 103 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Albanian (sq)
+  // author : Flakërim Ismani : https://github.com/flakerimi
+  // author: Menelion Elensúle: https://github.com/Oire (tests)
+  // author : Oerd Cukalla : https://github.com/oerd (fixes)
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    return count;
-  };
+  }(function (moment) {
+      return moment.lang('sq', {
+          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
+          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
+          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
+          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
+          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              return hours < 12 ? 'PD' : 'MD';
+          },
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Sot në] LT',
+              nextDay : '[Nesër në] LT',
+              nextWeek : 'dddd [në] LT',
+              lastDay : '[Dje në] LT',
+              lastWeek : 'dddd [e kaluar në] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "në %s",
+              past : "%s më parë",
+              s : "disa sekonda",
+              m : "një minutë",
+              mm : "%d minuta",
+              h : "një orë",
+              hh : "%d orë",
+              d : "një ditë",
+              dd : "%d ditë",
+              M : "një muaj",
+              MM : "%d muaj",
+              y : "një vit",
+              yy : "%d vite"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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;
-  };
 
-  /**
-   * 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;
-  };
+/***/ },
+/* 104 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-cyrillic (sr-cyrl)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    return count;
-  };
-
+  }(function (moment) {
 
-  /**
-   * 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;
-  };
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['један минут', 'једне минуте'],
+              mm: ['минут', 'минуте', 'минута'],
+              h: ['један сат', 'једног сата'],
+              hh: ['сат', 'сата', 'сати'],
+              dd: ['дан', 'дана', 'дана'],
+              MM: ['месец', 'месеца', 'месеци'],
+              yy: ['година', 'године', 'година']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
+          }
+      };
 
-  /**
-   * 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;
-  };
+      return moment.lang('sr-cyrl', {
+          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
+          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
+          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
+          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
+          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[данас у] LT',
+              nextDay: '[сутра у] LT',
 
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[у] [недељу] [у] LT';
+                  case 3:
+                      return '[у] [среду] [у] LT';
+                  case 6:
+                      return '[у] [суботу] [у] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[у] dddd [у] LT';
+                  }
+              },
+              lastDay  : '[јуче у] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[прошле] [недеље] [у] LT',
+                      '[прошлог] [понедељка] [у] LT',
+                      '[прошлог] [уторка] [у] LT',
+                      '[прошле] [среде] [у] LT',
+                      '[прошлог] [четвртка] [у] LT',
+                      '[прошлог] [петка] [у] LT',
+                      '[прошле] [суботе] [у] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past   : "пре %s",
+              s      : "неколико секунди",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "дан",
+              dd     : translator.translate,
+              M      : "месец",
+              MM     : translator.translate,
+              y      : "годину",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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;
-  };
 
-  /**
-   * 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);
-    }
-  };
+/***/ },
+/* 105 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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);
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-latin (sr)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-  /**
-   * 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);
-    }
-  };
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['jedan minut', 'jedne minute'],
+              mm: ['minut', 'minute', 'minuta'],
+              h: ['jedan sat', 'jednog sata'],
+              hh: ['sat', 'sata', 'sati'],
+              dd: ['dan', 'dana', 'dana'],
+              MM: ['mesec', 'meseca', 'meseci'],
+              yy: ['godina', 'godine', 'godina']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
+          }
+      };
 
+      return moment.lang('sr', {
+          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
+          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
+          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
+          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[danas u] LT',
+              nextDay: '[sutra u] LT',
 
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedelju] [u] LT';
+                  case 3:
+                      return '[u] [sredu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[juče u] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[prošle] [nedelje] [u] LT',
+                      '[prošlog] [ponedeljka] [u] LT',
+                      '[prošlog] [utorka] [u] LT',
+                      '[prošle] [srede] [u] LT',
+                      '[prošlog] [četvrtka] [u] LT',
+                      '[prošlog] [petka] [u] LT',
+                      '[prošle] [subote] [u] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "pre %s",
+              s      : "nekoliko sekundi",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "dan",
+              dd     : translator.translate,
+              M      : "mesec",
+              MM     : translator.translate,
+              y      : "godinu",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    if (highlightEdges === undefined) {
-      highlightEdges = true;
-    }
+/***/ },
+/* 106 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
-      this._unselectAll(true);
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : swedish (sv)
+  // author : Jens Alm : https://github.com/ulmus
 
-    if (object.selected == false) {
-      object.select();
-      this._addToSelection(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
-        this._selectConnectedEdges(object);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    else {
-      object.unselect();
-      this._removeFromSelection(object);
-    }
+  }(function (moment) {
+      return moment.lang('sv', {
+          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
+          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
+          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Idag] LT',
+              nextDay: '[Imorgon] LT',
+              lastDay: '[Igår] LT',
+              nextWeek: 'dddd LT',
+              lastWeek: '[Förra] dddd[en] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "för %s sedan",
+              s : "några sekunder",
+              m : "en minut",
+              mm : "%d minuter",
+              h : "en timme",
+              hh : "%d timmar",
+              d : "en dag",
+              dd : "%d dagar",
+              M : "en månad",
+              MM : "%d månader",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
+                  (b === 1) ? 'a' :
+                  (b === 2) ? 'a' :
+                  (b === 3) ? 'e' : 'e';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
 
+/***/ },
+/* 107 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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});
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : tamil (ta)
+  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
 
-  /**
-   * 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});
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    if (object instanceof Node) {
-      this._hoverConnectedEdges(object);
-    }
-  };
+  }(function (moment) {
+      /*var symbolMap = {
+              '1': '௧',
+              '2': '௨',
+              '3': '௩',
+              '4': '௪',
+              '5': '௫',
+              '6': '௬',
+              '7': '௭',
+              '8': '௮',
+              '9': '௯',
+              '0': '௦'
+          },
+          numberMap = {
+              '௧': '1',
+              '௨': '2',
+              '௩': '3',
+              '௪': '4',
+              '௫': '5',
+              '௬': '6',
+              '௭': '7',
+              '௮': '8',
+              '௯': '9',
+              '௦': '0'
+          }; */
 
+      return moment.lang('ta', {
+          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
+          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
+          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[இன்று] LT',
+              nextDay : '[நாளை] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[நேற்று] LT',
+              lastWeek : '[கடந்த வாரம்] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s இல்",
+              past : "%s முன்",
+              s : "ஒரு சில விநாடிகள்",
+              m : "ஒரு நிமிடம்",
+              mm : "%d நிமிடங்கள்",
+              h : "ஒரு மணி நேரம்",
+              hh : "%d மணி நேரம்",
+              d : "ஒரு நாள்",
+              dd : "%d நாட்கள்",
+              M : "ஒரு மாதம்",
+              MM : "%d மாதங்கள்",
+              y : "ஒரு வருடம்",
+              yy : "%d ஆண்டுகள்"
+          },
+  /*        preparse: function (string) {
+              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },*/
+          ordinal : function (number) {
+              return number + 'வது';
+          },
 
-  /**
-   * 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) {
-  };
 
+  // refer http://ta.wikipedia.org/s/1er1      
 
-  /**
-   * 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();
-      }
-    }
-    this.emit("click", this.getSelection());
-    this._redraw();
-  };
+          meridiem : function (hour, minute, isLower) {
+              if (hour >= 6 && hour <= 10) {
+                  return " காலை";
+              } else   if (hour >= 10 && hour <= 14) {
+                  return " நண்பகல்";
+              } else    if (hour >= 14 && hour <= 18) {
+                  return " எற்பாடு";
+              } else   if (hour >= 18 && hour <= 20) {
+                  return " மாலை";
+              } else  if (hour >= 20 && hour <= 24) {
+                  return " இரவு";
+              } else  if (hour >= 0 && hour <= 6) {
+                  return " வைகறை";
+              }
+          },
+          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.
+          }
+      });
+  }));
 
 
-  /**
-   * 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);
-    }
-    this.emit("doubleClick", this.getSelection());
-  };
+/***/ },
+/* 108 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : thai (th)
+  // author : Kridsada Thanabulpong : https://github.com/sirn
 
-  /**
-   * 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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    this._redraw();
-  };
+  }(function (moment) {
+      return moment.lang('th', {
+          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
+          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
+          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
+          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
+          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
+          longDateFormat : {
+              LT : "H นาฬิกา m นาที",
+              L : "YYYY/MM/DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY เวลา LT",
+              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ก่อนเที่ยง";
+              } else {
+                  return "หลังเที่ยง";
+              }
+          },
+          calendar : {
+              sameDay : '[วันนี้ เวลา] LT',
+              nextDay : '[พรุ่งนี้ เวลา] LT',
+              nextWeek : 'dddd[หน้า เวลา] LT',
+              lastDay : '[เมื่อวานนี้ เวลา] LT',
+              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "อีก %s",
+              past : "%sที่แล้ว",
+              s : "ไม่กี่วินาที",
+              m : "1 นาที",
+              mm : "%d นาที",
+              h : "1 ชั่วโมง",
+              hh : "%d ชั่วโมง",
+              d : "1 วัน",
+              dd : "%d วัน",
+              M : "1 เดือน",
+              MM : "%d เดือน",
+              y : "1 ปี",
+              yy : "%d ปี"
+          }
+      });
+  }));
 
 
-  /**
-   * handle the onRelease event. These functions are here for the navigation controls module.
-   *
-    * @private
-   */
-  exports._handleOnRelease = function(pointer) {
+/***/ },
+/* 109 */
+/***/ function(module, exports, __webpack_require__) {
 
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Tagalog/Filipino (tl-ph)
+  // author : Dan Hagman
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tl-ph', {
+          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
+          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
+          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
+          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
+          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "MM/D/YYYY",
+              LL : "MMMM D, YYYY",
+              LLL : "MMMM D, YYYY LT",
+              LLLL : "dddd, MMMM DD, YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Ngayon sa] LT",
+              nextDay: '[Bukas sa] LT',
+              nextWeek: 'dddd [sa] LT',
+              lastDay: '[Kahapon sa] LT',
+              lastWeek: 'dddd [huling linggo] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "sa loob ng %s",
+              past : "%s ang nakalipas",
+              s : "ilang segundo",
+              m : "isang minuto",
+              mm : "%d minuto",
+              h : "isang oras",
+              hh : "%d oras",
+              d : "isang araw",
+              dd : "%d araw",
+              M : "isang buwan",
+              MM : "%d buwan",
+              y : "isang taon",
+              yy : "%d taon"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   *
-   * 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};
-  };
+/***/ },
+/* 110 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   *
-   * retrieve the currently selected nodes
-   * @return {String[]} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedNodes = function() {
-    var idArray = [];
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        idArray.push(nodeId);
-      }
-    }
-    return idArray
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : turkish (tr)
+  // authors : Erhan Gundogan : https://github.com/erhangundogan,
+  //           Burak Yiğit Kaya: https://github.com/BYK
 
-  /**
-   *
-   * retrieve the currently selected edges
-   * @return {Array} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedEdges = function() {
-    var idArray = [];
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        idArray.push(edgeId);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    return idArray;
-  };
+  }(function (moment) {
 
+      var suffixes = {
+          1: "'inci",
+          5: "'inci",
+          8: "'inci",
+          70: "'inci",
+          80: "'inci",
 
-  /**
-   * select zero or more nodes
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.setSelection = function(selection) {
-    var i, iMax, id;
+          2: "'nci",
+          7: "'nci",
+          20: "'nci",
+          50: "'nci",
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+          3: "'üncü",
+          4: "'üncü",
+          100: "'üncü",
 
-    // first unselect any selected node
-    this._unselectAll(true);
+          6: "'ncı",
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+          9: "'uncu",
+          10: "'uncu",
+          30: "'uncu",
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true);
-    }
+          60: "'ıncı",
+          90: "'ıncı"
+      };
 
-    console.log("setSelection is deprecated. Please use selectNodes instead.")
+      return moment.lang('tr', {
+          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
+          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
+          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
+          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
+          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[yarın saat] LT',
+              nextWeek : '[haftaya] dddd [saat] LT',
+              lastDay : '[dün] LT',
+              lastWeek : '[geçen hafta] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s önce",
+              s : "birkaç saniye",
+              m : "bir dakika",
+              mm : "%d dakika",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir yıl",
+              yy : "%d yıl"
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "'ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
 
-    this.redraw();
-  };
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 111 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
+  // author : Abdel Said : https://github.com/abdelsaid
 
-    // first unselect any selected node
-    this._unselectAll(true);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tzm-latn', {
+          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[asdkh g] LT",
+              nextDay: '[aska g] LT',
+              nextWeek: 'dddd [g] LT',
+              lastDay: '[assant g] LT',
+              lastWeek: 'dddd [g] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dadkh s yan %s",
+              past : "yan %s",
+              s : "imik",
+              m : "minuḍ",
+              mm : "%d minuḍ",
+              h : "saɛa",
+              hh : "%d tassaɛin",
+              d : "ass",
+              dd : "%d ossan",
+              M : "ayowr",
+              MM : "%d iyyirn",
+              y : "asgas",
+              yy : "%d isgasn"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
+/***/ },
+/* 112 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt (tzm)
+  // author : Abdel Said : https://github.com/abdelsaid
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tzm', {
+          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
+              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
+              nextWeek: 'dddd [ⴴ] LT',
+              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
+              lastWeek: 'dddd [ⴴ] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
+              past : "ⵢⴰⵏ %s",
+              s : "ⵉⵎⵉⴽ",
+              m : "ⵎⵉⵏⵓⴺ",
+              mm : "%d ⵎⵉⵏⵓⴺ",
+              h : "ⵙⴰⵄⴰ",
+              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
+              d : "ⴰⵙⵙ",
+              dd : "%d oⵙⵙⴰⵏ",
+              M : "ⴰⵢoⵓⵔ",
+              MM : "%d ⵉⵢⵢⵉⵔⵏ",
+              y : "ⴰⵙⴳⴰⵙ",
+              yy : "%d ⵉⵙⴳⴰⵙⵏ"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
 
-    // first unselect any selected node
-    this._unselectAll(true);
+/***/ },
+/* 113 */
+/***/ function(module, exports, __webpack_require__) {
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : ukrainian (uk)
+  // author : zemlanin : https://github.com/zemlanin
+  // Author : Menelion Elensúle : https://github.com/Oire
 
-      var edge = this.edges[id];
-      if (!edge) {
-        throw new RangeError('Edge with id "' + id + '" not found');
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      this._selectObject(edge,true,true,highlightEdges);
-    }
-    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];
-        }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
       }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        if (!this.edges.hasOwnProperty(edgeId)) {
-          delete this.selectionObj.edges[edgeId];
-        }
+
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'хвилина_хвилини_хвилин',
+              'hh': 'година_години_годин',
+              'dd': 'день_дні_днів',
+              'MM': 'місяць_місяці_місяців',
+              'yy': 'рік_роки_років'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'хвилина' : 'хвилину';
+          }
+          else if (key === 'h') {
+              return withoutSuffix ? 'година' : 'годину';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
       }
-    }
-  };
 
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
+              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
+          },
 
-/***/ },
-/* 50 */
-/***/ function(module, exports, __webpack_require__) {
+          nounCase = (/D[oD]? *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(42);
-  var Edge = __webpack_require__(43);
+          return months[nounCase][m.month()];
+      }
 
-  /**
-   * clears the toolbar div element of children
-   *
-   * @private
-   */
-  exports._clearManipulatorBar = function() {
-    while (this.manipulationDiv.hasChildNodes()) {
-      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-    }
-  };
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
+              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
+              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
+          },
 
-  /**
-   * 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];
+          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
+              'accusative' :
+              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
+                  'genitive' :
+                  'nominative');
+
+          return weekdays[nounCase][m.day()];
       }
-    }
-  };
 
-  /**
-   * Enable or disable edit-mode.
-   *
-   * @private
-   */
-  exports._toggleEditMode = function() {
-    this.editMode = !this.editMode;
-    var toolbar = document.getElementById("network-manipulationDiv");
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("network-manipulation-editMode");
-    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()
-  };
+      function processHoursFunction(str) {
+          return function () {
+              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
+          };
+      }
 
-  /**
-   * 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);
-    }
+      return moment.lang('uk', {
+          months : monthsCaseReplace,
+          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY р.",
+              LLL : "D MMMM YYYY р., LT",
+              LLLL : "dddd, D MMMM YYYY р., LT"
+          },
+          calendar : {
+              sameDay: processHoursFunction('[Сьогодні '),
+              nextDay: processHoursFunction('[Завтра '),
+              lastDay: processHoursFunction('[Вчора '),
+              nextWeek: processHoursFunction('[У] dddd ['),
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 5:
+                  case 6:
+                      return processHoursFunction('[Минулої] dddd [').call(this);
+                  case 1:
+                  case 2:
+                  case 4:
+                      return processHoursFunction('[Минулого] dddd [').call(this);
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past : "%s тому",
+              s : "декілька секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "годину",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "місяць",
+              MM : relativeTimeWithPlural,
+              y : "рік",
+              yy : relativeTimeWithPlural
+          },
 
-    if (this.edgeBeingEdited !== undefined) {
-      this.edgeBeingEdited._disableControlNodes();
-      this.edgeBeingEdited = undefined;
-      this.selectedControlNode = null;
-      this.controlNodesActive = false;
-    }
+          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
 
-    // restore overloaded functions
-    this._restoreOverloadedFunctions();
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночі";
+              } else if (hour < 12) {
+                  return "ранку";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечора";
+              }
+          },
+
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+              case 'w':
+              case 'W':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              default:
+                  return number;
+              }
+          },
 
-    // resume calculation
-    this.freezeSimulation = false;
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    // reset global variables
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
 
-    if (this.editMode == true) {
-      while (this.manipulationDiv.hasChildNodes()) {
-        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-      }
-      // add the icons to the manipulator div
-      this.manipulationDiv.innerHTML = "" +
-        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
-      }
+/***/ },
+/* 114 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : uzbek
+  // author : Sardor Muminov : https://github.com/muminoff
 
-      // bind the icons
-      var addNodeButton = document.getElementById("network-manipulate-addNode");
-      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("network-manipulate-editNode");
-        editButton.onclick = this._editNode.bind(this);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("network-manipulate-editEdge");
-        editButton.onclick = this._createEditEdgeToolbar.bind(this);
-      }
-      if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("network-manipulate-delete");
-        deleteButton.onclick = this._deleteSelected.bind(this);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      var closeDiv = document.getElementById("network-manipulation-closeDiv");
-      closeDiv.onclick = this._toggleEditMode.bind(this);
-
-      this.boundFunction = this._createManipulatorBar.bind(this);
-      this.on('select', this.boundFunction);
-    }
-    else {
-      this.editModeDiv.innerHTML = "" +
-        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("network-manipulate-editModeButton");
-      editModeButton.onclick = this._toggleEditMode.bind(this);
-    }
-  };
-
+  }(function (moment) {
+      return moment.lang('uz', {
+          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
+          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
+          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
+          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
+          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "D MMMM YYYY, dddd LT"
+          },
+          calendar : {
+              sameDay : '[Бугун соат] LT [да]',
+              nextDay : '[Эртага] LT [да]',
+              nextWeek : 'dddd [куни соат] LT [да]',
+              lastDay : '[Кеча соат] LT [да]',
+              lastWeek : '[Утган] dddd [куни соат] LT [да]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "Якин %s ичида",
+              past : "Бир неча %s олдин",
+              s : "фурсат",
+              m : "бир дакика",
+              mm : "%d дакика",
+              h : "бир соат",
+              hh : "%d соат",
+              d : "бир кун",
+              dd : "%d кун",
+              M : "бир ой",
+              MM : "%d ой",
+              y : "бир йил",
+              yy : "%d йил"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * Create the toolbar for adding Nodes
-   *
-   * @private
-   */
-  exports._createAddNodeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+/***/ },
+/* 115 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // create the toolbar contents
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : vietnamese (vi)
+  // author : Bang Nguyen : https://github.com/bangnk
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('vi', {
+          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
+          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
+          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
+          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM [năm] YYYY",
+              LLL : "D MMMM [năm] YYYY LT",
+              LLLL : "dddd, D MMMM [năm] YYYY LT",
+              l : "DD/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Hôm nay lúc] LT",
+              nextDay: '[Ngày mai lúc] LT',
+              nextWeek: 'dddd [tuần tới lúc] LT',
+              lastDay: '[Hôm qua lúc] LT',
+              lastWeek: 'dddd [tuần rồi lúc] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s tới",
+              past : "%s trước",
+              s : "vài giây",
+              m : "một phút",
+              mm : "%d phút",
+              h : "một giờ",
+              hh : "%d giờ",
+              d : "một ngày",
+              dd : "%d ngày",
+              M : "một tháng",
+              MM : "%d tháng",
+              y : "một năm",
+              yy : "%d năm"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._addNode.bind(this);
-    this.on('select', this.boundFunction);
-  };
 
+/***/ },
+/* 116 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * create the toolbar to connect nodes
-   *
-   * @private
-   */
-  exports._createAddEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this._unselectAll(true);
-    this.freezeSimulation = true;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chinese
+  // author : suupic : https://github.com/suupic
+  // author : Zeno Zeng : https://github.com/zenozeng
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-cn', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah点mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY-MM-DD",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 600) {
+                  return "凌晨";
+              } else if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : function () {
+                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
+              },
+              nextDay : function () {
+                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
+              },
+              lastDay : function () {
+                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
+              },
+              nextWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              lastWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              sameElse : 'LL'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d":
+              case "D":
+              case "DDD":
+                  return number + "日";
+              case "M":
+                  return number + "月";
+              case "w":
+              case "W":
+                  return number + "周";
+              default:
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s内",
+              past : "%s前",
+              s : "几秒",
+              m : "1分钟",
+              mm : "%d分钟",
+              h : "1小时",
+              hh : "%d小时",
+              d : "1天",
+              dd : "%d天",
+              M : "1个月",
+              MM : "%d个月",
+              y : "1年",
+              yy : "%d年"
+          },
+          week : {
+              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    this._unselectAll();
-    this.forceAppendSelection = false;
-    this.blockConnectingEdgeSelection = true;
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
+/***/ },
+/* 117 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : traditional chinese (zh-tw)
+  // author : Ben : https://github.com/ben-lin
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._handleConnect.bind(this);
-    this.on('select', this.boundFunction);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-tw', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah點mm",
+              L : "YYYY年MMMD日",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY年MMMD日",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : '[今天]LT',
+              nextDay : '[明天]LT',
+              nextWeek : '[下]ddddLT',
+              lastDay : '[昨天]LT',
+              lastWeek : '[上]ddddLT',
+              sameElse : 'L'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d" :
+              case "D" :
+              case "DDD" :
+                  return number + "日";
+              case "M" :
+                  return number + "月";
+              case "w" :
+              case "W" :
+                  return number + "週";
+              default :
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s內",
+              past : "%s前",
+              s : "幾秒",
+              m : "一分鐘",
+              mm : "%d分鐘",
+              h : "一小時",
+              hh : "%d小時",
+              d : "一天",
+              dd : "%d天",
+              M : "一個月",
+              MM : "%d個月",
+              y : "一年",
+              yy : "%d年"
+          }
+      });
+  }));
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"] = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
-    this._handleTouch = this._handleConnect;
-    this._handleOnRelease = this._finishConnect;
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+/***/ },
+/* 118 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * create the toolbar to edit edges
+   * Copyright 2012 Craig Campbell
    *
-   * @private
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   * http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Mousetrap is a simple keyboard shortcut library for Javascript with
+   * no external dependencies
+   *
+   * @version 1.1.2
+   * @url craig.is/killing/mice
    */
-  exports._createEditEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this.controlNodesActive = true;
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+    /**
+     * mapping of special keycodes to their corresponding keys
+     *
+     * everything in this dictionary cannot use keypress events
+     * so it has to be here to map to the correct keycodes for
+     * keyup/keydown events
+     *
+     * @type {Object}
+     */
+    var _MAP = {
+            8: 'backspace',
+            9: 'tab',
+            13: 'enter',
+            16: 'shift',
+            17: 'ctrl',
+            18: 'alt',
+            20: 'capslock',
+            27: 'esc',
+            32: 'space',
+            33: 'pageup',
+            34: 'pagedown',
+            35: 'end',
+            36: 'home',
+            37: 'left',
+            38: 'up',
+            39: 'right',
+            40: 'down',
+            45: 'ins',
+            46: 'del',
+            91: 'meta',
+            93: 'meta',
+            224: 'meta'
+        },
 
-    this.edgeBeingEdited = this._getSelectedEdge();
-    this.edgeBeingEdited._enableControlNodes();
+        /**
+         * mapping for special characters so they can support
+         *
+         * this dictionary is only used incase you want to bind a
+         * keyup or keydown event to one of these keys
+         *
+         * @type {Object}
+         */
+        _KEYCODE_MAP = {
+            106: '*',
+            107: '+',
+            109: '-',
+            110: '.',
+            111 : '/',
+            186: ';',
+            187: '=',
+            188: ',',
+            189: '-',
+            190: '.',
+            191: '/',
+            192: '`',
+            219: '[',
+            220: '\\',
+            221: ']',
+            222: '\''
+        },
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
+        /**
+         * this is a mapping of keys that require shift on a US keypad
+         * back to the non shift equivelents
+         *
+         * this is so you can use keyup events with these keys
+         *
+         * note that this will only work reliably on US keyboards
+         *
+         * @type {Object}
+         */
+        _SHIFT_MAP = {
+            '~': '`',
+            '!': '1',
+            '@': '2',
+            '#': '3',
+            '$': '4',
+            '%': '5',
+            '^': '6',
+            '&': '7',
+            '*': '8',
+            '(': '9',
+            ')': '0',
+            '_': '-',
+            '+': '=',
+            ':': ';',
+            '\"': '\'',
+            '<': ',',
+            '>': '.',
+            '?': '/',
+            '|': '\\'
+        },
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+        /**
+         * this is a list of special strings you can use to map
+         * to modifier keys when you specify your keyboard shortcuts
+         *
+         * @type {Object}
+         */
+        _SPECIAL_ALIASES = {
+            'option': 'alt',
+            'command': 'meta',
+            'return': 'enter',
+            'escape': 'esc'
+        },
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
-    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._handleOnRelease = this._releaseControlNode;
+        /**
+         * variable to store the flipped version of _MAP from above
+         * needed to check if we should use keypress or not when no action
+         * is specified
+         *
+         * @type {Object|undefined}
+         */
+        _REVERSE_MAP,
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+        /**
+         * a list of all the callbacks setup via Mousetrap.bind()
+         *
+         * @type {Object}
+         */
+        _callbacks = {},
 
+        /**
+         * direct map of string combinations to callbacks used for trigger()
+         *
+         * @type {Object}
+         */
+        _direct_map = {},
 
+        /**
+         * keeps track of what level each sequence is at since multiple
+         * sequences can start out with the same sequence
+         *
+         * @type {Object}
+         */
+        _sequence_levels = {},
 
+        /**
+         * variable to store the setTimeout call
+         *
+         * @type {null|number}
+         */
+        _reset_timer,
 
+        /**
+         * temporary state where we will ignore the next keyup
+         *
+         * @type {boolean|string}
+         */
+        _ignore_next_keyup = false,
 
-  /**
-   * 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();
-  };
+        /**
+         * are we currently inside of a sequence?
+         * type of action ("keyup" or "keydown" or "keypress") or false
+         *
+         * @type {boolean|string}
+         */
+        _inside_sequence = false;
 
-  /**
-   * 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);
+    /**
+     * loop through the f keys, f1 to f19 and add them to the map
+     * programatically
+     */
+    for (var i = 1; i < 20; ++i) {
+        _MAP[111 + i] = 'f' + i;
     }
-    this._redraw();
-  };
 
-  exports._releaseControlNode = function(pointer) {
-    var newNode = this._getNodeAt(pointer);
-    if (newNode != null) {
-      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
-        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
-        this.edgeBeingEdited.controlNodes.from.unselect();
-      }
-      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
-        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
-        this.edgeBeingEdited.controlNodes.to.unselect();
-      }
-    }
-    else {
-      this.edgeBeingEdited._restoreControlNodes();
+    /**
+     * loop through to map numbers on the numeric keypad
+     */
+    for (i = 0; i <= 9; ++i) {
+        _MAP[i + 96] = i;
     }
-    this.freezeSimulation = false;
-    this._redraw();
-  };
 
-  /**
-   * 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("Cannot create edges to a cluster.")
+    /**
+     * cross browser add event method
+     *
+     * @param {Element|HTMLDocument} object
+     * @param {string} type
+     * @param {Function} callback
+     * @returns void
+     */
+    function _addEvent(object, type, callback) {
+        if (object.addEventListener) {
+            return object.addEventListener(type, callback, false);
         }
-        else {
-          this._selectObject(node,false);
-          // create a node the temporary line can look at
-          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetNode'].x = node.x;
-          this.sectors['support']['nodes']['targetNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
-          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
-
-          // create a temporary edge
-          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
-          this.edges['connectionEdge'].from = node;
-          this.edges['connectionEdge'].connected = true;
-          this.edges['connectionEdge'].smooth = true;
-          this.edges['connectionEdge'].selected = true;
-          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
-          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
-
-          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
-          this._handleOnDrag = function(event) {
-            var pointer = this._getPointer(event.gesture.center);
-            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-          };
 
-          this.moving = true;
-          this.start();
-        }
-      }
+        object.attachEvent('on' + type, callback);
     }
-  };
-
-  exports._finishConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 1) {
-
-      // restore the drag function
-      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
-      delete this.cachedFunctions["_handleOnDrag"];
-
-      // remember the edge id
-      var connectFromId = this.edges['connectionEdge'].fromId;
 
-      // remove the temporary nodes and edge
-      delete this.edges['connectionEdge'];
-      delete this.sectors['support']['nodes']['targetNode'];
-      delete this.sectors['support']['nodes']['targetViaNode'];
+    /**
+     * takes the event and returns the key character
+     *
+     * @param {Event} e
+     * @return {string}
+     */
+    function _characterFromEvent(e) {
 
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert("Cannot create edges to a cluster.")
-        }
-        else {
-          this._createEdge(connectFromId,node.id);
-          this._createManipulatorBar();
+        // for keypress events we should return the character as is
+        if (e.type == 'keypress') {
+            return String.fromCharCode(e.which);
         }
-      }
-      this._unselectAll();
-    }
-  };
 
-
-  /**
-   * 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();
-          });
+        // for non keypress events the special maps are needed
+        if (_MAP[e.which]) {
+            return _MAP[e.which];
         }
-        else {
-          alert(this.constants.labels['addError']);
-          this._createManipulatorBar();
-          this.moving = true;
-          this.start();
+
+        if (_KEYCODE_MAP[e.which]) {
+            return _KEYCODE_MAP[e.which];
         }
-      }
-      else {
-        this.nodesData.add(defaultData);
-        this._createManipulatorBar();
-        this.moving = true;
-        this.start();
-      }
+
+        // if it is not in the special map
+        return String.fromCharCode(e.which).toLowerCase();
     }
-  };
 
+    /**
+     * should we stop this event before firing off callbacks
+     *
+     * @param {Event} e
+     * @return {boolean}
+     */
+    function _stop(e) {
+        var element = e.target || e.srcElement,
+            tag_name = element.tagName;
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
+        // if the element has the class "mousetrap" then no need to stop
+        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
+            return false;
         }
-      }
-      else {
-        this.edgesData.add(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.update(defaultData);
-        this.moving = true;
-        this.start();
-      }
+        // stop for input, select, and textarea
+        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
     }
-  };
 
-  /**
-   * 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.group,
-        shape: node.shape,
-        color: {
-          background:node.color.background,
-          border:node.color.border,
-          highlight: {
-            background:node.color.highlight.background,
-            border:node.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 {
-        alert(this.constants.labels["editError"]);
-      }
-    }
-    else {
-      alert(this.constants.labels["editBoundError"]);
+    /**
+     * checks if two arrays are equal
+     *
+     * @param {Array} modifiers1
+     * @param {Array} modifiers2
+     * @returns {boolean}
+     */
+    function _modifiersMatch(modifiers1, modifiers2) {
+        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
     }
-  };
 
+    /**
+     * resets all sequence counters except for the ones passed in
+     *
+     * @param {Object} do_not_reset
+     * @returns void
+     */
+    function _resetSequences(do_not_reset) {
+        do_not_reset = do_not_reset || {};
 
+        var active_sequences = false,
+            key;
 
+        for (key in _sequence_levels) {
+            if (do_not_reset[key]) {
+                active_sequences = true;
+                continue;
+            }
+            _sequence_levels[key] = 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 {
-            alert(this.constants.labels["deleteError"])
-          }
+        if (!active_sequences) {
+            _inside_sequence = false;
+        }
+    }
+
+    /**
+     * finds all callbacks that match based on the keycode, modifiers,
+     * and action
+     *
+     * @param {string} character
+     * @param {Array} modifiers
+     * @param {string} action
+     * @param {boolean=} remove - should we remove any matches
+     * @param {string=} combination
+     * @returns {Array}
+     */
+    function _getMatches(character, modifiers, action, remove, combination) {
+        var i,
+            callback,
+            matches = [];
+
+        // if there are no events related to this keycode
+        if (!_callbacks[character]) {
+            return [];
         }
-        else {
-          this.edgesData.remove(selectedEdges);
-          this.nodesData.remove(selectedNodes);
-          this._unselectAll();
-          this.moving = true;
-          this.start();
+
+        // if a modifier key is coming up on its own we should allow it
+        if (action == 'keyup' && _isModifier(character)) {
+            modifiers = [character];
         }
-      }
-      else {
-        alert(this.constants.labels["deleteClusterError"]);
-      }
-    }
-  };
 
+        // loop through all callbacks for the key that was pressed
+        // and see if any of them match
+        for (i = 0; i < _callbacks[character].length; ++i) {
+            callback = _callbacks[character][i];
 
-/***/ },
-/* 51 */
-/***/ function(module, exports, __webpack_require__) {
+            // if this is a sequence but it is not at the right level
+            // then move onto the next match
+            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
+                continue;
+            }
 
-  exports._cleanNavigation = function() {
-    // clean up previous navigation items
-    var wrapper = document.getElementById('network-navigation_wrapper');
-    if (wrapper != null) {
-      this.containerElement.removeChild(wrapper);
-    }
-    document.onmouseup = null;
-  };
+            // if the action we are looking for doesn't match the action we got
+            // then we should keep going
+            if (action != callback.action) {
+                continue;
+            }
 
-  /**
-   * 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();
+            // if this is a keypress event that means that we need to only
+            // look at the character, otherwise check the modifiers as
+            // well
+            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
 
-    this.navigationDivs = {};
-    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
-    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
+                // remove is used so if you change your mind and call bind a
+                // second time with a new function the first one is overwritten
+                if (remove && callback.combo == combination) {
+                    _callbacks[character].splice(i, 1);
+                }
 
-    this.navigationDivs['wrapper'] = document.createElement('div');
-    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
-    this.navigationDivs['wrapper'].style.position = "absolute";
-    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
+                matches.push(callback);
+            }
+        }
 
-    for (var i = 0; i < navigationDivs.length; i++) {
-      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
-      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
-      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+        return matches;
     }
 
-    document.onmouseup = this._stopMovement.bind(this);
-  };
+    /**
+     * takes a key event and figures out what the modifiers are
+     *
+     * @param {Event} e
+     * @returns {Array}
+     */
+    function _eventModifiers(e) {
+        var modifiers = [];
 
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._stopMovement = function() {
-    this._xStopMoving();
-    this._yStopMoving();
-    this._stopZoom();
-  };
+        if (e.shiftKey) {
+            modifiers.push('shift');
+        }
 
+        if (e.altKey) {
+            modifiers.push('alt');
+        }
 
-  /**
-   * stops the actions performed by page up and down etc.
-   *
-   * @param event
-   * @private
-   */
-  exports._preventDefault = function(event) {
-    if (event !== undefined) {
-      if (event.preventDefault) {
-        event.preventDefault();
-      } else {
-        event.returnValue = false;
-      }
-    }
-  };
+        if (e.ctrlKey) {
+            modifiers.push('ctrl');
+        }
 
+        if (e.metaKey) {
+            modifiers.push('meta');
+        }
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className += " active";
+        return modifiers;
     }
-  };
 
+    /**
+     * actually calls the callback function
+     *
+     * if your callback function returns false this will use the jquery
+     * convention - prevent default and stop propogation on the event
+     *
+     * @param {Function} callback
+     * @param {Event} e
+     * @returns void
+     */
+    function _fireCallback(callback, e) {
+        if (callback(e) === false) {
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+
+            if (e.stopPropagation) {
+                e.stopPropagation();
+            }
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['down'].className += " active";
+            e.returnValue = false;
+            e.cancelBubble = true;
+        }
     }
-  };
 
+    /**
+     * handles a character key event
+     *
+     * @param {string} character
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleCharacter(character, e) {
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className += " active";
-    }
-  };
+        // if this event should not happen stop here
+        if (_stop(e)) {
+            return;
+        }
 
+        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
+            i,
+            do_not_reset = {},
+            processed_sequence_callback = false;
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['right'].className += " active";
-    }
-  };
+        // loop through matching callbacks for this key event
+        for (i = 0; i < callbacks.length; ++i) {
 
+            // fire for all sequence callbacks
+            // this is because if for example you have multiple sequences
+            // bound such as "g i" and "g t" they both need to fire the
+            // callback for matching g cause otherwise you can only ever
+            // match the first one
+            if (callbacks[i].seq) {
+                processed_sequence_callback = true;
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className += " active";
-    }
-  };
+                // keep a list of which sequences were matches for later
+                do_not_reset[callbacks[i].seq] = 1;
+                _fireCallback(callbacks[i].callback, e);
+                continue;
+            }
 
+            // if there were no sequence matches but we are still here
+            // that means this is a regular match so we should fire that
+            if (!processed_sequence_callback && !_inside_sequence) {
+                _fireCallback(callbacks[i].callback, e);
+            }
+        }
 
-  /**
-   * Zoom out
-   * @private
-   */
-  exports._zoomOut = function() {
-    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomOut'].className += " active";
+        // if you are inside of a sequence and the key you are pressing
+        // is not a modifier key then we should reset all sequences
+        // that were not matched by this key event
+        if (e.type == _inside_sequence && !_isModifier(character)) {
+            _resetSequences(do_not_reset);
+        }
     }
-  };
 
+    /**
+     * handles a keydown event
+     *
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleKey(e) {
 
-  /**
-   * Stop zooming and unhighlight the zoom controls
-   * @private
-   */
-  exports._stopZoom = function() {
-    this.zoomIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
-      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
-    }
-  };
+        // normalize e.which for key events
+        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
+        e.which = typeof e.which == "number" ? e.which : e.keyCode;
 
+        var character = _characterFromEvent(e);
 
-  /**
-   * Stop moving in the Y direction and unHighlight the up and down
-   * @private
-   */
-  exports._yStopMoving = function() {
-    this.yIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
-      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
+        // no character found then stop
+        if (!character) {
+            return;
+        }
+
+        if (e.type == 'keyup' && _ignore_next_keyup == character) {
+            _ignore_next_keyup = false;
+            return;
+        }
+
+        _handleCharacter(character, e);
     }
-  };
 
+    /**
+     * determines if the keycode specified is a modifier key or not
+     *
+     * @param {string} key
+     * @returns {boolean}
+     */
+    function _isModifier(key) {
+        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
+    }
 
-  /**
-   * Stop moving in the X direction and unHighlight left and right.
-   * @private
-   */
-  exports._xStopMoving = function() {
-    this.xIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
-      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
+    /**
+     * called to set a 1 second timeout on the specified sequence
+     *
+     * this is so after each key press in the sequence you have 1 second
+     * to press the next key before you have to start over
+     *
+     * @returns void
+     */
+    function _resetSequenceTimer() {
+        clearTimeout(_reset_timer);
+        _reset_timer = setTimeout(_resetSequences, 1000);
     }
-  };
 
+    /**
+     * reverses the map lookup so that we can look for specific keys
+     * to see what can and can't use keypress
+     *
+     * @return {Object}
+     */
+    function _getReverseMap() {
+        if (!_REVERSE_MAP) {
+            _REVERSE_MAP = {};
+            for (var key in _MAP) {
 
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
+                // pull out the numeric keypad from here cause keypress should
+                // be able to detect the keys from the character
+                if (key > 95 && key < 112) {
+                    continue;
+                }
 
-  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;
+                if (_MAP.hasOwnProperty(key)) {
+                    _REVERSE_MAP[_MAP[key]] = key;
+                }
+            }
         }
-      }
+        return _REVERSE_MAP;
     }
-  };
 
-  /**
-   * 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) {
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
-        this.constants.hierarchicalLayout.levelSeparation *= -1;
-      }
-      else {
-        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
-      }
+    /**
+     * picks the best action based on the key combination
+     *
+     * @param {string} key - character for key
+     * @param {Array} modifiers
+     * @param {string=} action passed in
+     */
+    function _pickBestAction(key, modifiers, action) {
 
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
+        // if no action was picked in we should try to pick the one
+        // that we think would work best for this key
+        if (!action) {
+            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
         }
-      }
-      // 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;
-          }
+        // modifier keys don't work as expected with keypress,
+        // switch to keydown
+        if (action == 'keypress' && modifiers.length) {
+            action = 'keydown';
         }
-      }
 
-      // if the user defined some levels but not all, alert and run without hierarchical layout
-      if (undefinedLevel == true && definedLevel == true) {
-        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-        this.zoomExtent(true,this.constants.clustering.enabled);
-        if (!this.constants.clustering.enabled) {
-          this.start();
-        }
-      }
-      else {
-        // setup the system to use hierarchical method.
-        this._changeConstants();
+        return action;
+    }
 
-        // define levels if undefined by the users. Based on hubsize
-        if (undefinedLevel == true) {
-          this._determineLevels(hubsize);
+    /**
+     * binds a key sequence to an event
+     *
+     * @param {string} combo - combo specified in bind call
+     * @param {Array} keys
+     * @param {Function} callback
+     * @param {string=} action
+     * @returns void
+     */
+    function _bindSequence(combo, keys, callback, action) {
+
+        // start off by adding a sequence level record for this combination
+        // and setting the level to 0
+        _sequence_levels[combo] = 0;
+
+        // if there is no action pick the best one for the first key
+        // in the sequence
+        if (!action) {
+            action = _pickBestAction(keys[0], []);
         }
-        // check the distribution of the nodes per level.
-        var distribution = this._getDistribution();
 
-        // place the nodes on the canvas. This also stablilizes the system.
-        this._placeNodesByHierarchy(distribution);
+        /**
+         * callback to increase the sequence level for this sequence and reset
+         * all other sequences that were active
+         *
+         * @param {Event} e
+         * @returns void
+         */
+        var _increaseSequence = function(e) {
+                _inside_sequence = action;
+                ++_sequence_levels[combo];
+                _resetSequenceTimer();
+            },
 
-        // start the simulation.
-        this.start();
-      }
+            /**
+             * wraps the specified callback inside of another function in order
+             * to reset all sequence counters as soon as this sequence is done
+             *
+             * @param {Event} e
+             * @returns void
+             */
+            _callbackAndReset = function(e) {
+                _fireCallback(callback, e);
+
+                // we should ignore the next key up if the action is key down
+                // or keypress.  this is so if you finish a sequence and
+                // release the key the final key will not trigger a keyup
+                if (action !== 'keyup') {
+                    _ignore_next_keyup = _characterFromEvent(e);
+                }
+
+                // weird race condition if a sequence ends with the key
+                // another sequence begins with
+                setTimeout(_resetSequences, 10);
+            },
+            i;
+
+        // loop through keys one at a time and bind the appropriate callback
+        // function.  for any key leading up to the final one it should
+        // increase the sequence. after the final, it should reset all sequences
+        for (i = 0; i < keys.length; ++i) {
+            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
+        }
     }
-  };
 
+    /**
+     * binds a single keyboard combination
+     *
+     * @param {string} combination
+     * @param {Function} callback
+     * @param {string=} action
+     * @param {string=} sequence_name - name of sequence if part of sequence
+     * @param {number=} level - what part of the sequence the command is
+     * @returns void
+     */
+    function _bindSingle(combination, callback, action, sequence_name, level) {
 
-  /**
-   * 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;
+        // make sure multiple spaces in a row become a single space
+        combination = combination.replace(/\s+/g, ' ');
 
-    // start placing all the level 0 nodes first. Then recursively position their branches.
-    for (nodeId in distribution[0].nodes) {
-      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
-        node = distribution[0].nodes[nodeId];
-        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-          if (node.xFixed) {
-            node.x = distribution[0].minPos;
-            node.xFixed = false;
+        var sequence = combination.split(' '),
+            i,
+            key,
+            keys,
+            modifiers = [];
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
+        // if this pattern is a sequence of keys then run through this method
+        // to reprocess each pattern one key at a time
+        if (sequence.length > 1) {
+            return _bindSequence(combination, sequence, callback, action);
         }
-        else {
-          if (node.yFixed) {
-            node.y = distribution[0].minPos;
-            node.yFixed = false;
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
-      }
-    }
+        // take the keys from this pattern and figure out what the actual
+        // pattern is all about
+        keys = combination === '+' ? ['+'] : combination.split('+');
 
-    // stabilize the system after positioning. This function calls zoomExtent.
-    this._stabilize();
-  };
+        for (i = 0; i < keys.length; ++i) {
+            key = keys[i];
 
+            // normalize key names
+            if (_SPECIAL_ALIASES[key]) {
+                key = _SPECIAL_ALIASES[key];
+            }
 
-  /**
-   * This function get the distribution of levels based on hubsize
-   *
-   * @returns {Object}
-   * @private
-   */
-  exports._getDistribution = function() {
-    var distribution = {};
-    var nodeId, node, level;
+            // if this is not a keypress event then we should
+            // be smart about using shift keys
+            // this will only work for US keyboards however
+            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
+                key = _SHIFT_MAP[key];
+                modifiers.push('shift');
+            }
 
-    // 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 this key is a modifier then add it to the list of modifiers
+            if (_isModifier(key)) {
+                modifiers.push(key);
+            }
         }
-        if (!distribution.hasOwnProperty(node.level)) {
-          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+
+        // depending on what the key combination is
+        // we will try to pick the best event for it
+        action = _pickBestAction(key, modifiers, action);
+
+        // make sure to initialize array if this is the first time
+        // a callback is added for this key
+        if (!_callbacks[key]) {
+            _callbacks[key] = [];
         }
-        distribution[node.level].amount += 1;
-        distribution[node.level].nodes[node.id] = node;
-      }
+
+        // remove an existing match if there is one
+        _getMatches(key, modifiers, action, !sequence_name, combination);
+
+        // add this call back to the array
+        // if it is a sequence put it at the beginning
+        // if not put it at the end
+        //
+        // this is important because the way these are processed expects
+        // the sequence ones to come first
+        _callbacks[key][sequence_name ? 'unshift' : 'push']({
+            callback: callback,
+            modifiers: modifiers,
+            action: action,
+            seq: sequence_name,
+            level: level,
+            combo: combination
+        });
     }
 
-    // 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;
+    /**
+     * binds multiple combinations to the same callback
+     *
+     * @param {Array} combinations
+     * @param {Function} callback
+     * @param {string|undefined} action
+     * @returns void
+     */
+    function _bindMultiple(combinations, callback, action) {
+        for (var i = 0; i < combinations.length; ++i) {
+            _bindSingle(combinations[i], callback, action);
         }
-      }
     }
 
-    // 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);
-      }
-    }
+    // start!
+    _addEvent(document, 'keypress', _handleKey);
+    _addEvent(document, 'keydown', _handleKey);
+    _addEvent(document, 'keyup', _handleKey);
 
-    return distribution;
-  };
+    var mousetrap = {
 
+        /**
+         * binds an event to mousetrap
+         *
+         * can be a single key, a combination of keys separated with +,
+         * a comma separated list of keys, an array of keys, or
+         * a sequence of keys separated by spaces
+         *
+         * be sure to list the modifier keys first to make sure that the
+         * correct key ends up getting bound (the last key in the pattern)
+         *
+         * @param {string|Array} keys
+         * @param {Function} callback
+         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
+         * @returns void
+         */
+        bind: function(keys, callback, action) {
+            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
+            _direct_map[keys + ':' + action] = callback;
+            return this;
+        },
 
-  /**
-   * 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;
+        /**
+         * unbinds an event to mousetrap
+         *
+         * the unbinding sets the callback function of the specified key combo
+         * to an empty function and deletes the corresponding key in the
+         * _direct_map dict.
+         *
+         * the keycombo+action has to be exactly the same as
+         * it was defined in the bind method
+         *
+         * TODO: actually remove this from the _callbacks dictionary instead
+         * of binding an empty function
+         *
+         * @param {string|Array} keys
+         * @param {string} action
+         * @returns void
+         */
+        unbind: function(keys, action) {
+            if (_direct_map[keys + ':' + action]) {
+                delete _direct_map[keys + ':' + action];
+                this.bind(keys, function() {}, action);
+            }
+            return this;
+        },
 
-    // determine hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.edges.length == hubsize) {
-          node.level = 0;
-        }
-      }
-    }
+        /**
+         * triggers an event that has already been bound
+         *
+         * @param {string} keys
+         * @param {string=} action
+         * @returns void
+         */
+        trigger: function(keys, action) {
+            _direct_map[keys + ':' + action]();
+            return this;
+        },
 
-    // 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);
+        /**
+         * resets the library back to its initial state.  this is useful
+         * if you want to clear out the current keyboard shortcuts and bind
+         * new ones - for example if you switch to another page
+         *
+         * @returns void
+         */
+        reset: function() {
+            _callbacks = {};
+            _direct_map = {};
+            return this;
         }
-      }
-    }
-  };
+    };
+
+  module.exports = mousetrap;
+
+
+
+/***/ },
+/* 119 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var PhysicsMixin = __webpack_require__(120);
+  var ClusterMixin = __webpack_require__(124);
+  var SectorsMixin = __webpack_require__(125);
+  var SelectionMixin = __webpack_require__(126);
+  var ManipulationMixin = __webpack_require__(127);
+  var NavigationMixin = __webpack_require__(128);
+  var HierarchicalLayoutMixin = __webpack_require__(129);
 
   /**
-   * 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.
+   * Load a mixin into the network object
    *
+   * @param {Object} sourceVariable | this object has to contain functions.
    * @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;
+  exports._loadMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = sourceVariable[mixinFunction];
+      }
     }
-    this._configureSmoothCurves();
   };
 
 
   /**
-   * 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.
+   * removes a mixin from the network object.
    *
-   * @param edges
-   * @param parentId
-   * @param distribution
-   * @param parentLevel
+   * @param {Object} sourceVariable | this object has to contain functions.
    * @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 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;
-        }
-      }
-
-      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);
-        }
+  exports._clearMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = undefined;
       }
     }
   };
 
 
   /**
-   * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
+   * Mixin the physics system and initialize the parameters required.
    *
-   * @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 (edges.length > 1) {
-          this._setLevel(level+1, childNode.edges, childNode.id);
-        }
-      }
+  exports._loadPhysicsSystem = function () {
+    this._loadMixin(PhysicsMixin);
+    this._loadSelectedForceSolver();
+    if (this.constants.configurePhysics == true) {
+      this._loadPhysicsConfiguration();
     }
   };
 
 
   /**
-   * Unfix nodes
+   * Mixin the cluster system and initialize the parameters required.
    *
    * @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;
-      }
-    }
+  exports._loadClusterSystem = function () {
+    this.clusterSession = 0;
+    this.hubThreshold = 5;
+    this._loadMixin(ClusterMixin);
   };
 
 
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * Canvas shapes used by Network
+   * Mixin the sector system and initialize the parameters required
+   *
+   * @private
    */
-  if (typeof CanvasRenderingContext2D !== 'undefined') {
-
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-      this.beginPath();
-      this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
-
-    /**
-     * 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();
-
-      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 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();
-
-      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)
-        );
-      }
-
-      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);
-    };
+  exports._loadSectorSystem = function () {
+    this.sectors = {};
+    this.activeSector = ["default"];
+    this.sectors["active"] = {};
+    this.sectors["active"]["default"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
+    this.sectors["frozen"] = {};
+    this.sectors["support"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
 
+    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
 
+    this._loadMixin(SectorsMixin);
+  };
 
-    /**
-     * 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
+  /**
+   * Mixin the selection system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadSelectionSystem = function () {
+    this.selectionObj = {nodes: {}, edges: {}};
 
-      this.beginPath();
-      this.moveTo(xe, ym);
+    this._loadMixin(SelectionMixin);
+  };
 
-      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);
+  /**
+   * Mixin the navigationUI (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadManipulationSystem = function () {
+    // reset global variables -- these are used by the selection of nodes and edges.
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-      this.lineTo(xe, ymb);
+    if (this.constants.dataManipulation.enabled == true) {
+      // load the manipulator HTML elements. All styling done in css.
+      if (this.manipulationDiv === undefined) {
+        this.manipulationDiv = document.createElement('div');
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
+        if (this.editMode == true) {
+          this.manipulationDiv.style.display = "block";
+        }
+        else {
+          this.manipulationDiv.style.display = "none";
+        }
+        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
+      }
 
-      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+      if (this.editModeDiv === undefined) {
+        this.editModeDiv = document.createElement('div');
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
+        if (this.editMode == true) {
+          this.editModeDiv.style.display = "none";
+        }
+        else {
+          this.editModeDiv.style.display = "block";
+        }
+        this.containerElement.insertBefore(this.editModeDiv, this.frame);
+      }
 
-      this.lineTo(x, ym);
-    };
+      if (this.closeDiv === undefined) {
+        this.closeDiv = document.createElement('div');
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
+        this.closeDiv.style.display = this.manipulationDiv.style.display;
+        this.containerElement.insertBefore(this.closeDiv, this.frame);
+      }
 
+      // load the manipulation functions
+      this._loadMixin(ManipulationMixin);
 
-    /**
-     * 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);
+      // create the manipulator toolbar
+      this._createManipulatorBar();
+    }
+    else {
+      if (this.manipulationDiv !== undefined) {
+        // removes all the bindings and overloads
+        this._createManipulatorBar();
+        // remove the manipulation divs
+        this.containerElement.removeChild(this.manipulationDiv);
+        this.containerElement.removeChild(this.editModeDiv);
+        this.containerElement.removeChild(this.closeDiv);
 
-      // 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);
+        this.manipulationDiv = undefined;
+        this.editModeDiv = undefined;
+        this.closeDiv = undefined;
+        // remove the mixin functions
+        this._clearMixin(ManipulationMixin);
+      }
+    }
+  };
 
-      // 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);
+  /**
+   * Mixin the navigation (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadNavigationControls = function () {
+    this._loadMixin(NavigationMixin);
 
-      this.beginPath();
-      this.moveTo(x, y);
-      this.lineTo(xl, yl);
-      this.lineTo(xi, yi);
-      this.lineTo(xr, yr);
-      this.closePath();
-    };
+    // the clean function removes the button divs, this is done to remove the bindings.
+    this._cleanNavigation();
+    if (this.constants.navigation.enabled == true) {
+      this._loadNavigationElements();
+    }
+  };
 
-    /**
-     * 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;
-      }
-    };
 
-    // TODO: add diamond shape
-  }
+  /**
+   * Mixin the hierarchical layout system.
+   *
+   * @private
+   */
+  exports._loadHierarchySystem = function () {
+    this._loadMixin(HierarchicalLayoutMixin);
+  };
 
 
 /***/ },
-/* 54 */
+/* 120 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Moroccan Arabic (ar-ma)
-  // author : ElFadili Yassine : https://github.com/ElFadiliY
-  // author : Abdel Said : https://github.com/abdelsaid
+  var util = __webpack_require__(1);
+  var RepulsionMixin = __webpack_require__(121);
+  var HierarchialRepulsionMixin = __webpack_require__(122);
+  var BarnesHutMixin = __webpack_require__(123);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ar-ma', {
-          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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();
+  };
 
 
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic Saudi Arabia (ar-sa)
-  // author : Suhail Alkowaileet : https://github.com/xsoh
+      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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
+      this._loadMixin(BarnesHutMixin);
+    }
+    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(RepulsionMixin);
 
-      return moment.lang('ar-sa', {
-          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      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;
 
+      this._loadMixin(HierarchialRepulsionMixin);
+    }
+    else {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
+      this.barnesHutTree = undefined;
 
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
+      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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic (ar)
-  // author : Abdel Said : https://github.com/abdelsaid
-  // changes in months, weekdays : Ahmed Elkhatib
+      this._loadMixin(RepulsionMixin);
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
 
-      return moment.lang('ar', {
-          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
+      // we now start the force calculation
+      this._calculateForces();
+    }
+  };
+
+
+  /**
+   * 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
+
+    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.
+   *
+   * @private
+   */
+  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);
+          }
+        }
+      }
 
+      for (var idx in this.calculationNodes) {
+        if (this.calculationNodes.hasOwnProperty(idx)) {
+          this.calculationNodeIndices.push(idx);
+        }
+      }
+    }
+    else {
+      this.calculationNodes = this.nodes;
+      this.calculationNodeIndices = this.nodeIndices;
+    }
+  };
 
-/***/ },
-/* 57 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : azerbaijani (az)
-  // author : topchiyev : https://github.com/topchiyev
+  /**
+   * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    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;
       }
-  }(function (moment) {
+      else {
+        node.fx = 0;
+        node.fy = 0;
+      }
+    }
+  };
 
-      var suffixes = {
-          1: "-inci",
-          5: "-inci",
-          8: "-inci",
-          70: "-inci",
-          80: "-inci",
 
-          2: "-nci",
-          7: "-nci",
-          20: "-nci",
-          50: "-nci",
 
-          3: "-üncü",
-          4: "-üncü",
-          100: "-üncü",
 
-          6: "-ncı",
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    var edges = this.edges;
 
-          9: "-uncu",
-          10: "-uncu",
-          30: "-uncu",
+    // 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.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-          60: "-ıncı",
-          90: "-ıncı"
-      };
-      return moment.lang('az', {
-          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
-          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
-          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
-          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
-          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[sabah saat] LT',
-              nextWeek : '[gələn həftə] dddd [saat] LT',
-              lastDay : '[dünən] LT',
-              lastWeek : '[keçən həftə] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s əvvəl",
-              s : "birneçə saniyyə",
-              m : "bir dəqiqə",
-              mm : "%d dəqiqə",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir il",
-              yy : "%d il"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "gecə";
-              } else if (hour < 12) {
-                  return "səhər";
-              } else if (hour < 17) {
-                  return "gündüz";
-              } else {
-                  return "axşam";
-              }
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "-ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+            if (distance == 0) {
+              distance = 0.01;
+            }
+
+            // 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;
           }
-      });
-  }));
+        }
+      }
+    }
+  };
 
 
-/***/ },
-/* 58 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bulgarian (bg)
-  // author : Krasen Borisov : https://github.com/kraz
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('bg', {
-          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
-          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Днес в] LT',
-              nextDay : '[Утре в] LT',
-              nextWeek : 'dddd [в] LT',
-              lastDay : '[Вчера в] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[В изминалата] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[В изминалия] dddd [в] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "след %s",
-              past : "преди %s",
-              s : "няколко секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дни",
-              M : "месец",
-              MM : "%d месеца",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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;
 
+    // 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;
 
-/***/ },
-/* 59 */
-/***/ function(module, exports, __webpack_require__) {
+              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bengali (bn)
-  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
+              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+              // 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);
+            }
+          }
+        }
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '১',
-          '2': '২',
-          '3': '৩',
-          '4': '৪',
-          '5': '৫',
-          '6': '৬',
-          '7': '৭',
-          '8': '৮',
-          '9': '৯',
-          '0': '০'
-      },
-      numberMap = {
-          '১': '1',
-          '২': '2',
-          '৩': '3',
-          '৪': '4',
-          '৫': '5',
-          '৬': '6',
-          '৭': '7',
-          '৮': '8',
-          '৯': '9',
-          '০': '0'
-      };
+    }
+  };
 
-      return moment.lang('bn', {
-          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
-          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
-          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
-          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
-          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm সময়",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[আজ] LT',
-              nextDay : '[আগামীকাল] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[গতকাল] LT',
-              lastWeek : '[গত] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s পরে",
-              past : "%s আগে",
-              s : "কএক সেকেন্ড",
-              m : "এক মিনিট",
-              mm : "%d মিনিট",
-              h : "এক ঘন্টা",
-              hh : "%d ঘন্টা",
-              d : "এক দিন",
-              dd : "%d দিন",
-              M : "এক মাস",
-              MM : "%d মাস",
-              y : "এক বছর",
-              yy : "%d বছর"
-          },
-          preparse: function (string) {
-              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          //Bengali is a vast language its spoken 
-          //in different forms in various parts of the world.
-          //I have just generalized with most common one used
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "রাত";
-              } else if (hour < 10) {
-                  return "শকাল";
-              } else if (hour < 17) {
-                  return "দুপুর";
-              } else if (hour < 20) {
-                  return "বিকেল";
-              } else {
-                  return "রাত";
-              }
-          },
-          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 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;
+
+    dx = (node1.x - node2.x);
+    dy = (node1.y - node2.y);
+    distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance == 0) {
+      distance = 0.01;
+    }
+
+    // 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;
+
+    node1.fx += fx;
+    node1.fy += fy;
+    node2.fx -= fx;
+    node2.fy -= fy;
+  };
+
+
+  /**
+   * 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 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);
+
+      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");
 
-/***/ },
-/* 60 */
-/***/ function(module, exports, __webpack_require__) {
+      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 __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : breton (br)
-  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
+      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");
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      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;
       }
-  }(function (moment) {
-      function relativeTimeWithMutation(number, withoutSuffix, key) {
-          var format = {
-              'mm': "munutenn",
-              'MM': "miz",
-              'dd': "devezh"
-          };
-          return number + ' ' + mutation(format[key], number);
+      if (this.constants.hierarchicalLayout.enabled) {
+        radioButton3.checked = true;
       }
 
-      function specialMutationForYears(number) {
-          switch (lastNumber(number)) {
-          case 1:
-          case 3:
-          case 4:
-          case 5:
-          case 9:
-              return number + ' bloaz';
-          default:
-              return number + ' vloaz';
-          }
-      }
+      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
+      var graph_generateOptions = document.getElementById("graph_generateOptions");
 
-      function lastNumber(number) {
-          if (number > 9) {
-              return lastNumber(number % 10);
-          }
-          return number;
+      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";
       }
-
-      function mutation(text, number) {
-          if (number === 2) {
-              return softMutation(text);
-          }
-          return text;
+      else {
+        graph_toggleSmooth.style.background = "#FF8532";
       }
 
-      function softMutation(text) {
-          var mutationTable = {
-              'm': 'v',
-              'b': 'v',
-              'd': 'z'
-          };
-          if (mutationTable[text.charAt(0)] === undefined) {
-              return text;
-          }
-          return mutationTable[text.charAt(0)] + text.substring(1);
-      }
 
-      return moment.lang('br', {
-          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
-          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
-          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
-          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
-          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
-          longDateFormat : {
-              LT : "h[e]mm A",
-              L : "DD/MM/YYYY",
-              LL : "D [a viz] MMMM YYYY",
-              LLL : "D [a viz] MMMM YYYY LT",
-              LLLL : "dddd, D [a viz] MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Hiziv da] LT',
-              nextDay : '[Warc\'hoazh da] LT',
-              nextWeek : 'dddd [da] LT',
-              lastDay : '[Dec\'h da] LT',
-              lastWeek : 'dddd [paset da] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "a-benn %s",
-              past : "%s 'zo",
-              s : "un nebeud segondennoù",
-              m : "ur vunutenn",
-              mm : relativeTimeWithMutation,
-              h : "un eur",
-              hh : "%d eur",
-              d : "un devezh",
-              dd : relativeTimeWithMutation,
-              M : "ur miz",
-              MM : relativeTimeWithMutation,
-              y : "ur bloaz",
-              yy : specialMutationForYears
-          },
-          ordinal : function (number) {
-              var output = (number === 1) ? 'añ' : 'vet';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      switchConfigurations.apply(this);
 
+      radioButton1.onchange = switchConfigurations.bind(this);
+      radioButton2.onchange = switchConfigurations.bind(this);
+      radioButton3.onchange = switchConfigurations.bind(this);
+    }
+  };
 
-/***/ },
-/* 61 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bosnian (bs)
-  // author : Nedim Cholich : https://github.com/frontyard
-  // based on (hr) translation by Bojan Marković
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
+  }
+
+  /**
+   * 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;
       }
-  }(function (moment) {
+    }
+    if (this.constants.hierarchicalLayout.enabled == true) {
+      this._setupHierarchicalLayout();
+    }
+    else {
+      this.repositionNodes();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
+  /**
+   *  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 += '};'
+    }
 
-      return moment.lang('bs', {
-  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
-  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    this.optionsDiv.innerHTML = options;
+  }
+
+  /**
+   * 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();
+  }
 
 
-/***/ },
-/* 62 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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 __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : catalan (ca)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+    if (map instanceof Array) {
+      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));
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ca', {
-          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
-          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
-          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
-          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
-          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextDay : function () {
-                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "fa %s",
-              s : "uns segons",
-              m : "un minut",
-              mm : "%d minuts",
-              h : "una hora",
-              hh : "%d hores",
-              d : "un dia",
-              dd : "%d dies",
-              M : "un mes",
-              MM : "%d mesos",
-              y : "un any",
-              yy : "%d anys"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    if (constantsVariableName == "hierarchicalLayout_direction" ||
+      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
+      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
+      this._setupHierarchicalLayout();
+    }
+    this.moving = true;
+    this.start();
+  }
 
 
 /***/ },
-/* 63 */
+/* 121 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : czech (cs)
-  // author : petrbela : https://github.com/petrbela
+  /**
+   * Calculate the forces the nodes apply on each other based on a repulsion field.
+   * This field is linearly approximated.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function () {
+    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
-          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
 
-      function plural(n) {
-          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
-      }
+    // approximation constants
+    var a_base = -2 / 3;
+    var b = 4 / 3;
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minuty' : 'minut');
-              } else {
-                  return result + 'minutami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodin');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dny' : 'dní');
-              } else {
-                  return result + 'dny';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'měsíce' : 'měsíců');
-              } else {
-                  return result + 'měsíci';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'let');
-              } else {
-                  return result + 'lety';
-              }
-              break;
-          }
-      }
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
 
-      return moment.lang('cs', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
-          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
-          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
-          longDateFormat : {
-              LT: "H.mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes v] LT",
-              nextDay: '[zítra v] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [v] LT';
-                  case 3:
-                      return '[ve středu v] LT';
-                  case 4:
-                      return '[ve čtvrtek v] LT';
-                  case 5:
-                      return '[v pátek v] LT';
-                  case 6:
-                      return '[v sobotu v] LT';
-                  }
-              },
-              lastDay: '[včera v] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulou neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[minulé] dddd [v] LT';
-                  case 3:
-                      return '[minulou středu v] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [v] LT';
-                  case 6:
-                      return '[minulou sobotu v] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "před %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
 
+        dx = node2.x - node1.x;
+        dy = node2.y - node1.y;
+        distance = Math.sqrt(dx * dx + dy * dy);
 
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
+        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
+        var a = a_base / minimumDistance;
+        if (distance < 2 * minimumDistance) {
+          if (distance < 0.5 * minimumDistance) {
+            repulsingForce = 1.0;
+          }
+          else {
+            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+          }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chuvash (cv)
-  // author : Anatoly Mironov : https://github.com/mirontoli
+          // amplify the repulsion for clusters.
+          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
+          repulsingForce = repulsingForce / distance;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+          fx = dx * repulsingForce;
+          fy = dy * repulsingForce;
+
+          node1.fx -= fx;
+          node1.fy -= fy;
+          node2.fx += fx;
+          node2.fy += fy;
+        }
       }
-  }(function (moment) {
-      return moment.lang('cv', {
-          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
-          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
-          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
-          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
-          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
-              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
-              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
-          },
-          calendar : {
-              sameDay: '[Паян] LT [сехетре]',
-              nextDay: '[Ыран] LT [сехетре]',
-              lastDay: '[Ĕнер] LT [сехетре]',
-              nextWeek: '[Çитес] dddd LT [сехетре]',
-              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (output) {
-                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
-                  return output + affix;
-              },
-              past : "%s каялла",
-              s : "пĕр-ик çеккунт",
-              m : "пĕр минут",
-              mm : "%d минут",
-              h : "пĕр сехет",
-              hh : "%d сехет",
-              d : "пĕр кун",
-              dd : "%d кун",
-              M : "пĕр уйăх",
-              MM : "%d уйăх",
-              y : "пĕр çул",
-              yy : "%d çул"
-          },
-          ordinal : '%d-мĕш',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
 /***/ },
-/* 65 */
+/* 122 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Welsh (cy)
-  // author : Robert Allen
+  /**
+   * Calculate the forces the nodes apply on eachother based on a repulsion field.
+   * This field is linearly approximated.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function () {
+    var dx, dy, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
+
+    // approximation constants
+    var b = 5;
+    var a_base = 0.5 * -b;
+
+
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
+    var a = a_base / minimumDistance;
+
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        if (node1.level == node2.level) {
+
+          dx = node2.x - node1.x;
+          dy = node2.y - node1.y;
+          distance = Math.sqrt(dx * dx + dy * dy);
+
+
+          if (distance < 2 * minimumDistance) {
+            repulsingForce = a * distance + b;
+            var c = 0.05;
+            var d = 2 * minimumDistance * 2 * c;
+            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
+
+            // normalize force with
+            if (distance == 0) {
+              distance = 0.01;
+            }
+            else {
+              repulsingForce = repulsingForce / distance;
+            }
+            fx = dx * repulsingForce;
+            fy = dy * repulsingForce;
+
+            node1.fx -= fx;
+            node1.fy -= fy;
+            node2.fx += fx;
+            node2.fy += fy;
+          }
+        }
       }
-  }(function (moment) {
-      return moment.lang("cy", {
-          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
-          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
-          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
-          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
-          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
-          // time formats are the same as en-gb
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[Heddiw am] LT',
-              nextDay: '[Yfory am] LT',
-              nextWeek: 'dddd [am] LT',
-              lastDay: '[Ddoe am] LT',
-              lastWeek: 'dddd [diwethaf am] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "mewn %s",
-              past: "%s yn ôl",
-              s: "ychydig eiliadau",
-              m: "munud",
-              mm: "%d munud",
-              h: "awr",
-              hh: "%d awr",
-              d: "diwrnod",
-              dd: "%d diwrnod",
-              M: "mis",
-              MM: "%d mis",
-              y: "blwyddyn",
-              yy: "%d flynedd"
-          },
-          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
-          ordinal: function (number) {
-              var b = number,
-                  output = '',
-                  lookup = [
-                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
-                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
-                  ];
+    }
+  };
+
+
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateHierarchicalSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    var edges = this.edges;
 
-              if (b > 20) {
-                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
-                      output = 'fed'; // not 30ain, 70ain or 90ain
-                  } else {
-                      output = 'ain';
-                  }
-              } else if (b > 0) {
-                  output = lookup[b];
-              }
+    // 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.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
+            if (distance == 0) {
+              distance = 0.01;
+            }
 
-/***/ },
-/* 66 */
-/***/ function(module, exports, __webpack_require__) {
+            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : danish (da)
-  // author : Ulrik Nielsen : https://github.com/mrbase
+            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('da', {
-          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd [d.] D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[I dag kl.] LT',
-              nextDay : '[I morgen kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[I går kl.] LT',
-              lastWeek : '[sidste] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "%s siden",
-              s : "få sekunder",
-              m : "et minut",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dage",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "et år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+            fx = dx * springForce;
+            fy = dy * springForce;
 
+            edge.to.fx -= fx;
+            edge.to.fy -= fy;
+            edge.from.fx += fx;
+            edge.from.fy += fy;
+
+
+            var factor = 5;
+            if (distance > edgeLength) {
+              factor = 25;
+            }
+
+            if (edge.from.level > edge.to.level) {
+              edge.to.fx -= factor*fx;
+              edge.to.fy -= factor*fy;
+            }
+            else if (edge.from.level < edge.to.level) {
+              edge.from.fx += factor*fx;
+              edge.from.fy += factor*fy;
+            }
+          }
+        }
+      }
+    }
+  };
 
 /***/ },
-/* 67 */
+/* 123 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : austrian german (de-at)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
-  // author : Martin Groller : https://github.com/MadMG
+  /**
+   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+   * The Barnes Hut method is used to speed up this N-body simulation.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function() {
+    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
+      var node;
+      var nodes = this.calculationNodes;
+      var nodeIndices = this.calculationNodeIndices;
+      var nodeCount = nodeIndices.length;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
-      }
+      this._formBarnesHutTree(nodes,nodeIndices);
 
-      return moment.lang('de-at', {
-          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      var barnesHutTree = this.barnesHutTree;
 
+      // place the nodes one by one recursively
+      for (var i = 0; i < nodeCount; i++) {
+        node = nodes[nodeIndices[i]];
+        // starting with root is irrelevant, it never passes the BarnesHut condition
+        this._getForceContribution(barnesHutTree.root.children.NW,node);
+        this._getForceContribution(barnesHutTree.root.children.NE,node);
+        this._getForceContribution(barnesHutTree.root.children.SW,node);
+        this._getForceContribution(barnesHutTree.root.children.SE,node);
+      }
+    }
+  };
 
-/***/ },
-/* 68 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : german (de)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
+  /**
+   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._getForceContribution = function(parentBranch,node) {
+    // we get no force contribution from an empty region
+    if (parentBranch.childrenCount > 0) {
+      var dx,dy,distance;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // get the distance from the center of mass to the node.
+      dx = parentBranch.centerOfMass.x - node.x;
+      dy = parentBranch.centerOfMass.y - node.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
+
+      // BarnesHut condition
+      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
+      // calcSize = 1/s --> d * 1/s > 1/theta = passed
+      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
+        // duplicate code to reduce function calls to speed up program
+        if (distance == 0) {
+          distance = 0.1*Math.random();
+          dx = distance;
+        }
+        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+        var fx = dx * gravityForce;
+        var fy = dy * gravityForce;
+        node.fx += fx;
+        node.fy += fy;
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+      else {
+        // Did not pass the condition, go into children if available
+        if (parentBranch.childrenCount == 4) {
+          this._getForceContribution(parentBranch.children.NW,node);
+          this._getForceContribution(parentBranch.children.NE,node);
+          this._getForceContribution(parentBranch.children.SW,node);
+          this._getForceContribution(parentBranch.children.SE,node);
+        }
+        else { // parentBranch must have only one node, if it was empty we wouldnt be here
+          if (parentBranch.children.data.id != node.id) { // if it is not self
+            // duplicate code to reduce function calls to speed up program
+            if (distance == 0) {
+              distance = 0.5*Math.random();
+              dx = distance;
+            }
+            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+            var fx = dx * gravityForce;
+            var fy = dy * gravityForce;
+            node.fx += fx;
+            node.fy += fy;
+          }
+        }
       }
+    }
+  };
 
-      return moment.lang('de', {
-          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   *
+   * @param nodes
+   * @param nodeIndices
+   * @private
+   */
+  exports._formBarnesHutTree = function(nodes,nodeIndices) {
+    var node;
+    var nodeCount = nodeIndices.length;
 
+    var minX = Number.MAX_VALUE,
+      minY = Number.MAX_VALUE,
+      maxX =-Number.MAX_VALUE,
+      maxY =-Number.MAX_VALUE;
 
-/***/ },
-/* 69 */
-/***/ function(module, exports, __webpack_require__) {
+    // get the range of the nodes
+    for (var i = 0; i < nodeCount; i++) {
+      var x = nodes[nodeIndices[i]].x;
+      var y = nodes[nodeIndices[i]].y;
+      if (x < minX) { minX = x; }
+      if (x > maxX) { maxX = x; }
+      if (y < minY) { minY = y; }
+      if (y > maxY) { maxY = y; }
+    }
+    // make the range a square
+    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
+    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : modern greek (el)
-  // author : Aggelos Karalias : https://github.com/mehiel
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    var minimumTreeSize = 1e-5;
+    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
+    var halfRootSize = 0.5 * rootSize;
+    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+    // construct the barnesHutTree
+    var barnesHutTree = {
+      root:{
+        centerOfMass: {x:0, y:0},
+        mass:0,
+        range: {
+          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
+          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
+        },
+        size: rootSize,
+        calcSize: 1 / rootSize,
+        children: { data:null},
+        maxWidth: 0,
+        level: 0,
+        childrenCount: 4
       }
-  }(function (moment) {
-      return moment.lang('el', {
-          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
-          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
-          months : function (momentToFormat, format) {
-              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
-                  return this._monthsGenitiveEl[momentToFormat.month()];
-              } else {
-                  return this._monthsNominativeEl[momentToFormat.month()];
-              }
-          },
-          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
-          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
-          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
-          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'μμ' : 'ΜΜ';
-              } else {
-                  return isLower ? 'πμ' : 'ΠΜ';
-              }
-          },
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendarEl : {
-              sameDay : '[Σήμερα {}] LT',
-              nextDay : '[Αύριο {}] LT',
-              nextWeek : 'dddd [{}] LT',
-              lastDay : '[Χθες {}] LT',
-              lastWeek : function() {
-                  switch (this.day()) {
-                      case 6:
-                          return '[το προηγούμενο] dddd [{}] LT';
-                      default:
-                          return '[την προηγούμενη] dddd [{}] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          calendar : function (key, mom) {
-              var output = this._calendarEl[key],
-                  hours = mom && mom.hours();
+    };
+    this._splitBranch(barnesHutTree.root);
 
-              if (typeof output === 'function') {
-                  output = output.apply(mom);
-              }
+    // place the nodes one by one recursively
+    for (i = 0; i < nodeCount; i++) {
+      node = nodes[nodeIndices[i]];
+      this._placeInTree(barnesHutTree.root,node);
+    }
 
-              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
-          },
-          relativeTime : {
-              future : "σε %s",
-              past : "%s πριν",
-              s : "δευτερόλεπτα",
-              m : "ένα λεπτό",
-              mm : "%d λεπτά",
-              h : "μία ώρα",
-              hh : "%d ώρες",
-              d : "μία μέρα",
-              dd : "%d μέρες",
-              M : "ένας μήνας",
-              MM : "%d μήνες",
-              y : "ένας χρόνος",
-              yy : "%d χρόνια"
-          },
-          ordinal : function (number) {
-              return number + 'η';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4st is the first week of the year.
-          }
-      });
-  }));
+    // make global
+    this.barnesHutTree = barnesHutTree
+  };
 
 
-/***/ },
-/* 70 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * this updates the mass of a branch. this is increased by adding a node.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._updateBranchMass = function(parentBranch, node) {
+    var totalMass = parentBranch.mass + node.mass;
+    var totalMassInv = 1/totalMass;
+
+    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
+    parentBranch.centerOfMass.x *= totalMassInv;
+
+    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
+    parentBranch.centerOfMass.y *= totalMassInv;
+
+    parentBranch.mass = totalMass;
+    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
+    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : australian english (en-au)
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * determine in which branch the node will be placed.
+   *
+   * @param parentBranch
+   * @param node
+   * @param skipMassUpdate
+   * @private
+   */
+  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
+    if (skipMassUpdate != true || skipMassUpdate === undefined) {
+      // update the mass of the branch.
+      this._updateBranchMass(parentBranch,node);
+    }
+
+    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+        this._placeInRegion(parentBranch,node,"NW");
       }
-  }(function (moment) {
-      return moment.lang('en-au', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      else { // in SW
+        this._placeInRegion(parentBranch,node,"SW");
+      }
+    }
+    else { // in NE or SE
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+        this._placeInRegion(parentBranch,node,"NE");
+      }
+      else { // in SE
+        this._placeInRegion(parentBranch,node,"SE");
+      }
+    }
+  };
 
 
-/***/ },
-/* 71 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * actually place the node in a region (or branch)
+   *
+   * @param parentBranch
+   * @param node
+   * @param region
+   * @private
+   */
+  exports._placeInRegion = function(parentBranch,node,region) {
+    switch (parentBranch.children[region].childrenCount) {
+      case 0: // place node here
+        parentBranch.children[region].children.data = node;
+        parentBranch.children[region].childrenCount = 1;
+        this._updateBranchMass(parentBranch.children[region],node);
+        break;
+      case 1: // convert into children
+        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+        // we move one node a pixel and we do not put it in the tree.
+        if (parentBranch.children[region].children.data.x == node.x &&
+            parentBranch.children[region].children.data.y == node.y) {
+          node.x += Math.random();
+          node.y += Math.random();
+        }
+        else {
+          this._splitBranch(parentBranch.children[region]);
+          this._placeInTree(parentBranch.children[region],node);
+        }
+        break;
+      case 4: // place in branch
+        this._placeInTree(parentBranch.children[region],node);
+        break;
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian english (en-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('en-ca', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM, YYYY",
-              LLL : "D MMMM, YYYY LT",
-              LLLL : "dddd, D MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          }
-      });
-  }));
+  /**
+   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+   * after the split is complete.
+   *
+   * @param parentBranch
+   * @private
+   */
+  exports._splitBranch = function(parentBranch) {
+    // if the branch is shaded with a node, replace the node in the new subset.
+    var containedNode = null;
+    if (parentBranch.childrenCount == 1) {
+      containedNode = parentBranch.children.data;
+      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+    }
+    parentBranch.childrenCount = 4;
+    parentBranch.children.data = null;
+    this._insertRegion(parentBranch,"NW");
+    this._insertRegion(parentBranch,"NE");
+    this._insertRegion(parentBranch,"SW");
+    this._insertRegion(parentBranch,"SE");
 
+    if (containedNode != null) {
+      this._placeInTree(parentBranch,containedNode);
+    }
+  };
 
-/***/ },
-/* 72 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : great britain english (en-gb)
-  // author : Chris Gedrim : https://github.com/chrisgedrim
+  /**
+   * This function subdivides the region into four new segments.
+   * Specifically, this inserts a single new segment.
+   * It fills the children section of the parentBranch
+   *
+   * @param parentBranch
+   * @param region
+   * @param parentRange
+   * @private
+   */
+  exports._insertRegion = function(parentBranch, region) {
+    var minX,maxX,minY,maxY;
+    var childSize = 0.5 * parentBranch.size;
+    switch (region) {
+      case "NW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "NE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "SW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+      case "SE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('en-gb', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+    parentBranch.children[region] = {
+      centerOfMass:{x:0,y:0},
+      mass:0,
+      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
+      size: 0.5 * parentBranch.size,
+      calcSize: 2 * parentBranch.calcSize,
+      children: {data:null},
+      maxWidth: 0,
+      level: parentBranch.level+1,
+      childrenCount: 0
+    };
+  };
 
-/***/ },
-/* 73 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : esperanto (eo)
-  // author : Colin Dean : https://github.com/colindean
-  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
-  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
+  /**
+   * This function is for debugging purposed, it draws the tree.
+   *
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawTree = function(ctx,color) {
+    if (this.barnesHutTree !== undefined) {
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('eo', {
-          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
-          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
-          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D[-an de] MMMM, YYYY",
-              LLL : "D[-an de] MMMM, YYYY LT",
-              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'p.t.m.' : 'P.T.M.';
-              } else {
-                  return isLower ? 'a.t.m.' : 'A.T.M.';
-              }
-          },
-          calendar : {
-              sameDay : '[Hodiaŭ je] LT',
-              nextDay : '[Morgaŭ je] LT',
-              nextWeek : 'dddd [je] LT',
-              lastDay : '[Hieraŭ je] LT',
-              lastWeek : '[pasinta] dddd [je] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "je %s",
-              past : "antaŭ %s",
-              s : "sekundoj",
-              m : "minuto",
-              mm : "%d minutoj",
-              h : "horo",
-              hh : "%d horoj",
-              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
-              dd : "%d tagoj",
-              M : "monato",
-              MM : "%d monatoj",
-              y : "jaro",
-              yy : "%d jaroj"
-          },
-          ordinal : "%da",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      ctx.lineWidth = 1;
 
+      this._drawBranch(this.barnesHutTree.root,ctx,color);
+    }
+  };
 
-/***/ },
-/* 74 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : spanish (es)
-  // author : Julio Napurí : https://github.com/julionc
+  /**
+   * This function is for debugging purposes. It draws the branches recursively.
+   *
+   * @param branch
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawBranch = function(branch,ctx,color) {
+    if (color === undefined) {
+      color = "#FF0000";
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
-          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
+    if (branch.childrenCount == 4) {
+      this._drawBranch(branch.children.NW,ctx);
+      this._drawBranch(branch.children.NE,ctx);
+      this._drawBranch(branch.children.SE,ctx);
+      this._drawBranch(branch.children.SW,ctx);
+    }
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.minY);
+    ctx.stroke();
 
-      return moment.lang('es', {
-          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShort[m.month()];
-              } else {
-                  return monthsShortDot[m.month()];
-              }
-          },
-          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
-          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [del] YYYY",
-              LLL : "D [de] MMMM [del] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "hace %s",
-              s : "unos segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "una hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un año",
-              yy : "%d años"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.maxY);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.maxY);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.minY);
+    ctx.stroke();
+
+    /*
+     if (branch.mass > 0) {
+     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+     ctx.stroke();
+     }
+     */
+  };
 
 
 /***/ },
-/* 75 */
+/* 124 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : estonian (et)
-  // author : Henry Kehlmann : https://github.com/madhenry
-  // improvements : Illimar Tambek : https://github.com/ragulka
+  /**
+   * Creation of the ClusterMixin var.
+   *
+   * This contains all the functions the Network object can use to employ clustering
+   */
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
-              'm' : ['ühe minuti', 'üks minut'],
-              'mm': [number + ' minuti', number + ' minutit'],
-              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
-              'hh': [number + ' tunni', number + ' tundi'],
-              'd' : ['ühe päeva', 'üks päev'],
-              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
-              'MM': [number + ' kuu', number + ' kuud'],
-              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
-              'yy': [number + ' aasta', number + ' aastat']
-          };
-          if (withoutSuffix) {
-              return format[key][2] ? format[key][2] : format[key][1];
-          }
-          return isFuture ? format[key][0] : format[key][1];
-      }
+  /**
+  * 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);
 
-      return moment.lang('et', {
-          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
-          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
-          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
-          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
-          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
-          longDateFormat : {
-              LT   : "H:mm",
-              L    : "DD.MM.YYYY",
-              LL   : "D. MMMM YYYY",
-              LLL  : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[Täna,] LT',
-              nextDay  : '[Homme,] LT',
-              nextWeek : '[Järgmine] dddd LT',
-              lastDay  : '[Eile,] LT',
-              lastWeek : '[Eelmine] dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s pärast",
-              past   : "%s tagasi",
-              s      : processRelativeTime,
-              m      : processRelativeTime,
-              mm     : processRelativeTime,
-              h      : processRelativeTime,
-              hh     : processRelativeTime,
-              d      : processRelativeTime,
-              dd     : '%d päeva',
-              M      : processRelativeTime,
-              MM     : processRelativeTime,
-              y      : processRelativeTime,
-              yy     : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+   // updates the lables after clustering
+   this.updateLabels();
 
+   // 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();
+  };
 
-/***/ },
-/* 76 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : euskara (eu)
-  // author : Eneko Illarramendi : https://github.com/eillarra
+    var maxLevels = 50;
+    var level = 0;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // we first cluster the hubs, then we pull in the outliers, repeat
+    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+      if (level % 3 == 0) {
+        this.forceAggregateHubs(true);
+        this.normalizeClusterLevels();
+      }
+      else {
+        this.increaseClusterLevel(); // this also includes a cluster normalization
       }
-  }(function (moment) {
-      return moment.lang('eu', {
-          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
-          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
-          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
-          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
-          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY[ko] MMMM[ren] D[a]",
-              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
-              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
-              l : "YYYY-M-D",
-              ll : "YYYY[ko] MMM D[a]",
-              lll : "YYYY[ko] MMM D[a] LT",
-              llll : "ddd, YYYY[ko] MMM D[a] LT"
-          },
-          calendar : {
-              sameDay : '[gaur] LT[etan]',
-              nextDay : '[bihar] LT[etan]',
-              nextWeek : 'dddd LT[etan]',
-              lastDay : '[atzo] LT[etan]',
-              lastWeek : '[aurreko] dddd LT[etan]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s barru",
-              past : "duela %s",
-              s : "segundo batzuk",
-              m : "minutu bat",
-              mm : "%d minutu",
-              h : "ordu bat",
-              hh : "%d ordu",
-              d : "egun bat",
-              dd : "%d egun",
-              M : "hilabete bat",
-              MM : "%d hilabete",
-              y : "urte bat",
-              yy : "%d urte"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+      numberOfNodes = this.nodeIndices.length;
+      level += 1;
+    }
 
-/***/ },
-/* 77 */
-/***/ function(module, exports, __webpack_require__) {
+    // after the clustering we reposition the nodes to reduce the initial chaos
+    if (level > 0 && reposition == true) {
+      this.repositionNodes();
+    }
+    this._updateCalculationNodes();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Persian Language
-  // author : Ebrahim Byagowi : https://github.com/ebraminio
+  /**
+   * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // we decluster until we reach a decent number of nodes
+      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+        this.decreaseClusterLevel();
+        level += 1;
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '۱',
-          '2': '۲',
-          '3': '۳',
-          '4': '۴',
-          '5': '۵',
-          '6': '۶',
-          '7': '۷',
-          '8': '۸',
-          '9': '۹',
-          '0': '۰'
-      }, numberMap = {
-          '۱': '1',
-          '۲': '2',
-          '۳': '3',
-          '۴': '4',
-          '۵': '5',
-          '۶': '6',
-          '۷': '7',
-          '۸': '8',
-          '۹': '9',
-          '۰': '0'
-      };
 
-      return moment.lang('fa', {
-          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
-          longDateFormat : {
-              LT : 'HH:mm',
-              L : 'DD/MM/YYYY',
-              LL : 'D MMMM YYYY',
-              LLL : 'D MMMM YYYY LT',
-              LLLL : 'dddd, D MMMM YYYY LT'
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "قبل از ظهر";
-              } else {
-                  return "بعد از ظهر";
-              }
-          },
-          calendar : {
-              sameDay : '[امروز ساعت] LT',
-              nextDay : '[فردا ساعت] LT',
-              nextWeek : 'dddd [ساعت] LT',
-              lastDay : '[دیروز ساعت] LT',
-              lastWeek : 'dddd [پیش] [ساعت] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : 'در %s',
-              past : '%s پیش',
-              s : 'چندین ثانیه',
-              m : 'یک دقیقه',
-              mm : '%d دقیقه',
-              h : 'یک ساعت',
-              hh : '%d ساعت',
-              d : 'یک روز',
-              dd : '%d روز',
-              M : 'یک ماه',
-              MM : '%d ماه',
-              y : 'یک سال',
-              yy : '%d سال'
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          ordinal : '%dم',
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12 // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+    else {
+      this._expandClusterNode(node,false,true);
 
+      // update the index list, dynamic edges and labels
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      this._updateCalculationNodes();
+      this.updateLabels();
+    }
 
-/***/ },
-/* 78 */
-/***/ function(module, exports, __webpack_require__) {
+    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+    if (this.moving != isMovingBeforeClustering) {
+      this.start();
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : finnish (fi)
-  // author : Tarmo Aidantausta : https://github.com/bleadof
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
-          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
-                            numbersPast[7], numbersPast[8], numbersPast[9]];
+  /**
+   * This calls the updateClustes with default arguments
+   */
+  exports.updateClustersDefault = function() {
+    if (this.constants.clustering.enabled == true) {
+      this.updateClusters(0,false,false);
+    }
+  };
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = "";
-          switch (key) {
-          case 's':
-              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
-          case 'm':
-              return isFuture ? 'minuutin' : 'minuutti';
-          case 'mm':
-              result = isFuture ? 'minuutin' : 'minuuttia';
-              break;
-          case 'h':
-              return isFuture ? 'tunnin' : 'tunti';
-          case 'hh':
-              result = isFuture ? 'tunnin' : 'tuntia';
-              break;
-          case 'd':
-              return isFuture ? 'päivän' : 'päivä';
-          case 'dd':
-              result = isFuture ? 'päivän' : 'päivää';
-              break;
-          case 'M':
-              return isFuture ? 'kuukauden' : 'kuukausi';
-          case 'MM':
-              result = isFuture ? 'kuukauden' : 'kuukautta';
-              break;
-          case 'y':
-              return isFuture ? 'vuoden' : 'vuosi';
-          case 'yy':
-              result = isFuture ? 'vuoden' : 'vuotta';
-              break;
-          }
-          result = verbalNumber(number, isFuture) + " " + result;
-          return result;
-      }
 
-      function verbalNumber(number, isFuture) {
-          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
+  /**
+   * 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);
+  };
+
+
+  /**
+   * 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);
+  };
+
+
+  /**
+   * 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();
       }
+    }
+    this._updateNodeIndexList();
 
-      return moment.lang('fi', {
-          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
-          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
-          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
-          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
-          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD.MM.YYYY",
-              LL : "Do MMMM[ta] YYYY",
-              LLL : "Do MMMM[ta] YYYY, [klo] LT",
-              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
-              l : "D.M.YYYY",
-              ll : "Do MMM YYYY",
-              lll : "Do MMM YYYY, [klo] LT",
-              llll : "ddd, Do MMM YYYY, [klo] LT"
-          },
-          calendar : {
-              sameDay : '[tänään] [klo] LT',
-              nextDay : '[huomenna] [klo] LT',
-              nextWeek : 'dddd [klo] LT',
-              lastDay : '[eilen] [klo] LT',
-              lastWeek : '[viime] dddd[na] [klo] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s päästä",
-              past : "%s sitten",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : "%d.",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // 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();
+
+    // 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();
+    }
 
+    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();
+      }
+    }
 
-/***/ },
-/* 79 */
-/***/ function(module, exports, __webpack_require__) {
+    this._updateCalculationNodes();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : faroese (fo)
-  // author : Ragnar Johannesen : https://github.com/ragnar123
+  /**
+   * 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('fo', {
-          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
-          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
-          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D. MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Í dag kl.] LT',
-              nextDay : '[Í morgin kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[Í gjár kl.] LT',
-              lastWeek : '[síðstu] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "um %s",
-              past : "%s síðani",
-              s : "fá sekund",
-              m : "ein minutt",
-              mm : "%d minuttir",
-              h : "ein tími",
-              hh : "%d tímar",
-              d : "ein dagur",
-              dd : "%d dagar",
-              M : "ein mánaði",
-              MM : "%d mánaðir",
-              y : "eitt ár",
-              yy : "%d ár"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
+  /**
+   * this functions starts clustering by hubs
+   * The minimum hub threshold is set globally
+   *
+   * @private
+   */
+  exports._aggregateHubs = function(force) {
+    this._getHubSize();
+    this._formClustersByHub(force,false);
+  };
 
-/***/ },
-/* 80 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian french (fr-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
+  /**
+   * This function is fired by keypress. It forces hubs to form.
+   *
+   */
+  exports.forceAggregateHubs = function(doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    this._aggregateHubs(true);
+
+    // update the index list, dynamic edges and labels
+    this._updateNodeIndexList();
+    this._updateDynamicEdges();
+    this.updateLabels();
+
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length != amountOfNodes) {
+      this.clusterSession += 1;
+    }
+
+    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 (moment) {
-      return moment.lang('fr-ca', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
-          },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
-          }
-      });
-  }));
+    }
+  };
 
+  /**
+   * 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);
+          }
+        }
+      }
+    }
+  };
 
-/***/ },
-/* 81 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : french (fr)
-  // author : John Fischer : https://github.com/jfroffice
+  /**
+   * 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();
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
       }
-  }(function (moment) {
-      return moment.lang('fr', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
-          },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+      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];
+
+            // 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);
+              }
+            }
           }
-      });
-  }));
+        }
+      }
+    }
+  };
 
+  /**
+   * 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];
 
-/***/ },
-/* 82 */
-/***/ function(module, exports, __webpack_require__) {
+    // 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();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : galician (gl)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+      // put the child node back in the global nodes object
+      this.nodes[containedNodeId] = childNode;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('gl', {
-          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
-          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
-          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
-          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              lastDay : function () {
-                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : function (str) {
-                  if (str === "uns segundos") {
-                      return "nuns segundos";
-                  }
-                  return "en " + str;
-              },
-              past : "hai %s",
-              s : "uns segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "unha hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      // release the contained edges from this childNode back into the global edges
+      this._releaseContainedEdges(parentNode,childNode);
 
+      // reconnect rerouted edges to the childNode
+      this._connectEdgeBackToChild(parentNode,childNode);
 
-/***/ },
-/* 83 */
-/***/ function(module, exports, __webpack_require__) {
+      // validate all edges in dynamicEdges
+      this._validateEdges(parentNode);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Hebrew (he)
-  // author : Tomer Cohen : https://github.com/tomer
-  // author : Moshe Simantov : https://github.com/DevelopmentIL
-  // author : Tal Ater : https://github.com/TalAter
+      // undo the changes from the clustering operation on the parent node
+      parentNode.mass -= childNode.mass;
+      parentNode.clusterSize -= childNode.clusterSize;
+      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('he', {
-          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
-          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
-          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
-          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
-          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [ב]MMMM YYYY",
-              LLL : "D [ב]MMMM YYYY LT",
-              LLLL : "dddd, D [ב]MMMM YYYY LT",
-              l : "D/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[היום ב־]LT',
-              nextDay : '[מחר ב־]LT',
-              nextWeek : 'dddd [בשעה] LT',
-              lastDay : '[אתמול ב־]LT',
-              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "בעוד %s",
-              past : "לפני %s",
-              s : "מספר שניות",
-              m : "דקה",
-              mm : "%d דקות",
-              h : "שעה",
-              hh : function (number) {
-                  if (number === 2) {
-                      return "שעתיים";
-                  }
-                  return number + " שעות";
-              },
-              d : "יום",
-              dd : function (number) {
-                  if (number === 2) {
-                      return "יומיים";
-                  }
-                  return number + " ימים";
-              },
-              M : "חודש",
-              MM : function (number) {
-                  if (number === 2) {
-                      return "חודשיים";
-                  }
-                  return number + " חודשים";
-              },
-              y : "שנה",
-              yy : function (number) {
-                  if (number === 2) {
-                      return "שנתיים";
-                  }
-                  return 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());
+
+      // remove node from the list
+      delete parentNode.containedNodes[containedNodeId];
+
+      // 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;
           }
-      });
-  }));
+        }
+      }
+      // if there are no others, remove the cluster session from the list
+      if (othersPresent == false) {
+        parentNode.clusterSessions.pop();
+      }
+
+      this._repositionBezierNodes(childNode);
+  //      this._repositionBezierNodes(parentNode);
 
+      // remove the clusterSession from the child node
+      childNode.clusterSession = 0;
 
-/***/ },
-/* 84 */
-/***/ function(module, exports, __webpack_require__) {
+      // recalculate the size of the node on the next time the node is rendered
+      parentNode.clearSizeCache();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hindi (hi)
-  // author : Mayank Singhal : https://github.com/mayanksinghal
+      // restart the simulation to reorganise all nodes
+      this.moving = true;
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+    // check if a further expansion step is possible if recursivity is enabled
+    if (recursive == true) {
+      this._expandClusterNode(childNode,recursive,force,openAll);
+    }
+  };
 
-      return moment.lang('hi', {
-          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
-          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm बजे",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[कल] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[कल] LT',
-              lastWeek : '[पिछले] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s में",
-              past : "%s पहले",
-              s : "कुछ ही क्षण",
-              m : "एक मिनट",
-              mm : "%d मिनट",
-              h : "एक घंटा",
-              hh : "%d घंटे",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महीने",
-              MM : "%d महीने",
-              y : "एक वर्ष",
-              yy : "%d वर्ष"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
-          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "रात";
-              } else if (hour < 10) {
-                  return "सुबह";
-              } else if (hour < 17) {
-                  return "दोपहर";
-              } else if (hour < 20) {
-                  return "शाम";
-              } else {
-                  return "रात";
-              }
-          },
-          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.
-          }
-      });
-  }));
+
+  /**
+   * 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();
+    }
+  };
 
 
-/***/ },
-/* 85 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hrvatski (hr)
-  // author : Bojan Marković : https://github.com/bmarkovic
 
-  // based on (sl) translation by Robert Sedovšek
+  /**
+   * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+    // 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 translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
+
+            if (length < minLength) {
+              // first check which node is larger
+              var parentNode = edge.from;
+              var childNode = edge.to;
+              if (edge.to.mass > edge.from.mass) {
+                parentNode = edge.to;
+                childNode = edge.from;
               }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
+
+              if (childNode.dynamicEdgesLength == 1) {
+                this._addToCluster(parentNode,childNode,false);
               }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
+              else if (parentNode.dynamicEdgesLength == 1) {
+                this._addToCluster(childNode,parentNode,false);
               }
-              return result;
+            }
           }
+        }
       }
+    }
+  };
 
-      return moment.lang('hr', {
-          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
-          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
+  /**
+   * 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];
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+        // the edges can be swallowed by another decrease
+        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.mass > childNode.mass) {
+              this._addToCluster(parentNode,childNode,true);
+            }
+            else {
+              this._addToCluster(childNode,parentNode,true);
+            }
           }
-      });
-  }));
+        }
+      }
+    }
+  };
 
 
-/***/ },
-/* 86 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+        }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hungarian (hu)
-  // author : Adam Brunner : https://github.com/adambrunner
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+          smallestNeighbour = neighbour.clusterSessions.length;
+          smallestNeighbourNode = neighbour;
+        }
       }
-  }(function (moment) {
-      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
-
-      function translate(number, withoutSuffix, key, isFuture) {
-          var num = number,
-              suffix;
+    }
 
-          switch (key) {
-          case 's':
-              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
-          case 'm':
-              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'mm':
-              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'h':
-              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'hh':
-              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'd':
-              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'dd':
-              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'M':
-              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'MM':
-              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'y':
-              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
-          case 'yy':
-              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
-          }
+    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+      this._addToCluster(neighbour, node, true);
+    }
+  };
 
-          return '';
-      }
 
-      function week(isFuture) {
-          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
+  /**
+   * 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 moment.lang('hu', {
-          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
-          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
-          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
-          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
-          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "YYYY.MM.DD.",
-              LL : "YYYY. MMMM D.",
-              LLL : "YYYY. MMMM D., LT",
-              LLLL : "YYYY. MMMM D., dddd LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 12) {
-                  return isLower === true ? 'de' : 'DE';
-              } else {
-                  return isLower === true ? 'du' : 'DU';
-              }
-          },
-          calendar : {
-              sameDay : '[ma] LT[-kor]',
-              nextDay : '[holnap] LT[-kor]',
-              nextWeek : function () {
-                  return week.call(this, true);
-              },
-              lastDay : '[tegnap] LT[-kor]',
-              lastWeek : function () {
-                  return week.call(this, false);
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s múlva",
-              past : "%s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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;
+    }
+    // we decide if the node is a hub
+    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
+      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+      // initialize variables
+      var dx,dy,length;
+      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+      var allowCluster = false;
 
+      // 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);
+      }
 
-/***/ },
-/* 87 */
-/***/ function(module, exports, __webpack_require__) {
+      // if the hub clustering is not forces, 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);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Armenian (hy-am)
-  // author : Armendarabyan : https://github.com/armendarabyan
+                if (length < minLength) {
+                  allowCluster = true;
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // start the clustering if allowed
+      if ((!force && allowCluster) || force) {
+        // we loop over all edges INITIALLY connected to this hub
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          edge = this.edges[edgesIdarray[j]];
+          // the edge can be clustered by this function in a previous loop
+          if (edge !== undefined) {
+            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+            // 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);
+            }
+          }
+        }
       }
-  }(function (moment) {
+    }
+  };
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
-              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
-          },
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return months[nounCase][m.month()];
+  /**
+   * 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;
+
+    // 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
+        this._addToContainedEdges(parentNode,childNode,edge);
+      }
+      else {
+        this._connectEdgeToCluster(parentNode,childNode,edge);
       }
+    }
+    // a contained node has no dynamic edges.
+    childNode.dynamicEdges = [];
 
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
+    // remove circular edges from clusters
+    this._containCircularEdgesFromNode(parentNode,childNode);
 
-          return monthsShort[m.month()];
-      }
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
+    // remove the childNode from the global nodes object
+    delete this.nodes[childNode.id];
 
-          return weekdays[m.day()];
-      }
+    // update the properties of the child and parent
+    var massBefore = parentNode.mass;
+    childNode.clusterSession = this.clusterSession;
+    parentNode.mass += childNode.mass;
+    parentNode.clusterSize += childNode.clusterSize;
+    parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
 
-      return moment.lang('hy-am', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY թ.",
-              LLL : "D MMMM YYYY թ., LT",
-              LLLL : "dddd, D MMMM YYYY թ., LT"
-          },
-          calendar : {
-              sameDay: '[այսօր] LT',
-              nextDay: '[վաղը] LT',
-              lastDay: '[երեկ] LT',
-              nextWeek: function () {
-                  return 'dddd [օրը ժամը] LT';
-              },
-              lastWeek: function () {
-                  return '[անցած] dddd [օրը ժամը] LT';
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "%s հետո",
-              past : "%s առաջ",
-              s : "մի քանի վայրկյան",
-              m : "րոպե",
-              mm : "%d րոպե",
-              h : "ժամ",
-              hh : "%d ժամ",
-              d : "օր",
-              dd : "%d օր",
-              M : "ամիս",
-              MM : "%d ամիս",
-              y : "տարի",
-              yy : "%d տարի"
-          },
+    // 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);
+    }
 
-          meridiem : function (hour) {
-              if (hour < 4) {
-                  return "գիշերվա";
-              } else if (hour < 12) {
-                  return "առավոտվա";
-              } else if (hour < 17) {
-                  return "ցերեկվա";
-              } else {
-                  return "երեկոյան";
-              }
-          },
+    // forced clusters only open from screen size and double tap
+    if (force == true) {
+      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
+      parentNode.formationScale = 0;
+    }
+    else {
+      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+    }
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'DDD':
-              case 'w':
-              case 'W':
-              case 'DDDo':
-                  if (number === 1) {
-                      return number + '-ին';
-                  }
-                  return number + '-րդ';
-              default:
-                  return number;
-              }
-          },
+    // recalculate the size of the node on the next time the node is rendered
+    parentNode.clearSizeCache();
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    // set the pop-out scale for the childnode
+    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
 
+    // nullify the movement velocity of the child, this is to avoid hectic behaviour
+    childNode.clearVelocity();
 
-/***/ },
-/* 88 */
-/***/ function(module, exports, __webpack_require__) {
+    // the mass has altered, preservation of energy dictates the velocity to be updated
+    parentNode.updateVelocity(massBefore);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Indonesia (id)
-  // author : Mohammad Satrio Utomo : https://github.com/tyok
-  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
+    // restart the simulation to reorganise all nodes
+    this.moving = true;
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('id', {
-          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
-          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
-          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
-          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'siang';
-              } else if (hours < 19) {
-                  return 'sore';
-              } else {
-                  return 'malam';
-              }
-          },
-          calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Besok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kemarin pukul] LT',
-              lastWeek : 'dddd [lalu pukul] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lalu",
-              s : "beberapa detik",
-              m : "semenit",
-              mm : "%d menit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+
+  /**
+   * 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;
+            }
           }
-      });
-  }));
+        }
+      }
+      node.dynamicEdgesLength -= correction;
+    }
+  };
 
 
-/***/ },
-/* 89 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : icelandic (is)
-  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
+    // remove the edge from the global edges object
+    delete this.edges[edge.id];
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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;
       }
-  }(function (moment) {
-      function plural(n) {
-          if (n % 100 === 11) {
-              return true;
-          } else if (n % 10 === 1) {
-              return false;
-          }
-          return true;
+    }
+  };
+
+  /**
+   * 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
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':
-              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
-          case 'm':
-              return withoutSuffix ? 'mínúta' : 'mínútu';
-          case 'mm':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
-              } else if (withoutSuffix) {
-                  return result + 'mínúta';
-              }
-              return result + 'mínútu';
-          case 'hh':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
-              }
-              return result + 'klukkustund';
-          case 'd':
-              if (withoutSuffix) {
-                  return 'dagur';
-              }
-              return isFuture ? 'dag' : 'degi';
-          case 'dd':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'dagar';
-                  }
-                  return result + (isFuture ? 'daga' : 'dögum');
-              } else if (withoutSuffix) {
-                  return result + 'dagur';
-              }
-              return result + (isFuture ? 'dag' : 'degi');
-          case 'M':
-              if (withoutSuffix) {
-                  return 'mánuður';
-              }
-              return isFuture ? 'mánuð' : 'mánuði';
-          case 'MM':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'mánuðir';
-                  }
-                  return result + (isFuture ? 'mánuði' : 'mánuðum');
-              } else if (withoutSuffix) {
-                  return result + 'mánuður';
-              }
-              return result + (isFuture ? 'mánuð' : 'mánuði');
-          case 'y':
-              return withoutSuffix || isFuture ? 'ár' : 'ári';
-          case 'yy':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
-              }
-              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
-          }
+        edge.originalFromId.push(childNode.id);
+        edge.from = parentNode;
+        edge.fromId = parentNode.id;
       }
 
-      return moment.lang('is', {
-          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
-          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
-          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
-          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
-          },
-          calendar : {
-              sameDay : '[í dag kl.] LT',
-              nextDay : '[á morgun kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[í gær kl.] LT',
-              lastWeek : '[síðasta] dddd [kl.] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "eftir %s",
-              past : "fyrir %s síðan",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : "klukkustund",
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      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;
+        }
 
+        // append this edge to the list of edges connecting to the childnode
+        childNode.dynamicEdges.push(edge);
 
-/***/ },
-/* 90 */
-/***/ function(module, exports, __webpack_require__) {
+        // 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];
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : italian (it)
-  // author : Lorenzo : https://github.com/aliem
-  // author: Mattia Larentis: https://github.com/nostalgiaz
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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) {
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
+        parentNode.dynamicEdges.splice(i,1);
       }
-  }(function (moment) {
-      return moment.lang('it', {
-          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
-          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
-          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
-          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
-          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Oggi alle] LT',
-              nextDay: '[Domani alle] LT',
-              nextWeek: 'dddd [alle] LT',
-              lastDay: '[Ieri alle] LT',
-              lastWeek: '[lo scorso] dddd [alle] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (s) {
-                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
-              },
-              past : "%s fa",
-              s : "alcuni secondi",
-              m : "un minuto",
-              mm : "%d minuti",
-              h : "un'ora",
-              hh : "%d ore",
-              d : "un giorno",
-              dd : "%d giorni",
-              M : "un mese",
-              MM : "%d mesi",
-              y : "un anno",
-              yy : "%d anni"
-          },
-          ordinal: '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 91 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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];
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : japanese (ja)
-  // author : LI Long : https://github.com/baryon
+      // put the edge back in the global edges object
+      this.edges[edge.id] = edge;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ja', {
-          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
-          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
-          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
-          longDateFormat : {
-              LT : "Ah時m分",
-              L : "YYYY/MM/DD",
-              LL : "YYYY年M月D日",
-              LLL : "YYYY年M月D日LT",
-              LLLL : "YYYY年M月D日LT dddd"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "午前";
-              } else {
-                  return "午後";
-              }
-          },
-          calendar : {
-              sameDay : '[今日] LT',
-              nextDay : '[明日] LT',
-              nextWeek : '[来週]dddd LT',
-              lastDay : '[昨日] LT',
-              lastWeek : '[前週]dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s後",
-              past : "%s前",
-              s : "数秒",
-              m : "1分",
-              mm : "%d分",
-              h : "1時間",
-              hh : "%d時間",
-              d : "1日",
-              dd : "%d日",
-              M : "1ヶ月",
-              MM : "%dヶ月",
-              y : "1年",
-              yy : "%d年"
-          }
-      });
-  }));
+      // 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];
 
+  };
 
-/***/ },
-/* 92 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Georgian (ka)
-  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
-              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
-          },
+  // ------------------- UTILITY FUNCTIONS ---------------------------- //
 
-          nounCase = (/D[oD] *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return months[nounCase][m.month()];
+  /**
+   * 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),"]");
+        }
       }
+    }
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
-              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
-          },
+    // 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);
+          }
+        }
+      }
+    }
 
-          nounCase = (/(წინა|შემდეგ)/).test(format) ?
-              'accusative' :
-              'nominative';
+  //    /* Debug Override */
+  //    for (nodeId in this.nodes) {
+  //      if (this.nodes.hasOwnProperty(nodeId)) {
+  //        node = this.nodes[nodeId];
+  //        node.label = String(node.level);
+  //      }
+  //    }
 
-          return weekdays[nounCase][m.day()];
-      }
+  };
 
-      return moment.lang('ka', {
-          months : monthsCaseReplace,
-          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
-          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[დღეს] LT[-ზე]',
-              nextDay : '[ხვალ] LT[-ზე]',
-              lastDay : '[გუშინ] LT[-ზე]',
-              nextWeek : '[შემდეგ] dddd LT[-ზე]',
-              lastWeek : '[წინა] dddd LT-ზე',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : function (s) {
-                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
-                      s.replace(/ი$/, "ში") :
-                      s + "ში";
-              },
-              past : function (s) {
-                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
-                      return s.replace(/(ი|ე)$/, "ის წინ");
-                  }
-                  if ((/წელი/).test(s)) {
-                      return s.replace(/წელი$/, "წლის წინ");
-                  }
-              },
-              s : "რამდენიმე წამი",
-              m : "წუთი",
-              mm : "%d წუთი",
-              h : "საათი",
-              hh : "%d საათი",
-              d : "დღე",
-              dd : "%d დღე",
-              M : "თვე",
-              MM : "%d თვე",
-              y : "წელი",
-              yy : "%d წელი"
-          },
-          ordinal : function (number) {
-              if (number === 0) {
-                  return number;
-              }
 
-              if (number === 1) {
-                  return number + "-ლი";
-              }
+  /**
+   * 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;
 
-              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
-                  return "მე-" + number;
-              }
+    // 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;}
+      }
+    }
 
-              return number + "-ე";
-          },
-          week : {
-              dow : 1,
-              doy : 7
+    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]);
           }
-      });
-  }));
+        }
+      }
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      // if a cluster was formed, we increase the clusterSession
+      if (this.nodeIndices.length != amountOfNodes) {
+        this.clusterSession += 1;
+      }
+    }
+  };
 
 
-/***/ },
-/* 93 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : khmer (km)
-  // author : Kruy Vanna : https://github.com/kruyvanna
+  /**
+   * 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('km', {
-          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
-              nextDay: '[ស្អែក ម៉ោង] LT',
-              nextWeek: 'dddd [ម៉ោង] LT',
-              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
-              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "%sទៀត",
-              past: "%sមុន",
-              s: "ប៉ុន្មានវិនាទី",
-              m: "មួយនាទី",
-              mm: "%d នាទី",
-              h: "មួយម៉ោង",
-              hh: "%d ម៉ោង",
-              d: "មួយថ្ងៃ",
-              dd: "%d ថ្ងៃ",
-              M: "មួយខែ",
-              MM: "%d ខែ",
-              y: "មួយឆ្នាំ",
-              yy: "%d ឆ្នាំ"
-          },
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4 // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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.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);
+      }
+    }
+  };
 
-/***/ },
-/* 94 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : korean (ko)
-  //
-  // authors 
-  //
-  // - Kyungwook, Park : https://github.com/kyungw00k
-  // - Jeeeyul Lee <jeeeyul@gmail.com>
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ko', {
-          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
-          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
-          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
-          longDateFormat : {
-              LT : "A h시 mm분",
-              L : "YYYY.MM.DD",
-              LL : "YYYY년 MMMM D일",
-              LLL : "YYYY년 MMMM D일 LT",
-              LLLL : "YYYY년 MMMM D일 dddd LT"
-          },
-          meridiem : function (hour, minute, isUpper) {
-              return hour < 12 ? '오전' : '오후';
-          },
-          calendar : {
-              sameDay : '오늘 LT',
-              nextDay : '내일 LT',
-              nextWeek : 'dddd LT',
-              lastDay : '어제 LT',
-              lastWeek : '지난주 dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s 후",
-              past : "%s 전",
-              s : "몇초",
-              ss : "%d초",
-              m : "일분",
-              mm : "%d분",
-              h : "한시간",
-              hh : "%d시간",
-              d : "하루",
-              dd : "%d일",
-              M : "한달",
-              MM : "%d달",
-              y : "일년",
-              yy : "%d년"
-          },
-          ordinal : '%d일',
-          meridiemParse : /(오전|오후)/,
-          isPM : function (token) {
-              return token === "오후";
-          }
-      });
-  }));
+  /**
+   * 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;
 
+    for (var i = 0; i < this.nodeIndices.length; i++) {
 
-/***/ },
-/* 95 */
-/***/ function(module, exports, __webpack_require__) {
+      var node = this.nodes[this.nodeIndices[i]];
+      if (node.dynamicEdgesLength > largestHub) {
+        largestHub = node.dynamicEdgesLength;
+      }
+      average += node.dynamicEdgesLength;
+      averageSquared += Math.pow(node.dynamicEdgesLength,2);
+      hubCounter += 1;
+    }
+    average = average / hubCounter;
+    averageSquared = averageSquared / hubCounter;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Luxembourgish (lb)
-  // author : mweimerskirch : https://github.com/mweimerskirch
+    var variance = averageSquared - Math.pow(average,2);
 
-  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
-  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
-  // and "eifelerRegelAppliesToNumber" methods are meant for
+    var standardDeviation = Math.sqrt(variance);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eng Minutt', 'enger Minutt'],
-              'h': ['eng Stonn', 'enger Stonn'],
-              'd': ['een Dag', 'engem Dag'],
-              'dd': [number + ' Deeg', number + ' Deeg'],
-              'M': ['ee Mount', 'engem Mount'],
-              'MM': [number + ' Méint', number + ' Méint'],
-              'y': ['ee Joer', 'engem Joer'],
-              'yy': [number + ' Joer', number + ' Joer']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
-      }
+    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-      function processFutureTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "a " + string;
-          }
-          return "an " + string;
-      }
+    // always have at least one to cluster
+    if (this.hubThreshold > largestHub) {
+      this.hubThreshold = largestHub;
+    }
 
-      function processPastTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "viru " + string;
-          }
-          return "virun " + string;
-      }
+  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
+  //  console.log("hubThreshold:",this.hubThreshold);
+  };
 
-      function processLastWeek(string1) {
-          var weekday = this.format('d');
-          if (eifelerRegelAppliesToWeekday(weekday)) {
-              return '[Leschte] dddd [um] LT';
-          }
-          return '[Leschten] dddd [um] LT';
-      }
 
-      /**
-       * Returns true if the word before the given week day loses the "-n" ending.
-       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
-       *
-       * @param weekday {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToWeekday(weekday) {
-          weekday = parseInt(weekday, 10);
-          switch (weekday) {
-          case 0: // Sonndeg
-          case 1: // Méindeg
-          case 3: // Mëttwoch
-          case 5: // Freideg
-          case 6: // Samschdeg
-              return true;
-          default: // 2 Dënschdeg, 4 Donneschdeg
-              return false;
+  /**
+   * 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;
           }
+        }
       }
+    }
+  };
 
-      /**
-       * Returns true if the word before the given number loses the "-n" ending.
-       * e.g. "an 10 Deeg" but "a 5 Deeg"
-       *
-       * @param number {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToNumber(number) {
-          number = parseInt(number, 10);
-          if (isNaN(number)) {
-              return false;
-          }
-          if (number < 0) {
-              // Negative Number --> always true
-              return true;
-          } else if (number < 10) {
-              // Only 1 digit
-              if (4 <= number && number <= 7) {
-                  return true;
-              }
-              return false;
-          } else if (number < 100) {
-              // 2 digits
-              var lastDigit = number % 10, firstDigit = number / 10;
-              if (lastDigit === 0) {
-                  return eifelerRegelAppliesToNumber(firstDigit);
-              }
-              return eifelerRegelAppliesToNumber(lastDigit);
-          } else if (number < 10000) {
-              // 3 or 4 digits --> recursively check first digit
-              while (number >= 10) {
-                  number = number / 10;
-              }
-              return eifelerRegelAppliesToNumber(number);
-          } else {
-              // Anything larger than 4 digits: recursively check first n-3 digits
-              number = number / 1000;
-              return eifelerRegelAppliesToNumber(number);
-          }
+  /**
+   * 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 moment.lang('lb', {
-          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
-          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
-          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
-          longDateFormat: {
-              LT: "H:mm [Auer]",
-              L: "DD.MM.YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: "[Haut um] LT",
-              sameElse: "L",
-              nextDay: '[Muer um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gëschter um] LT',
-              lastWeek: processLastWeek
-          },
-          relativeTime: {
-              future: processFutureTime,
-              past: processPastTime,
-              s: "e puer Sekonnen",
-              m: processRelativeTime,
-              mm: "%d Minutten",
-              h: processRelativeTime,
-              hh: "%d Stonnen",
-              d: processRelativeTime,
-              dd: processRelativeTime,
-              M: processRelativeTime,
-              MM: processRelativeTime,
-              y: processRelativeTime,
-              yy: processRelativeTime
-          },
-          ordinal: '%d.',
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+    return chains/total;
+  };
 
 
 /***/ },
-/* 96 */
+/* 125 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Lithuanian (lt)
-  // author : Mindaugas Mozūras : https://github.com/mmozuras
+  var util = __webpack_require__(1);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var units = {
-          "m" : "minutė_minutės_minutę",
-          "mm": "minutės_minučių_minutes",
-          "h" : "valanda_valandos_valandą",
-          "hh": "valandos_valandų_valandas",
-          "d" : "diena_dienos_dieną",
-          "dd": "dienos_dienų_dienas",
-          "M" : "mėnuo_mėnesio_mėnesį",
-          "MM": "mėnesiai_mėnesių_mėnesius",
-          "y" : "metai_metų_metus",
-          "yy": "metai_metų_metus"
-      },
-      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
+  /**
+   * 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 translateSeconds(number, withoutSuffix, key, isFuture) {
-          if (withoutSuffix) {
-              return "kelios sekundės";
-          } else {
-              return isFuture ? "kelių sekundžių" : "kelias sekundes";
-          }
-      }
+  /**
+   * 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;
+  };
 
-      function translateSingular(number, withoutSuffix, key, isFuture) {
-          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
-      }
 
-      function special(number) {
-          return number % 10 === 0 || (number > 10 && number < 20);
-      }
+  /**
+   *  /**
+   * 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);
+    }
+  };
 
-      function forms(key) {
-          return units[key].split("_");
-      }
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          if (number === 1) {
-              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
-          } else if (withoutSuffix) {
-              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
-          } else {
-              if (isFuture) {
-                  return result + forms(key)[1];
-              } else {
-                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
-              }
-          }
-      }
+  /**
+   * 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"];
+  };
 
-      function relativeWeekDay(moment, format) {
-          var nominative = format.indexOf('dddd HH:mm') === -1,
-              weekDay = weekDays[moment.day()];
 
-          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
-      }
+  /**
+   * 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"];
+  };
 
-      return moment.lang("lt", {
-          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
-          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
-          weekdays : relativeWeekDay,
-          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
-          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY [m.] MMMM D [d.]",
-              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
-              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
-              l : "YYYY-MM-DD",
-              ll : "YYYY [m.] MMMM D [d.]",
-              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
-              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
-          },
-          calendar : {
-              sameDay : "[Šiandien] LT",
-              nextDay : "[Rytoj] LT",
-              nextWeek : "dddd LT",
-              lastDay : "[Vakar] LT",
-              lastWeek : "[Praėjusį] dddd LT",
-              sameElse : "L"
-          },
-          relativeTime : {
-              future : "po %s",
-              past : "prieš %s",
-              s : translateSeconds,
-              m : translateSingular,
-              mm : translate,
-              h : translateSingular,
-              hh : translate,
-              d : translateSingular,
-              dd : translate,
-              M : translateSingular,
-              MM : translate,
-              y : translateSingular,
-              yy : translate
-          },
-          ordinal : function (number) {
-              return number + '-oji';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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"];
+  };
 
-/***/ },
-/* 97 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : latvian (lv)
-  // author : Kristaps Karlsons : https://github.com/skakri
+  /**
+   * 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var units = {
-          'mm': 'minūti_minūtes_minūte_minūtes',
-          'hh': 'stundu_stundas_stunda_stundas',
-          'dd': 'dienu_dienas_diena_dienas',
-          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
-          'yy': 'gadu_gadus_gads_gadi'
-      };
 
-      function format(word, number, withoutSuffix) {
-          var forms = word.split('_');
-          if (withoutSuffix) {
-              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
-          } else {
-              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
-          }
-      }
+  /**
+   * This function returns the currently active sector Id
+   *
+   * @returns {String}
+   * @private
+   */
+  exports._sector = function() {
+    return this.activeSector[this.activeSector.length-1];
+  };
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          return number + ' ' + format(units[key], number, withoutSuffix);
-      }
 
-      return moment.lang('lv', {
-          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
-          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
-          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "YYYY. [gada] D. MMMM",
-              LLL : "YYYY. [gada] D. MMMM, LT",
-              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
-          },
-          calendar : {
-              sameDay : '[Šodien pulksten] LT',
-              nextDay : '[Rīt pulksten] LT',
-              nextWeek : 'dddd [pulksten] LT',
-              lastDay : '[Vakar pulksten] LT',
-              lastWeek : '[Pagājušā] dddd [pulksten] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s vēlāk",
-              past : "%s agrāk",
-              s : "dažas sekundes",
-              m : "minūti",
-              mm : relativeTimeWithPlural,
-              h : "stundu",
-              hh : relativeTimeWithPlural,
-              d : "dienu",
-              dd : relativeTimeWithPlural,
-              M : "mēnesi",
-              MM : relativeTimeWithPlural,
-              y : "gadu",
-              yy : relativeTimeWithPlural
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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.');
+    }
+  };
 
 
-/***/ },
-/* 98 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : macedonian (mk)
-  // author : Borislav Mickov : https://github.com/B0k0
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('mk', {
-          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
-          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
-          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Денес во] LT',
-              nextDay : '[Утре во] LT',
-              nextWeek : 'dddd [во] LT',
-              lastDay : '[Вчера во] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[Во изминатата] dddd [во] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[Во изминатиот] dddd [во] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "после %s",
-              past : "пред %s",
-              s : "неколку секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дена",
-              M : "месец",
-              MM : "%d месеци",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+  /**
+   * 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"
           }
-      });
-  }));
+        },{},{},this.constants);
+    this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
+  };
 
 
-/***/ },
-/* 99 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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];
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : malayalam (ml)
-  // author : Floyd Pink : https://github.com/floydpink
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ml', {
-          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
-          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
-          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
-          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
-          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm -നു",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[ഇന്ന്] LT',
-              nextDay : '[നാളെ] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[ഇന്നലെ] LT',
-              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s കഴിഞ്ഞ്",
-              past : "%s മുൻപ്",
-              s : "അൽപ നിമിഷങ്ങൾ",
-              m : "ഒരു മിനിറ്റ്",
-              mm : "%d മിനിറ്റ്",
-              h : "ഒരു മണിക്കൂർ",
-              hh : "%d മണിക്കൂർ",
-              d : "ഒരു ദിവസം",
-              dd : "%d ദിവസം",
-              M : "ഒരു മാസം",
-              MM : "%d മാസം",
-              y : "ഒരു വർഷം",
-              yy : "%d വർഷം"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "രാത്രി";
-              } else if (hour < 12) {
-                  return "രാവിലെ";
-              } else if (hour < 17) {
-                  return "ഉച്ച കഴിഞ്ഞ്";
-              } else if (hour < 20) {
-                  return "വൈകുന്നേരം";
-              } else {
-                  return "രാത്രി";
-              }
-          }
-      });
-  }));
+  /**
+   * 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];
+  };
 
 
-/***/ },
-/* 100 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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];
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Marathi (mr)
-  // author : Harshad Kale : https://github.com/kalehv
+    // we have moved the sector data into the frozen set, we now remove it from the active set
+    this._deleteActiveSector(sectorId);
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
 
-      return moment.lang('mr', {
-          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
-          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm वाजता",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[उद्या] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[काल] LT',
-              lastWeek: '[मागील] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s नंतर",
-              past : "%s पूर्वी",
-              s : "सेकंद",
-              m: "एक मिनिट",
-              mm: "%d मिनिटे",
-              h : "एक तास",
-              hh : "%d तास",
-              d : "एक दिवस",
-              dd : "%d दिवस",
-              M : "एक महिना",
-              MM : "%d महिने",
-              y : "एक वर्ष",
-              yy : "%d वर्षे"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem: function (hour, minute, isLower)
-          {
-              if (hour < 4) {
-                  return "रात्री";
-              } else if (hour < 10) {
-                  return "सकाळी";
-              } else if (hour < 17) {
-                  return "दुपारी";
-              } else if (hour < 20) {
-                  return "सायंकाळी";
-              } else {
-                  return "रात्री";
-              }
-          },
-          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 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);
+  };
 
-/***/ },
-/* 101 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Malaysia (ms-MY)
-  // author : Weldan Jamili : https://github.com/weldan
+  /**
+   * 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];
+      }
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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 (moment) {
-      return moment.lang('ms-my', {
-          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
-          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
-          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
-          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
-          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'tengahari';
-              } else if (hours < 19) {
-                  return 'petang';
-              } else {
-                  return 'malam';
-              }
-          },
-          calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Esok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kelmarin pukul] LT',
-              lastWeek : 'dddd [lepas pukul] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lepas",
-              s : "beberapa saat",
-              m : "seminit",
-              mm : "%d minit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
 
+    // merge the nodeIndices
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
+    }
+  };
 
-/***/ },
-/* 102 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian bokmål (nb)
-  // authors : Espen Hovlandsdal : https://github.com/rexxars
-  //           Sigurd Gartmann : https://github.com/sigurdga
+  /**
+   * 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);
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('nb', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "H.mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd D. MMMM YYYY [kl.] LT"
-          },
-          calendar : {
-              sameDay: '[i dag kl.] LT',
-              nextDay: '[i morgen kl.] LT',
-              nextWeek: 'dddd [kl.] LT',
-              lastDay: '[i går kl.] LT',
-              lastWeek: '[forrige] dddd [kl.] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "for %s siden",
-              s : "noen sekunder",
-              m : "ett minutt",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dager",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the 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!!");
+  //    }
 
-/***/ },
-/* 103 */
-/***/ function(module, exports, __webpack_require__) {
+    // 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 __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : nepali/nepalese
-  // author : suvash : https://github.com/suvash
+    var unqiueIdentifier = util.randomUUID();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+    // we fully freeze the currently active sector
+    this._freezeSector(sector);
 
-      return moment.lang('ne', {
-          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
-          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
-          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
-          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
-          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
-          longDateFormat : {
-              LT : "Aको h:mm बजे",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 3) {
-                  return "राती";
-              } else if (hour < 10) {
-                  return "बिहान";
-              } else if (hour < 15) {
-                  return "दिउँसो";
-              } else if (hour < 18) {
-                  return "बेलुका";
-              } else if (hour < 20) {
-                  return "साँझ";
-              } else {
-                  return "राती";
-              }
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[भोली] LT',
-              nextWeek : '[आउँदो] dddd[,] LT',
-              lastDay : '[हिजो] LT',
-              lastWeek : '[गएको] dddd[,] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%sमा",
-              past : "%s अगाडी",
-              s : "केही समय",
-              m : "एक मिनेट",
-              mm : "%d मिनेट",
-              h : "एक घण्टा",
-              hh : "%d घण्टा",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महिना",
-              MM : "%d महिना",
-              y : "एक बर्ष",
-              yy : "%d बर्ष"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    // 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);
 
-/***/ },
-/* 104 */
-/***/ function(module, exports, __webpack_require__) {
+    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
+    this._switchToSector(this._sector());
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : dutch (nl)
-  // author : Joris Röling : https://github.com/jjupiter
+    // finally we add the node we removed from our previous active sector to the new active sector
+    this.nodes[node.id] = node;
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
-          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
 
-      return moment.lang('nl', {
-          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShortWithoutDots[m.month()];
-              } else {
-                  return monthsShortWithDots[m.month()];
-              }
-          },
-          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
-          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
-          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[vandaag om] LT',
-              nextDay: '[morgen om] LT',
-              nextWeek: 'dddd [om] LT',
-              lastDay: '[gisteren om] LT',
-              lastWeek: '[afgelopen] dddd [om] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "over %s",
-              past : "%s geleden",
-              s : "een paar seconden",
-              m : "één minuut",
-              mm : "%d minuten",
-              h : "één uur",
-              hh : "%d uur",
-              d : "één dag",
-              dd : "%d dagen",
-              M : "één maand",
-              MM : "%d maanden",
-              y : "één jaar",
-              yy : "%d jaar"
-          },
-          ordinal : function (number) {
-              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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();
 
-/***/ },
-/* 105 */
-/***/ function(module, exports, __webpack_require__) {
+        // we collapse the sector back to a single cluster
+        this._collapseThisToSingleCluster();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian nynorsk (nn)
-  // author : https://github.com/mechuwind
+        // we move the remaining nodes, edges and nodeIndices to the previous sector.
+        // This previous sector is the one we will reactivate
+        this._mergeThisWithFrozen(previousSector);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('nn', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
-          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
-          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[I dag klokka] LT',
-              nextDay: '[I morgon klokka] LT',
-              nextWeek: 'dddd [klokka] LT',
-              lastDay: '[I går klokka] LT',
-              lastWeek: '[Føregåande] dddd [klokka] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "for %s sidan",
-              s : "nokre sekund",
-              m : "eit minutt",
-              mm : "%d minutt",
-              h : "ein time",
-              hh : "%d timar",
-              d : "ein dag",
-              dd : "%d dagar",
-              M : "ein månad",
-              MM : "%d månader",
-              y : "eit år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+        // 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);
 
-/***/ },
-/* 106 */
-/***/ function(module, exports, __webpack_require__) {
+        // we load the references from the newly active sector into the global references
+        this._switchToSector(previousSector);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : polish (pl)
-  // author : Rafal Hirsz : https://github.com/evoL
+        // we forget the previously active sector because we reverted to the one before
+        this._forgetLastSector();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
-          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
+        // finally, we update the node index list.
+        this._updateNodeIndexList();
 
-      function plural(n) {
-          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
+        // we refresh the list with calulation nodes and calculation node indices.
+        this._updateCalculationNodes();
       }
+    }
+  };
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'minuta' : 'minutę';
-          case 'mm':
-              return result + (plural(number) ? 'minuty' : 'minut');
-          case 'h':
-              return withoutSuffix  ? 'godzina'  : 'godzinę';
-          case 'hh':
-              return result + (plural(number) ? 'godziny' : 'godzin');
-          case 'MM':
-              return result + (plural(number) ? 'miesiące' : 'miesięcy');
-          case 'yy':
-              return result + (plural(number) ? 'lata' : 'lat');
-          }
-      }
 
-      return moment.lang('pl', {
-          months : function (momentToFormat, format) {
-              if (/D MMMM/.test(format)) {
-                  return monthsSubjective[momentToFormat.month()];
-              } else {
-                  return monthsNominative[momentToFormat.month()];
-              }
-          },
-          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
-          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
-          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
-          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Dziś o] LT',
-              nextDay: '[Jutro o] LT',
-              nextWeek: '[W] dddd [o] LT',
-              lastDay: '[Wczoraj o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[W zeszłą niedzielę o] LT';
-                  case 3:
-                      return '[W zeszłą środę o] LT';
-                  case 6:
-                      return '[W zeszłą sobotę o] LT';
-                  default:
-                      return '[W zeszły] dddd [o] LT';
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "%s temu",
-              s : "kilka sekund",
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : "1 dzień",
-              dd : '%d dni',
-              M : "miesiąc",
-              MM : translate,
-              y : "rok",
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+  /**
+   * 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) {
+    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);
+          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) {
+            this[runFunction](args[0],args[1]);
           }
-      });
-  }));
-
-
-/***/ },
-/* 107 */
-/***/ function(module, exports, __webpack_require__) {
+          else {
+            this[runFunction](argument);
+          }
+        }
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : brazilian portuguese (pt-br)
-  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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) {
+    if (argument === undefined) {
+      this._switchToSupportSector();
+      this[runFunction]();
+    }
+    else {
+      this._switchToSupportSector();
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
       }
-  }(function (moment) {
-      return moment.lang('pt-br', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY [às] LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
-          },
-          calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "em %s",
-              past : "%s atrás",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº'
-      });
-  }));
+      else {
+        this[runFunction](argument);
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
 
-/***/ },
-/* 108 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+          }
+        }
+      }
+    }
+    this._loadLatestSector();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : portuguese (pt)
-  // author : Jefferson : https://github.com/jalex79
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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]);
       }
-  }(function (moment) {
-      return moment.lang('pt', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "em %s",
-              past : "há %s",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      else {
+        this._doInAllActiveSectors(runFunction,argument);
+        this._doInAllFrozenSectors(runFunction,argument);
+      }
+    }
+  };
 
 
-/***/ },
-/* 109 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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"];
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : romanian (ro)
-  // author : Vlad Gurdiga : https://github.com/gurdiga
-  // author : Valentin Agachi : https://github.com/avaly
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'minute',
-              'hh': 'ore',
-              'dd': 'zile',
-              'MM': 'luni',
-              'yy': 'ani'
-          },
-              separator = ' ';
-          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
-              separator = ' de ';
-          }
+  /**
+   * 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) {
 
-          return number + separator + format[key];
-      }
+          this._switchToSector(sector,sectorType);
 
-      return moment.lang('ro', {
-          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
-          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
-          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
-          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
-          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY H:mm",
-              LLLL : "dddd, D MMMM YYYY H:mm"
-          },
-          calendar : {
-              sameDay: "[azi la] LT",
-              nextDay: '[mâine la] LT',
-              nextWeek: 'dddd [la] LT',
-              lastDay: '[ieri la] LT',
-              lastWeek: '[fosta] dddd [la] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "peste %s",
-              past : "%s în urmă",
-              s : "câteva secunde",
-              m : "un minut",
-              mm : relativeTimeWithPlural,
-              h : "o oră",
-              hh : relativeTimeWithPlural,
-              d : "o zi",
-              dd : relativeTimeWithPlural,
-              M : "o lună",
-              MM : relativeTimeWithPlural,
-              y : "un an",
-              yy : relativeTimeWithPlural
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          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.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();
+  };
 
 
 /***/ },
-/* 110 */
+/* 126 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : russian (ru)
-  // author : Viktorminator : https://github.com/Viktorminator
-  // Author : Menelion Elensúle : https://github.com/Oire
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
-      }
+  var Node = __webpack_require__(39);
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
-              'hh': 'час_часа_часов',
-              'dd': 'день_дня_дней',
-              'MM': 'месяц_месяца_месяцев',
-              'yy': 'год_года_лет'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'минута' : 'минуту';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
+  /**
+   * 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);
+        }
       }
+    }
+  };
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
-              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
-          },
+  /**
+   * 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;
+  };
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return months[nounCase][m.month()];
-      }
+  /**
+   * 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);
 
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = {
-              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
-              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
-          },
+    return {
+      left:   x,
+      top:    y,
+      right:  x,
+      bottom: y
+    };
+  };
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return monthsShort[nounCase][m.month()];
-      }
+  /**
+   * 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);
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
-              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
-          },
+    // 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;
+    }
+  };
 
-          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return weekdays[nounCase][m.day()];
+  /**
+   * 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);
+        }
       }
+    }
+  };
 
-      return moment.lang('ru', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY г.",
-              LLL : "D MMMM YYYY г., LT",
-              LLLL : "dddd, D MMMM YYYY г., LT"
-          },
-          calendar : {
-              sameDay: '[Сегодня в] LT',
-              nextDay: '[Завтра в] LT',
-              lastDay: '[Вчера в] LT',
-              nextWeek: function () {
-                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
-              },
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[В прошлое] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                      return '[В прошлый] dddd [в] LT';
-                  case 3:
-                  case 5:
-                  case 6:
-                      return '[В прошлую] dddd [в] LT';
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "через %s",
-              past : "%s назад",
-              s : "несколько секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "час",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "месяц",
-              MM : relativeTimeWithPlural,
-              y : "год",
-              yy : relativeTimeWithPlural
-          },
 
-          meridiemParse: /ночи|утра|дня|вечера/i,
-          isPM : function (input) {
-              return /^(дня|вечера)$/.test(input);
-          },
+  /**
+   * 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;
+  };
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "ночи";
-              } else if (hour < 12) {
-                  return "утра";
-              } else if (hour < 17) {
-                  return "дня";
-              } else {
-                  return "вечера";
-              }
-          },
+  /**
+   * 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);
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              case 'w':
-              case 'W':
-                  return number + '-я';
-              default:
-                  return number;
-              }
-          },
+    if (overlappingEdges.length > 0) {
+      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
+    }
+    else {
+      return null;
+    }
+  };
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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;
+    }
+  };
+
+  /**
+   * 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;
+    }
+  };
 
-/***/ },
-/* 111 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovak (sk)
-  // author : Martin Minka : https://github.com/k2s
-  // based on work of petrbela : https://github.com/petrbela
+  /**
+   * 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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();
       }
-  }(function (moment) {
-      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
-          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
-
-      function plural(n) {
-          return (n > 1) && (n < 5);
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        this.selectionObj.edges[edgeId].unselect();
       }
+    }
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minúty' : 'minút');
-              } else {
-                  return result + 'minútami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodín');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dni' : 'dní');
-              } else {
-                  return result + 'dňami';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
-              } else {
-                  return result + 'mesiacmi';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'rokov');
-              } else {
-                  return result + 'rokmi';
-              }
-              break;
-          }
-      }
+    this.selectionObj = {nodes:{},edges:{}};
 
-      return moment.lang('sk', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
-          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
-          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
-          longDateFormat : {
-              LT: "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes o] LT",
-              nextDay: '[zajtra o] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [o] LT';
-                  case 3:
-                      return '[v stredu o] LT';
-                  case 4:
-                      return '[vo štvrtok o] LT';
-                  case 5:
-                      return '[v piatok o] LT';
-                  case 6:
-                      return '[v sobotu o] LT';
-                  }
-              },
-              lastDay: '[včera o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulú nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[minulý] dddd [o] LT';
-                  case 3:
-                      return '[minulú stredu o] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [o] LT';
-                  case 6:
-                      return '[minulú sobotu o] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "pred %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
+  /**
+   * Unselect all clusters. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
+   */
+  exports._unselectClusters = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
 
-/***/ },
-/* 112 */
-/***/ function(module, exports, __webpack_require__) {
+    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]);
+        }
+      }
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovenian (sl)
-  // author : Robert Sedovšek : https://github.com/sedovsek
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'ena minuta' : 'eno minuto';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2) {
-                  result += 'minuti';
-              } else if (number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minut';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'ena ura' : 'eno uro';
-          case 'hh':
-              if (number === 1) {
-                  result += 'ura';
-              } else if (number === 2) {
-                  result += 'uri';
-              } else if (number === 3 || number === 4) {
-                  result += 'ure';
-              } else {
-                  result += 'ur';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dni';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mesec';
-              } else if (number === 2) {
-                  result += 'meseca';
-              } else if (number === 3 || number === 4) {
-                  result += 'mesece';
-              } else {
-                  result += 'mesecev';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'leto';
-              } else if (number === 2) {
-                  result += 'leti';
-              } else if (number === 3 || number === 4) {
-                  result += 'leta';
-              } else {
-                  result += 'let';
-              }
-              return result;
-          }
+
+  /**
+   * 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;
+  };
 
-      return moment.lang('sl', {
-          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
-          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
-          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
-          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danes ob] LT',
-              nextDay  : '[jutri ob] LT',
+  /**
+   * 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;
+  };
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v] [nedeljo] [ob] LT';
-                  case 3:
-                      return '[v] [sredo] [ob] LT';
-                  case 6:
-                      return '[v] [soboto] [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[v] dddd [ob] LT';
-                  }
-              },
-              lastDay  : '[včeraj ob] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[prejšnja] dddd [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prejšnji] dddd [ob] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "čez %s",
-              past   : "%s nazaj",
-              s      : "nekaj sekund",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "en dan",
-              dd     : translate,
-              M      : "en mesec",
-              MM     : translate,
-              y      : "eno leto",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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;
+  };
 
 
-/***/ },
-/* 113 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Albanian (sq)
-  // author : Flakërim Ismani : https://github.com/flakerimi
-  // author: Menelion Elensúle: https://github.com/Oire (tests)
-  // author : Oerd Cukalla : https://github.com/oerd (fixes)
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
       }
-  }(function (moment) {
-      return moment.lang('sq', {
-          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
-          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
-          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
-          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
-          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              return hours < 12 ? 'PD' : 'MD';
-          },
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Sot në] LT',
-              nextDay : '[Nesër në] LT',
-              nextWeek : 'dddd [në] LT',
-              lastDay : '[Dje në] LT',
-              lastWeek : 'dddd [e kaluar në] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "në %s",
-              past : "%s më parë",
-              s : "disa sekonda",
-              m : "një minutë",
-              mm : "%d minuta",
-              h : "një orë",
-              hh : "%d orë",
-              d : "një ditë",
-              dd : "%d ditë",
-              M : "një muaj",
-              MM : "%d muaj",
-              y : "një vit",
-              yy : "%d vite"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        count += 1;
+      }
+    }
+    return count;
+  };
 
-/***/ },
-/* 114 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-cyrillic (sr-cyrl)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
+        }
       }
-  }(function (moment) {
+    }
+    return false;
+  };
 
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['један минут', 'једне минуте'],
-              mm: ['минут', 'минуте', 'минута'],
-              h: ['један сат', 'једног сата'],
-              hh: ['сат', 'сата', 'сати'],
-              dd: ['дан', 'дана', 'дана'],
-              MM: ['месец', 'месеца', 'месеци'],
-              yy: ['година', 'године', 'година']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
-          },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
-              }
-          }
-      };
+  /**
+   * 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 moment.lang('sr-cyrl', {
-          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
-          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
-          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
-          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
-          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[данас у] LT',
-              nextDay: '[сутра у] LT',
+  /**
+   * 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);
+    }
+  };
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[у] [недељу] [у] LT';
-                  case 3:
-                      return '[у] [среду] [у] LT';
-                  case 6:
-                      return '[у] [суботу] [у] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[у] dddd [у] LT';
-                  }
-              },
-              lastDay  : '[јуче у] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[прошле] [недеље] [у] LT',
-                      '[прошлог] [понедељка] [у] LT',
-                      '[прошлог] [уторка] [у] LT',
-                      '[прошле] [среде] [у] LT',
-                      '[прошлог] [четвртка] [у] LT',
-                      '[прошлог] [петка] [у] LT',
-                      '[прошле] [суботе] [у] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "за %s",
-              past   : "пре %s",
-              s      : "неколико секунди",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "дан",
-              dd     : translator.translate,
-              M      : "месец",
-              MM     : translator.translate,
-              y      : "годину",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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);
+    }
+  };
 
-/***/ },
-/* 115 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-latin (sr)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
 
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['jedan minut', 'jedne minute'],
-              mm: ['minut', 'minute', 'minuta'],
-              h: ['jedan sat', 'jednog sata'],
-              hh: ['sat', 'sata', 'sati'],
-              dd: ['dan', 'dana', 'dana'],
-              MM: ['mesec', 'meseca', 'meseci'],
-              yy: ['godina', 'godine', 'godina']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
-          },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
-              }
-          }
-      };
+  /**
+   * 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) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    if (highlightEdges === undefined) {
+      highlightEdges = true;
+    }
 
-      return moment.lang('sr', {
-          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
-          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
-          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
-          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
-          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[danas u] LT',
-              nextDay: '[sutra u] LT',
+    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
+      this._unselectAll(true);
+    }
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedelju] [u] LT';
-                  case 3:
-                      return '[u] [sredu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[juče u] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[prošle] [nedelje] [u] LT',
-                      '[prošlog] [ponedeljka] [u] LT',
-                      '[prošlog] [utorka] [u] LT',
-                      '[prošle] [srede] [u] LT',
-                      '[prošlog] [četvrtka] [u] LT',
-                      '[prošlog] [petka] [u] LT',
-                      '[prošle] [subote] [u] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "pre %s",
-              s      : "nekoliko sekundi",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "dan",
-              dd     : translator.translate,
-              M      : "mesec",
-              MM     : translator.translate,
-              y      : "godinu",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    if (object.selected == false) {
+      object.select();
+      this._addToSelection(object);
+      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
+        this._selectConnectedEdges(object);
+      }
+    }
+    else {
+      object.unselect();
+      this._removeFromSelection(object);
+    }
 
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-/***/ },
-/* 116 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : swedish (sv)
-  // author : Jens Alm : https://github.com/ulmus
+  /**
+   * 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});
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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});
       }
-  }(function (moment) {
-      return moment.lang('sv', {
-          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
-          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
-          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Idag] LT',
-              nextDay: '[Imorgon] LT',
-              lastDay: '[Igår] LT',
-              nextWeek: 'dddd LT',
-              lastWeek: '[Förra] dddd[en] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "för %s sedan",
-              s : "några sekunder",
-              m : "en minut",
-              mm : "%d minuter",
-              h : "en timme",
-              hh : "%d timmar",
-              d : "en dag",
-              dd : "%d dagar",
-              M : "en månad",
-              MM : "%d månader",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
-                  (b === 1) ? 'a' :
-                  (b === 2) ? 'a' :
-                  (b === 3) ? 'e' : 'e';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
+    }
+  };
 
 
-/***/ },
-/* 117 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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) {
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : tamil (ta)
-  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
       }
-  }(function (moment) {
-      /*var symbolMap = {
-              '1': '௧',
-              '2': '௨',
-              '3': '௩',
-              '4': '௪',
-              '5': '௫',
-              '6': '௬',
-              '7': '௭',
-              '8': '௮',
-              '9': '௯',
-              '0': '௦'
-          },
-          numberMap = {
-              '௧': '1',
-              '௨': '2',
-              '௩': '3',
-              '௪': '4',
-              '௫': '5',
-              '௬': '6',
-              '௭': '7',
-              '௮': '8',
-              '௯': '9',
-              '௦': '0'
-          }; */
+      else {
+        this._unselectAll();
+      }
+    }
+    this.emit("click", this.getSelection());
+    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);
+    }
+    this.emit("doubleClick", this.getSelection());
+  };
+
+
+  /**
+   * 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();
+  };
 
-      return moment.lang('ta', {
-          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
-          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
-          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[இன்று] LT',
-              nextDay : '[நாளை] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[நேற்று] LT',
-              lastWeek : '[கடந்த வாரம்] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s இல்",
-              past : "%s முன்",
-              s : "ஒரு சில விநாடிகள்",
-              m : "ஒரு நிமிடம்",
-              mm : "%d நிமிடங்கள்",
-              h : "ஒரு மணி நேரம்",
-              hh : "%d மணி நேரம்",
-              d : "ஒரு நாள்",
-              dd : "%d நாட்கள்",
-              M : "ஒரு மாதம்",
-              MM : "%d மாதங்கள்",
-              y : "ஒரு வருடம்",
-              yy : "%d ஆண்டுகள்"
-          },
-  /*        preparse: function (string) {
-              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },*/
-          ordinal : function (number) {
-              return number + 'வது';
-          },
 
+  /**
+   * handle the onRelease event. These functions are here for the navigation controls module.
+   *
+    * @private
+   */
+  exports._handleOnRelease = function(pointer) {
 
-  // refer http://ta.wikipedia.org/s/1er1      
+  };
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour >= 6 && hour <= 10) {
-                  return " காலை";
-              } else   if (hour >= 10 && hour <= 14) {
-                  return " நண்பகல்";
-              } else    if (hour >= 14 && hour <= 18) {
-                  return " எற்பாடு";
-              } else   if (hour >= 18 && hour <= 20) {
-                  return " மாலை";
-              } else  if (hour >= 20 && hour <= 24) {
-                  return " இரவு";
-              } else  if (hour >= 0 && hour <= 6) {
-                  return " வைகறை";
-              }
-          },
-          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.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 118 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   *
+   * 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};
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : thai (th)
-  // author : Kridsada Thanabulpong : https://github.com/sirn
+  /**
+   *
+   * retrieve the currently selected nodes
+   * @return {String[]} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedNodes = function() {
+    var idArray = [];
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        idArray.push(nodeId);
+      }
+    }
+    return idArray
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   *
+   * retrieve the currently selected edges
+   * @return {Array} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedEdges = function() {
+    var idArray = [];
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        idArray.push(edgeId);
       }
-  }(function (moment) {
-      return moment.lang('th', {
-          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
-          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
-          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
-          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
-          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
-          longDateFormat : {
-              LT : "H นาฬิกา m นาที",
-              L : "YYYY/MM/DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY เวลา LT",
-              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ก่อนเที่ยง";
-              } else {
-                  return "หลังเที่ยง";
-              }
-          },
-          calendar : {
-              sameDay : '[วันนี้ เวลา] LT',
-              nextDay : '[พรุ่งนี้ เวลา] LT',
-              nextWeek : 'dddd[หน้า เวลา] LT',
-              lastDay : '[เมื่อวานนี้ เวลา] LT',
-              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "อีก %s",
-              past : "%sที่แล้ว",
-              s : "ไม่กี่วินาที",
-              m : "1 นาที",
-              mm : "%d นาที",
-              h : "1 ชั่วโมง",
-              hh : "%d ชั่วโมง",
-              d : "1 วัน",
-              dd : "%d วัน",
-              M : "1 เดือน",
-              MM : "%d เดือน",
-              y : "1 ปี",
-              yy : "%d ปี"
-          }
-      });
-  }));
+    }
+    return idArray;
+  };
 
 
-/***/ },
-/* 119 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * select zero or more nodes
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.setSelection = function(selection) {
+    var i, iMax, id;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Tagalog/Filipino (tl-ph)
-  // author : Dan Hagman
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
       }
-  }(function (moment) {
-      return moment.lang('tl-ph', {
-          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
-          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
-          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
-          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
-          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "MM/D/YYYY",
-              LL : "MMMM D, YYYY",
-              LLL : "MMMM D, YYYY LT",
-              LLLL : "dddd, MMMM DD, YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Ngayon sa] LT",
-              nextDay: '[Bukas sa] LT',
-              nextWeek: 'dddd [sa] LT',
-              lastDay: '[Kahapon sa] LT',
-              lastWeek: 'dddd [huling linggo] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "sa loob ng %s",
-              past : "%s ang nakalipas",
-              s : "ilang segundo",
-              m : "isang minuto",
-              mm : "%d minuto",
-              h : "isang oras",
-              hh : "%d oras",
-              d : "isang araw",
-              dd : "%d araw",
-              M : "isang buwan",
-              MM : "%d buwan",
-              y : "isang taon",
-              yy : "%d taon"
-          },
-          ordinal : function (number) {
-              return number;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      this._selectObject(node,true,true);
+    }
 
+    console.log("setSelection is deprecated. Please use selectNodes instead.")
 
-/***/ },
-/* 120 */
-/***/ function(module, exports, __webpack_require__) {
+    this.redraw();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : turkish (tr)
-  // authors : Erhan Gundogan : https://github.com/erhangundogan,
-  //           Burak Yiğit Kaya: https://github.com/BYK
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+  /**
+   * 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;
 
-      var suffixes = {
-          1: "'inci",
-          5: "'inci",
-          8: "'inci",
-          70: "'inci",
-          80: "'inci",
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-          2: "'nci",
-          7: "'nci",
-          20: "'nci",
-          50: "'nci",
+    // first unselect any selected node
+    this._unselectAll(true);
 
-          3: "'üncü",
-          4: "'üncü",
-          100: "'üncü",
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-          6: "'ncı",
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
+      }
+      this._selectObject(node,true,true,highlightEdges);
+    }
+    this.redraw();
+  };
 
-          9: "'uncu",
-          10: "'uncu",
-          30: "'uncu",
 
-          60: "'ıncı",
-          90: "'ıncı"
-      };
+  /**
+   * 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;
 
-      return moment.lang('tr', {
-          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
-          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
-          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
-          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
-          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[yarın saat] LT',
-              nextWeek : '[haftaya] dddd [saat] LT',
-              lastDay : '[dün] LT',
-              lastWeek : '[geçen hafta] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s önce",
-              s : "birkaç saniye",
-              m : "bir dakika",
-              mm : "%d dakika",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir yıl",
-              yy : "%d yıl"
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "'ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var edge = this.edges[id];
+      if (!edge) {
+        throw new RangeError('Edge with id "' + id + '" not found');
+      }
+      this._selectObject(edge,true,true,highlightEdges);
+    }
+    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];
+        }
+      }
+    }
+  };
 
 
 /***/ },
-/* 121 */
+/* 127 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
-  // author : Abdel Said : https://github.com/abdelsaid
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(39);
+  var Edge = __webpack_require__(38);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * clears the toolbar div element of children
+   *
+   * @private
+   */
+  exports._clearManipulatorBar = function() {
+    while (this.manipulationDiv.hasChildNodes()) {
+      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+    }
+  };
+
+  /**
+   * 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];
       }
-  }(function (moment) {
-      return moment.lang('tzm-latn', {
-          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[asdkh g] LT",
-              nextDay: '[aska g] LT',
-              nextWeek: 'dddd [g] LT',
-              lastDay: '[assant g] LT',
-              lastWeek: 'dddd [g] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dadkh s yan %s",
-              past : "yan %s",
-              s : "imik",
-              m : "minuḍ",
-              mm : "%d minuḍ",
-              h : "saɛa",
-              hh : "%d tassaɛin",
-              d : "ass",
-              dd : "%d ossan",
-              M : "ayowr",
-              MM : "%d iyyirn",
-              y : "asgas",
-              yy : "%d isgasn"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
+
+  /**
+   * Enable or disable edit-mode.
+   *
+   * @private
+   */
+  exports._toggleEditMode = function() {
+    this.editMode = !this.editMode;
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
+    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()
+  };
 
+  /**
+   * 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);
+    }
 
-/***/ },
-/* 122 */
-/***/ function(module, exports, __webpack_require__) {
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+      this.controlNodesActive = false;
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt (tzm)
-  // author : Abdel Said : https://github.com/abdelsaid
+    // restore overloaded functions
+    this._restoreOverloadedFunctions();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('tzm', {
-          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
-              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
-              nextWeek: 'dddd [ⴴ] LT',
-              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
-              lastWeek: 'dddd [ⴴ] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
-              past : "ⵢⴰⵏ %s",
-              s : "ⵉⵎⵉⴽ",
-              m : "ⵎⵉⵏⵓⴺ",
-              mm : "%d ⵎⵉⵏⵓⴺ",
-              h : "ⵙⴰⵄⴰ",
-              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
-              d : "ⴰⵙⵙ",
-              dd : "%d oⵙⵙⴰⵏ",
-              M : "ⴰⵢoⵓⵔ",
-              MM : "%d ⵉⵢⵢⵉⵔⵏ",
-              y : "ⴰⵙⴳⴰⵙ",
-              yy : "%d ⵉⵙⴳⴰⵙⵏ"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    // resume calculation
+    this.freezeSimulation = false;
 
+    // reset global variables
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-/***/ },
-/* 123 */
-/***/ function(module, exports, __webpack_require__) {
+    if (this.editMode == true) {
+      while (this.manipulationDiv.hasChildNodes()) {
+        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+      }
+      // add the icons to the manipulator div
+      this.manipulationDiv.innerHTML = "" +
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+      }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
+      }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : ukrainian (uk)
-  // author : zemlanin : https://github.com/zemlanin
-  // Author : Menelion Elensúle : https://github.com/Oire
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // bind the icons
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
+      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
+      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        var editButton = document.getElementById("network-manipulate-editNode");
+        editButton.onclick = this._editNode.bind(this);
       }
-  }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        var editButton = document.getElementById("network-manipulate-editEdge");
+        editButton.onclick = this._createEditEdgeToolbar.bind(this);
       }
-
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'хвилина_хвилини_хвилин',
-              'hh': 'година_години_годин',
-              'dd': 'день_дні_днів',
-              'MM': 'місяць_місяці_місяців',
-              'yy': 'рік_роки_років'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'хвилина' : 'хвилину';
-          }
-          else if (key === 'h') {
-              return withoutSuffix ? 'година' : 'годину';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
+      if (this._selectionIsEmpty() == false) {
+        var deleteButton = document.getElementById("network-manipulate-delete");
+        deleteButton.onclick = this._deleteSelected.bind(this);
       }
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
+      closeDiv.onclick = this._toggleEditMode.bind(this);
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
-              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
-          },
+      this.boundFunction = this._createManipulatorBar.bind(this);
+      this.on('select', this.boundFunction);
+    }
+    else {
+      this.editModeDiv.innerHTML = "" +
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
+      editModeButton.onclick = this._toggleEditMode.bind(this);
+    }
+  };
 
-          nounCase = (/D[oD]? *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return months[nounCase][m.month()];
-      }
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
-              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
-              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
-          },
+  /**
+   * Create the toolbar for adding Nodes
+   *
+   * @private
+   */
+  exports._createAddNodeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
-              'accusative' :
-              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
-                  'genitive' :
-                  'nominative');
+    // create the toolbar contents
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
-          return weekdays[nounCase][m.day()];
-      }
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-      function processHoursFunction(str) {
-          return function () {
-              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
-          };
-      }
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._addNode.bind(this);
+    this.on('select', this.boundFunction);
+  };
 
-      return moment.lang('uk', {
-          months : monthsCaseReplace,
-          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY р.",
-              LLL : "D MMMM YYYY р., LT",
-              LLLL : "dddd, D MMMM YYYY р., LT"
-          },
-          calendar : {
-              sameDay: processHoursFunction('[Сьогодні '),
-              nextDay: processHoursFunction('[Завтра '),
-              lastDay: processHoursFunction('[Вчора '),
-              nextWeek: processHoursFunction('[У] dddd ['),
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 5:
-                  case 6:
-                      return processHoursFunction('[Минулої] dddd [').call(this);
-                  case 1:
-                  case 2:
-                  case 4:
-                      return processHoursFunction('[Минулого] dddd [').call(this);
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "за %s",
-              past : "%s тому",
-              s : "декілька секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "годину",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "місяць",
-              MM : relativeTimeWithPlural,
-              y : "рік",
-              yy : relativeTimeWithPlural
-          },
 
-          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
+  /**
+   * create the toolbar to connect nodes
+   *
+   * @private
+   */
+  exports._createAddEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this._unselectAll(true);
+    this.freezeSimulation = true;
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "ночі";
-              } else if (hour < 12) {
-                  return "ранку";
-              } else if (hour < 17) {
-                  return "дня";
-              } else {
-                  return "вечора";
-              }
-          },
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-              case 'w':
-              case 'W':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              default:
-                  return number;
-              }
-          },
+    this._unselectAll();
+    this.forceAppendSelection = false;
+    this.blockConnectingEdgeSelection = true;
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-/***/ },
-/* 124 */
-/***/ function(module, exports, __webpack_require__) {
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._handleConnect.bind(this);
+    this.on('select', this.boundFunction);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : uzbek
-  // author : Sardor Muminov : https://github.com/muminoff
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"] = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+    this._handleTouch = this._handleConnect;
+    this._handleOnRelease = this._finishConnect;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('uz', {
-          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
-          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
-          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
-          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
-          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "D MMMM YYYY, dddd LT"
-          },
-          calendar : {
-              sameDay : '[Бугун соат] LT [да]',
-              nextDay : '[Эртага] LT [да]',
-              nextWeek : 'dddd [куни соат] LT [да]',
-              lastDay : '[Кеча соат] LT [да]',
-              lastWeek : '[Утган] dddd [куни соат] LT [да]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "Якин %s ичида",
-              past : "Бир неча %s олдин",
-              s : "фурсат",
-              m : "бир дакика",
-              mm : "%d дакика",
-              h : "бир соат",
-              hh : "%d соат",
-              d : "бир кун",
-              dd : "%d кун",
-              M : "бир ой",
-              MM : "%d ой",
-              y : "бир йил",
-              yy : "%d йил"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // redraw to show the unselect
+    this._redraw();
+  };
 
+  /**
+   * create the toolbar to edit edges
+   *
+   * @private
+   */
+  exports._createEditEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this.controlNodesActive = true;
 
-/***/ },
-/* 125 */
-/***/ function(module, exports, __webpack_require__) {
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : vietnamese (vi)
-  // author : Bang Nguyen : https://github.com/bangnk
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('vi', {
-          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
-          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
-          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
-          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM [năm] YYYY",
-              LLL : "D MMMM [năm] YYYY LT",
-              LLLL : "dddd, D MMMM [năm] YYYY LT",
-              l : "DD/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Hôm nay lúc] LT",
-              nextDay: '[Ngày mai lúc] LT',
-              nextWeek: 'dddd [tuần tới lúc] LT',
-              lastDay: '[Hôm qua lúc] LT',
-              lastWeek: 'dddd [tuần rồi lúc] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "%s tới",
-              past : "%s trước",
-              s : "vài giây",
-              m : "một phút",
-              mm : "%d phút",
-              h : "một giờ",
-              hh : "%d giờ",
-              d : "một ngày",
-              dd : "%d ngày",
-              M : "một tháng",
-              MM : "%d tháng",
-              y : "một năm",
-              yy : "%d năm"
-          },
-          ordinal : function (number) {
-              return number;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
+
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
+
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+    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._handleOnRelease = this._releaseControlNode;
 
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-/***/ },
-/* 126 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chinese
-  // author : suupic : https://github.com/suupic
-  // author : Zeno Zeng : https://github.com/zenozeng
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('zh-cn', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
-          longDateFormat : {
-              LT : "Ah点mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY-MM-DD",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 600) {
-                  return "凌晨";
-              } else if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
-              } else {
-                  return "晚上";
-              }
-          },
-          calendar : {
-              sameDay : function () {
-                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
-              },
-              nextDay : function () {
-                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
-              },
-              lastDay : function () {
-                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
-              },
-              nextWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              lastWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              sameElse : 'LL'
-          },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d":
-              case "D":
-              case "DDD":
-                  return number + "日";
-              case "M":
-                  return number + "月";
-              case "w":
-              case "W":
-                  return number + "周";
-              default:
-                  return number;
-              }
-          },
-          relativeTime : {
-              future : "%s内",
-              past : "%s前",
-              s : "几秒",
-              m : "1分钟",
-              mm : "%d分钟",
-              h : "1小时",
-              hh : "%d小时",
-              d : "1天",
-              dd : "%d天",
-              M : "1个月",
-              MM : "%d个月",
-              y : "1年",
-              yy : "%d年"
-          },
-          week : {
-              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 127 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : traditional chinese (zh-tw)
-  // author : Ben : https://github.com/ben-lin
+  /**
+   * 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();
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  exports._releaseControlNode = function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode != null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
       }
-  }(function (moment) {
-      return moment.lang('zh-tw', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
-          longDateFormat : {
-              LT : "Ah點mm",
-              L : "YYYY年MMMD日",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY年MMMD日",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
-              } else {
-                  return "晚上";
-              }
-          },
-          calendar : {
-              sameDay : '[今天]LT',
-              nextDay : '[明天]LT',
-              nextWeek : '[下]ddddLT',
-              lastDay : '[昨天]LT',
-              lastWeek : '[上]ddddLT',
-              sameElse : 'L'
-          },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d" :
-              case "D" :
-              case "DDD" :
-                  return number + "日";
-              case "M" :
-                  return number + "月";
-              case "w" :
-              case "W" :
-                  return number + "週";
-              default :
-                  return number;
-              }
-          },
-          relativeTime : {
-              future : "%s內",
-              past : "%s前",
-              s : "幾秒",
-              m : "一分鐘",
-              mm : "%d分鐘",
-              h : "一小時",
-              hh : "%d小時",
-              d : "一天",
-              dd : "%d天",
-              M : "一個月",
-              MM : "%d個月",
-              y : "一年",
-              yy : "%d年"
-          }
-      });
-  }));
-
-
-/***/ },
-/* 128 */
-/***/ function(module, exports, __webpack_require__) {
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
+      }
+    }
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
+    }
+    this.freezeSimulation = false;
+    this._redraw();
+  };
 
   /**
-   * Calculate the forces the nodes apply on each other based on a repulsion field.
-   * This field is linearly approximated.
+   * 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._calculateNodeForces = function () {
-    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
+  exports._handleConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 0) {
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._selectObject(node,false);
+          // create a node the temporary line can look at
+          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetNode'].x = node.x;
+          this.sectors['support']['nodes']['targetNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
+          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
 
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
+          // create a temporary edge
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
+          this.edges['connectionEdge'].from = node;
+          this.edges['connectionEdge'].connected = true;
+          this.edges['connectionEdge'].smooth = true;
+          this.edges['connectionEdge'].selected = true;
+          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
+          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
 
-    // approximation constants
-    var a_base = -2 / 3;
-    var b = 4 / 3;
+          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
+          this._handleOnDrag = function(event) {
+            var pointer = this._getPointer(event.gesture.center);
+            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
+            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
+            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+          };
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
+          this.moving = true;
+          this.start();
+        }
+      }
+    }
+  };
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+  exports._finishConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 1) {
 
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
+      // restore the drag function
+      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
+      delete this.cachedFunctions["_handleOnDrag"];
 
-        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
-        var a = a_base / minimumDistance;
-        if (distance < 2 * minimumDistance) {
-          if (distance < 0.5 * minimumDistance) {
-            repulsingForce = 1.0;
-          }
-          else {
-            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+      // remember the edge id
+      var connectFromId = this.edges['connectionEdge'].fromId;
+
+      // remove the temporary nodes and edge
+      delete this.edges['connectionEdge'];
+      delete this.sectors['support']['nodes']['targetNode'];
+      delete this.sectors['support']['nodes']['targetViaNode'];
+
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._createEdge(connectFromId,node.id);
+          this._createManipulatorBar();
+        }
+      }
+      this._unselectAll();
+    }
+  };
+
+
+  /**
+   * 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 {
+          alert(this.constants.labels['addError']);
+          this._createManipulatorBar();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.nodesData.add(defaultData);
+        this._createManipulatorBar();
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
+
+
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.add(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
+
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
+
+  /**
+   * 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.group,
+        shape: node.shape,
+        color: {
+          background:node.color.background,
+          border:node.color.border,
+          highlight: {
+            background:node.color.highlight.background,
+            border:node.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 {
+        alert(this.constants.labels["editError"]);
+      }
+    }
+    else {
+      alert(this.constants.labels["editBoundError"]);
+    }
+  };
 
-          // amplify the repulsion for clusters.
-          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
-          repulsingForce = repulsingForce / distance;
 
-          fx = dx * repulsingForce;
-          fy = dy * repulsingForce;
 
-          node1.fx -= fx;
-          node1.fy -= fy;
-          node2.fx += fx;
-          node2.fy += fy;
+
+  /**
+   * 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 {
+            alert(this.constants.labels["deleteError"])
+          }
+        }
+        else {
+          this.edgesData.remove(selectedEdges);
+          this.nodesData.remove(selectedNodes);
+          this._unselectAll();
+          this.moving = true;
+          this.start();
         }
       }
+      else {
+        alert(this.constants.labels["deleteClusterError"]);
+      }
     }
   };
 
 
 /***/ },
-/* 129 */
+/* 128 */
 /***/ function(module, exports, __webpack_require__) {
 
+  exports._cleanNavigation = function() {
+    // clean up previous navigation items
+    var wrapper = document.getElementById('network-navigation_wrapper');
+    if (wrapper != null) {
+      this.containerElement.removeChild(wrapper);
+    }
+    document.onmouseup = null;
+  };
+
   /**
-   * Calculate the forces the nodes apply on eachother based on a repulsion field.
-   * This field is linearly approximated.
+   * 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._calculateNodeForces = function () {
-    var dx, dy, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
+  exports._loadNavigationElements = function() {
+    this._cleanNavigation();
 
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
+    this.navigationDivs = {};
+    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
+    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
-    // approximation constants
-    var b = 5;
-    var a_base = 0.5 * -b;
+    this.navigationDivs['wrapper'] = document.createElement('div');
+    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
 
+    for (var i = 0; i < navigationDivs.length; i++) {
+      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
+      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+    }
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
-    var a = a_base / minimumDistance;
+    document.onmouseup = this._stopMovement.bind(this);
+  };
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
+  /**
+   * this stops all movement induced by the navigation buttons
+   *
+   * @private
+   */
+  exports._stopMovement = function() {
+    this._xStopMoving();
+    this._yStopMoving();
+    this._stopZoom();
+  };
 
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        if (node1.level == node2.level) {
 
-          dx = node2.x - node1.x;
-          dy = node2.y - node1.y;
-          distance = Math.sqrt(dx * dx + dy * dy);
+  /**
+   * stops the actions performed by page up and down etc.
+   *
+   * @param event
+   * @private
+   */
+  exports._preventDefault = function(event) {
+    if (event !== undefined) {
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false;
+      }
+    }
+  };
 
 
-          if (distance < 2 * minimumDistance) {
-            repulsingForce = a * distance + b;
-            var c = 0.05;
-            var d = 2 * minimumDistance * 2 * c;
-            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className += " active";
+    }
+  };
 
-            // normalize force with
-            if (distance == 0) {
-              distance = 0.01;
-            }
-            else {
-              repulsingForce = repulsingForce / distance;
-            }
-            fx = dx * repulsingForce;
-            fy = dy * repulsingForce;
 
-            node1.fx -= fx;
-            node1.fy -= fy;
-            node2.fx += fx;
-            node2.fy += fy;
-          }
-        }
-      }
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['down'].className += " active";
     }
   };
 
 
   /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
+   * move the screen left
    * @private
    */
-  exports._calculateHierarchicalSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+  exports._moveLeft = function(event) {
+    this.xIncrement = this.constants.keyboard.speed.x;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className += " active";
+    }
+  };
 
-    // 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.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['right'].className += " active";
+    }
+  };
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
 
-            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className += " active";
+    }
+  };
 
-            // 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;
+  /**
+   * Zoom out
+   * @private
+   */
+  exports._zoomOut = function() {
+    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomOut'].className += " active";
+    }
+  };
 
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-            edge.from.fx += fx;
-            edge.from.fy += fy;
 
+  /**
+   * Stop zooming and unhighlight the zoom controls
+   * @private
+   */
+  exports._stopZoom = function() {
+    this.zoomIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
+      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
+    }
+  };
 
-            var factor = 5;
-            if (distance > edgeLength) {
-              factor = 25;
-            }
 
-            if (edge.from.level > edge.to.level) {
-              edge.to.fx -= factor*fx;
-              edge.to.fy -= factor*fy;
-            }
-            else if (edge.from.level < edge.to.level) {
-              edge.from.fx += factor*fx;
-              edge.from.fy += factor*fy;
-            }
-          }
-        }
-      }
+  /**
+   * Stop moving in the Y direction and unHighlight the up and down
+   * @private
+   */
+  exports._yStopMoving = function() {
+    this.yIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
+      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
     }
   };
 
-/***/ },
-/* 130 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
-   * The Barnes Hut method is used to speed up this N-body simulation.
-   *
+   * Stop moving in the X direction and unHighlight left and right.
    * @private
    */
-  exports._calculateNodeForces = function() {
-    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
-      var node;
-      var nodes = this.calculationNodes;
-      var nodeIndices = this.calculationNodeIndices;
-      var nodeCount = nodeIndices.length;
+  exports._xStopMoving = function() {
+    this.xIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
+      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
+    }
+  };
 
-      this._formBarnesHutTree(nodes,nodeIndices);
 
-      var barnesHutTree = this.barnesHutTree;
+/***/ },
+/* 129 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // place the nodes one by one recursively
-      for (var i = 0; i < nodeCount; i++) {
-        node = nodes[nodeIndices[i]];
-        // starting with root is irrelevant, it never passes the BarnesHut condition
-        this._getForceContribution(barnesHutTree.root.children.NW,node);
-        this._getForceContribution(barnesHutTree.root.children.NE,node);
-        this._getForceContribution(barnesHutTree.root.children.SW,node);
-        this._getForceContribution(barnesHutTree.root.children.SE,node);
+  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;
+        }
       }
     }
   };
 
-
   /**
-   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
-   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   * This is the main function to layout the nodes in a hierarchical way.
+   * It checks if the node details are supplied correctly
    *
-   * @param parentBranch
-   * @param node
    * @private
    */
-  exports._getForceContribution = function(parentBranch,node) {
-    // we get no force contribution from an empty region
-    if (parentBranch.childrenCount > 0) {
-      var dx,dy,distance;
-
-      // get the distance from the center of mass to the node.
-      dx = parentBranch.centerOfMass.x - node.x;
-      dy = parentBranch.centerOfMass.y - node.y;
-      distance = Math.sqrt(dx * dx + dy * dy);
+  exports._setupHierarchicalLayout = function() {
+    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
+        this.constants.hierarchicalLayout.levelSeparation *= -1;
+      }
+      else {
+        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
+      }
 
-      // BarnesHut condition
-      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
-      // calcSize = 1/s --> d * 1/s > 1/theta = passed
-      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
-        // duplicate code to reduce function calls to speed up program
-        if (distance == 0) {
-          distance = 0.1*Math.random();
-          dx = distance;
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "LR") {
+        if (this.constants.smoothCurves.enabled == true) {
+          this.constants.smoothCurves.type = "vertical";
         }
-        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-        var fx = dx * gravityForce;
-        var fy = dy * gravityForce;
-        node.fx += fx;
-        node.fy += fy;
       }
       else {
-        // Did not pass the condition, go into children if available
-        if (parentBranch.childrenCount == 4) {
-          this._getForceContribution(parentBranch.children.NW,node);
-          this._getForceContribution(parentBranch.children.NE,node);
-          this._getForceContribution(parentBranch.children.SW,node);
-          this._getForceContribution(parentBranch.children.SE,node);
+        if (this.constants.smoothCurves.enabled == true) {
+          this.constants.smoothCurves.type = "horizontal";
         }
-        else { // parentBranch must have only one node, if it was empty we wouldnt be here
-          if (parentBranch.children.data.id != node.id) { // if it is not self
-            // duplicate code to reduce function calls to speed up program
-            if (distance == 0) {
-              distance = 0.5*Math.random();
-              dx = distance;
-            }
-            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-            var fx = dx * gravityForce;
-            var fy = dy * gravityForce;
-            node.fx += fx;
-            node.fy += fy;
+      }
+      // 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;
+          }
+        }
+      }
+
+      // if the user defined some levels but not all, alert and run without hierarchical layout
+      if (undefinedLevel == true && definedLevel == true) {
+        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
+        this.zoomExtent(true,this.constants.clustering.enabled);
+        if (!this.constants.clustering.enabled) {
+          this.start();
+        }
+      }
+      else {
+        // setup the system to use hierarchical method.
+        this._changeConstants();
+
+        // define levels if undefined by the users. Based on hubsize
+        if (undefinedLevel == true) {
+          this._determineLevels(hubsize);
         }
+        // check the distribution of the nodes per level.
+        var distribution = this._getDistribution();
+
+        // place the nodes on the canvas. This also stablilizes the system.
+        this._placeNodesByHierarchy(distribution);
+
+        // start the simulation.
+        this.start();
       }
     }
   };
 
+
   /**
-   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   * This function places the nodes on the canvas based on the hierarchial distribution.
    *
-   * @param nodes
-   * @param nodeIndices
+   * @param {Object} distribution | obtained by the function this._getDistribution()
    * @private
    */
-  exports._formBarnesHutTree = function(nodes,nodeIndices) {
-    var node;
-    var nodeCount = nodeIndices.length;
+  exports._placeNodesByHierarchy = function(distribution) {
+    var nodeId, node;
 
-    var minX = Number.MAX_VALUE,
-      minY = Number.MAX_VALUE,
-      maxX =-Number.MAX_VALUE,
-      maxY =-Number.MAX_VALUE;
+    // start placing all the level 0 nodes first. Then recursively position their branches.
+    for (nodeId in distribution[0].nodes) {
+      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
+        node = distribution[0].nodes[nodeId];
+        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+          if (node.xFixed) {
+            node.x = distribution[0].minPos;
+            node.xFixed = false;
 
-    // get the range of the nodes
-    for (var i = 0; i < nodeCount; i++) {
-      var x = nodes[nodeIndices[i]].x;
-      var y = nodes[nodeIndices[i]].y;
-      if (x < minX) { minX = x; }
-      if (x > maxX) { maxX = x; }
-      if (y < minY) { minY = y; }
-      if (y > maxY) { maxY = y; }
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        else {
+          if (node.yFixed) {
+            node.y = distribution[0].minPos;
+            node.yFixed = false;
+
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
+      }
     }
-    // make the range a square
-    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
-    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
-    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
 
+    // stabilize the system after positioning. This function calls zoomExtent.
+    this._stabilize();
+  };
 
-    var minimumTreeSize = 1e-5;
-    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
-    var halfRootSize = 0.5 * rootSize;
-    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
 
-    // construct the barnesHutTree
-    var barnesHutTree = {
-      root:{
-        centerOfMass: {x:0, y:0},
-        mass:0,
-        range: {
-          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
-          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
-        },
-        size: rootSize,
-        calcSize: 1 / rootSize,
-        children: { data:null},
-        maxWidth: 0,
-        level: 0,
-        childrenCount: 4
+  /**
+   * This function get the distribution of levels based on hubsize
+   *
+   * @returns {Object}
+   * @private
+   */
+  exports._getDistribution = function() {
+    var distribution = {};
+    var nodeId, node, level;
+
+    // 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.hasOwnProperty(node.level)) {
+          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+        }
+        distribution[node.level].amount += 1;
+        distribution[node.level].nodes[node.id] = node;
+      }
+    }
+
+    // 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._splitBranch(barnesHutTree.root);
+    }
 
-    // place the nodes one by one recursively
-    for (i = 0; i < nodeCount; i++) {
-      node = nodes[nodeIndices[i]];
-      this._placeInTree(barnesHutTree.root,node);
+    // 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);
+      }
     }
 
-    // make global
-    this.barnesHutTree = barnesHutTree
+    return distribution;
   };
 
 
   /**
-   * this updates the mass of a branch. this is increased by adding a node.
+   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
    *
-   * @param parentBranch
-   * @param node
+   * @param hubsize
    * @private
    */
-  exports._updateBranchMass = function(parentBranch, node) {
-    var totalMass = parentBranch.mass + node.mass;
-    var totalMassInv = 1/totalMass;
-
-    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
-    parentBranch.centerOfMass.x *= totalMassInv;
-
-    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
-    parentBranch.centerOfMass.y *= totalMassInv;
+  exports._determineLevels = function(hubsize) {
+    var nodeId, node;
 
-    parentBranch.mass = totalMass;
-    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
-    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+    // determine hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.edges.length == hubsize) {
+          node.level = 0;
+        }
+      }
+    }
 
+    // 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);
+        }
+      }
+    }
   };
 
 
   /**
-   * determine in which branch the node will be placed.
+   * 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.
    *
-   * @param parentBranch
-   * @param node
-   * @param skipMassUpdate
    * @private
    */
-  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
-    if (skipMassUpdate != true || skipMassUpdate === undefined) {
-      // update the mass of the branch.
-      this._updateBranchMass(parentBranch,node);
+  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();
+  };
 
-    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
-        this._placeInRegion(parentBranch,node,"NW");
+
+  /**
+   * 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 { // in SW
-        this._placeInRegion(parentBranch,node,"SW");
+      else {
+        childNode = edges[i].to;
       }
-    }
-    else { // in NE or SE
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
-        this._placeInRegion(parentBranch,node,"NE");
+
+      // 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 { // in SE
-        this._placeInRegion(parentBranch,node,"SE");
+      else {
+        if (childNode.yFixed && childNode.level > parentLevel) {
+          childNode.yFixed = false;
+          childNode.y = distribution[childNode.level].minPos;
+          nodeMoved = true;
+        }
+      }
+
+      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);
+        }
       }
     }
   };
 
 
   /**
-   * actually place the node in a region (or branch)
+   * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
    *
-   * @param parentBranch
-   * @param node
-   * @param region
+   * @param level
+   * @param edges
+   * @param parentId
    * @private
    */
-  exports._placeInRegion = function(parentBranch,node,region) {
-    switch (parentBranch.children[region].childrenCount) {
-      case 0: // place node here
-        parentBranch.children[region].children.data = node;
-        parentBranch.children[region].childrenCount = 1;
-        this._updateBranchMass(parentBranch.children[region],node);
-        break;
-      case 1: // convert into children
-        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
-        // we move one node a pixel and we do not put it in the tree.
-        if (parentBranch.children[region].children.data.x == node.x &&
-            parentBranch.children[region].children.data.y == node.y) {
-          node.x += Math.random();
-          node.y += Math.random();
-        }
-        else {
-          this._splitBranch(parentBranch.children[region]);
-          this._placeInTree(parentBranch.children[region],node);
+  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 (edges.length > 1) {
+          this._setLevel(level+1, childNode.edges, childNode.id);
         }
-        break;
-      case 4: // place in branch
-        this._placeInTree(parentBranch.children[region],node);
-        break;
+      }
     }
   };
 
 
   /**
-   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
-   * after the split is complete.
+   * Unfix nodes
    *
-   * @param parentBranch
    * @private
    */
-  exports._splitBranch = function(parentBranch) {
-    // if the branch is shaded with a node, replace the node in the new subset.
-    var containedNode = null;
-    if (parentBranch.childrenCount == 1) {
-      containedNode = parentBranch.children.data;
-      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
-    }
-    parentBranch.childrenCount = 4;
-    parentBranch.children.data = null;
-    this._insertRegion(parentBranch,"NW");
-    this._insertRegion(parentBranch,"NE");
-    this._insertRegion(parentBranch,"SW");
-    this._insertRegion(parentBranch,"SE");
-
-    if (containedNode != null) {
-      this._placeInTree(parentBranch,containedNode);
+  exports._restoreNodes = function() {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        this.nodes[nodeId].xFixed = false;
+        this.nodes[nodeId].yFixed = false;
+      }
     }
   };
 
 
+/***/ },
+/* 130 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * This function subdivides the region into four new segments.
-   * Specifically, this inserts a single new segment.
-   * It fills the children section of the parentBranch
-   *
-   * @param parentBranch
-   * @param region
-   * @param parentRange
-   * @private
+   * Canvas shapes used by Network
    */
-  exports._insertRegion = function(parentBranch, region) {
-    var minX,maxX,minY,maxY;
-    var childSize = 0.5 * parentBranch.size;
-    switch (region) {
-      case "NW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "NE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "SW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-      case "SE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-    }
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
 
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+      this.beginPath();
+      this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
 
-    parentBranch.children[region] = {
-      centerOfMass:{x:0,y:0},
-      mass:0,
-      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
-      size: 0.5 * parentBranch.size,
-      calcSize: 2 * parentBranch.calcSize,
-      children: {data:null},
-      maxWidth: 0,
-      level: parentBranch.level+1,
-      childrenCount: 0
+    /**
+     * 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();
 
-  /**
-   * This function is for debugging purposed, it draws the tree.
-   *
-   * @param ctx
-   * @param color
-   * @private
-   */
-  exports._drawTree = function(ctx,color) {
-    if (this.barnesHutTree !== undefined) {
+      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
 
-      ctx.lineWidth = 1;
+      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();
+    };
 
-      this._drawBranch(this.barnesHutTree.root,ctx,color);
-    }
-  };
+    /**
+     * 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 function is for debugging purposes. It draws the branches recursively.
-   *
-   * @param branch
-   * @param ctx
-   * @param color
-   * @private
-   */
-  exports._drawBranch = function(branch,ctx,color) {
-    if (color === undefined) {
-      color = "#FF0000";
-    }
+      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();
+    };
 
-    if (branch.childrenCount == 4) {
-      this._drawBranch(branch.children.NW,ctx);
-      this._drawBranch(branch.children.NE,ctx);
-      this._drawBranch(branch.children.SE,ctx);
-      this._drawBranch(branch.children.SW,ctx);
-    }
-    ctx.strokeStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.minY);
-    ctx.stroke();
+    /**
+     * 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();
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.maxY);
-    ctx.stroke();
+      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)
+        );
+      }
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.maxY);
-    ctx.stroke();
+      this.closePath();
+    };
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.minY);
-    ctx.stroke();
+    /**
+     * 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);
+    };
 
-    /*
-     if (branch.mass > 0) {
-     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
-     ctx.stroke();
-     }
+    /**
+     * 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;
+      }
+    };
+
+    // TODO: add diamond shape
+  }
 
 
 /***/ }
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 7848d8e0..91e76026 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -186,7 +186,7 @@ function Network (container, data, options) {
       roundness: 0.5
     },
     dynamicSmoothCurves: true,
-    maxVelocity:  10,
+    maxVelocity:  30,
     minVelocity:  0.1,   // px/s
     stabilizationIterations: 1000,  // maximum number of iteration to stabilize
     labels:{

From e3068abf788a9c771eb43d1dbc922a124fcdaebd Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Fri, 11 Jul 2014 16:58:17 +0200
Subject: [PATCH 4/6] fixed dot radius bug per #208

---
 dist/vis.js         | 28494 +++++++++++++++++++++---------------------
 lib/network/Node.js |     2 +-
 2 files changed, 14248 insertions(+), 14248 deletions(-)

diff --git a/dist/vis.js b/dist/vis.js
index 0b7be4d4..1393d9dc 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -123,12 +123,12 @@ return /******/ (function(modules) { // webpackBootstrap
   // Network
   exports.Network = __webpack_require__(37);
   exports.network = {
-    Edge: __webpack_require__(38),
+    Edge: __webpack_require__(43),
     Groups: __webpack_require__(40),
     Images: __webpack_require__(41),
-    Node: __webpack_require__(39),
-    Popup: __webpack_require__(42),
-    dotparser: __webpack_require__(43)
+    Node: __webpack_require__(42),
+    Popup: __webpack_require__(44),
+    dotparser: __webpack_require__(39)
   };
 
   // Deprecated since v3.0.0
@@ -5490,154 +5490,154 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ function(module, exports, __webpack_require__) {
 
   var map = {
-  	"./ar": 46,
-  	"./ar-ma": 44,
-  	"./ar-ma.js": 44,
-  	"./ar-sa": 45,
-  	"./ar-sa.js": 45,
-  	"./ar.js": 46,
-  	"./az": 47,
-  	"./az.js": 47,
-  	"./bg": 48,
-  	"./bg.js": 48,
-  	"./bn": 49,
-  	"./bn.js": 49,
-  	"./br": 50,
-  	"./br.js": 50,
-  	"./bs": 51,
-  	"./bs.js": 51,
-  	"./ca": 52,
-  	"./ca.js": 52,
-  	"./cs": 53,
-  	"./cs.js": 53,
-  	"./cv": 54,
-  	"./cv.js": 54,
-  	"./cy": 55,
-  	"./cy.js": 55,
-  	"./da": 56,
-  	"./da.js": 56,
-  	"./de": 58,
-  	"./de-at": 57,
-  	"./de-at.js": 57,
-  	"./de.js": 58,
-  	"./el": 59,
-  	"./el.js": 59,
-  	"./en-au": 60,
-  	"./en-au.js": 60,
-  	"./en-ca": 61,
-  	"./en-ca.js": 61,
-  	"./en-gb": 62,
-  	"./en-gb.js": 62,
-  	"./eo": 63,
-  	"./eo.js": 63,
-  	"./es": 64,
-  	"./es.js": 64,
-  	"./et": 65,
-  	"./et.js": 65,
-  	"./eu": 66,
-  	"./eu.js": 66,
-  	"./fa": 67,
-  	"./fa.js": 67,
-  	"./fi": 68,
-  	"./fi.js": 68,
-  	"./fo": 69,
-  	"./fo.js": 69,
-  	"./fr": 71,
-  	"./fr-ca": 70,
-  	"./fr-ca.js": 70,
-  	"./fr.js": 71,
-  	"./gl": 72,
-  	"./gl.js": 72,
-  	"./he": 73,
-  	"./he.js": 73,
-  	"./hi": 74,
-  	"./hi.js": 74,
-  	"./hr": 75,
-  	"./hr.js": 75,
-  	"./hu": 76,
-  	"./hu.js": 76,
-  	"./hy-am": 77,
-  	"./hy-am.js": 77,
-  	"./id": 78,
-  	"./id.js": 78,
-  	"./is": 79,
-  	"./is.js": 79,
-  	"./it": 80,
-  	"./it.js": 80,
-  	"./ja": 81,
-  	"./ja.js": 81,
-  	"./ka": 82,
-  	"./ka.js": 82,
-  	"./km": 83,
-  	"./km.js": 83,
-  	"./ko": 84,
-  	"./ko.js": 84,
-  	"./lb": 85,
-  	"./lb.js": 85,
-  	"./lt": 86,
-  	"./lt.js": 86,
-  	"./lv": 87,
-  	"./lv.js": 87,
-  	"./mk": 88,
-  	"./mk.js": 88,
-  	"./ml": 89,
-  	"./ml.js": 89,
-  	"./mr": 90,
-  	"./mr.js": 90,
-  	"./ms-my": 91,
-  	"./ms-my.js": 91,
-  	"./nb": 92,
-  	"./nb.js": 92,
-  	"./ne": 93,
-  	"./ne.js": 93,
-  	"./nl": 94,
-  	"./nl.js": 94,
-  	"./nn": 95,
-  	"./nn.js": 95,
-  	"./pl": 96,
-  	"./pl.js": 96,
-  	"./pt": 98,
-  	"./pt-br": 97,
-  	"./pt-br.js": 97,
-  	"./pt.js": 98,
-  	"./ro": 99,
-  	"./ro.js": 99,
-  	"./ru": 100,
-  	"./ru.js": 100,
-  	"./sk": 101,
-  	"./sk.js": 101,
-  	"./sl": 102,
-  	"./sl.js": 102,
-  	"./sq": 103,
-  	"./sq.js": 103,
-  	"./sr": 105,
-  	"./sr-cyrl": 104,
-  	"./sr-cyrl.js": 104,
-  	"./sr.js": 105,
-  	"./sv": 106,
-  	"./sv.js": 106,
-  	"./ta": 107,
-  	"./ta.js": 107,
-  	"./th": 108,
-  	"./th.js": 108,
-  	"./tl-ph": 109,
-  	"./tl-ph.js": 109,
-  	"./tr": 110,
-  	"./tr.js": 110,
-  	"./tzm": 112,
-  	"./tzm-latn": 111,
-  	"./tzm-latn.js": 111,
-  	"./tzm.js": 112,
-  	"./uk": 113,
-  	"./uk.js": 113,
-  	"./uz": 114,
-  	"./uz.js": 114,
-  	"./vi": 115,
-  	"./vi.js": 115,
-  	"./zh-cn": 116,
-  	"./zh-cn.js": 116,
-  	"./zh-tw": 117,
-  	"./zh-tw.js": 117
+  	"./ar": 59,
+  	"./ar-ma": 57,
+  	"./ar-ma.js": 57,
+  	"./ar-sa": 58,
+  	"./ar-sa.js": 58,
+  	"./ar.js": 59,
+  	"./az": 60,
+  	"./az.js": 60,
+  	"./bg": 61,
+  	"./bg.js": 61,
+  	"./bn": 62,
+  	"./bn.js": 62,
+  	"./br": 63,
+  	"./br.js": 63,
+  	"./bs": 64,
+  	"./bs.js": 64,
+  	"./ca": 65,
+  	"./ca.js": 65,
+  	"./cs": 66,
+  	"./cs.js": 66,
+  	"./cv": 67,
+  	"./cv.js": 67,
+  	"./cy": 68,
+  	"./cy.js": 68,
+  	"./da": 69,
+  	"./da.js": 69,
+  	"./de": 71,
+  	"./de-at": 70,
+  	"./de-at.js": 70,
+  	"./de.js": 71,
+  	"./el": 72,
+  	"./el.js": 72,
+  	"./en-au": 73,
+  	"./en-au.js": 73,
+  	"./en-ca": 74,
+  	"./en-ca.js": 74,
+  	"./en-gb": 75,
+  	"./en-gb.js": 75,
+  	"./eo": 76,
+  	"./eo.js": 76,
+  	"./es": 77,
+  	"./es.js": 77,
+  	"./et": 78,
+  	"./et.js": 78,
+  	"./eu": 79,
+  	"./eu.js": 79,
+  	"./fa": 80,
+  	"./fa.js": 80,
+  	"./fi": 81,
+  	"./fi.js": 81,
+  	"./fo": 82,
+  	"./fo.js": 82,
+  	"./fr": 84,
+  	"./fr-ca": 83,
+  	"./fr-ca.js": 83,
+  	"./fr.js": 84,
+  	"./gl": 85,
+  	"./gl.js": 85,
+  	"./he": 86,
+  	"./he.js": 86,
+  	"./hi": 87,
+  	"./hi.js": 87,
+  	"./hr": 88,
+  	"./hr.js": 88,
+  	"./hu": 89,
+  	"./hu.js": 89,
+  	"./hy-am": 90,
+  	"./hy-am.js": 90,
+  	"./id": 91,
+  	"./id.js": 91,
+  	"./is": 92,
+  	"./is.js": 92,
+  	"./it": 93,
+  	"./it.js": 93,
+  	"./ja": 94,
+  	"./ja.js": 94,
+  	"./ka": 95,
+  	"./ka.js": 95,
+  	"./km": 96,
+  	"./km.js": 96,
+  	"./ko": 97,
+  	"./ko.js": 97,
+  	"./lb": 98,
+  	"./lb.js": 98,
+  	"./lt": 99,
+  	"./lt.js": 99,
+  	"./lv": 100,
+  	"./lv.js": 100,
+  	"./mk": 101,
+  	"./mk.js": 101,
+  	"./ml": 102,
+  	"./ml.js": 102,
+  	"./mr": 103,
+  	"./mr.js": 103,
+  	"./ms-my": 104,
+  	"./ms-my.js": 104,
+  	"./nb": 105,
+  	"./nb.js": 105,
+  	"./ne": 106,
+  	"./ne.js": 106,
+  	"./nl": 107,
+  	"./nl.js": 107,
+  	"./nn": 108,
+  	"./nn.js": 108,
+  	"./pl": 109,
+  	"./pl.js": 109,
+  	"./pt": 111,
+  	"./pt-br": 110,
+  	"./pt-br.js": 110,
+  	"./pt.js": 111,
+  	"./ro": 112,
+  	"./ro.js": 112,
+  	"./ru": 113,
+  	"./ru.js": 113,
+  	"./sk": 114,
+  	"./sk.js": 114,
+  	"./sl": 115,
+  	"./sl.js": 115,
+  	"./sq": 116,
+  	"./sq.js": 116,
+  	"./sr": 118,
+  	"./sr-cyrl": 117,
+  	"./sr-cyrl.js": 117,
+  	"./sr.js": 118,
+  	"./sv": 119,
+  	"./sv.js": 119,
+  	"./ta": 120,
+  	"./ta.js": 120,
+  	"./th": 121,
+  	"./th.js": 121,
+  	"./tl-ph": 122,
+  	"./tl-ph.js": 122,
+  	"./tr": 123,
+  	"./tr.js": 123,
+  	"./tzm": 125,
+  	"./tzm-latn": 124,
+  	"./tzm-latn.js": 124,
+  	"./tzm.js": 125,
+  	"./uk": 126,
+  	"./uk.js": 126,
+  	"./uz": 127,
+  	"./uz.js": 127,
+  	"./vi": 128,
+  	"./vi.js": 128,
+  	"./zh-cn": 129,
+  	"./zh-cn.js": 129,
+  	"./zh-tw": 130,
+  	"./zh-tw.js": 130
   };
   function webpackContext(req) {
   	return __webpack_require__(webpackContextResolve(req));
@@ -19077,20 +19077,20 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(3);
-  var mousetrap = __webpack_require__(118);
+  var mousetrap = __webpack_require__(38);
   var util = __webpack_require__(1);
   var DataSet = __webpack_require__(9);
   var DataView = __webpack_require__(10);
-  var dotparser = __webpack_require__(43);
+  var dotparser = __webpack_require__(39);
   var Groups = __webpack_require__(40);
   var Images = __webpack_require__(41);
-  var Node = __webpack_require__(39);
-  var Edge = __webpack_require__(38);
-  var Popup = __webpack_require__(42);
-  var MixinLoader = __webpack_require__(119);
+  var Node = __webpack_require__(42);
+  var Edge = __webpack_require__(43);
+  var Popup = __webpack_require__(44);
+  var MixinLoader = __webpack_require__(45);
 
   // Load custom shapes into CanvasRenderingContext2D
-  __webpack_require__(130);
+  __webpack_require__(56);
 
   /**
    * @constructor Network
@@ -21425,16125 +21425,16125 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 38 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(39);
-
   /**
-   * @class Edge
+   * Copyright 2012 Craig Campbell
    *
-   * A edge connects two nodes
-   * @param {Object} properties     Object with properties. Must contain
-   *                                At least properties from and to.
-   *                                Available properties: from (number),
-   *                                to (number), label (string, color (string),
-   *                                width (number), style (string),
-   *                                length (number), title (string)
-   * @param {Network} network       A Network object, used to find and edge to
-   *                                nodes.
-   * @param {Object} constants      An object with default values for
-   *                                example for the color
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   * http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Mousetrap is a simple keyboard shortcut library for Javascript with
+   * no external dependencies
+   *
+   * @version 1.1.2
+   * @url craig.is/killing/mice
    */
-  function Edge (properties, network, constants) {
-    if (!network) {
-      throw "No network provided";
-    }
-    this.network = network;
-
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
-
-    // initialize variables
-    this.id     = undefined;
-    this.fromId = undefined;
-    this.toId   = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
-    this.hoverWidth = constants.edges.hoverWidth;
-    this.value  = undefined;
-    this.length = constants.physics.springLength;
-    this.customLength = false;
-    this.selected = false;
-    this.hover = false;
-    this.smoothCurves = constants.smoothCurves;
-    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
-    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
-    this.inheritColor = constants.edges.inheritColor;
 
-    this.from = null;   // a node
-    this.to = null;     // a node
-    this.via = null;    // a temp node
+    /**
+     * mapping of special keycodes to their corresponding keys
+     *
+     * everything in this dictionary cannot use keypress events
+     * so it has to be here to map to the correct keycodes for
+     * keyup/keydown events
+     *
+     * @type {Object}
+     */
+    var _MAP = {
+            8: 'backspace',
+            9: 'tab',
+            13: 'enter',
+            16: 'shift',
+            17: 'ctrl',
+            18: 'alt',
+            20: 'capslock',
+            27: 'esc',
+            32: 'space',
+            33: 'pageup',
+            34: 'pagedown',
+            35: 'end',
+            36: 'home',
+            37: 'left',
+            38: 'up',
+            39: 'right',
+            40: 'down',
+            45: 'ins',
+            46: 'del',
+            91: 'meta',
+            93: 'meta',
+            224: 'meta'
+        },
 
-    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
-    // by storing the original information we can revert to the original connection when the cluser is opened.
-    this.originalFromId = [];
-    this.originalToId = [];
+        /**
+         * mapping for special characters so they can support
+         *
+         * this dictionary is only used incase you want to bind a
+         * keyup or keydown event to one of these keys
+         *
+         * @type {Object}
+         */
+        _KEYCODE_MAP = {
+            106: '*',
+            107: '+',
+            109: '-',
+            110: '.',
+            111 : '/',
+            186: ';',
+            187: '=',
+            188: ',',
+            189: '-',
+            190: '.',
+            191: '/',
+            192: '`',
+            219: '[',
+            220: '\\',
+            221: ']',
+            222: '\''
+        },
 
-    this.connected = false;
+        /**
+         * this is a mapping of keys that require shift on a US keypad
+         * back to the non shift equivelents
+         *
+         * this is so you can use keyup events with these keys
+         *
+         * note that this will only work reliably on US keyboards
+         *
+         * @type {Object}
+         */
+        _SHIFT_MAP = {
+            '~': '`',
+            '!': '1',
+            '@': '2',
+            '#': '3',
+            '$': '4',
+            '%': '5',
+            '^': '6',
+            '&': '7',
+            '*': '8',
+            '(': '9',
+            ')': '0',
+            '_': '-',
+            '+': '=',
+            ':': ';',
+            '\"': '\'',
+            '<': ',',
+            '>': '.',
+            '?': '/',
+            '|': '\\'
+        },
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
+        /**
+         * this is a list of special strings you can use to map
+         * to modifier keys when you specify your keyboard shortcuts
+         *
+         * @type {Object}
+         */
+        _SPECIAL_ALIASES = {
+            'option': 'alt',
+            'command': 'meta',
+            'return': 'enter',
+            'escape': 'esc'
+        },
 
-    this.color       = {color:constants.edges.color.color,
-                        highlight:constants.edges.color.highlight,
-                        hover:constants.edges.color.hover};
-    this.widthFixed  = false;
-    this.lengthFixed = false;
+        /**
+         * variable to store the flipped version of _MAP from above
+         * needed to check if we should use keypress or not when no action
+         * is specified
+         *
+         * @type {Object|undefined}
+         */
+        _REVERSE_MAP,
 
-    this.setProperties(properties, constants);
+        /**
+         * a list of all the callbacks setup via Mousetrap.bind()
+         *
+         * @type {Object}
+         */
+        _callbacks = {},
 
-    this.controlNodesEnabled = false;
-    this.controlNodes = {from:null, to:null, positions:{}};
-    this.connectedNode = null;
-  }
+        /**
+         * direct map of string combinations to callbacks used for trigger()
+         *
+         * @type {Object}
+         */
+        _direct_map = {},
 
-  /**
-   * Set or overwrite properties for the edge
-   * @param {Object} properties  an object with properties
-   * @param {Object} constants   and object with default, global properties
-   */
-  Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
+        /**
+         * keeps track of what level each sequence is at since multiple
+         * sequences can start out with the same sequence
+         *
+         * @type {Object}
+         */
+        _sequence_levels = {},
 
-    if (properties.from !== undefined)           {this.fromId = properties.from;}
-    if (properties.to !== undefined)             {this.toId = properties.to;}
+        /**
+         * variable to store the setTimeout call
+         *
+         * @type {null|number}
+         */
+        _reset_timer,
 
-    if (properties.id !== undefined)             {this.id = properties.id;}
-    if (properties.style !== undefined)          {this.style = properties.style;}
-    if (properties.label !== undefined)          {this.label = properties.label;}
+        /**
+         * temporary state where we will ignore the next keyup
+         *
+         * @type {boolean|string}
+         */
+        _ignore_next_keyup = false,
 
-    if (this.label) {
-      this.fontSize = constants.edges.fontSize;
-      this.fontFace = constants.edges.fontFace;
-      this.fontColor = constants.edges.fontColor;
-      this.fontFill = constants.edges.fontFill;
+        /**
+         * are we currently inside of a sequence?
+         * type of action ("keyup" or "keydown" or "keypress") or false
+         *
+         * @type {boolean|string}
+         */
+        _inside_sequence = false;
 
-      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
-      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
-      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
-      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    /**
+     * loop through the f keys, f1 to f19 and add them to the map
+     * programatically
+     */
+    for (var i = 1; i < 20; ++i) {
+        _MAP[111 + i] = 'f' + i;
     }
 
-    if (properties.title !== undefined)        {this.title = properties.title;}
-    if (properties.width !== undefined)        {this.width = properties.width;}
-    if (properties.widthSelectionMultiplier !== undefined)
-                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
-    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
-    if (properties.value !== undefined)        {this.value = properties.value;}
-    if (properties.length !== undefined)       {this.length = properties.length;
-                                                this.customLength = true;}
-
-    // scale the arrow
-    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
+    /**
+     * loop through to map numbers on the numeric keypad
+     */
+    for (i = 0; i <= 9; ++i) {
+        _MAP[i + 96] = i;
+    }
 
-    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
+    /**
+     * cross browser add event method
+     *
+     * @param {Element|HTMLDocument} object
+     * @param {string} type
+     * @param {Function} callback
+     * @returns void
+     */
+    function _addEvent(object, type, callback) {
+        if (object.addEventListener) {
+            return object.addEventListener(type, callback, false);
+        }
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dash) {
-      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
-      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
-      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+        object.attachEvent('on' + type, callback);
     }
 
-    if (properties.color !== undefined) {
-      if (util.isString(properties.color)) {
-        this.color.color = properties.color;
-        this.color.highlight = properties.color;
-      }
-      else {
-        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
-        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
-        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
-      }
-    }
+    /**
+     * takes the event and returns the key character
+     *
+     * @param {Event} e
+     * @return {string}
+     */
+    function _characterFromEvent(e) {
 
-    // A node is connected when it has a from and to node.
-    this.connect();
+        // for keypress events we should return the character as is
+        if (e.type == 'keypress') {
+            return String.fromCharCode(e.which);
+        }
 
-    this.widthFixed = this.widthFixed || (properties.width !== undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
+        // for non keypress events the special maps are needed
+        if (_MAP[e.which]) {
+            return _MAP[e.which];
+        }
 
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
+        if (_KEYCODE_MAP[e.which]) {
+            return _KEYCODE_MAP[e.which];
+        }
 
-    // set draw method based on style
-    switch (this.style) {
-      case 'line':          this.draw = this._drawLine; break;
-      case 'arrow':         this.draw = this._drawArrow; break;
-      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
-      case 'dash-line':     this.draw = this._drawDashLine; break;
-      default:              this.draw = this._drawLine; break;
+        // if it is not in the special map
+        return String.fromCharCode(e.which).toLowerCase();
     }
-  };
 
-  /**
-   * Connect an edge to its nodes
-   */
-  Edge.prototype.connect = function () {
-    this.disconnect();
+    /**
+     * should we stop this event before firing off callbacks
+     *
+     * @param {Event} e
+     * @return {boolean}
+     */
+    function _stop(e) {
+        var element = e.target || e.srcElement,
+            tag_name = element.tagName;
 
-    this.from = this.network.nodes[this.fromId] || null;
-    this.to = this.network.nodes[this.toId] || null;
-    this.connected = (this.from && this.to);
+        // if the element has the class "mousetrap" then no need to stop
+        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
+            return false;
+        }
 
-    if (this.connected) {
-      this.from.attachEdge(this);
-      this.to.attachEdge(this);
-    }
-    else {
-      if (this.from) {
-        this.from.detachEdge(this);
-      }
-      if (this.to) {
-        this.to.detachEdge(this);
-      }
+        // stop for input, select, and textarea
+        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
     }
-  };
 
-  /**
-   * Disconnect an edge from its nodes
-   */
-  Edge.prototype.disconnect = function () {
-    if (this.from) {
-      this.from.detachEdge(this);
-      this.from = null;
-    }
-    if (this.to) {
-      this.to.detachEdge(this);
-      this.to = null;
+    /**
+     * checks if two arrays are equal
+     *
+     * @param {Array} modifiers1
+     * @param {Array} modifiers2
+     * @returns {boolean}
+     */
+    function _modifiersMatch(modifiers1, modifiers2) {
+        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
     }
 
-    this.connected = false;
-  };
-
-  /**
-   * get the title of this edge.
-   * @return {string} title    The title of the edge, or undefined when no title
-   *                           has been set.
-   */
-  Edge.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
-  };
+    /**
+     * resets all sequence counters except for the ones passed in
+     *
+     * @param {Object} do_not_reset
+     * @returns void
+     */
+    function _resetSequences(do_not_reset) {
+        do_not_reset = do_not_reset || {};
 
+        var active_sequences = false,
+            key;
 
-  /**
-   * Retrieve the value of the edge. Can be undefined
-   * @return {Number} value
-   */
-  Edge.prototype.getValue = function() {
-    return this.value;
-  };
+        for (key in _sequence_levels) {
+            if (do_not_reset[key]) {
+                active_sequences = true;
+                continue;
+            }
+            _sequence_levels[key] = 0;
+        }
 
-  /**
-   * Adjust the value range of the edge. The edge will adjust it's width
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
-   */
-  Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-      var scale = (this.widthMax - this.widthMin) / (max - min);
-      this.width = (this.value - min) * scale + this.widthMin;
+        if (!active_sequences) {
+            _inside_sequence = false;
+        }
     }
-  };
 
-  /**
-   * Redraw a edge
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
-  };
+    /**
+     * finds all callbacks that match based on the keycode, modifiers,
+     * and action
+     *
+     * @param {string} character
+     * @param {Array} modifiers
+     * @param {string} action
+     * @param {boolean=} remove - should we remove any matches
+     * @param {string=} combination
+     * @returns {Array}
+     */
+    function _getMatches(character, modifiers, action, remove, combination) {
+        var i,
+            callback,
+            matches = [];
 
-  /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top
-   * @return {boolean}     True if location is located on the edge
-   */
-  Edge.prototype.isOverlappingWith = function(obj) {
-    if (this.connected) {
-      var distMax = 10;
-      var xFrom = this.from.x;
-      var yFrom = this.from.y;
-      var xTo = this.to.x;
-      var yTo = this.to.y;
-      var xObj = obj.left;
-      var yObj = obj.top;
+        // if there are no events related to this keycode
+        if (!_callbacks[character]) {
+            return [];
+        }
 
-      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+        // if a modifier key is coming up on its own we should allow it
+        if (action == 'keyup' && _isModifier(character)) {
+            modifiers = [character];
+        }
 
-      return (dist < distMax);
-    }
-    else {
-      return false
-    }
-  };
+        // loop through all callbacks for the key that was pressed
+        // and see if any of them match
+        for (i = 0; i < _callbacks[character].length; ++i) {
+            callback = _callbacks[character][i];
 
-  Edge.prototype._getColor = function() {
-    var colorObj = this.color;
-    if (this.inheritColor == "to") {
-      colorObj = {
-        highlight: this.to.color.highlight.border,
-        hover: this.to.color.hover.border,
-        color: this.to.color.border
-      };
-    }
-    else if (this.inheritColor == "from" || this.inheritColor == true) {
-      colorObj = {
-        highlight: this.from.color.highlight.border,
-        hover: this.from.color.hover.border,
-        color: this.from.color.border
-      };
-    }
-
-    if (this.selected == true)   {return colorObj.highlight;}
-    else if (this.hover == true) {return colorObj.hover;}
-    else                         {return colorObj.color;}
-  }
+            // if this is a sequence but it is not at the right level
+            // then move onto the next match
+            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
+                continue;
+            }
 
+            // if the action we are looking for doesn't match the action we got
+            // then we should keep going
+            if (action != callback.action) {
+                continue;
+            }
 
-  /**
-   * Redraw a edge as a line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this._getColor();
-    ctx.lineWidth   = this._getLineWidth();
+            // if this is a keypress event that means that we need to only
+            // look at the character, otherwise check the modifiers as
+            // well
+            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
+                // remove is used so if you change your mind and call bind a
+                // second time with a new function the first one is overwritten
+                if (remove && callback.combo == combination) {
+                    _callbacks[character].splice(i, 1);
+                }
 
-      // draw label
-      var point;
-      if (this.label) {
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
+                matches.push(callback);
+            }
         }
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      var x, y;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
-      }
-      this._circle(ctx, x, y, radius);
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      this._label(ctx, this.label, point.x, point.y);
-    }
-  };
 
-  /**
-   * Get the line width of the edge. Depends on width and whether one of the
-   * connected nodes is selected.
-   * @return {Number} width
-   * @private
-   */
-  Edge.prototype._getLineWidth = function() {
-    if (this.selected == true) {
-      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
-    }
-    else {
-      if (this.hover == true) {
-        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
-      }
-      else {
-        return this.width*this.networkScaleInv;
-      }
+        return matches;
     }
-  };
 
-  Edge.prototype._getViaCoordinates = function () {
-    var xVia = null;
-    var yVia = null;
-    var factor = this.smoothCurves.roundness;
-    var type = this.smoothCurves.type;
-    if (factor == 0) {
-      return {x:null,y:null};
-    }
+    /**
+     * takes a key event and figures out what the modifiers are
+     *
+     * @param {Event} e
+     * @returns {Array}
+     */
+    function _eventModifiers(e) {
+        var modifiers = [];
 
-    var dx = Math.abs(this.from.x - this.to.x);
-    var dy = Math.abs(this.from.y - this.to.y);
-    if (type == 'discrete' || type == 'diagonalCross') {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-        }
-        if (type == "discrete") {
-          xVia = dx < factor * dy ? this.from.x : xVia;
+        if (e.shiftKey) {
+            modifiers.push('shift');
         }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
+
+        if (e.altKey) {
+            modifiers.push('alt');
         }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
+
+        if (e.ctrlKey) {
+            modifiers.push('ctrl');
         }
-        if (type == "discrete") {
-          yVia = dy < factor * dx ? this.from.y : yVia;
+
+        if (e.metaKey) {
+            modifiers.push('meta');
         }
-      }
-    }
-    else if (type == "straightCross") {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        xVia = this.from.x;
-        yVia = this.to.y
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        xVia = this.to.x;
-        yVia = this.from.y;
-      }
-    }
-    else if (type == 'horizontal') {
-      xVia = this.to.x;
-      yVia = this.from.y;
-    }
-    else if (type == 'vertical') {
-      xVia = this.from.x;
-      yVia = this.to.y;
+
+        return modifiers;
     }
-    else { // continuous
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(1)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(2)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x > xVia ? this.to.x :xVia;
-          }
+
+    /**
+     * actually calls the callback function
+     *
+     * if your callback function returns false this will use the jquery
+     * convention - prevent default and stop propogation on the event
+     *
+     * @param {Function} callback
+     * @param {Event} e
+     * @returns void
+     */
+    function _fireCallback(callback, e) {
+        if (callback(e) === false) {
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+
+            if (e.stopPropagation) {
+                e.stopPropagation();
+            }
+
+            e.returnValue = false;
+            e.cancelBubble = true;
         }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(3)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(4, this.from.x, this.to.x)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x > xVia ? this.to.x : xVia;
-          }
+    }
+
+    /**
+     * handles a character key event
+     *
+     * @param {string} character
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleCharacter(character, e) {
+
+        // if this event should not happen stop here
+        if (_stop(e)) {
+            return;
         }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(5)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(6)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
+
+        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
+            i,
+            do_not_reset = {},
+            processed_sequence_callback = false;
+
+        // loop through matching callbacks for this key event
+        for (i = 0; i < callbacks.length; ++i) {
+
+            // fire for all sequence callbacks
+            // this is because if for example you have multiple sequences
+            // bound such as "g i" and "g t" they both need to fire the
+            // callback for matching g cause otherwise you can only ever
+            // match the first one
+            if (callbacks[i].seq) {
+                processed_sequence_callback = true;
+
+                // keep a list of which sequences were matches for later
+                do_not_reset[callbacks[i].seq] = 1;
+                _fireCallback(callbacks[i].callback, e);
+                continue;
+            }
+
+            // if there were no sequence matches but we are still here
+            // that means this is a regular match so we should fire that
+            if (!processed_sequence_callback && !_inside_sequence) {
+                _fireCallback(callbacks[i].callback, e);
+            }
         }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(7)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(8)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
+
+        // if you are inside of a sequence and the key you are pressing
+        // is not a modifier key then we should reset all sequences
+        // that were not matched by this key event
+        if (e.type == _inside_sequence && !_isModifier(character)) {
+            _resetSequences(do_not_reset);
         }
-      }
     }
 
+    /**
+     * handles a keydown event
+     *
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleKey(e) {
 
-    return {x:xVia, y:yVia};
-  }
+        // normalize e.which for key events
+        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
+        e.which = typeof e.which == "number" ? e.which : e.keyCode;
 
-  /**
-   * Draw a line between two nodes
-   * @param {CanvasRenderingContext2D} ctx
-   * @private
-   */
-  Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    if (this.smoothCurves.enabled == true) {
-      if (this.smoothCurves.dynamic == false) {
-        var via = this._getViaCoordinates();
-        if (via.x == null) {
-          ctx.lineTo(this.to.x, this.to.y);
-          ctx.stroke();
-          return null;
+        var character = _characterFromEvent(e);
+
+        // no character found then stop
+        if (!character) {
+            return;
         }
-        else {
-  //        this.via.x = via.x;
-  //        this.via.y = via.y;
-          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
-          ctx.stroke();
-          return via;
+
+        if (e.type == 'keyup' && _ignore_next_keyup == character) {
+            _ignore_next_keyup = false;
+            return;
         }
-      }
-      else {
-        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
-        ctx.stroke();
-        return this.via;
-      }
+
+        _handleCharacter(character, e);
     }
-    else {
-      ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return null;
+
+    /**
+     * determines if the keycode specified is a modifier key or not
+     *
+     * @param {string} key
+     * @returns {boolean}
+     */
+    function _isModifier(key) {
+        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
     }
-  };
 
-  /**
-   * Draw a line from a node to itself, a circle
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @private
-   */
-  Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
-  };
+    /**
+     * called to set a 1 second timeout on the specified sequence
+     *
+     * this is so after each key press in the sequence you have 1 second
+     * to press the next key before you have to start over
+     *
+     * @returns void
+     */
+    function _resetSequenceTimer() {
+        clearTimeout(_reset_timer);
+        _reset_timer = setTimeout(_resetSequences, 1000);
+    }
 
-  /**
-   * Draw label with white background and with the middle at (x, y)
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {Number} x
-   * @param {Number} y
-   * @private
-   */
-  Edge.prototype._label = function (ctx, text, x, y) {
-    if (text) {
-      // TODO: cache the calculated size
-      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-          this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontFill;
-      var width = ctx.measureText(text).width;
-      var height = this.fontSize;
-      var left = x - width / 2;
-      var top = y - height / 2;
+    /**
+     * reverses the map lookup so that we can look for specific keys
+     * to see what can and can't use keypress
+     *
+     * @return {Object}
+     */
+    function _getReverseMap() {
+        if (!_REVERSE_MAP) {
+            _REVERSE_MAP = {};
+            for (var key in _MAP) {
 
-      ctx.fillRect(left, top, width, height);
+                // pull out the numeric keypad from here cause keypress should
+                // be able to detect the keys from the character
+                if (key > 95 && key < 112) {
+                    continue;
+                }
 
-      // draw text
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = "left";
-      ctx.textBaseline = "top";
-      ctx.fillText(text, left, top);
+                if (_MAP.hasOwnProperty(key)) {
+                    _REVERSE_MAP[_MAP[key]] = key;
+                }
+            }
+        }
+        return _REVERSE_MAP;
     }
-  };
 
-  /**
-   * Redraw a edge as a dashed line
-   * Draw this edge in the given canvas
-   * @author David Jordan
-   * @date 2012-08-08
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;}
+    /**
+     * picks the best action based on the key combination
+     *
+     * @param {string} key - character for key
+     * @param {Array} modifiers
+     * @param {string=} action passed in
+     */
+    function _pickBestAction(key, modifiers, action) {
 
-    ctx.lineWidth = this._getLineWidth();
+        // if no action was picked in we should try to pick the one
+        // that we think would work best for this key
+        if (!action) {
+            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
+        }
 
-    var via = null;
-    // only firefox and chrome support this method, else we use the legacy one.
-    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
-      // configure the dash pattern
-      var pattern = [0];
-      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
-        pattern = [this.dash.length,this.dash.gap];
-      }
-      else {
-        pattern = [5,5];
-      }
+        // modifier keys don't work as expected with keypress,
+        // switch to keydown
+        if (action == 'keypress' && modifiers.length) {
+            action = 'keydown';
+        }
 
-      // set dash settings for chrome or firefox
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash(pattern);
-        ctx.lineDashOffset = 0;
+        return action;
+    }
 
-      } else { //Firefox
-        ctx.mozDash = pattern;
-        ctx.mozDashOffset = 0;
-      }
+    /**
+     * binds a key sequence to an event
+     *
+     * @param {string} combo - combo specified in bind call
+     * @param {Array} keys
+     * @param {Function} callback
+     * @param {string=} action
+     * @returns void
+     */
+    function _bindSequence(combo, keys, callback, action) {
 
-      // draw the line
-      via = this._line(ctx);
+        // start off by adding a sequence level record for this combination
+        // and setting the level to 0
+        _sequence_levels[combo] = 0;
 
-      // restore the dash settings.
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash([0]);
-        ctx.lineDashOffset = 0;
+        // if there is no action pick the best one for the first key
+        // in the sequence
+        if (!action) {
+            action = _pickBestAction(keys[0], []);
+        }
 
-      } else { //Firefox
-        ctx.mozDash = [0];
-        ctx.mozDashOffset = 0;
-      }
-    }
-    else { // unsupporting smooth lines
-      // draw dashed line
-      ctx.beginPath();
-      ctx.lineCap = 'round';
-      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
-      }
-      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap]);
-      }
-      else //If all else fails draw a line
-      {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
-      }
-      ctx.stroke();
-    }
+        /**
+         * callback to increase the sequence level for this sequence and reset
+         * all other sequences that were active
+         *
+         * @param {Event} e
+         * @returns void
+         */
+        var _increaseSequence = function(e) {
+                _inside_sequence = action;
+                ++_sequence_levels[combo];
+                _resetSequenceTimer();
+            },
 
-    // draw label
-    if (this.label) {
-      var point;
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
-      }
-      this._label(ctx, this.label, point.x, point.y);
-    }
-  };
+            /**
+             * wraps the specified callback inside of another function in order
+             * to reset all sequence counters as soon as this sequence is done
+             *
+             * @param {Event} e
+             * @returns void
+             */
+            _callbackAndReset = function(e) {
+                _fireCallback(callback, e);
 
-  /**
-   * Get a point on a line
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnLine = function (percentage) {
-    return {
-      x: (1 - percentage) * this.from.x + percentage * this.to.x,
-      y: (1 - percentage) * this.from.y + percentage * this.to.y
-    }
-  };
+                // we should ignore the next key up if the action is key down
+                // or keypress.  this is so if you finish a sequence and
+                // release the key the final key will not trigger a keyup
+                if (action !== 'keyup') {
+                    _ignore_next_keyup = _characterFromEvent(e);
+                }
 
-  /**
-   * Get a point on a circle
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-      x: x + radius * Math.cos(angle),
-      y: y - radius * Math.sin(angle)
+                // weird race condition if a sequence ends with the key
+                // another sequence begins with
+                setTimeout(_resetSequences, 10);
+            },
+            i;
+
+        // loop through keys one at a time and bind the appropriate callback
+        // function.  for any key leading up to the final one it should
+        // increase the sequence. after the final, it should reset all sequences
+        for (i = 0; i < keys.length; ++i) {
+            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
+        }
     }
-  };
 
-  /**
-   * Redraw a edge as a line with an arrow halfway the line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawArrowCenter = function(ctx) {
-    var point;
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-    ctx.lineWidth = this._getLineWidth();
+    /**
+     * binds a single keyboard combination
+     *
+     * @param {string} combination
+     * @param {Function} callback
+     * @param {string=} action
+     * @param {string=} sequence_name - name of sequence if part of sequence
+     * @param {number=} level - what part of the sequence the command is
+     * @returns void
+     */
+    function _bindSingle(combination, callback, action, sequence_name, level) {
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
+        // make sure multiple spaces in a row become a single space
+        combination = combination.replace(/\s+/g, ' ');
 
-      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      // draw an arrow halfway the line
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
-      }
+        var sequence = combination.split(' '),
+            i,
+            key,
+            keys,
+            modifiers = [];
 
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+        // if this pattern is a sequence of keys then run through this method
+        // to reprocess each pattern one key at a time
+        if (sequence.length > 1) {
+            return _bindSequence(combination, sequence, callback, action);
+        }
 
-      // draw label
-      if (this.label) {
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      // draw circle
-      var x, y;
-      var radius = 0.25 * Math.max(100,this.length);
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-      }
-      this._circle(ctx, x, y, radius);
+        // take the keys from this pattern and figure out what the actual
+        // pattern is all about
+        keys = combination === '+' ? ['+'] : combination.split('+');
 
-      // draw all arrows
-      var angle = 0.2 * Math.PI;
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+        for (i = 0; i < keys.length; ++i) {
+            key = keys[i];
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-  };
+            // normalize key names
+            if (_SPECIAL_ALIASES[key]) {
+                key = _SPECIAL_ALIASES[key];
+            }
 
+            // if this is not a keypress event then we should
+            // be smart about using shift keys
+            // this will only work for US keyboards however
+            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
+                key = _SHIFT_MAP[key];
+                modifiers.push('shift');
+            }
 
+            // if this key is a modifier then add it to the list of modifiers
+            if (_isModifier(key)) {
+                modifiers.push(key);
+            }
+        }
 
-  /**
-   * Redraw a edge as a line with an arrow
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawArrow = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+        // depending on what the key combination is
+        // we will try to pick the best event for it
+        action = _pickBestAction(key, modifiers, action);
 
-    ctx.lineWidth = this._getLineWidth();
+        // make sure to initialize array if this is the first time
+        // a callback is added for this key
+        if (!_callbacks[key]) {
+            _callbacks[key] = [];
+        }
 
-    var angle, length;
-    //draw a line
-    if (this.from != this.to) {
-      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var dx = (this.to.x - this.from.x);
-      var dy = (this.to.y - this.from.y);
-      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+        // remove an existing match if there is one
+        _getMatches(key, modifiers, action, !sequence_name, combination);
 
-      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+        // add this call back to the array
+        // if it is a sequence put it at the beginning
+        // if not put it at the end
+        //
+        // this is important because the way these are processed expects
+        // the sequence ones to come first
+        _callbacks[key][sequence_name ? 'unshift' : 'push']({
+            callback: callback,
+            modifiers: modifiers,
+            action: action,
+            seq: sequence_name,
+            level: level,
+            combo: combination
+        });
+    }
 
-      var via;
-      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
-        via = this.via;
-      }
-      else if (this.smoothCurves.enabled == true) {
-        via = this._getViaCoordinates();
-      }
+    /**
+     * binds multiple combinations to the same callback
+     *
+     * @param {Array} combinations
+     * @param {Function} callback
+     * @param {string|undefined} action
+     * @returns void
+     */
+    function _bindMultiple(combinations, callback, action) {
+        for (var i = 0; i < combinations.length; ++i) {
+            _bindSingle(combinations[i], callback, action);
+        }
+    }
 
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-        dx = (this.to.x - via.x);
-        dy = (this.to.y - via.y);
-        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-      }
-      var toBorderDist = this.to.distanceToBorder(ctx, angle);
-      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+    // start!
+    _addEvent(document, 'keypress', _handleKey);
+    _addEvent(document, 'keydown', _handleKey);
+    _addEvent(document, 'keyup', _handleKey);
 
-      var xTo,yTo;
-      if (this.smoothCurves.enabled == true && via.x != null) {
-       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-      }
-      else {
-        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-      }
+    var mousetrap = {
 
-      ctx.beginPath();
-      ctx.moveTo(xFrom,yFrom);
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
-      }
-      else {
-        ctx.lineTo(xTo, yTo);
-      }
-      ctx.stroke();
+        /**
+         * binds an event to mousetrap
+         *
+         * can be a single key, a combination of keys separated with +,
+         * a comma separated list of keys, an array of keys, or
+         * a sequence of keys separated by spaces
+         *
+         * be sure to list the modifier keys first to make sure that the
+         * correct key ends up getting bound (the last key in the pattern)
+         *
+         * @param {string|Array} keys
+         * @param {Function} callback
+         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
+         * @returns void
+         */
+        bind: function(keys, callback, action) {
+            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
+            _direct_map[keys + ':' + action] = callback;
+            return this;
+        },
 
-      // draw arrow at the end of the line
-      length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(xTo, yTo, angle, length);
-      ctx.fill();
-      ctx.stroke();
+        /**
+         * unbinds an event to mousetrap
+         *
+         * the unbinding sets the callback function of the specified key combo
+         * to an empty function and deletes the corresponding key in the
+         * _direct_map dict.
+         *
+         * the keycombo+action has to be exactly the same as
+         * it was defined in the bind method
+         *
+         * TODO: actually remove this from the _callbacks dictionary instead
+         * of binding an empty function
+         *
+         * @param {string|Array} keys
+         * @param {string} action
+         * @returns void
+         */
+        unbind: function(keys, action) {
+            if (_direct_map[keys + ':' + action]) {
+                delete _direct_map[keys + ':' + action];
+                this.bind(keys, function() {}, action);
+            }
+            return this;
+        },
 
-      // draw label
-      if (this.label) {
-        var point;
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
+        /**
+         * triggers an event that has already been bound
+         *
+         * @param {string} keys
+         * @param {string=} action
+         * @returns void
+         */
+        trigger: function(keys, action) {
+            _direct_map[keys + ':' + action]();
+            return this;
+        },
+
+        /**
+         * resets the library back to its initial state.  this is useful
+         * if you want to clear out the current keyboard shortcuts and bind
+         * new ones - for example if you switch to another page
+         *
+         * @returns void
+         */
+        reset: function() {
+            _callbacks = {};
+            _direct_map = {};
+            return this;
         }
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      // draw circle
-      var node = this.from;
-      var x, y, arrow;
-      var radius = 0.25 * Math.max(100,this.length);
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-        arrow = {
-          x: x,
-          y: node.y,
-          angle: 0.9 * Math.PI
-        };
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-        arrow = {
-          x: node.x,
-          y: y,
-          angle: 0.6 * Math.PI
-        };
-      }
-      ctx.beginPath();
-      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-      ctx.stroke();
+    };
 
-      // draw all arrows
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-      ctx.fill();
-      ctx.stroke();
+  module.exports = mousetrap;
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-  };
 
 
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Calculate the distance between a point (x3,y3) and a line segment from
-   * (x1,y1) to (x2,y2).
-   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
-   * @param {number} x1
-   * @param {number} y1
-   * @param {number} x2
-   * @param {number} y2
-   * @param {number} x3
-   * @param {number} y3
-   * @private
+   * Parse a text source containing data in DOT language into a JSON object.
+   * The object contains two lists: one with nodes and one with edges.
+   *
+   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+   *
+   * @param {String} data     Text containing a graph in DOT-notation
+   * @return {Object} graph   An object containing two parameters:
+   *                          {Object[]} nodes
+   *                          {Object[]} edges
    */
-  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    if (this.from != this.to) {
-      if (this.smoothCurves.enabled == true) {
-        var xVia, yVia;
-        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
-          xVia = this.via.x;
-          yVia = this.via.y;
-        }
-        else {
-          var via = this._getViaCoordinates();
-          xVia = via.x;
-          yVia = via.y;
-        }
-        var minDistance = 1e9;
-        var i,t,x,y,dx,dy;
-        for (i = 0; i < 10; i++) {
-          t = 0.1*i;
-          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
-          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
-          dx = Math.abs(x3-x);
-          dy = Math.abs(y3-y);
-          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
-        }
-        return minDistance
-      }
-      else {
-        var px = x2-x1,
-            py = y2-y1,
-            something = px*px + py*py,
-            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
-
-        if (u > 1) {
-          u = 1;
-        }
-        else if (u < 0) {
-          u = 0;
-        }
+  function parseDOT (data) {
+    dot = data;
+    return parseGraph();
+  }
 
-        var x = x1 + u * px,
-            y = y1 + u * py,
-            dx = x - x3,
-            dy = y - y3;
+  // token types enumeration
+  var TOKENTYPE = {
+    NULL : 0,
+    DELIMITER : 1,
+    IDENTIFIER: 2,
+    UNKNOWN : 3
+  };
 
-        //# Note: If the actual distance does not matter,
-        //# if you only want to compare what this function
-        //# returns to other results of this function, you
-        //# can just return the squared distance instead
-        //# (i.e. remove the sqrt) to gain a little performance
+  // map with all delimiters
+  var DELIMITERS = {
+    '{': true,
+    '}': true,
+    '[': true,
+    ']': true,
+    ';': true,
+    '=': true,
+    ',': true,
 
-        return Math.sqrt(dx*dx + dy*dy);
-      }
-    }
-    else {
-      var x, y, dx, dy;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
-      }
-      dx = x - x3;
-      dy = y - y3;
-      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
-    }
+    '->': true,
+    '--': true
   };
 
-
+  var dot = '';                   // current dot file
+  var index = 0;                  // current index in dot file
+  var c = '';                     // current token character in expr
+  var token = '';                 // current token
+  var tokenType = TOKENTYPE.NULL; // type of the token
 
   /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
+   * Get the first character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
    */
-  Edge.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-  };
-
-
-  Edge.prototype.select = function() {
-    this.selected = true;
-  };
-
-  Edge.prototype.unselect = function() {
-    this.selected = false;
-  };
-
-  Edge.prototype.positionBezierNode = function() {
-    if (this.via !== null) {
-      this.via.x = 0.5 * (this.from.x + this.to.x);
-      this.via.y = 0.5 * (this.from.y + this.to.y);
-    }
-  };
+  function first() {
+    index = 0;
+    c = dot.charAt(0);
+  }
 
   /**
-   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
-   * @param ctx
+   * Get the next character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
    */
-  Edge.prototype._drawControlNodes = function(ctx) {
-    if (this.controlNodesEnabled == true) {
-      if (this.controlNodes.from === null && this.controlNodes.to === null) {
-        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
-        var nodeIdTo = "edgeIdTo:".concat(this.id);
-        var constants = {
-                        nodes:{group:'', radius:8},
-                        physics:{damping:0},
-                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
-                        };
-        this.controlNodes.from = new Node(
-          {id:nodeIdFrom,
-            shape:'dot',
-              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-        this.controlNodes.to = new Node(
-          {id:nodeIdTo,
-            shape:'dot',
-            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-      }
-
-      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
-        this.controlNodes.positions = this.getControlNodePositions(ctx);
-        this.controlNodes.from.x = this.controlNodes.positions.from.x;
-        this.controlNodes.from.y = this.controlNodes.positions.from.y;
-        this.controlNodes.to.x = this.controlNodes.positions.to.x;
-        this.controlNodes.to.y = this.controlNodes.positions.to.y;
-      }
-
-      this.controlNodes.from.draw(ctx);
-      this.controlNodes.to.draw(ctx);
-    }
-    else {
-      this.controlNodes = {from:null, to:null, positions:{}};
-    }
-  };
+  function next() {
+    index++;
+    c = dot.charAt(index);
+  }
 
   /**
-   * Enable control nodes.
-   * @private
+   * Preview the next character from the dot file.
+   * @return {String} cNext
    */
-  Edge.prototype._enableControlNodes = function() {
-    this.controlNodesEnabled = true;
-  };
+  function nextPreview() {
+    return dot.charAt(index + 1);
+  }
 
   /**
-   * disable control nodes
-   * @private
+   * Test whether given character is alphabetic or numeric
+   * @param {String} c
+   * @return {Boolean} isAlphaNumeric
    */
-  Edge.prototype._disableControlNodes = function() {
-    this.controlNodesEnabled = false;
-  };
+  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+  function isAlphaNumeric(c) {
+    return regexAlphaNumeric.test(c);
+  }
 
   /**
-   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
-   * @param x
-   * @param y
-   * @returns {null}
-   * @private
+   * Merge all properties of object b into object b
+   * @param {Object} a
+   * @param {Object} b
+   * @return {Object} a
    */
-  Edge.prototype._getSelectedControlNode = function(x,y) {
-    var positions = this.controlNodes.positions;
-    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
-    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
-
-    if (fromDistance < 15) {
-      this.connectedNode = this.from;
-      this.from = this.controlNodes.from;
-      return this.controlNodes.from;
-    }
-    else if (toDistance < 15) {
-      this.connectedNode = this.to;
-      this.to = this.controlNodes.to;
-      return this.controlNodes.to;
-    }
-    else {
-      return null;
+  function merge (a, b) {
+    if (!a) {
+      a = {};
     }
-  };
 
+    if (b) {
+      for (var name in b) {
+        if (b.hasOwnProperty(name)) {
+          a[name] = b[name];
+        }
+      }
+    }
+    return a;
+  }
 
   /**
-   * this resets the control nodes to their original position.
-   * @private
+   * Set a value in an object, where the provided parameter name can be a
+   * path with nested parameters. For example:
+   *
+   *     var obj = {a: 2};
+   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   *
+   * @param {Object} obj
+   * @param {String} path  A parameter name or dot-separated parameter path,
+   *                      like "color.highlight.border".
+   * @param {*} value
    */
-  Edge.prototype._restoreControlNodes = function() {
-    if (this.controlNodes.from.selected == true) {
-      this.from = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.from.unselect();
-    }
-    if (this.controlNodes.to.selected == true) {
-      this.to = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.to.unselect();
+  function setValue(obj, path, value) {
+    var keys = path.split('.');
+    var o = obj;
+    while (keys.length) {
+      var key = keys.shift();
+      if (keys.length) {
+        // this isn't the end point
+        if (!o[key]) {
+          o[key] = {};
+        }
+        o = o[key];
+      }
+      else {
+        // this is the end point
+        o[key] = value;
+      }
     }
-  };
+  }
 
   /**
-   * this calculates the position of the control nodes on the edges of the parent nodes.
-   *
-   * @param ctx
-   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
+   * Add a node to a graph object. If there is already a node with
+   * the same id, their attributes will be merged.
+   * @param {Object} graph
+   * @param {Object} node
    */
-  Edge.prototype.getControlNodePositions = function(ctx) {
-    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-    var dx = (this.to.x - this.from.x);
-    var dy = (this.to.y - this.from.y);
-    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+  function addNode(graph, node) {
+    var i, len;
+    var current = null;
 
-    var via;
-    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
-      via = this.via;
-    }
-    else if (this.smoothCurves.enabled == true) {
-      via = this._getViaCoordinates();
+    // find root graph (in case of subgraph)
+    var graphs = [graph]; // list with all graphs from current graph to root graph
+    var root = graph;
+    while (root.parent) {
+      graphs.push(root.parent);
+      root = root.parent;
     }
 
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-      dx = (this.to.x - via.x);
-      dy = (this.to.y - via.y);
-      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    // find existing node (at root level) by its id
+    if (root.nodes) {
+      for (i = 0, len = root.nodes.length; i < len; i++) {
+        if (node.id === root.nodes[i].id) {
+          current = root.nodes[i];
+          break;
+        }
+      }
     }
-    var toBorderDist = this.to.distanceToBorder(ctx, angle);
-    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-    var xTo,yTo;
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-    }
-    else {
-      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+    if (!current) {
+      // this is a new node
+      current = {
+        id: node.id
+      };
+      if (graph.node) {
+        // clone default attributes
+        current.attr = merge(current.attr, graph.node);
+      }
     }
 
-    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
-  };
-
-  module.exports = Edge;
-
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-
-  /**
-   * @class Node
-   * A node. A node can be connected to other nodes via one or multiple edges.
-   * @param {object} properties An object containing properties for the node. All
-   *                            properties are optional, except for the id.
-   *                              {number} id     Id of the node. Required
-   *                              {string} label  Text label for the node
-   *                              {number} x      Horizontal position of the node
-   *                              {number} y      Vertical position of the node
-   *                              {string} shape  Node shape, available:
-   *                                              "database", "circle", "ellipse",
-   *                                              "box", "image", "text", "dot",
-   *                                              "star", "triangle", "triangleDown",
-   *                                              "square"
-   *                              {string} image  An image url
-   *                              {string} title  An title text, can be HTML
-   *                              {anytype} group A group name or number
-   * @param {Network.Images} imagelist    A list with images. Only needed
-   *                                            when the node has an image
-   * @param {Network.Groups} grouplist    A list with groups. Needed for
-   *                                            retrieving group properties
-   * @param {Object}               constants    An object with default values for
-   *                                            example for the color
-   *
-   */
-  function Node(properties, imagelist, grouplist, constants) {
-    this.selected = false;
-    this.hover = false;
-
-    this.edges = []; // all edges connected to this node
-    this.dynamicEdges = [];
-    this.reroutedEdges = {};
-
-    this.group = constants.nodes.group;
-    this.fontSize = Number(constants.nodes.fontSize);
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-    this.fontDrawThreshold = 3;
-
-    this.color = constants.nodes.color;
-
-    // set defaults for the properties
-    this.id = undefined;
-    this.shape = constants.nodes.shape;
-    this.image = constants.nodes.image;
-    this.x = null;
-    this.y = null;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.horizontalAlignLeft = true; // these are for the navigation controls
-    this.verticalAlignTop    = true; // these are for the navigation controls
-    this.radius = constants.nodes.radius;
-    this.baseRadiusValue = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
-    this.level = -1;
-    this.preassignedLevel = false;
-
-
-    this.imagelist = imagelist;
-    this.grouplist = grouplist;
-
-    // physics properties
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = constants.physics.damping;
-    this.mass = 1;  // kg
-    this.fixedData = {x:null,y:null};
-
-    this.setProperties(properties, constants);
+    // add node to this (sub)graph and all its parent graphs
+    for (i = graphs.length - 1; i >= 0; i--) {
+      var g = graphs[i];
 
-    // creating the variables for clustering
-    this.resetCluster();
-    this.dynamicEdgesLength = 0;
-    this.clusterSession = 0;
-    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
-    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
-    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
-    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
-    this.growthIndicator = 0;
+      if (!g.nodes) {
+        g.nodes = [];
+      }
+      if (g.nodes.indexOf(current) == -1) {
+        g.nodes.push(current);
+      }
+    }
 
-    // variables to tell the node about the network.
-    this.networkScaleInv = 1;
-    this.networkScale = 1;
-    this.canvasTopLeft = {"x": -300, "y": -300};
-    this.canvasBottomRight = {"x":  300, "y":  300};
-    this.parentEdgeId = null;
+    // merge attributes
+    if (node.attr) {
+      current.attr = merge(current.attr, node.attr);
+    }
   }
 
   /**
-   * (re)setting the clustering variables and objects
-   */
-  Node.prototype.resetCluster = function() {
-    // clustering variables
-    this.formationScale = undefined; // this is used to determine when to open the cluster
-    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
-    this.containedNodes = {};
-    this.containedEdges = {};
-    this.clusterSessions = [];
-  };
-
-  /**
-   * Attach a edge to the node
-   * @param {Edge} edge
+   * Add an edge to a graph object
+   * @param {Object} graph
+   * @param {Object} edge
    */
-  Node.prototype.attachEdge = function(edge) {
-    if (this.edges.indexOf(edge) == -1) {
-      this.edges.push(edge);
+  function addEdge(graph, edge) {
+    if (!graph.edges) {
+      graph.edges = [];
     }
-    if (this.dynamicEdges.indexOf(edge) == -1) {
-      this.dynamicEdges.push(edge);
+    graph.edges.push(edge);
+    if (graph.edge) {
+      var attr = merge({}, graph.edge);     // clone default attributes
+      edge.attr = merge(attr, edge.attr); // merge attributes
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
-  };
+  }
 
   /**
-   * Detach a edge from the node
-   * @param {Edge} edge
+   * Create an edge to a graph object
+   * @param {Object} graph
+   * @param {String | Number | Object} from
+   * @param {String | Number | Object} to
+   * @param {String} type
+   * @param {Object | null} attr
+   * @return {Object} edge
    */
-  Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-      this.edges.splice(index, 1);
-      this.dynamicEdges.splice(index, 1);
+  function createEdge(graph, from, to, type, attr) {
+    var edge = {
+      from: from,
+      to: to,
+      type: type
+    };
+
+    if (graph.edge) {
+      edge.attr = merge({}, graph.edge);  // clone default attributes
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
-  };
+    edge.attr = merge(edge.attr || {}, attr); // merge attributes
 
+    return edge;
+  }
 
   /**
-   * Set or overwrite properties for the node
-   * @param {Object} properties an object with properties
-   * @param {Object} constants  and object with default, global properties
+   * Get next token in the current dot file.
+   * The token and token type are available as token and tokenType
    */
-  Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
+  function getToken() {
+    tokenType = TOKENTYPE.NULL;
+    token = '';
+
+    // skip over whitespaces
+    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+      next();
     }
-    this.originalLabel = undefined;
-    // basic properties
-    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.group !== undefined)     {this.group = properties.group;}
-    if (properties.x !== undefined)         {this.x = properties.x;}
-    if (properties.y !== undefined)         {this.y = properties.y;}
-    if (properties.value !== undefined)     {this.value = properties.value;}
-    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
+    do {
+      var isComment = false;
 
-    // physics
-    if (properties.mass !== undefined)                {this.mass = properties.mass;}
+      // skip comment
+      if (c == '#') {
+        // find the previous non-space character
+        var i = index - 1;
+        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+          i--;
+        }
+        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+          // the # is at the start of a line, this is indeed a line comment
+          while (c != '' && c != '\n') {
+            next();
+          }
+          isComment = true;
+        }
+      }
+      if (c == '/' && nextPreview() == '/') {
+        // skip line comment
+        while (c != '' && c != '\n') {
+          next();
+        }
+        isComment = true;
+      }
+      if (c == '/' && nextPreview() == '*') {
+        // skip block comment
+        while (c != '') {
+          if (c == '*' && nextPreview() == '/') {
+            // end of block comment found. skip these last two characters
+            next();
+            next();
+            break;
+          }
+          else {
+            next();
+          }
+        }
+        isComment = true;
+      }
 
-    // navigation controls properties
-    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
-    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
-    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
+      // skip over whitespaces
+      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+        next();
+      }
+    }
+    while (isComment);
 
-    if (this.id === undefined) {
-      throw "Node must have an id";
+    // check for end of dot file
+    if (c == '') {
+      // token is still empty
+      tokenType = TOKENTYPE.DELIMITER;
+      return;
     }
 
-    // copy group properties
-    if (this.group) {
-      var groupObj = this.grouplist.get(this.group);
-      for (var prop in groupObj) {
-        if (groupObj.hasOwnProperty(prop)) {
-          this[prop] = groupObj[prop];
-        }
-      }
+    // check for delimiters consisting of 2 characters
+    var c2 = c + nextPreview();
+    if (DELIMITERS[c2]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c2;
+      next();
+      next();
+      return;
     }
 
-    // individual shape properties
-    if (properties.shape !== undefined)          {this.shape = properties.shape;}
-    if (properties.image !== undefined)          {this.image = properties.image;}
-    if (properties.radius !== undefined)         {this.radius = properties.radius;}
-    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
+    // check for delimiters consisting of 1 character
+    if (DELIMITERS[c]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c;
+      next();
+      return;
+    }
 
-    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
+    // check for an identifier (number or string)
+    // TODO: more precise parsing of numbers/strings (and the port separator ':')
+    if (isAlphaNumeric(c) || c == '-') {
+      token += c;
+      next();
 
-    if (this.image !== undefined && this.image != "") {
-      if (this.imagelist) {
-        this.imageObj = this.imagelist.load(this.image);
+      while (isAlphaNumeric(c)) {
+        token += c;
+        next();
       }
-      else {
-        throw "No imagelist provided";
+      if (token == 'false') {
+        token = false;   // convert to boolean
+      }
+      else if (token == 'true') {
+        token = true;   // convert to boolean
+      }
+      else if (!isNaN(Number(token))) {
+        token = Number(token); // convert to number
       }
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
     }
 
-    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
-    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
-    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
-
-    if (this.shape == 'image') {
-      this.radiusMin = constants.nodes.widthMin;
-      this.radiusMax = constants.nodes.widthMax;
+    // check for a string enclosed by double quotes
+    if (c == '"') {
+      next();
+      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+        token += c;
+        if (c == '"') { // skip the escape character
+          next();
+        }
+        next();
+      }
+      if (c != '"') {
+        throw newSyntaxError('End of string " expected');
+      }
+      next();
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
     }
 
-    // choose draw method depending on the shape
-    switch (this.shape) {
-      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
-      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-      // TODO: add diamond shape
-      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+    // something unknown is found, wrong characters, a syntax error
+    tokenType = TOKENTYPE.UNKNOWN;
+    while (c != '') {
+      token += c;
+      next();
     }
-    // reset the size of the node, this can be changed
-    this._reset();
-  };
-
-  /**
-   * select this node
-   */
-  Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
-  };
+    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+  }
 
   /**
-   * unselect this node
+   * Parse a graph.
+   * @returns {Object} graph
    */
-  Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
-  };
-
+  function parseGraph() {
+    var graph = {};
 
-  /**
-   * Reset the calculated size of the node, forces it to recalculate its size
-   */
-  Node.prototype.clearSizeCache = function() {
-    this._reset();
-  };
+    first();
+    getToken();
 
-  /**
-   * Reset the calculated size of the node, forces it to recalculate its size
-   * @private
-   */
-  Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
-  };
+    // optional strict keyword
+    if (token == 'strict') {
+      graph.strict = true;
+      getToken();
+    }
 
-  /**
-   * get the title of this node.
-   * @return {string} title    The title of the node, or undefined when no title
-   *                           has been set.
-   */
-  Node.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
-  };
+    // graph or digraph keyword
+    if (token == 'graph' || token == 'digraph') {
+      graph.type = token;
+      getToken();
+    }
 
-  /**
-   * Calculate the distance to the border of the Node
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Number} angle        Angle in radians
-   * @returns {number} distance   Distance to the border in pixels
-   */
-  Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
+    // optional graph id
+    if (tokenType == TOKENTYPE.IDENTIFIER) {
+      graph.id = token;
+      getToken();
+    }
 
-    if (!this.width) {
-      this.resize(ctx);
+    // open angle bracket
+    if (token != '{') {
+      throw newSyntaxError('Angle bracket { expected');
     }
+    getToken();
 
-    switch (this.shape) {
-      case 'circle':
-      case 'dot':
-        return this.radius + borderWidth;
+    // statements
+    parseStatements(graph);
 
-      case 'ellipse':
-        var a = this.width / 2;
-        var b = this.height / 2;
-        var w = (Math.sin(angle) * a);
-        var h = (Math.cos(angle) * b);
-        return a * b / Math.sqrt(w * w + h * h);
+    // close angle bracket
+    if (token != '}') {
+      throw newSyntaxError('Angle bracket } expected');
+    }
+    getToken();
 
-      // TODO: implement distanceToBorder for database
-      // TODO: implement distanceToBorder for triangle
-      // TODO: implement distanceToBorder for triangleDown
+    // end of file
+    if (token !== '') {
+      throw newSyntaxError('End of file expected');
+    }
+    getToken();
 
-      case 'box':
-      case 'image':
-      case 'text':
-      default:
-        if (this.width) {
-          return Math.min(
-              Math.abs(this.width / 2 / Math.cos(angle)),
-              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-          // TODO: reckon with border radius too in case of box
-        }
-        else {
-          return 0;
-        }
+    // remove temporary default properties
+    delete graph.node;
+    delete graph.edge;
+    delete graph.graph;
 
-    }
-    // TODO: implement calculation of distance to border for all shapes
-  };
+    return graph;
+  }
 
   /**
-   * Set forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
+   * Parse a list with statements.
+   * @param {Object} graph
    */
-  Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
-  };
+  function parseStatements (graph) {
+    while (token !== '' && token != '}') {
+      parseStatement(graph);
+      if (token == ';') {
+        getToken();
+      }
+    }
+  }
 
   /**
-   * Add forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
-   * @private
+   * Parse a single statement. Can be a an attribute statement, node
+   * statement, a series of node statements and edge statements, or a
+   * parameter.
+   * @param {Object} graph
    */
-  Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
-  };
+  function parseStatement(graph) {
+    // parse subgraph
+    var subgraph = parseSubgraph(graph);
+    if (subgraph) {
+      // edge statements
+      parseEdge(graph, subgraph);
 
-  /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   */
-  Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.x  += this.vx * interval;          // position
+      return;
     }
 
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.y  += this.vy * interval;          // position
+    // parse an attribute statement
+    var attr = parseAttributeStatement(graph);
+    if (attr) {
+      return;
     }
-  };
-
-
 
-  /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   * @param {number} maxVelocity The speed limit imposed on the velocity
-   */
-  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
-      this.x  += this.vx * interval;          // position
-    }
-    else {
-      this.fx = 0;
+    // parse node
+    if (tokenType != TOKENTYPE.IDENTIFIER) {
+      throw newSyntaxError('Identifier expected');
     }
+    var id = token; // id can be a string or a number
+    getToken();
 
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
-      this.y  += this.vy * interval;          // position
+    if (token == '=') {
+      // id statement
+      getToken();
+      if (tokenType != TOKENTYPE.IDENTIFIER) {
+        throw newSyntaxError('Identifier expected');
+      }
+      graph[id] = token;
+      getToken();
+      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
     }
     else {
-      this.fy = 0;
+      parseNodeStatement(graph, id);
     }
-  };
+  }
 
   /**
-   * Check if this node has a fixed x and y position
-   * @return {boolean}      true if fixed, false if not
+   * Parse a subgraph
+   * @param {Object} graph    parent graph object
+   * @return {Object | null} subgraph
    */
-  Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
-  };
+  function parseSubgraph (graph) {
+    var subgraph = null;
 
-  /**
-   * Check if this node is moving
-   * @param {number} vmin   the minimum velocity considered as "moving"
-   * @return {boolean}      true if moving, false if it has no velocity
-   */
-  // TODO: replace this method with calculating the kinetic energy
-  Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
-  };
+    // optional subgraph keyword
+    if (token == 'subgraph') {
+      subgraph = {};
+      subgraph.type = 'subgraph';
+      getToken();
 
-  /**
-   * check if this node is selecte
-   * @return {boolean} selected   True if node is selected, else false
-   */
-  Node.prototype.isSelected = function() {
-    return this.selected;
-  };
+      // optional graph id
+      if (tokenType == TOKENTYPE.IDENTIFIER) {
+        subgraph.id = token;
+        getToken();
+      }
+    }
 
-  /**
-   * Retrieve the value of the node. Can be undefined
-   * @return {Number} value
-   */
-  Node.prototype.getValue = function() {
-    return this.value;
-  };
+    // open angle bracket
+    if (token == '{') {
+      getToken();
 
-  /**
-   * Calculate the distance from the nodes location to the given location (x,y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Number} value
-   */
-  Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
-  };
+      if (!subgraph) {
+        subgraph = {};
+      }
+      subgraph.parent = graph;
+      subgraph.node = graph.node;
+      subgraph.edge = graph.edge;
+      subgraph.graph = graph.graph;
 
+      // statements
+      parseStatements(subgraph);
 
-  /**
-   * Adjust the value range of the node. The node will adjust it's radius
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
-   */
-  Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-      if (max == min) {
-        this.radius = (this.radiusMin + this.radiusMax) / 2;
+      // close angle bracket
+      if (token != '}') {
+        throw newSyntaxError('Angle bracket } expected');
       }
-      else {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
+      getToken();
+
+      // remove temporary default properties
+      delete subgraph.node;
+      delete subgraph.edge;
+      delete subgraph.graph;
+      delete subgraph.parent;
+
+      // register at the parent graph
+      if (!graph.subgraphs) {
+        graph.subgraphs = [];
       }
+      graph.subgraphs.push(subgraph);
     }
-    this.baseRadiusValue = this.radius;
-  };
 
-  /**
-   * Draw this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
-  };
+    return subgraph;
+  }
 
   /**
-   * Recalculate the size of this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * parse an attribute statement like "node [shape=circle fontSize=16]".
+   * Available keywords are 'node', 'edge', 'graph'.
+   * The previous list with default attributes will be replaced
+   * @param {Object} graph
+   * @returns {String | null} keyword Returns the name of the parsed attribute
+   *                                  (node, edge, graph), or null if nothing
+   *                                  is parsed.
    */
-  Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
-  };
+  function parseAttributeStatement (graph) {
+    // attribute statements
+    if (token == 'node') {
+      getToken();
 
-  /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top, right, bottom
-   * @return {boolean}     True if location is located on node
-   */
-  Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left              < obj.right  &&
-            this.left + this.width > obj.left   &&
-            this.top               < obj.bottom &&
-            this.top + this.height > obj.top);
-  };
-
-  Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
+      // node attributes
+      graph.node = parseAttributeList();
+      return 'node';
+    }
+    else if (token == 'edge') {
+      getToken();
 
-    if (!this.width || !this.height) {  // undefined or 0
-      var width, height;
-      if (this.value) {
-        this.radius = this.baseRadiusValue;
-        var scale = this.imageObj.height / this.imageObj.width;
-        if (scale !== undefined) {
-          width = this.radius || this.imageObj.width;
-          height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-          width = 0;
-          height = 0;
-        }
-      }
-      else {
-        width = this.imageObj.width;
-        height = this.imageObj.height;
-      }
-      this.width  = width;
-      this.height = height;
+      // edge attributes
+      graph.edge = parseAttributeList();
+      return 'edge';
+    }
+    else if (token == 'graph') {
+      getToken();
 
-      this.growthIndicator = 0;
-      if (this.width > 0 && this.height > 0) {
-        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
-        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-        this.growthIndicator = this.width - width;
-      }
+      // graph attributes
+      graph.graph = parseAttributeList();
+      return 'graph';
     }
 
-  };
+    return null;
+  }
 
-  Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
+  /**
+   * parse a node statement
+   * @param {Object} graph
+   * @param {String | Number} id
+   */
+  function parseNodeStatement(graph, id) {
+    // node statement
+    var node = {
+      id: id
+    };
+    var attr = parseAttributeList();
+    if (attr) {
+      node.attr = attr;
+    }
+    addNode(graph, node);
 
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
+    // edge statements
+    parseEdge(graph, id);
+  }
 
-    var yLabel;
-    if (this.imageObj.width != 0 ) {
-      // draw the shade
-      if (this.clusterSize > 1) {
-        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
-        lineWidth *= this.networkScaleInv;
-        lineWidth = Math.min(0.2 * this.width,lineWidth);
+  /**
+   * Parse an edge or a series of edges
+   * @param {Object} graph
+   * @param {String | Number} from        Id of the from node
+   */
+  function parseEdge(graph, from) {
+    while (token == '->' || token == '--') {
+      var to;
+      var type = token;
+      getToken();
 
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+      var subgraph = parseSubgraph(graph);
+      if (subgraph) {
+        to = subgraph;
+      }
+      else {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Identifier or subgraph expected');
+        }
+        to = token;
+        addNode(graph, {
+          id: to
+        });
+        getToken();
       }
 
-      // draw the image
-      ctx.globalAlpha = 1.0;
-      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-      yLabel = this.y + this.height / 2;
-    }
-    else {
-      // image still loading... just draw the label for now
-      yLabel = this.y;
+      // parse edge attributes
+      var attr = parseAttributeList();
+
+      // create edge
+      var edge = createEdge(graph, from, to, type, attr);
+      addEdge(graph, edge);
+
+      from = to;
     }
+  }
 
-    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
-  };
+  /**
+   * Parse a set with attributes,
+   * for example [label="1.000", shape=solid]
+   * @return {Object | null} attr
+   */
+  function parseAttributeList() {
+    var attr = null;
 
+    while (token == '[') {
+      getToken();
+      attr = {};
+      while (token !== '' && token != ']') {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute name expected');
+        }
+        var name = token;
 
-  Node.prototype._resizeBox = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+        getToken();
+        if (token != '=') {
+          throw newSyntaxError('Equal sign = expected');
+        }
+        getToken();
 
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute value expected');
+        }
+        var value = token;
+        setValue(attr, name, value); // name can be a path
+
+        getToken();
+        if (token ==',') {
+          getToken();
+        }
+      }
 
+      if (token != ']') {
+        throw newSyntaxError('Bracket ] expected');
+      }
+      getToken();
     }
-  };
 
-  Node.prototype._drawBox = function (ctx) {
-    this._resizeBox(ctx);
+    return attr;
+  }
 
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+  /**
+   * Create a syntax error with extra information on current token and index.
+   * @param {String} message
+   * @returns {SyntaxError} err
+   */
+  function newSyntaxError(message) {
+    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+  }
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+  /**
+   * Chop off text after a maximum length
+   * @param {String} text
+   * @param {Number} maxLength
+   * @returns {String}
+   */
+  function chop (text, maxLength) {
+    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+  }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * Execute a function fn for each pair of elements in two arrays
+   * @param {Array | *} array1
+   * @param {Array | *} array2
+   * @param {function} fn
+   */
+  function forEach2(array1, array2, fn) {
+    if (array1 instanceof Array) {
+      array1.forEach(function (elem1) {
+        if (array2 instanceof Array) {
+          array2.forEach(function (elem2)  {
+            fn(elem1, elem2);
+          });
+        }
+        else {
+          fn(elem1, array2);
+        }
+      });
+    }
+    else {
+      if (array2 instanceof Array) {
+        array2.forEach(function (elem2)  {
+          fn(array1, elem2);
+        });
+      }
+      else {
+        fn(array1, array2);
+      }
+    }
+  }
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * Convert a string containing a graph in DOT language into a map containing
+   * with nodes and edges in the format of graph.
+   * @param {String} data         Text containing a graph in DOT-notation
+   * @return {Object} graphData
+   */
+  function DOTToGraph (data) {
+    // parse the DOT file
+    var dotData = parseDOT(data);
+    var graphData = {
+      nodes: [],
+      edges: [],
+      options: {}
+    };
 
-      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
-      ctx.stroke();
+    // copy the nodes
+    if (dotData.nodes) {
+      dotData.nodes.forEach(function (dotNode) {
+        var graphNode = {
+          id: dotNode.id,
+          label: String(dotNode.label || dotNode.id)
+        };
+        merge(graphNode, dotNode.attr);
+        if (graphNode.image) {
+          graphNode.shape = 'image';
+        }
+        graphData.nodes.push(graphNode);
+      });
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+    // copy the edges
+    if (dotData.edges) {
+      /**
+       * Convert an edge in DOT format to an edge with VisGraph format
+       * @param {Object} dotEdge
+       * @returns {Object} graphEdge
+       */
+      function convertEdge(dotEdge) {
+        var graphEdge = {
+          from: dotEdge.from,
+          to: dotEdge.to
+        };
+        merge(graphEdge, dotEdge.attr);
+        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+        return graphEdge;
+      }
 
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
+      dotData.edges.forEach(function (dotEdge) {
+        var from, to;
+        if (dotEdge.from instanceof Object) {
+          from = dotEdge.from.nodes;
+        }
+        else {
+          from = {
+            id: dotEdge.from
+          }
+        }
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+        if (dotEdge.to instanceof Object) {
+          to = dotEdge.to.nodes;
+        }
+        else {
+          to = {
+            id: dotEdge.to
+          }
+        }
 
+        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+          dotEdge.from.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
 
-  Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var size = textSize.width + 2 * margin;
-      this.width = size;
-      this.height = size;
+        forEach2(from, to, function (from, to) {
+          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+          var graphEdge = convertEdge(subEdge);
+          graphData.edges.push(graphEdge);
+        });
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+          dotEdge.to.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
+      });
     }
-  };
 
-  Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    // copy the options
+    if (dotData.attr) {
+      graphData.options = dotData.attr;
+    }
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+    return graphData;
+  }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  // exports
+  exports.parseDOT = parseDOT;
+  exports.DOTToGraph = DOTToGraph;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
-      ctx.stroke();
-    }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+/***/ },
+/* 40 */
+/***/ function(module, exports, __webpack_require__) {
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
+  var util = __webpack_require__(1);
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+  /**
+   * @class Groups
+   * This class can store groups and properties specific for groups.
+   */
+  function Groups() {
+    this.clear();
+    this.defaultIndex = 0;
+  }
 
 
-  Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-      this.radius = diameter / 2;
+  /**
+   * default constants for group colors
+   */
+  Groups.DEFAULT = [
+    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
+  ];
 
-      this.width = diameter;
-      this.height = diameter;
 
-      // scaling used for clustering
-  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.radius - 0.5*diameter;
+  /**
+   * Clear all groups
+   */
+  Groups.prototype.clear = function () {
+    this.groups = {};
+    this.groups.length = function()
+    {
+      var i = 0;
+      for ( var p in this ) {
+        if (this.hasOwnProperty(p)) {
+          i++;
+        }
+      }
+      return i;
     }
   };
 
-  Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * get group properties of a groupname. If groupname is not found, a new group
+   * is added.
+   * @param {*} groupname        Can be a number, string, Date, etc.
+   * @return {Object} group      The created group, containing all group properties
+   */
+  Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
 
-      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
-      ctx.stroke();
+    if (group == undefined) {
+      // create new group
+      var index = this.defaultIndex % Groups.DEFAULT.length;
+      this.defaultIndex++;
+      group = {};
+      group.color = Groups.DEFAULT[index];
+      this.groups[groupname] = group;
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
 
-    this._label(ctx, this.label, this.x, this.y);
+    return group;
   };
 
-  Node.prototype._resizeEllipse = function (ctx) {
-    if (!this.width) {
-      var textSize = this.getTextSize(ctx);
-
-      this.width = textSize.width * 1.5;
-      this.height = textSize.height * 2;
-      if (this.width < this.height) {
-        this.width = this.height;
-      }
-      var defaultSize = this.width;
-
-        // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - defaultSize;
+  /**
+   * Add a custom group style
+   * @param {String} groupname
+   * @param {Object} style       An object containing borderColor,
+   *                             backgroundColor, etc.
+   * @return {Object} group      The created group object
+   */
+  Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    if (style.color) {
+      style.color = util.parseColor(style.color);
     }
+    return style;
   };
 
-  Node.prototype._drawEllipse = function (ctx) {
-    this._resizeEllipse(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+  module.exports = Groups;
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+/***/ },
+/* 41 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * @class Images
+   * This class loads images and keeps them stored.
+   */
+  function Images() {
+    this.images = {};
 
-      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
-      ctx.stroke();
-    }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    this.callback = undefined;
+  }
 
-    ctx.ellipse(this.left, this.top, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-    this._label(ctx, this.label, this.x, this.y);
+  /**
+   * Set an onload callback function. This will be called each time an image
+   * is loaded
+   * @param {function} callback
+   */
+  Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
   };
 
-  Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
-  };
+  /**
+   *
+   * @param {string} url          Url of the image
+   * @return {Image} img          The image object
+   */
+  Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+      // create the image
+      var images = this;
+      img = new Image();
+      this.images[url] = img;
+      img.onload = function() {
+        if (images.callback) {
+          images.callback(this);
+        }
+      };
+      img.src = url;
+    }
 
-  Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
+    return img;
   };
 
-  Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-  };
+  module.exports = Images;
 
-  Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
-  };
 
-  Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
-  };
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
 
-  Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-      this.radius = this.baseRadiusValue;
-      var size = 2 * this.radius;
-      this.width = size;
-      this.height = size;
+  var util = __webpack_require__(1);
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
-    }
-  };
+  /**
+   * @class Node
+   * A node. A node can be connected to other nodes via one or multiple edges.
+   * @param {object} properties An object containing properties for the node. All
+   *                            properties are optional, except for the id.
+   *                              {number} id     Id of the node. Required
+   *                              {string} label  Text label for the node
+   *                              {number} x      Horizontal position of the node
+   *                              {number} y      Vertical position of the node
+   *                              {string} shape  Node shape, available:
+   *                                              "database", "circle", "ellipse",
+   *                                              "box", "image", "text", "dot",
+   *                                              "star", "triangle", "triangleDown",
+   *                                              "square"
+   *                              {string} image  An image url
+   *                              {string} title  An title text, can be HTML
+   *                              {anytype} group A group name or number
+   * @param {Network.Images} imagelist    A list with images. Only needed
+   *                                            when the node has an image
+   * @param {Network.Groups} grouplist    A list with groups. Needed for
+   *                                            retrieving group properties
+   * @param {Object}               constants    An object with default values for
+   *                                            example for the color
+   *
+   */
+  function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
+    this.hover = false;
 
-  Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
+    this.edges = []; // all edges connected to this node
+    this.dynamicEdges = [];
+    this.reroutedEdges = {};
 
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    this.group = constants.nodes.group;
+    this.fontSize = Number(constants.nodes.fontSize);
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
+    this.fontDrawThreshold = 3;
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-    var radiusMultiplier = 2;
+    this.color = constants.nodes.color;
 
-    // choose draw method depending on the shape
-    switch (shape) {
-      case 'dot':           radiusMultiplier = 2; break;
-      case 'square':        radiusMultiplier = 2; break;
-      case 'triangle':      radiusMultiplier = 3; break;
-      case 'triangleDown':  radiusMultiplier = 3; break;
-      case 'star':          radiusMultiplier = 4; break;
-    }
+    // set defaults for the properties
+    this.id = undefined;
+    this.shape = constants.nodes.shape;
+    this.image = constants.nodes.image;
+    this.x = null;
+    this.y = null;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.horizontalAlignLeft = true; // these are for the navigation controls
+    this.verticalAlignTop    = true; // these are for the navigation controls
+    this.radius = constants.nodes.radius;
+    this.baseRadiusValue = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+    this.level = -1;
+    this.preassignedLevel = false;
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
 
-      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
-      ctx.stroke();
-    }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    // physics properties
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = constants.physics.damping;
+    this.mass = 1;  // kg
+    this.fixedData = {x:null,y:null};
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
+    this.setProperties(properties, constants);
 
-    if (this.label) {
-      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
-    }
+    // creating the variables for clustering
+    this.resetCluster();
+    this.dynamicEdgesLength = 0;
+    this.clusterSession = 0;
+    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
+    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
+    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
+    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
+    this.growthIndicator = 0;
+
+    // variables to tell the node about the network.
+    this.networkScaleInv = 1;
+    this.networkScale = 1;
+    this.canvasTopLeft = {"x": -300, "y": -300};
+    this.canvasBottomRight = {"x":  300, "y":  300};
+    this.parentEdgeId = null;
+  }
+
+  /**
+   * (re)setting the clustering variables and objects
+   */
+  Node.prototype.resetCluster = function() {
+    // clustering variables
+    this.formationScale = undefined; // this is used to determine when to open the cluster
+    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
+    this.containedNodes = {};
+    this.containedEdges = {};
+    this.clusterSessions = [];
   };
 
-  Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+  /**
+   * Attach a edge to the node
+   * @param {Edge} edge
+   */
+  Node.prototype.attachEdge = function(edge) {
+    if (this.edges.indexOf(edge) == -1) {
+      this.edges.push(edge);
+    }
+    if (this.dynamicEdges.indexOf(edge) == -1) {
+      this.dynamicEdges.push(edge);
+    }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
+  };
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  /**
+   * Detach a edge from the node
+   * @param {Edge} edge
+   */
+  Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+      this.edges.splice(index, 1);
+      this.dynamicEdges.splice(index, 1);
     }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
-  Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+  /**
+   * Set or overwrite properties for the node
+   * @param {Object} properties an object with properties
+   * @param {Object} constants  and object with default, global properties
+   */
+  Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
+    }
+    this.originalLabel = undefined;
+    // basic properties
+    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.group !== undefined)     {this.group = properties.group;}
+    if (properties.x !== undefined)         {this.x = properties.x;}
+    if (properties.y !== undefined)         {this.y = properties.y;}
+    if (properties.value !== undefined)     {this.value = properties.value;}
+    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
 
-  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = align || "center";
-      ctx.textBaseline = baseline || "middle";
+    // physics
+    if (properties.mass !== undefined)                {this.mass = properties.mass;}
 
-      var lines = text.split('\n');
-      var lineCount = lines.length;
-      var fontSize = (this.fontSize + 4);
-      var yLine = y + (1 - lineCount) / 2 * fontSize;
-      if (labelUnderNode == true) {
-        yLine = y + (1 - lineCount) / (2 * fontSize);
-      }
+    // navigation controls properties
+    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
 
-      for (var i = 0; i < lineCount; i++) {
-        ctx.fillText(lines[i], x, yLine);
-        yLine += fontSize;
-      }
+    if (this.id === undefined) {
+      throw "Node must have an id";
     }
-  };
 
+    // copy group properties
+    if (this.group) {
+      var groupObj = this.grouplist.get(this.group);
+      for (var prop in groupObj) {
+        if (groupObj.hasOwnProperty(prop)) {
+          this[prop] = groupObj[prop];
+        }
+      }
+    }
 
-  Node.prototype.getTextSize = function(ctx) {
-    if (this.label !== undefined) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+    // individual shape properties
+    if (properties.shape !== undefined)          {this.shape = properties.shape;}
+    if (properties.image !== undefined)          {this.image = properties.image;}
+    if (properties.radius !== undefined)         {this.radius = properties.radius; this.baseRadiusValue = this.radius;}
+    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
-      var lines = this.label.split('\n'),
-          height = (this.fontSize + 4) * lines.length,
-          width = 0;
+    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
 
-      for (var i = 0, iMax = lines.length; i < iMax; i++) {
-        width = Math.max(width, ctx.measureText(lines[i]).width);
+    if (this.image !== undefined && this.image != "") {
+      if (this.imagelist) {
+        this.imageObj = this.imagelist.load(this.image);
       }
+      else {
+        throw "No imagelist provided";
+      }
+    }
 
-      return {"width": width, "height": height};
+    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
+    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
+
+    if (this.shape == 'image') {
+      this.radiusMin = constants.nodes.widthMin;
+      this.radiusMax = constants.nodes.widthMax;
     }
-    else {
-      return {"width": 0, "height": 0};
+
+    // choose draw method depending on the shape
+    switch (this.shape) {
+      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
+      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+      // TODO: add diamond shape
+      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
     }
+    // reset the size of the node, this can be changed
+    this._reset();
   };
 
   /**
-   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
-   * there is a safety margin of 0.3 * width;
-   *
-   * @returns {boolean}
+   * select this node
    */
-  Node.prototype.inArea = function() {
-    if (this.width !== undefined) {
-    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
-            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
-            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
-            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
-    }
-    else {
-      return true;
-    }
+  Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
   };
 
   /**
-   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
-   * @returns {boolean}
+   * unselect this node
    */
-  Node.prototype.inView = function() {
-    return (this.x >= this.canvasTopLeft.x    &&
-            this.x < this.canvasBottomRight.x &&
-            this.y >= this.canvasTopLeft.y    &&
-            this.y < this.canvasBottomRight.y);
+  Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
   };
 
+
   /**
-   * This allows the zoom level of the network to influence the rendering
-   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
-   *
-   * @param scale
-   * @param canvasTopLeft
-   * @param canvasBottomRight
+   * Reset the calculated size of the node, forces it to recalculate its size
    */
-  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-    this.canvasTopLeft = canvasTopLeft;
-    this.canvasBottomRight = canvasBottomRight;
+  Node.prototype.clearSizeCache = function() {
+    this._reset();
   };
 
-
   /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
+   * Reset the calculated size of the node, forces it to recalculate its size
+   * @private
    */
-  Node.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
+  Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
   };
 
-
-
   /**
-   * set the velocity at 0. Is called when this node is contained in another during clustering
+   * get the title of this node.
+   * @return {string} title    The title of the node, or undefined when no title
+   *                           has been set.
    */
-  Node.prototype.clearVelocity = function() {
-    this.vx = 0;
-    this.vy = 0;
+  Node.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
   };
 
-
   /**
-   * Basic preservation of (kinectic) energy
-   *
-   * @param massBeforeClustering
+   * Calculate the distance to the border of the Node
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Number} angle        Angle in radians
+   * @returns {number} distance   Distance to the border in pixels
    */
-  Node.prototype.updateVelocity = function(massBeforeClustering) {
-    var energyBefore = this.vx * this.vx * massBeforeClustering;
-    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vx = Math.sqrt(energyBefore/this.mass);
-    energyBefore = this.vy * this.vy * massBeforeClustering;
-    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vy = Math.sqrt(energyBefore/this.mass);
-  };
+  Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
 
-  module.exports = Node;
+    if (!this.width) {
+      this.resize(ctx);
+    }
 
+    switch (this.shape) {
+      case 'circle':
+      case 'dot':
+        return this.radius + borderWidth;
 
-/***/ },
-/* 40 */
-/***/ function(module, exports, __webpack_require__) {
+      case 'ellipse':
+        var a = this.width / 2;
+        var b = this.height / 2;
+        var w = (Math.sin(angle) * a);
+        var h = (Math.cos(angle) * b);
+        return a * b / Math.sqrt(w * w + h * h);
 
-  var util = __webpack_require__(1);
+      // TODO: implement distanceToBorder for database
+      // TODO: implement distanceToBorder for triangle
+      // TODO: implement distanceToBorder for triangleDown
 
-  /**
-   * @class Groups
-   * This class can store groups and properties specific for groups.
-   */
-  function Groups() {
-    this.clear();
-    this.defaultIndex = 0;
-  }
+      case 'box':
+      case 'image':
+      case 'text':
+      default:
+        if (this.width) {
+          return Math.min(
+              Math.abs(this.width / 2 / Math.cos(angle)),
+              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+          // TODO: reckon with border radius too in case of box
+        }
+        else {
+          return 0;
+        }
 
+    }
+    // TODO: implement calculation of distance to border for all shapes
+  };
 
   /**
-   * default constants for group colors
+   * Set forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
    */
-  Groups.DEFAULT = [
-    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
-    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
-    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
-    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
-    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
-    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
-    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
-    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
-    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
-    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
-  ];
+  Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
+  };
 
+  /**
+   * Add forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
+   * @private
+   */
+  Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
+  };
 
   /**
-   * Clear all groups
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
    */
-  Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-      var i = 0;
-      for ( var p in this ) {
-        if (this.hasOwnProperty(p)) {
-          i++;
-        }
-      }
-      return i;
+  Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.x  += this.vx * interval;          // position
+    }
+
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.y  += this.vy * interval;          // position
     }
   };
 
 
+
   /**
-   * get group properties of a groupname. If groupname is not found, a new group
-   * is added.
-   * @param {*} groupname        Can be a number, string, Date, etc.
-   * @return {Object} group      The created group, containing all group properties
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   * @param {number} maxVelocity The speed limit imposed on the velocity
    */
-  Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
-
-    if (group == undefined) {
-      // create new group
-      var index = this.defaultIndex % Groups.DEFAULT.length;
-      this.defaultIndex++;
-      group = {};
-      group.color = Groups.DEFAULT[index];
-      this.groups[groupname] = group;
+  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
+      this.x  += this.vx * interval;          // position
+    }
+    else {
+      this.fx = 0;
     }
 
-    return group;
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
+      this.y  += this.vy * interval;          // position
+    }
+    else {
+      this.fy = 0;
+    }
   };
 
   /**
-   * Add a custom group style
-   * @param {String} groupname
-   * @param {Object} style       An object containing borderColor,
-   *                             backgroundColor, etc.
-   * @return {Object} group      The created group object
+   * Check if this node has a fixed x and y position
+   * @return {boolean}      true if fixed, false if not
    */
-  Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    if (style.color) {
-      style.color = util.parseColor(style.color);
-    }
-    return style;
+  Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
   };
 
-  module.exports = Groups;
-
-
-/***/ },
-/* 41 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * @class Images
-   * This class loads images and keeps them stored.
+   * Check if this node is moving
+   * @param {number} vmin   the minimum velocity considered as "moving"
+   * @return {boolean}      true if moving, false if it has no velocity
    */
-  function Images() {
-    this.images = {};
-
-    this.callback = undefined;
-  }
+  // TODO: replace this method with calculating the kinetic energy
+  Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  };
 
   /**
-   * Set an onload callback function. This will be called each time an image
-   * is loaded
-   * @param {function} callback
+   * check if this node is selecte
+   * @return {boolean} selected   True if node is selected, else false
    */
-  Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
+  Node.prototype.isSelected = function() {
+    return this.selected;
   };
 
   /**
-   *
-   * @param {string} url          Url of the image
-   * @return {Image} img          The image object
+   * Retrieve the value of the node. Can be undefined
+   * @return {Number} value
    */
-  Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-      // create the image
-      var images = this;
-      img = new Image();
-      this.images[url] = img;
-      img.onload = function() {
-        if (images.callback) {
-          images.callback(this);
-        }
-      };
-      img.src = url;
-    }
-
-    return img;
+  Node.prototype.getValue = function() {
+    return this.value;
   };
 
-  module.exports = Images;
-
+  /**
+   * Calculate the distance from the nodes location to the given location (x,y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Number} value
+   */
+  Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
 
-/***/ },
-/* 42 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Popup is a class to create a popup window with some text
-   * @param {Element}  container     The container object.
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {String} [text]
-   * @param {Object} [style]     An object containing borderColor,
-   *                             backgroundColor, etc.
+   * Adjust the value range of the node. The node will adjust it's radius
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
    */
-  function Popup(container, x, y, text, style) {
-    if (container) {
-      this.container = container;
-    }
-    else {
-      this.container = document.body;
-    }
-
-    // x, y and text are optional, see if a style object was passed in their place
-    if (style === undefined) {
-      if (typeof x === "object") {
-        style = x;
-        x = undefined;
-      } else if (typeof text === "object") {
-        style = text;
-        text = undefined;
-      } else {
-        // for backwards compatibility, in case clients other than Network are creating Popup directly
-        style = {
-          fontColor: 'black',
-          fontSize: 14, // px
-          fontFace: 'verdana',
-          color: {
-            border: '#666',
-            background: '#FFFFC6'
-          }
-        }
+  Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+      if (max == min) {
+        this.radius = (this.radiusMin + this.radiusMax) / 2;
+      }
+      else {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
       }
     }
-
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
-
-    if (x !== undefined && y !== undefined ) {
-      this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-      this.setText(text);
-    }
-
-    // create the frame
-    this.frame = document.createElement("div");
-    var styleAttr = this.frame.style;
-    styleAttr.position = "absolute";
-    styleAttr.visibility = "hidden";
-    styleAttr.border = "1px solid " + style.color.border;
-    styleAttr.color = style.fontColor;
-    styleAttr.fontSize = style.fontSize + "px";
-    styleAttr.fontFamily = style.fontFace;
-    styleAttr.padding = this.padding + "px";
-    styleAttr.backgroundColor = style.color.background;
-    styleAttr.borderRadius = "3px";
-    styleAttr.MozBorderRadius = "3px";
-    styleAttr.WebkitBorderRadius = "3px";
-    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    styleAttr.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
-  }
+    this.baseRadiusValue = this.radius;
+  };
 
   /**
-   * @param {number} x   Horizontal position of the popup window
-   * @param {number} y   Vertical position of the popup window
+   * Draw this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    */
-  Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
+  Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
   };
 
   /**
-   * Set the text for the popup window. This can be HTML code
-   * @param {string} text
+   * Recalculate the size of this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    */
-  Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
+  Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
   };
 
   /**
-   * Show the popup window
-   * @param {boolean} show    Optional. Show or hide the window
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top, right, bottom
+   * @return {boolean}     True if location is located on node
    */
-  Popup.prototype.show = function (show) {
-    if (show === undefined) {
-      show = true;
-    }
+  Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left              < obj.right  &&
+            this.left + this.width > obj.left   &&
+            this.top               < obj.bottom &&
+            this.top + this.height > obj.top);
+  };
 
-    if (show) {
-      var height = this.frame.clientHeight;
-      var width =  this.frame.clientWidth;
-      var maxHeight = this.frame.parentNode.clientHeight;
-      var maxWidth = this.frame.parentNode.clientWidth;
+  Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
 
-      var top = (this.y - height);
-      if (top + height + this.padding > maxHeight) {
-        top = maxHeight - height - this.padding;
+    if (!this.width || !this.height) {  // undefined or 0
+      var width, height;
+      if (this.value) {
+        this.radius = this.baseRadiusValue;
+        var scale = this.imageObj.height / this.imageObj.width;
+        if (scale !== undefined) {
+          width = this.radius || this.imageObj.width;
+          height = this.radius * scale || this.imageObj.height;
+        }
+        else {
+          width = 0;
+          height = 0;
+        }
       }
-      if (top < this.padding) {
-        top = this.padding;
+      else {
+        width = this.imageObj.width;
+        height = this.imageObj.height;
       }
+      this.width  = width;
+      this.height = height;
 
-      var left = this.x;
-      if (left + width + this.padding > maxWidth) {
-        left = maxWidth - width - this.padding;
+      this.growthIndicator = 0;
+      if (this.width > 0 && this.height > 0) {
+        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
+        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+        this.growthIndicator = this.width - width;
       }
-      if (left < this.padding) {
-        left = this.padding;
+    }
+
+  };
+
+  Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
+
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
+
+    var yLabel;
+    if (this.imageObj.width != 0 ) {
+      // draw the shade
+      if (this.clusterSize > 1) {
+        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
+        lineWidth *= this.networkScaleInv;
+        lineWidth = Math.min(0.2 * this.width,lineWidth);
+
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
       }
 
-      this.frame.style.left = left + "px";
-      this.frame.style.top = top + "px";
-      this.frame.style.visibility = "visible";
+      // draw the image
+      ctx.globalAlpha = 1.0;
+      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      yLabel = this.y + this.height / 2;
     }
     else {
-      this.hide();
+      // image still loading... just draw the label for now
+      yLabel = this.y;
     }
+
+    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
   };
 
-  /**
-   * Hide the popup window
-   */
-  Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
+
+  Node.prototype._resizeBox = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
+
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+
+    }
   };
 
-  module.exports = Popup;
+  Node.prototype._drawBox = function (ctx) {
+    this._resizeBox(ctx);
 
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-/***/ },
-/* 43 */
-/***/ function(module, exports, __webpack_require__) {
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-  /**
-   * Parse a text source containing data in DOT language into a JSON object.
-   * The object contains two lists: one with nodes and one with edges.
-   *
-   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
-   *
-   * @param {String} data     Text containing a graph in DOT-notation
-   * @return {Object} graph   An object containing two parameters:
-   *                          {Object[]} nodes
-   *                          {Object[]} edges
-   */
-  function parseDOT (data) {
-    dot = data;
-    return parseGraph();
-  }
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-  // token types enumeration
-  var TOKENTYPE = {
-    NULL : 0,
-    DELIMITER : 1,
-    IDENTIFIER: 2,
-    UNKNOWN : 3
-  };
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  // map with all delimiters
-  var DELIMITERS = {
-    '{': true,
-    '}': true,
-    '[': true,
-    ']': true,
-    ';': true,
-    '=': true,
-    ',': true,
+      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    '->': true,
-    '--': true
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  var dot = '';                   // current dot file
-  var index = 0;                  // current index in dot file
-  var c = '';                     // current token character in expr
-  var token = '';                 // current token
-  var tokenType = TOKENTYPE.NULL; // type of the token
 
-  /**
-   * Get the first character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
-   */
-  function first() {
-    index = 0;
-    c = dot.charAt(0);
-  }
+  Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var size = textSize.width + 2 * margin;
+      this.width = size;
+      this.height = size;
 
-  /**
-   * Get the next character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
-   */
-  function next() {
-    index++;
-    c = dot.charAt(index);
-  }
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
+    }
+  };
 
-  /**
-   * Preview the next character from the dot file.
-   * @return {String} cNext
-   */
-  function nextPreview() {
-    return dot.charAt(index + 1);
-  }
+  Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  /**
-   * Test whether given character is alphabetic or numeric
-   * @param {String} c
-   * @return {Boolean} isAlphaNumeric
-   */
-  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
-  function isAlphaNumeric(c) {
-    return regexAlphaNumeric.test(c);
-  }
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-  /**
-   * Merge all properties of object b into object b
-   * @param {Object} a
-   * @param {Object} b
-   * @return {Object} a
-   */
-  function merge (a, b) {
-    if (!a) {
-      a = {};
-    }
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    if (b) {
-      for (var name in b) {
-        if (b.hasOwnProperty(name)) {
-          a[name] = b[name];
-        }
-      }
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
+      ctx.stroke();
     }
-    return a;
-  }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   * Set a value in an object, where the provided parameter name can be a
-   * path with nested parameters. For example:
-   *
-   *     var obj = {a: 2};
-   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
-   *
-   * @param {Object} obj
-   * @param {String} path  A parameter name or dot-separated parameter path,
-   *                      like "color.highlight.border".
-   * @param {*} value
-   */
-  function setValue(obj, path, value) {
-    var keys = path.split('.');
-    var o = obj;
-    while (keys.length) {
-      var key = keys.shift();
-      if (keys.length) {
-        // this isn't the end point
-        if (!o[key]) {
-          o[key] = {};
-        }
-        o = o[key];
-      }
-      else {
-        // this is the end point
-        o[key] = value;
-      }
-    }
-  }
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
 
-  /**
-   * Add a node to a graph object. If there is already a node with
-   * the same id, their attributes will be merged.
-   * @param {Object} graph
-   * @param {Object} node
-   */
-  function addNode(graph, node) {
-    var i, len;
-    var current = null;
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-    // find root graph (in case of subgraph)
-    var graphs = [graph]; // list with all graphs from current graph to root graph
-    var root = graph;
-    while (root.parent) {
-      graphs.push(root.parent);
-      root = root.parent;
-    }
 
-    // find existing node (at root level) by its id
-    if (root.nodes) {
-      for (i = 0, len = root.nodes.length; i < len; i++) {
-        if (node.id === root.nodes[i].id) {
-          current = root.nodes[i];
-          break;
-        }
-      }
+  Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+      this.radius = diameter / 2;
+
+      this.width = diameter;
+      this.height = diameter;
+
+      // scaling used for clustering
+  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.radius - 0.5*diameter;
     }
+  };
 
-    if (!current) {
-      // this is a new node
-      current = {
-        id: node.id
-      };
-      if (graph.node) {
-        // clone default attributes
-        current.attr = merge(current.attr, graph.node);
-      }
+  Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    // add node to this (sub)graph and all its parent graphs
-    for (i = graphs.length - 1; i >= 0; i--) {
-      var g = graphs[i];
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-      if (!g.nodes) {
-        g.nodes = [];
-      }
-      if (g.nodes.indexOf(current) == -1) {
-        g.nodes.push(current);
+    this._label(ctx, this.label, this.x, this.y);
+  };
+
+  Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+      var textSize = this.getTextSize(ctx);
+
+      this.width = textSize.width * 1.5;
+      this.height = textSize.height * 2;
+      if (this.width < this.height) {
+        this.width = this.height;
       }
-    }
+      var defaultSize = this.width;
 
-    // merge attributes
-    if (node.attr) {
-      current.attr = merge(current.attr, node.attr);
+        // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - defaultSize;
     }
-  }
+  };
 
-  /**
-   * Add an edge to a graph object
-   * @param {Object} graph
-   * @param {Object} edge
-   */
-  function addEdge(graph, edge) {
-    if (!graph.edges) {
-      graph.edges = [];
-    }
-    graph.edges.push(edge);
-    if (graph.edge) {
-      var attr = merge({}, graph.edge);     // clone default attributes
-      edge.attr = merge(attr, edge.attr); // merge attributes
-    }
-  }
+  Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  /**
-   * Create an edge to a graph object
-   * @param {Object} graph
-   * @param {String | Number | Object} from
-   * @param {String | Number | Object} to
-   * @param {String} type
-   * @param {Object | null} attr
-   * @return {Object} edge
-   */
-  function createEdge(graph, from, to, type, attr) {
-    var edge = {
-      from: from,
-      to: to,
-      type: type
-    };
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-    if (graph.edge) {
-      edge.attr = merge({}, graph.edge);  // clone default attributes
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
+      ctx.stroke();
     }
-    edge.attr = merge(edge.attr || {}, attr); // merge attributes
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    return edge;
-  }
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
-  /**
-   * Get next token in the current dot file.
-   * The token and token type are available as token and tokenType
-   */
-  function getToken() {
-    tokenType = TOKENTYPE.NULL;
-    token = '';
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-    // skip over whitespaces
-    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-      next();
-    }
+  Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+  };
 
-    do {
-      var isComment = false;
+  Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
+  };
 
-      // skip comment
-      if (c == '#') {
-        // find the previous non-space character
-        var i = index - 1;
-        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
-          i--;
-        }
-        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
-          // the # is at the start of a line, this is indeed a line comment
-          while (c != '' && c != '\n') {
-            next();
-          }
-          isComment = true;
-        }
-      }
-      if (c == '/' && nextPreview() == '/') {
-        // skip line comment
-        while (c != '' && c != '\n') {
-          next();
-        }
-        isComment = true;
-      }
-      if (c == '/' && nextPreview() == '*') {
-        // skip block comment
-        while (c != '') {
-          if (c == '*' && nextPreview() == '/') {
-            // end of block comment found. skip these last two characters
-            next();
-            next();
-            break;
-          }
-          else {
-            next();
-          }
-        }
-        isComment = true;
-      }
+  Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
+  };
 
-      // skip over whitespaces
-      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-        next();
-      }
-    }
-    while (isComment);
+  Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
+  };
 
-    // check for end of dot file
-    if (c == '') {
-      // token is still empty
-      tokenType = TOKENTYPE.DELIMITER;
-      return;
-    }
+  Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+  };
 
-    // check for delimiters consisting of 2 characters
-    var c2 = c + nextPreview();
-    if (DELIMITERS[c2]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c2;
-      next();
-      next();
-      return;
-    }
+  Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+      this.radius = this.baseRadiusValue;
+      var size = 2 * this.radius;
+      this.width = size;
+      this.height = size;
 
-    // check for delimiters consisting of 1 character
-    if (DELIMITERS[c]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c;
-      next();
-      return;
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
+  };
 
-    // check for an identifier (number or string)
-    // TODO: more precise parsing of numbers/strings (and the port separator ':')
-    if (isAlphaNumeric(c) || c == '-') {
-      token += c;
-      next();
+  Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
 
-      while (isAlphaNumeric(c)) {
-        token += c;
-        next();
-      }
-      if (token == 'false') {
-        token = false;   // convert to boolean
-      }
-      else if (token == 'true') {
-        token = true;   // convert to boolean
-      }
-      else if (!isNaN(Number(token))) {
-        token = Number(token); // convert to number
-      }
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    // check for a string enclosed by double quotes
-    if (c == '"') {
-      next();
-      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
-        token += c;
-        if (c == '"') { // skip the escape character
-          next();
-        }
-        next();
-      }
-      if (c != '"') {
-        throw newSyntaxError('End of string " expected');
-      }
-      next();
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+    var radiusMultiplier = 2;
 
-    // something unknown is found, wrong characters, a syntax error
-    tokenType = TOKENTYPE.UNKNOWN;
-    while (c != '') {
-      token += c;
-      next();
+    // choose draw method depending on the shape
+    switch (shape) {
+      case 'dot':           radiusMultiplier = 2; break;
+      case 'square':        radiusMultiplier = 2; break;
+      case 'triangle':      radiusMultiplier = 3; break;
+      case 'triangleDown':  radiusMultiplier = 3; break;
+      case 'star':          radiusMultiplier = 4; break;
     }
-    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
-  }
 
-  /**
-   * Parse a graph.
-   * @returns {Object} graph
-   */
-  function parseGraph() {
-    var graph = {};
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    first();
-    getToken();
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    // optional strict keyword
-    if (token == 'strict') {
-      graph.strict = true;
-      getToken();
+      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    // graph or digraph keyword
-    if (token == 'graph' || token == 'digraph') {
-      graph.type = token;
-      getToken();
-    }
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-    // optional graph id
-    if (tokenType == TOKENTYPE.IDENTIFIER) {
-      graph.id = token;
-      getToken();
+    if (this.label) {
+      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
     }
+  };
 
-    // open angle bracket
-    if (token != '{') {
-      throw newSyntaxError('Angle bracket { expected');
+  Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
     }
-    getToken();
+  };
 
-    // statements
-    parseStatements(graph);
+  Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    // close angle bracket
-    if (token != '}') {
-      throw newSyntaxError('Angle bracket } expected');
-    }
-    getToken();
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-    // end of file
-    if (token !== '') {
-      throw newSyntaxError('End of file expected');
-    }
-    getToken();
 
-    // remove temporary default properties
-    delete graph.node;
-    delete graph.edge;
-    delete graph.graph;
+  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
+    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = align || "center";
+      ctx.textBaseline = baseline || "middle";
 
-    return graph;
-  }
+      var lines = text.split('\n');
+      var lineCount = lines.length;
+      var fontSize = (this.fontSize + 4);
+      var yLine = y + (1 - lineCount) / 2 * fontSize;
+      if (labelUnderNode == true) {
+        yLine = y + (1 - lineCount) / (2 * fontSize);
+      }
 
-  /**
-   * Parse a list with statements.
-   * @param {Object} graph
-   */
-  function parseStatements (graph) {
-    while (token !== '' && token != '}') {
-      parseStatement(graph);
-      if (token == ';') {
-        getToken();
+      for (var i = 0; i < lineCount; i++) {
+        ctx.fillText(lines[i], x, yLine);
+        yLine += fontSize;
       }
     }
-  }
-
-  /**
-   * Parse a single statement. Can be a an attribute statement, node
-   * statement, a series of node statements and edge statements, or a
-   * parameter.
-   * @param {Object} graph
-   */
-  function parseStatement(graph) {
-    // parse subgraph
-    var subgraph = parseSubgraph(graph);
-    if (subgraph) {
-      // edge statements
-      parseEdge(graph, subgraph);
+  };
 
-      return;
-    }
 
-    // parse an attribute statement
-    var attr = parseAttributeStatement(graph);
-    if (attr) {
-      return;
-    }
+  Node.prototype.getTextSize = function(ctx) {
+    if (this.label !== undefined) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
 
-    // parse node
-    if (tokenType != TOKENTYPE.IDENTIFIER) {
-      throw newSyntaxError('Identifier expected');
-    }
-    var id = token; // id can be a string or a number
-    getToken();
+      var lines = this.label.split('\n'),
+          height = (this.fontSize + 4) * lines.length,
+          width = 0;
 
-    if (token == '=') {
-      // id statement
-      getToken();
-      if (tokenType != TOKENTYPE.IDENTIFIER) {
-        throw newSyntaxError('Identifier expected');
+      for (var i = 0, iMax = lines.length; i < iMax; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width);
       }
-      graph[id] = token;
-      getToken();
-      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
+
+      return {"width": width, "height": height};
     }
     else {
-      parseNodeStatement(graph, id);
+      return {"width": 0, "height": 0};
     }
-  }
+  };
 
   /**
-   * Parse a subgraph
-   * @param {Object} graph    parent graph object
-   * @return {Object | null} subgraph
+   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+   * there is a safety margin of 0.3 * width;
+   *
+   * @returns {boolean}
    */
-  function parseSubgraph (graph) {
-    var subgraph = null;
-
-    // optional subgraph keyword
-    if (token == 'subgraph') {
-      subgraph = {};
-      subgraph.type = 'subgraph';
-      getToken();
-
-      // optional graph id
-      if (tokenType == TOKENTYPE.IDENTIFIER) {
-        subgraph.id = token;
-        getToken();
-      }
+  Node.prototype.inArea = function() {
+    if (this.width !== undefined) {
+    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
+            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
+            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
+            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+    }
+    else {
+      return true;
     }
+  };
 
-    // open angle bracket
-    if (token == '{') {
-      getToken();
+  /**
+   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+   * @returns {boolean}
+   */
+  Node.prototype.inView = function() {
+    return (this.x >= this.canvasTopLeft.x    &&
+            this.x < this.canvasBottomRight.x &&
+            this.y >= this.canvasTopLeft.y    &&
+            this.y < this.canvasBottomRight.y);
+  };
 
-      if (!subgraph) {
-        subgraph = {};
-      }
-      subgraph.parent = graph;
-      subgraph.node = graph.node;
-      subgraph.edge = graph.edge;
-      subgraph.graph = graph.graph;
+  /**
+   * This allows the zoom level of the network to influence the rendering
+   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+   *
+   * @param scale
+   * @param canvasTopLeft
+   * @param canvasBottomRight
+   */
+  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+    this.canvasTopLeft = canvasTopLeft;
+    this.canvasBottomRight = canvasBottomRight;
+  };
 
-      // statements
-      parseStatements(subgraph);
 
-      // close angle bracket
-      if (token != '}') {
-        throw newSyntaxError('Angle bracket } expected');
-      }
-      getToken();
+  /**
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
+   */
+  Node.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+  };
 
-      // remove temporary default properties
-      delete subgraph.node;
-      delete subgraph.edge;
-      delete subgraph.graph;
-      delete subgraph.parent;
 
-      // register at the parent graph
-      if (!graph.subgraphs) {
-        graph.subgraphs = [];
-      }
-      graph.subgraphs.push(subgraph);
-    }
 
-    return subgraph;
-  }
+  /**
+   * set the velocity at 0. Is called when this node is contained in another during clustering
+   */
+  Node.prototype.clearVelocity = function() {
+    this.vx = 0;
+    this.vy = 0;
+  };
+
 
   /**
-   * parse an attribute statement like "node [shape=circle fontSize=16]".
-   * Available keywords are 'node', 'edge', 'graph'.
-   * The previous list with default attributes will be replaced
-   * @param {Object} graph
-   * @returns {String | null} keyword Returns the name of the parsed attribute
-   *                                  (node, edge, graph), or null if nothing
-   *                                  is parsed.
+   * Basic preservation of (kinectic) energy
+   *
+   * @param massBeforeClustering
    */
-  function parseAttributeStatement (graph) {
-    // attribute statements
-    if (token == 'node') {
-      getToken();
+  Node.prototype.updateVelocity = function(massBeforeClustering) {
+    var energyBefore = this.vx * this.vx * massBeforeClustering;
+    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vx = Math.sqrt(energyBefore/this.mass);
+    energyBefore = this.vy * this.vy * massBeforeClustering;
+    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vy = Math.sqrt(energyBefore/this.mass);
+  };
 
-      // node attributes
-      graph.node = parseAttributeList();
-      return 'node';
-    }
-    else if (token == 'edge') {
-      getToken();
+  module.exports = Node;
 
-      // edge attributes
-      graph.edge = parseAttributeList();
-      return 'edge';
-    }
-    else if (token == 'graph') {
-      getToken();
 
-      // graph attributes
-      graph.graph = parseAttributeList();
-      return 'graph';
-    }
+/***/ },
+/* 43 */
+/***/ function(module, exports, __webpack_require__) {
 
-    return null;
-  }
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(42);
 
   /**
-   * parse a node statement
-   * @param {Object} graph
-   * @param {String | Number} id
+   * @class Edge
+   *
+   * A edge connects two nodes
+   * @param {Object} properties     Object with properties. Must contain
+   *                                At least properties from and to.
+   *                                Available properties: from (number),
+   *                                to (number), label (string, color (string),
+   *                                width (number), style (string),
+   *                                length (number), title (string)
+   * @param {Network} network       A Network object, used to find and edge to
+   *                                nodes.
+   * @param {Object} constants      An object with default values for
+   *                                example for the color
    */
-  function parseNodeStatement(graph, id) {
-    // node statement
-    var node = {
-      id: id
-    };
-    var attr = parseAttributeList();
-    if (attr) {
-      node.attr = attr;
+  function Edge (properties, network, constants) {
+    if (!network) {
+      throw "No network provided";
     }
-    addNode(graph, node);
+    this.network = network;
 
-    // edge statements
-    parseEdge(graph, id);
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
+
+    // initialize variables
+    this.id     = undefined;
+    this.fromId = undefined;
+    this.toId   = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+    this.hoverWidth = constants.edges.hoverWidth;
+    this.value  = undefined;
+    this.length = constants.physics.springLength;
+    this.customLength = false;
+    this.selected = false;
+    this.hover = false;
+    this.smoothCurves = constants.smoothCurves;
+    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
+    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
+    this.inheritColor = constants.edges.inheritColor;
+
+    this.from = null;   // a node
+    this.to = null;     // a node
+    this.via = null;    // a temp node
+
+    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+    // by storing the original information we can revert to the original connection when the cluser is opened.
+    this.originalFromId = [];
+    this.originalToId = [];
+
+    this.connected = false;
+
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
+
+    this.color       = {color:constants.edges.color.color,
+                        highlight:constants.edges.color.highlight,
+                        hover:constants.edges.color.hover};
+    this.widthFixed  = false;
+    this.lengthFixed = false;
+
+    this.setProperties(properties, constants);
+
+    this.controlNodesEnabled = false;
+    this.controlNodes = {from:null, to:null, positions:{}};
+    this.connectedNode = null;
   }
 
   /**
-   * Parse an edge or a series of edges
-   * @param {Object} graph
-   * @param {String | Number} from        Id of the from node
+   * Set or overwrite properties for the edge
+   * @param {Object} properties  an object with properties
+   * @param {Object} constants   and object with default, global properties
    */
-  function parseEdge(graph, from) {
-    while (token == '->' || token == '--') {
-      var to;
-      var type = token;
-      getToken();
+  Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
+    }
 
-      var subgraph = parseSubgraph(graph);
-      if (subgraph) {
-        to = subgraph;
-      }
-      else {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Identifier or subgraph expected');
-        }
-        to = token;
-        addNode(graph, {
-          id: to
-        });
-        getToken();
-      }
+    if (properties.from !== undefined)           {this.fromId = properties.from;}
+    if (properties.to !== undefined)             {this.toId = properties.to;}
 
-      // parse edge attributes
-      var attr = parseAttributeList();
+    if (properties.id !== undefined)             {this.id = properties.id;}
+    if (properties.style !== undefined)          {this.style = properties.style;}
+    if (properties.label !== undefined)          {this.label = properties.label;}
 
-      // create edge
-      var edge = createEdge(graph, from, to, type, attr);
-      addEdge(graph, edge);
+    if (this.label) {
+      this.fontSize = constants.edges.fontSize;
+      this.fontFace = constants.edges.fontFace;
+      this.fontColor = constants.edges.fontColor;
+      this.fontFill = constants.edges.fontFill;
 
-      from = to;
+      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
+      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
+      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
+      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
     }
-  }
 
-  /**
-   * Parse a set with attributes,
-   * for example [label="1.000", shape=solid]
-   * @return {Object | null} attr
-   */
-  function parseAttributeList() {
-    var attr = null;
+    if (properties.title !== undefined)        {this.title = properties.title;}
+    if (properties.width !== undefined)        {this.width = properties.width;}
+    if (properties.widthSelectionMultiplier !== undefined)
+                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
+    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
+    if (properties.value !== undefined)        {this.value = properties.value;}
+    if (properties.length !== undefined)       {this.length = properties.length;
+                                                this.customLength = true;}
 
-    while (token == '[') {
-      getToken();
-      attr = {};
-      while (token !== '' && token != ']') {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute name expected');
-        }
-        var name = token;
+    // scale the arrow
+    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
 
-        getToken();
-        if (token != '=') {
-          throw newSyntaxError('Equal sign = expected');
-        }
-        getToken();
+    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
 
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute value expected');
-        }
-        var value = token;
-        setValue(attr, name, value); // name can be a path
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dash) {
+      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
+      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
+      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+    }
 
-        getToken();
-        if (token ==',') {
-          getToken();
-        }
+    if (properties.color !== undefined) {
+      if (util.isString(properties.color)) {
+        this.color.color = properties.color;
+        this.color.highlight = properties.color;
       }
-
-      if (token != ']') {
-        throw newSyntaxError('Bracket ] expected');
+      else {
+        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
       }
-      getToken();
     }
 
-    return attr;
-  }
+    // A node is connected when it has a from and to node.
+    this.connect();
 
-  /**
-   * Create a syntax error with extra information on current token and index.
-   * @param {String} message
-   * @returns {SyntaxError} err
-   */
-  function newSyntaxError(message) {
-    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
-  }
+    this.widthFixed = this.widthFixed || (properties.width !== undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
 
-  /**
-   * Chop off text after a maximum length
-   * @param {String} text
-   * @param {Number} maxLength
-   * @returns {String}
-   */
-  function chop (text, maxLength) {
-    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
-  }
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+
+    // set draw method based on style
+    switch (this.style) {
+      case 'line':          this.draw = this._drawLine; break;
+      case 'arrow':         this.draw = this._drawArrow; break;
+      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
+      case 'dash-line':     this.draw = this._drawDashLine; break;
+      default:              this.draw = this._drawLine; break;
+    }
+  };
 
   /**
-   * Execute a function fn for each pair of elements in two arrays
-   * @param {Array | *} array1
-   * @param {Array | *} array2
-   * @param {function} fn
+   * Connect an edge to its nodes
    */
-  function forEach2(array1, array2, fn) {
-    if (array1 instanceof Array) {
-      array1.forEach(function (elem1) {
-        if (array2 instanceof Array) {
-          array2.forEach(function (elem2)  {
-            fn(elem1, elem2);
-          });
-        }
-        else {
-          fn(elem1, array2);
-        }
-      });
+  Edge.prototype.connect = function () {
+    this.disconnect();
+
+    this.from = this.network.nodes[this.fromId] || null;
+    this.to = this.network.nodes[this.toId] || null;
+    this.connected = (this.from && this.to);
+
+    if (this.connected) {
+      this.from.attachEdge(this);
+      this.to.attachEdge(this);
     }
     else {
-      if (array2 instanceof Array) {
-        array2.forEach(function (elem2)  {
-          fn(array1, elem2);
-        });
+      if (this.from) {
+        this.from.detachEdge(this);
       }
-      else {
-        fn(array1, array2);
+      if (this.to) {
+        this.to.detachEdge(this);
       }
     }
-  }
+  };
 
   /**
-   * Convert a string containing a graph in DOT language into a map containing
-   * with nodes and edges in the format of graph.
-   * @param {String} data         Text containing a graph in DOT-notation
-   * @return {Object} graphData
+   * Disconnect an edge from its nodes
    */
-  function DOTToGraph (data) {
-    // parse the DOT file
-    var dotData = parseDOT(data);
-    var graphData = {
-      nodes: [],
-      edges: [],
-      options: {}
-    };
-
-    // copy the nodes
-    if (dotData.nodes) {
-      dotData.nodes.forEach(function (dotNode) {
-        var graphNode = {
-          id: dotNode.id,
-          label: String(dotNode.label || dotNode.id)
-        };
-        merge(graphNode, dotNode.attr);
-        if (graphNode.image) {
-          graphNode.shape = 'image';
-        }
-        graphData.nodes.push(graphNode);
-      });
+  Edge.prototype.disconnect = function () {
+    if (this.from) {
+      this.from.detachEdge(this);
+      this.from = null;
+    }
+    if (this.to) {
+      this.to.detachEdge(this);
+      this.to = null;
     }
 
-    // copy the edges
-    if (dotData.edges) {
-      /**
-       * Convert an edge in DOT format to an edge with VisGraph format
-       * @param {Object} dotEdge
-       * @returns {Object} graphEdge
-       */
-      function convertEdge(dotEdge) {
-        var graphEdge = {
-          from: dotEdge.from,
-          to: dotEdge.to
-        };
-        merge(graphEdge, dotEdge.attr);
-        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
-        return graphEdge;
-      }
-
-      dotData.edges.forEach(function (dotEdge) {
-        var from, to;
-        if (dotEdge.from instanceof Object) {
-          from = dotEdge.from.nodes;
-        }
-        else {
-          from = {
-            id: dotEdge.from
-          }
-        }
-
-        if (dotEdge.to instanceof Object) {
-          to = dotEdge.to.nodes;
-        }
-        else {
-          to = {
-            id: dotEdge.to
-          }
-        }
+    this.connected = false;
+  };
 
-        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
-          dotEdge.from.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
+  /**
+   * get the title of this edge.
+   * @return {string} title    The title of the edge, or undefined when no title
+   *                           has been set.
+   */
+  Edge.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-        forEach2(from, to, function (from, to) {
-          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
-          var graphEdge = convertEdge(subEdge);
-          graphData.edges.push(graphEdge);
-        });
 
-        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
-          dotEdge.to.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
-      });
-    }
+  /**
+   * Retrieve the value of the edge. Can be undefined
+   * @return {Number} value
+   */
+  Edge.prototype.getValue = function() {
+    return this.value;
+  };
 
-    // copy the options
-    if (dotData.attr) {
-      graphData.options = dotData.attr;
+  /**
+   * Adjust the value range of the edge. The edge will adjust it's width
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
+   */
+  Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+      var scale = (this.widthMax - this.widthMin) / (max - min);
+      this.width = (this.value - min) * scale + this.widthMin;
     }
+  };
 
-    return graphData;
-  }
-
-  // exports
-  exports.parseDOT = parseDOT;
-  exports.DOTToGraph = DOTToGraph;
-
-
-/***/ },
-/* 44 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Moroccan Arabic (ar-ma)
-  // author : ElFadili Yassine : https://github.com/ElFadiliY
-  // author : Abdel Said : https://github.com/abdelsaid
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ar-ma', {
-          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * Redraw a edge
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
+  };
 
+  /**
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top
+   * @return {boolean}     True if location is located on the edge
+   */
+  Edge.prototype.isOverlappingWith = function(obj) {
+    if (this.connected) {
+      var distMax = 10;
+      var xFrom = this.from.x;
+      var yFrom = this.from.y;
+      var xTo = this.to.x;
+      var yTo = this.to.y;
+      var xObj = obj.left;
+      var yObj = obj.top;
 
-/***/ },
-/* 45 */
-/***/ function(module, exports, __webpack_require__) {
+      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic Saudi Arabia (ar-sa)
-  // author : Suhail Alkowaileet : https://github.com/xsoh
+      return (dist < distMax);
+    }
+    else {
+      return false
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
+  Edge.prototype._getColor = function() {
+    var colorObj = this.color;
+    if (this.inheritColor == "to") {
+      colorObj = {
+        highlight: this.to.color.highlight.border,
+        hover: this.to.color.hover.border,
+        color: this.to.color.border
       };
-
-      return moment.lang('ar-sa', {
-          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 46 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic (ar)
-  // author : Abdel Said : https://github.com/abdelsaid
-  // changes in months, weekdays : Ahmed Elkhatib
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
+    }
+    else if (this.inheritColor == "from" || this.inheritColor == true) {
+      colorObj = {
+        highlight: this.from.color.highlight.border,
+        hover: this.from.color.hover.border,
+        color: this.from.color.border
       };
+    }
 
-      return moment.lang('ar', {
-          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    if (this.selected == true)   {return colorObj.highlight;}
+    else if (this.hover == true) {return colorObj.hover;}
+    else                         {return colorObj.color;}
+  }
 
 
-/***/ },
-/* 47 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Redraw a edge as a line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this._getColor();
+    ctx.lineWidth   = this._getLineWidth();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : azerbaijani (az)
-  // author : topchiyev : https://github.com/topchiyev
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // draw label
+      var point;
+      if (this.label) {
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
       }
-  }(function (moment) {
-
-      var suffixes = {
-          1: "-inci",
-          5: "-inci",
-          8: "-inci",
-          70: "-inci",
-          80: "-inci",
-
-          2: "-nci",
-          7: "-nci",
-          20: "-nci",
-          50: "-nci",
-
-          3: "-üncü",
-          4: "-üncü",
-          100: "-üncü",
-
-          6: "-ncı",
+    }
+    else {
+      var x, y;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      this._circle(ctx, x, y, radius);
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      this._label(ctx, this.label, point.x, point.y);
+    }
+  };
 
-          9: "-uncu",
-          10: "-uncu",
-          30: "-uncu",
+  /**
+   * Get the line width of the edge. Depends on width and whether one of the
+   * connected nodes is selected.
+   * @return {Number} width
+   * @private
+   */
+  Edge.prototype._getLineWidth = function() {
+    if (this.selected == true) {
+      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
+    }
+    else {
+      if (this.hover == true) {
+        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
+      }
+      else {
+        return this.width*this.networkScaleInv;
+      }
+    }
+  };
 
-          60: "-ıncı",
-          90: "-ıncı"
-      };
-      return moment.lang('az', {
-          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
-          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
-          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
-          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
-          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[sabah saat] LT',
-              nextWeek : '[gələn həftə] dddd [saat] LT',
-              lastDay : '[dünən] LT',
-              lastWeek : '[keçən həftə] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s əvvəl",
-              s : "birneçə saniyyə",
-              m : "bir dəqiqə",
-              mm : "%d dəqiqə",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir il",
-              yy : "%d il"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "gecə";
-              } else if (hour < 12) {
-                  return "səhər";
-              } else if (hour < 17) {
-                  return "gündüz";
-              } else {
-                  return "axşam";
-              }
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "-ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+  Edge.prototype._getViaCoordinates = function () {
+    var xVia = null;
+    var yVia = null;
+    var factor = this.smoothCurves.roundness;
+    var type = this.smoothCurves.type;
+    if (factor == 0) {
+      return {x:null,y:null};
+    }
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+    var dx = Math.abs(this.from.x - this.to.x);
+    var dy = Math.abs(this.from.y - this.to.y);
+    if (type == 'discrete' || type == 'diagonalCross') {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
           }
-      });
-  }));
-
-
-/***/ },
-/* 48 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bulgarian (bg)
-  // author : Krasen Borisov : https://github.com/kraz
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('bg', {
-          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
-          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Днес в] LT',
-              nextDay : '[Утре в] LT',
-              nextWeek : 'dddd [в] LT',
-              lastDay : '[Вчера в] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[В изминалата] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[В изминалия] dddd [в] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "след %s",
-              past : "преди %s",
-              s : "няколко секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дни",
-              M : "месец",
-              MM : "%d месеца",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 49 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bengali (bn)
-  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '১',
-          '2': '২',
-          '3': '৩',
-          '4': '৪',
-          '5': '৫',
-          '6': '৬',
-          '7': '৭',
-          '8': '৮',
-          '9': '৯',
-          '0': '০'
-      },
-      numberMap = {
-          '১': '1',
-          '২': '2',
-          '৩': '3',
-          '৪': '4',
-          '৫': '5',
-          '৬': '6',
-          '৭': '7',
-          '৮': '8',
-          '৯': '9',
-          '০': '0'
-      };
-
-      return moment.lang('bn', {
-          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
-          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
-          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
-          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
-          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm সময়",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[আজ] LT',
-              nextDay : '[আগামীকাল] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[গতকাল] LT',
-              lastWeek : '[গত] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s পরে",
-              past : "%s আগে",
-              s : "কএক সেকেন্ড",
-              m : "এক মিনিট",
-              mm : "%d মিনিট",
-              h : "এক ঘন্টা",
-              hh : "%d ঘন্টা",
-              d : "এক দিন",
-              dd : "%d দিন",
-              M : "এক মাস",
-              MM : "%d মাস",
-              y : "এক বছর",
-              yy : "%d বছর"
-          },
-          preparse: function (string) {
-              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          //Bengali is a vast language its spoken 
-          //in different forms in various parts of the world.
-          //I have just generalized with most common one used
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "রাত";
-              } else if (hour < 10) {
-                  return "শকাল";
-              } else if (hour < 17) {
-                  return "দুপুর";
-              } else if (hour < 20) {
-                  return "বিকেল";
-              } else {
-                  return "রাত";
-              }
-          },
-          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.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 50 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : breton (br)
-  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function relativeTimeWithMutation(number, withoutSuffix, key) {
-          var format = {
-              'mm': "munutenn",
-              'MM': "miz",
-              'dd': "devezh"
-          };
-          return number + ' ' + mutation(format[key], number);
-      }
-
-      function specialMutationForYears(number) {
-          switch (lastNumber(number)) {
-          case 1:
-          case 3:
-          case 4:
-          case 5:
-          case 9:
-              return number + ' bloaz';
-          default:
-              return number + ' vloaz';
-          }
-      }
-
-      function lastNumber(number) {
-          if (number > 9) {
-              return lastNumber(number % 10);
-          }
-          return number;
-      }
-
-      function mutation(text, number) {
-          if (number === 2) {
-              return softMutation(text);
-          }
-          return text;
-      }
-
-      function softMutation(text) {
-          var mutationTable = {
-              'm': 'v',
-              'b': 'v',
-              'd': 'z'
-          };
-          if (mutationTable[text.charAt(0)] === undefined) {
-              return text;
-          }
-          return mutationTable[text.charAt(0)] + text.substring(1);
-      }
-
-      return moment.lang('br', {
-          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
-          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
-          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
-          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
-          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
-          longDateFormat : {
-              LT : "h[e]mm A",
-              L : "DD/MM/YYYY",
-              LL : "D [a viz] MMMM YYYY",
-              LLL : "D [a viz] MMMM YYYY LT",
-              LLLL : "dddd, D [a viz] MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Hiziv da] LT',
-              nextDay : '[Warc\'hoazh da] LT',
-              nextWeek : 'dddd [da] LT',
-              lastDay : '[Dec\'h da] LT',
-              lastWeek : 'dddd [paset da] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "a-benn %s",
-              past : "%s 'zo",
-              s : "un nebeud segondennoù",
-              m : "ur vunutenn",
-              mm : relativeTimeWithMutation,
-              h : "un eur",
-              hh : "%d eur",
-              d : "un devezh",
-              dd : relativeTimeWithMutation,
-              M : "ur miz",
-              MM : relativeTimeWithMutation,
-              y : "ur bloaz",
-              yy : specialMutationForYears
-          },
-          ordinal : function (number) {
-              var output = (number === 1) ? 'añ' : 'vet';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 51 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bosnian (bs)
-  // author : Nedim Cholich : https://github.com/frontyard
-  // based on (hr) translation by Bojan Marković
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
           }
-      }
-
-      return moment.lang('bs', {
-  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
-  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
-
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
           }
-      });
-  }));
-
-
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : catalan (ca)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ca', {
-          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
-          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
-          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
-          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
-          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextDay : function () {
-                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "fa %s",
-              s : "uns segons",
-              m : "un minut",
-              mm : "%d minuts",
-              h : "una hora",
-              hh : "%d hores",
-              d : "un dia",
-              dd : "%d dies",
-              M : "un mes",
-              MM : "%d mesos",
-              y : "un any",
-              yy : "%d anys"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
           }
-      });
-  }));
-
-
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : czech (cs)
-  // author : petrbela : https://github.com/petrbela
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
-          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
-
-      function plural(n) {
-          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
+        }
+        if (type == "discrete") {
+          xVia = dx < factor * dy ? this.from.x : xVia;
+        }
       }
-
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minuty' : 'minut');
-              } else {
-                  return result + 'minutami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodin');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dny' : 'dní');
-              } else {
-                  return result + 'dny';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'měsíce' : 'měsíců');
-              } else {
-                  return result + 'měsíci';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'let');
-              } else {
-                  return result + 'lety';
-              }
-              break;
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
           }
-      }
-
-      return moment.lang('cs', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
-          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
-          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
-          longDateFormat : {
-              LT: "H.mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes v] LT",
-              nextDay: '[zítra v] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [v] LT';
-                  case 3:
-                      return '[ve středu v] LT';
-                  case 4:
-                      return '[ve čtvrtek v] LT';
-                  case 5:
-                      return '[v pátek v] LT';
-                  case 6:
-                      return '[v sobotu v] LT';
-                  }
-              },
-              lastDay: '[včera v] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulou neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[minulé] dddd [v] LT';
-                  case 3:
-                      return '[minulou středu v] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [v] LT';
-                  case 6:
-                      return '[minulou sobotu v] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "před %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
           }
-      });
-  }));
-
-
-/***/ },
-/* 54 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chuvash (cv)
-  // author : Anatoly Mironov : https://github.com/mirontoli
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('cv', {
-          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
-          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
-          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
-          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
-          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
-              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
-              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
-          },
-          calendar : {
-              sameDay: '[Паян] LT [сехетре]',
-              nextDay: '[Ыран] LT [сехетре]',
-              lastDay: '[Ĕнер] LT [сехетре]',
-              nextWeek: '[Çитес] dddd LT [сехетре]',
-              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (output) {
-                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
-                  return output + affix;
-              },
-              past : "%s каялла",
-              s : "пĕр-ик çеккунт",
-              m : "пĕр минут",
-              mm : "%d минут",
-              h : "пĕр сехет",
-              hh : "%d сехет",
-              d : "пĕр кун",
-              dd : "%d кун",
-              M : "пĕр уйăх",
-              MM : "%d уйăх",
-              y : "пĕр çул",
-              yy : "%d çул"
-          },
-          ordinal : '%d-мĕш',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
           }
-      });
-  }));
-
-
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Welsh (cy)
-  // author : Robert Allen
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang("cy", {
-          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
-          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
-          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
-          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
-          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
-          // time formats are the same as en-gb
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[Heddiw am] LT',
-              nextDay: '[Yfory am] LT',
-              nextWeek: 'dddd [am] LT',
-              lastDay: '[Ddoe am] LT',
-              lastWeek: 'dddd [diwethaf am] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "mewn %s",
-              past: "%s yn ôl",
-              s: "ychydig eiliadau",
-              m: "munud",
-              mm: "%d munud",
-              h: "awr",
-              hh: "%d awr",
-              d: "diwrnod",
-              dd: "%d diwrnod",
-              M: "mis",
-              MM: "%d mis",
-              y: "blwyddyn",
-              yy: "%d flynedd"
-          },
-          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
-          ordinal: function (number) {
-              var b = number,
-                  output = '',
-                  lookup = [
-                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
-                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
-                  ];
-
-              if (b > 20) {
-                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
-                      output = 'fed'; // not 30ain, 70ain or 90ain
-                  } else {
-                      output = 'ain';
-                  }
-              } else if (b > 0) {
-                  output = lookup[b];
-              }
-
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
           }
-      });
-  }));
-
-
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : danish (da)
-  // author : Ulrik Nielsen : https://github.com/mrbase
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        }
+        if (type == "discrete") {
+          yVia = dy < factor * dx ? this.from.y : yVia;
+        }
       }
-  }(function (moment) {
-      return moment.lang('da', {
-          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd [d.] D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[I dag kl.] LT',
-              nextDay : '[I morgen kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[I går kl.] LT',
-              lastWeek : '[sidste] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "%s siden",
-              s : "få sekunder",
-              m : "et minut",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dage",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "et år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 57 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : austrian german (de-at)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
-  // author : Martin Groller : https://github.com/MadMG
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    }
+    else if (type == "straightCross") {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        xVia = this.from.x;
+        yVia = this.to.y
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        xVia = this.to.x;
+        yVia = this.from.y;
       }
-
-      return moment.lang('de-at', {
-          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+    }
+    else if (type == 'horizontal') {
+      xVia = this.to.x;
+      yVia = this.from.y;
+    }
+    else if (type == 'vertical') {
+      xVia = this.from.x;
+      yVia = this.to.y;
+    }
+    else { // continuous
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(1)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
           }
-      });
-  }));
-
+          else if (this.from.x > this.to.x) {
+  //          console.log(2)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x > xVia ? this.to.x :xVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(3)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(4, this.from.x, this.to.x)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x > xVia ? this.to.x : xVia;
+          }
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(5)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(6)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(7)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(8)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+        }
+      }
+    }
 
-/***/ },
-/* 58 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : german (de)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
+    return {x:xVia, y:yVia};
+  }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * Draw a line between two nodes
+   * @param {CanvasRenderingContext2D} ctx
+   * @private
+   */
+  Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    if (this.smoothCurves.enabled == true) {
+      if (this.smoothCurves.dynamic == false) {
+        var via = this._getViaCoordinates();
+        if (via.x == null) {
+          ctx.lineTo(this.to.x, this.to.y);
+          ctx.stroke();
+          return null;
+        }
+        else {
+  //        this.via.x = via.x;
+  //        this.via.y = via.y;
+          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+          ctx.stroke();
+          return via;
+        }
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+      else {
+        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+        ctx.stroke();
+        return this.via;
       }
+    }
+    else {
+      ctx.lineTo(this.to.x, this.to.y);
+      ctx.stroke();
+      return null;
+    }
+  };
 
-      return moment.lang('de', {
-          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 59 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Draw a line from a node to itself, a circle
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @private
+   */
+  Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : modern greek (el)
-  // author : Aggelos Karalias : https://github.com/mehiel
+  /**
+   * Draw label with white background and with the middle at (x, y)
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {Number} x
+   * @param {Number} y
+   * @private
+   */
+  Edge.prototype._label = function (ctx, text, x, y) {
+    if (text) {
+      // TODO: cache the calculated size
+      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+          this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontFill;
+      var width = ctx.measureText(text).width;
+      var height = this.fontSize;
+      var left = x - width / 2;
+      var top = y - height / 2;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('el', {
-          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
-          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
-          months : function (momentToFormat, format) {
-              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
-                  return this._monthsGenitiveEl[momentToFormat.month()];
-              } else {
-                  return this._monthsNominativeEl[momentToFormat.month()];
-              }
-          },
-          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
-          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
-          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
-          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'μμ' : 'ΜΜ';
-              } else {
-                  return isLower ? 'πμ' : 'ΠΜ';
-              }
-          },
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendarEl : {
-              sameDay : '[Σήμερα {}] LT',
-              nextDay : '[Αύριο {}] LT',
-              nextWeek : 'dddd [{}] LT',
-              lastDay : '[Χθες {}] LT',
-              lastWeek : function() {
-                  switch (this.day()) {
-                      case 6:
-                          return '[το προηγούμενο] dddd [{}] LT';
-                      default:
-                          return '[την προηγούμενη] dddd [{}] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          calendar : function (key, mom) {
-              var output = this._calendarEl[key],
-                  hours = mom && mom.hours();
+      ctx.fillRect(left, top, width, height);
 
-              if (typeof output === 'function') {
-                  output = output.apply(mom);
-              }
+      // draw text
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillText(text, left, top);
+    }
+  };
 
-              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
-          },
-          relativeTime : {
-              future : "σε %s",
-              past : "%s πριν",
-              s : "δευτερόλεπτα",
-              m : "ένα λεπτό",
-              mm : "%d λεπτά",
-              h : "μία ώρα",
-              hh : "%d ώρες",
-              d : "μία μέρα",
-              dd : "%d μέρες",
-              M : "ένας μήνας",
-              MM : "%d μήνες",
-              y : "ένας χρόνος",
-              yy : "%d χρόνια"
-          },
-          ordinal : function (number) {
-              return number + 'η';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * Redraw a edge as a dashed line
+   * Draw this edge in the given canvas
+   * @author David Jordan
+   * @date 2012-08-08
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;}
 
+    ctx.lineWidth = this._getLineWidth();
 
-/***/ },
-/* 60 */
-/***/ function(module, exports, __webpack_require__) {
+    var via = null;
+    // only firefox and chrome support this method, else we use the legacy one.
+    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+      // configure the dash pattern
+      var pattern = [0];
+      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
+        pattern = [this.dash.length,this.dash.gap];
+      }
+      else {
+        pattern = [5,5];
+      }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : australian english (en-au)
+      // set dash settings for chrome or firefox
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash(pattern);
+        ctx.lineDashOffset = 0;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      } else { //Firefox
+        ctx.mozDash = pattern;
+        ctx.mozDashOffset = 0;
       }
-  }(function (moment) {
-      return moment.lang('en-au', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+      // draw the line
+      via = this._line(ctx);
 
-/***/ },
-/* 61 */
-/***/ function(module, exports, __webpack_require__) {
+      // restore the dash settings.
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash([0]);
+        ctx.lineDashOffset = 0;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian english (en-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
+      } else { //Firefox
+        ctx.mozDash = [0];
+        ctx.mozDashOffset = 0;
+      }
+    }
+    else { // unsupporting smooth lines
+      // draw dashed line
+      ctx.beginPath();
+      ctx.lineCap = 'round';
+      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
+      }
+      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
+      }
+      else //If all else fails draw a line
+      {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+      }
+      ctx.stroke();
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // draw label
+    if (this.label) {
+      var point;
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
       }
-  }(function (moment) {
-      return moment.lang('en-ca', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM, YYYY",
-              LLL : "D MMMM, YYYY LT",
-              LLLL : "dddd, D MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          }
-      });
-  }));
+      else {
+        point = this._pointOnLine(0.5);
+      }
+      this._label(ctx, this.label, point.x, point.y);
+    }
+  };
+
+  /**
+   * Get a point on a line
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnLine = function (percentage) {
+    return {
+      x: (1 - percentage) * this.from.x + percentage * this.to.x,
+      y: (1 - percentage) * this.from.y + percentage * this.to.y
+    }
+  };
 
+  /**
+   * Get a point on a circle
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+      x: x + radius * Math.cos(angle),
+      y: y - radius * Math.sin(angle)
+    }
+  };
 
-/***/ },
-/* 62 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Redraw a edge as a line with an arrow halfway the line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawArrowCenter = function(ctx) {
+    var point;
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+    ctx.lineWidth = this._getLineWidth();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : great britain english (en-gb)
-  // author : Chris Gedrim : https://github.com/chrisgedrim
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      // draw an arrow halfway the line
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
       }
-  }(function (moment) {
-      return moment.lang('en-gb', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-/***/ },
-/* 63 */
-/***/ function(module, exports, __webpack_require__) {
+      // draw label
+      if (this.label) {
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      // draw circle
+      var x, y;
+      var radius = 0.25 * Math.max(100,this.length);
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+      }
+      this._circle(ctx, x, y, radius);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : esperanto (eo)
-  // author : Colin Dean : https://github.com/colindean
-  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
-  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
+      // draw all arrows
+      var angle = 0.2 * Math.PI;
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
       }
-  }(function (moment) {
-      return moment.lang('eo', {
-          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
-          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
-          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D[-an de] MMMM, YYYY",
-              LLL : "D[-an de] MMMM, YYYY LT",
-              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'p.t.m.' : 'P.T.M.';
-              } else {
-                  return isLower ? 'a.t.m.' : 'A.T.M.';
-              }
-          },
-          calendar : {
-              sameDay : '[Hodiaŭ je] LT',
-              nextDay : '[Morgaŭ je] LT',
-              nextWeek : 'dddd [je] LT',
-              lastDay : '[Hieraŭ je] LT',
-              lastWeek : '[pasinta] dddd [je] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "je %s",
-              past : "antaŭ %s",
-              s : "sekundoj",
-              m : "minuto",
-              mm : "%d minutoj",
-              h : "horo",
-              hh : "%d horoj",
-              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
-              dd : "%d tagoj",
-              M : "monato",
-              MM : "%d monatoj",
-              y : "jaro",
-              yy : "%d jaroj"
-          },
-          ordinal : "%da",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : spanish (es)
-  // author : Julio Napurí : https://github.com/julionc
+  /**
+   * Redraw a edge as a line with an arrow
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
+   */
+  Edge.prototype._drawArrow = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    ctx.lineWidth = this._getLineWidth();
+
+    var angle, length;
+    //draw a line
+    if (this.from != this.to) {
+      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var dx = (this.to.x - this.from.x);
+      var dy = (this.to.y - this.from.y);
+      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+
+      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+      var via;
+      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
+        via = this.via;
+      }
+      else if (this.smoothCurves.enabled == true) {
+        via = this._getViaCoordinates();
       }
-  }(function (moment) {
-      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
-          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
 
-      return moment.lang('es', {
-          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShort[m.month()];
-              } else {
-                  return monthsShortDot[m.month()];
-              }
-          },
-          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
-          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [del] YYYY",
-              LLL : "D [de] MMMM [del] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "hace %s",
-              s : "unos segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "una hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un año",
-              yy : "%d años"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+        dx = (this.to.x - via.x);
+        dy = (this.to.y - via.y);
+        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+      }
+      var toBorderDist = this.to.distanceToBorder(ctx, angle);
+      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
+      var xTo,yTo;
+      if (this.smoothCurves.enabled == true && via.x != null) {
+       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+      }
+      else {
+        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+      }
 
-/***/ },
-/* 65 */
-/***/ function(module, exports, __webpack_require__) {
+      ctx.beginPath();
+      ctx.moveTo(xFrom,yFrom);
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+      }
+      else {
+        ctx.lineTo(xTo, yTo);
+      }
+      ctx.stroke();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : estonian (et)
-  // author : Henry Kehlmann : https://github.com/madhenry
-  // improvements : Illimar Tambek : https://github.com/ragulka
+      // draw arrow at the end of the line
+      length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(xTo, yTo, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // draw label
+      if (this.label) {
+        var point;
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
-              'm' : ['ühe minuti', 'üks minut'],
-              'mm': [number + ' minuti', number + ' minutit'],
-              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
-              'hh': [number + ' tunni', number + ' tundi'],
-              'd' : ['ühe päeva', 'üks päev'],
-              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
-              'MM': [number + ' kuu', number + ' kuud'],
-              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
-              'yy': [number + ' aasta', number + ' aastat']
-          };
-          if (withoutSuffix) {
-              return format[key][2] ? format[key][2] : format[key][1];
-          }
-          return isFuture ? format[key][0] : format[key][1];
+    }
+    else {
+      // draw circle
+      var node = this.from;
+      var x, y, arrow;
+      var radius = 0.25 * Math.max(100,this.length);
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+        arrow = {
+          x: x,
+          y: node.y,
+          angle: 0.9 * Math.PI
+        };
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+        arrow = {
+          x: node.x,
+          y: y,
+          angle: 0.6 * Math.PI
+        };
       }
+      ctx.beginPath();
+      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+      ctx.stroke();
 
-      return moment.lang('et', {
-          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
-          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
-          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
-          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
-          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
-          longDateFormat : {
-              LT   : "H:mm",
-              L    : "DD.MM.YYYY",
-              LL   : "D. MMMM YYYY",
-              LLL  : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[Täna,] LT',
-              nextDay  : '[Homme,] LT',
-              nextWeek : '[Järgmine] dddd LT',
-              lastDay  : '[Eile,] LT',
-              lastWeek : '[Eelmine] dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s pärast",
-              past   : "%s tagasi",
-              s      : processRelativeTime,
-              m      : processRelativeTime,
-              mm     : processRelativeTime,
-              h      : processRelativeTime,
-              hh     : processRelativeTime,
-              d      : processRelativeTime,
-              dd     : '%d päeva',
-              M      : processRelativeTime,
-              MM     : processRelativeTime,
-              y      : processRelativeTime,
-              yy     : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      // draw all arrows
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+      ctx.fill();
+      ctx.stroke();
+
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+  };
+
+
+
+  /**
+   * Calculate the distance between a point (x3,y3) and a line segment from
+   * (x1,y1) to (x2,y2).
+   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @param {number} x3
+   * @param {number} y3
+   * @private
+   */
+  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    if (this.from != this.to) {
+      if (this.smoothCurves.enabled == true) {
+        var xVia, yVia;
+        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
+          xVia = this.via.x;
+          yVia = this.via.y;
+        }
+        else {
+          var via = this._getViaCoordinates();
+          xVia = via.x;
+          yVia = via.y;
+        }
+        var minDistance = 1e9;
+        var i,t,x,y,dx,dy;
+        for (i = 0; i < 10; i++) {
+          t = 0.1*i;
+          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+          dx = Math.abs(x3-x);
+          dy = Math.abs(y3-y);
+          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
+        }
+        return minDistance
+      }
+      else {
+        var px = x2-x1,
+            py = y2-y1,
+            something = px*px + py*py,
+            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
 
+        if (u > 1) {
+          u = 1;
+        }
+        else if (u < 0) {
+          u = 0;
+        }
 
-/***/ },
-/* 66 */
-/***/ function(module, exports, __webpack_require__) {
+        var x = x1 + u * px,
+            y = y1 + u * py,
+            dx = x - x3,
+            dy = y - y3;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : euskara (eu)
-  // author : Eneko Illarramendi : https://github.com/eillarra
+        //# Note: If the actual distance does not matter,
+        //# if you only want to compare what this function
+        //# returns to other results of this function, you
+        //# can just return the squared distance instead
+        //# (i.e. remove the sqrt) to gain a little performance
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        return Math.sqrt(dx*dx + dy*dy);
       }
-  }(function (moment) {
-      return moment.lang('eu', {
-          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
-          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
-          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
-          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
-          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY[ko] MMMM[ren] D[a]",
-              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
-              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
-              l : "YYYY-M-D",
-              ll : "YYYY[ko] MMM D[a]",
-              lll : "YYYY[ko] MMM D[a] LT",
-              llll : "ddd, YYYY[ko] MMM D[a] LT"
-          },
-          calendar : {
-              sameDay : '[gaur] LT[etan]',
-              nextDay : '[bihar] LT[etan]',
-              nextWeek : 'dddd LT[etan]',
-              lastDay : '[atzo] LT[etan]',
-              lastWeek : '[aurreko] dddd LT[etan]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s barru",
-              past : "duela %s",
-              s : "segundo batzuk",
-              m : "minutu bat",
-              mm : "%d minutu",
-              h : "ordu bat",
-              hh : "%d ordu",
-              d : "egun bat",
-              dd : "%d egun",
-              M : "hilabete bat",
-              MM : "%d hilabete",
-              y : "urte bat",
-              yy : "%d urte"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
-
+    }
+    else {
+      var x, y, dx, dy;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      dx = x - x3;
+      dy = y - y3;
+      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+    }
+  };
 
-/***/ },
-/* 67 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Persian Language
-  // author : Ebrahim Byagowi : https://github.com/ebraminio
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '۱',
-          '2': '۲',
-          '3': '۳',
-          '4': '۴',
-          '5': '۵',
-          '6': '۶',
-          '7': '۷',
-          '8': '۸',
-          '9': '۹',
-          '0': '۰'
-      }, numberMap = {
-          '۱': '1',
-          '۲': '2',
-          '۳': '3',
-          '۴': '4',
-          '۵': '5',
-          '۶': '6',
-          '۷': '7',
-          '۸': '8',
-          '۹': '9',
-          '۰': '0'
-      };
+  /**
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
+   */
+  Edge.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+  };
 
-      return moment.lang('fa', {
-          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
-          longDateFormat : {
-              LT : 'HH:mm',
-              L : 'DD/MM/YYYY',
-              LL : 'D MMMM YYYY',
-              LLL : 'D MMMM YYYY LT',
-              LLLL : 'dddd, D MMMM YYYY LT'
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "قبل از ظهر";
-              } else {
-                  return "بعد از ظهر";
-              }
-          },
-          calendar : {
-              sameDay : '[امروز ساعت] LT',
-              nextDay : '[فردا ساعت] LT',
-              nextWeek : 'dddd [ساعت] LT',
-              lastDay : '[دیروز ساعت] LT',
-              lastWeek : 'dddd [پیش] [ساعت] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : 'در %s',
-              past : '%s پیش',
-              s : 'چندین ثانیه',
-              m : 'یک دقیقه',
-              mm : '%d دقیقه',
-              h : 'یک ساعت',
-              hh : '%d ساعت',
-              d : 'یک روز',
-              dd : '%d روز',
-              M : 'یک ماه',
-              MM : '%d ماه',
-              y : 'یک سال',
-              yy : '%d سال'
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          ordinal : '%dم',
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12 // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  Edge.prototype.select = function() {
+    this.selected = true;
+  };
 
-/***/ },
-/* 68 */
-/***/ function(module, exports, __webpack_require__) {
+  Edge.prototype.unselect = function() {
+    this.selected = false;
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : finnish (fi)
-  // author : Tarmo Aidantausta : https://github.com/bleadof
+  Edge.prototype.positionBezierNode = function() {
+    if (this.via !== null) {
+      this.via.x = 0.5 * (this.from.x + this.to.x);
+      this.via.y = 0.5 * (this.from.y + this.to.y);
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
+   * @param ctx
+   */
+  Edge.prototype._drawControlNodes = function(ctx) {
+    if (this.controlNodesEnabled == true) {
+      if (this.controlNodes.from === null && this.controlNodes.to === null) {
+        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+        var nodeIdTo = "edgeIdTo:".concat(this.id);
+        var constants = {
+                        nodes:{group:'', radius:8},
+                        physics:{damping:0},
+                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+                        };
+        this.controlNodes.from = new Node(
+          {id:nodeIdFrom,
+            shape:'dot',
+              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+        this.controlNodes.to = new Node(
+          {id:nodeIdTo,
+            shape:'dot',
+            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
       }
-  }(function (moment) {
-      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
-          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
-                            numbersPast[7], numbersPast[8], numbersPast[9]];
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = "";
-          switch (key) {
-          case 's':
-              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
-          case 'm':
-              return isFuture ? 'minuutin' : 'minuutti';
-          case 'mm':
-              result = isFuture ? 'minuutin' : 'minuuttia';
-              break;
-          case 'h':
-              return isFuture ? 'tunnin' : 'tunti';
-          case 'hh':
-              result = isFuture ? 'tunnin' : 'tuntia';
-              break;
-          case 'd':
-              return isFuture ? 'päivän' : 'päivä';
-          case 'dd':
-              result = isFuture ? 'päivän' : 'päivää';
-              break;
-          case 'M':
-              return isFuture ? 'kuukauden' : 'kuukausi';
-          case 'MM':
-              result = isFuture ? 'kuukauden' : 'kuukautta';
-              break;
-          case 'y':
-              return isFuture ? 'vuoden' : 'vuosi';
-          case 'yy':
-              result = isFuture ? 'vuoden' : 'vuotta';
-              break;
-          }
-          result = verbalNumber(number, isFuture) + " " + result;
-          return result;
+      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+        this.controlNodes.positions = this.getControlNodePositions(ctx);
+        this.controlNodes.from.x = this.controlNodes.positions.from.x;
+        this.controlNodes.from.y = this.controlNodes.positions.from.y;
+        this.controlNodes.to.x = this.controlNodes.positions.to.x;
+        this.controlNodes.to.y = this.controlNodes.positions.to.y;
       }
 
-      function verbalNumber(number, isFuture) {
-          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
-      }
+      this.controlNodes.from.draw(ctx);
+      this.controlNodes.to.draw(ctx);
+    }
+    else {
+      this.controlNodes = {from:null, to:null, positions:{}};
+    }
+  };
 
-      return moment.lang('fi', {
-          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
-          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
-          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
-          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
-          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD.MM.YYYY",
-              LL : "Do MMMM[ta] YYYY",
-              LLL : "Do MMMM[ta] YYYY, [klo] LT",
-              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
-              l : "D.M.YYYY",
-              ll : "Do MMM YYYY",
-              lll : "Do MMM YYYY, [klo] LT",
-              llll : "ddd, Do MMM YYYY, [klo] LT"
-          },
-          calendar : {
-              sameDay : '[tänään] [klo] LT',
-              nextDay : '[huomenna] [klo] LT',
-              nextWeek : 'dddd [klo] LT',
-              lastDay : '[eilen] [klo] LT',
-              lastWeek : '[viime] dddd[na] [klo] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s päästä",
-              past : "%s sitten",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : "%d.",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * Enable control nodes.
+   * @private
+   */
+  Edge.prototype._enableControlNodes = function() {
+    this.controlNodesEnabled = true;
+  };
 
+  /**
+   * disable control nodes
+   * @private
+   */
+  Edge.prototype._disableControlNodes = function() {
+    this.controlNodesEnabled = false;
+  };
 
-/***/ },
-/* 69 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+   * @param x
+   * @param y
+   * @returns {null}
+   * @private
+   */
+  Edge.prototype._getSelectedControlNode = function(x,y) {
+    var positions = this.controlNodes.positions;
+    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : faroese (fo)
-  // author : Ragnar Johannesen : https://github.com/ragnar123
+    if (fromDistance < 15) {
+      this.connectedNode = this.from;
+      this.from = this.controlNodes.from;
+      return this.controlNodes.from;
+    }
+    else if (toDistance < 15) {
+      this.connectedNode = this.to;
+      this.to = this.controlNodes.to;
+      return this.controlNodes.to;
+    }
+    else {
+      return null;
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('fo', {
-          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
-          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
-          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D. MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Í dag kl.] LT',
-              nextDay : '[Í morgin kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[Í gjár kl.] LT',
-              lastWeek : '[síðstu] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "um %s",
-              past : "%s síðani",
-              s : "fá sekund",
-              m : "ein minutt",
-              mm : "%d minuttir",
-              h : "ein tími",
-              hh : "%d tímar",
-              d : "ein dagur",
-              dd : "%d dagar",
-              M : "ein mánaði",
-              MM : "%d mánaðir",
-              y : "eitt ár",
-              yy : "%d ár"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * this resets the control nodes to their original position.
+   * @private
+   */
+  Edge.prototype._restoreControlNodes = function() {
+    if (this.controlNodes.from.selected == true) {
+      this.from = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.from.unselect();
+    }
+    if (this.controlNodes.to.selected == true) {
+      this.to = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.to.unselect();
+    }
+  };
+
+  /**
+   * this calculates the position of the control nodes on the edges of the parent nodes.
+   *
+   * @param ctx
+   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
+   */
+  Edge.prototype.getControlNodePositions = function(ctx) {
+    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+    var dx = (this.to.x - this.from.x);
+    var dy = (this.to.y - this.from.y);
+    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+    var via;
+    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
+      via = this.via;
+    }
+    else if (this.smoothCurves.enabled == true) {
+      via = this._getViaCoordinates();
+    }
 
-/***/ },
-/* 70 */
-/***/ function(module, exports, __webpack_require__) {
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+      dx = (this.to.x - via.x);
+      dy = (this.to.y - via.y);
+      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    }
+    var toBorderDist = this.to.distanceToBorder(ctx, angle);
+    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian french (fr-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
+    var xTo,yTo;
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+    }
+    else {
+      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('fr-ca', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
-          },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
-          }
-      });
-  }));
+    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+  };
 
+  module.exports = Edge;
 
 /***/ },
-/* 71 */
+/* 44 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : french (fr)
-  // author : John Fischer : https://github.com/jfroffice
+  /**
+   * Popup is a class to create a popup window with some text
+   * @param {Element}  container     The container object.
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {String} [text]
+   * @param {Object} [style]     An object containing borderColor,
+   *                             backgroundColor, etc.
+   */
+  function Popup(container, x, y, text, style) {
+    if (container) {
+      this.container = container;
+    }
+    else {
+      this.container = document.body;
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
+    // x, y and text are optional, see if a style object was passed in their place
+    if (style === undefined) {
+      if (typeof x === "object") {
+        style = x;
+        x = undefined;
+      } else if (typeof text === "object") {
+        style = text;
+        text = undefined;
       } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('fr', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
-          },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+        // for backwards compatibility, in case clients other than Network are creating Popup directly
+        style = {
+          fontColor: 'black',
+          fontSize: 14, // px
+          fontFace: 'verdana',
+          color: {
+            border: '#666',
+            background: '#FFFFC6'
           }
-      });
-  }));
+        }
+      }
+    }
 
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
 
-/***/ },
-/* 72 */
-/***/ function(module, exports, __webpack_require__) {
+    if (x !== undefined && y !== undefined ) {
+      this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+      this.setText(text);
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : galician (gl)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+    // create the frame
+    this.frame = document.createElement("div");
+    var styleAttr = this.frame.style;
+    styleAttr.position = "absolute";
+    styleAttr.visibility = "hidden";
+    styleAttr.border = "1px solid " + style.color.border;
+    styleAttr.color = style.fontColor;
+    styleAttr.fontSize = style.fontSize + "px";
+    styleAttr.fontFamily = style.fontFace;
+    styleAttr.padding = this.padding + "px";
+    styleAttr.backgroundColor = style.color.background;
+    styleAttr.borderRadius = "3px";
+    styleAttr.MozBorderRadius = "3px";
+    styleAttr.WebkitBorderRadius = "3px";
+    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    styleAttr.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+  }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('gl', {
-          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
-          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
-          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
-          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              lastDay : function () {
-                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : function (str) {
-                  if (str === "uns segundos") {
-                      return "nuns segundos";
-                  }
-                  return "en " + str;
-              },
-              past : "hai %s",
-              s : "uns segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "unha hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * @param {number} x   Horizontal position of the popup window
+   * @param {number} y   Vertical position of the popup window
+   */
+  Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
+  };
 
+  /**
+   * Set the text for the popup window. This can be HTML code
+   * @param {string} text
+   */
+  Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
+  };
 
-/***/ },
-/* 73 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Show the popup window
+   * @param {boolean} show    Optional. Show or hide the window
+   */
+  Popup.prototype.show = function (show) {
+    if (show === undefined) {
+      show = true;
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Hebrew (he)
-  // author : Tomer Cohen : https://github.com/tomer
-  // author : Moshe Simantov : https://github.com/DevelopmentIL
-  // author : Tal Ater : https://github.com/TalAter
+    if (show) {
+      var height = this.frame.clientHeight;
+      var width =  this.frame.clientWidth;
+      var maxHeight = this.frame.parentNode.clientHeight;
+      var maxWidth = this.frame.parentNode.clientWidth;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var top = (this.y - height);
+      if (top + height + this.padding > maxHeight) {
+        top = maxHeight - height - this.padding;
+      }
+      if (top < this.padding) {
+        top = this.padding;
       }
-  }(function (moment) {
-      return moment.lang('he', {
-          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
-          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
-          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
-          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
-          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [ב]MMMM YYYY",
-              LLL : "D [ב]MMMM YYYY LT",
-              LLLL : "dddd, D [ב]MMMM YYYY LT",
-              l : "D/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[היום ב־]LT',
-              nextDay : '[מחר ב־]LT',
-              nextWeek : 'dddd [בשעה] LT',
-              lastDay : '[אתמול ב־]LT',
-              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "בעוד %s",
-              past : "לפני %s",
-              s : "מספר שניות",
-              m : "דקה",
-              mm : "%d דקות",
-              h : "שעה",
-              hh : function (number) {
-                  if (number === 2) {
-                      return "שעתיים";
-                  }
-                  return number + " שעות";
-              },
-              d : "יום",
-              dd : function (number) {
-                  if (number === 2) {
-                      return "יומיים";
-                  }
-                  return number + " ימים";
-              },
-              M : "חודש",
-              MM : function (number) {
-                  if (number === 2) {
-                      return "חודשיים";
-                  }
-                  return number + " חודשים";
-              },
-              y : "שנה",
-              yy : function (number) {
-                  if (number === 2) {
-                      return "שנתיים";
-                  }
-                  return number + " שנים";
-              }
-          }
-      });
-  }));
-
-
-/***/ },
-/* 74 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hindi (hi)
-  // author : Mayank Singhal : https://github.com/mayanksinghal
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var left = this.x;
+      if (left + width + this.padding > maxWidth) {
+        left = maxWidth - width - this.padding;
+      }
+      if (left < this.padding) {
+        left = this.padding;
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
 
-      return moment.lang('hi', {
-          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
-          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm बजे",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[कल] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[कल] LT',
-              lastWeek : '[पिछले] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s में",
-              past : "%s पहले",
-              s : "कुछ ही क्षण",
-              m : "एक मिनट",
-              mm : "%d मिनट",
-              h : "एक घंटा",
-              hh : "%d घंटे",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महीने",
-              MM : "%d महीने",
-              y : "एक वर्ष",
-              yy : "%d वर्ष"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
-          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "रात";
-              } else if (hour < 10) {
-                  return "सुबह";
-              } else if (hour < 17) {
-                  return "दोपहर";
-              } else if (hour < 20) {
-                  return "शाम";
-              } else {
-                  return "रात";
-              }
-          },
-          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.frame.style.left = left + "px";
+      this.frame.style.top = top + "px";
+      this.frame.style.visibility = "visible";
+    }
+    else {
+      this.hide();
+    }
+  };
+
+  /**
+   * Hide the popup window
+   */
+  Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
+  };
+
+  module.exports = Popup;
 
 
 /***/ },
-/* 75 */
+/* 45 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hrvatski (hr)
-  // author : Bojan Marković : https://github.com/bmarkovic
-
-  // based on (sl) translation by Robert Sedovšek
+  var PhysicsMixin = __webpack_require__(46);
+  var ClusterMixin = __webpack_require__(50);
+  var SectorsMixin = __webpack_require__(51);
+  var SelectionMixin = __webpack_require__(52);
+  var ManipulationMixin = __webpack_require__(53);
+  var NavigationMixin = __webpack_require__(54);
+  var HierarchicalLayoutMixin = __webpack_require__(55);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * Load a mixin into the network object
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
+   * @private
+   */
+  exports._loadMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = sourceVariable[mixinFunction];
       }
-  }(function (moment) {
+    }
+  };
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
-          }
+
+  /**
+   * removes a mixin from the network object.
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
+   * @private
+   */
+  exports._clearMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = undefined;
       }
+    }
+  };
 
-      return moment.lang('hr', {
-          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
-          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * Mixin the physics system and initialize the parameters required.
+   *
+   * @private
+   */
+  exports._loadPhysicsSystem = function () {
+    this._loadMixin(PhysicsMixin);
+    this._loadSelectedForceSolver();
+    if (this.constants.configurePhysics == true) {
+      this._loadPhysicsConfiguration();
+    }
+  };
 
 
-/***/ },
-/* 76 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Mixin the cluster system and initialize the parameters required.
+   *
+   * @private
+   */
+  exports._loadClusterSystem = function () {
+    this.clusterSession = 0;
+    this.hubThreshold = 5;
+    this._loadMixin(ClusterMixin);
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hungarian (hu)
-  // author : Adam Brunner : https://github.com/adambrunner
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
+  /**
+   * Mixin the sector system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadSectorSystem = function () {
+    this.sectors = {};
+    this.activeSector = ["default"];
+    this.sectors["active"] = {};
+    this.sectors["active"]["default"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
+    this.sectors["frozen"] = {};
+    this.sectors["support"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var num = number,
-              suffix;
+    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
 
-          switch (key) {
-          case 's':
-              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
-          case 'm':
-              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'mm':
-              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'h':
-              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'hh':
-              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'd':
-              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'dd':
-              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'M':
-              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'MM':
-              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'y':
-              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
-          case 'yy':
-              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
-          }
+    this._loadMixin(SectorsMixin);
+  };
 
-          return '';
-      }
 
-      function week(isFuture) {
-          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
-      }
+  /**
+   * Mixin the selection system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadSelectionSystem = function () {
+    this.selectionObj = {nodes: {}, edges: {}};
 
-      return moment.lang('hu', {
-          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
-          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
-          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
-          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
-          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "YYYY.MM.DD.",
-              LL : "YYYY. MMMM D.",
-              LLL : "YYYY. MMMM D., LT",
-              LLLL : "YYYY. MMMM D., dddd LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 12) {
-                  return isLower === true ? 'de' : 'DE';
-              } else {
-                  return isLower === true ? 'du' : 'DU';
-              }
-          },
-          calendar : {
-              sameDay : '[ma] LT[-kor]',
-              nextDay : '[holnap] LT[-kor]',
-              nextWeek : function () {
-                  return week.call(this, true);
-              },
-              lastDay : '[tegnap] LT[-kor]',
-              lastWeek : function () {
-                  return week.call(this, false);
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s múlva",
-              past : "%s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    this._loadMixin(SelectionMixin);
+  };
 
 
-/***/ },
-/* 77 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Mixin the navigationUI (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadManipulationSystem = function () {
+    // reset global variables -- these are used by the selection of nodes and edges.
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Armenian (hy-am)
-  // author : Armendarabyan : https://github.com/armendarabyan
+    if (this.constants.dataManipulation.enabled == true) {
+      // load the manipulator HTML elements. All styling done in css.
+      if (this.manipulationDiv === undefined) {
+        this.manipulationDiv = document.createElement('div');
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
+        if (this.editMode == true) {
+          this.manipulationDiv.style.display = "block";
+        }
+        else {
+          this.manipulationDiv.style.display = "none";
+        }
+        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
+      }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      if (this.editModeDiv === undefined) {
+        this.editModeDiv = document.createElement('div');
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
+        if (this.editMode == true) {
+          this.editModeDiv.style.display = "none";
+        }
+        else {
+          this.editModeDiv.style.display = "block";
+        }
+        this.containerElement.insertBefore(this.editModeDiv, this.frame);
       }
-  }(function (moment) {
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
-              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
-          },
+      if (this.closeDiv === undefined) {
+        this.closeDiv = document.createElement('div');
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
+        this.closeDiv.style.display = this.manipulationDiv.style.display;
+        this.containerElement.insertBefore(this.closeDiv, this.frame);
+      }
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+      // load the manipulation functions
+      this._loadMixin(ManipulationMixin);
 
-          return months[nounCase][m.month()];
+      // create the manipulator toolbar
+      this._createManipulatorBar();
+    }
+    else {
+      if (this.manipulationDiv !== undefined) {
+        // removes all the bindings and overloads
+        this._createManipulatorBar();
+        // remove the manipulation divs
+        this.containerElement.removeChild(this.manipulationDiv);
+        this.containerElement.removeChild(this.editModeDiv);
+        this.containerElement.removeChild(this.closeDiv);
+
+        this.manipulationDiv = undefined;
+        this.editModeDiv = undefined;
+        this.closeDiv = undefined;
+        // remove the mixin functions
+        this._clearMixin(ManipulationMixin);
       }
+    }
+  };
 
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
 
-          return monthsShort[m.month()];
-      }
+  /**
+   * Mixin the navigation (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadNavigationControls = function () {
+    this._loadMixin(NavigationMixin);
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
+    // the clean function removes the button divs, this is done to remove the bindings.
+    this._cleanNavigation();
+    if (this.constants.navigation.enabled == true) {
+      this._loadNavigationElements();
+    }
+  };
 
-          return weekdays[m.day()];
-      }
 
-      return moment.lang('hy-am', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY թ.",
-              LLL : "D MMMM YYYY թ., LT",
-              LLLL : "dddd, D MMMM YYYY թ., LT"
-          },
-          calendar : {
-              sameDay: '[այսօր] LT',
-              nextDay: '[վաղը] LT',
-              lastDay: '[երեկ] LT',
-              nextWeek: function () {
-                  return 'dddd [օրը ժամը] LT';
-              },
-              lastWeek: function () {
-                  return '[անցած] dddd [օրը ժամը] LT';
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "%s հետո",
-              past : "%s առաջ",
-              s : "մի քանի վայրկյան",
-              m : "րոպե",
-              mm : "%d րոպե",
-              h : "ժամ",
-              hh : "%d ժամ",
-              d : "օր",
-              dd : "%d օր",
-              M : "ամիս",
-              MM : "%d ամիս",
-              y : "տարի",
-              yy : "%d տարի"
-          },
+  /**
+   * Mixin the hierarchical layout system.
+   *
+   * @private
+   */
+  exports._loadHierarchySystem = function () {
+    this._loadMixin(HierarchicalLayoutMixin);
+  };
 
-          meridiem : function (hour) {
-              if (hour < 4) {
-                  return "գիշերվա";
-              } else if (hour < 12) {
-                  return "առավոտվա";
-              } else if (hour < 17) {
-                  return "ցերեկվա";
-              } else {
-                  return "երեկոյան";
-              }
-          },
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'DDD':
-              case 'w':
-              case 'W':
-              case 'DDDo':
-                  if (number === 1) {
-                      return number + '-ին';
-                  }
-                  return number + '-րդ';
-              default:
-                  return number;
-              }
-          },
+/***/ },
+/* 46 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var RepulsionMixin = __webpack_require__(47);
+  var HierarchialRepulsionMixin = __webpack_require__(48);
+  var BarnesHutMixin = __webpack_require__(49);
+
+  /**
+   * 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();
+  };
+
+
+  /**
+   * 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);
+
+      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;
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      this._loadMixin(BarnesHutMixin);
+    }
+    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(RepulsionMixin);
 
+      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;
 
-/***/ },
-/* 78 */
-/***/ function(module, exports, __webpack_require__) {
+      this._loadMixin(HierarchialRepulsionMixin);
+    }
+    else {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
+      this.barnesHutTree = undefined;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Indonesia (id)
-  // author : Mohammad Satrio Utomo : https://github.com/tyok
-  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
+      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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      this._loadMixin(RepulsionMixin);
+    }
+  };
+
+  /**
+   * 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);
       }
-  }(function (moment) {
-      return moment.lang('id', {
-          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
-          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
-          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
-          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'siang';
-              } else if (hours < 19) {
-                  return 'sore';
-              } else {
-                  return 'malam';
-              }
-          },
-          calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Besok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kemarin pukul] LT',
-              lastWeek : 'dddd [lalu pukul] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lalu",
-              s : "beberapa detik",
-              m : "semenit",
-              mm : "%d menit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+      // we now start the force calculation
+      this._calculateForces();
+    }
+  };
 
-/***/ },
-/* 79 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : icelandic (is)
-  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
+  /**
+   * 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
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    this._calculateGravitationalForces();
+    this._calculateNodeForces();
+
+    if (this.constants.physics.springConstant > 0) {
+      if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+        this._calculateSpringForcesWithSupport();
       }
-  }(function (moment) {
-      function plural(n) {
-          if (n % 100 === 11) {
-              return true;
-          } else if (n % 10 === 1) {
-              return false;
-          }
-          return true;
+      else {
+        if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+          this._calculateHierarchicalSpringForces();
+        }
+        else {
+          this._calculateSpringForces();
+        }
       }
+    }
+  };
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':
-              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
-          case 'm':
-              return withoutSuffix ? 'mínúta' : 'mínútu';
-          case 'mm':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
-              } else if (withoutSuffix) {
-                  return result + 'mínúta';
-              }
-              return result + 'mínútu';
-          case 'hh':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
-              }
-              return result + 'klukkustund';
-          case 'd':
-              if (withoutSuffix) {
-                  return 'dagur';
-              }
-              return isFuture ? 'dag' : 'degi';
-          case 'dd':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'dagar';
-                  }
-                  return result + (isFuture ? 'daga' : 'dögum');
-              } else if (withoutSuffix) {
-                  return result + 'dagur';
-              }
-              return result + (isFuture ? 'dag' : 'degi');
-          case 'M':
-              if (withoutSuffix) {
-                  return 'mánuður';
-              }
-              return isFuture ? 'mánuð' : 'mánuði';
-          case 'MM':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'mánuðir';
-                  }
-                  return result + (isFuture ? 'mánuði' : 'mánuðum');
-              } else if (withoutSuffix) {
-                  return result + 'mánuður';
-              }
-              return result + (isFuture ? 'mánuð' : 'mánuði');
-          case 'y':
-              return withoutSuffix || isFuture ? 'ár' : 'ári';
-          case 'yy':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
-              }
-              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
+
+  /**
+   * 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.
+   *
+   * @private
+   */
+  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);
           }
+        }
       }
 
-      return moment.lang('is', {
-          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
-          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
-          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
-          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
-          },
-          calendar : {
-              sameDay : '[í dag kl.] LT',
-              nextDay : '[á morgun kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[í gær kl.] LT',
-              lastWeek : '[síðasta] dddd [kl.] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "eftir %s",
-              past : "fyrir %s síðan",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : "klukkustund",
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      for (var idx in this.calculationNodes) {
+        if (this.calculationNodes.hasOwnProperty(idx)) {
+          this.calculationNodeIndices.push(idx);
+        }
+      }
+    }
+    else {
+      this.calculationNodes = this.nodes;
+      this.calculationNodeIndices = this.nodeIndices;
+    }
+  };
 
 
-/***/ },
-/* 80 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : italian (it)
-  // author : Lorenzo : https://github.com/aliem
-  // author: Mattia Larentis: https://github.com/nostalgiaz
+    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);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        gravityForce = (distance == 0) ? 0 : (gravity / distance);
+        node.fx = dx * gravityForce;
+        node.fy = dy * gravityForce;
       }
-  }(function (moment) {
-      return moment.lang('it', {
-          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
-          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
-          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
-          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
-          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Oggi alle] LT',
-              nextDay: '[Domani alle] LT',
-              nextWeek: 'dddd [alle] LT',
-              lastDay: '[Ieri alle] LT',
-              lastWeek: '[lo scorso] dddd [alle] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (s) {
-                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
-              },
-              past : "%s fa",
-              s : "alcuni secondi",
-              m : "un minuto",
-              mm : "%d minuti",
-              h : "un'ora",
-              hh : "%d ore",
-              d : "un giorno",
-              dd : "%d giorni",
-              M : "un mese",
-              MM : "%d mesi",
-              y : "un anno",
-              yy : "%d anni"
-          },
-          ordinal: '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      else {
+        node.fx = 0;
+        node.fy = 0;
+      }
+    }
+  };
 
 
-/***/ },
-/* 81 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : japanese (ja)
-  // author : LI Long : https://github.com/baryon
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ja', {
-          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
-          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
-          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
-          longDateFormat : {
-              LT : "Ah時m分",
-              L : "YYYY/MM/DD",
-              LL : "YYYY年M月D日",
-              LLL : "YYYY年M月D日LT",
-              LLLL : "YYYY年M月D日LT dddd"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "午前";
-              } else {
-                  return "午後";
-              }
-          },
-          calendar : {
-              sameDay : '[今日] LT',
-              nextDay : '[明日] LT',
-              nextWeek : '[来週]dddd LT',
-              lastDay : '[昨日] LT',
-              lastWeek : '[前週]dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s後",
-              past : "%s前",
-              s : "数秒",
-              m : "1分",
-              mm : "%d分",
-              h : "1時間",
-              hh : "%d時間",
-              d : "1日",
-              dd : "%d日",
-              M : "1ヶ月",
-              MM : "%dヶ月",
-              y : "1年",
-              yy : "%d年"
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    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)) {
+            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance == 0) {
+              distance = 0.01;
+            }
+
+            // 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 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;
 
-/***/ },
-/* 82 */
-/***/ function(module, exports, __webpack_require__) {
+    // 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Georgian (ka)
-  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
+              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+
+              // 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);
+            }
+          }
+        }
       }
-  }(function (moment) {
+    }
+  };
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
-              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
-          },
 
-          nounCase = (/D[oD] *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+  /**
+   * 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;
 
-          return months[nounCase][m.month()];
-      }
+    dx = (node1.x - node2.x);
+    dy = (node1.y - node2.y);
+    distance = Math.sqrt(dx * dx + dy * dy);
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
-              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
-          },
+    if (distance == 0) {
+      distance = 0.01;
+    }
 
-          nounCase = (/(წინა|შემდეგ)/).test(format) ?
-              'accusative' :
-              'nominative';
+    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-          return weekdays[nounCase][m.day()];
-      }
+    fx = dx * springForce;
+    fy = dy * springForce;
 
-      return moment.lang('ka', {
-          months : monthsCaseReplace,
-          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
-          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[დღეს] LT[-ზე]',
-              nextDay : '[ხვალ] LT[-ზე]',
-              lastDay : '[გუშინ] LT[-ზე]',
-              nextWeek : '[შემდეგ] dddd LT[-ზე]',
-              lastWeek : '[წინა] dddd LT-ზე',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : function (s) {
-                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
-                      s.replace(/ი$/, "ში") :
-                      s + "ში";
-              },
-              past : function (s) {
-                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
-                      return s.replace(/(ი|ე)$/, "ის წინ");
-                  }
-                  if ((/წელი/).test(s)) {
-                      return s.replace(/წელი$/, "წლის წინ");
-                  }
-              },
-              s : "რამდენიმე წამი",
-              m : "წუთი",
-              mm : "%d წუთი",
-              h : "საათი",
-              hh : "%d საათი",
-              d : "დღე",
-              dd : "%d დღე",
-              M : "თვე",
-              MM : "%d თვე",
-              y : "წელი",
-              yy : "%d წელი"
-          },
-          ordinal : function (number) {
-              if (number === 0) {
-                  return number;
-              }
+    node1.fx += fx;
+    node1.fy += fy;
+    node2.fx -= fx;
+    node2.fy -= fy;
+  };
 
-              if (number === 1) {
-                  return number + "-ლი";
-              }
 
-              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
-                  return "მე-" + number;
-              }
+  /**
+   * 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);
 
-              return number + "-ე";
-          },
-          week : {
-              dow : 1,
-              doy : 7
-          }
-      });
-  }));
+      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);
+
+      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");
 
+      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");
 
-/***/ },
-/* 83 */
-/***/ function(module, exports, __webpack_require__) {
+      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");
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : khmer (km)
-  // author : Kruy Vanna : https://github.com/kruyvanna
+      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;
+      }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
+      var graph_generateOptions = document.getElementById("graph_generateOptions");
+
+      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";
       }
-  }(function (moment) {
-      return moment.lang('km', {
-          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
-              nextDay: '[ស្អែក ម៉ោង] LT',
-              nextWeek: 'dddd [ម៉ោង] LT',
-              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
-              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "%sទៀត",
-              past: "%sមុន",
-              s: "ប៉ុន្មានវិនាទី",
-              m: "មួយនាទី",
-              mm: "%d នាទី",
-              h: "មួយម៉ោង",
-              hh: "%d ម៉ោង",
-              d: "មួយថ្ងៃ",
-              dd: "%d ថ្ងៃ",
-              M: "មួយខែ",
-              MM: "%d ខែ",
-              y: "មួយឆ្នាំ",
-              yy: "%d ឆ្នាំ"
-          },
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4 // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 84 */
-/***/ function(module, exports, __webpack_require__) {
+      switchConfigurations.apply(this);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : korean (ko)
-  //
-  // authors 
-  //
-  // - Kyungwook, Park : https://github.com/kyungw00k
-  // - Jeeeyul Lee <jeeeyul@gmail.com>
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ko', {
-          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
-          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
-          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
-          longDateFormat : {
-              LT : "A h시 mm분",
-              L : "YYYY.MM.DD",
-              LL : "YYYY년 MMMM D일",
-              LLL : "YYYY년 MMMM D일 LT",
-              LLLL : "YYYY년 MMMM D일 dddd LT"
-          },
-          meridiem : function (hour, minute, isUpper) {
-              return hour < 12 ? '오전' : '오후';
-          },
-          calendar : {
-              sameDay : '오늘 LT',
-              nextDay : '내일 LT',
-              nextWeek : 'dddd LT',
-              lastDay : '어제 LT',
-              lastWeek : '지난주 dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s 후",
-              past : "%s 전",
-              s : "몇초",
-              ss : "%d초",
-              m : "일분",
-              mm : "%d분",
-              h : "한시간",
-              hh : "%d시간",
-              d : "하루",
-              dd : "%d일",
-              M : "한달",
-              MM : "%d달",
-              y : "일년",
-              yy : "%d년"
-          },
-          ordinal : '%d일',
-          meridiemParse : /(오전|오후)/,
-          isPM : function (token) {
-              return token === "오후";
-          }
-      });
-  }));
+      radioButton1.onchange = switchConfigurations.bind(this);
+      radioButton2.onchange = switchConfigurations.bind(this);
+      radioButton3.onchange = switchConfigurations.bind(this);
+    }
+  };
 
+  /**
+   * 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;
+    }
+  };
 
-/***/ },
-/* 85 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Luxembourgish (lb)
-  // author : mweimerskirch : https://github.com/mweimerskirch
+  /**
+   * 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";}
 
-  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
-  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
-  // and "eifelerRegelAppliesToNumber" methods are meant for
+    this._configureSmoothCurves(false);
+  }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eng Minutt', 'enger Minutt'],
-              'h': ['eng Stonn', 'enger Stonn'],
-              'd': ['een Dag', 'engem Dag'],
-              'dd': [number + ' Deeg', number + ' Deeg'],
-              'M': ['ee Mount', 'engem Mount'],
-              'MM': [number + ' Méint', number + ' Méint'],
-              'y': ['ee Joer', 'engem Joer'],
-              'yy': [number + ' Joer', number + ' Joer']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+  /**
+   * 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();
+    }
+    else {
+      this.repositionNodes();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-      function processFutureTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "a " + string;
+  /**
+   *  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 += ", "
           }
-          return "an " + string;
+        }
+        options += '}}'
       }
-
-      function processPastTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "viru " + string;
+      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 += ", "
           }
-          return "virun " + string;
+        }
+        options += '}}'
       }
-
-      function processLastWeek(string1) {
-          var weekday = this.format('d');
-          if (eifelerRegelAppliesToWeekday(weekday)) {
-              return '[Leschte] dddd [um] LT';
+      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 += ", ";
           }
-          return '[Leschten] dddd [um] LT';
+        }
+        options += '}},';
       }
-
-      /**
-       * Returns true if the word before the given week day loses the "-n" ending.
-       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
-       *
-       * @param weekday {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToWeekday(weekday) {
-          weekday = parseInt(weekday, 10);
-          switch (weekday) {
-          case 0: // Sonndeg
-          case 1: // Méindeg
-          case 3: // Mëttwoch
-          case 5: // Freideg
-          case 6: // Samschdeg
-              return true;
-          default: // 2 Dënschdeg, 4 Donneschdeg
-              return false;
+      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 += '};'
+    }
 
-      /**
-       * Returns true if the word before the given number loses the "-n" ending.
-       * e.g. "an 10 Deeg" but "a 5 Deeg"
-       *
-       * @param number {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToNumber(number) {
-          number = parseInt(number, 10);
-          if (isNaN(number)) {
-              return false;
-          }
-          if (number < 0) {
-              // Negative Number --> always true
-              return true;
-          } else if (number < 10) {
-              // Only 1 digit
-              if (4 <= number && number <= 7) {
-                  return true;
-              }
-              return false;
-          } else if (number < 100) {
-              // 2 digits
-              var lastDigit = number % 10, firstDigit = number / 10;
-              if (lastDigit === 0) {
-                  return eifelerRegelAppliesToNumber(firstDigit);
-              }
-              return eifelerRegelAppliesToNumber(lastDigit);
-          } else if (number < 10000) {
-              // 3 or 4 digits --> recursively check first digit
-              while (number >= 10) {
-                  number = number / 10;
-              }
-              return eifelerRegelAppliesToNumber(number);
-          } else {
-              // Anything larger than 4 digits: recursively check first n-3 digits
-              number = number / 1000;
-              return eifelerRegelAppliesToNumber(number);
-          }
+
+    this.optionsDiv.innerHTML = options;
+  }
+
+  /**
+   * 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();
+  }
 
-      return moment.lang('lb', {
-          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
-          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
-          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
-          longDateFormat: {
-              LT: "H:mm [Auer]",
-              L: "DD.MM.YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: "[Haut um] LT",
-              sameElse: "L",
-              nextDay: '[Muer um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gëschter um] LT',
-              lastWeek: processLastWeek
-          },
-          relativeTime: {
-              future: processFutureTime,
-              past: processPastTime,
-              s: "e puer Sekonnen",
-              m: processRelativeTime,
-              mm: "%d Minutten",
-              h: processRelativeTime,
-              hh: "%d Stonnen",
-              d: processRelativeTime,
-              dd: processRelativeTime,
-              M: processRelativeTime,
-              MM: processRelativeTime,
-              y: processRelativeTime,
-              yy: processRelativeTime
-          },
-          ordinal: '%d.',
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+
+  /**
+   * 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;
+
+    if (map instanceof Array) {
+      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));
+    }
+
+    if (constantsVariableName == "hierarchicalLayout_direction" ||
+      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
+      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
+      this._setupHierarchicalLayout();
+    }
+    this.moving = true;
+    this.start();
+  }
 
 
 /***/ },
-/* 86 */
+/* 47 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Lithuanian (lt)
-  // author : Mindaugas Mozūras : https://github.com/mmozuras
+  /**
+   * Calculate the forces the nodes apply on each other based on a repulsion field.
+   * This field is linearly approximated.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function () {
+    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var units = {
-          "m" : "minutė_minutės_minutę",
-          "mm": "minutės_minučių_minutes",
-          "h" : "valanda_valandos_valandą",
-          "hh": "valandos_valandų_valandas",
-          "d" : "diena_dienos_dieną",
-          "dd": "dienos_dienų_dienas",
-          "M" : "mėnuo_mėnesio_mėnesį",
-          "MM": "mėnesiai_mėnesių_mėnesius",
-          "y" : "metai_metų_metus",
-          "yy": "metai_metų_metus"
-      },
-      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
 
-      function translateSeconds(number, withoutSuffix, key, isFuture) {
-          if (withoutSuffix) {
-              return "kelios sekundės";
-          } else {
-              return isFuture ? "kelių sekundžių" : "kelias sekundes";
-          }
-      }
+    // approximation constants
+    var a_base = -2 / 3;
+    var b = 4 / 3;
 
-      function translateSingular(number, withoutSuffix, key, isFuture) {
-          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
-      }
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
 
-      function special(number) {
-          return number % 10 === 0 || (number > 10 && number < 20);
-      }
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
 
-      function forms(key) {
-          return units[key].split("_");
-      }
+        dx = node2.x - node1.x;
+        dy = node2.y - node1.y;
+        distance = Math.sqrt(dx * dx + dy * dy);
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          if (number === 1) {
-              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
-          } else if (withoutSuffix) {
-              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
-          } else {
-              if (isFuture) {
-                  return result + forms(key)[1];
-              } else {
-                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
-              }
+        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
+        var a = a_base / minimumDistance;
+        if (distance < 2 * minimumDistance) {
+          if (distance < 0.5 * minimumDistance) {
+            repulsingForce = 1.0;
+          }
+          else {
+            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
           }
-      }
 
-      function relativeWeekDay(moment, format) {
-          var nominative = format.indexOf('dddd HH:mm') === -1,
-              weekDay = weekDays[moment.day()];
+          // amplify the repulsion for clusters.
+          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
+          repulsingForce = repulsingForce / distance;
 
-          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
-      }
+          fx = dx * repulsingForce;
+          fy = dy * repulsingForce;
 
-      return moment.lang("lt", {
-          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
-          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
-          weekdays : relativeWeekDay,
-          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
-          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY [m.] MMMM D [d.]",
-              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
-              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
-              l : "YYYY-MM-DD",
-              ll : "YYYY [m.] MMMM D [d.]",
-              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
-              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
-          },
-          calendar : {
-              sameDay : "[Šiandien] LT",
-              nextDay : "[Rytoj] LT",
-              nextWeek : "dddd LT",
-              lastDay : "[Vakar] LT",
-              lastWeek : "[Praėjusį] dddd LT",
-              sameElse : "L"
-          },
-          relativeTime : {
-              future : "po %s",
-              past : "prieš %s",
-              s : translateSeconds,
-              m : translateSingular,
-              mm : translate,
-              h : translateSingular,
-              hh : translate,
-              d : translateSingular,
-              dd : translate,
-              M : translateSingular,
-              MM : translate,
-              y : translateSingular,
-              yy : translate
-          },
-          ordinal : function (number) {
-              return number + '-oji';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+          node1.fx -= fx;
+          node1.fy -= fy;
+          node2.fx += fx;
+          node2.fy += fy;
+        }
+      }
+    }
+  };
 
 
 /***/ },
-/* 87 */
+/* 48 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : latvian (lv)
-  // author : Kristaps Karlsons : https://github.com/skakri
+  /**
+   * Calculate the forces the nodes apply on eachother based on a repulsion field.
+   * This field is linearly approximated.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function () {
+    var dx, dy, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var units = {
-          'mm': 'minūti_minūtes_minūte_minūtes',
-          'hh': 'stundu_stundas_stunda_stundas',
-          'dd': 'dienu_dienas_diena_dienas',
-          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
-          'yy': 'gadu_gadus_gads_gadi'
-      };
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
+
+    // approximation constants
+    var b = 5;
+    var a_base = 0.5 * -b;
+
+
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
+    var a = a_base / minimumDistance;
+
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        if (node1.level == node2.level) {
+
+          dx = node2.x - node1.x;
+          dy = node2.y - node1.y;
+          distance = Math.sqrt(dx * dx + dy * dy);
+
+
+          if (distance < 2 * minimumDistance) {
+            repulsingForce = a * distance + b;
+            var c = 0.05;
+            var d = 2 * minimumDistance * 2 * c;
+            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
+
+            // normalize force with
+            if (distance == 0) {
+              distance = 0.01;
+            }
+            else {
+              repulsingForce = repulsingForce / distance;
+            }
+            fx = dx * repulsingForce;
+            fy = dy * repulsingForce;
 
-      function format(word, number, withoutSuffix) {
-          var forms = word.split('_');
-          if (withoutSuffix) {
-              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
-          } else {
-              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
+            node1.fx -= fx;
+            node1.fy -= fy;
+            node2.fx += fx;
+            node2.fy += fy;
           }
+        }
       }
+    }
+  };
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          return number + ' ' + format(units[key], number, withoutSuffix);
-      }
 
-      return moment.lang('lv', {
-          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
-          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
-          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "YYYY. [gada] D. MMMM",
-              LLL : "YYYY. [gada] D. MMMM, LT",
-              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
-          },
-          calendar : {
-              sameDay : '[Šodien pulksten] LT',
-              nextDay : '[Rīt pulksten] LT',
-              nextWeek : 'dddd [pulksten] LT',
-              lastDay : '[Vakar pulksten] LT',
-              lastWeek : '[Pagājušā] dddd [pulksten] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s vēlāk",
-              past : "%s agrāk",
-              s : "dažas sekundes",
-              m : "minūti",
-              mm : relativeTimeWithPlural,
-              h : "stundu",
-              hh : relativeTimeWithPlural,
-              d : "dienu",
-              dd : relativeTimeWithPlural,
-              M : "mēnesi",
-              MM : relativeTimeWithPlural,
-              y : "gadu",
-              yy : relativeTimeWithPlural
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateHierarchicalSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    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)) {
+            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-/***/ },
-/* 88 */
-/***/ function(module, exports, __webpack_require__) {
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : macedonian (mk)
-  // author : Borislav Mickov : https://github.com/B0k0
+            if (distance == 0) {
+              distance = 0.01;
+            }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('mk', {
-          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
-          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
-          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Денес во] LT',
-              nextDay : '[Утре во] LT',
-              nextWeek : 'dddd [во] LT',
-              lastDay : '[Вчера во] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[Во изминатата] dddd [во] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[Во изминатиот] dddd [во] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "после %s",
-              past : "пред %s",
-              s : "неколку секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дена",
-              M : "месец",
-              MM : "%d месеци",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
 
+            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-/***/ },
-/* 89 */
-/***/ function(module, exports, __webpack_require__) {
+            fx = dx * springForce;
+            fy = dy * springForce;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : malayalam (ml)
-  // author : Floyd Pink : https://github.com/floydpink
+            edge.to.fx -= fx;
+            edge.to.fy -= fy;
+            edge.from.fx += fx;
+            edge.from.fy += fy;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ml', {
-          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
-          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
-          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
-          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
-          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm -നു",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[ഇന്ന്] LT',
-              nextDay : '[നാളെ] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[ഇന്നലെ] LT',
-              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s കഴിഞ്ഞ്",
-              past : "%s മുൻപ്",
-              s : "അൽപ നിമിഷങ്ങൾ",
-              m : "ഒരു മിനിറ്റ്",
-              mm : "%d മിനിറ്റ്",
-              h : "ഒരു മണിക്കൂർ",
-              hh : "%d മണിക്കൂർ",
-              d : "ഒരു ദിവസം",
-              dd : "%d ദിവസം",
-              M : "ഒരു മാസം",
-              MM : "%d മാസം",
-              y : "ഒരു വർഷം",
-              yy : "%d വർഷം"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "രാത്രി";
-              } else if (hour < 12) {
-                  return "രാവിലെ";
-              } else if (hour < 17) {
-                  return "ഉച്ച കഴിഞ്ഞ്";
-              } else if (hour < 20) {
-                  return "വൈകുന്നേരം";
-              } else {
-                  return "രാത്രി";
-              }
-          }
-      });
-  }));
 
+            var factor = 5;
+            if (distance > edgeLength) {
+              factor = 25;
+            }
+
+            if (edge.from.level > edge.to.level) {
+              edge.to.fx -= factor*fx;
+              edge.to.fy -= factor*fy;
+            }
+            else if (edge.from.level < edge.to.level) {
+              edge.from.fx += factor*fx;
+              edge.from.fy += factor*fy;
+            }
+          }
+        }
+      }
+    }
+  };
 
 /***/ },
-/* 90 */
+/* 49 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Marathi (mr)
-  // author : Harshad Kale : https://github.com/kalehv
+  /**
+   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+   * The Barnes Hut method is used to speed up this N-body simulation.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function() {
+    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
+      var node;
+      var nodes = this.calculationNodes;
+      var nodeIndices = this.calculationNodeIndices;
+      var nodeCount = nodeIndices.length;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+      this._formBarnesHutTree(nodes,nodeIndices);
 
-      return moment.lang('mr', {
-          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
-          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm वाजता",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[उद्या] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[काल] LT',
-              lastWeek: '[मागील] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s नंतर",
-              past : "%s पूर्वी",
-              s : "सेकंद",
-              m: "एक मिनिट",
-              mm: "%d मिनिटे",
-              h : "एक तास",
-              hh : "%d तास",
-              d : "एक दिवस",
-              dd : "%d दिवस",
-              M : "एक महिना",
-              MM : "%d महिने",
-              y : "एक वर्ष",
-              yy : "%d वर्षे"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem: function (hour, minute, isLower)
-          {
-              if (hour < 4) {
-                  return "रात्री";
-              } else if (hour < 10) {
-                  return "सकाळी";
-              } else if (hour < 17) {
-                  return "दुपारी";
-              } else if (hour < 20) {
-                  return "सायंकाळी";
-              } else {
-                  return "रात्री";
-              }
-          },
-          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.
-          }
-      });
-  }));
+      var barnesHutTree = this.barnesHutTree;
+
+      // place the nodes one by one recursively
+      for (var i = 0; i < nodeCount; i++) {
+        node = nodes[nodeIndices[i]];
+        // starting with root is irrelevant, it never passes the BarnesHut condition
+        this._getForceContribution(barnesHutTree.root.children.NW,node);
+        this._getForceContribution(barnesHutTree.root.children.NE,node);
+        this._getForceContribution(barnesHutTree.root.children.SW,node);
+        this._getForceContribution(barnesHutTree.root.children.SE,node);
+      }
+    }
+  };
 
 
-/***/ },
-/* 91 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._getForceContribution = function(parentBranch,node) {
+    // we get no force contribution from an empty region
+    if (parentBranch.childrenCount > 0) {
+      var dx,dy,distance;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Malaysia (ms-MY)
-  // author : Weldan Jamili : https://github.com/weldan
+      // get the distance from the center of mass to the node.
+      dx = parentBranch.centerOfMass.x - node.x;
+      dy = parentBranch.centerOfMass.y - node.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // BarnesHut condition
+      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
+      // calcSize = 1/s --> d * 1/s > 1/theta = passed
+      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
+        // duplicate code to reduce function calls to speed up program
+        if (distance == 0) {
+          distance = 0.1*Math.random();
+          dx = distance;
+        }
+        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+        var fx = dx * gravityForce;
+        var fy = dy * gravityForce;
+        node.fx += fx;
+        node.fy += fy;
       }
-  }(function (moment) {
-      return moment.lang('ms-my', {
-          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
-          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
-          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
-          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
-          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'tengahari';
-              } else if (hours < 19) {
-                  return 'petang';
-              } else {
-                  return 'malam';
-              }
-          },
-          calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Esok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kelmarin pukul] LT',
-              lastWeek : 'dddd [lepas pukul] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lepas",
-              s : "beberapa saat",
-              m : "seminit",
-              mm : "%d minit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      else {
+        // Did not pass the condition, go into children if available
+        if (parentBranch.childrenCount == 4) {
+          this._getForceContribution(parentBranch.children.NW,node);
+          this._getForceContribution(parentBranch.children.NE,node);
+          this._getForceContribution(parentBranch.children.SW,node);
+          this._getForceContribution(parentBranch.children.SE,node);
+        }
+        else { // parentBranch must have only one node, if it was empty we wouldnt be here
+          if (parentBranch.children.data.id != node.id) { // if it is not self
+            // duplicate code to reduce function calls to speed up program
+            if (distance == 0) {
+              distance = 0.5*Math.random();
+              dx = distance;
+            }
+            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+            var fx = dx * gravityForce;
+            var fy = dy * gravityForce;
+            node.fx += fx;
+            node.fy += fy;
+          }
+        }
+      }
+    }
+  };
 
+  /**
+   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   *
+   * @param nodes
+   * @param nodeIndices
+   * @private
+   */
+  exports._formBarnesHutTree = function(nodes,nodeIndices) {
+    var node;
+    var nodeCount = nodeIndices.length;
 
-/***/ },
-/* 92 */
-/***/ function(module, exports, __webpack_require__) {
+    var minX = Number.MAX_VALUE,
+      minY = Number.MAX_VALUE,
+      maxX =-Number.MAX_VALUE,
+      maxY =-Number.MAX_VALUE;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian bokmål (nb)
-  // authors : Espen Hovlandsdal : https://github.com/rexxars
-  //           Sigurd Gartmann : https://github.com/sigurdga
+    // get the range of the nodes
+    for (var i = 0; i < nodeCount; i++) {
+      var x = nodes[nodeIndices[i]].x;
+      var y = nodes[nodeIndices[i]].y;
+      if (x < minX) { minX = x; }
+      if (x > maxX) { maxX = x; }
+      if (y < minY) { minY = y; }
+      if (y > maxY) { maxY = y; }
+    }
+    // make the range a square
+    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
+    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+    var minimumTreeSize = 1e-5;
+    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
+    var halfRootSize = 0.5 * rootSize;
+    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+    // construct the barnesHutTree
+    var barnesHutTree = {
+      root:{
+        centerOfMass: {x:0, y:0},
+        mass:0,
+        range: {
+          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
+          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
+        },
+        size: rootSize,
+        calcSize: 1 / rootSize,
+        children: { data:null},
+        maxWidth: 0,
+        level: 0,
+        childrenCount: 4
       }
-  }(function (moment) {
-      return moment.lang('nb', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "H.mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd D. MMMM YYYY [kl.] LT"
-          },
-          calendar : {
-              sameDay: '[i dag kl.] LT',
-              nextDay: '[i morgen kl.] LT',
-              nextWeek: 'dddd [kl.] LT',
-              lastDay: '[i går kl.] LT',
-              lastWeek: '[forrige] dddd [kl.] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "for %s siden",
-              s : "noen sekunder",
-              m : "ett minutt",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dager",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    };
+    this._splitBranch(barnesHutTree.root);
 
+    // place the nodes one by one recursively
+    for (i = 0; i < nodeCount; i++) {
+      node = nodes[nodeIndices[i]];
+      this._placeInTree(barnesHutTree.root,node);
+    }
 
-/***/ },
-/* 93 */
-/***/ function(module, exports, __webpack_require__) {
+    // make global
+    this.barnesHutTree = barnesHutTree
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : nepali/nepalese
-  // author : suvash : https://github.com/suvash
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+  /**
+   * this updates the mass of a branch. this is increased by adding a node.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._updateBranchMass = function(parentBranch, node) {
+    var totalMass = parentBranch.mass + node.mass;
+    var totalMassInv = 1/totalMass;
 
-      return moment.lang('ne', {
-          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
-          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
-          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
-          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
-          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
-          longDateFormat : {
-              LT : "Aको h:mm बजे",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 3) {
-                  return "राती";
-              } else if (hour < 10) {
-                  return "बिहान";
-              } else if (hour < 15) {
-                  return "दिउँसो";
-              } else if (hour < 18) {
-                  return "बेलुका";
-              } else if (hour < 20) {
-                  return "साँझ";
-              } else {
-                  return "राती";
-              }
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[भोली] LT',
-              nextWeek : '[आउँदो] dddd[,] LT',
-              lastDay : '[हिजो] LT',
-              lastWeek : '[गएको] dddd[,] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%sमा",
-              past : "%s अगाडी",
-              s : "केही समय",
-              m : "एक मिनेट",
-              mm : "%d मिनेट",
-              h : "एक घण्टा",
-              hh : "%d घण्टा",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महिना",
-              MM : "%d महिना",
-              y : "एक बर्ष",
-              yy : "%d बर्ष"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
+    parentBranch.centerOfMass.x *= totalMassInv;
 
+    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
+    parentBranch.centerOfMass.y *= totalMassInv;
 
-/***/ },
-/* 94 */
-/***/ function(module, exports, __webpack_require__) {
+    parentBranch.mass = totalMass;
+    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
+    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : dutch (nl)
-  // author : Joris Röling : https://github.com/jjupiter
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+  /**
+   * determine in which branch the node will be placed.
+   *
+   * @param parentBranch
+   * @param node
+   * @param skipMassUpdate
+   * @private
+   */
+  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
+    if (skipMassUpdate != true || skipMassUpdate === undefined) {
+      // update the mass of the branch.
+      this._updateBranchMass(parentBranch,node);
+    }
+
+    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+        this._placeInRegion(parentBranch,node,"NW");
       }
-  }(function (moment) {
-      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
-          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
+      else { // in SW
+        this._placeInRegion(parentBranch,node,"SW");
+      }
+    }
+    else { // in NE or SE
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+        this._placeInRegion(parentBranch,node,"NE");
+      }
+      else { // in SE
+        this._placeInRegion(parentBranch,node,"SE");
+      }
+    }
+  };
 
-      return moment.lang('nl', {
-          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShortWithoutDots[m.month()];
-              } else {
-                  return monthsShortWithDots[m.month()];
-              }
-          },
-          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
-          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
-          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[vandaag om] LT',
-              nextDay: '[morgen om] LT',
-              nextWeek: 'dddd [om] LT',
-              lastDay: '[gisteren om] LT',
-              lastWeek: '[afgelopen] dddd [om] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "over %s",
-              past : "%s geleden",
-              s : "een paar seconden",
-              m : "één minuut",
-              mm : "%d minuten",
-              h : "één uur",
-              hh : "%d uur",
-              d : "één dag",
-              dd : "%d dagen",
-              M : "één maand",
-              MM : "%d maanden",
-              y : "één jaar",
-              yy : "%d jaar"
-          },
-          ordinal : function (number) {
-              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * actually place the node in a region (or branch)
+   *
+   * @param parentBranch
+   * @param node
+   * @param region
+   * @private
+   */
+  exports._placeInRegion = function(parentBranch,node,region) {
+    switch (parentBranch.children[region].childrenCount) {
+      case 0: // place node here
+        parentBranch.children[region].children.data = node;
+        parentBranch.children[region].childrenCount = 1;
+        this._updateBranchMass(parentBranch.children[region],node);
+        break;
+      case 1: // convert into children
+        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+        // we move one node a pixel and we do not put it in the tree.
+        if (parentBranch.children[region].children.data.x == node.x &&
+            parentBranch.children[region].children.data.y == node.y) {
+          node.x += Math.random();
+          node.y += Math.random();
+        }
+        else {
+          this._splitBranch(parentBranch.children[region]);
+          this._placeInTree(parentBranch.children[region],node);
+        }
+        break;
+      case 4: // place in branch
+        this._placeInTree(parentBranch.children[region],node);
+        break;
+    }
+  };
 
-/***/ },
-/* 95 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian nynorsk (nn)
-  // author : https://github.com/mechuwind
+  /**
+   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+   * after the split is complete.
+   *
+   * @param parentBranch
+   * @private
+   */
+  exports._splitBranch = function(parentBranch) {
+    // if the branch is shaded with a node, replace the node in the new subset.
+    var containedNode = null;
+    if (parentBranch.childrenCount == 1) {
+      containedNode = parentBranch.children.data;
+      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+    }
+    parentBranch.childrenCount = 4;
+    parentBranch.children.data = null;
+    this._insertRegion(parentBranch,"NW");
+    this._insertRegion(parentBranch,"NE");
+    this._insertRegion(parentBranch,"SW");
+    this._insertRegion(parentBranch,"SE");
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('nn', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
-          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
-          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[I dag klokka] LT',
-              nextDay: '[I morgon klokka] LT',
-              nextWeek: 'dddd [klokka] LT',
-              lastDay: '[I går klokka] LT',
-              lastWeek: '[Føregåande] dddd [klokka] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "for %s sidan",
-              s : "nokre sekund",
-              m : "eit minutt",
-              mm : "%d minutt",
-              h : "ein time",
-              hh : "%d timar",
-              d : "ein dag",
-              dd : "%d dagar",
-              M : "ein månad",
-              MM : "%d månader",
-              y : "eit år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    if (containedNode != null) {
+      this._placeInTree(parentBranch,containedNode);
+    }
+  };
+
+
+  /**
+   * This function subdivides the region into four new segments.
+   * Specifically, this inserts a single new segment.
+   * It fills the children section of the parentBranch
+   *
+   * @param parentBranch
+   * @param region
+   * @param parentRange
+   * @private
+   */
+  exports._insertRegion = function(parentBranch, region) {
+    var minX,maxX,minY,maxY;
+    var childSize = 0.5 * parentBranch.size;
+    switch (region) {
+      case "NW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "NE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "SW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+      case "SE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+    }
+
+
+    parentBranch.children[region] = {
+      centerOfMass:{x:0,y:0},
+      mass:0,
+      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
+      size: 0.5 * parentBranch.size,
+      calcSize: 2 * parentBranch.calcSize,
+      children: {data:null},
+      maxWidth: 0,
+      level: parentBranch.level+1,
+      childrenCount: 0
+    };
+  };
 
 
-/***/ },
-/* 96 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * This function is for debugging purposed, it draws the tree.
+   *
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawTree = function(ctx,color) {
+    if (this.barnesHutTree !== undefined) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : polish (pl)
-  // author : Rafal Hirsz : https://github.com/evoL
+      ctx.lineWidth = 1;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
-          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
+      this._drawBranch(this.barnesHutTree.root,ctx,color);
+    }
+  };
 
-      function plural(n) {
-          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
-      }
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'minuta' : 'minutę';
-          case 'mm':
-              return result + (plural(number) ? 'minuty' : 'minut');
-          case 'h':
-              return withoutSuffix  ? 'godzina'  : 'godzinę';
-          case 'hh':
-              return result + (plural(number) ? 'godziny' : 'godzin');
-          case 'MM':
-              return result + (plural(number) ? 'miesiące' : 'miesięcy');
-          case 'yy':
-              return result + (plural(number) ? 'lata' : 'lat');
-          }
-      }
+  /**
+   * This function is for debugging purposes. It draws the branches recursively.
+   *
+   * @param branch
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawBranch = function(branch,ctx,color) {
+    if (color === undefined) {
+      color = "#FF0000";
+    }
 
-      return moment.lang('pl', {
-          months : function (momentToFormat, format) {
-              if (/D MMMM/.test(format)) {
-                  return monthsSubjective[momentToFormat.month()];
-              } else {
-                  return monthsNominative[momentToFormat.month()];
-              }
-          },
-          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
-          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
-          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
-          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Dziś o] LT',
-              nextDay: '[Jutro o] LT',
-              nextWeek: '[W] dddd [o] LT',
-              lastDay: '[Wczoraj o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[W zeszłą niedzielę o] LT';
-                  case 3:
-                      return '[W zeszłą środę o] LT';
-                  case 6:
-                      return '[W zeszłą sobotę o] LT';
-                  default:
-                      return '[W zeszły] dddd [o] LT';
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "%s temu",
-              s : "kilka sekund",
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : "1 dzień",
-              dd : '%d dni',
-              M : "miesiąc",
-              MM : translate,
-              y : "rok",
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    if (branch.childrenCount == 4) {
+      this._drawBranch(branch.children.NW,ctx);
+      this._drawBranch(branch.children.NE,ctx);
+      this._drawBranch(branch.children.SE,ctx);
+      this._drawBranch(branch.children.SW,ctx);
+    }
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.minY);
+    ctx.stroke();
 
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.maxY);
+    ctx.stroke();
 
-/***/ },
-/* 97 */
-/***/ function(module, exports, __webpack_require__) {
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.maxY);
+    ctx.stroke();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : brazilian portuguese (pt-br)
-  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.minY);
+    ctx.stroke();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('pt-br', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY [às] LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
-          },
-          calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "em %s",
-              past : "%s atrás",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº'
-      });
-  }));
+    /*
+     if (branch.mass > 0) {
+     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+     ctx.stroke();
+     }
+     */
+  };
 
 
 /***/ },
-/* 98 */
+/* 50 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : portuguese (pt)
-  // author : Jefferson : https://github.com/jalex79
+  /**
+   * Creation of the ClusterMixin var.
+   *
+   * This contains all the functions the Network object can use to employ clustering
+   */
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('pt', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "em %s",
-              past : "há %s",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+  * 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);
 
+   // updates the lables after clustering
+   this.updateLabels();
 
-/***/ },
-/* 99 */
-/***/ function(module, exports, __webpack_require__) {
+   // 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();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : romanian (ro)
-  // author : Vlad Gurdiga : https://github.com/gurdiga
-  // author : Valentin Agachi : https://github.com/avaly
+  /**
+   * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    var maxLevels = 50;
+    var level = 0;
+
+    // we first cluster the hubs, then we pull in the outliers, repeat
+    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+      if (level % 3 == 0) {
+        this.forceAggregateHubs(true);
+        this.normalizeClusterLevels();
+      }
+      else {
+        this.increaseClusterLevel(); // this also includes a cluster normalization
       }
-  }(function (moment) {
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'minute',
-              'hh': 'ore',
-              'dd': 'zile',
-              'MM': 'luni',
-              'yy': 'ani'
-          },
-              separator = ' ';
-          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
-              separator = ' de ';
-          }
 
-          return number + separator + format[key];
+      numberOfNodes = this.nodeIndices.length;
+      level += 1;
+    }
+
+    // after the clustering we reposition the nodes to reduce the initial chaos
+    if (level > 0 && reposition == true) {
+      this.repositionNodes();
+    }
+    this._updateCalculationNodes();
+  };
+
+  /**
+   * 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;
+
+      // we decluster until we reach a decent number of nodes
+      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+        this.decreaseClusterLevel();
+        level += 1;
       }
 
-      return moment.lang('ro', {
-          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
-          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
-          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
-          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
-          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY H:mm",
-              LLLL : "dddd, D MMMM YYYY H:mm"
-          },
-          calendar : {
-              sameDay: "[azi la] LT",
-              nextDay: '[mâine la] LT',
-              nextWeek: 'dddd [la] LT',
-              lastDay: '[ieri la] LT',
-              lastWeek: '[fosta] dddd [la] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "peste %s",
-              past : "%s în urmă",
-              s : "câteva secunde",
-              m : "un minut",
-              mm : relativeTimeWithPlural,
-              h : "o oră",
-              hh : relativeTimeWithPlural,
-              d : "o zi",
-              dd : relativeTimeWithPlural,
-              M : "o lună",
-              MM : relativeTimeWithPlural,
-              y : "un an",
-              yy : relativeTimeWithPlural
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+    else {
+      this._expandClusterNode(node,false,true);
 
+      // update the index list, dynamic edges and labels
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      this._updateCalculationNodes();
+      this.updateLabels();
+    }
 
-/***/ },
-/* 100 */
-/***/ function(module, exports, __webpack_require__) {
+    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+    if (this.moving != isMovingBeforeClustering) {
+      this.start();
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : russian (ru)
-  // author : Viktorminator : https://github.com/Viktorminator
-  // Author : Menelion Elensúle : https://github.com/Oire
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
-      }
+  /**
+   * This calls the updateClustes with default arguments
+   */
+  exports.updateClustersDefault = function() {
+    if (this.constants.clustering.enabled == true) {
+      this.updateClusters(0,false,false);
+    }
+  };
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
-              'hh': 'час_часа_часов',
-              'dd': 'день_дня_дней',
-              'MM': 'месяц_месяца_месяцев',
-              'yy': 'год_года_лет'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'минута' : 'минуту';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
-      }
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
-              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
-          },
+  /**
+   * 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);
+  };
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return months[nounCase][m.month()];
+  /**
+   * 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);
+  };
+
+
+  /**
+   * 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();
       }
+    }
+    this._updateNodeIndexList();
 
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = {
-              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
-              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
-          },
+    // 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();
+    }
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+    // we now reduce chains.
+    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
+      this.handleChains();
+      this._updateNodeIndexList();
+    }
 
-          return monthsShort[nounCase][m.month()];
-      }
+    this.previousScale = this.scale;
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
-              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
-          },
+    // rest of the update the index list, dynamic edges and labels
+    this._updateDynamicEdges();
+    this.updateLabels();
 
-          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
-              'accusative' :
-              'nominative';
+    // 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();
+    }
 
-          return weekdays[nounCase][m.day()];
+    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();
       }
+    }
 
-      return moment.lang('ru', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY г.",
-              LLL : "D MMMM YYYY г., LT",
-              LLLL : "dddd, D MMMM YYYY г., LT"
-          },
-          calendar : {
-              sameDay: '[Сегодня в] LT',
-              nextDay: '[Завтра в] LT',
-              lastDay: '[Вчера в] LT',
-              nextWeek: function () {
-                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
-              },
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[В прошлое] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                      return '[В прошлый] dddd [в] LT';
-                  case 3:
-                  case 5:
-                  case 6:
-                      return '[В прошлую] dddd [в] LT';
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "через %s",
-              past : "%s назад",
-              s : "несколько секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "час",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "месяц",
-              MM : relativeTimeWithPlural,
-              y : "год",
-              yy : relativeTimeWithPlural
-          },
+    this._updateCalculationNodes();
+  };
 
-          meridiemParse: /ночи|утра|дня|вечера/i,
-          isPM : function (input) {
-              return /^(дня|вечера)$/.test(input);
-          },
+  /**
+   * 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)
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "ночи";
-              } else if (hour < 12) {
-                  return "утра";
-              } else if (hour < 17) {
-                  return "дня";
-              } else {
-                  return "вечера";
-              }
-          },
+    }
+  };
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              case 'w':
-              case 'W':
-                  return number + '-я';
-              default:
-                  return number;
-              }
-          },
+  /**
+   * this functions starts clustering by hubs
+   * The minimum hub threshold is set globally
+   *
+   * @private
+   */
+  exports._aggregateHubs = function(force) {
+    this._getHubSize();
+    this._formClustersByHub(force,false);
+  };
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * This function is fired by keypress. It forces hubs to form.
+   *
+   */
+  exports.forceAggregateHubs = function(doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
 
-/***/ },
-/* 101 */
-/***/ function(module, exports, __webpack_require__) {
+    this._aggregateHubs(true);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovak (sk)
-  // author : Martin Minka : https://github.com/k2s
-  // based on work of petrbela : https://github.com/petrbela
+    // update the index list, dynamic edges and labels
+    this._updateNodeIndexList();
+    this._updateDynamicEdges();
+    this.updateLabels();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
-          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length != amountOfNodes) {
+      this.clusterSession += 1;
+    }
 
-      function plural(n) {
-          return (n > 1) && (n < 5);
+    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 translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minúty' : 'minút');
-              } else {
-                  return result + 'minútami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodín');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dni' : 'dní');
-              } else {
-                  return result + 'dňami';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
-              } else {
-                  return result + 'mesiacmi';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'rokov');
-              } else {
-                  return result + 'rokmi';
-              }
-              break;
+  /**
+   * 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);
           }
+        }
       }
+    }
+  };
 
-      return moment.lang('sk', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
-          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
-          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
-          longDateFormat : {
-              LT: "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes o] LT",
-              nextDay: '[zajtra o] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [o] LT';
-                  case 3:
-                      return '[v stredu o] LT';
-                  case 4:
-                      return '[vo štvrtok o] LT';
-                  case 5:
-                      return '[v piatok o] LT';
-                  case 6:
-                      return '[v sobotu o] LT';
-                  }
-              },
-              lastDay: '[včera o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulú nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[minulý] dddd [o] LT';
-                  case 3:
-                      return '[minulú stredu o] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [o] LT';
-                  case 6:
-                      return '[minulú sobotu o] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "pred %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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();
+    }
+  };
 
-/***/ },
-/* 102 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+      }
+      recursive = openAll ? true : recursive;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovenian (sl)
-  // author : Robert Sedovšek : https://github.com/sedovsek
+      // 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'ena minuta' : 'eno minuto';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2) {
-                  result += 'minuti';
-              } else if (number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minut';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'ena ura' : 'eno uro';
-          case 'hh':
-              if (number === 1) {
-                  result += 'ura';
-              } else if (number === 2) {
-                  result += 'uri';
-              } else if (number === 3 || number === 4) {
-                  result += 'ure';
-              } else {
-                  result += 'ur';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dni';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mesec';
-              } else if (number === 2) {
-                  result += 'meseca';
-              } else if (number === 3 || number === 4) {
-                  result += 'mesece';
-              } else {
-                  result += 'mesecev';
+            // 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);
               }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'leto';
-              } else if (number === 2) {
-                  result += 'leti';
-              } else if (number === 3 || number === 4) {
-                  result += 'leta';
-              } else {
-                  result += 'let';
+            }
+            else {
+              if (this._nodeInActiveArea(parentNode)) {
+                this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
               }
-              return result;
+            }
           }
+        }
       }
+    }
+  };
+
+  /**
+   * 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 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();
+
+      // put the child node back in the global nodes object
+      this.nodes[containedNodeId] = childNode;
 
-      return moment.lang('sl', {
-          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
-          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
-          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
-          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danes ob] LT',
-              nextDay  : '[jutri ob] LT',
+      // release the contained edges from this childNode back into the global edges
+      this._releaseContainedEdges(parentNode,childNode);
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v] [nedeljo] [ob] LT';
-                  case 3:
-                      return '[v] [sredo] [ob] LT';
-                  case 6:
-                      return '[v] [soboto] [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[v] dddd [ob] LT';
-                  }
-              },
-              lastDay  : '[včeraj ob] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[prejšnja] dddd [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prejšnji] dddd [ob] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "čez %s",
-              past   : "%s nazaj",
-              s      : "nekaj sekund",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "en dan",
-              dd     : translate,
-              M      : "en mesec",
-              MM     : translate,
-              y      : "eno leto",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      // reconnect rerouted edges to the childNode
+      this._connectEdgeBackToChild(parentNode,childNode);
 
+      // validate all edges in dynamicEdges
+      this._validateEdges(parentNode);
 
-/***/ },
-/* 103 */
-/***/ function(module, exports, __webpack_require__) {
+      // undo the changes from the clustering operation on the parent node
+      parentNode.mass -= childNode.mass;
+      parentNode.clusterSize -= childNode.clusterSize;
+      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Albanian (sq)
-  // author : Flakërim Ismani : https://github.com/flakerimi
-  // author: Menelion Elensúle: https://github.com/Oire (tests)
-  // author : Oerd Cukalla : https://github.com/oerd (fixes)
+      // 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('sq', {
-          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
-          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
-          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
-          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
-          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              return hours < 12 ? 'PD' : 'MD';
-          },
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Sot në] LT',
-              nextDay : '[Nesër në] LT',
-              nextWeek : 'dddd [në] LT',
-              lastDay : '[Dje në] LT',
-              lastWeek : 'dddd [e kaluar në] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "në %s",
-              past : "%s më parë",
-              s : "disa sekonda",
-              m : "një minutë",
-              mm : "%d minuta",
-              h : "një orë",
-              hh : "%d orë",
-              d : "një ditë",
-              dd : "%d ditë",
-              M : "një muaj",
-              MM : "%d muaj",
-              y : "një vit",
-              yy : "%d vite"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+      // remove node from the list
+      delete parentNode.containedNodes[containedNodeId];
+
+      // 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;
           }
-      });
-  }));
+        }
+      }
+      // if there are no others, remove the cluster session from the list
+      if (othersPresent == false) {
+        parentNode.clusterSessions.pop();
+      }
 
+      this._repositionBezierNodes(childNode);
+  //      this._repositionBezierNodes(parentNode);
 
-/***/ },
-/* 104 */
-/***/ function(module, exports, __webpack_require__) {
+      // remove the clusterSession from the child node
+      childNode.clusterSession = 0;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-cyrillic (sr-cyrl)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+      // recalculate the size of the node on the next time the node is rendered
+      parentNode.clearSizeCache();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+      // restart the simulation to reorganise all nodes
+      this.moving = true;
+    }
 
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['један минут', 'једне минуте'],
-              mm: ['минут', 'минуте', 'минута'],
-              h: ['један сат', 'једног сата'],
-              hh: ['сат', 'сата', 'сати'],
-              dd: ['дан', 'дана', 'дана'],
-              MM: ['месец', 'месеца', 'месеци'],
-              yy: ['година', 'године', 'година']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
-          },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
-              }
-          }
-      };
+    // check if a further expansion step is possible if recursivity is enabled
+    if (recursive == true) {
+      this._expandClusterNode(childNode,recursive,force,openAll);
+    }
+  };
 
-      return moment.lang('sr-cyrl', {
-          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
-          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
-          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
-          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
-          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[данас у] LT',
-              nextDay: '[сутра у] LT',
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[у] [недељу] [у] LT';
-                  case 3:
-                      return '[у] [среду] [у] LT';
-                  case 6:
-                      return '[у] [суботу] [у] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[у] dddd [у] LT';
-                  }
-              },
-              lastDay  : '[јуче у] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[прошле] [недеље] [у] LT',
-                      '[прошлог] [понедељка] [у] LT',
-                      '[прошлог] [уторка] [у] LT',
-                      '[прошле] [среде] [у] LT',
-                      '[прошлог] [четвртка] [у] LT',
-                      '[прошлог] [петка] [у] LT',
-                      '[прошле] [суботе] [у] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "за %s",
-              past   : "пре %s",
-              s      : "неколико секунди",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "дан",
-              dd     : translator.translate,
-              M      : "месец",
-              MM     : translator.translate,
-              y      : "годину",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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();
+    }
+  };
 
 
-/***/ },
-/* 105 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-latin (sr)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+  /**
+   * 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;
 
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['jedan minut', 'jedne minute'],
-              mm: ['minut', 'minute', 'minuta'],
-              h: ['jedan sat', 'jednog sata'],
-              hh: ['sat', 'sata', 'sati'],
-              dd: ['dan', 'dana', 'dana'],
-              MM: ['mesec', 'meseca', 'meseci'],
-              yy: ['godina', 'godine', 'godina']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
-          },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+    // 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 (length < minLength) {
+              // first check which node is larger
+              var parentNode = edge.from;
+              var childNode = edge.to;
+              if (edge.to.mass > edge.from.mass) {
+                parentNode = edge.to;
+                childNode = edge.from;
+              }
+
+              if (childNode.dynamicEdgesLength == 1) {
+                this._addToCluster(parentNode,childNode,false);
+              }
+              else if (parentNode.dynamicEdgesLength == 1) {
+                this._addToCluster(childNode,parentNode,false);
               }
+            }
           }
-      };
+        }
+      }
+    }
+  };
 
-      return moment.lang('sr', {
-          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
-          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
-          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
-          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
-          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[danas u] LT',
-              nextDay: '[sutra u] LT',
+  /**
+   * 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];
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedelju] [u] LT';
-                  case 3:
-                      return '[u] [sredu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[juče u] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[prošle] [nedelje] [u] LT',
-                      '[prošlog] [ponedeljka] [u] LT',
-                      '[prošlog] [utorka] [u] LT',
-                      '[prošle] [srede] [u] LT',
-                      '[prošlog] [četvrtka] [u] LT',
-                      '[prošlog] [petka] [u] LT',
-                      '[prošle] [subote] [u] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "pre %s",
-              s      : "nekoliko sekundi",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "dan",
-              dd     : translator.translate,
-              M      : "mesec",
-              MM     : translator.translate,
-              y      : "godinu",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+        // the edges can be swallowed by another decrease
+        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.mass > childNode.mass) {
+              this._addToCluster(parentNode,childNode,true);
+            }
+            else {
+              this._addToCluster(childNode,parentNode,true);
+            }
           }
-      });
-  }));
+        }
+      }
+    }
+  };
+
+
+  /**
+   * 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 (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+          smallestNeighbour = neighbour.clusterSessions.length;
+          smallestNeighbourNode = neighbour;
+        }
+      }
+    }
+
+    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+      this._addToCluster(neighbour, node, true);
+    }
+  };
 
 
-/***/ },
-/* 106 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+      }
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : swedish (sv)
-  // author : Jens Alm : https://github.com/ulmus
+  /**
+   * 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;
+    }
+    // we decide if the node is a hub
+    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
+      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+      // initialize variables
+      var dx,dy,length;
+      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+      var allowCluster = false;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // 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 (moment) {
-      return moment.lang('sv', {
-          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
-          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
-          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Idag] LT',
-              nextDay: '[Imorgon] LT',
-              lastDay: '[Igår] LT',
-              nextWeek: 'dddd LT',
-              lastWeek: '[Förra] dddd[en] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "för %s sedan",
-              s : "några sekunder",
-              m : "en minut",
-              mm : "%d minuter",
-              h : "en timme",
-              hh : "%d timmar",
-              d : "en dag",
-              dd : "%d dagar",
-              M : "en månad",
-              MM : "%d månader",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
-                  (b === 1) ? 'a' :
-                  (b === 2) ? 'a' :
-                  (b === 3) ? 'e' : 'e';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+
+      // if the hub clustering is not forces, 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);
+
+                if (length < minLength) {
+                  allowCluster = true;
+                  break;
+                }
+              }
+            }
           }
-      });
-  }));
+        }
+      }
+
+      // start the clustering if allowed
+      if ((!force && allowCluster) || force) {
+        // we loop over all edges INITIALLY connected to this hub
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          edge = this.edges[edgesIdarray[j]];
+          // the edge can be clustered by this function in a previous loop
+          if (edge !== undefined) {
+            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+            // 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);
+            }
+          }
+        }
+      }
+    }
+  };
 
 
-/***/ },
-/* 107 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : tamil (ta)
-  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
+  /**
+   * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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
+        this._addToContainedEdges(parentNode,childNode,edge);
       }
-  }(function (moment) {
-      /*var symbolMap = {
-              '1': '௧',
-              '2': '௨',
-              '3': '௩',
-              '4': '௪',
-              '5': '௫',
-              '6': '௬',
-              '7': '௭',
-              '8': '௮',
-              '9': '௯',
-              '0': '௦'
-          },
-          numberMap = {
-              '௧': '1',
-              '௨': '2',
-              '௩': '3',
-              '௪': '4',
-              '௫': '5',
-              '௬': '6',
-              '௭': '7',
-              '௮': '8',
-              '௯': '9',
-              '௦': '0'
-          }; */
+      else {
+        this._connectEdgeToCluster(parentNode,childNode,edge);
+      }
+    }
+    // a contained node has no dynamic edges.
+    childNode.dynamicEdges = [];
 
-      return moment.lang('ta', {
-          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
-          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
-          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[இன்று] LT',
-              nextDay : '[நாளை] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[நேற்று] LT',
-              lastWeek : '[கடந்த வாரம்] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s இல்",
-              past : "%s முன்",
-              s : "ஒரு சில விநாடிகள்",
-              m : "ஒரு நிமிடம்",
-              mm : "%d நிமிடங்கள்",
-              h : "ஒரு மணி நேரம்",
-              hh : "%d மணி நேரம்",
-              d : "ஒரு நாள்",
-              dd : "%d நாட்கள்",
-              M : "ஒரு மாதம்",
-              MM : "%d மாதங்கள்",
-              y : "ஒரு வருடம்",
-              yy : "%d ஆண்டுகள்"
-          },
-  /*        preparse: function (string) {
-              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },*/
-          ordinal : function (number) {
-              return number + 'வது';
-          },
+    // remove circular edges from clusters
+    this._containCircularEdgesFromNode(parentNode,childNode);
 
 
-  // refer http://ta.wikipedia.org/s/1er1      
+    // remove the childNode from the global nodes object
+    delete this.nodes[childNode.id];
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour >= 6 && hour <= 10) {
-                  return " காலை";
-              } else   if (hour >= 10 && hour <= 14) {
-                  return " நண்பகல்";
-              } else    if (hour >= 14 && hour <= 18) {
-                  return " எற்பாடு";
-              } else   if (hour >= 18 && hour <= 20) {
-                  return " மாலை";
-              } else  if (hour >= 20 && hour <= 24) {
-                  return " இரவு";
-              } else  if (hour >= 0 && hour <= 6) {
-                  return " வைகறை";
-              }
-          },
-          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.
-          }
-      });
-  }));
+    // update the properties of the child and parent
+    var massBefore = parentNode.mass;
+    childNode.clusterSession = this.clusterSession;
+    parentNode.mass += childNode.mass;
+    parentNode.clusterSize += childNode.clusterSize;
+    parentNode.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);
+    }
 
-/***/ },
-/* 108 */
-/***/ function(module, exports, __webpack_require__) {
+    // forced clusters only open from screen size and double tap
+    if (force == true) {
+      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
+      parentNode.formationScale = 0;
+    }
+    else {
+      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : thai (th)
-  // author : Kridsada Thanabulpong : https://github.com/sirn
+    // recalculate the size of the node on the next time the node is rendered
+    parentNode.clearSizeCache();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('th', {
-          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
-          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
-          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
-          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
-          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
-          longDateFormat : {
-              LT : "H นาฬิกา m นาที",
-              L : "YYYY/MM/DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY เวลา LT",
-              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ก่อนเที่ยง";
-              } else {
-                  return "หลังเที่ยง";
-              }
-          },
-          calendar : {
-              sameDay : '[วันนี้ เวลา] LT',
-              nextDay : '[พรุ่งนี้ เวลา] LT',
-              nextWeek : 'dddd[หน้า เวลา] LT',
-              lastDay : '[เมื่อวานนี้ เวลา] LT',
-              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "อีก %s",
-              past : "%sที่แล้ว",
-              s : "ไม่กี่วินาที",
-              m : "1 นาที",
-              mm : "%d นาที",
-              h : "1 ชั่วโมง",
-              hh : "%d ชั่วโมง",
-              d : "1 วัน",
-              dd : "%d วัน",
-              M : "1 เดือน",
-              MM : "%d เดือน",
-              y : "1 ปี",
-              yy : "%d ปี"
+    // set the pop-out scale for the childnode
+    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+
+    // nullify the movement velocity of the child, this is to avoid hectic behaviour
+    childNode.clearVelocity();
+
+    // the mass has altered, preservation of energy dictates the velocity to be updated
+    parentNode.updateVelocity(massBefore);
+
+    // restart the simulation to reorganise all nodes
+    this.moving = true;
+  };
+
+
+  /**
+   * 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;
+            }
           }
-      });
-  }));
+        }
+      }
+      node.dynamicEdgesLength -= correction;
+    }
+  };
 
 
-/***/ },
-/* 109 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Tagalog/Filipino (tl-ph)
-  // author : Dan Hagman
+    // remove the edge from the global edges object
+    delete this.edges[edge.id];
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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;
       }
-  }(function (moment) {
-      return moment.lang('tl-ph', {
-          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
-          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
-          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
-          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
-          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "MM/D/YYYY",
-              LL : "MMMM D, YYYY",
-              LLL : "MMMM D, YYYY LT",
-              LLLL : "dddd, MMMM DD, YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Ngayon sa] LT",
-              nextDay: '[Bukas sa] LT',
-              nextWeek: 'dddd [sa] LT',
-              lastDay: '[Kahapon sa] LT',
-              lastWeek: 'dddd [huling linggo] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "sa loob ng %s",
-              past : "%s ang nakalipas",
-              s : "ilang segundo",
-              m : "isang minuto",
-              mm : "%d minuto",
-              h : "isang oras",
-              hh : "%d oras",
-              d : "isang araw",
-              dd : "%d araw",
-              M : "isang buwan",
-              MM : "%d buwan",
-              y : "isang taon",
-              yy : "%d taon"
-          },
-          ordinal : function (number) {
-              return number;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
+  /**
+   * 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
 
-/***/ },
-/* 110 */
-/***/ function(module, exports, __webpack_require__) {
+        edge.originalFromId.push(childNode.id);
+        edge.from = parentNode;
+        edge.fromId = parentNode.id;
+      }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : turkish (tr)
-  // authors : Erhan Gundogan : https://github.com/erhangundogan,
-  //           Burak Yiğit Kaya: https://github.com/BYK
+      this._addToReroutedEdges(parentNode,childNode,edge);
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+  /**
+   * 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);
       }
-  }(function (moment) {
+    }
+  };
 
-      var suffixes = {
-          1: "'inci",
-          5: "'inci",
-          8: "'inci",
-          70: "'inci",
-          80: "'inci",
 
-          2: "'nci",
-          7: "'nci",
-          20: "'nci",
-          50: "'nci",
+  /**
+   * 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);
 
-          3: "'üncü",
-          4: "'üncü",
-          100: "'üncü",
+    // this edge becomes part of the dynamicEdges of the cluster node
+    parentNode.dynamicEdges.push(edge);
+   };
 
-          6: "'ncı",
 
-          9: "'uncu",
-          10: "'uncu",
-          30: "'uncu",
 
-          60: "'ıncı",
-          90: "'ıncı"
-      };
+  /**
+   * 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;
+        }
 
-      return moment.lang('tr', {
-          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
-          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
-          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
-          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
-          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[yarın saat] LT',
-              nextWeek : '[haftaya] dddd [saat] LT',
-              lastDay : '[dün] LT',
-              lastWeek : '[geçen hafta] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s önce",
-              s : "birkaç saniye",
-              m : "bir dakika",
-              mm : "%d dakika",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir yıl",
-              yy : "%d yıl"
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "'ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+        // append this edge to the list of edges connecting to the childnode
+        childNode.dynamicEdges.push(edge);
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+        // 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];
+    }
+  };
 
 
-/***/ },
-/* 111 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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) {
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
+        parentNode.dynamicEdges.splice(i,1);
+      }
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
-  // author : Abdel Said : https://github.com/abdelsaid
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('tzm-latn', {
-          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[asdkh g] LT",
-              nextDay: '[aska g] LT',
-              nextWeek: 'dddd [g] LT',
-              lastDay: '[assant g] LT',
-              lastWeek: 'dddd [g] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dadkh s yan %s",
-              past : "yan %s",
-              s : "imik",
-              m : "minuḍ",
-              mm : "%d minuḍ",
-              h : "saɛa",
-              hh : "%d tassaɛin",
-              d : "ass",
-              dd : "%d ossan",
-              M : "ayowr",
-              MM : "%d iyyirn",
-              y : "asgas",
-              yy : "%d isgasn"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // 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];
 
+      // put the edge back in the global edges object
+      this.edges[edge.id] = edge;
 
-/***/ },
-/* 112 */
-/***/ function(module, exports, __webpack_require__) {
+      // 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];
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt (tzm)
-  // author : Abdel Said : https://github.com/abdelsaid
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('tzm', {
-          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
-              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
-              nextWeek: 'dddd [ⴴ] LT',
-              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
-              lastWeek: 'dddd [ⴴ] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
-              past : "ⵢⴰⵏ %s",
-              s : "ⵉⵎⵉⴽ",
-              m : "ⵎⵉⵏⵓⴺ",
-              mm : "%d ⵎⵉⵏⵓⴺ",
-              h : "ⵙⴰⵄⴰ",
-              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
-              d : "ⴰⵙⵙ",
-              dd : "%d oⵙⵙⴰⵏ",
-              M : "ⴰⵢoⵓⵔ",
-              MM : "%d ⵉⵢⵢⵉⵔⵏ",
-              y : "ⴰⵙⴳⴰⵙ",
-              yy : "%d ⵉⵙⴳⴰⵙⵏ"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 113 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : ukrainian (uk)
-  // author : zemlanin : https://github.com/zemlanin
-  // Author : Menelion Elensúle : https://github.com/Oire
+  // ------------------- UTILITY FUNCTIONS ---------------------------- //
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+
+  /**
+   * 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),"]");
+        }
       }
+    }
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'хвилина_хвилини_хвилин',
-              'hh': 'година_години_годин',
-              'dd': 'день_дні_днів',
-              'MM': 'місяць_місяці_місяців',
-              'yy': 'рік_роки_років'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'хвилина' : 'хвилину';
-          }
-          else if (key === 'h') {
-              return withoutSuffix ? 'година' : 'годину';
+    // 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 {
-              return number + ' ' + plural(format[key], +number);
+            node.label = String(node.id);
           }
+        }
       }
+    }
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
-              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
-          },
-
-          nounCase = (/D[oD]? *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+  //    /* Debug Override */
+  //    for (nodeId in this.nodes) {
+  //      if (this.nodes.hasOwnProperty(nodeId)) {
+  //        node = this.nodes[nodeId];
+  //        node.label = String(node.level);
+  //      }
+  //    }
 
-          return months[nounCase][m.month()];
-      }
+  };
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
-              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
-              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
-          },
 
-          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
-              'accusative' :
-              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
-                  'genitive' :
-                  'nominative');
+  /**
+   * 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;
 
-          return weekdays[nounCase][m.day()];
+    // 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;}
       }
+    }
 
-      function processHoursFunction(str) {
-          return function () {
-              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
-          };
+    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]);
+          }
+        }
       }
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      // if a cluster was formed, we increase the clusterSession
+      if (this.nodeIndices.length != amountOfNodes) {
+        this.clusterSession += 1;
+      }
+    }
+  };
 
-      return moment.lang('uk', {
-          months : monthsCaseReplace,
-          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY р.",
-              LLL : "D MMMM YYYY р., LT",
-              LLLL : "dddd, D MMMM YYYY р., LT"
-          },
-          calendar : {
-              sameDay: processHoursFunction('[Сьогодні '),
-              nextDay: processHoursFunction('[Завтра '),
-              lastDay: processHoursFunction('[Вчора '),
-              nextWeek: processHoursFunction('[У] dddd ['),
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 5:
-                  case 6:
-                      return processHoursFunction('[Минулої] dddd [').call(this);
-                  case 1:
-                  case 2:
-                  case 4:
-                      return processHoursFunction('[Минулого] dddd [').call(this);
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "за %s",
-              past : "%s тому",
-              s : "декілька секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "годину",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "місяць",
-              MM : relativeTimeWithPlural,
-              y : "рік",
-              yy : relativeTimeWithPlural
-          },
-
-          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
-
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "ночі";
-              } else if (hour < 12) {
-                  return "ранку";
-              } else if (hour < 17) {
-                  return "дня";
-              } else {
-                  return "вечора";
-              }
-          },
-
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-              case 'w':
-              case 'W':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              default:
-                  return number;
-              }
-          },
-
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 114 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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
+      )
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : uzbek
-  // author : Sardor Muminov : https://github.com/muminoff
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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.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);
       }
-  }(function (moment) {
-      return moment.lang('uz', {
-          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
-          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
-          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
-          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
-          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "D MMMM YYYY, dddd LT"
-          },
-          calendar : {
-              sameDay : '[Бугун соат] LT [да]',
-              nextDay : '[Эртага] LT [да]',
-              nextWeek : 'dddd [куни соат] LT [да]',
-              lastDay : '[Кеча соат] LT [да]',
-              lastWeek : '[Утган] dddd [куни соат] LT [да]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "Якин %s ичида",
-              past : "Бир неча %s олдин",
-              s : "фурсат",
-              m : "бир дакика",
-              mm : "%d дакика",
-              h : "бир соат",
-              hh : "%d соат",
-              d : "бир кун",
-              dd : "%d кун",
-              M : "бир ой",
-              MM : "%d ой",
-              y : "бир йил",
-              yy : "%d йил"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 115 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : vietnamese (vi)
-  // author : Bang Nguyen : https://github.com/bangnk
+    for (var i = 0; i < this.nodeIndices.length; i++) {
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var node = this.nodes[this.nodeIndices[i]];
+      if (node.dynamicEdgesLength > largestHub) {
+        largestHub = node.dynamicEdgesLength;
       }
-  }(function (moment) {
-      return moment.lang('vi', {
-          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
-          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
-          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
-          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM [năm] YYYY",
-              LLL : "D MMMM [năm] YYYY LT",
-              LLLL : "dddd, D MMMM [năm] YYYY LT",
-              l : "DD/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Hôm nay lúc] LT",
-              nextDay: '[Ngày mai lúc] LT',
-              nextWeek: 'dddd [tuần tới lúc] LT',
-              lastDay: '[Hôm qua lúc] LT',
-              lastWeek: 'dddd [tuần rồi lúc] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "%s tới",
-              past : "%s trước",
-              s : "vài giây",
-              m : "một phút",
-              mm : "%d phút",
-              h : "một giờ",
-              hh : "%d giờ",
-              d : "một ngày",
-              dd : "%d ngày",
-              M : "một tháng",
-              MM : "%d tháng",
-              y : "một năm",
-              yy : "%d năm"
-          },
-          ordinal : function (number) {
-              return number;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      average += node.dynamicEdgesLength;
+      averageSquared += Math.pow(node.dynamicEdgesLength,2);
+      hubCounter += 1;
+    }
+    average = average / hubCounter;
+    averageSquared = averageSquared / hubCounter;
 
+    var variance = averageSquared - Math.pow(average,2);
 
-/***/ },
-/* 116 */
-/***/ function(module, exports, __webpack_require__) {
+    var standardDeviation = Math.sqrt(variance);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chinese
-  // author : suupic : https://github.com/suupic
-  // author : Zeno Zeng : https://github.com/zenozeng
+    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('zh-cn', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
-          longDateFormat : {
-              LT : "Ah点mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY-MM-DD",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 600) {
-                  return "凌晨";
-              } else if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
-              } else {
-                  return "晚上";
-              }
-          },
-          calendar : {
-              sameDay : function () {
-                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
-              },
-              nextDay : function () {
-                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
-              },
-              lastDay : function () {
-                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
-              },
-              nextWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              lastWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              sameElse : 'LL'
-          },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d":
-              case "D":
-              case "DDD":
-                  return number + "日";
-              case "M":
-                  return number + "月";
-              case "w":
-              case "W":
-                  return number + "周";
-              default:
-                  return number;
-              }
-          },
-          relativeTime : {
-              future : "%s内",
-              past : "%s前",
-              s : "几秒",
-              m : "1分钟",
-              mm : "%d分钟",
-              h : "1小时",
-              hh : "%d小时",
-              d : "1天",
-              dd : "%d天",
-              M : "1个月",
-              MM : "%d个月",
-              y : "1年",
-              yy : "%d年"
-          },
-          week : {
-              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // 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);
+  };
 
-/***/ },
-/* 117 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : traditional chinese (zh-tw)
-  // author : Ben : https://github.com/ben-lin
+  /**
+   * 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;
+          }
+        }
+      }
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
       }
-  }(function (moment) {
-      return moment.lang('zh-tw', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
-          longDateFormat : {
-              LT : "Ah點mm",
-              L : "YYYY年MMMD日",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY年MMMD日",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
-              } else {
-                  return "晚上";
-              }
-          },
-          calendar : {
-              sameDay : '[今天]LT',
-              nextDay : '[明天]LT',
-              nextWeek : '[下]ddddLT',
-              lastDay : '[昨天]LT',
-              lastWeek : '[上]ddddLT',
-              sameElse : 'L'
-          },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d" :
-              case "D" :
-              case "DDD" :
-                  return number + "日";
-              case "M" :
-                  return number + "月";
-              case "w" :
-              case "W" :
-                  return number + "週";
-              default :
-                  return number;
-              }
-          },
-          relativeTime : {
-              future : "%s內",
-              past : "%s前",
-              s : "幾秒",
-              m : "一分鐘",
-              mm : "%d分鐘",
-              h : "一小時",
-              hh : "%d小時",
-              d : "一天",
-              dd : "%d天",
-              M : "一個月",
-              MM : "%d個月",
-              y : "一年",
-              yy : "%d年"
-          }
-      });
-  }));
+    }
+    return chains/total;
+  };
 
 
 /***/ },
-/* 118 */
+/* 51 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+
   /**
-   * Copyright 2012 Craig Campbell
+   * Creation of the SectorMixin var.
    *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
+   * 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.
    *
-   * http://www.apache.org/licenses/LICENSE-2.0
+   * @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
    *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
+   * @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.
    *
-   * Mousetrap is a simple keyboard shortcut library for Javascript with
-   * no external dependencies
+   * @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.
    *
-   * @version 1.1.2
-   * @url craig.is/killing/mice
+   * @private
    */
+  exports._loadLatestSector = function() {
+    this._switchToSector(this._sector());
+  };
 
-    /**
-     * mapping of special keycodes to their corresponding keys
-     *
-     * everything in this dictionary cannot use keypress events
-     * so it has to be here to map to the correct keycodes for
-     * keyup/keydown events
-     *
-     * @type {Object}
-     */
-    var _MAP = {
-            8: 'backspace',
-            9: 'tab',
-            13: 'enter',
-            16: 'shift',
-            17: 'ctrl',
-            18: 'alt',
-            20: 'capslock',
-            27: 'esc',
-            32: 'space',
-            33: 'pageup',
-            34: 'pagedown',
-            35: 'end',
-            36: 'home',
-            37: 'left',
-            38: 'up',
-            39: 'right',
-            40: 'down',
-            45: 'ins',
-            46: 'del',
-            91: 'meta',
-            93: 'meta',
-            224: 'meta'
-        },
 
-        /**
-         * mapping for special characters so they can support
-         *
-         * this dictionary is only used incase you want to bind a
-         * keyup or keydown event to one of these keys
-         *
-         * @type {Object}
-         */
-        _KEYCODE_MAP = {
-            106: '*',
-            107: '+',
-            109: '-',
-            110: '.',
-            111 : '/',
-            186: ';',
-            187: '=',
-            188: ',',
-            189: '-',
-            190: '.',
-            191: '/',
-            192: '`',
-            219: '[',
-            220: '\\',
-            221: ']',
-            222: '\''
-        },
+  /**
+   * This function returns the currently active sector Id
+   *
+   * @returns {String}
+   * @private
+   */
+  exports._sector = function() {
+    return this.activeSector[this.activeSector.length-1];
+  };
 
-        /**
-         * this is a mapping of keys that require shift on a US keypad
-         * back to the non shift equivelents
-         *
-         * this is so you can use keyup events with these keys
-         *
-         * note that this will only work reliably on US keyboards
-         *
-         * @type {Object}
-         */
-        _SHIFT_MAP = {
-            '~': '`',
-            '!': '1',
-            '@': '2',
-            '#': '3',
-            '$': '4',
-            '%': '5',
-            '^': '6',
-            '&': '7',
-            '*': '8',
-            '(': '9',
-            ')': '0',
-            '_': '-',
-            '+': '=',
-            ':': ';',
-            '\"': '\'',
-            '<': ',',
-            '>': '.',
-            '?': '/',
-            '|': '\\'
-        },
 
-        /**
-         * this is a list of special strings you can use to map
-         * to modifier keys when you specify your keyboard shortcuts
-         *
-         * @type {Object}
-         */
-        _SPECIAL_ALIASES = {
-            'option': 'alt',
-            'command': 'meta',
-            'return': 'enter',
-            'escape': 'esc'
-        },
+  /**
+   * 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.');
+    }
+  };
 
-        /**
-         * variable to store the flipped version of _MAP from above
-         * needed to check if we should use keypress or not when no action
-         * is specified
-         *
-         * @type {Object|undefined}
-         */
-        _REVERSE_MAP,
 
-        /**
-         * a list of all the callbacks setup via Mousetrap.bind()
-         *
-         * @type {Object}
-         */
-        _callbacks = {},
+  /**
+   * 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);
+  };
 
-        /**
-         * direct map of string combinations to callbacks used for trigger()
-         *
-         * @type {Object}
-         */
-        _direct_map = {},
 
-        /**
-         * keeps track of what level each sequence is at since multiple
-         * sequences can start out with the same sequence
-         *
-         * @type {Object}
-         */
-        _sequence_levels = {},
+  /**
+   * 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();
+  };
 
-        /**
-         * variable to store the setTimeout call
-         *
-         * @type {null|number}
-         */
-        _reset_timer,
 
-        /**
-         * temporary state where we will ignore the next keyup
-         *
-         * @type {boolean|string}
-         */
-        _ignore_next_keyup = false,
+  /**
+   * 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};
 
-        /**
-         * are we currently inside of a sequence?
-         * type of action ("keyup" or "keydown" or "keypress") or false
-         *
-         * @type {boolean|string}
-         */
-        _inside_sequence = false;
+    // 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;
+  };
 
-    /**
-     * loop through the f keys, f1 to f19 and add them to the map
-     * programatically
-     */
-    for (var i = 1; i < 20; ++i) {
-        _MAP[111 + i] = 'f' + i;
-    }
 
-    /**
-     * loop through to map numbers on the numeric keypad
-     */
-    for (i = 0; i <= 9; ++i) {
-        _MAP[i + 96] = i;
-    }
+  /**
+   * 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];
+  };
 
-    /**
-     * cross browser add event method
-     *
-     * @param {Element|HTMLDocument} object
-     * @param {string} type
-     * @param {Function} callback
-     * @returns void
-     */
-    function _addEvent(object, type, callback) {
-        if (object.addEventListener) {
-            return object.addEventListener(type, callback, false);
-        }
 
-        object.attachEvent('on' + type, callback);
-    }
+  /**
+   * 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];
+  };
 
-    /**
-     * takes the event and returns the key character
-     *
-     * @param {Event} e
-     * @return {string}
-     */
-    function _characterFromEvent(e) {
 
-        // for keypress events we should return the character as is
-        if (e.type == 'keypress') {
-            return String.fromCharCode(e.which);
-        }
+  /**
+   * 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];
 
-        // for non keypress events the special maps are needed
-        if (_MAP[e.which]) {
-            return _MAP[e.which];
-        }
+    // we have moved the sector data into the frozen set, we now remove it from the active set
+    this._deleteActiveSector(sectorId);
+  };
 
-        if (_KEYCODE_MAP[e.which]) {
-            return _KEYCODE_MAP[e.which];
-        }
 
-        // if it is not in the special map
-        return String.fromCharCode(e.which).toLowerCase();
-    }
+  /**
+   * 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];
 
-    /**
-     * should we stop this event before firing off callbacks
-     *
-     * @param {Event} e
-     * @return {boolean}
-     */
-    function _stop(e) {
-        var element = e.target || e.srcElement,
-            tag_name = element.tagName;
+    // we have moved the sector data into the active set, we now remove it from the frozen stack
+    this._deleteFrozenSector(sectorId);
+  };
 
-        // if the element has the class "mousetrap" then no need to stop
-        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
-            return false;
-        }
 
-        // stop for input, select, and textarea
-        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
+  /**
+   * 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];
+      }
     }
 
-    /**
-     * checks if two arrays are equal
-     *
-     * @param {Array} modifiers1
-     * @param {Array} modifiers2
-     * @returns {boolean}
-     */
-    function _modifiersMatch(modifiers1, modifiers2) {
-        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
+    // 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];
+      }
     }
 
-    /**
-     * resets all sequence counters except for the ones passed in
-     *
-     * @param {Object} do_not_reset
-     * @returns void
-     */
-    function _resetSequences(do_not_reset) {
-        do_not_reset = do_not_reset || {};
-
-        var active_sequences = false,
-            key;
-
-        for (key in _sequence_levels) {
-            if (do_not_reset[key]) {
-                active_sequences = true;
-                continue;
-            }
-            _sequence_levels[key] = 0;
-        }
-
-        if (!active_sequences) {
-            _inside_sequence = false;
-        }
+    // merge the nodeIndices
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
     }
+  };
 
-    /**
-     * finds all callbacks that match based on the keycode, modifiers,
-     * and action
-     *
-     * @param {string} character
-     * @param {Array} modifiers
-     * @param {string} action
-     * @param {boolean=} remove - should we remove any matches
-     * @param {string=} combination
-     * @returns {Array}
-     */
-    function _getMatches(character, modifiers, action, remove, combination) {
-        var i,
-            callback,
-            matches = [];
-
-        // if there are no events related to this keycode
-        if (!_callbacks[character]) {
-            return [];
-        }
 
-        // if a modifier key is coming up on its own we should allow it
-        if (action == 'keyup' && _isModifier(character)) {
-            modifiers = [character];
-        }
+  /**
+   * 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);
+  };
 
-        // loop through all callbacks for the key that was pressed
-        // and see if any of them match
-        for (i = 0; i < _callbacks[character].length; ++i) {
-            callback = _callbacks[character][i];
 
-            // if this is a sequence but it is not at the right level
-            // then move onto the next match
-            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
-                continue;
-            }
+  /**
+   * 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();
 
-            // if the action we are looking for doesn't match the action we got
-            // then we should keep going
-            if (action != callback.action) {
-                continue;
-            }
+  //    // 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!!");
+  //    }
 
-            // if this is a keypress event that means that we need to only
-            // look at the character, otherwise check the modifiers as
-            // well
-            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
+    // 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];
 
-                // remove is used so if you change your mind and call bind a
-                // second time with a new function the first one is overwritten
-                if (remove && callback.combo == combination) {
-                    _callbacks[character].splice(i, 1);
-                }
+    var unqiueIdentifier = util.randomUUID();
 
-                matches.push(callback);
-            }
-        }
+    // we fully freeze the currently active sector
+    this._freezeSector(sector);
 
-        return matches;
-    }
+    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
+    this._createNewSector(unqiueIdentifier);
 
-    /**
-     * takes a key event and figures out what the modifiers are
-     *
-     * @param {Event} e
-     * @returns {Array}
-     */
-    function _eventModifiers(e) {
-        var modifiers = [];
+    // we add the active sector to the sectors array to be able to revert these steps later on
+    this._setActiveSector(unqiueIdentifier);
 
-        if (e.shiftKey) {
-            modifiers.push('shift');
-        }
+    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
+    this._switchToSector(this._sector());
 
-        if (e.altKey) {
-            modifiers.push('alt');
-        }
+    // finally we add the node we removed from our previous active sector to the new active sector
+    this.nodes[node.id] = node;
+  };
 
-        if (e.ctrlKey) {
-            modifiers.push('ctrl');
-        }
 
-        if (e.metaKey) {
-            modifiers.push('meta');
-        }
+  /**
+   * 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();
 
-        return modifiers;
-    }
+    // 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();
 
-    /**
-     * actually calls the callback function
-     *
-     * if your callback function returns false this will use the jquery
-     * convention - prevent default and stop propogation on the event
-     *
-     * @param {Function} callback
-     * @param {Event} e
-     * @returns void
-     */
-    function _fireCallback(callback, e) {
-        if (callback(e) === false) {
-            if (e.preventDefault) {
-                e.preventDefault();
-            }
+        // we collapse the sector back to a single cluster
+        this._collapseThisToSingleCluster();
 
-            if (e.stopPropagation) {
-                e.stopPropagation();
-            }
+        // we move the remaining nodes, edges and nodeIndices to the previous sector.
+        // This previous sector is the one we will reactivate
+        this._mergeThisWithFrozen(previousSector);
 
-            e.returnValue = false;
-            e.cancelBubble = true;
-        }
-    }
+        // 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);
 
-    /**
-     * handles a character key event
-     *
-     * @param {string} character
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleCharacter(character, e) {
+        // we activate the previously active (and currently frozen) sector.
+        this._activateSector(previousSector);
 
-        // if this event should not happen stop here
-        if (_stop(e)) {
-            return;
-        }
+        // we load the references from the newly active sector into the global references
+        this._switchToSector(previousSector);
 
-        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
-            i,
-            do_not_reset = {},
-            processed_sequence_callback = false;
+        // we forget the previously active sector because we reverted to the one before
+        this._forgetLastSector();
 
-        // loop through matching callbacks for this key event
-        for (i = 0; i < callbacks.length; ++i) {
+        // finally, we update the node index list.
+        this._updateNodeIndexList();
 
-            // fire for all sequence callbacks
-            // this is because if for example you have multiple sequences
-            // bound such as "g i" and "g t" they both need to fire the
-            // callback for matching g cause otherwise you can only ever
-            // match the first one
-            if (callbacks[i].seq) {
-                processed_sequence_callback = true;
+        // we refresh the list with calulation nodes and calculation node indices.
+        this._updateCalculationNodes();
+      }
+    }
+  };
 
-                // keep a list of which sequences were matches for later
-                do_not_reset[callbacks[i].seq] = 1;
-                _fireCallback(callbacks[i].callback, e);
-                continue;
-            }
 
-            // if there were no sequence matches but we are still here
-            // that means this is a regular match so we should fire that
-            if (!processed_sequence_callback && !_inside_sequence) {
-                _fireCallback(callbacks[i].callback, e);
-            }
+  /**
+   * 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) {
+    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);
+          this[runFunction]();
         }
-
-        // if you are inside of a sequence and the key you are pressing
-        // is not a modifier key then we should reset all sequences
-        // that were not matched by this key event
-        if (e.type == _inside_sequence && !_isModifier(character)) {
-            _resetSequences(do_not_reset);
+      }
+    }
+    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) {
+            this[runFunction](args[0],args[1]);
+          }
+          else {
+            this[runFunction](argument);
+          }
         }
+      }
     }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
-    /**
-     * handles a keydown event
-     *
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleKey(e) {
 
-        // normalize e.which for key events
-        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
-        e.which = typeof e.which == "number" ? e.which : e.keyCode;
+  /**
+   * 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) {
+    if (argument === undefined) {
+      this._switchToSupportSector();
+      this[runFunction]();
+    }
+    else {
+      this._switchToSupportSector();
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
+      }
+      else {
+        this[runFunction](argument);
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
-        var character = _characterFromEvent(e);
 
-        // no character found then stop
-        if (!character) {
-            return;
+  /**
+   * 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]();
         }
-
-        if (e.type == 'keyup' && _ignore_next_keyup == character) {
-            _ignore_next_keyup = false;
-            return;
+      }
+    }
+    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);
+          }
         }
-
-        _handleCharacter(character, e);
+      }
     }
+    this._loadLatestSector();
+  };
 
-    /**
-     * determines if the keycode specified is a modifier key or not
-     *
-     * @param {string} key
-     * @returns {boolean}
-     */
-    function _isModifier(key) {
-        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
-    }
 
-    /**
-     * called to set a 1 second timeout on the specified sequence
-     *
-     * this is so after each key press in the sequence you have 1 second
-     * to press the next key before you have to start over
-     *
-     * @returns void
-     */
-    function _resetSequenceTimer() {
-        clearTimeout(_reset_timer);
-        _reset_timer = setTimeout(_resetSequences, 1000);
+  /**
+   * 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);
+      }
     }
+  };
 
-    /**
-     * reverses the map lookup so that we can look for specific keys
-     * to see what can and can't use keypress
-     *
-     * @return {Object}
-     */
-    function _getReverseMap() {
-        if (!_REVERSE_MAP) {
-            _REVERSE_MAP = {};
-            for (var key in _MAP) {
 
-                // pull out the numeric keypad from here cause keypress should
-                // be able to detect the keys from the character
-                if (key > 95 && key < 112) {
-                    continue;
-                }
+  /**
+   * 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"];
+  };
 
-                if (_MAP.hasOwnProperty(key)) {
-                    _REVERSE_MAP[_MAP[key]] = key;
-                }
+
+  /**
+   * 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) {
+
+          this._switchToSector(sector,sectorType);
+
+          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.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
+          node.setScale(this.scale);
+          node._drawCircle(ctx);
         }
-        return _REVERSE_MAP;
+      }
     }
+  };
 
-    /**
-     * picks the best action based on the key combination
-     *
-     * @param {string} key - character for key
-     * @param {Array} modifiers
-     * @param {string=} action passed in
-     */
-    function _pickBestAction(key, modifiers, action) {
+  exports._drawAllSectorNodes = function(ctx) {
+    this._drawSectorNodes(ctx,"frozen");
+    this._drawSectorNodes(ctx,"active");
+    this._loadLatestSector();
+  };
 
-        // if no action was picked in we should try to pick the one
-        // that we think would work best for this key
-        if (!action) {
-            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
-        }
 
-        // modifier keys don't work as expected with keypress,
-        // switch to keydown
-        if (action == 'keypress' && modifiers.length) {
-            action = 'keydown';
-        }
+/***/ },
+/* 52 */
+/***/ function(module, exports, __webpack_require__) {
 
-        return action;
+  var Node = __webpack_require__(42);
+
+  /**
+   * 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);
+        }
+      }
     }
+  };
 
-    /**
-     * binds a key sequence to an event
-     *
-     * @param {string} combo - combo specified in bind call
-     * @param {Array} keys
-     * @param {Function} callback
-     * @param {string=} action
-     * @returns void
-     */
-    function _bindSequence(combo, keys, callback, action) {
+  /**
+   * 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;
+  };
 
-        // start off by adding a sequence level record for this combination
-        // and setting the level to 0
-        _sequence_levels[combo] = 0;
 
-        // if there is no action pick the best one for the first key
-        // in the sequence
-        if (!action) {
-            action = _pickBestAction(keys[0], []);
-        }
+  /**
+   * 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);
 
-        /**
-         * callback to increase the sequence level for this sequence and reset
-         * all other sequences that were active
-         *
-         * @param {Event} e
-         * @returns void
-         */
-        var _increaseSequence = function(e) {
-                _inside_sequence = action;
-                ++_sequence_levels[combo];
-                _resetSequenceTimer();
-            },
+    return {
+      left:   x,
+      top:    y,
+      right:  x,
+      bottom: y
+    };
+  };
 
-            /**
-             * wraps the specified callback inside of another function in order
-             * to reset all sequence counters as soon as this sequence is done
-             *
-             * @param {Event} e
-             * @returns void
-             */
-            _callbackAndReset = function(e) {
-                _fireCallback(callback, e);
 
-                // we should ignore the next key up if the action is key down
-                // or keypress.  this is so if you finish a sequence and
-                // release the key the final key will not trigger a keyup
-                if (action !== 'keyup') {
-                    _ignore_next_keyup = _characterFromEvent(e);
-                }
+  /**
+   * 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);
 
-                // weird race condition if a sequence ends with the key
-                // another sequence begins with
-                setTimeout(_resetSequences, 10);
-            },
-            i;
+    // 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;
+    }
+  };
 
-        // loop through keys one at a time and bind the appropriate callback
-        // function.  for any key leading up to the final one it should
-        // increase the sequence. after the final, it should reset all sequences
-        for (i = 0; i < keys.length; ++i) {
-            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
+
+  /**
+   * 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);
         }
+      }
     }
+  };
 
-    /**
-     * binds a single keyboard combination
-     *
-     * @param {string} combination
-     * @param {Function} callback
-     * @param {string=} action
-     * @param {string=} sequence_name - name of sequence if part of sequence
-     * @param {number=} level - what part of the sequence the command is
-     * @returns void
-     */
-    function _bindSingle(combination, callback, action, sequence_name, level) {
 
-        // make sure multiple spaces in a row become a single space
-        combination = combination.replace(/\s+/g, ' ');
+  /**
+   * 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;
+  };
 
-        var sequence = combination.split(' '),
-            i,
-            key,
-            keys,
-            modifiers = [];
+  /**
+   * 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 this pattern is a sequence of keys then run through this method
-        // to reprocess each pattern one key at a time
-        if (sequence.length > 1) {
-            return _bindSequence(combination, sequence, callback, action);
-        }
+    if (overlappingEdges.length > 0) {
+      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
+    }
+    else {
+      return null;
+    }
+  };
 
-        // take the keys from this pattern and figure out what the actual
-        // pattern is all about
-        keys = combination === '+' ? ['+'] : combination.split('+');
 
-        for (i = 0; i < keys.length; ++i) {
-            key = keys[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;
+    }
+  };
 
-            // normalize key names
-            if (_SPECIAL_ALIASES[key]) {
-                key = _SPECIAL_ALIASES[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;
+    }
+  };
 
-            // if this is not a keypress event then we should
-            // be smart about using shift keys
-            // this will only work for US keyboards however
-            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
-                key = _SHIFT_MAP[key];
-                modifiers.push('shift');
-            }
 
-            // if this key is a modifier then add it to the list of modifiers
-            if (_isModifier(key)) {
-                modifiers.push(key);
-            }
-        }
+  /**
+   * 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];
+    }
+  };
 
-        // depending on what the key combination is
-        // we will try to pick the best event for it
-        action = _pickBestAction(key, modifiers, action);
+  /**
+   * 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();
+      }
+    }
 
-        // make sure to initialize array if this is the first time
-        // a callback is added for this key
-        if (!_callbacks[key]) {
-            _callbacks[key] = [];
-        }
+    this.selectionObj = {nodes:{},edges:{}};
 
-        // remove an existing match if there is one
-        _getMatches(key, modifiers, action, !sequence_name, combination);
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-        // add this call back to the array
-        // if it is a sequence put it at the beginning
-        // if not put it at the end
-        //
-        // this is important because the way these are processed expects
-        // the sequence ones to come first
-        _callbacks[key][sequence_name ? 'unshift' : 'push']({
-            callback: callback,
-            modifiers: modifiers,
-            action: action,
-            seq: sequence_name,
-            level: level,
-            combo: combination
-        });
+  /**
+   * Unselect all clusters. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
+   */
+  exports._unselectClusters = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
     }
 
-    /**
-     * binds multiple combinations to the same callback
-     *
-     * @param {Array} combinations
-     * @param {Function} callback
-     * @param {string|undefined} action
-     * @returns void
-     */
-    function _bindMultiple(combinations, callback, action) {
-        for (var i = 0; i < combinations.length; ++i) {
-            _bindSingle(combinations[i], callback, action);
+    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]);
         }
+      }
     }
 
-    // start!
-    _addEvent(document, 'keypress', _handleKey);
-    _addEvent(document, 'keydown', _handleKey);
-    _addEvent(document, 'keyup', _handleKey);
-
-    var mousetrap = {
-
-        /**
-         * binds an event to mousetrap
-         *
-         * can be a single key, a combination of keys separated with +,
-         * a comma separated list of keys, an array of keys, or
-         * a sequence of keys separated by spaces
-         *
-         * be sure to list the modifier keys first to make sure that the
-         * correct key ends up getting bound (the last key in the pattern)
-         *
-         * @param {string|Array} keys
-         * @param {Function} callback
-         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
-         * @returns void
-         */
-        bind: function(keys, callback, action) {
-            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
-            _direct_map[keys + ':' + action] = callback;
-            return this;
-        },
-
-        /**
-         * unbinds an event to mousetrap
-         *
-         * the unbinding sets the callback function of the specified key combo
-         * to an empty function and deletes the corresponding key in the
-         * _direct_map dict.
-         *
-         * the keycombo+action has to be exactly the same as
-         * it was defined in the bind method
-         *
-         * TODO: actually remove this from the _callbacks dictionary instead
-         * of binding an empty function
-         *
-         * @param {string|Array} keys
-         * @param {string} action
-         * @returns void
-         */
-        unbind: function(keys, action) {
-            if (_direct_map[keys + ':' + action]) {
-                delete _direct_map[keys + ':' + action];
-                this.bind(keys, function() {}, action);
-            }
-            return this;
-        },
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-        /**
-         * triggers an event that has already been bound
-         *
-         * @param {string} keys
-         * @param {string=} action
-         * @returns void
-         */
-        trigger: function(keys, action) {
-            _direct_map[keys + ':' + action]();
-            return this;
-        },
 
-        /**
-         * resets the library back to its initial state.  this is useful
-         * if you want to clear out the current keyboard shortcuts and bind
-         * new ones - for example if you switch to another page
-         *
-         * @returns void
-         */
-        reset: function() {
-            _callbacks = {};
-            _direct_map = {};
-            return this;
-        }
-    };
+  /**
+   * 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;
+  };
 
-  module.exports = mousetrap;
+  /**
+   * 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;
+  };
 
+  /**
+   * 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;
+  };
 
 
-/***/ },
-/* 119 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+  };
 
-  var PhysicsMixin = __webpack_require__(120);
-  var ClusterMixin = __webpack_require__(124);
-  var SectorsMixin = __webpack_require__(125);
-  var SelectionMixin = __webpack_require__(126);
-  var ManipulationMixin = __webpack_require__(127);
-  var NavigationMixin = __webpack_require__(128);
-  var HierarchicalLayoutMixin = __webpack_require__(129);
 
   /**
-   * Load a mixin into the network object
+   * return the number of selected objects.
    *
-   * @param {Object} sourceVariable | this object has to contain functions.
+   * @returns {number}
    * @private
    */
-  exports._loadMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = sourceVariable[mixinFunction];
+  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;
   };
 
-
   /**
-   * removes a mixin from the network object.
+   * Check if anything is selected
    *
-   * @param {Object} sourceVariable | this object has to contain functions.
+   * @returns {boolean}
    * @private
    */
-  exports._clearMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = undefined;
+  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;
   };
 
 
   /**
-   * Mixin the physics system and initialize the parameters required.
+   * check if one of the selected nodes is a cluster.
    *
+   * @returns {boolean}
    * @private
    */
-  exports._loadPhysicsSystem = function () {
-    this._loadMixin(PhysicsMixin);
-    this._loadSelectedForceSolver();
-    if (this.constants.configurePhysics == true) {
-      this._loadPhysicsConfiguration();
+  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;
   };
 
+  /**
+   * 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);
+    }
+  };
 
   /**
-   * Mixin the cluster system and initialize the parameters required.
+   * select the edges connected to the node that is being selected
    *
+   * @param {Node} node
    * @private
    */
-  exports._loadClusterSystem = function () {
-    this.clusterSession = 0;
-    this.hubThreshold = 5;
-    this._loadMixin(ClusterMixin);
+  exports._hoverConnectedEdges = function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      var edge = node.dynamicEdges[i];
+      edge.hover = true;
+      this._addToHover(edge);
+    }
   };
 
 
   /**
-   * Mixin the sector system and initialize the parameters required
+   * unselect the edges connected to the node that is being selected
    *
+   * @param {Node} node
    * @private
    */
-  exports._loadSectorSystem = function () {
-    this.sectors = {};
-    this.activeSector = ["default"];
-    this.sectors["active"] = {};
-    this.sectors["active"]["default"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
-    this.sectors["frozen"] = {};
-    this.sectors["support"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
+  exports._unselectConnectedEdges = function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      var edge = node.dynamicEdges[i];
+      edge.unselect();
+      this._removeFromSelection(edge);
+    }
+  };
 
-    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
 
-    this._loadMixin(SectorsMixin);
-  };
 
 
   /**
-   * Mixin the selection system and initialize the parameters required
+   * 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._loadSelectionSystem = function () {
-    this.selectionObj = {nodes: {}, edges: {}};
+  exports._selectObject = function(object, append, doNotTrigger, highlightEdges) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    if (highlightEdges === undefined) {
+      highlightEdges = true;
+    }
 
-    this._loadMixin(SelectionMixin);
+    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
+      this._unselectAll(true);
+    }
+
+    if (object.selected == false) {
+      object.select();
+      this._addToSelection(object);
+      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
+        this._selectConnectedEdges(object);
+      }
+    }
+    else {
+      object.unselect();
+      this._removeFromSelection(object);
+    }
+
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
   };
 
 
   /**
-   * Mixin the navigationUI (User Interface) system and initialize the parameters required
+   * 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._loadManipulationSystem = function () {
-    // reset global variables -- these are used by the selection of nodes and edges.
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+  exports._blurObject = function(object) {
+    if (object.hover == true) {
+      object.hover = false;
+      this.emit("blurNode",{node:object.id});
+    }
+  };
 
-    if (this.constants.dataManipulation.enabled == true) {
-      // load the manipulator HTML elements. All styling done in css.
-      if (this.manipulationDiv === undefined) {
-        this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'network-manipulationDiv';
-        this.manipulationDiv.id = 'network-manipulationDiv';
-        if (this.editMode == true) {
-          this.manipulationDiv.style.display = "block";
-        }
-        else {
-          this.manipulationDiv.style.display = "none";
-        }
-        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
+  /**
+   * 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);
+    }
+  };
 
-      if (this.editModeDiv === undefined) {
-        this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'network-manipulation-editMode';
-        this.editModeDiv.id = 'network-manipulation-editMode';
-        if (this.editMode == true) {
-          this.editModeDiv.style.display = "none";
-        }
-        else {
-          this.editModeDiv.style.display = "block";
-        }
-        this.containerElement.insertBefore(this.editModeDiv, this.frame);
-      }
 
-      if (this.closeDiv === undefined) {
-        this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'network-manipulation-closeDiv';
-        this.closeDiv.id = 'network-manipulation-closeDiv';
-        this.closeDiv.style.display = this.manipulationDiv.style.display;
-        this.containerElement.insertBefore(this.closeDiv, this.frame);
-      }
+  /**
+   * 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) {
+  };
 
-      // load the manipulation functions
-      this._loadMixin(ManipulationMixin);
 
-      // create the manipulator toolbar
-      this._createManipulatorBar();
+  /**
+   * 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 {
-      if (this.manipulationDiv !== undefined) {
-        // removes all the bindings and overloads
-        this._createManipulatorBar();
-        // remove the manipulation divs
-        this.containerElement.removeChild(this.manipulationDiv);
-        this.containerElement.removeChild(this.editModeDiv);
-        this.containerElement.removeChild(this.closeDiv);
-
-        this.manipulationDiv = undefined;
-        this.editModeDiv = undefined;
-        this.closeDiv = undefined;
-        // remove the mixin functions
-        this._clearMixin(ManipulationMixin);
+      var edge = this._getEdgeAt(pointer);
+      if (edge != null) {
+        this._selectObject(edge,false);
+      }
+      else {
+        this._unselectAll();
       }
     }
+    this.emit("click", this.getSelection());
+    this._redraw();
   };
 
 
   /**
-   * Mixin the navigation (User Interface) system and initialize the parameters required
+   * handles the selection part of the double tap and opens a cluster if needed
    *
+   * @param {Object} pointer
    * @private
    */
-  exports._loadNavigationControls = function () {
-    this._loadMixin(NavigationMixin);
-
-    // the clean function removes the button divs, this is done to remove the bindings.
-    this._cleanNavigation();
-    if (this.constants.navigation.enabled == true) {
-      this._loadNavigationElements();
+  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);
     }
+    this.emit("doubleClick", this.getSelection());
   };
 
 
   /**
-   * Mixin the hierarchical layout system.
+   * Handle the onHold selection part
    *
+   * @param pointer
    * @private
    */
-  exports._loadHierarchySystem = function () {
-    this._loadMixin(HierarchicalLayoutMixin);
+  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();
   };
 
 
-/***/ },
-/* 120 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * handle the onRelease event. These functions are here for the navigation controls module.
+   *
+    * @private
+   */
+  exports._handleOnRelease = function(pointer) {
+
+  };
+
 
-  var util = __webpack_require__(1);
-  var RepulsionMixin = __webpack_require__(121);
-  var HierarchialRepulsionMixin = __webpack_require__(122);
-  var BarnesHutMixin = __webpack_require__(123);
 
   /**
-   * Toggling barnes Hut calculation on and off.
    *
-   * @private
+   * retrieve the currently selected objects
+   * @return {{nodes: Array.<String>, edges: Array.<String>}} selection
    */
-  exports._toggleBarnesHut = function () {
-    this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
-    this._loadSelectedForceSolver();
-    this.moving = true;
-    this.start();
+  exports.getSelection = function() {
+    var nodeIds = this.getSelectedNodes();
+    var edgeIds = this.getSelectedEdges();
+    return {nodes:nodeIds, edges:edgeIds};
   };
 
+  /**
+   *
+   * retrieve the currently selected nodes
+   * @return {String[]} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedNodes = function() {
+    var idArray = [];
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        idArray.push(nodeId);
+      }
+    }
+    return idArray
+  };
 
   /**
-   * This loads the node force solver based on the barnes hut or repulsion algorithm
    *
-   * @private
+   * retrieve the currently selected edges
+   * @return {Array} selection    An array with the ids of the
+   *                                            selected nodes.
    */
-  exports._loadSelectedForceSolver = function () {
-    // this overloads the this._calculateNodeForces
-    if (this.constants.physics.barnesHut.enabled == true) {
-      this._clearMixin(RepulsionMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
+  exports.getSelectedEdges = function() {
+    var idArray = [];
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        idArray.push(edgeId);
+      }
+    }
+    return idArray;
+  };
 
-      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;
 
-      this._loadMixin(BarnesHutMixin);
-    }
-    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(RepulsionMixin);
+  /**
+   * select zero or more nodes
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.setSelection = function(selection) {
+    var i, iMax, id;
 
-      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;
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-      this._loadMixin(HierarchialRepulsionMixin);
-    }
-    else {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
-      this.barnesHutTree = undefined;
+    // first unselect any selected node
+    this._unselectAll(true);
 
-      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;
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-      this._loadMixin(RepulsionMixin);
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
+      }
+      this._selectObject(node,true,true);
     }
+
+    console.log("setSelection is deprecated. Please use selectNodes instead.")
+
+    this.redraw();
   };
 
+
   /**
-   * 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
+   * 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._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);
-      }
+  exports.selectNodes = function(selection, highlightEdges) {
+    var i, iMax, id;
 
-      // we now start the force calculation
-      this._calculateForces();
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
+
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
+      }
+      this._selectObject(node,true,true,highlightEdges);
     }
+    this.redraw();
   };
 
 
   /**
-   * Calculate the external forces acting on the nodes
-   * Forces are caused by: edges, repulsing forces between nodes, gravity
-   * @private
+   * select zero or more edges
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
    */
-  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
+  exports.selectEdges = function(selection) {
+    var i, iMax, id;
 
-    this._calculateGravitationalForces();
-    this._calculateNodeForces();
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-    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();
-        }
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var edge = this.edges[id];
+      if (!edge) {
+        throw new RangeError('Edge with id "' + id + '" not found');
       }
+      this._selectObject(edge,true,true,highlightEdges);
     }
+    this.redraw();
   };
 
-
   /**
-   * 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.
-   *
+   * Validate the selection: remove ids of nodes which no longer exist
    * @private
    */
-  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);
-          }
+  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 idx in this.calculationNodes) {
-        if (this.calculationNodes.hasOwnProperty(idx)) {
-          this.calculationNodeIndices.push(idx);
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        if (!this.edges.hasOwnProperty(edgeId)) {
+          delete this.selectionObj.edges[edgeId];
         }
       }
     }
-    else {
-      this.calculationNodes = this.nodes;
-      this.calculationNodeIndices = this.nodeIndices;
-    }
   };
 
 
+/***/ },
+/* 53 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(42);
+  var Edge = __webpack_require__(43);
+
   /**
-   * this function applies the central gravity effect to keep groups from floating off
+   * clears the toolbar div element of children
    *
    * @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);
+  exports._clearManipulatorBar = function() {
+    while (this.manipulationDiv.hasChildNodes()) {
+      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+    }
+  };
 
-        gravityForce = (distance == 0) ? 0 : (gravity / distance);
-        node.fx = dx * gravityForce;
-        node.fy = dy * gravityForce;
-      }
-      else {
-        node.fx = 0;
-        node.fy = 0;
+  /**
+   * 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];
       }
     }
   };
 
-
-
+  /**
+   * Enable or disable edit-mode.
+   *
+   * @private
+   */
+  exports._toggleEditMode = function() {
+    this.editMode = !this.editMode;
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
+    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()
+  };
 
   /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
+   * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
    *
    * @private
    */
-  exports._calculateSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+  exports._createManipulatorBar = function() {
+    // remove bound functions
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-    // 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.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+      this.controlNodesActive = false;
+    }
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+    // restore overloaded functions
+    this._restoreOverloadedFunctions();
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
+    // resume calculation
+    this.freezeSimulation = false;
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+    // reset global variables
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+    if (this.editMode == true) {
+      while (this.manipulationDiv.hasChildNodes()) {
+        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+      }
+      // add the icons to the manipulator div
+      this.manipulationDiv.innerHTML = "" +
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+      }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
+      }
 
-            edge.from.fx += fx;
-            edge.from.fy += fy;
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-          }
-        }
+
+      // bind the icons
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
+      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
+      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        var editButton = document.getElementById("network-manipulate-editNode");
+        editButton.onclick = this._editNode.bind(this);
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        var editButton = document.getElementById("network-manipulate-editEdge");
+        editButton.onclick = this._createEditEdgeToolbar.bind(this);
+      }
+      if (this._selectionIsEmpty() == false) {
+        var deleteButton = document.getElementById("network-manipulate-delete");
+        deleteButton.onclick = this._deleteSelected.bind(this);
       }
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
+      closeDiv.onclick = this._toggleEditMode.bind(this);
+
+      this.boundFunction = this._createManipulatorBar.bind(this);
+      this.on('select', this.boundFunction);
+    }
+    else {
+      this.editModeDiv.innerHTML = "" +
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
+      editModeButton.onclick = this._toggleEditMode.bind(this);
     }
   };
 
 
 
-
   /**
-   * This function calculates the springforces on the nodes, accounting for the support nodes.
+   * Create the toolbar for adding Nodes
    *
    * @private
    */
-  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;
+  exports._createAddNodeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+    // create the toolbar contents
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
-              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-              // 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);
-            }
-          }
-        }
-      }
-    }
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._addNode.bind(this);
+    this.on('select', this.boundFunction);
   };
 
 
   /**
-   * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
+   * create the toolbar to connect nodes
    *
-   * @param node1
-   * @param node2
-   * @param edgeLength
    * @private
    */
-  exports._calculateSpringForce = function (node1, node2, edgeLength) {
-    var dx, dy, fx, fy, springForce, distance;
-
-    dx = (node1.x - node2.x);
-    dy = (node1.y - node2.y);
-    distance = Math.sqrt(dx * dx + dy * dy);
+  exports._createAddEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this._unselectAll(true);
+    this.freezeSimulation = true;
 
-    if (distance == 0) {
-      distance = 0.01;
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
     }
 
-    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+    this._unselectAll();
+    this.forceAppendSelection = false;
+    this.blockConnectingEdgeSelection = true;
 
-    fx = dx * springForce;
-    fy = dy * springForce;
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
-    node1.fx += fx;
-    node1.fy += fy;
-    node2.fx -= fx;
-    node2.fy -= fy;
-  };
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
+
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._handleConnect.bind(this);
+    this.on('select', this.boundFunction);
+
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"] = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+    this._handleTouch = this._handleConnect;
+    this._handleOnRelease = this._finishConnect;
 
+    // redraw to show the unselect
+    this._redraw();
+  };
 
   /**
-   * Load the HTML for the physics config and bind it
+   * create the toolbar to edit edges
+   *
    * @private
    */
-  exports._loadPhysicsConfiguration = function () {
-    if (this.physicsConfiguration === undefined) {
-      this.backupConstants = {};
-      util.deepExtend(this.backupConstants,this.constants);
+  exports._createEditEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this.controlNodesActive = true;
 
-      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);
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-      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");
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
 
-      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");
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
-      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");
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-      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;
-      }
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+    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._handleOnRelease = this._releaseControlNode;
 
-      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
-      var graph_generateOptions = document.getElementById("graph_generateOptions");
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-      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";
-      }
 
 
-      switchConfigurations.apply(this);
 
-      radioButton1.onchange = switchConfigurations.bind(this);
-      radioButton2.onchange = switchConfigurations.bind(this);
-      radioButton3.onchange = switchConfigurations.bind(this);
+
+  /**
+   * 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();
   };
 
   /**
-   * This overwrites the this.constants.
+   * 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.
    *
-   * @param constantsVariableName
-   * @param value
    * @private
    */
-  exports._overWriteGraphConstants = function (constantsVariableName, value) {
-    var nameArray = constantsVariableName.split("_");
-    if (nameArray.length == 1) {
-      this.constants[nameArray[0]] = value;
+  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);
     }
-    else if (nameArray.length == 2) {
-      this.constants[nameArray[0]][nameArray[1]] = value;
+    this._redraw();
+  };
+
+  exports._releaseControlNode = function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode != null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
+      }
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
+      }
     }
-    else if (nameArray.length == 3) {
-      this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
     }
+    this.freezeSimulation = false;
+    this._redraw();
   };
 
-
   /**
-   * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
+   * 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
    */
-  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";}
+  exports._handleConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 0) {
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._selectObject(node,false);
+          // create a node the temporary line can look at
+          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetNode'].x = node.x;
+          this.sectors['support']['nodes']['targetNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
+          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
 
-    this._configureSmoothCurves(false);
-  }
+          // create a temporary edge
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
+          this.edges['connectionEdge'].from = node;
+          this.edges['connectionEdge'].connected = true;
+          this.edges['connectionEdge'].smooth = true;
+          this.edges['connectionEdge'].selected = true;
+          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
+          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
 
-  /**
-   * 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;
+          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
+          this._handleOnDrag = function(event) {
+            var pointer = this._getPointer(event.gesture.center);
+            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
+            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
+            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+          };
+
+          this.moving = true;
+          this.start();
+        }
       }
     }
-    if (this.constants.hierarchicalLayout.enabled == true) {
-      this._setupHierarchicalLayout();
-    }
-    else {
-      this.repositionNodes();
+  };
+
+  exports._finishConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 1) {
+
+      // restore the drag function
+      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
+      delete this.cachedFunctions["_handleOnDrag"];
+
+      // remember the edge id
+      var connectFromId = this.edges['connectionEdge'].fromId;
+
+      // remove the temporary nodes and edge
+      delete this.edges['connectionEdge'];
+      delete this.sectors['support']['nodes']['targetNode'];
+      delete this.sectors['support']['nodes']['targetViaNode'];
+
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._createEdge(connectFromId,node.id);
+          this._createManipulatorBar();
+        }
+      }
+      this._unselectAll();
     }
-    this.moving = true;
-    this.start();
-  }
+  };
+
 
   /**
-   *  this is used to generate an options file from the playing with physics system.
+   * Adds a node on the specified location
    */
-  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 += ", "
-          }
+  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();
+          });
         }
-        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 += ", "
-          }
+        else {
+          alert(this.constants.labels['addError']);
+          this._createManipulatorBar();
+          this.moving = true;
+          this.start();
         }
-        options += '}}'
       }
-      if (optionsSpecific.length == 0) {options += "}"}
-      if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
-        options += ", smoothCurves: " + this.constants.smoothCurves;
+      else {
+        this.nodesData.add(defaultData);
+        this._createManipulatorBar();
+        this.moving = true;
+        this.start();
       }
-      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 += ", ";
-          }
+  };
+
+
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
         }
-        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 += ", "
-          }
+      else {
+        this.edgesData.add(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
+
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
         }
-        options += '}'
       }
       else {
-        options += "enabled:true}";
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
       }
-      options += '};'
     }
-
-
-    this.optionsDiv.innerHTML = options;
-  }
+  };
 
   /**
-   * this is used to switch between barnesHut, repulsion and hierarchical.
+   * 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
    */
-  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";
+  exports._editNode = function() {
+    if (this.triggerFunctions.edit && this.editMode == true) {
+      var node = this._getSelectedNode();
+      var data = {id:node.id,
+        label: node.label,
+        group: node.group,
+        shape: node.shape,
+        color: {
+          background:node.color.background,
+          border:node.color.border,
+          highlight: {
+            background:node.color.highlight.background,
+            border:node.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();
+        });
       }
-    }
-    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 {
+        alert(this.constants.labels["editError"]);
       }
     }
     else {
-      this.constants.hierarchicalLayout.enabled = false;
-      this.constants.physics.hierarchicalRepulsion.enabled = false;
-      this.constants.physics.barnesHut.enabled = true;
+      alert(this.constants.labels["editBoundError"]);
     }
-    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();
-  }
+  };
+
+
 
 
   /**
-   * this generates the ranges depending on the iniital values.
+   * delete everything in the selection
    *
-   * @param id
-   * @param map
-   * @param constantsVariableName
+   * @private
    */
-  function showValueOfRange (id,map,constantsVariableName) {
-    var valueId = id + "_value";
-    var rangeValue = document.getElementById(id).value;
-
-    if (map instanceof Array) {
-      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));
-    }
-
-    if (constantsVariableName == "hierarchicalLayout_direction" ||
-      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
-      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
-      this._setupHierarchicalLayout();
+  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 {
+            alert(this.constants.labels["deleteError"])
+          }
+        }
+        else {
+          this.edgesData.remove(selectedEdges);
+          this.nodesData.remove(selectedNodes);
+          this._unselectAll();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        alert(this.constants.labels["deleteClusterError"]);
+      }
     }
-    this.moving = true;
-    this.start();
-  }
+  };
 
 
 /***/ },
-/* 121 */
+/* 54 */
 /***/ function(module, exports, __webpack_require__) {
 
+  exports._cleanNavigation = function() {
+    // clean up previous navigation items
+    var wrapper = document.getElementById('network-navigation_wrapper');
+    if (wrapper != null) {
+      this.containerElement.removeChild(wrapper);
+    }
+    document.onmouseup = null;
+  };
+
   /**
-   * Calculate the forces the nodes apply on each other based on a repulsion field.
-   * This field is linearly approximated.
+   * 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._calculateNodeForces = function () {
-    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
-
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
-
-    // approximation constants
-    var a_base = -2 / 3;
-    var b = 4 / 3;
+  exports._loadNavigationElements = function() {
+    this._cleanNavigation();
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
+    this.navigationDivs = {};
+    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
+    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+    this.navigationDivs['wrapper'] = document.createElement('div');
+    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
 
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
+    for (var i = 0; i < navigationDivs.length; i++) {
+      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
+      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+    }
 
-        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
-        var a = a_base / minimumDistance;
-        if (distance < 2 * minimumDistance) {
-          if (distance < 0.5 * minimumDistance) {
-            repulsingForce = 1.0;
-          }
-          else {
-            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
-          }
+    document.onmouseup = this._stopMovement.bind(this);
+  };
 
-          // amplify the repulsion for clusters.
-          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
-          repulsingForce = repulsingForce / distance;
+  /**
+   * this stops all movement induced by the navigation buttons
+   *
+   * @private
+   */
+  exports._stopMovement = function() {
+    this._xStopMoving();
+    this._yStopMoving();
+    this._stopZoom();
+  };
 
-          fx = dx * repulsingForce;
-          fy = dy * repulsingForce;
 
-          node1.fx -= fx;
-          node1.fy -= fy;
-          node2.fx += fx;
-          node2.fy += fy;
-        }
+  /**
+   * stops the actions performed by page up and down etc.
+   *
+   * @param event
+   * @private
+   */
+  exports._preventDefault = function(event) {
+    if (event !== undefined) {
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false;
       }
     }
   };
 
 
-/***/ },
-/* 122 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * Calculate the forces the nodes apply on eachother based on a repulsion field.
-   * This field is linearly approximated.
+   * 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._calculateNodeForces = function () {
-    var dx, dy, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
+  exports._moveUp = function(event) {
+    this.yIncrement = this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className += " active";
+    }
+  };
 
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
 
-    // approximation constants
-    var b = 5;
-    var a_base = 0.5 * -b;
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['down'].className += " active";
+    }
+  };
 
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
-    var a = a_base / minimumDistance;
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className += " active";
+    }
+  };
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
 
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        if (node1.level == node2.level) {
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['right'].className += " active";
+    }
+  };
 
-          dx = node2.x - node1.x;
-          dy = node2.y - node1.y;
-          distance = Math.sqrt(dx * dx + dy * dy);
 
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className += " active";
+    }
+  };
 
-          if (distance < 2 * minimumDistance) {
-            repulsingForce = a * distance + b;
-            var c = 0.05;
-            var d = 2 * minimumDistance * 2 * c;
-            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
 
-            // normalize force with
-            if (distance == 0) {
-              distance = 0.01;
-            }
-            else {
-              repulsingForce = repulsingForce / distance;
-            }
-            fx = dx * repulsingForce;
-            fy = dy * repulsingForce;
+  /**
+   * Zoom out
+   * @private
+   */
+  exports._zoomOut = function() {
+    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomOut'].className += " active";
+    }
+  };
 
-            node1.fx -= fx;
-            node1.fy -= fy;
-            node2.fx += fx;
-            node2.fy += fy;
-          }
-        }
-      }
+
+  /**
+   * Stop zooming and unhighlight the zoom controls
+   * @private
+   */
+  exports._stopZoom = function() {
+    this.zoomIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
+      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
     }
   };
 
 
   /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
+   * Stop moving in the Y direction and unHighlight the up and down
    * @private
    */
-  exports._calculateHierarchicalSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+  exports._yStopMoving = function() {
+    this.yIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
+      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
+    }
+  };
 
-    // 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.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+  /**
+   * Stop moving in the X direction and unHighlight left and right.
+   * @private
+   */
+  exports._xStopMoving = function() {
+    this.xIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
+      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
+    }
+  };
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
 
-            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
+/***/ },
+/* 55 */
+/***/ function(module, exports, __webpack_require__) {
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+  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;
+        }
+      }
+    }
+  };
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+  /**
+   * 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) {
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
+        this.constants.hierarchicalLayout.levelSeparation *= -1;
+      }
+      else {
+        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
+      }
+
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
+        }
+      }
+      // 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;
+          }
+        }
+      }
 
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-            edge.from.fx += fx;
-            edge.from.fy += fy;
+      // if the user defined some levels but not all, alert and run without hierarchical layout
+      if (undefinedLevel == true && definedLevel == true) {
+        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
+        this.zoomExtent(true,this.constants.clustering.enabled);
+        if (!this.constants.clustering.enabled) {
+          this.start();
+        }
+      }
+      else {
+        // setup the system to use hierarchical method.
+        this._changeConstants();
 
+        // define levels if undefined by the users. Based on hubsize
+        if (undefinedLevel == true) {
+          this._determineLevels(hubsize);
+        }
+        // check the distribution of the nodes per level.
+        var distribution = this._getDistribution();
 
-            var factor = 5;
-            if (distance > edgeLength) {
-              factor = 25;
-            }
+        // place the nodes on the canvas. This also stablilizes the system.
+        this._placeNodesByHierarchy(distribution);
 
-            if (edge.from.level > edge.to.level) {
-              edge.to.fx -= factor*fx;
-              edge.to.fy -= factor*fy;
-            }
-            else if (edge.from.level < edge.to.level) {
-              edge.from.fx += factor*fx;
-              edge.from.fy += factor*fy;
-            }
-          }
-        }
+        // start the simulation.
+        this.start();
       }
     }
   };
 
-/***/ },
-/* 123 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
-   * The Barnes Hut method is used to speed up this N-body simulation.
+   * This function places the nodes on the canvas based on the hierarchial distribution.
    *
+   * @param {Object} distribution | obtained by the function this._getDistribution()
    * @private
    */
-  exports._calculateNodeForces = function() {
-    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
-      var node;
-      var nodes = this.calculationNodes;
-      var nodeIndices = this.calculationNodeIndices;
-      var nodeCount = nodeIndices.length;
+  exports._placeNodesByHierarchy = function(distribution) {
+    var nodeId, node;
 
-      this._formBarnesHutTree(nodes,nodeIndices);
+    // start placing all the level 0 nodes first. Then recursively position their branches.
+    for (nodeId in distribution[0].nodes) {
+      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
+        node = distribution[0].nodes[nodeId];
+        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+          if (node.xFixed) {
+            node.x = distribution[0].minPos;
+            node.xFixed = false;
 
-      var barnesHutTree = this.barnesHutTree;
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        else {
+          if (node.yFixed) {
+            node.y = distribution[0].minPos;
+            node.yFixed = false;
 
-      // place the nodes one by one recursively
-      for (var i = 0; i < nodeCount; i++) {
-        node = nodes[nodeIndices[i]];
-        // starting with root is irrelevant, it never passes the BarnesHut condition
-        this._getForceContribution(barnesHutTree.root.children.NW,node);
-        this._getForceContribution(barnesHutTree.root.children.NE,node);
-        this._getForceContribution(barnesHutTree.root.children.SW,node);
-        this._getForceContribution(barnesHutTree.root.children.SE,node);
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
       }
     }
+
+    // stabilize the system after positioning. This function calls zoomExtent.
+    this._stabilize();
   };
 
 
   /**
-   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
-   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   * This function get the distribution of levels based on hubsize
    *
-   * @param parentBranch
-   * @param node
+   * @returns {Object}
    * @private
    */
-  exports._getForceContribution = function(parentBranch,node) {
-    // we get no force contribution from an empty region
-    if (parentBranch.childrenCount > 0) {
-      var dx,dy,distance;
-
-      // get the distance from the center of mass to the node.
-      dx = parentBranch.centerOfMass.x - node.x;
-      dy = parentBranch.centerOfMass.y - node.y;
-      distance = Math.sqrt(dx * dx + dy * dy);
+  exports._getDistribution = function() {
+    var distribution = {};
+    var nodeId, node, level;
 
-      // BarnesHut condition
-      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
-      // calcSize = 1/s --> d * 1/s > 1/theta = passed
-      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
-        // duplicate code to reduce function calls to speed up program
-        if (distance == 0) {
-          distance = 0.1*Math.random();
-          dx = distance;
+    // 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;
         }
-        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-        var fx = dx * gravityForce;
-        var fy = dy * gravityForce;
-        node.fx += fx;
-        node.fy += fy;
-      }
-      else {
-        // Did not pass the condition, go into children if available
-        if (parentBranch.childrenCount == 4) {
-          this._getForceContribution(parentBranch.children.NW,node);
-          this._getForceContribution(parentBranch.children.NE,node);
-          this._getForceContribution(parentBranch.children.SW,node);
-          this._getForceContribution(parentBranch.children.SE,node);
+        else {
+          node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
         }
-        else { // parentBranch must have only one node, if it was empty we wouldnt be here
-          if (parentBranch.children.data.id != node.id) { // if it is not self
-            // duplicate code to reduce function calls to speed up program
-            if (distance == 0) {
-              distance = 0.5*Math.random();
-              dx = distance;
-            }
-            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-            var fx = dx * gravityForce;
-            var fy = dy * gravityForce;
-            node.fx += fx;
-            node.fy += fy;
-          }
+        if (!distribution.hasOwnProperty(node.level)) {
+          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+        }
+        distribution[node.level].amount += 1;
+        distribution[node.level].nodes[node.id] = node;
+      }
+    }
+
+    // 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;
         }
       }
     }
+
+    // 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);
+      }
+    }
+
+    return distribution;
   };
 
+
   /**
-   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
    *
-   * @param nodes
-   * @param nodeIndices
+   * @param hubsize
    * @private
    */
-  exports._formBarnesHutTree = function(nodes,nodeIndices) {
-    var node;
-    var nodeCount = nodeIndices.length;
-
-    var minX = Number.MAX_VALUE,
-      minY = Number.MAX_VALUE,
-      maxX =-Number.MAX_VALUE,
-      maxY =-Number.MAX_VALUE;
+  exports._determineLevels = function(hubsize) {
+    var nodeId, node;
 
-    // get the range of the nodes
-    for (var i = 0; i < nodeCount; i++) {
-      var x = nodes[nodeIndices[i]].x;
-      var y = nodes[nodeIndices[i]].y;
-      if (x < minX) { minX = x; }
-      if (x > maxX) { maxX = x; }
-      if (y < minY) { minY = y; }
-      if (y > maxY) { maxY = y; }
+    // determine hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.edges.length == hubsize) {
+          node.level = 0;
+        }
+      }
     }
-    // make the range a square
-    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
-    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
-    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
-
 
-    var minimumTreeSize = 1e-5;
-    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
-    var halfRootSize = 0.5 * rootSize;
-    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
-
-    // construct the barnesHutTree
-    var barnesHutTree = {
-      root:{
-        centerOfMass: {x:0, y:0},
-        mass:0,
-        range: {
-          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
-          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
-        },
-        size: rootSize,
-        calcSize: 1 / rootSize,
-        children: { data:null},
-        maxWidth: 0,
-        level: 0,
-        childrenCount: 4
+    // 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);
+        }
       }
-    };
-    this._splitBranch(barnesHutTree.root);
-
-    // place the nodes one by one recursively
-    for (i = 0; i < nodeCount; i++) {
-      node = nodes[nodeIndices[i]];
-      this._placeInTree(barnesHutTree.root,node);
     }
-
-    // make global
-    this.barnesHutTree = barnesHutTree
   };
 
 
   /**
-   * this updates the mass of a branch. this is increased by adding a node.
+   * 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.
    *
-   * @param parentBranch
-   * @param node
    * @private
    */
-  exports._updateBranchMass = function(parentBranch, node) {
-    var totalMass = parentBranch.mass + node.mass;
-    var totalMassInv = 1/totalMass;
-
-    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
-    parentBranch.centerOfMass.x *= totalMassInv;
-
-    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
-    parentBranch.centerOfMass.y *= totalMassInv;
-
-    parentBranch.mass = totalMass;
-    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
-    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
-
+  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();
   };
 
 
   /**
-   * determine in which branch the node will be placed.
+   * 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 parentBranch
-   * @param node
-   * @param skipMassUpdate
+   * @param edges
+   * @param parentId
+   * @param distribution
+   * @param parentLevel
    * @private
    */
-  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
-    if (skipMassUpdate != true || skipMassUpdate === undefined) {
-      // update the mass of the branch.
-      this._updateBranchMass(parentBranch,node);
-    }
-
-    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
-        this._placeInRegion(parentBranch,node,"NW");
+  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 { // in SW
-        this._placeInRegion(parentBranch,node,"SW");
+      else {
+        childNode = edges[i].to;
       }
-    }
-    else { // in NE or SE
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
-        this._placeInRegion(parentBranch,node,"NE");
+
+      // 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 { // in SE
-        this._placeInRegion(parentBranch,node,"SE");
+      else {
+        if (childNode.yFixed && childNode.level > parentLevel) {
+          childNode.yFixed = false;
+          childNode.y = distribution[childNode.level].minPos;
+          nodeMoved = true;
+        }
+      }
+
+      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);
+        }
       }
     }
   };
 
 
   /**
-   * actually place the node in a region (or branch)
+   * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
    *
-   * @param parentBranch
-   * @param node
-   * @param region
+   * @param level
+   * @param edges
+   * @param parentId
    * @private
    */
-  exports._placeInRegion = function(parentBranch,node,region) {
-    switch (parentBranch.children[region].childrenCount) {
-      case 0: // place node here
-        parentBranch.children[region].children.data = node;
-        parentBranch.children[region].childrenCount = 1;
-        this._updateBranchMass(parentBranch.children[region],node);
-        break;
-      case 1: // convert into children
-        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
-        // we move one node a pixel and we do not put it in the tree.
-        if (parentBranch.children[region].children.data.x == node.x &&
-            parentBranch.children[region].children.data.y == node.y) {
-          node.x += Math.random();
-          node.y += Math.random();
-        }
-        else {
-          this._splitBranch(parentBranch.children[region]);
-          this._placeInTree(parentBranch.children[region],node);
+  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 (edges.length > 1) {
+          this._setLevel(level+1, childNode.edges, childNode.id);
         }
-        break;
-      case 4: // place in branch
-        this._placeInTree(parentBranch.children[region],node);
-        break;
+      }
     }
   };
 
 
   /**
-   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
-   * after the split is complete.
+   * Unfix nodes
    *
-   * @param parentBranch
    * @private
    */
-  exports._splitBranch = function(parentBranch) {
-    // if the branch is shaded with a node, replace the node in the new subset.
-    var containedNode = null;
-    if (parentBranch.childrenCount == 1) {
-      containedNode = parentBranch.children.data;
-      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
-    }
-    parentBranch.childrenCount = 4;
-    parentBranch.children.data = null;
-    this._insertRegion(parentBranch,"NW");
-    this._insertRegion(parentBranch,"NE");
-    this._insertRegion(parentBranch,"SW");
-    this._insertRegion(parentBranch,"SE");
-
-    if (containedNode != null) {
-      this._placeInTree(parentBranch,containedNode);
+  exports._restoreNodes = function() {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        this.nodes[nodeId].xFixed = false;
+        this.nodes[nodeId].yFixed = false;
+      }
     }
   };
 
 
+/***/ },
+/* 56 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * This function subdivides the region into four new segments.
-   * Specifically, this inserts a single new segment.
-   * It fills the children section of the parentBranch
-   *
-   * @param parentBranch
-   * @param region
-   * @param parentRange
-   * @private
+   * Canvas shapes used by Network
    */
-  exports._insertRegion = function(parentBranch, region) {
-    var minX,maxX,minY,maxY;
-    var childSize = 0.5 * parentBranch.size;
-    switch (region) {
-      case "NW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "NE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "SW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-      case "SE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-    }
-
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
 
-    parentBranch.children[region] = {
-      centerOfMass:{x:0,y:0},
-      mass:0,
-      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
-      size: 0.5 * parentBranch.size,
-      calcSize: 2 * parentBranch.calcSize,
-      children: {data:null},
-      maxWidth: 0,
-      level: parentBranch.level+1,
-      childrenCount: 0
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+      this.beginPath();
+      this.arc(x, y, r, 0, 2*Math.PI, false);
     };
-  };
 
+    /**
+     * 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);
+    };
 
-  /**
-   * This function is for debugging purposed, it draws the tree.
-   *
-   * @param ctx
-   * @param color
-   * @private
-   */
-  exports._drawTree = function(ctx,color) {
-    if (this.barnesHutTree !== undefined) {
+    /**
+     * 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();
 
-      ctx.lineWidth = 1;
+      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._drawBranch(this.barnesHutTree.root,ctx,color);
-    }
-  };
+      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();
 
-  /**
-   * This function is for debugging purposes. It draws the branches recursively.
-   *
-   * @param branch
-   * @param ctx
-   * @param color
-   * @private
-   */
-  exports._drawBranch = function(branch,ctx,color) {
-    if (color === undefined) {
-      color = "#FF0000";
-    }
+      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
 
-    if (branch.childrenCount == 4) {
-      this._drawBranch(branch.children.NW,ctx);
-      this._drawBranch(branch.children.NE,ctx);
-      this._drawBranch(branch.children.SE,ctx);
-      this._drawBranch(branch.children.SW,ctx);
-    }
-    ctx.strokeStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.minY);
-    ctx.stroke();
+      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();
+    };
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.maxY);
-    ctx.stroke();
+    /**
+     * 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();
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.maxY);
-    ctx.stroke();
+      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)
+        );
+      }
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.minY);
-    ctx.stroke();
+      this.closePath();
+    };
 
-    /*
-     if (branch.mass > 0) {
-     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
-     ctx.stroke();
-     }
+    /**
+     * 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
 
-/***/ },
-/* 124 */
-/***/ function(module, exports, __webpack_require__) {
+      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);
+    };
 
-  /**
-   * Creation of the ClusterMixin var.
-   *
-   * This contains all the functions the Network object can use to employ clustering
-   */
 
-  /**
-  * 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);
 
-   // updates the lables after clustering
-   this.updateLabels();
+    /**
+     * 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;
 
-   // 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();
-  };
+      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 function clusters until the initialMaxNodes has been reached
-   *
-   * @param {Number}  maxNumberOfNodes
-   * @param {Boolean} reposition
-   */
-  exports.clusterToFit = function(maxNumberOfNodes, reposition) {
-    var numberOfNodes = this.nodeIndices.length;
+      this.beginPath();
+      this.moveTo(xe, ym);
 
-    var maxLevels = 50;
-    var level = 0;
+      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
 
-    // we first cluster the hubs, then we pull in the outliers, repeat
-    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-      if (level % 3 == 0) {
-        this.forceAggregateHubs(true);
-        this.normalizeClusterLevels();
-      }
-      else {
-        this.increaseClusterLevel(); // this also includes a cluster normalization
-      }
+      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
 
-      numberOfNodes = this.nodeIndices.length;
-      level += 1;
-    }
+      this.lineTo(xe, ymb);
 
-    // after the clustering we reposition the nodes to reduce the initial chaos
-    if (level > 0 && reposition == true) {
-      this.repositionNodes();
-    }
-    this._updateCalculationNodes();
-  };
+      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
 
-  /**
-   * 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;
+      this.lineTo(x, ym);
+    };
 
-      // we decluster until we reach a decent number of nodes
-      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
-        this.decreaseClusterLevel();
-        level += 1;
-      }
 
-    }
-    else {
-      this._expandClusterNode(node,false,true);
+    /**
+     * 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);
 
-      // update the index list, dynamic edges and labels
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      this._updateCalculationNodes();
-      this.updateLabels();
-    }
+      // 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);
 
-    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-    if (this.moving != isMovingBeforeClustering) {
-      this.start();
-    }
-  };
+      // 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 calls the updateClustes with default arguments
-   */
-  exports.updateClustersDefault = function() {
-    if (this.constants.clustering.enabled == true) {
-      this.updateClusters(0,false,false);
-    }
-  };
+      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;
+      }
+    };
 
-  /**
-   * 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);
-  };
+    // TODO: add diamond shape
+  }
 
 
-  /**
-   * 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);
-  };
+/***/ },
+/* 57 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Moroccan Arabic (ar-ma)
+  // author : ElFadili Yassine : https://github.com/ElFadiliY
+  // author : Abdel Said : https://github.com/abdelsaid
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ar-ma', {
+          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    // 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();
-      }
-    }
-    this._updateNodeIndexList();
+/***/ },
+/* 58 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // 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();
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic Saudi Arabia (ar-sa)
+  // author : Suhail Alkowaileet : https://github.com/xsoh
 
-    // we now reduce chains.
-    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
-      this.handleChains();
-      this._updateNodeIndexList();
-    }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
 
-    this.previousScale = this.scale;
+      return moment.lang('ar-sa', {
+          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    // rest of the update the index list, dynamic edges and labels
-    this._updateDynamicEdges();
-    this.updateLabels();
 
-    // 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();
-    }
+/***/ },
+/* 59 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic (ar)
+  // author : Abdel Said : https://github.com/abdelsaid
+  // changes in months, weekdays : Ahmed Elkhatib
 
-    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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
 
-    this._updateCalculationNodes();
-  };
+      return moment.lang('ar', {
+          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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)
 
-    }
-  };
+/***/ },
+/* 60 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * this functions starts clustering by hubs
-   * The minimum hub threshold is set globally
-   *
-   * @private
-   */
-  exports._aggregateHubs = function(force) {
-    this._getHubSize();
-    this._formClustersByHub(force,false);
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : azerbaijani (az)
+  // author : topchiyev : https://github.com/topchiyev
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-  /**
-   * This function is fired by keypress. It forces hubs to form.
-   *
-   */
-  exports.forceAggregateHubs = function(doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
+      var suffixes = {
+          1: "-inci",
+          5: "-inci",
+          8: "-inci",
+          70: "-inci",
+          80: "-inci",
 
-    this._aggregateHubs(true);
+          2: "-nci",
+          7: "-nci",
+          20: "-nci",
+          50: "-nci",
 
-    // update the index list, dynamic edges and labels
-    this._updateNodeIndexList();
-    this._updateDynamicEdges();
-    this.updateLabels();
+          3: "-üncü",
+          4: "-üncü",
+          100: "-üncü",
 
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length != amountOfNodes) {
-      this.clusterSession += 1;
-    }
+          6: "-ncı",
 
-    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();
-      }
-    }
-  };
+          9: "-uncu",
+          10: "-uncu",
+          30: "-uncu",
 
-  /**
-   * 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);
-          }
-        }
-      }
-    }
-  };
+          60: "-ıncı",
+          90: "-ıncı"
+      };
+      return moment.lang('az', {
+          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
+          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
+          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
+          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
+          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[sabah saat] LT',
+              nextWeek : '[gələn həftə] dddd [saat] LT',
+              lastDay : '[dünən] LT',
+              lastWeek : '[keçən həftə] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s əvvəl",
+              s : "birneçə saniyyə",
+              m : "bir dəqiqə",
+              mm : "%d dəqiqə",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir il",
+              yy : "%d il"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "gecə";
+              } else if (hour < 12) {
+                  return "səhər";
+              } else if (hour < 17) {
+                  return "gündüz";
+              } else {
+                  return "axşam";
+              }
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "-ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
 
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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 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;
-      }
-      recursive = openAll ? true : recursive;
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // 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];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bulgarian (bg)
+  // author : Krasen Borisov : https://github.com/kraz
 
-            // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('bg', {
+          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
+          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Днес в] LT',
+              nextDay : '[Утре в] LT',
+              nextWeek : 'dddd [в] LT',
+              lastDay : '[Вчера в] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[В изминалата] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[В изминалия] dddd [в] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "след %s",
+              past : "преди %s",
+              s : "няколко секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дни",
+              M : "месец",
+              MM : "%d месеца",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
               }
-            }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
-      }
-    }
-  };
+      });
+  }));
 
-  /**
-   * 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 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();
+/***/ },
+/* 62 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // put the child node back in the global nodes object
-      this.nodes[containedNodeId] = childNode;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bengali (bn)
+  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '১',
+          '2': '২',
+          '3': '৩',
+          '4': '৪',
+          '5': '৫',
+          '6': '৬',
+          '7': '৭',
+          '8': '৮',
+          '9': '৯',
+          '0': '০'
+      },
+      numberMap = {
+          '১': '1',
+          '২': '2',
+          '৩': '3',
+          '৪': '4',
+          '৫': '5',
+          '৬': '6',
+          '৭': '7',
+          '৮': '8',
+          '৯': '9',
+          '০': '0'
+      };
+
+      return moment.lang('bn', {
+          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
+          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
+          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
+          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
+          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm সময়",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[আজ] LT',
+              nextDay : '[আগামীকাল] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[গতকাল] LT',
+              lastWeek : '[গত] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s পরে",
+              past : "%s আগে",
+              s : "কএক সেকেন্ড",
+              m : "এক মিনিট",
+              mm : "%d মিনিট",
+              h : "এক ঘন্টা",
+              hh : "%d ঘন্টা",
+              d : "এক দিন",
+              dd : "%d দিন",
+              M : "এক মাস",
+              MM : "%d মাস",
+              y : "এক বছর",
+              yy : "%d বছর"
+          },
+          preparse: function (string) {
+              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          //Bengali is a vast language its spoken 
+          //in different forms in various parts of the world.
+          //I have just generalized with most common one used
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "রাত";
+              } else if (hour < 10) {
+                  return "শকাল";
+              } else if (hour < 17) {
+                  return "দুপুর";
+              } else if (hour < 20) {
+                  return "বিকেল";
+              } else {
+                  return "রাত";
+              }
+          },
+          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.
+          }
+      });
+  }));
 
-      // release the contained edges from this childNode back into the global edges
-      this._releaseContainedEdges(parentNode,childNode);
 
-      // reconnect rerouted edges to the childNode
-      this._connectEdgeBackToChild(parentNode,childNode);
+/***/ },
+/* 63 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // validate all edges in dynamicEdges
-      this._validateEdges(parentNode);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : breton (br)
+  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
 
-      // undo the changes from the clustering operation on the parent node
-      parentNode.mass -= childNode.mass;
-      parentNode.clusterSize -= childNode.clusterSize;
-      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function relativeTimeWithMutation(number, withoutSuffix, key) {
+          var format = {
+              'mm': "munutenn",
+              'MM': "miz",
+              'dd': "devezh"
+          };
+          return number + ' ' + mutation(format[key], 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());
+      function specialMutationForYears(number) {
+          switch (lastNumber(number)) {
+          case 1:
+          case 3:
+          case 4:
+          case 5:
+          case 9:
+              return number + ' bloaz';
+          default:
+              return number + ' vloaz';
+          }
+      }
 
-      // remove node from the list
-      delete parentNode.containedNodes[containedNodeId];
+      function lastNumber(number) {
+          if (number > 9) {
+              return lastNumber(number % 10);
+          }
+          return number;
+      }
 
-      // 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;
+      function mutation(text, number) {
+          if (number === 2) {
+              return softMutation(text);
           }
-        }
+          return text;
       }
-      // if there are no others, remove the cluster session from the list
-      if (othersPresent == false) {
-        parentNode.clusterSessions.pop();
+
+      function softMutation(text) {
+          var mutationTable = {
+              'm': 'v',
+              'b': 'v',
+              'd': 'z'
+          };
+          if (mutationTable[text.charAt(0)] === undefined) {
+              return text;
+          }
+          return mutationTable[text.charAt(0)] + text.substring(1);
       }
 
-      this._repositionBezierNodes(childNode);
-  //      this._repositionBezierNodes(parentNode);
+      return moment.lang('br', {
+          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
+          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
+          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
+          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
+          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
+          longDateFormat : {
+              LT : "h[e]mm A",
+              L : "DD/MM/YYYY",
+              LL : "D [a viz] MMMM YYYY",
+              LLL : "D [a viz] MMMM YYYY LT",
+              LLLL : "dddd, D [a viz] MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Hiziv da] LT',
+              nextDay : '[Warc\'hoazh da] LT',
+              nextWeek : 'dddd [da] LT',
+              lastDay : '[Dec\'h da] LT',
+              lastWeek : 'dddd [paset da] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "a-benn %s",
+              past : "%s 'zo",
+              s : "un nebeud segondennoù",
+              m : "ur vunutenn",
+              mm : relativeTimeWithMutation,
+              h : "un eur",
+              hh : "%d eur",
+              d : "un devezh",
+              dd : relativeTimeWithMutation,
+              M : "ur miz",
+              MM : relativeTimeWithMutation,
+              y : "ur bloaz",
+              yy : specialMutationForYears
+          },
+          ordinal : function (number) {
+              var output = (number === 1) ? 'añ' : 'vet';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      // remove the clusterSession from the child node
-      childNode.clusterSession = 0;
 
-      // recalculate the size of the node on the next time the node is rendered
-      parentNode.clearSizeCache();
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // restart the simulation to reorganise all nodes
-      this.moving = true;
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bosnian (bs)
+  // author : Nedim Cholich : https://github.com/frontyard
+  // based on (hr) translation by Bojan Marković
 
-    // check if a further expansion step is possible if recursivity is enabled
-    if (recursive == true) {
-      this._expandClusterNode(childNode,recursive,force,openAll);
-    }
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
 
-  /**
-   * 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 moment.lang('bs', {
+  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
+  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
 
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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();
-    }
-  };
 
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : catalan (ca)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
-    // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ca', {
+          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
+          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
+          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
+          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
+          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextDay : function () {
+                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "en %s",
+              past : "fa %s",
+              s : "uns segons",
+              m : "un minut",
+              mm : "%d minuts",
+              h : "una hora",
+              hh : "%d hores",
+              d : "un dia",
+              dd : "%d dies",
+              M : "un mes",
+              MM : "%d mesos",
+              y : "un any",
+              yy : "%d anys"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-            if (length < minLength) {
-              // first check which node is larger
-              var parentNode = edge.from;
-              var childNode = edge.to;
-              if (edge.to.mass > edge.from.mass) {
-                parentNode = edge.to;
-                childNode = edge.from;
-              }
+/***/ },
+/* 66 */
+/***/ function(module, exports, __webpack_require__) {
 
-              if (childNode.dynamicEdgesLength == 1) {
-                this._addToCluster(parentNode,childNode,false);
-              }
-              else if (parentNode.dynamicEdgesLength == 1) {
-                this._addToCluster(childNode,parentNode,false);
-              }
-            }
-          }
-        }
-      }
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : czech (cs)
+  // author : petrbela : https://github.com/petrbela
 
-  /**
-   * 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
+          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
 
-        // the edges can be swallowed by another decrease
-        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];
+      function plural(n) {
+          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
+      }
 
-          // group to the largest node
-          if (childNode.id != parentNode.id) {
-            if (parentNode.mass > childNode.mass) {
-              this._addToCluster(parentNode,childNode,true);
-            }
-            else {
-              this._addToCluster(childNode,parentNode,true);
-            }
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minuty' : 'minut');
+              } else {
+                  return result + 'minutami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodin');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dny' : 'dní');
+              } else {
+                  return result + 'dny';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'měsíce' : 'měsíců');
+              } else {
+                  return result + 'měsíci';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'let');
+              } else {
+                  return result + 'lety';
+              }
+              break;
           }
-        }
       }
-    }
-  };
+
+      return moment.lang('cs', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
+          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
+          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
+          longDateFormat : {
+              LT: "H.mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes v] LT",
+              nextDay: '[zítra v] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [v] LT';
+                  case 3:
+                      return '[ve středu v] LT';
+                  case 4:
+                      return '[ve čtvrtek v] LT';
+                  case 5:
+                      return '[v pátek v] LT';
+                  case 6:
+                      return '[v sobotu v] LT';
+                  }
+              },
+              lastDay: '[včera v] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulou neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[minulé] dddd [v] LT';
+                  case 3:
+                      return '[minulou středu v] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [v] LT';
+                  case 6:
+                      return '[minulou sobotu v] LT';
+                  }
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "před %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
-        }
+/***/ },
+/* 67 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chuvash (cv)
+  // author : Anatoly Mironov : https://github.com/mirontoli
 
-        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
-          smallestNeighbour = neighbour.clusterSessions.length;
-          smallestNeighbourNode = neighbour;
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
-      this._addToCluster(neighbour, node, true);
-    }
-  };
+  }(function (moment) {
+      return moment.lang('cv', {
+          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
+          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
+          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
+          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
+          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
+              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
+              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
+          },
+          calendar : {
+              sameDay: '[Паян] LT [сехетре]',
+              nextDay: '[Ыран] LT [сехетре]',
+              lastDay: '[Ĕнер] LT [сехетре]',
+              nextWeek: '[Çитес] dddd LT [сехетре]',
+              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : function (output) {
+                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
+                  return output + affix;
+              },
+              past : "%s каялла",
+              s : "пĕр-ик çеккунт",
+              m : "пĕр минут",
+              mm : "%d минут",
+              h : "пĕр сехет",
+              hh : "%d сехет",
+              d : "пĕр кун",
+              dd : "%d кун",
+              M : "пĕр уйăх",
+              MM : "%d уйăх",
+              y : "пĕр çул",
+              yy : "%d çул"
+          },
+          ordinal : '%d-мĕш',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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);
-      }
-    }
-  };
+/***/ },
+/* 68 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
-    }
-    // we decide if the node is a hub
-    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
-      // initialize variables
-      var dx,dy,length;
-      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-      var allowCluster = false;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Welsh (cy)
+  // author : Robert Allen
 
-      // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang("cy", {
+          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
+          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
+          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
+          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
+          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
+          // time formats are the same as en-gb
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[Heddiw am] LT',
+              nextDay: '[Yfory am] LT',
+              nextWeek: 'dddd [am] LT',
+              lastDay: '[Ddoe am] LT',
+              lastWeek: 'dddd [diwethaf am] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "mewn %s",
+              past: "%s yn ôl",
+              s: "ychydig eiliadau",
+              m: "munud",
+              mm: "%d munud",
+              h: "awr",
+              hh: "%d awr",
+              d: "diwrnod",
+              dd: "%d diwrnod",
+              M: "mis",
+              MM: "%d mis",
+              y: "blwyddyn",
+              yy: "%d flynedd"
+          },
+          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
+          ordinal: function (number) {
+              var b = number,
+                  output = '',
+                  lookup = [
+                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
+                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
+                  ];
 
-      // if the hub clustering is not forces, 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);
-
-                if (length < minLength) {
-                  allowCluster = true;
-                  break;
-                }
+              if (b > 20) {
+                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
+                      output = 'fed'; // not 30ain, 70ain or 90ain
+                  } else {
+                      output = 'ain';
+                  }
+              } else if (b > 0) {
+                  output = lookup[b];
               }
-            }
-          }
-        }
-      }
 
-      // start the clustering if allowed
-      if ((!force && allowCluster) || force) {
-        // we loop over all edges INITIALLY connected to this hub
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          edge = this.edges[edgesIdarray[j]];
-          // the edge can be clustered by this function in a previous loop
-          if (edge !== undefined) {
-            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
-            // 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);
-            }
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-    }
-  };
+      });
+  }));
 
 
+/***/ },
+/* 69 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : danish (da)
+  // author : Ulrik Nielsen : https://github.com/mrbase
 
-    // 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
-        this._addToContainedEdges(parentNode,childNode,edge);
-      }
-      else {
-        this._connectEdgeToCluster(parentNode,childNode,edge);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    // a contained node has no dynamic edges.
-    childNode.dynamicEdges = [];
-
-    // remove circular edges from clusters
-    this._containCircularEdgesFromNode(parentNode,childNode);
-
-
-    // remove the childNode from the global nodes object
-    delete this.nodes[childNode.id];
-
-    // update the properties of the child and parent
-    var massBefore = parentNode.mass;
-    childNode.clusterSession = this.clusterSession;
-    parentNode.mass += childNode.mass;
-    parentNode.clusterSize += childNode.clusterSize;
-    parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+  }(function (moment) {
+      return moment.lang('da', {
+          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd [d.] D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[I dag kl.] LT',
+              nextDay : '[I morgen kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[I går kl.] LT',
+              lastWeek : '[sidste] dddd [kl] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "%s siden",
+              s : "få sekunder",
+              m : "et minut",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dage",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "et år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // 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);
-    }
 
-    // forced clusters only open from screen size and double tap
-    if (force == true) {
-      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
-      parentNode.formationScale = 0;
-    }
-    else {
-      parentNode.formationScale = this.scale; // The latest child has been added on this scale
-    }
+/***/ },
+/* 70 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // recalculate the size of the node on the next time the node is rendered
-    parentNode.clearSizeCache();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : austrian german (de-at)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
+  // author : Martin Groller : https://github.com/MadMG
 
-    // set the pop-out scale for the childnode
-    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
 
-    // nullify the movement velocity of the child, this is to avoid hectic behaviour
-    childNode.clearVelocity();
+      return moment.lang('de-at', {
+          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
+          },
+          relativeTime : {
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // the mass has altered, preservation of energy dictates the velocity to be updated
-    parentNode.updateVelocity(massBefore);
 
-    // restart the simulation to reorganise all nodes
-    this.moving = true;
-  };
+/***/ },
+/* 71 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : german (de)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
 
-      // 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;
-            }
+      return moment.lang('de', {
+          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
+          },
+          relativeTime : {
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-      node.dynamicEdgesLength -= correction;
-    }
-  };
+      });
+  }));
 
 
-  /**
-   * 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);
+/***/ },
+/* 72 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // remove the edge from the global edges object
-    delete this.edges[edge.id];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : modern greek (el)
+  // author : Aggelos Karalias : https://github.com/mehiel
 
-    // 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('el', {
+          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
+          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
+          months : function (momentToFormat, format) {
+              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
+                  return this._monthsGenitiveEl[momentToFormat.month()];
+              } else {
+                  return this._monthsNominativeEl[momentToFormat.month()];
+              }
+          },
+          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
+          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
+          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
+          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'μμ' : 'ΜΜ';
+              } else {
+                  return isLower ? 'πμ' : 'ΠΜ';
+              }
+          },
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendarEl : {
+              sameDay : '[Σήμερα {}] LT',
+              nextDay : '[Αύριο {}] LT',
+              nextWeek : 'dddd [{}] LT',
+              lastDay : '[Χθες {}] LT',
+              lastWeek : function() {
+                  switch (this.day()) {
+                      case 6:
+                          return '[το προηγούμενο] dddd [{}] LT';
+                      default:
+                          return '[την προηγούμενη] dddd [{}] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          calendar : function (key, mom) {
+              var output = this._calendarEl[key],
+                  hours = mom && mom.hours();
 
-  /**
-   * 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
+              if (typeof output === 'function') {
+                  output = output.apply(mom);
+              }
 
-        edge.originalFromId.push(childNode.id);
-        edge.from = parentNode;
-        edge.fromId = parentNode.id;
-      }
+              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
+          },
+          relativeTime : {
+              future : "σε %s",
+              past : "%s πριν",
+              s : "δευτερόλεπτα",
+              m : "ένα λεπτό",
+              mm : "%d λεπτά",
+              h : "μία ώρα",
+              hh : "%d ώρες",
+              d : "μία μέρα",
+              dd : "%d μέρες",
+              M : "ένας μήνας",
+              MM : "%d μήνες",
+              y : "ένας χρόνος",
+              yy : "%d χρόνια"
+          },
+          ordinal : function (number) {
+              return number + 'η';
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4st is the first week of the year.
+          }
+      });
+  }));
 
-      this._addToReroutedEdges(parentNode,childNode,edge);
-    }
-  };
 
+/***/ },
+/* 73 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : australian english (en-au)
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('en-au', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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);
+/***/ },
+/* 74 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // this edge becomes part of the dynamicEdges of the cluster node
-    parentNode.dynamicEdges.push(edge);
-   };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : canadian english (en-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('en-ca', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM, YYYY",
+              LLL : "D MMMM, YYYY LT",
+              LLLL : "dddd, D MMMM, YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
-        }
+/***/ },
+/* 75 */
+/***/ function(module, exports, __webpack_require__) {
 
-        // append this edge to the list of edges connecting to the childnode
-        childNode.dynamicEdges.push(edge);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : great britain english (en-gb)
+  // author : Chris Gedrim : https://github.com/chrisgedrim
 
-        // 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('en-gb', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-      // remove the entry from the rerouted edges
-      delete parentNode.reroutedEdges[childNode.id];
-    }
-  };
+      });
+  }));
 
 
-  /**
-   * 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) {
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
-        parentNode.dynamicEdges.splice(i,1);
-      }
-    }
-  };
+/***/ },
+/* 76 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : esperanto (eo)
+  // author : Colin Dean : https://github.com/colindean
+  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
+  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
 
-  /**
-   * 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];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('eo', {
+          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
+          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
+          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D[-an de] MMMM, YYYY",
+              LLL : "D[-an de] MMMM, YYYY LT",
+              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'p.t.m.' : 'P.T.M.';
+              } else {
+                  return isLower ? 'a.t.m.' : 'A.T.M.';
+              }
+          },
+          calendar : {
+              sameDay : '[Hodiaŭ je] LT',
+              nextDay : '[Morgaŭ je] LT',
+              nextWeek : 'dddd [je] LT',
+              lastDay : '[Hieraŭ je] LT',
+              lastWeek : '[pasinta] dddd [je] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "je %s",
+              past : "antaŭ %s",
+              s : "sekundoj",
+              m : "minuto",
+              mm : "%d minutoj",
+              h : "horo",
+              hh : "%d horoj",
+              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
+              dd : "%d tagoj",
+              M : "monato",
+              MM : "%d monatoj",
+              y : "jaro",
+              yy : "%d jaroj"
+          },
+          ordinal : "%da",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // put the edge back in the global edges object
-      this.edges[edge.id] = edge;
 
-      // 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];
+/***/ },
+/* 77 */
+/***/ function(module, exports, __webpack_require__) {
 
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : spanish (es)
+  // author : Julio Napurí : https://github.com/julionc
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
+          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
 
+      return moment.lang('es', {
+          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShort[m.month()];
+              } else {
+                  return monthsShortDot[m.month()];
+              }
+          },
+          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
+          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [del] YYYY",
+              LLL : "D [de] MMMM [del] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "en %s",
+              past : "hace %s",
+              s : "unos segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "una hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un año",
+              yy : "%d años"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  // ------------------- UTILITY FUNCTIONS ---------------------------- //
+/***/ },
+/* 78 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : estonian (et)
+  // author : Henry Kehlmann : https://github.com/madhenry
+  // improvements : Illimar Tambek : https://github.com/ragulka
 
-  /**
-   * 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),"]");
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    // 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);
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
+              'm' : ['ühe minuti', 'üks minut'],
+              'mm': [number + ' minuti', number + ' minutit'],
+              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
+              'hh': [number + ' tunni', number + ' tundi'],
+              'd' : ['ühe päeva', 'üks päev'],
+              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
+              'MM': [number + ' kuu', number + ' kuud'],
+              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
+              'yy': [number + ' aasta', number + ' aastat']
+          };
+          if (withoutSuffix) {
+              return format[key][2] ? format[key][2] : format[key][1];
           }
-        }
+          return isFuture ? format[key][0] : format[key][1];
       }
-    }
 
-  //    /* Debug Override */
-  //    for (nodeId in this.nodes) {
-  //      if (this.nodes.hasOwnProperty(nodeId)) {
-  //        node = this.nodes[nodeId];
-  //        node.label = String(node.level);
-  //      }
-  //    }
+      return moment.lang('et', {
+          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
+          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
+          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
+          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
+          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
+          longDateFormat : {
+              LT   : "H:mm",
+              L    : "DD.MM.YYYY",
+              LL   : "D. MMMM YYYY",
+              LLL  : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[Täna,] LT',
+              nextDay  : '[Homme,] LT',
+              nextWeek : '[Järgmine] dddd LT',
+              lastDay  : '[Eile,] LT',
+              lastWeek : '[Eelmine] dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s pärast",
+              past   : "%s tagasi",
+              s      : processRelativeTime,
+              m      : processRelativeTime,
+              mm     : processRelativeTime,
+              h      : processRelativeTime,
+              hh     : processRelativeTime,
+              d      : processRelativeTime,
+              dd     : '%d päeva',
+              M      : processRelativeTime,
+              MM     : processRelativeTime,
+              y      : processRelativeTime,
+              yy     : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  };
 
+/***/ },
+/* 79 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : euskara (eu)
+  // author : Eneko Illarramendi : https://github.com/eillarra
 
-    // 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;}
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    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 (moment) {
+      return moment.lang('eu', {
+          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
+          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
+          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
+          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
+          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY[ko] MMMM[ren] D[a]",
+              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
+              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
+              l : "YYYY-M-D",
+              ll : "YYYY[ko] MMM D[a]",
+              lll : "YYYY[ko] MMM D[a] LT",
+              llll : "ddd, YYYY[ko] MMM D[a] LT"
+          },
+          calendar : {
+              sameDay : '[gaur] LT[etan]',
+              nextDay : '[bihar] LT[etan]',
+              nextWeek : 'dddd LT[etan]',
+              lastDay : '[atzo] LT[etan]',
+              lastWeek : '[aurreko] dddd LT[etan]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s barru",
+              past : "duela %s",
+              s : "segundo batzuk",
+              m : "minutu bat",
+              mm : "%d minutu",
+              h : "ordu bat",
+              hh : "%d ordu",
+              d : "egun bat",
+              dd : "%d egun",
+              M : "hilabete bat",
+              MM : "%d hilabete",
+              y : "urte bat",
+              yy : "%d urte"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
-      }
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      // if a cluster was formed, we increase the clusterSession
-      if (this.nodeIndices.length != amountOfNodes) {
-        this.clusterSession += 1;
-      }
-    }
-  };
-
+      });
+  }));
 
 
-  /**
-   * 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
-      )
-  };
+/***/ },
+/* 80 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Persian Language
+  // author : Ebrahim Byagowi : https://github.com/ebraminio
 
-  /**
-   * 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.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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      var symbolMap = {
+          '1': '۱',
+          '2': '۲',
+          '3': '۳',
+          '4': '۴',
+          '5': '۵',
+          '6': '۶',
+          '7': '۷',
+          '8': '۸',
+          '9': '۹',
+          '0': '۰'
+      }, numberMap = {
+          '۱': '1',
+          '۲': '2',
+          '۳': '3',
+          '۴': '4',
+          '۵': '5',
+          '۶': '6',
+          '۷': '7',
+          '۸': '8',
+          '۹': '9',
+          '۰': '0'
+      };
+
+      return moment.lang('fa', {
+          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
+          longDateFormat : {
+              LT : 'HH:mm',
+              L : 'DD/MM/YYYY',
+              LL : 'D MMMM YYYY',
+              LLL : 'D MMMM YYYY LT',
+              LLLL : 'dddd, D MMMM YYYY LT'
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "قبل از ظهر";
+              } else {
+                  return "بعد از ظهر";
+              }
+          },
+          calendar : {
+              sameDay : '[امروز ساعت] LT',
+              nextDay : '[فردا ساعت] LT',
+              nextWeek : 'dddd [ساعت] LT',
+              lastDay : '[دیروز ساعت] LT',
+              lastWeek : 'dddd [پیش] [ساعت] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : 'در %s',
+              past : '%s پیش',
+              s : 'چندین ثانیه',
+              m : 'یک دقیقه',
+              mm : '%d دقیقه',
+              h : 'یک ساعت',
+              hh : '%d ساعت',
+              d : 'یک روز',
+              dd : '%d روز',
+              M : 'یک ماه',
+              MM : '%d ماه',
+              y : 'یک سال',
+              yy : '%d سال'
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          ordinal : '%dم',
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12 // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 81 */
+/***/ function(module, exports, __webpack_require__) {
 
-    for (var i = 0; i < this.nodeIndices.length; i++) {
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : finnish (fi)
+  // author : Tarmo Aidantausta : https://github.com/bleadof
 
-      var node = this.nodes[this.nodeIndices[i]];
-      if (node.dynamicEdgesLength > largestHub) {
-        largestHub = node.dynamicEdgesLength;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      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 (moment) {
+      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
+          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
+                            numbersPast[7], numbersPast[8], numbersPast[9]];
 
-  /**
-   * 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;
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = "";
+          switch (key) {
+          case 's':
+              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
+          case 'm':
+              return isFuture ? 'minuutin' : 'minuutti';
+          case 'mm':
+              result = isFuture ? 'minuutin' : 'minuuttia';
+              break;
+          case 'h':
+              return isFuture ? 'tunnin' : 'tunti';
+          case 'hh':
+              result = isFuture ? 'tunnin' : 'tuntia';
+              break;
+          case 'd':
+              return isFuture ? 'päivän' : 'päivä';
+          case 'dd':
+              result = isFuture ? 'päivän' : 'päivää';
+              break;
+          case 'M':
+              return isFuture ? 'kuukauden' : 'kuukausi';
+          case 'MM':
+              result = isFuture ? 'kuukauden' : 'kuukautta';
+              break;
+          case 'y':
+              return isFuture ? 'vuoden' : 'vuosi';
+          case 'yy':
+              result = isFuture ? 'vuoden' : 'vuotta';
+              break;
           }
-        }
+          result = verbalNumber(number, isFuture) + " " + result;
+          return result;
       }
-    }
-  };
 
-  /**
-   * 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;
+      function verbalNumber(number, isFuture) {
+          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
       }
-    }
-    return chains/total;
-  };
+
+      return moment.lang('fi', {
+          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
+          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
+          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
+          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
+          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD.MM.YYYY",
+              LL : "Do MMMM[ta] YYYY",
+              LLL : "Do MMMM[ta] YYYY, [klo] LT",
+              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
+              l : "D.M.YYYY",
+              ll : "Do MMM YYYY",
+              lll : "Do MMM YYYY, [klo] LT",
+              llll : "ddd, Do MMM YYYY, [klo] LT"
+          },
+          calendar : {
+              sameDay : '[tänään] [klo] LT',
+              nextDay : '[huomenna] [klo] LT',
+              nextWeek : 'dddd [klo] LT',
+              lastDay : '[eilen] [klo] LT',
+              lastWeek : '[viime] dddd[na] [klo] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s päästä",
+              past : "%s sitten",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : "%d.",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 125 */
+/* 82 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-
-  /**
-   * 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.
-   */
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : faroese (fo)
+  // author : Ragnar Johannesen : https://github.com/ragnar123
 
-  /**
-   * 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;
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fo', {
+          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
+          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
+          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D. MMMM, YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Í dag kl.] LT',
+              nextDay : '[Í morgin kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[Í gjár kl.] LT',
+              lastWeek : '[síðstu] dddd [kl] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "um %s",
+              past : "%s síðani",
+              s : "fá sekund",
+              m : "ein minutt",
+              mm : "%d minuttir",
+              h : "ein tími",
+              hh : "%d tímar",
+              d : "ein dagur",
+              dd : "%d dagar",
+              M : "ein mánaði",
+              MM : "%d mánaðir",
+              y : "eitt ár",
+              yy : "%d ár"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   *  /**
-   * 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);
-    }
-  };
+/***/ },
+/* 83 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : canadian french (fr-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
 
-  /**
-   * 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"];
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fr-ca', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
+          },
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
+          }
+      });
+  }));
 
 
-  /**
-   * 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"];
-  };
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : french (fr)
+  // author : John Fischer : https://github.com/jfroffice
 
-  /**
-   * 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"];
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fr', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
+          },
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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());
-  };
+/***/ },
+/* 85 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : galician (gl)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
-  /**
-   * This function returns the currently active sector Id
-   *
-   * @returns {String}
-   * @private
-   */
-  exports._sector = function() {
-    return this.activeSector[this.activeSector.length-1];
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('gl', {
+          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
+          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
+          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
+          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              lastDay : function () {
+                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : function (str) {
+                  if (str === "uns segundos") {
+                      return "nuns segundos";
+                  }
+                  return "en " + str;
+              },
+              past : "hai %s",
+              s : "uns segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "unha hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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.');
-    }
-  };
+/***/ },
+/* 86 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Hebrew (he)
+  // author : Tomer Cohen : https://github.com/tomer
+  // author : Moshe Simantov : https://github.com/DevelopmentIL
+  // author : Tal Ater : https://github.com/TalAter
 
-  /**
-   * 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);
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('he', {
+          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
+          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
+          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
+          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
+          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [ב]MMMM YYYY",
+              LLL : "D [ב]MMMM YYYY LT",
+              LLLL : "dddd, D [ב]MMMM YYYY LT",
+              l : "D/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[היום ב־]LT',
+              nextDay : '[מחר ב־]LT',
+              nextWeek : 'dddd [בשעה] LT',
+              lastDay : '[אתמול ב־]LT',
+              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "בעוד %s",
+              past : "לפני %s",
+              s : "מספר שניות",
+              m : "דקה",
+              mm : "%d דקות",
+              h : "שעה",
+              hh : function (number) {
+                  if (number === 2) {
+                      return "שעתיים";
+                  }
+                  return number + " שעות";
+              },
+              d : "יום",
+              dd : function (number) {
+                  if (number === 2) {
+                      return "יומיים";
+                  }
+                  return number + " ימים";
+              },
+              M : "חודש",
+              MM : function (number) {
+                  if (number === 2) {
+                      return "חודשיים";
+                  }
+                  return number + " חודשים";
+              },
+              y : "שנה",
+              yy : function (number) {
+                  if (number === 2) {
+                      return "שנתיים";
+                  }
+                  return number + " שנים";
+              }
+          }
+      });
+  }));
 
 
-  /**
-   * 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();
-  };
+/***/ },
+/* 87 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hindi (hi)
+  // author : Mayank Singhal : https://github.com/mayanksinghal
 
-  /**
-   * 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};
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-    // 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"
+      return moment.lang('hi', {
+          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
+          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[कल] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[कल] LT',
+              lastWeek : '[पिछले] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s में",
+              past : "%s पहले",
+              s : "कुछ ही क्षण",
+              m : "एक मिनट",
+              mm : "%d मिनट",
+              h : "एक घंटा",
+              hh : "%d घंटे",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महीने",
+              MM : "%d महीने",
+              y : "एक वर्ष",
+              yy : "%d वर्ष"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
+          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "रात";
+              } else if (hour < 10) {
+                  return "सुबह";
+              } else if (hour < 17) {
+                  return "दोपहर";
+              } else if (hour < 20) {
+                  return "शाम";
+              } else {
+                  return "रात";
+              }
+          },
+          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.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];
-  };
 
+/***/ },
+/* 88 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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];
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hrvatski (hr)
+  // author : Bojan Marković : https://github.com/bmarkovic
 
+  // based on (sl) translation by Robert Sedovšek
 
-  /**
-   * 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-    // we have moved the sector data into the frozen set, we now remove it from the active set
-    this._deleteActiveSector(sectorId);
-  };
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
 
+      return moment.lang('hr', {
+          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
+          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
 
-  /**
-   * 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];
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    // we have moved the sector data into the active set, we now remove it from the frozen stack
-    this._deleteFrozenSector(sectorId);
-  };
 
+/***/ },
+/* 89 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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];
-      }
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hungarian (hu)
+  // author : Adam Brunner : https://github.com/adambrunner
 
-    // 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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    // merge the nodeIndices
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
-    }
-  };
-
+  }(function (moment) {
+      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
 
-  /**
-   * 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);
-  };
+      function translate(number, withoutSuffix, key, isFuture) {
+          var num = number,
+              suffix;
 
+          switch (key) {
+          case 's':
+              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
+          case 'm':
+              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'mm':
+              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'h':
+              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'hh':
+              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'd':
+              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'dd':
+              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'M':
+              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'MM':
+              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'y':
+              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
+          case 'yy':
+              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
+          }
 
-  /**
-   * 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();
+          return '';
+      }
 
-  //    // 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!!");
-  //    }
+      function week(isFuture) {
+          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
+      }
 
-    // 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];
+      return moment.lang('hu', {
+          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
+          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
+          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
+          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
+          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "YYYY.MM.DD.",
+              LL : "YYYY. MMMM D.",
+              LLL : "YYYY. MMMM D., LT",
+              LLLL : "YYYY. MMMM D., dddd LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 12) {
+                  return isLower === true ? 'de' : 'DE';
+              } else {
+                  return isLower === true ? 'du' : 'DU';
+              }
+          },
+          calendar : {
+              sameDay : '[ma] LT[-kor]',
+              nextDay : '[holnap] LT[-kor]',
+              nextWeek : function () {
+                  return week.call(this, true);
+              },
+              lastDay : '[tegnap] LT[-kor]',
+              lastWeek : function () {
+                  return week.call(this, false);
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s múlva",
+              past : "%s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    var unqiueIdentifier = util.randomUUID();
 
-    // we fully freeze the currently active sector
-    this._freezeSector(sector);
+/***/ },
+/* 90 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
-    this._createNewSector(unqiueIdentifier);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Armenian (hy-am)
+  // author : Armendarabyan : https://github.com/armendarabyan
 
-    // we add the active sector to the sectors array to be able to revert these steps later on
-    this._setActiveSector(unqiueIdentifier);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
-    this._switchToSector(this._sector());
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
+              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
+          },
 
-    // finally we add the node we removed from our previous active sector to the new active sector
-    this.nodes[node.id] = node;
-  };
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
+          return months[nounCase][m.month()];
+      }
 
-  /**
-   * 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 monthsShortCaseReplace(m, format) {
+          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
 
-    // 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();
+          return monthsShort[m.month()];
+      }
 
-        // we collapse the sector back to a single cluster
-        this._collapseThisToSingleCluster();
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
 
-        // we move the remaining nodes, edges and nodeIndices to the previous sector.
-        // This previous sector is the one we will reactivate
-        this._mergeThisWithFrozen(previousSector);
+          return weekdays[m.day()];
+      }
 
-        // 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);
+      return moment.lang('hy-am', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY թ.",
+              LLL : "D MMMM YYYY թ., LT",
+              LLLL : "dddd, D MMMM YYYY թ., LT"
+          },
+          calendar : {
+              sameDay: '[այսօր] LT',
+              nextDay: '[վաղը] LT',
+              lastDay: '[երեկ] LT',
+              nextWeek: function () {
+                  return 'dddd [օրը ժամը] LT';
+              },
+              lastWeek: function () {
+                  return '[անցած] dddd [օրը ժամը] LT';
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s հետո",
+              past : "%s առաջ",
+              s : "մի քանի վայրկյան",
+              m : "րոպե",
+              mm : "%d րոպե",
+              h : "ժամ",
+              hh : "%d ժամ",
+              d : "օր",
+              dd : "%d օր",
+              M : "ամիս",
+              MM : "%d ամիս",
+              y : "տարի",
+              yy : "%d տարի"
+          },
 
-        // we activate the previously active (and currently frozen) sector.
-        this._activateSector(previousSector);
+          meridiem : function (hour) {
+              if (hour < 4) {
+                  return "գիշերվա";
+              } else if (hour < 12) {
+                  return "առավոտվա";
+              } else if (hour < 17) {
+                  return "ցերեկվա";
+              } else {
+                  return "երեկոյան";
+              }
+          },
 
-        // we load the references from the newly active sector into the global references
-        this._switchToSector(previousSector);
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'DDD':
+              case 'w':
+              case 'W':
+              case 'DDDo':
+                  if (number === 1) {
+                      return number + '-ին';
+                  }
+                  return number + '-րդ';
+              default:
+                  return number;
+              }
+          },
 
-        // we forget the previously active sector because we reverted to the one before
-        this._forgetLastSector();
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-        // finally, we update the node index list.
-        this._updateNodeIndexList();
 
-        // we refresh the list with calulation nodes and calculation node indices.
-        this._updateCalculationNodes();
-      }
-    }
-  };
+/***/ },
+/* 91 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bahasa Indonesia (id)
+  // author : Mohammad Satrio Utomo : https://github.com/tyok
+  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
 
-  /**
-   * 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) {
-    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);
-          this[runFunction]();
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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) {
-            this[runFunction](args[0],args[1]);
-          }
-          else {
-            this[runFunction](argument);
+  }(function (moment) {
+      return moment.lang('id', {
+          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
+          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
+          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
+          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'siang';
+              } else if (hours < 19) {
+                  return 'sore';
+              } else {
+                  return 'malam';
+              }
+          },
+          calendar : {
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Besok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kemarin pukul] LT',
+              lastWeek : 'dddd [lalu pukul] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "dalam %s",
+              past : "%s yang lalu",
+              s : "beberapa detik",
+              m : "semenit",
+              mm : "%d menit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
-      }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-  };
+      });
+  }));
 
 
-  /**
-   * 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) {
-    if (argument === undefined) {
-      this._switchToSupportSector();
-      this[runFunction]();
-    }
-    else {
-      this._switchToSupportSector();
-      var args = Array.prototype.splice.call(arguments, 1);
-      if (args.length > 1) {
-        this[runFunction](args[0],args[1]);
-      }
-      else {
-        this[runFunction](argument);
-      }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-  };
+/***/ },
+/* 92 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : icelandic (is)
+  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
 
-  /**
-   * 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]();
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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);
+  }(function (moment) {
+      function plural(n) {
+          if (n % 100 === 11) {
+              return true;
+          } else if (n % 10 === 1) {
+              return false;
           }
-        }
-      }
-    }
-    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);
+          return true;
       }
-    }
-  };
-
-
-  /**
-   * 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"];
-  };
-
-
-  /**
-   * 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) {
-
-          this._switchToSector(sector,sectorType);
 
-          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;}
-            }
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':
+              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
+          case 'm':
+              return withoutSuffix ? 'mínúta' : 'mínútu';
+          case 'mm':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
+              } else if (withoutSuffix) {
+                  return result + 'mínúta';
+              }
+              return result + 'mínútu';
+          case 'hh':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
+              }
+              return result + 'klukkustund';
+          case 'd':
+              if (withoutSuffix) {
+                  return 'dagur';
+              }
+              return isFuture ? 'dag' : 'degi';
+          case 'dd':
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'dagar';
+                  }
+                  return result + (isFuture ? 'daga' : 'dögum');
+              } else if (withoutSuffix) {
+                  return result + 'dagur';
+              }
+              return result + (isFuture ? 'dag' : 'degi');
+          case 'M':
+              if (withoutSuffix) {
+                  return 'mánuður';
+              }
+              return isFuture ? 'mánuð' : 'mánuði';
+          case 'MM':
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'mánuðir';
+                  }
+                  return result + (isFuture ? 'mánuði' : 'mánuðum');
+              } else if (withoutSuffix) {
+                  return result + 'mánuður';
+              }
+              return result + (isFuture ? 'mánuð' : 'mánuði');
+          case 'y':
+              return withoutSuffix || isFuture ? 'ár' : 'ári';
+          case 'yy':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
+              }
+              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
           }
-          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.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();
-  };
+      return moment.lang('is', {
+          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
+          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
+          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
+          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
+          },
+          calendar : {
+              sameDay : '[í dag kl.] LT',
+              nextDay : '[á morgun kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[í gær kl.] LT',
+              lastWeek : '[síðasta] dddd [kl.] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "eftir %s",
+              past : "fyrir %s síðan",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : "klukkustund",
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 126 */
+/* 93 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Node = __webpack_require__(39);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : italian (it)
+  // author : Lorenzo : https://github.com/aliem
+  // author: Mattia Larentis: https://github.com/nostalgiaz
 
-  /**
-   * 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);
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-  /**
-   * 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
-    };
-  };
-
+  }(function (moment) {
+      return moment.lang('it', {
+          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
+          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
+          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
+          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
+          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Oggi alle] LT',
+              nextDay: '[Domani alle] LT',
+              nextWeek: 'dddd [alle] LT',
+              lastDay: '[Ieri alle] LT',
+              lastWeek: '[lo scorso] dddd [alle] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : function (s) {
+                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
+              },
+              past : "%s fa",
+              s : "alcuni secondi",
+              m : "un minuto",
+              mm : "%d minuti",
+              h : "un'ora",
+              hh : "%d ore",
+              d : "un giorno",
+              dd : "%d giorni",
+              M : "un mese",
+              MM : "%d mesi",
+              y : "un anno",
+              yy : "%d anni"
+          },
+          ordinal: '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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 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;
-    }
-  };
+/***/ },
+/* 94 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : japanese (ja)
+  // author : LI Long : https://github.com/baryon
 
-  /**
-   * 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);
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-
-  /**
-   * 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;
-  };
-
-  /**
-   * 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 (overlappingEdges.length > 0) {
-      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
-    }
-    else {
-      return null;
-    }
-  };
-
-
-  /**
-   * 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;
-    }
-  };
+  }(function (moment) {
+      return moment.lang('ja', {
+          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
+          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
+          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
+          longDateFormat : {
+              LT : "Ah時m分",
+              L : "YYYY/MM/DD",
+              LL : "YYYY年M月D日",
+              LLL : "YYYY年M月D日LT",
+              LLLL : "YYYY年M月D日LT dddd"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "午前";
+              } else {
+                  return "午後";
+              }
+          },
+          calendar : {
+              sameDay : '[今日] LT',
+              nextDay : '[明日] LT',
+              nextWeek : '[来週]dddd LT',
+              lastDay : '[昨日] LT',
+              lastWeek : '[前週]dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s後",
+              past : "%s前",
+              s : "数秒",
+              m : "1分",
+              mm : "%d分",
+              h : "1時間",
+              hh : "%d時間",
+              d : "1日",
+              dd : "%d日",
+              M : "1ヶ月",
+              MM : "%dヶ月",
+              y : "1年",
+              yy : "%d年"
+          }
+      });
+  }));
 
-  /**
-   * 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;
-    }
-  };
 
+/***/ },
+/* 95 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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];
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Georgian (ka)
+  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
 
-  /**
-   * 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();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-
-    this.selectionObj = {nodes:{},edges:{}};
+  }(function (moment) {
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
+              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
+          },
 
-  /**
-   * Unselect all clusters. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectClusters = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
+          nounCase = (/D[oD] *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-    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]);
-        }
+          return months[nounCase][m.month()];
       }
-    }
-
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
 
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
+              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
+          },
 
-  /**
-   * 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;
-  };
+          nounCase = (/(წინა|შემდეგ)/).test(format) ?
+              'accusative' :
+              'nominative';
 
-  /**
-   * 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 weekdays[nounCase][m.day()];
       }
-    }
-    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];
-      }
-    }
-    return null;
-  };
+      return moment.lang('ka', {
+          months : monthsCaseReplace,
+          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
+          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[დღეს] LT[-ზე]',
+              nextDay : '[ხვალ] LT[-ზე]',
+              lastDay : '[გუშინ] LT[-ზე]',
+              nextWeek : '[შემდეგ] dddd LT[-ზე]',
+              lastWeek : '[წინა] dddd LT-ზე',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : function (s) {
+                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
+                      s.replace(/ი$/, "ში") :
+                      s + "ში";
+              },
+              past : function (s) {
+                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
+                      return s.replace(/(ი|ე)$/, "ის წინ");
+                  }
+                  if ((/წელი/).test(s)) {
+                      return s.replace(/წელი$/, "წლის წინ");
+                  }
+              },
+              s : "რამდენიმე წამი",
+              m : "წუთი",
+              mm : "%d წუთი",
+              h : "საათი",
+              hh : "%d საათი",
+              d : "დღე",
+              dd : "%d დღე",
+              M : "თვე",
+              MM : "%d თვე",
+              y : "წელი",
+              yy : "%d წელი"
+          },
+          ordinal : function (number) {
+              if (number === 0) {
+                  return number;
+              }
 
+              if (number === 1) {
+                  return number + "-ლი";
+              }
 
-  /**
-   * 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;
-  };
+              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
+                  return "მე-" + number;
+              }
 
+              return number + "-ე";
+          },
+          week : {
+              dow : 1,
+              doy : 7
+          }
+      });
+  }));
 
-  /**
-   * 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;
-  };
 
-  /**
-   * 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;
-  };
+/***/ },
+/* 96 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : khmer (km)
+  // author : Kruy Vanna : https://github.com/kruyvanna
 
-  /**
-   * 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;
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    return false;
-  };
-
-  /**
-   * 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);
-    }
-  };
-
-  /**
-   * 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);
-    }
-  };
+  }(function (moment) {
+      return moment.lang('km', {
+          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
+              nextDay: '[ស្អែក ម៉ោង] LT',
+              nextWeek: 'dddd [ម៉ោង] LT',
+              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
+              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "%sទៀត",
+              past: "%sមុន",
+              s: "ប៉ុន្មានវិនាទី",
+              m: "មួយនាទី",
+              mm: "%d នាទី",
+              h: "មួយម៉ោង",
+              hh: "%d ម៉ោង",
+              d: "មួយថ្ងៃ",
+              dd: "%d ថ្ងៃ",
+              M: "មួយខែ",
+              MM: "%d ខែ",
+              y: "មួយឆ្នាំ",
+              yy: "%d ឆ្នាំ"
+          },
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4 // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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);
-    }
-  };
+/***/ },
+/* 97 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : korean (ko)
+  //
+  // authors 
+  //
+  // - Kyungwook, Park : https://github.com/kyungw00k
+  // - Jeeeyul Lee <jeeeyul@gmail.com>
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ko', {
+          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
+          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
+          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
+          longDateFormat : {
+              LT : "A h시 mm분",
+              L : "YYYY.MM.DD",
+              LL : "YYYY년 MMMM D일",
+              LLL : "YYYY년 MMMM D일 LT",
+              LLLL : "YYYY년 MMMM D일 dddd LT"
+          },
+          meridiem : function (hour, minute, isUpper) {
+              return hour < 12 ? '오전' : '오후';
+          },
+          calendar : {
+              sameDay : '오늘 LT',
+              nextDay : '내일 LT',
+              nextWeek : 'dddd LT',
+              lastDay : '어제 LT',
+              lastWeek : '지난주 dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s 후",
+              past : "%s 전",
+              s : "몇초",
+              ss : "%d초",
+              m : "일분",
+              mm : "%d분",
+              h : "한시간",
+              hh : "%d시간",
+              d : "하루",
+              dd : "%d일",
+              M : "한달",
+              MM : "%d달",
+              y : "일년",
+              yy : "%d년"
+          },
+          ordinal : '%d일',
+          meridiemParse : /(오전|오후)/,
+          isPM : function (token) {
+              return token === "오후";
+          }
+      });
+  }));
 
 
+/***/ },
+/* 98 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    if (highlightEdges === undefined) {
-      highlightEdges = true;
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Luxembourgish (lb)
+  // author : mweimerskirch : https://github.com/mweimerskirch
 
-    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
-      this._unselectAll(true);
-    }
+  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
+  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
+  // and "eifelerRegelAppliesToNumber" methods are meant for
 
-    if (object.selected == false) {
-      object.select();
-      this._addToSelection(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
-        this._selectConnectedEdges(object);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eng Minutt', 'enger Minutt'],
+              'h': ['eng Stonn', 'enger Stonn'],
+              'd': ['een Dag', 'engem Dag'],
+              'dd': [number + ' Deeg', number + ' Deeg'],
+              'M': ['ee Mount', 'engem Mount'],
+              'MM': [number + ' Méint', number + ' Méint'],
+              'y': ['ee Joer', 'engem Joer'],
+              'yy': [number + ' Joer', number + ' Joer']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
       }
-    }
-    else {
-      object.unselect();
-      this._removeFromSelection(object);
-    }
-
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
 
+      function processFutureTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "a " + string;
+          }
+          return "an " + string;
+      }
 
-  /**
-   * 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});
-    }
-  };
+      function processPastTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "viru " + string;
+          }
+          return "virun " + string;
+      }
 
-  /**
-   * 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});
+      function processLastWeek(string1) {
+          var weekday = this.format('d');
+          if (eifelerRegelAppliesToWeekday(weekday)) {
+              return '[Leschte] dddd [um] LT';
+          }
+          return '[Leschten] dddd [um] LT';
       }
-    }
-    if (object instanceof Node) {
-      this._hoverConnectedEdges(object);
-    }
-  };
 
+      /**
+       * Returns true if the word before the given week day loses the "-n" ending.
+       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
+       *
+       * @param weekday {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToWeekday(weekday) {
+          weekday = parseInt(weekday, 10);
+          switch (weekday) {
+          case 0: // Sonndeg
+          case 1: // Méindeg
+          case 3: // Mëttwoch
+          case 5: // Freideg
+          case 6: // Samschdeg
+              return true;
+          default: // 2 Dënschdeg, 4 Donneschdeg
+              return false;
+          }
+      }
 
-  /**
-   * 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) {
-  };
+      /**
+       * Returns true if the word before the given number loses the "-n" ending.
+       * e.g. "an 10 Deeg" but "a 5 Deeg"
+       *
+       * @param number {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToNumber(number) {
+          number = parseInt(number, 10);
+          if (isNaN(number)) {
+              return false;
+          }
+          if (number < 0) {
+              // Negative Number --> always true
+              return true;
+          } else if (number < 10) {
+              // Only 1 digit
+              if (4 <= number && number <= 7) {
+                  return true;
+              }
+              return false;
+          } else if (number < 100) {
+              // 2 digits
+              var lastDigit = number % 10, firstDigit = number / 10;
+              if (lastDigit === 0) {
+                  return eifelerRegelAppliesToNumber(firstDigit);
+              }
+              return eifelerRegelAppliesToNumber(lastDigit);
+          } else if (number < 10000) {
+              // 3 or 4 digits --> recursively check first digit
+              while (number >= 10) {
+                  number = number / 10;
+              }
+              return eifelerRegelAppliesToNumber(number);
+          } else {
+              // Anything larger than 4 digits: recursively check first n-3 digits
+              number = number / 1000;
+              return eifelerRegelAppliesToNumber(number);
+          }
+      }
 
+      return moment.lang('lb', {
+          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
+          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
+          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
+          longDateFormat: {
+              LT: "H:mm [Auer]",
+              L: "DD.MM.YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: "[Haut um] LT",
+              sameElse: "L",
+              nextDay: '[Muer um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gëschter um] LT',
+              lastWeek: processLastWeek
+          },
+          relativeTime: {
+              future: processFutureTime,
+              past: processPastTime,
+              s: "e puer Sekonnen",
+              m: processRelativeTime,
+              mm: "%d Minutten",
+              h: processRelativeTime,
+              hh: "%d Stonnen",
+              d: processRelativeTime,
+              dd: processRelativeTime,
+              M: processRelativeTime,
+              MM: processRelativeTime,
+              y: processRelativeTime,
+              yy: processRelativeTime
+          },
+          ordinal: '%d.',
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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);
+
+/***/ },
+/* 99 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Lithuanian (lt)
+  // author : Mindaugas Mozūras : https://github.com/mmozuras
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      else {
-        this._unselectAll();
+  }(function (moment) {
+      var units = {
+          "m" : "minutė_minutės_minutę",
+          "mm": "minutės_minučių_minutes",
+          "h" : "valanda_valandos_valandą",
+          "hh": "valandos_valandų_valandas",
+          "d" : "diena_dienos_dieną",
+          "dd": "dienos_dienų_dienas",
+          "M" : "mėnuo_mėnesio_mėnesį",
+          "MM": "mėnesiai_mėnesių_mėnesius",
+          "y" : "metai_metų_metus",
+          "yy": "metai_metų_metus"
+      },
+      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
+
+      function translateSeconds(number, withoutSuffix, key, isFuture) {
+          if (withoutSuffix) {
+              return "kelios sekundės";
+          } else {
+              return isFuture ? "kelių sekundžių" : "kelias sekundes";
+          }
       }
-    }
-    this.emit("click", this.getSelection());
-    this._redraw();
-  };
 
+      function translateSingular(number, withoutSuffix, key, isFuture) {
+          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
+      }
 
-  /**
-   * 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);
-    }
-    this.emit("doubleClick", this.getSelection());
-  };
+      function special(number) {
+          return number % 10 === 0 || (number > 10 && number < 20);
+      }
 
+      function forms(key) {
+          return units[key].split("_");
+      }
 
-  /**
-   * 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);
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          if (number === 1) {
+              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
+          } else if (withoutSuffix) {
+              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
+          } else {
+              if (isFuture) {
+                  return result + forms(key)[1];
+              } else {
+                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
+              }
+          }
       }
-    }
-    this._redraw();
-  };
 
+      function relativeWeekDay(moment, format) {
+          var nominative = format.indexOf('dddd HH:mm') === -1,
+              weekDay = weekDays[moment.day()];
 
-  /**
-   * handle the onRelease event. These functions are here for the navigation controls module.
-   *
-    * @private
-   */
-  exports._handleOnRelease = function(pointer) {
+          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
+      }
 
-  };
+      return moment.lang("lt", {
+          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
+          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
+          weekdays : relativeWeekDay,
+          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
+          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY [m.] MMMM D [d.]",
+              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
+              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
+              l : "YYYY-MM-DD",
+              ll : "YYYY [m.] MMMM D [d.]",
+              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
+              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
+          },
+          calendar : {
+              sameDay : "[Šiandien] LT",
+              nextDay : "[Rytoj] LT",
+              nextWeek : "dddd LT",
+              lastDay : "[Vakar] LT",
+              lastWeek : "[Praėjusį] dddd LT",
+              sameElse : "L"
+          },
+          relativeTime : {
+              future : "po %s",
+              past : "prieš %s",
+              s : translateSeconds,
+              m : translateSingular,
+              mm : translate,
+              h : translateSingular,
+              hh : translate,
+              d : translateSingular,
+              dd : translate,
+              M : translateSingular,
+              MM : translate,
+              y : translateSingular,
+              yy : translate
+          },
+          ordinal : function (number) {
+              return number + '-oji';
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
+/***/ },
+/* 100 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   *
-   * 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};
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : latvian (lv)
+  // author : Kristaps Karlsons : https://github.com/skakri
 
-  /**
-   *
-   * retrieve the currently selected nodes
-   * @return {String[]} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedNodes = function() {
-    var idArray = [];
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        idArray.push(nodeId);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    return idArray
-  };
+  }(function (moment) {
+      var units = {
+          'mm': 'minūti_minūtes_minūte_minūtes',
+          'hh': 'stundu_stundas_stunda_stundas',
+          'dd': 'dienu_dienas_diena_dienas',
+          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
+          'yy': 'gadu_gadus_gads_gadi'
+      };
 
-  /**
-   *
-   * retrieve the currently selected edges
-   * @return {Array} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedEdges = function() {
-    var idArray = [];
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        idArray.push(edgeId);
+      function format(word, number, withoutSuffix) {
+          var forms = word.split('_');
+          if (withoutSuffix) {
+              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
+          } else {
+              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
+          }
       }
-    }
-    return idArray;
-  };
 
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          return number + ' ' + format(units[key], number, withoutSuffix);
+      }
 
-  /**
-   * select zero or more nodes
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.setSelection = function(selection) {
-    var i, iMax, id;
+      return moment.lang('lv', {
+          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
+          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
+          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "YYYY. [gada] D. MMMM",
+              LLL : "YYYY. [gada] D. MMMM, LT",
+              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
+          },
+          calendar : {
+              sameDay : '[Šodien pulksten] LT',
+              nextDay : '[Rīt pulksten] LT',
+              nextWeek : 'dddd [pulksten] LT',
+              lastDay : '[Vakar pulksten] LT',
+              lastWeek : '[Pagājušā] dddd [pulksten] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s vēlāk",
+              past : "%s agrāk",
+              s : "dažas sekundes",
+              m : "minūti",
+              mm : relativeTimeWithPlural,
+              h : "stundu",
+              hh : relativeTimeWithPlural,
+              d : "dienu",
+              dd : relativeTimeWithPlural,
+              M : "mēnesi",
+              MM : relativeTimeWithPlural,
+              y : "gadu",
+              yy : relativeTimeWithPlural
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
 
-    // first unselect any selected node
-    this._unselectAll(true);
+/***/ },
+/* 101 */
+/***/ function(module, exports, __webpack_require__) {
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : macedonian (mk)
+  // author : Borislav Mickov : https://github.com/B0k0
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      this._selectObject(node,true,true);
-    }
+  }(function (moment) {
+      return moment.lang('mk', {
+          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
+          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
+          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Денес во] LT',
+              nextDay : '[Утре во] LT',
+              nextWeek : 'dddd [во] LT',
+              lastDay : '[Вчера во] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[Во изминатата] dddd [во] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[Во изминатиот] dddd [во] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "после %s",
+              past : "пред %s",
+              s : "неколку секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дена",
+              M : "месец",
+              MM : "%d месеци",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
+              }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    console.log("setSelection is deprecated. Please use selectNodes instead.")
 
-    this.redraw();
-  };
+/***/ },
+/* 102 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : malayalam (ml)
+  // author : Floyd Pink : https://github.com/floydpink
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ml', {
+          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
+          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
+          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
+          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
+          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm -നു",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[ഇന്ന്] LT',
+              nextDay : '[നാളെ] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[ഇന്നലെ] LT',
+              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s കഴിഞ്ഞ്",
+              past : "%s മുൻപ്",
+              s : "അൽപ നിമിഷങ്ങൾ",
+              m : "ഒരു മിനിറ്റ്",
+              mm : "%d മിനിറ്റ്",
+              h : "ഒരു മണിക്കൂർ",
+              hh : "%d മണിക്കൂർ",
+              d : "ഒരു ദിവസം",
+              dd : "%d ദിവസം",
+              M : "ഒരു മാസം",
+              MM : "%d മാസം",
+              y : "ഒരു വർഷം",
+              yy : "%d വർഷം"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "രാത്രി";
+              } else if (hour < 12) {
+                  return "രാവിലെ";
+              } else if (hour < 17) {
+                  return "ഉച്ച കഴിഞ്ഞ്";
+              } else if (hour < 20) {
+                  return "വൈകുന്നേരം";
+              } else {
+                  return "രാത്രി";
+              }
+          }
+      });
+  }));
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
 
-    // first unselect any selected node
-    this._unselectAll(true);
+/***/ },
+/* 103 */
+/***/ function(module, exports, __webpack_require__) {
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Marathi (mr)
+  // author : Harshad Kale : https://github.com/kalehv
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      this._selectObject(node,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
-
-
-  /**
-   * 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;
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+      return moment.lang('mr', {
+          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
+          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm वाजता",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[उद्या] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[काल] LT',
+              lastWeek: '[मागील] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s नंतर",
+              past : "%s पूर्वी",
+              s : "सेकंद",
+              m: "एक मिनिट",
+              mm: "%d मिनिटे",
+              h : "एक तास",
+              hh : "%d तास",
+              d : "एक दिवस",
+              dd : "%d दिवस",
+              M : "एक महिना",
+              MM : "%d महिने",
+              y : "एक वर्ष",
+              yy : "%d वर्षे"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem: function (hour, minute, isLower)
+          {
+              if (hour < 4) {
+                  return "रात्री";
+              } else if (hour < 10) {
+                  return "सकाळी";
+              } else if (hour < 17) {
+                  return "दुपारी";
+              } else if (hour < 20) {
+                  return "सायंकाळी";
+              } else {
+                  return "रात्री";
+              }
+          },
+          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.
+          }
+      });
+  }));
 
-    // first unselect any selected node
-    this._unselectAll(true);
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+/***/ },
+/* 104 */
+/***/ function(module, exports, __webpack_require__) {
 
-      var edge = this.edges[id];
-      if (!edge) {
-        throw new RangeError('Edge with id "' + id + '" not found');
-      }
-      this._selectObject(edge,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bahasa Malaysia (ms-MY)
+  // author : Weldan Jamili : https://github.com/weldan
 
-  /**
-   * 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];
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('ms-my', {
+          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
+          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
+          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
+          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
+          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'tengahari';
+              } else if (hours < 19) {
+                  return 'petang';
+              } else {
+                  return 'malam';
+              }
+          },
+          calendar : {
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Esok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kelmarin pukul] LT',
+              lastWeek : 'dddd [lepas pukul] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "dalam %s",
+              past : "%s yang lepas",
+              s : "beberapa saat",
+              m : "seminit",
+              mm : "%d minit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 127 */
+/* 105 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(39);
-  var Edge = __webpack_require__(38);
-
-  /**
-   * clears the toolbar div element of children
-   *
-   * @private
-   */
-  exports._clearManipulatorBar = function() {
-    while (this.manipulationDiv.hasChildNodes()) {
-      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : norwegian bokmål (nb)
+  // authors : Espen Hovlandsdal : https://github.com/rexxars
+  //           Sigurd Gartmann : https://github.com/sigurdga
 
-  /**
-   * 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];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
-
-  /**
-   * Enable or disable edit-mode.
-   *
-   * @private
-   */
-  exports._toggleEditMode = function() {
-    this.editMode = !this.editMode;
-    var toolbar = document.getElementById("network-manipulationDiv");
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("network-manipulation-editMode");
-    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()
-  };
-
-  /**
-   * 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);
-    }
-
-    if (this.edgeBeingEdited !== undefined) {
-      this.edgeBeingEdited._disableControlNodes();
-      this.edgeBeingEdited = undefined;
-      this.selectedControlNode = null;
-      this.controlNodesActive = false;
-    }
+  }(function (moment) {
+      return moment.lang('nb', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "H.mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd D. MMMM YYYY [kl.] LT"
+          },
+          calendar : {
+              sameDay: '[i dag kl.] LT',
+              nextDay: '[i morgen kl.] LT',
+              nextWeek: 'dddd [kl.] LT',
+              lastDay: '[i går kl.] LT',
+              lastWeek: '[forrige] dddd [kl.] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s siden",
+              s : "noen sekunder",
+              m : "ett minutt",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dager",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // restore overloaded functions
-    this._restoreOverloadedFunctions();
 
-    // resume calculation
-    this.freezeSimulation = false;
+/***/ },
+/* 106 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // reset global variables
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : nepali/nepalese
+  // author : suvash : https://github.com/suvash
 
-    if (this.editMode == true) {
-      while (this.manipulationDiv.hasChildNodes()) {
-        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-      }
-      // add the icons to the manipulator div
-      this.manipulationDiv.innerHTML = "" +
-        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
+      return moment.lang('ne', {
+          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
+          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
+          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
+          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
+          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
+          longDateFormat : {
+              LT : "Aको h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 3) {
+                  return "राती";
+              } else if (hour < 10) {
+                  return "बिहान";
+              } else if (hour < 15) {
+                  return "दिउँसो";
+              } else if (hour < 18) {
+                  return "बेलुका";
+              } else if (hour < 20) {
+                  return "साँझ";
+              } else {
+                  return "राती";
+              }
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[भोली] LT',
+              nextWeek : '[आउँदो] dddd[,] LT',
+              lastDay : '[हिजो] LT',
+              lastWeek : '[गएको] dddd[,] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%sमा",
+              past : "%s अगाडी",
+              s : "केही समय",
+              m : "एक मिनेट",
+              mm : "%d मिनेट",
+              h : "एक घण्टा",
+              hh : "%d घण्टा",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महिना",
+              MM : "%d महिना",
+              y : "एक बर्ष",
+              yy : "%d बर्ष"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      // bind the icons
-      var addNodeButton = document.getElementById("network-manipulate-addNode");
-      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("network-manipulate-editNode");
-        editButton.onclick = this._editNode.bind(this);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("network-manipulate-editEdge");
-        editButton.onclick = this._createEditEdgeToolbar.bind(this);
-      }
-      if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("network-manipulate-delete");
-        deleteButton.onclick = this._deleteSelected.bind(this);
-      }
-      var closeDiv = document.getElementById("network-manipulation-closeDiv");
-      closeDiv.onclick = this._toggleEditMode.bind(this);
 
-      this.boundFunction = this._createManipulatorBar.bind(this);
-      this.on('select', this.boundFunction);
-    }
-    else {
-      this.editModeDiv.innerHTML = "" +
-        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("network-manipulate-editModeButton");
-      editModeButton.onclick = this._toggleEditMode.bind(this);
-    }
-  };
+/***/ },
+/* 107 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : dutch (nl)
+  // author : Joris Röling : https://github.com/jjupiter
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
+          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
 
-  /**
-   * Create the toolbar for adding Nodes
-   *
-   * @private
-   */
-  exports._createAddNodeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+      return moment.lang('nl', {
+          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShortWithoutDots[m.month()];
+              } else {
+                  return monthsShortWithDots[m.month()];
+              }
+          },
+          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
+          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
+          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[vandaag om] LT',
+              nextDay: '[morgen om] LT',
+              nextWeek: 'dddd [om] LT',
+              lastDay: '[gisteren om] LT',
+              lastWeek: '[afgelopen] dddd [om] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "over %s",
+              past : "%s geleden",
+              s : "een paar seconden",
+              m : "één minuut",
+              mm : "%d minuten",
+              h : "één uur",
+              hh : "%d uur",
+              d : "één dag",
+              dd : "%d dagen",
+              M : "één maand",
+              MM : "%d maanden",
+              y : "één jaar",
+              yy : "%d jaar"
+          },
+          ordinal : function (number) {
+              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // create the toolbar contents
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+/***/ },
+/* 108 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._addNode.bind(this);
-    this.on('select', this.boundFunction);
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : norwegian nynorsk (nn)
+  // author : https://github.com/mechuwind
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('nn', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
+          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
+          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[I dag klokka] LT',
+              nextDay: '[I morgon klokka] LT',
+              nextWeek: 'dddd [klokka] LT',
+              lastDay: '[I går klokka] LT',
+              lastWeek: '[Føregåande] dddd [klokka] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s sidan",
+              s : "nokre sekund",
+              m : "eit minutt",
+              mm : "%d minutt",
+              h : "ein time",
+              hh : "%d timar",
+              d : "ein dag",
+              dd : "%d dagar",
+              M : "ein månad",
+              MM : "%d månader",
+              y : "eit år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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);
-    }
+/***/ },
+/* 109 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this._unselectAll();
-    this.forceAppendSelection = false;
-    this.blockConnectingEdgeSelection = true;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : polish (pl)
+  // author : Rafal Hirsz : https://github.com/evoL
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
+          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+      function plural(n) {
+          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
+      }
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._handleConnect.bind(this);
-    this.on('select', this.boundFunction);
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'minuta' : 'minutę';
+          case 'mm':
+              return result + (plural(number) ? 'minuty' : 'minut');
+          case 'h':
+              return withoutSuffix  ? 'godzina'  : 'godzinę';
+          case 'hh':
+              return result + (plural(number) ? 'godziny' : 'godzin');
+          case 'MM':
+              return result + (plural(number) ? 'miesiące' : 'miesięcy');
+          case 'yy':
+              return result + (plural(number) ? 'lata' : 'lat');
+          }
+      }
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"] = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
-    this._handleTouch = this._handleConnect;
-    this._handleOnRelease = this._finishConnect;
+      return moment.lang('pl', {
+          months : function (momentToFormat, format) {
+              if (/D MMMM/.test(format)) {
+                  return monthsSubjective[momentToFormat.month()];
+              } else {
+                  return monthsNominative[momentToFormat.month()];
+              }
+          },
+          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
+          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
+          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
+          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Dziś o] LT',
+              nextDay: '[Jutro o] LT',
+              nextWeek: '[W] dddd [o] LT',
+              lastDay: '[Wczoraj o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[W zeszłą niedzielę o] LT';
+                  case 3:
+                      return '[W zeszłą środę o] LT';
+                  case 6:
+                      return '[W zeszłą sobotę o] LT';
+                  default:
+                      return '[W zeszły] dddd [o] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "%s temu",
+              s : "kilka sekund",
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : "1 dzień",
+              dd : '%d dni',
+              M : "miesiąc",
+              MM : translate,
+              y : "rok",
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // redraw to show the unselect
-    this._redraw();
-  };
 
-  /**
-   * create the toolbar to edit edges
-   *
-   * @private
-   */
-  exports._createEditEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this.controlNodesActive = true;
+/***/ },
+/* 110 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : brazilian portuguese (pt-br)
+  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
 
-    this.edgeBeingEdited = this._getSelectedEdge();
-    this.edgeBeingEdited._enableControlNodes();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt-br', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY [às] LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
+          },
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "em %s",
+              past : "%s atrás",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº'
+      });
+  }));
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+/***/ },
+/* 111 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
-    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._handleOnRelease = this._releaseControlNode;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : portuguese (pt)
+  // author : Jefferson : https://github.com/jalex79
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "em %s",
+              past : "há %s",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
+/***/ },
+/* 112 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : romanian (ro)
+  // author : Vlad Gurdiga : https://github.com/gurdiga
+  // author : Valentin Agachi : https://github.com/avaly
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'minute',
+              'hh': 'ore',
+              'dd': 'zile',
+              'MM': 'luni',
+              'yy': 'ani'
+          },
+              separator = ' ';
+          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
+              separator = ' de ';
+          }
 
-  /**
-   * 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();
-  };
+          return number + separator + format[key];
+      }
 
-  /**
-   * 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();
-  };
+      return moment.lang('ro', {
+          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
+          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
+          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
+          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
+          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY H:mm",
+              LLLL : "dddd, D MMMM YYYY H:mm"
+          },
+          calendar : {
+              sameDay: "[azi la] LT",
+              nextDay: '[mâine la] LT',
+              nextWeek: 'dddd [la] LT',
+              lastDay: '[ieri la] LT',
+              lastWeek: '[fosta] dddd [la] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "peste %s",
+              past : "%s în urmă",
+              s : "câteva secunde",
+              m : "un minut",
+              mm : relativeTimeWithPlural,
+              h : "o oră",
+              hh : relativeTimeWithPlural,
+              d : "o zi",
+              dd : relativeTimeWithPlural,
+              M : "o lună",
+              MM : relativeTimeWithPlural,
+              y : "un an",
+              yy : relativeTimeWithPlural
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  exports._releaseControlNode = function(pointer) {
-    var newNode = this._getNodeAt(pointer);
-    if (newNode != null) {
-      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
-        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
-        this.edgeBeingEdited.controlNodes.from.unselect();
-      }
-      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
-        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
-        this.edgeBeingEdited.controlNodes.to.unselect();
-      }
-    }
-    else {
-      this.edgeBeingEdited._restoreControlNodes();
-    }
-    this.freezeSimulation = false;
-    this._redraw();
-  };
 
-  /**
-   * 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("Cannot create edges to a cluster.")
-        }
-        else {
-          this._selectObject(node,false);
-          // create a node the temporary line can look at
-          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetNode'].x = node.x;
-          this.sectors['support']['nodes']['targetNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
-          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
+/***/ },
+/* 113 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // create a temporary edge
-          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
-          this.edges['connectionEdge'].from = node;
-          this.edges['connectionEdge'].connected = true;
-          this.edges['connectionEdge'].smooth = true;
-          this.edges['connectionEdge'].selected = true;
-          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
-          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : russian (ru)
+  // author : Viktorminator : https://github.com/Viktorminator
+  // Author : Menelion Elensúle : https://github.com/Oire
 
-          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
-          this._handleOnDrag = function(event) {
-            var pointer = this._getPointer(event.gesture.center);
-            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-          };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      }
 
-          this.moving = true;
-          this.start();
-        }
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
+              'hh': 'час_часа_часов',
+              'dd': 'день_дня_дней',
+              'MM': 'месяц_месяца_месяцев',
+              'yy': 'год_года_лет'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'минута' : 'минуту';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
       }
-    }
-  };
 
-  exports._finishConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 1) {
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
+              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
+          },
 
-      // restore the drag function
-      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
-      delete this.cachedFunctions["_handleOnDrag"];
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-      // remember the edge id
-      var connectFromId = this.edges['connectionEdge'].fromId;
+          return months[nounCase][m.month()];
+      }
 
-      // remove the temporary nodes and edge
-      delete this.edges['connectionEdge'];
-      delete this.sectors['support']['nodes']['targetNode'];
-      delete this.sectors['support']['nodes']['targetViaNode'];
+      function monthsShortCaseReplace(m, format) {
+          var monthsShort = {
+              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
+              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
+          },
 
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert("Cannot create edges to a cluster.")
-        }
-        else {
-          this._createEdge(connectFromId,node.id);
-          this._createManipulatorBar();
-        }
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return monthsShort[nounCase][m.month()];
       }
-      this._unselectAll();
-    }
-  };
 
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
+              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
+          },
 
-  /**
-   * 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 {
-          alert(this.constants.labels['addError']);
-          this._createManipulatorBar();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.nodesData.add(defaultData);
-        this._createManipulatorBar();
-        this.moving = true;
-        this.start();
+          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
+              'accusative' :
+              'nominative';
+
+          return weekdays[nounCase][m.day()];
       }
-    }
-  };
 
+      return moment.lang('ru', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY г.",
+              LLL : "D MMMM YYYY г., LT",
+              LLLL : "dddd, D MMMM YYYY г., LT"
+          },
+          calendar : {
+              sameDay: '[Сегодня в] LT',
+              nextDay: '[Завтра в] LT',
+              lastDay: '[Вчера в] LT',
+              nextWeek: function () {
+                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
+              },
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[В прошлое] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                      return '[В прошлый] dddd [в] LT';
+                  case 3:
+                  case 5:
+                  case 6:
+                      return '[В прошлую] dddd [в] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "через %s",
+              past : "%s назад",
+              s : "несколько секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "час",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "месяц",
+              MM : relativeTimeWithPlural,
+              y : "год",
+              yy : relativeTimeWithPlural
+          },
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.add(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+          meridiemParse: /ночи|утра|дня|вечера/i,
+          isPM : function (input) {
+              return /^(дня|вечера)$/.test(input);
+          },
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.update(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночи";
+              } else if (hour < 12) {
+                  return "утра";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечера";
+              }
+          },
 
-  /**
-   * 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.group,
-        shape: node.shape,
-        color: {
-          background:node.color.background,
-          border:node.color.border,
-          highlight: {
-            background:node.color.highlight.background,
-            border:node.color.highlight.border
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              case 'w':
+              case 'W':
+                  return number + '-я';
+              default:
+                  return number;
+              }
+          },
+
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }};
-      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 {
-        alert(this.constants.labels["editError"]);
-      }
-    }
-    else {
-      alert(this.constants.labels["editBoundError"]);
-    }
-  };
+      });
+  }));
 
 
+/***/ },
+/* 114 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovak (sk)
+  // author : Martin Minka : https://github.com/k2s
+  // based on work of petrbela : https://github.com/petrbela
 
-  /**
-   * 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();
-            });
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
+          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
+
+      function plural(n) {
+          return (n > 1) && (n < 5);
+      }
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minúty' : 'minút');
+              } else {
+                  return result + 'minútami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodín');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dni' : 'dní');
+              } else {
+                  return result + 'dňami';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
+              } else {
+                  return result + 'mesiacmi';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'rokov');
+              } else {
+                  return result + 'rokmi';
+              }
+              break;
           }
-          else {
-            alert(this.constants.labels["deleteError"])
+      }
+
+      return moment.lang('sk', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
+          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
+          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
+          longDateFormat : {
+              LT: "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes o] LT",
+              nextDay: '[zajtra o] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [o] LT';
+                  case 3:
+                      return '[v stredu o] LT';
+                  case 4:
+                      return '[vo štvrtok o] LT';
+                  case 5:
+                      return '[v piatok o] LT';
+                  case 6:
+                      return '[v sobotu o] LT';
+                  }
+              },
+              lastDay: '[včera o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulú nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[minulý] dddd [o] LT';
+                  case 3:
+                      return '[minulú stredu o] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [o] LT';
+                  case 6:
+                      return '[minulú sobotu o] LT';
+                  }
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "pred %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-        else {
-          this.edgesData.remove(selectedEdges);
-          this.nodesData.remove(selectedNodes);
-          this._unselectAll();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        alert(this.constants.labels["deleteClusterError"]);
-      }
-    }
-  };
+      });
+  }));
 
 
 /***/ },
-/* 128 */
+/* 115 */
 /***/ function(module, exports, __webpack_require__) {
 
-  exports._cleanNavigation = function() {
-    // clean up previous navigation items
-    var wrapper = document.getElementById('network-navigation_wrapper');
-    if (wrapper != null) {
-      this.containerElement.removeChild(wrapper);
-    }
-    document.onmouseup = null;
-  };
-
-  /**
-   * 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();
-
-    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.navigationDivs['wrapper'].id = "network-navigation_wrapper";
-    this.navigationDivs['wrapper'].style.position = "absolute";
-    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
-
-    for (var i = 0; i < navigationDivs.length; i++) {
-      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
-      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
-      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
-    }
-
-    document.onmouseup = this._stopMovement.bind(this);
-  };
-
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._stopMovement = function() {
-    this._xStopMoving();
-    this._yStopMoving();
-    this._stopZoom();
-  };
-
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovenian (sl)
+  // author : Robert Sedovšek : https://github.com/sedovsek
 
-  /**
-   * stops the actions performed by page up and down etc.
-   *
-   * @param event
-   * @private
-   */
-  exports._preventDefault = function(event) {
-    if (event !== undefined) {
-      if (event.preventDefault) {
-        event.preventDefault();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
       } else {
-        event.returnValue = false;
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'ena minuta' : 'eno minuto';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2) {
+                  result += 'minuti';
+              } else if (number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minut';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'ena ura' : 'eno uro';
+          case 'hh':
+              if (number === 1) {
+                  result += 'ura';
+              } else if (number === 2) {
+                  result += 'uri';
+              } else if (number === 3 || number === 4) {
+                  result += 'ure';
+              } else {
+                  result += 'ur';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dni';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mesec';
+              } else if (number === 2) {
+                  result += 'meseca';
+              } else if (number === 3 || number === 4) {
+                  result += 'mesece';
+              } else {
+                  result += 'mesecev';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'leto';
+              } else if (number === 2) {
+                  result += 'leti';
+              } else if (number === 3 || number === 4) {
+                  result += 'leta';
+              } else {
+                  result += 'let';
+              }
+              return result;
+          }
       }
-    }
-  };
-
-
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className += " active";
-    }
-  };
-
-
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['down'].className += " active";
-    }
-  };
-
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className += " active";
-    }
-  };
+      return moment.lang('sl', {
+          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
+          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
+          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
+          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danes ob] LT',
+              nextDay  : '[jutri ob] LT',
 
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v] [nedeljo] [ob] LT';
+                  case 3:
+                      return '[v] [sredo] [ob] LT';
+                  case 6:
+                      return '[v] [soboto] [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[v] dddd [ob] LT';
+                  }
+              },
+              lastDay  : '[včeraj ob] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[prejšnja] dddd [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prejšnji] dddd [ob] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "čez %s",
+              past   : "%s nazaj",
+              s      : "nekaj sekund",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "en dan",
+              dd     : translate,
+              M      : "en mesec",
+              MM     : translate,
+              y      : "eno leto",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['right'].className += " active";
-    }
-  };
 
+/***/ },
+/* 116 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className += " active";
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Albanian (sq)
+  // author : Flakërim Ismani : https://github.com/flakerimi
+  // author: Menelion Elensúle: https://github.com/Oire (tests)
+  // author : Oerd Cukalla : https://github.com/oerd (fixes)
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('sq', {
+          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
+          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
+          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
+          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
+          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              return hours < 12 ? 'PD' : 'MD';
+          },
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Sot në] LT',
+              nextDay : '[Nesër në] LT',
+              nextWeek : 'dddd [në] LT',
+              lastDay : '[Dje në] LT',
+              lastWeek : 'dddd [e kaluar në] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "në %s",
+              past : "%s më parë",
+              s : "disa sekonda",
+              m : "një minutë",
+              mm : "%d minuta",
+              h : "një orë",
+              hh : "%d orë",
+              d : "një ditë",
+              dd : "%d ditë",
+              M : "një muaj",
+              MM : "%d muaj",
+              y : "një vit",
+              yy : "%d vite"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * Zoom out
-   * @private
-   */
-  exports._zoomOut = function() {
-    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomOut'].className += " active";
-    }
-  };
 
+/***/ },
+/* 117 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Stop zooming and unhighlight the zoom controls
-   * @private
-   */
-  exports._stopZoom = function() {
-    this.zoomIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
-      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-cyrillic (sr-cyrl)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-  /**
-   * Stop moving in the Y direction and unHighlight the up and down
-   * @private
-   */
-  exports._yStopMoving = function() {
-    this.yIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
-      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
-    }
-  };
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['један минут', 'једне минуте'],
+              mm: ['минут', 'минуте', 'минута'],
+              h: ['један сат', 'једног сата'],
+              hh: ['сат', 'сата', 'сати'],
+              dd: ['дан', 'дана', 'дана'],
+              MM: ['месец', 'месеца', 'месеци'],
+              yy: ['година', 'године', 'година']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
+          }
+      };
 
+      return moment.lang('sr-cyrl', {
+          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
+          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
+          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
+          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
+          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[данас у] LT',
+              nextDay: '[сутра у] LT',
 
-  /**
-   * Stop moving in the X direction and unHighlight left and right.
-   * @private
-   */
-  exports._xStopMoving = function() {
-    this.xIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
-      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
-    }
-  };
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[у] [недељу] [у] LT';
+                  case 3:
+                      return '[у] [среду] [у] LT';
+                  case 6:
+                      return '[у] [суботу] [у] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[у] dddd [у] LT';
+                  }
+              },
+              lastDay  : '[јуче у] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[прошле] [недеље] [у] LT',
+                      '[прошлог] [понедељка] [у] LT',
+                      '[прошлог] [уторка] [у] LT',
+                      '[прошле] [среде] [у] LT',
+                      '[прошлог] [четвртка] [у] LT',
+                      '[прошлог] [петка] [у] LT',
+                      '[прошле] [суботе] [у] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past   : "пре %s",
+              s      : "неколико секунди",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "дан",
+              dd     : translator.translate,
+              M      : "месец",
+              MM     : translator.translate,
+              y      : "годину",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 129 */
+/* 118 */
 /***/ 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;
-        }
-      }
-    }
-  };
-
-  /**
-   * 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) {
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
-        this.constants.hierarchicalLayout.levelSeparation *= -1;
-      }
-      else {
-        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-latin (sr)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      // 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;
+  }(function (moment) {
 
-      for (nodeId in this.nodes) {
-        if (this.nodes.hasOwnProperty(nodeId)) {
-          node = this.nodes[nodeId];
-          if (node.level != -1) {
-            definedLevel = true;
-          }
-          else {
-            undefinedLevel = true;
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['jedan minut', 'jedne minute'],
+              mm: ['minut', 'minute', 'minuta'],
+              h: ['jedan sat', 'jednog sata'],
+              hh: ['sat', 'sata', 'sati'],
+              dd: ['dan', 'dana', 'dana'],
+              MM: ['mesec', 'meseca', 'meseci'],
+              yy: ['godina', 'godine', 'godina']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
           }
-          if (hubsize < node.edges.length) {
-            hubsize = node.edges.length;
+      };
+
+      return moment.lang('sr', {
+          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
+          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
+          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
+          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[danas u] LT',
+              nextDay: '[sutra u] LT',
+
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedelju] [u] LT';
+                  case 3:
+                      return '[u] [sredu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[juče u] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[prošle] [nedelje] [u] LT',
+                      '[prošlog] [ponedeljka] [u] LT',
+                      '[prošlog] [utorka] [u] LT',
+                      '[prošle] [srede] [u] LT',
+                      '[prošlog] [četvrtka] [u] LT',
+                      '[prošlog] [petka] [u] LT',
+                      '[prošle] [subote] [u] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "pre %s",
+              s      : "nekoliko sekundi",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "dan",
+              dd     : translator.translate,
+              M      : "mesec",
+              MM     : translator.translate,
+              y      : "godinu",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
-      }
+      });
+  }));
 
-      // if the user defined some levels but not all, alert and run without hierarchical layout
-      if (undefinedLevel == true && definedLevel == true) {
-        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-        this.zoomExtent(true,this.constants.clustering.enabled);
-        if (!this.constants.clustering.enabled) {
-          this.start();
-        }
-      }
-      else {
-        // setup the system to use hierarchical method.
-        this._changeConstants();
 
-        // define levels if undefined by the users. Based on hubsize
-        if (undefinedLevel == true) {
-          this._determineLevels(hubsize);
-        }
-        // check the distribution of the nodes per level.
-        var distribution = this._getDistribution();
+/***/ },
+/* 119 */
+/***/ function(module, exports, __webpack_require__) {
 
-        // place the nodes on the canvas. This also stablilizes the system.
-        this._placeNodesByHierarchy(distribution);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : swedish (sv)
+  // author : Jens Alm : https://github.com/ulmus
 
-        // start the simulation.
-        this.start();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('sv', {
+          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
+          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
+          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Idag] LT',
+              nextDay: '[Imorgon] LT',
+              lastDay: '[Igår] LT',
+              nextWeek: 'dddd LT',
+              lastWeek: '[Förra] dddd[en] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "för %s sedan",
+              s : "några sekunder",
+              m : "en minut",
+              mm : "%d minuter",
+              h : "en timme",
+              hh : "%d timmar",
+              d : "en dag",
+              dd : "%d dagar",
+              M : "en månad",
+              MM : "%d månader",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
+                  (b === 1) ? 'a' :
+                  (b === 2) ? 'a' :
+                  (b === 3) ? 'e' : 'e';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 120 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // start placing all the level 0 nodes first. Then recursively position their branches.
-    for (nodeId in distribution[0].nodes) {
-      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
-        node = distribution[0].nodes[nodeId];
-        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-          if (node.xFixed) {
-            node.x = distribution[0].minPos;
-            node.xFixed = false;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : tamil (ta)
+  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        else {
-          if (node.yFixed) {
-            node.y = distribution[0].minPos;
-            node.yFixed = false;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      /*var symbolMap = {
+              '1': '௧',
+              '2': '௨',
+              '3': '௩',
+              '4': '௪',
+              '5': '௫',
+              '6': '௬',
+              '7': '௭',
+              '8': '௮',
+              '9': '௯',
+              '0': '௦'
+          },
+          numberMap = {
+              '௧': '1',
+              '௨': '2',
+              '௩': '3',
+              '௪': '4',
+              '௫': '5',
+              '௬': '6',
+              '௭': '7',
+              '௮': '8',
+              '௯': '9',
+              '௦': '0'
+          }; */
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
+      return moment.lang('ta', {
+          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
+          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
+          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[இன்று] LT',
+              nextDay : '[நாளை] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[நேற்று] LT',
+              lastWeek : '[கடந்த வாரம்] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s இல்",
+              past : "%s முன்",
+              s : "ஒரு சில விநாடிகள்",
+              m : "ஒரு நிமிடம்",
+              mm : "%d நிமிடங்கள்",
+              h : "ஒரு மணி நேரம்",
+              hh : "%d மணி நேரம்",
+              d : "ஒரு நாள்",
+              dd : "%d நாட்கள்",
+              M : "ஒரு மாதம்",
+              MM : "%d மாதங்கள்",
+              y : "ஒரு வருடம்",
+              yy : "%d ஆண்டுகள்"
+          },
+  /*        preparse: function (string) {
+              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },*/
+          ordinal : function (number) {
+              return number + 'வது';
+          },
+
+
+  // refer http://ta.wikipedia.org/s/1er1      
+
+          meridiem : function (hour, minute, isLower) {
+              if (hour >= 6 && hour <= 10) {
+                  return " காலை";
+              } else   if (hour >= 10 && hour <= 14) {
+                  return " நண்பகல்";
+              } else    if (hour >= 14 && hour <= 18) {
+                  return " எற்பாடு";
+              } else   if (hour >= 18 && hour <= 20) {
+                  return " மாலை";
+              } else  if (hour >= 20 && hour <= 24) {
+                  return " இரவு";
+              } else  if (hour >= 0 && hour <= 6) {
+                  return " வைகறை";
+              }
+          },
+          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._placeBranchNodes(node.edges,node.id,distribution,node.level);
-      }
-    }
+      });
+  }));
 
-    // stabilize the system after positioning. This function calls zoomExtent.
-    this._stabilize();
-  };
 
+/***/ },
+/* 121 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * This function get the distribution of levels based on hubsize
-   *
-   * @returns {Object}
-   * @private
-   */
-  exports._getDistribution = function() {
-    var distribution = {};
-    var nodeId, node, level;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : thai (th)
+  // author : Kridsada Thanabulpong : https://github.com/sirn
 
-    // 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.hasOwnProperty(node.level)) {
-          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
-        }
-        distribution[node.level].amount += 1;
-        distribution[node.level].nodes[node.id] = node;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
+  }(function (moment) {
+      return moment.lang('th', {
+          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
+          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
+          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
+          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
+          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
+          longDateFormat : {
+              LT : "H นาฬิกา m นาที",
+              L : "YYYY/MM/DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY เวลา LT",
+              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ก่อนเที่ยง";
+              } else {
+                  return "หลังเที่ยง";
+              }
+          },
+          calendar : {
+              sameDay : '[วันนี้ เวลา] LT',
+              nextDay : '[พรุ่งนี้ เวลา] LT',
+              nextWeek : 'dddd[หน้า เวลา] LT',
+              lastDay : '[เมื่อวานนี้ เวลา] LT',
+              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "อีก %s",
+              past : "%sที่แล้ว",
+              s : "ไม่กี่วินาที",
+              m : "1 นาที",
+              mm : "%d นาที",
+              h : "1 ชั่วโมง",
+              hh : "%d ชั่วโมง",
+              d : "1 วัน",
+              dd : "%d วัน",
+              M : "1 เดือน",
+              MM : "%d เดือน",
+              y : "1 ปี",
+              yy : "%d ปี"
+          }
+      });
+  }));
 
-    // 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;
-        }
-      }
-    }
 
-    // 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);
+/***/ },
+/* 122 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Tagalog/Filipino (tl-ph)
+  // author : Dan Hagman
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
+  }(function (moment) {
+      return moment.lang('tl-ph', {
+          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
+          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
+          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
+          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
+          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "MM/D/YYYY",
+              LL : "MMMM D, YYYY",
+              LLL : "MMMM D, YYYY LT",
+              LLLL : "dddd, MMMM DD, YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Ngayon sa] LT",
+              nextDay: '[Bukas sa] LT',
+              nextWeek: 'dddd [sa] LT',
+              lastDay: '[Kahapon sa] LT',
+              lastWeek: 'dddd [huling linggo] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "sa loob ng %s",
+              past : "%s ang nakalipas",
+              s : "ilang segundo",
+              m : "isang minuto",
+              mm : "%d minuto",
+              h : "isang oras",
+              hh : "%d oras",
+              d : "isang araw",
+              dd : "%d araw",
+              M : "isang buwan",
+              MM : "%d buwan",
+              y : "isang taon",
+              yy : "%d taon"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    return distribution;
-  };
 
+/***/ },
+/* 123 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : turkish (tr)
+  // authors : Erhan Gundogan : https://github.com/erhangundogan,
+  //           Burak Yiğit Kaya: https://github.com/BYK
 
-    // determine hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.edges.length == hubsize) {
-          node.level = 0;
-        }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
+  }(function (moment) {
 
-    // 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);
-        }
-      }
-    }
-  };
+      var suffixes = {
+          1: "'inci",
+          5: "'inci",
+          8: "'inci",
+          70: "'inci",
+          80: "'inci",
 
+          2: "'nci",
+          7: "'nci",
+          20: "'nci",
+          50: "'nci",
 
-  /**
-   * 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();
-  };
+          3: "'üncü",
+          4: "'üncü",
+          100: "'üncü",
 
+          6: "'ncı",
 
-  /**
-   * 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;
-      }
+          9: "'uncu",
+          10: "'uncu",
+          30: "'uncu",
 
-      // 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;
-        }
-      }
+          60: "'ıncı",
+          90: "'ıncı"
+      };
 
-      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);
-        }
-      }
-    }
-  };
+      return moment.lang('tr', {
+          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
+          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
+          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
+          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
+          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[yarın saat] LT',
+              nextWeek : '[haftaya] dddd [saat] LT',
+              lastDay : '[dün] LT',
+              lastWeek : '[geçen hafta] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s önce",
+              s : "birkaç saniye",
+              m : "bir dakika",
+              mm : "%d dakika",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir yıl",
+              yy : "%d yıl"
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "'ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
 
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * 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 (edges.length > 1) {
-          this._setLevel(level+1, childNode.edges, childNode.id);
-        }
-      }
-    }
-  };
 
+/***/ },
+/* 124 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
+  // author : Abdel Said : https://github.com/abdelsaid
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('tzm-latn', {
+          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[asdkh g] LT",
+              nextDay: '[aska g] LT',
+              nextWeek: 'dddd [g] LT',
+              lastDay: '[assant g] LT',
+              lastWeek: 'dddd [g] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dadkh s yan %s",
+              past : "yan %s",
+              s : "imik",
+              m : "minuḍ",
+              mm : "%d minuḍ",
+              h : "saɛa",
+              hh : "%d tassaɛin",
+              d : "ass",
+              dd : "%d ossan",
+              M : "ayowr",
+              MM : "%d iyyirn",
+              y : "asgas",
+              yy : "%d isgasn"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
 /***/ },
-/* 130 */
+/* 125 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Canvas shapes used by Network
-   */
-  if (typeof CanvasRenderingContext2D !== 'undefined') {
-
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-      this.beginPath();
-      this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt (tzm)
+  // author : Abdel Said : https://github.com/abdelsaid
 
-    /**
-     * 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);
-    };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tzm', {
+          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
+              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
+              nextWeek: 'dddd [ⴴ] LT',
+              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
+              lastWeek: 'dddd [ⴴ] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
+              past : "ⵢⴰⵏ %s",
+              s : "ⵉⵎⵉⴽ",
+              m : "ⵎⵉⵏⵓⴺ",
+              mm : "%d ⵎⵉⵏⵓⴺ",
+              h : "ⵙⴰⵄⴰ",
+              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
+              d : "ⴰⵙⵙ",
+              dd : "%d oⵙⵙⴰⵏ",
+              M : "ⴰⵢoⵓⵔ",
+              MM : "%d ⵉⵢⵢⵉⵔⵏ",
+              y : "ⴰⵙⴳⴰⵙ",
+              yy : "%d ⵉⵙⴳⴰⵙⵏ"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-    /**
-     * 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();
 
-      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
+/***/ },
+/* 126 */
+/***/ function(module, exports, __webpack_require__) {
 
-      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();
-    };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : ukrainian (uk)
+  // author : zemlanin : https://github.com/zemlanin
+  // Author : Menelion Elensúle : https://github.com/Oire
 
-    /**
-     * 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();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      }
 
-      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
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'хвилина_хвилини_хвилин',
+              'hh': 'година_години_годин',
+              'dd': 'день_дні_днів',
+              'MM': 'місяць_місяці_місяців',
+              'yy': 'рік_роки_років'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'хвилина' : 'хвилину';
+          }
+          else if (key === 'h') {
+              return withoutSuffix ? 'година' : 'годину';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
+      }
 
-      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();
-    };
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
+              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
+          },
 
-    /**
-     * 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();
+          nounCase = (/D[oD]? *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-      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)
-        );
+          return months[nounCase][m.month()];
       }
 
-      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);
-    };
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
+              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
+              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
+          },
 
-    /**
-     * 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
+          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
+              'accusative' :
+              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
+                  'genitive' :
+                  'nominative');
 
-      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);
-    };
+          return weekdays[nounCase][m.day()];
+      }
 
+      function processHoursFunction(str) {
+          return function () {
+              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
+          };
+      }
 
+      return moment.lang('uk', {
+          months : monthsCaseReplace,
+          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY р.",
+              LLL : "D MMMM YYYY р., LT",
+              LLLL : "dddd, D MMMM YYYY р., LT"
+          },
+          calendar : {
+              sameDay: processHoursFunction('[Сьогодні '),
+              nextDay: processHoursFunction('[Завтра '),
+              lastDay: processHoursFunction('[Вчора '),
+              nextWeek: processHoursFunction('[У] dddd ['),
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 5:
+                  case 6:
+                      return processHoursFunction('[Минулої] dddd [').call(this);
+                  case 1:
+                  case 2:
+                  case 4:
+                      return processHoursFunction('[Минулого] dddd [').call(this);
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past : "%s тому",
+              s : "декілька секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "годину",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "місяць",
+              MM : relativeTimeWithPlural,
+              y : "рік",
+              yy : relativeTimeWithPlural
+          },
 
-    /**
-     * 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;
+          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
 
-      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
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночі";
+              } else if (hour < 12) {
+                  return "ранку";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечора";
+              }
+          },
 
-      this.beginPath();
-      this.moveTo(xe, ym);
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+              case 'w':
+              case 'W':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              default:
+                  return number;
+              }
+          },
 
-      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
 
-      this.lineTo(xe, ymb);
+/***/ },
+/* 127 */
+/***/ function(module, exports, __webpack_require__) {
 
-      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : uzbek
+  // author : Sardor Muminov : https://github.com/muminoff
 
-      this.lineTo(x, ym);
-    };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('uz', {
+          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
+          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
+          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
+          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
+          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "D MMMM YYYY, dddd LT"
+          },
+          calendar : {
+              sameDay : '[Бугун соат] LT [да]',
+              nextDay : '[Эртага] LT [да]',
+              nextWeek : 'dddd [куни соат] LT [да]',
+              lastDay : '[Кеча соат] LT [да]',
+              lastWeek : '[Утган] dddd [куни соат] LT [да]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "Якин %s ичида",
+              past : "Бир неча %s олдин",
+              s : "фурсат",
+              m : "бир дакика",
+              mm : "%d дакика",
+              h : "бир соат",
+              hh : "%d соат",
+              d : "бир кун",
+              dd : "%d кун",
+              M : "бир ой",
+              MM : "%d ой",
+              y : "бир йил",
+              yy : "%d йил"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-    /**
-     * 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);
+/***/ },
+/* 128 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // 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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : vietnamese (vi)
+  // author : Bang Nguyen : https://github.com/bangnk
 
-      // 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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('vi', {
+          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
+          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
+          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
+          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM [năm] YYYY",
+              LLL : "D MMMM [năm] YYYY LT",
+              LLLL : "dddd, D MMMM [năm] YYYY LT",
+              l : "DD/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Hôm nay lúc] LT",
+              nextDay: '[Ngày mai lúc] LT',
+              nextWeek: 'dddd [tuần tới lúc] LT',
+              lastDay: '[Hôm qua lúc] LT',
+              lastWeek: 'dddd [tuần rồi lúc] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s tới",
+              past : "%s trước",
+              s : "vài giây",
+              m : "một phút",
+              mm : "%d phút",
+              h : "một giờ",
+              hh : "%d giờ",
+              d : "một ngày",
+              dd : "%d ngày",
+              M : "một tháng",
+              MM : "%d tháng",
+              y : "một năm",
+              yy : "%d năm"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      // 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();
-    };
+/***/ },
+/* 129 */
+/***/ function(module, exports, __webpack_require__) {
 
-    /**
-     * 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chinese
+  // author : suupic : https://github.com/suupic
+  // author : Zeno Zeng : https://github.com/zenozeng
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    };
+  }(function (moment) {
+      return moment.lang('zh-cn', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah点mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY-MM-DD",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 600) {
+                  return "凌晨";
+              } else if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : function () {
+                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
+              },
+              nextDay : function () {
+                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
+              },
+              lastDay : function () {
+                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
+              },
+              nextWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              lastWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              sameElse : 'LL'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d":
+              case "D":
+              case "DDD":
+                  return number + "日";
+              case "M":
+                  return number + "月";
+              case "w":
+              case "W":
+                  return number + "周";
+              default:
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s内",
+              past : "%s前",
+              s : "几秒",
+              m : "1分钟",
+              mm : "%d分钟",
+              h : "1小时",
+              hh : "%d小时",
+              d : "1天",
+              dd : "%d天",
+              M : "1个月",
+              MM : "%d个月",
+              y : "1年",
+              yy : "%d年"
+          },
+          week : {
+              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // TODO: add diamond shape
-  }
+
+/***/ },
+/* 130 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : traditional chinese (zh-tw)
+  // author : Ben : https://github.com/ben-lin
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-tw', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah點mm",
+              L : "YYYY年MMMD日",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY年MMMD日",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : '[今天]LT',
+              nextDay : '[明天]LT',
+              nextWeek : '[下]ddddLT',
+              lastDay : '[昨天]LT',
+              lastWeek : '[上]ddddLT',
+              sameElse : 'L'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d" :
+              case "D" :
+              case "DDD" :
+                  return number + "日";
+              case "M" :
+                  return number + "月";
+              case "w" :
+              case "W" :
+                  return number + "週";
+              default :
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s內",
+              past : "%s前",
+              s : "幾秒",
+              m : "一分鐘",
+              mm : "%d分鐘",
+              h : "一小時",
+              hh : "%d小時",
+              d : "一天",
+              dd : "%d天",
+              M : "一個月",
+              MM : "%d個月",
+              y : "一年",
+              yy : "%d年"
+          }
+      });
+  }));
 
 
 /***/ }
diff --git a/lib/network/Node.js b/lib/network/Node.js
index 76beec71..ee72aceb 100644
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@@ -179,7 +179,7 @@ Node.prototype.setProperties = function(properties, constants) {
   // individual shape properties
   if (properties.shape !== undefined)          {this.shape = properties.shape;}
   if (properties.image !== undefined)          {this.image = properties.image;}
-  if (properties.radius !== undefined)         {this.radius = properties.radius;}
+  if (properties.radius !== undefined)         {this.radius = properties.radius; this.baseRadiusValue = this.radius;}
   if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
   if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}

From 9b3477bccc18bbde868d7315b63021ccac97de83 Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Mon, 14 Jul 2014 17:09:33 +0200
Subject: [PATCH 5/6] improved edge selection function

---
 dist/vis.js                 | 42781 +++++++++++++++++-----------------
 examples/network/index.html |     1 +
 lib/network/Edge.js         |    61 +-
 3 files changed, 21427 insertions(+), 21416 deletions(-)

diff --git a/dist/vis.js b/dist/vis.js
index 1393d9dc..cea87062 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 3.0.1-SNAPSHOT
- * @date    2014-07-11
+ * @date    2014-07-14
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -81,54 +81,54 @@ return /******/ (function(modules) { // webpackBootstrap
 
   // utils
   exports.util = __webpack_require__(1);
-  exports.DOMutil = __webpack_require__(8);
+  exports.DOMutil = __webpack_require__(2);
 
   // data
-  exports.DataSet = __webpack_require__(9);
-  exports.DataView = __webpack_require__(10);
+  exports.DataSet = __webpack_require__(3);
+  exports.DataView = __webpack_require__(4);
 
   // Graph3d
   exports.Graph3d = __webpack_require__(11);
 
   // Timeline
-  exports.Timeline = __webpack_require__(17);
-  exports.Graph2d = __webpack_require__(31);
+  exports.Timeline = __webpack_require__(5);
+  exports.Graph2d = __webpack_require__(7);
   exports.timeline= {
-    DataStep: __webpack_require__(34),
-    Range: __webpack_require__(18),
-    stack: __webpack_require__(26),
-    TimeStep: __webpack_require__(21),
+    DataStep: __webpack_require__(6),
+    Range: __webpack_require__(8),
+    stack: __webpack_require__(9),
+    TimeStep: __webpack_require__(10),
 
     components: {
       items: {
-        Item: __webpack_require__(28),
-        ItemBox: __webpack_require__(29),
-        ItemPoint: __webpack_require__(30),
-        ItemRange: __webpack_require__(27)
+        Item: __webpack_require__(22),
+        ItemBox: __webpack_require__(23),
+        ItemPoint: __webpack_require__(24),
+        ItemRange: __webpack_require__(25)
       },
 
-      Component: __webpack_require__(19),
-      CurrentTime: __webpack_require__(22),
-      CustomTime: __webpack_require__(23),
-      DataAxis: __webpack_require__(33),
-      GraphGroup: __webpack_require__(35),
-      Group: __webpack_require__(25),
-      ItemSet: __webpack_require__(24),
-      Legend: __webpack_require__(36),
-      LineGraph: __webpack_require__(32),
-      TimeAxis: __webpack_require__(20)
+      Component: __webpack_require__(12),
+      CurrentTime: __webpack_require__(13),
+      CustomTime: __webpack_require__(14),
+      DataAxis: __webpack_require__(15),
+      GraphGroup: __webpack_require__(16),
+      Group: __webpack_require__(17),
+      ItemSet: __webpack_require__(18),
+      Legend: __webpack_require__(19),
+      LineGraph: __webpack_require__(20),
+      TimeAxis: __webpack_require__(21)
     }
   };
 
   // Network
-  exports.Network = __webpack_require__(37);
+  exports.Network = __webpack_require__(26);
   exports.network = {
-    Edge: __webpack_require__(43),
-    Groups: __webpack_require__(40),
-    Images: __webpack_require__(41),
-    Node: __webpack_require__(42),
-    Popup: __webpack_require__(44),
-    dotparser: __webpack_require__(39)
+    Edge: __webpack_require__(27),
+    Groups: __webpack_require__(28),
+    Images: __webpack_require__(29),
+    Node: __webpack_require__(30),
+    Popup: __webpack_require__(31),
+    dotparser: __webpack_require__(32)
   };
 
   // Deprecated since v3.0.0
@@ -145,8 +145,8 @@ 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.
-  var Hammer = __webpack_require__(2);
-  var moment = __webpack_require__(4);
+  var Hammer = __webpack_require__(39);
+  var moment = __webpack_require__(38);
 
   /**
    * Test whether given object is a number
@@ -1420,5679 +1420,4575 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 2 */
 /***/ function(module, exports, __webpack_require__) {
 
-  // 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__(3);
-    // TODO: throw an error when hammerjs is not available?
-  }
-  else {
-    module.exports = function () {
-      throw Error('hammer.js is only available in a browser, not in node.js.');
-    }
-  }
-
-
-/***/ },
-/* 3 */
-/***/ function(module, exports, __webpack_require__) {
-
-  /*! Hammer.JS - v1.0.5 - 2013-04-07
-   * http://eightmedia.github.com/hammer.js
-   *
-   * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
-   * Licensed under the MIT license */
-
-  (function(window, undefined) {
-      'use strict';
+  // DOM utility methods
 
   /**
-   * Hammer
-   * use this to create instances
-   * @param   {HTMLElement}   element
-   * @param   {Object}        options
-   * @returns {Hammer.Instance}
-   * @constructor
+   * this prepares the JSON container for allocating SVG elements
+   * @param JSONcontainer
+   * @private
    */
-  var Hammer = function(element, options) {
-      return new Hammer.Instance(element, options || {});
+  exports.prepareElements = function(JSONcontainer) {
+    // cleanup the redundant svgElements;
+    for (var elementType in JSONcontainer) {
+      if (JSONcontainer.hasOwnProperty(elementType)) {
+        JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
+        JSONcontainer[elementType].used = [];
+      }
+    }
   };
 
-  // default settings
-  Hammer.defaults = {
-      // add styles and attributes to the element to prevent the browser from doing
-      // its native behavior. this doesnt prevent the scrolling, but cancels
-      // the contextmenu, tap highlighting etc
-      // set to false to disable this
-      stop_browser_behavior: {
-  		// this also triggers onselectstart=false for IE
-          userSelect: 'none',
-  		// this makes the element blocking in IE10 >, you could experiment with the value
-  		// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
-          touchAction: 'none',
-  		touchCallout: 'none',
-          contentZooming: 'none',
-          userDrag: 'none',
-          tapHighlightColor: 'rgba(0,0,0,0)'
+  /**
+   * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
+   * which to remove the redundant elements.
+   *
+   * @param JSONcontainer
+   * @private
+   */
+  exports.cleanupElements = function(JSONcontainer) {
+    // cleanup the redundant svgElements;
+    for (var elementType in JSONcontainer) {
+      if (JSONcontainer.hasOwnProperty(elementType)) {
+        if (JSONcontainer[elementType].redundant) {
+          for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
+            JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
+          }
+          JSONcontainer[elementType].redundant = [];
+        }
       }
+    }
+  };
 
-      // more settings are defined per gesture at gestures.js
+  /**
+   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
+   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+   *
+   * @param elementType
+   * @param JSONcontainer
+   * @param svgContainer
+   * @returns {*}
+   * @private
+   */
+  exports.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
+    var element;
+    // allocate SVG element, if it doesnt yet exist, create one.
+    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
+      // check if there is an redundant element
+      if (JSONcontainer[elementType].redundant.length > 0) {
+        element = JSONcontainer[elementType].redundant[0];
+        JSONcontainer[elementType].redundant.shift();
+      }
+      else {
+        // create a new element and add it to the SVG
+        element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
+        svgContainer.appendChild(element);
+      }
+    }
+    else {
+      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
+      element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
+      JSONcontainer[elementType] = {used: [], redundant: []};
+      svgContainer.appendChild(element);
+    }
+    JSONcontainer[elementType].used.push(element);
+    return element;
   };
 
-  // detect touchevents
-  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
-  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
 
-  // dont use mouseevents on mobile devices
-  Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
-  Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
+  /**
+   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
+   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+   *
+   * @param elementType
+   * @param JSONcontainer
+   * @param DOMContainer
+   * @returns {*}
+   * @private
+   */
+  exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
+    var element;
+    // allocate SVG element, if it doesnt yet exist, create one.
+    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
+      // check if there is an redundant element
+      if (JSONcontainer[elementType].redundant.length > 0) {
+        element = JSONcontainer[elementType].redundant[0];
+        JSONcontainer[elementType].redundant.shift();
+      }
+      else {
+        // create a new element and add it to the SVG
+        element = document.createElement(elementType);
+        DOMContainer.appendChild(element);
+      }
+    }
+    else {
+      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
+      element = document.createElement(elementType);
+      JSONcontainer[elementType] = {used: [], redundant: []};
+      DOMContainer.appendChild(element);
+    }
+    JSONcontainer[elementType].used.push(element);
+    return element;
+  };
 
-  // eventtypes per touchevent (start, move, end)
-  // are filled by Hammer.event.determineEventTypes on setup
-  Hammer.EVENT_TYPES = {};
 
-  // direction defines
-  Hammer.DIRECTION_DOWN = 'down';
-  Hammer.DIRECTION_LEFT = 'left';
-  Hammer.DIRECTION_UP = 'up';
-  Hammer.DIRECTION_RIGHT = 'right';
 
-  // pointer type
-  Hammer.POINTER_MOUSE = 'mouse';
-  Hammer.POINTER_TOUCH = 'touch';
-  Hammer.POINTER_PEN = 'pen';
 
-  // touch event defines
-  Hammer.EVENT_START = 'start';
-  Hammer.EVENT_MOVE = 'move';
-  Hammer.EVENT_END = 'end';
+  /**
+   * draw a point object. this is a seperate function because it can also be called by the legend.
+   * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
+   * as well.
+   *
+   * @param x
+   * @param y
+   * @param group
+   * @param JSONcontainer
+   * @param svgContainer
+   * @returns {*}
+   */
+  exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
+    var point;
+    if (group.options.drawPoints.style == 'circle') {
+      point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
+      point.setAttributeNS(null, "cx", x);
+      point.setAttributeNS(null, "cy", y);
+      point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
+      point.setAttributeNS(null, "class", group.className + " point");
+    }
+    else {
+      point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
+      point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
+      point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
+      point.setAttributeNS(null, "width", group.options.drawPoints.size);
+      point.setAttributeNS(null, "height", group.options.drawPoints.size);
+      point.setAttributeNS(null, "class", group.className + " point");
+    }
+    return point;
+  };
 
-  // hammer document where the base events are added at
-  Hammer.DOCUMENT = document;
+  /**
+   * draw a bar SVG element centered on the X coordinate
+   *
+   * @param x
+   * @param y
+   * @param className
+   */
+  exports.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
+    var rect = exports.getSVGElement('rect',JSONcontainer, svgContainer);
+    rect.setAttributeNS(null, "x", x - 0.5 * width);
+    rect.setAttributeNS(null, "y", y);
+    rect.setAttributeNS(null, "width", width);
+    rect.setAttributeNS(null, "height", height);
+    rect.setAttributeNS(null, "class", className);
+  };
 
-  // plugins namespace
-  Hammer.plugins = {};
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
 
-  // if the window events are set...
-  Hammer.READY = false;
+  var util = __webpack_require__(1);
 
   /**
-   * setup events to detect gestures on the document
+   * DataSet
+   *
+   * Usage:
+   *     var dataSet = new DataSet({
+   *         fieldId: '_id',
+   *         type: {
+   *             // ...
+   *         }
+   *     });
+   *
+   *     dataSet.add(item);
+   *     dataSet.add(data);
+   *     dataSet.update(item);
+   *     dataSet.update(data);
+   *     dataSet.remove(id);
+   *     dataSet.remove(ids);
+   *     var data = dataSet.get();
+   *     var data = dataSet.get(id);
+   *     var data = dataSet.get(ids);
+   *     var data = dataSet.get(ids, options, data);
+   *     dataSet.clear();
+   *
+   * A data set can:
+   * - add/remove/update data
+   * - gives triggers upon changes in the data
+   * - can  import/export data in various data formats
+   *
+   * @param {Array | DataTable} [data]    Optional array with initial data
+   * @param {Object} [options]   Available options:
+   *                             {String} fieldId Field name of the id in the
+   *                                              items, 'id' by default.
+   *                             {Object.<String, String} type
+   *                                              A map with field names as key,
+   *                                              and the field type as value.
+   * @constructor DataSet
    */
-  function setup() {
-      if(Hammer.READY) {
-          return;
-      }
+  // TODO: add a DataSet constructor DataSet(data, options)
+  function DataSet (data, options) {
+    // correctly read optional arguments
+    if (data && !Array.isArray(data) && !util.isDataTable(data)) {
+      options = data;
+      data = null;
+    }
 
-      // find what eventtypes we add listeners to
-      Hammer.event.determineEventTypes();
+    this._options = options || {};
+    this._data = {};                                 // map with data indexed by id
+    this._fieldId = this._options.fieldId || 'id';   // name of the field containing id
+    this._type = {};                                 // internal field types (NOTE: this can differ from this._options.type)
 
-      // Register all gestures inside Hammer.gestures
-      for(var name in Hammer.gestures) {
-          if(Hammer.gestures.hasOwnProperty(name)) {
-              Hammer.detection.register(Hammer.gestures[name]);
+    // all variants of a Date are internally stored as Date, so we can convert
+    // from everything to everything (also from ISODate to Number for example)
+    if (this._options.type) {
+      for (var field in this._options.type) {
+        if (this._options.type.hasOwnProperty(field)) {
+          var value = this._options.type[field];
+          if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
+            this._type[field] = 'Date';
+          }
+          else {
+            this._type[field] = value;
           }
+        }
       }
+    }
 
-      // Add touch events on the document
-      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
-      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
+    // TODO: deprecated since version 1.1.1 (or 2.0.0?)
+    if (this._options.convert) {
+      throw new Error('Option "convert" is deprecated. Use "type" instead.');
+    }
 
-      // Hammer is ready...!
-      Hammer.READY = true;
+    this._subscribers = {};  // event subscribers
+
+    // add initial data when provided
+    if (data) {
+      this.add(data);
+    }
   }
 
   /**
-   * create new hammer instance
-   * all methods should return the instance itself, so it is chainable.
-   * @param   {HTMLElement}       element
-   * @param   {Object}            [options={}]
-   * @returns {Hammer.Instance}
-   * @constructor
+   * Subscribe to an event, add an event listener
+   * @param {String} event        Event name. Available events: 'put', 'update',
+   *                              'remove'
+   * @param {function} callback   Callback method. Called with three parameters:
+   *                                  {String} event
+   *                                  {Object | null} params
+   *                                  {String | Number} senderId
    */
-  Hammer.Instance = function(element, options) {
-      var self = this;
-
-      // setup HammerJS window events and register all gestures
-      // this also sets up the default options
-      setup();
-
-      this.element = element;
-
-      // start/stop detection option
-      this.enabled = true;
+  DataSet.prototype.on = function(event, callback) {
+    var subscribers = this._subscribers[event];
+    if (!subscribers) {
+      subscribers = [];
+      this._subscribers[event] = subscribers;
+    }
 
-      // merge options
-      this.options = Hammer.utils.extend(
-          Hammer.utils.extend({}, Hammer.defaults),
-          options || {});
+    subscribers.push({
+      callback: callback
+    });
+  };
 
-      // add some css to the element to prevent the browser from doing its native behavoir
-      if(this.options.stop_browser_behavior) {
-          Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
-      }
+  // TODO: make this function deprecated (replaced with `on` since version 0.5)
+  DataSet.prototype.subscribe = DataSet.prototype.on;
 
-      // start detection on touchstart
-      Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
-          if(self.enabled) {
-              Hammer.detection.startDetect(self, ev);
-          }
+  /**
+   * Unsubscribe from an event, remove an event listener
+   * @param {String} event
+   * @param {function} callback
+   */
+  DataSet.prototype.off = function(event, callback) {
+    var subscribers = this._subscribers[event];
+    if (subscribers) {
+      this._subscribers[event] = subscribers.filter(function (listener) {
+        return (listener.callback != callback);
       });
-
-      // return instance
-      return this;
+    }
   };
 
+  // TODO: make this function deprecated (replaced with `on` since version 0.5)
+  DataSet.prototype.unsubscribe = DataSet.prototype.off;
 
-  Hammer.Instance.prototype = {
-      /**
-       * bind events to the instance
-       * @param   {String}      gesture
-       * @param   {Function}    handler
-       * @returns {Hammer.Instance}
-       */
-      on: function onEvent(gesture, handler){
-          var gestures = gesture.split(' ');
-          for(var t=0; t<gestures.length; t++) {
-              this.element.addEventListener(gestures[t], handler, false);
-          }
-          return this;
-      },
-
-
-      /**
-       * unbind events to the instance
-       * @param   {String}      gesture
-       * @param   {Function}    handler
-       * @returns {Hammer.Instance}
-       */
-      off: function offEvent(gesture, handler){
-          var gestures = gesture.split(' ');
-          for(var t=0; t<gestures.length; t++) {
-              this.element.removeEventListener(gestures[t], handler, false);
-          }
-          return this;
-      },
-
-
-      /**
-       * trigger gesture event
-       * @param   {String}      gesture
-       * @param   {Object}      eventData
-       * @returns {Hammer.Instance}
-       */
-      trigger: function triggerEvent(gesture, 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(Hammer.utils.hasParent(eventData.target, element)) {
-              element = eventData.target;
-          }
-
-          element.dispatchEvent(event);
-          return this;
-      },
+  /**
+   * Trigger an event
+   * @param {String} event
+   * @param {Object | null} params
+   * @param {String} [senderId]       Optional id of the sender.
+   * @private
+   */
+  DataSet.prototype._trigger = function (event, params, senderId) {
+    if (event == '*') {
+      throw new Error('Cannot trigger event *');
+    }
 
+    var subscribers = [];
+    if (event in this._subscribers) {
+      subscribers = subscribers.concat(this._subscribers[event]);
+    }
+    if ('*' in this._subscribers) {
+      subscribers = subscribers.concat(this._subscribers['*']);
+    }
 
-      /**
-       * enable of disable hammer.js detection
-       * @param   {Boolean}   state
-       * @returns {Hammer.Instance}
-       */
-      enable: function enable(state) {
-          this.enabled = state;
-          return this;
+    for (var i = 0; i < subscribers.length; i++) {
+      var subscriber = subscribers[i];
+      if (subscriber.callback) {
+        subscriber.callback(event, params, senderId || null);
       }
+    }
   };
 
   /**
-   * this holds the last move event,
-   * used to fix empty touchend issue
-   * see the onTouch event for an explanation
-   * @type {Object}
+   * Add data.
+   * Adding an item will fail when there already is an item with the same id.
+   * @param {Object | Array | DataTable} data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} addedIds      Array with the ids of the added items
    */
-  var last_move_event = null;
+  DataSet.prototype.add = function (data, senderId) {
+    var addedIds = [],
+        id,
+        me = this;
+
+    if (Array.isArray(data)) {
+      // Array
+      for (var i = 0, len = data.length; i < len; i++) {
+        id = me._addItem(data[i]);
+        addedIds.push(id);
+      }
+    }
+    else if (util.isDataTable(data)) {
+      // Google DataTable
+      var columns = this._getColumnNames(data);
+      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+        var item = {};
+        for (var col = 0, cols = columns.length; col < cols; col++) {
+          var field = columns[col];
+          item[field] = data.getValue(row, col);
+        }
 
+        id = me._addItem(item);
+        addedIds.push(id);
+      }
+    }
+    else if (data instanceof Object) {
+      // Single item
+      id = me._addItem(data);
+      addedIds.push(id);
+    }
+    else {
+      throw new Error('Unknown dataType');
+    }
 
-  /**
-   * when the mouse is hold down, this is true
-   * @type {Boolean}
-   */
-  var enable_detect = false;
+    if (addedIds.length) {
+      this._trigger('add', {items: addedIds}, senderId);
+    }
 
+    return addedIds;
+  };
 
   /**
-   * when touch events have been fired, this is true
-   * @type {Boolean}
-   */
-  var touch_triggered = false;
-
-
-  Hammer.event = {
-      /**
-       * simple addEventListener
-       * @param   {HTMLElement}   element
-       * @param   {String}        type
-       * @param   {Function}      handler
-       */
-      bindDom: function(element, type, handler) {
-          var types = type.split(' ');
-          for(var t=0; t<types.length; t++) {
-              element.addEventListener(types[t], handler, false);
-          }
-      },
-
-
-      /**
-       * touch events with mouse fallback
-       * @param   {HTMLElement}   element
-       * @param   {String}        eventType        like Hammer.EVENT_MOVE
-       * @param   {Function}      handler
-       */
-      onTouch: function onTouch(element, eventType, handler) {
-  		var self = this;
-
-          this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
-              var sourceEventType = ev.type.toLowerCase();
-
-              // onmouseup, but when touchend has been fired we do nothing.
-              // this is for touchdevices which also fire a mouseup on touchend
-              if(sourceEventType.match(/mouse/) && touch_triggered) {
-                  return;
-              }
-
-              // mousebutton must be down or a touch event
-              else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
-                  sourceEventType.match(/pointerdown/) || // pointerevents touch
-                  (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
-              ){
-                  enable_detect = true;
-              }
-
-              // we are in a touch event, set the touch triggered bool to true,
-              // this for the conflicts that may occur on ios and android
-              if(sourceEventType.match(/touch|pointer/)) {
-                  touch_triggered = true;
-              }
-
-              // count the total touches on the screen
-              var count_touches = 0;
-
-              // when touch has been triggered in this detection session
-              // and we are now handling a mouse event, we stop that to prevent conflicts
-              if(enable_detect) {
-                  // update pointerevent
-                  if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
-                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
-                  }
-                  // touch
-                  else if(sourceEventType.match(/touch/)) {
-                      count_touches = ev.touches.length;
-                  }
-                  // mouse
-                  else if(!touch_triggered) {
-                      count_touches = sourceEventType.match(/up/) ? 0 : 1;
-                  }
-
-                  // if we are in a end event, but when we remove one touch and
-                  // we still have enough, set eventType to move
-                  if(count_touches > 0 && eventType == Hammer.EVENT_END) {
-                      eventType = Hammer.EVENT_MOVE;
-                  }
-                  // no touches, force the end event
-                  else if(!count_touches) {
-                      eventType = Hammer.EVENT_END;
-                  }
-
-                  // because touchend has no touches, and we often want to use these in our gestures,
-                  // we send the last move event as our eventData in touchend
-                  if(!count_touches && last_move_event !== null) {
-                      ev = last_move_event;
-                  }
-                  // store the last move event
-                  else {
-                      last_move_event = ev;
-                  }
-
-                  // trigger the handler
-                  handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
-
-                  // remove pointerevent from list
-                  if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
-                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
-                  }
-              }
-
-              //debug(sourceEventType +" "+ eventType);
-
-              // on the end we reset everything
-              if(!count_touches) {
-                  last_move_event = null;
-                  enable_detect = false;
-                  touch_triggered = false;
-                  Hammer.PointerEvent.reset();
-              }
-          });
-      },
-
-
-      /**
-       * we have different events for each device/browser
-       * determine what we need and set them in the Hammer.EVENT_TYPES constant
-       */
-      determineEventTypes: function determineEventTypes() {
-          // determine the eventtype we want to set
-          var types;
-
-          // pointerEvents magic
-          if(Hammer.HAS_POINTEREVENTS) {
-              types = Hammer.PointerEvent.getEvents();
-          }
-          // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
-          else if(Hammer.NO_MOUSEEVENTS) {
-              types = [
-                  'touchstart',
-                  'touchmove',
-                  'touchend touchcancel'];
-          }
-          // for non pointer events browsers and mixed browsers,
-          // like chrome on windows8 touch laptop
-          else {
-              types = [
-                  'touchstart mousedown',
-                  'touchmove mousemove',
-                  'touchend touchcancel mouseup'];
-          }
-
-          Hammer.EVENT_TYPES[Hammer.EVENT_START]  = types[0];
-          Hammer.EVENT_TYPES[Hammer.EVENT_MOVE]   = types[1];
-          Hammer.EVENT_TYPES[Hammer.EVENT_END]    = types[2];
-      },
-
-
-      /**
-       * create touchlist depending on the event
-       * @param   {Object}    ev
-       * @param   {String}    eventType   used by the fakemultitouch plugin
-       */
-      getTouchList: function getTouchList(ev/*, eventType*/) {
-          // get the fake pointerEvent touchlist
-          if(Hammer.HAS_POINTEREVENTS) {
-              return Hammer.PointerEvent.getTouchList();
-          }
-          // get the touchlist
-          else if(ev.touches) {
-              return ev.touches;
-          }
-          // make fake touchlist from mouse position
-          else {
-              return [{
-                  identifier: 1,
-                  pageX: ev.pageX,
-                  pageY: ev.pageY,
-                  target: ev.target
-              }];
-          }
-      },
-
-
-      /**
-       * collect event data for Hammer js
-       * @param   {HTMLElement}   element
-       * @param   {String}        eventType        like Hammer.EVENT_MOVE
-       * @param   {Object}        eventData
-       */
-      collectEventData: function collectEventData(element, eventType, ev) {
-          var touches = this.getTouchList(ev, eventType);
-
-          // find out pointerType
-          var pointerType = Hammer.POINTER_TOUCH;
-          if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
-              pointerType = Hammer.POINTER_MOUSE;
-          }
-
-          return {
-              center      : Hammer.utils.getCenter(touches),
-              timeStamp   : new Date().getTime(),
-              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() {
-                  if(this.srcEvent.preventManipulation) {
-                      this.srcEvent.preventManipulation();
-                  }
-
-                  if(this.srcEvent.preventDefault) {
-                      this.srcEvent.preventDefault();
-                  }
-              },
-
-              /**
-               * stop bubbling the event up to its parents
-               */
-              stopPropagation: function() {
-                  this.srcEvent.stopPropagation();
-              },
-
-              /**
-               * immediately stop gesture detection
-               * might be useful after a swipe was detected
-               * @return {*}
-               */
-              stopDetect: function() {
-                  return Hammer.detection.stopDetect();
-              }
-          };
-      }
-  };
-
-  Hammer.PointerEvent = {
-      /**
-       * holds all pointers
-       * @type {Object}
-       */
-      pointers: {},
-
-      /**
-       * get a list of pointers
-       * @returns {Array}     touchlist
-       */
-      getTouchList: function() {
-          var self = this;
-          var touchlist = [];
-
-          // we can use forEach since pointerEvents only is in IE10
-          Object.keys(self.pointers).sort().forEach(function(id) {
-              touchlist.push(self.pointers[id]);
-          });
-          return touchlist;
-      },
-
-      /**
-       * update the position of a pointer
-       * @param   {String}   type             Hammer.EVENT_END
-       * @param   {Object}   pointerEvent
-       */
-      updatePointer: function(type, pointerEvent) {
-          if(type == Hammer.EVENT_END) {
-              this.pointers = {};
-          }
-          else {
-              pointerEvent.identifier = pointerEvent.pointerId;
-              this.pointers[pointerEvent.pointerId] = pointerEvent;
-          }
-
-          return Object.keys(this.pointers).length;
-      },
-
-      /**
-       * check if ev matches pointertype
-       * @param   {String}        pointerType     Hammer.POINTER_MOUSE
-       * @param   {PointerEvent}  ev
-       */
-      matchType: function(pointerType, ev) {
-          if(!ev.pointerType) {
-              return false;
-          }
-
-          var types = {};
-          types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
-          types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
-          types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
-          return types[pointerType];
-      },
-
-
-      /**
-       * get events
-       */
-      getEvents: function() {
-          return [
-              'pointerdown MSPointerDown',
-              'pointermove MSPointerMove',
-              'pointerup pointercancel MSPointerUp MSPointerCancel'
-          ];
-      },
-
-      /**
-       * reset the list
-       */
-      reset: function() {
-          this.pointers = {};
-      }
-  };
-
-
-  Hammer.utils = {
-      /**
-       * extend method,
-       * also used for cloning when dest is an empty object
-       * @param   {Object}    dest
-       * @param   {Object}    src
-  	 * @parm	{Boolean}	merge		do a merge
-       * @returns {Object}    dest
-       */
-      extend: function extend(dest, src, merge) {
-          for (var key in src) {
-  			if(dest[key] !== undefined && merge) {
-  				continue;
-  			}
-              dest[key] = src[key];
-          }
-          return dest;
-      },
-
-
-      /**
-       * find if a node is in the given parent
-       * used for event delegation tricks
-       * @param   {HTMLElement}   node
-       * @param   {HTMLElement}   parent
-       * @returns {boolean}       has_parent
-       */
-      hasParent: function(node, parent) {
-          while(node){
-              if(node == parent) {
-                  return true;
-              }
-              node = node.parentNode;
-          }
-          return false;
-      },
-
-
-      /**
-       * get the center of all the touches
-       * @param   {Array}     touches
-       * @returns {Object}    center
-       */
-      getCenter: function getCenter(touches) {
-          var valuesX = [], valuesY = [];
-
-          for(var t= 0,len=touches.length; t<len; t++) {
-              valuesX.push(touches[t].pageX);
-              valuesY.push(touches[t].pageY);
-          }
-
-          return {
-              pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
-              pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
-          };
-      },
-
-
-      /**
-       * calculate the velocity between two points
-       * @param   {Number}    delta_time
-       * @param   {Number}    delta_x
-       * @param   {Number}    delta_y
-       * @returns {Object}    velocity
-       */
-      getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
-          return {
-              x: Math.abs(delta_x / delta_time) || 0,
-              y: Math.abs(delta_y / delta_time) || 0
-          };
-      },
-
-
-      /**
-       * calculate the angle between two coordinates
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {Number}    angle
-       */
-      getAngle: function getAngle(touch1, touch2) {
-          var y = touch2.pageY - touch1.pageY,
-              x = touch2.pageX - touch1.pageX;
-          return Math.atan2(y, x) * 180 / Math.PI;
-      },
-
-
-      /**
-       * angle to direction define
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {String}    direction constant, like Hammer.DIRECTION_LEFT
-       */
-      getDirection: function getDirection(touch1, touch2) {
-          var x = Math.abs(touch1.pageX - touch2.pageX),
-              y = Math.abs(touch1.pageY - touch2.pageY);
-
-          if(x >= y) {
-              return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
-          }
-          else {
-              return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
-          }
-      },
-
-
-      /**
-       * calculate the distance between two touches
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {Number}    distance
-       */
-      getDistance: function getDistance(touch1, touch2) {
-          var x = touch2.pageX - touch1.pageX,
-              y = touch2.pageY - touch1.pageY;
-          return Math.sqrt((x*x) + (y*y));
-      },
-
-
-      /**
-       * calculate the scale factor between two touchLists (fingers)
-       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
-       * @param   {Array}     start
-       * @param   {Array}     end
-       * @returns {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;
-      },
-
-
-      /**
-       * calculate the rotation degrees between two touchLists (fingers)
-       * @param   {Array}     start
-       * @param   {Array}     end
-       * @returns {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;
-      },
-
-
-      /**
-       * boolean if the direction is vertical
-       * @param    {String}    direction
-       * @returns  {Boolean}   is_vertical
-       */
-      isVertical: function isVertical(direction) {
-          return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
-      },
-
-
-      /**
-       * stop browser default behavior with css props
-       * @param   {HtmlElement}   element
-       * @param   {Object}        css_props
-       */
-      stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
-          var prop,
-              vendors = ['webkit','khtml','moz','ms','o',''];
-
-          if(!css_props || !element.style) {
-              return;
-          }
-
-          // with css properties for modern browsers
-          for(var i = 0; i < vendors.length; i++) {
-              for(var p in css_props) {
-                  if(css_props.hasOwnProperty(p)) {
-                      prop = p;
-
-                      // vender prefix at the property
-                      if(vendors[i]) {
-                          prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
-                      }
-
-                      // set the style
-                      element.style[prop] = css_props[p];
-                  }
-              }
-          }
-
-          // also the disable onselectstart
-          if(css_props.userSelect == 'none') {
-              element.onselectstart = function() {
-                  return false;
-              };
-          }
-      }
-  };
-
-  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
-       * @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;
-
-          this.current = {
-              inst        : inst, // reference to HammerInstance we're working for
-              startEvent  : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
-              lastEvent   : false, // last eventData
-              name        : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
-          };
-
-          this.detect(eventData);
-      },
-
-
-      /**
-       * Hammer.gesture detection
-       * @param   {Object}    eventData
-       * @param   {Object}    eventData
-       */
-      detect: function detect(eventData) {
-          if(!this.current || this.stopped) {
-              return;
-          }
-
-          // extend event data with calculations about scale, distance etc
-          eventData = this.extendEventData(eventData);
-
-          // instance options
-          var inst_options = this.current.inst.options;
-
-          // call Hammer.gesture handlers
-          for(var g=0,len=this.gestures.length; g<len; g++) {
-              var gesture = this.gestures[g];
-
-              // only when the instance options have enabled this gesture
-              if(!this.stopped && inst_options[gesture.name] !== false) {
-                  // if a handler returns false, we stop with the detection
-                  if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
-                      this.stopDetect();
-                      break;
-                  }
-              }
-          }
-
-          // store as previous event event
-          if(this.current) {
-              this.current.lastEvent = eventData;
-          }
-
-          // endevent, but not the last touch, so dont stop
-          if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
-              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
-       */
-      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 = Hammer.utils.extend({}, this.current);
-
-          // reset the current
-          this.current = null;
-
-          // stopped!
-          this.stopped = true;
-      },
-
-
-      /**
-       * extend eventData for Hammer.gestures
-       * @param   {Object}   ev
-       * @returns {Object}   ev
-       */
-      extendEventData: function extendEventData(ev) {
-          var startEv = this.current.startEvent;
-
-          // if the touches change, set the new touches over the startEvent touches
-          // this because touchevents don't have all the touches on touchstart, or the
-          // user must place his fingers at the EXACT same time on the screen, which is not realistic
-          // but, sometimes it happens that both fingers are touching at the EXACT same time
-          if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
-              // extend 1 level deep to get the touchlist with the touch objects
-              startEv.touches = [];
-              for(var i=0,len=ev.touches.length; i<len; i++) {
-                  startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
-              }
-          }
-
-          var delta_time = ev.timeStamp - startEv.timeStamp,
-              delta_x = ev.center.pageX - startEv.center.pageX,
-              delta_y = ev.center.pageY - startEv.center.pageY,
-              velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
-
-          Hammer.utils.extend(ev, {
-              deltaTime   : delta_time,
-
-              deltaX      : delta_x,
-              deltaY      : delta_y,
-
-              velocityX   : velocity.x,
-              velocityY   : velocity.y,
-
-              distance    : Hammer.utils.getDistance(startEv.center, ev.center),
-              angle       : Hammer.utils.getAngle(startEv.center, ev.center),
-              direction   : Hammer.utils.getDirection(startEv.center, ev.center),
-
-              scale       : Hammer.utils.getScale(startEv.touches, ev.touches),
-              rotation    : Hammer.utils.getRotation(startEv.touches, ev.touches),
-
-              startEvent  : startEv
-          });
-
-          return ev;
-      },
-
-
-      /**
-       * register new gesture
-       * @param   {Object}    gesture object, see gestures.js for documentation
-       * @returns {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
-          Hammer.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;
-      }
-  };
-
-
-  Hammer.gestures = Hammer.gestures || {};
-
-  /**
-   * Custom gestures
-   * ==============================
-   *
-   * Gesture object
-   * --------------------
-   * The object structure of a gesture:
-   *
-   * { name: 'mygesture',
-   *   index: 1337,
-   *   defaults: {
-   *     mygesture_option: true
-   *   }
-   *   handler: function(type, ev, inst) {
-   *     // trigger gesture event
-   *     inst.trigger(this.name, ev);
-   *   }
-   * }
-
-   * @param   {String}    name
-   * this should be the name of the gesture, lowercase
-   * it is also being used to disable/enable the gesture per instance config.
-   *
-   * @param   {Number}    [index=1000]
-   * the index of the gesture, where it is going to be in the stack of gestures detection
-   * like when you build an gesture that depends on the drag gesture, it is a good
-   * idea to place it after the index of the drag gesture.
-   *
-   * @param   {Object}    [defaults={}]
-   * the default settings of the gesture. these are added to the instance settings,
-   * and can be overruled per instance. you can also add the name of the gesture,
-   * but this is also added by default (and set to true).
-   *
-   * @param   {Function}  handler
-   * this handles the gesture detection of your custom gesture and receives the
-   * following arguments:
-   *
-   *      @param  {Object}    eventData
-   *      event data containing the following properties:
-   *          timeStamp   {Number}        time the event occurred
-   *          target      {HTMLElement}   target element
-   *          touches     {Array}         touches (fingers, pointers, mouse) on the screen
-   *          pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
-   *          center      {Object}        center position of the touches. contains pageX and pageY
-   *          deltaTime   {Number}        the total time of the touches in the screen
-   *          deltaX      {Number}        the delta on x axis we haved moved
-   *          deltaY      {Number}        the delta on y axis we haved moved
-   *          velocityX   {Number}        the velocity on the x
-   *          velocityY   {Number}        the velocity on y
-   *          angle       {Number}        the angle we are moving
-   *          direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
-   *          distance    {Number}        the distance we haved moved
-   *          scale       {Number}        scaling of the touches, needs 2 touches
-   *          rotation    {Number}        rotation of the touches, needs 2 touches *
-   *          eventType   {String}        matches Hammer.EVENT_START|MOVE|END
-   *          srcEvent    {Object}        the source event, like TouchStart or MouseDown *
-   *          startEvent  {Object}        contains the same properties as above,
-   *                                      but from the first touch. this is used to calculate
-   *                                      distances, deltaTime, scaling etc
-   *
-   *      @param  {Hammer.Instance}    inst
-   *      the instance we are doing the detection for. you can get the options from
-   *      the inst.options object and trigger the gesture event by calling inst.trigger
-   *
-   *
-   * Handle gestures
-   * --------------------
-   * inside the handler you can get/set Hammer.detection.current. This is the current
-   * detection session. It has the following properties
-   *      @param  {String}    name
-   *      contains the name of the gesture we have detected. it has not a real function,
-   *      only to check in other gestures if something is detected.
-   *      like in the drag gesture we set it to 'drag' and in the swipe gesture we can
-   *      check if the current gesture is 'drag' by accessing Hammer.detection.current.name
-   *
-   *      @readonly
-   *      @param  {Hammer.Instance}    inst
-   *      the instance we do the detection for
-   *
-   *      @readonly
-   *      @param  {Object}    startEvent
-   *      contains the properties of the first gesture detection in this session.
-   *      Used for calculations about timing, distance, etc.
-   *
-   *      @readonly
-   *      @param  {Object}    lastEvent
-   *      contains all the properties of the last gesture detect in this session.
-   *
-   * after the gesture detection session has been completed (user has released the screen)
-   * the Hammer.detection.current object is copied into Hammer.detection.previous,
-   * this is usefull for gestures like doubletap, where you need to know if the
-   * previous gesture was a tap
-   *
-   * options that have been set by the instance can be received by calling inst.options
-   *
-   * You can trigger a gesture event by calling inst.trigger("mygesture", event).
-   * The first param is the name of your gesture, the second the event argument
-   *
-   *
-   * Register gestures
-   * --------------------
-   * When an gesture is added to the Hammer.gestures object, it is auto registered
-   * at the setup of the first Hammer instance. You can also call Hammer.detection.register
-   * manually and pass your gesture object as a param
-   *
-   */
-
-  /**
-   * Hold
-   * Touch stays at the same place for x time
-   * @events  hold
-   */
-  Hammer.gestures.Hold = {
-      name: 'hold',
-      index: 10,
-      defaults: {
-          hold_timeout	: 500,
-          hold_threshold	: 1
-      },
-      timer: null,
-      handler: function holdGesture(ev, inst) {
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  // clear any running timers
-                  clearTimeout(this.timer);
-
-                  // set the gesture so we can check in the timeout if it still is
-                  Hammer.detection.current.name = this.name;
-
-                  // set timer and if after the timeout it still is hold,
-                  // we trigger the hold event
-                  this.timer = setTimeout(function() {
-                      if(Hammer.detection.current.name == 'hold') {
-                          inst.trigger('hold', ev);
-                      }
-                  }, inst.options.hold_timeout);
-                  break;
-
-              // when you move or end we clear the timer
-              case Hammer.EVENT_MOVE:
-                  if(ev.distance > inst.options.hold_threshold) {
-                      clearTimeout(this.timer);
-                  }
-                  break;
-
-              case Hammer.EVENT_END:
-                  clearTimeout(this.timer);
-                  break;
-          }
-      }
-  };
-
-
-  /**
-   * Tap/DoubleTap
-   * Quick touch at a place or double at the same place
-   * @events  tap, doubletap
-   */
-  Hammer.gestures.Tap = {
-      name: 'tap',
-      index: 100,
-      defaults: {
-          tap_max_touchtime	: 250,
-          tap_max_distance	: 10,
-  		tap_always			: true,
-          doubletap_distance	: 20,
-          doubletap_interval	: 300
-      },
-      handler: function tapGesture(ev, inst) {
-          if(ev.eventType == Hammer.EVENT_END) {
-              // previous gesture, for the double tap since these are two different gesture detections
-              var prev = Hammer.detection.previous,
-  				did_doubletap = false;
-
-              // when the touchtime is higher then the max touch time
-              // or when the moving distance is too much
-              if(ev.deltaTime > inst.options.tap_max_touchtime ||
-                  ev.distance > inst.options.tap_max_distance) {
-                  return;
-              }
-
-              // check if double tap
-              if(prev && prev.name == 'tap' &&
-                  (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
-                  ev.distance < inst.options.doubletap_distance) {
-  				inst.trigger('doubletap', ev);
-  				did_doubletap = true;
-              }
-
-  			// do a single tap
-  			if(!did_doubletap || inst.options.tap_always) {
-  				Hammer.detection.current.name = 'tap';
-  				inst.trigger(Hammer.detection.current.name, ev);
-  			}
-          }
-      }
-  };
-
-
-  /**
-   * Swipe
-   * triggers swipe events when the end velocity is above the threshold
-   * @events  swipe, swipeleft, swiperight, swipeup, swipedown
-   */
-  Hammer.gestures.Swipe = {
-      name: 'swipe',
-      index: 40,
-      defaults: {
-          // set 0 for unlimited, but this can conflict with transform
-          swipe_max_touches  : 1,
-          swipe_velocity     : 0.7
-      },
-      handler: function swipeGesture(ev, inst) {
-          if(ev.eventType == Hammer.EVENT_END) {
-              // max touches
-              if(inst.options.swipe_max_touches > 0 &&
-                  ev.touches.length > inst.options.swipe_max_touches) {
-                  return;
-              }
-
-              // when the distance we moved is too small we skip this gesture
-              // or we can be already in dragging
-              if(ev.velocityX > inst.options.swipe_velocity ||
-                  ev.velocityY > inst.options.swipe_velocity) {
-                  // trigger swipe events
-                  inst.trigger(this.name, ev);
-                  inst.trigger(this.name + ev.direction, ev);
-              }
-          }
-      }
-  };
-
-
-  /**
-   * Drag
-   * Move with x fingers (default 1) around on the page. Blocking the scrolling when
-   * moving left and right is a good practice. When all the drag events are blocking
-   * you disable scrolling on that area.
-   * @events  drag, drapleft, dragright, dragup, dragdown
-   */
-  Hammer.gestures.Drag = {
-      name: 'drag',
-      index: 50,
-      defaults: {
-          drag_min_distance : 10,
-          // set 0 for unlimited, but this can conflict with transform
-          drag_max_touches  : 1,
-          // 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
-          drag_block_horizontal   : false,
-          drag_block_vertical     : false,
-          // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
-          // It disallows vertical directions if the initial direction was horizontal, and vice versa.
-          drag_lock_to_axis       : false,
-          // drag lock only kicks in when distance > drag_lock_min_distance
-          // This way, locking occurs only when the distance has become large enough to reliably determine the direction
-          drag_lock_min_distance : 25
-      },
-      triggered: false,
-      handler: function dragGesture(ev, inst) {
-          // current gesture isnt drag, but dragged is true
-          // this means an other gesture is busy. now call dragend
-          if(Hammer.detection.current.name != this.name && this.triggered) {
-              inst.trigger(this.name +'end', ev);
-              this.triggered = false;
-              return;
-          }
-
-          // max touches
-          if(inst.options.drag_max_touches > 0 &&
-              ev.touches.length > inst.options.drag_max_touches) {
-              return;
-          }
-
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  this.triggered = false;
-                  break;
-
-              case Hammer.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.drag_min_distance &&
-                      Hammer.detection.current.name != this.name) {
-                      return;
-                  }
-
-                  // we are dragging!
-                  Hammer.detection.current.name = this.name;
-
-                  // lock drag to axis?
-                  if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
-                      ev.drag_locked_to_axis = true;
-                  }
-                  var last_direction = Hammer.detection.current.lastEvent.direction;
-                  if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
-                      // keep direction on the axis that the drag gesture started on
-                      if(Hammer.utils.isVertical(last_direction)) {
-                          ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
-                      }
-                      else {
-                          ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
-                      }
-                  }
-
-                  // first time, trigger dragstart event
-                  if(!this.triggered) {
-                      inst.trigger(this.name +'start', ev);
-                      this.triggered = true;
-                  }
-
-                  // trigger normal event
-                  inst.trigger(this.name, ev);
-
-                  // direction event, like dragdown
-                  inst.trigger(this.name + ev.direction, ev);
-
-                  // block the browser events
-                  if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
-                      (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
-                      ev.preventDefault();
-                  }
-                  break;
-
-              case Hammer.EVENT_END:
-                  // trigger dragend
-                  if(this.triggered) {
-                      inst.trigger(this.name +'end', ev);
-                  }
-
-                  this.triggered = false;
-                  break;
-          }
-      }
-  };
-
-
-  /**
-   * Transform
-   * User want to scale or rotate with 2 fingers
-   * @events  transform, pinch, pinchin, pinchout, rotate
-   */
-  Hammer.gestures.Transform = {
-      name: 'transform',
-      index: 45,
-      defaults: {
-          // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
-          transform_min_scale     : 0.01,
-          // rotation in degrees
-          transform_min_rotation  : 1,
-          // prevent default browser behavior when two touches are on the screen
-          // but it makes the element a blocking element
-          // when you are using the transform gesture, it is a good practice to set this true
-          transform_always_block  : false
-      },
-      triggered: false,
-      handler: function transformGesture(ev, inst) {
-          // current gesture isnt drag, but dragged is true
-          // this means an other gesture is busy. now call dragend
-          if(Hammer.detection.current.name != this.name && this.triggered) {
-              inst.trigger(this.name +'end', ev);
-              this.triggered = false;
-              return;
-          }
-
-          // atleast multitouch
-          if(ev.touches.length < 2) {
-              return;
-          }
-
-          // prevent default when two fingers are on the screen
-          if(inst.options.transform_always_block) {
-              ev.preventDefault();
-          }
-
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  this.triggered = false;
-                  break;
-
-              case Hammer.EVENT_MOVE:
-                  var scale_threshold = Math.abs(1-ev.scale);
-                  var rotation_threshold = Math.abs(ev.rotation);
-
-                  // when the distance we moved is too small we skip this gesture
-                  // or we can be already in dragging
-                  if(scale_threshold < inst.options.transform_min_scale &&
-                      rotation_threshold < inst.options.transform_min_rotation) {
-                      return;
-                  }
-
-                  // we are transforming!
-                  Hammer.detection.current.name = this.name;
-
-                  // first time, trigger dragstart event
-                  if(!this.triggered) {
-                      inst.trigger(this.name +'start', ev);
-                      this.triggered = true;
-                  }
-
-                  inst.trigger(this.name, ev); // basic transform event
-
-                  // trigger rotate event
-                  if(rotation_threshold > inst.options.transform_min_rotation) {
-                      inst.trigger('rotate', ev);
-                  }
-
-                  // trigger pinch event
-                  if(scale_threshold > inst.options.transform_min_scale) {
-                      inst.trigger('pinch', ev);
-                      inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
-                  }
-                  break;
-
-              case Hammer.EVENT_END:
-                  // trigger dragend
-                  if(this.triggered) {
-                      inst.trigger(this.name +'end', ev);
-                  }
-
-                  this.triggered = false;
-                  break;
-          }
-      }
-  };
-
-
-  /**
-   * Touch
-   * Called as first, tells the user has touched the screen
-   * @events  touch
-   */
-  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
-          prevent_default: false,
-
-          // disable mouse events, so only touch (or pen!) input triggers events
-          prevent_mouseevents: false
-      },
-      handler: function touchGesture(ev, inst) {
-          if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
-              ev.stopDetect();
-              return;
-          }
-
-          if(inst.options.prevent_default) {
-              ev.preventDefault();
-          }
-
-          if(ev.eventType ==  Hammer.EVENT_START) {
-              inst.trigger(this.name, ev);
-          }
-      }
-  };
-
-
-  /**
-   * Release
-   * Called as last, tells the user has released the screen
-   * @events  release
-   */
-  Hammer.gestures.Release = {
-      name: 'release',
-      index: Infinity,
-      handler: function releaseGesture(ev, inst) {
-          if(ev.eventType ==  Hammer.EVENT_END) {
-              inst.trigger(this.name, ev);
-          }
-      }
-  };
-
-  // node export
-  if(typeof module === 'object' && typeof module.exports === 'object'){
-      module.exports = Hammer;
-  }
-  // just window export
-  else {
-      window.Hammer = Hammer;
-
-      // requireJS module definition
-      if(typeof window.define === 'function' && window.define.amd) {
-          window.define('hammer', [], function() {
-              return Hammer;
-          });
-      }
-  }
-  })(this);
-
-/***/ },
-/* 4 */
-/***/ function(module, exports, __webpack_require__) {
-
-  // 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__(5);
-
-
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
-  //! version : 2.7.0
-  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
-  //! license : MIT
-  //! momentjs.com
-
-  (function (undefined) {
-
-      /************************************
-          Constants
-      ************************************/
-
-      var moment,
-          VERSION = "2.7.0",
-          // the global-scope this is NOT the global object in Node.js
-          globalScope = typeof global !== 'undefined' ? global : this,
-          oldGlobalMoment,
-          round = Math.round,
-          i,
-
-          YEAR = 0,
-          MONTH = 1,
-          DATE = 2,
-          HOUR = 3,
-          MINUTE = 4,
-          SECOND = 5,
-          MILLISECOND = 6,
-
-          // internal storage for language config files
-          languages = {},
-
-          // moment internal properties
-          momentProperties = {
-              _isAMomentObject: null,
-              _i : null,
-              _f : null,
-              _l : null,
-              _strict : null,
-              _tzm : null,
-              _isUTC : null,
-              _offset : null,  // optional. Combine with _isUTC
-              _pf : null,
-              _lang : null  // optional
-          },
-
-          // check for nodeJS
-          hasModule = (typeof module !== 'undefined' && module.exports),
-
-          // ASP.NET json date format regex
-          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
-          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
-
-          // 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)$/,
-
-          // 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|zz?|ZZ?|.)/g,
-          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
-
-          // 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)
-          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
-          parseTokenOrdinal = /\d{1,2}/,
-
-          //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
-
-          // 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)?)?$/,
-
-          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
-
-          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/]
-          ],
-
-          // 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
-          },
-
-          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'
-          },
-
-          // format function strings
-          formatFunctions = {},
-
-          // default relative time thresholds
-          relativeTimeThresholds = {
-            s: 45,   //seconds to minutes
-            m: 45,   //minutes to hours
-            h: 22,   //hours to days
-            dd: 25,  //days to month (month == 1)
-            dm: 45,  //days to months (months > 1)
-            dy: 345  //days 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(' '),
-
-          formatTokenFunctions = {
-              M    : function () {
-                  return this.month() + 1;
-              },
-              MMM  : function (format) {
-                  return this.lang().monthsShort(this, format);
-              },
-              MMMM : function (format) {
-                  return this.lang().months(this, format);
-              },
-              D    : function () {
-                  return this.date();
-              },
-              DDD  : function () {
-                  return this.dayOfYear();
-              },
-              d    : function () {
-                  return this.day();
-              },
-              dd   : function (format) {
-                  return this.lang().weekdaysMin(this, format);
-              },
-              ddd  : function (format) {
-                  return this.lang().weekdaysShort(this, format);
-              },
-              dddd : function (format) {
-                  return this.lang().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.lang().meridiem(this.hours(), this.minutes(), true);
-              },
-              A    : function () {
-                  return this.lang().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.zone(),
-                      b = "+";
-                  if (a < 0) {
-                      a = -a;
-                      b = "-";
-                  }
-                  return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
-              },
-              ZZ   : function () {
-                  var a = -this.zone(),
-                      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.unix();
-              },
-              Q : function () {
-                  return this.quarter();
-              }
-          },
-
-          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
+   * Update existing items. When an item does not exist, it will be created
+   * @param {Object | Array | DataTable} data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} updatedIds     The ids of the added or updated items
+   */
+  DataSet.prototype.update = function (data, senderId) {
+    var addedIds = [],
+        updatedIds = [],
+        me = this,
+        fieldId = me._fieldId;
 
-      // 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");
-          }
+    var addOrUpdate = function (item) {
+      var id = item[fieldId];
+      if (me._data[id]) {
+        // update item
+        id = me._updateItem(item);
+        updatedIds.push(id);
       }
-
-      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
-          };
+      else {
+        // add new item
+        id = me._addItem(item);
+        addedIds.push(id);
       }
+    };
 
-      function deprecate(msg, fn) {
-          var firstTime = true;
-          function printMsg() {
-              if (moment.suppressDeprecationWarnings === false &&
-                      typeof console !== 'undefined' && console.warn) {
-                  console.warn("Deprecation warning: " + msg);
-              }
-          }
-          return extend(function () {
-              if (firstTime) {
-                  printMsg();
-                  firstTime = false;
-              }
-              return fn.apply(this, arguments);
-          }, fn);
+    if (Array.isArray(data)) {
+      // Array
+      for (var i = 0, len = data.length; i < len; i++) {
+        addOrUpdate(data[i]);
       }
+    }
+    else if (util.isDataTable(data)) {
+      // Google DataTable
+      var columns = this._getColumnNames(data);
+      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+        var item = {};
+        for (var col = 0, cols = columns.length; col < cols; col++) {
+          var field = columns[col];
+          item[field] = data.getValue(row, col);
+        }
 
-      function padToken(func, count) {
-          return function (a) {
-              return leftZeroFill(func.call(this, a), count);
-          };
-      }
-      function ordinalizeToken(func, period) {
-          return function (a) {
-              return this.lang().ordinal(func.call(this, a), period);
-          };
+        addOrUpdate(item);
       }
+    }
+    else if (data instanceof Object) {
+      // Single item
+      addOrUpdate(data);
+    }
+    else {
+      throw new Error('Unknown dataType');
+    }
 
-      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);
+    if (addedIds.length) {
+      this._trigger('add', {items: addedIds}, senderId);
+    }
+    if (updatedIds.length) {
+      this._trigger('update', {items: updatedIds}, senderId);
+    }
 
+    return addedIds.concat(updatedIds);
+  };
 
-      /************************************
-          Constructors
-      ************************************/
+  /**
+   * Get a data item or multiple items.
+   *
+   * Usage:
+   *
+   *     get()
+   *     get(options: Object)
+   *     get(options: Object, data: Array | DataTable)
+   *
+   *     get(id: Number | String)
+   *     get(id: Number | String, options: Object)
+   *     get(id: Number | String, options: Object, data: Array | DataTable)
+   *
+   *     get(ids: Number[] | String[])
+   *     get(ids: Number[] | String[], options: Object)
+   *     get(ids: Number[] | String[], options: Object, data: Array | DataTable)
+   *
+   * Where:
+   *
+   * {Number | String} id         The id of an item
+   * {Number[] | String{}} ids    An array with ids of items
+   * {Object} options             An Object with options. Available options:
+   *                              {String} [returnType] Type of data to be
+   *                                  returned. Can be 'DataTable' or 'Array' (default)
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] field names to be returned
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * {Array | DataTable} [data]   If provided, items will be appended to this
+   *                              array or table. Required in case of Google
+   *                              DataTable.
+   *
+   * @throws Error
+   */
+  DataSet.prototype.get = function (args) {
+    var me = this;
 
-      function Language() {
+    // parse the arguments
+    var id, ids, options, data;
+    var firstType = util.getType(arguments[0]);
+    if (firstType == 'String' || firstType == 'Number') {
+      // get(id [, options] [, data])
+      id = arguments[0];
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else if (firstType == 'Array') {
+      // get(ids [, options] [, data])
+      ids = arguments[0];
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else {
+      // get([, options] [, data])
+      options = arguments[0];
+      data = arguments[1];
+    }
 
-      }
+    // determine the return type
+    var returnType;
+    if (options && options.returnType) {
+      returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
 
-      // Moment prototype object
-      function Moment(config) {
-          checkOverflow(config);
-          extend(this, config);
+      if (data && (returnType != util.getType(data))) {
+        throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
+            'does not correspond with specified options.type (' + options.type + ')');
       }
+      if (returnType == 'DataTable' && !util.isDataTable(data)) {
+        throw new Error('Parameter "data" must be a DataTable ' +
+            'when options.type is "DataTable"');
+      }
+    }
+    else if (data) {
+      returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+    }
+    else {
+      returnType = 'Array';
+    }
 
-      // 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 = {};
+    // build options
+    var type = options && options.type || this._options.type;
+    var filter = options && options.filter;
+    var items = [], item, itemId, i, len;
 
-          this._bubble();
+    // convert items
+    if (id != undefined) {
+      // return a single item
+      item = me._getItem(id, type);
+      if (filter && !filter(item)) {
+        item = null;
+      }
+    }
+    else if (ids != undefined) {
+      // return a subset of items
+      for (i = 0, len = ids.length; i < len; i++) {
+        item = me._getItem(ids[i], type);
+        if (!filter || filter(item)) {
+          items.push(item);
+        }
+      }
+    }
+    else {
+      // return all items
+      for (itemId in this._data) {
+        if (this._data.hasOwnProperty(itemId)) {
+          item = me._getItem(itemId, type);
+          if (!filter || filter(item)) {
+            items.push(item);
+          }
+        }
       }
+    }
 
-      /************************************
-          Helpers
-      ************************************/
+    // order the results
+    if (options && options.order && id == undefined) {
+      this._sort(items, options.order);
+    }
 
+    // filter fields of the items
+    if (options && options.fields) {
+      var fields = options.fields;
+      if (id != undefined) {
+        item = this._filterFields(item, fields);
+      }
+      else {
+        for (i = 0, len = items.length; i < len; i++) {
+          items[i] = this._filterFields(items[i], fields);
+        }
+      }
+    }
 
-      function extend(a, b) {
-          for (var i in b) {
-              if (b.hasOwnProperty(i)) {
-                  a[i] = b[i];
-              }
+    // return the results
+    if (returnType == 'DataTable') {
+      var columns = this._getColumnNames(data);
+      if (id != undefined) {
+        // append a single item to the data table
+        me._appendRow(data, columns, item);
+      }
+      else {
+        // copy the items to the provided data table
+        for (i = 0, len = items.length; i < len; i++) {
+          me._appendRow(data, columns, items[i]);
+        }
+      }
+      return data;
+    }
+    else {
+      // return an array
+      if (id != undefined) {
+        // a single item
+        return item;
+      }
+      else {
+        // multiple items
+        if (data) {
+          // copy the items to the provided array
+          for (i = 0, len = items.length; i < len; i++) {
+            data.push(items[i]);
           }
+          return data;
+        }
+        else {
+          // just return our array
+          return items;
+        }
+      }
+    }
+  };
 
-          if (b.hasOwnProperty("toString")) {
-              a.toString = b.toString;
-          }
+  /**
+   * Get ids of all items or from a filtered set of items.
+   * @param {Object} [options]    An Object with options. Available options:
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Array} ids
+   */
+  DataSet.prototype.getIds = function (options) {
+    var data = this._data,
+        filter = options && options.filter,
+        order = options && options.order,
+        type = options && options.type || this._options.type,
+        i,
+        len,
+        id,
+        item,
+        items,
+        ids = [];
 
-          if (b.hasOwnProperty("valueOf")) {
-              a.valueOf = b.valueOf;
+    if (filter) {
+      // get filtered items
+      if (order) {
+        // create ordered list
+        items = [];
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = this._getItem(id, type);
+            if (filter(item)) {
+              items.push(item);
+            }
           }
+        }
 
-          return a;
-      }
-
-      function cloneMoment(m) {
-          var result = {}, i;
-          for (i in m) {
-              if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
-                  result[i] = m[i];
-              }
-          }
+        this._sort(items, order);
 
-          return result;
+        for (i = 0, len = items.length; i < len; i++) {
+          ids[i] = items[i][this._fieldId];
+        }
       }
-
-      function absRound(number) {
-          if (number < 0) {
-              return Math.ceil(number);
-          } else {
-              return Math.floor(number);
+      else {
+        // create unordered list
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = this._getItem(id, type);
+            if (filter(item)) {
+              ids.push(item[this._fieldId]);
+            }
           }
+        }
       }
+    }
+    else {
+      // get all items
+      if (order) {
+        // create an ordered list
+        items = [];
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            items.push(data[id]);
+          }
+        }
 
-      // 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;
+        this._sort(items, order);
 
-          while (output.length < targetLength) {
-              output = '0' + output;
+        for (i = 0, len = items.length; i < len; i++) {
+          ids[i] = items[i][this._fieldId];
+        }
+      }
+      else {
+        // create unordered list
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = data[id];
+            ids.push(item[this._fieldId]);
           }
-          return (sign ? (forceSign ? '+' : '') : '-') + output;
+        }
       }
+    }
 
-      // helper function for _.addTime and _.subtractTime
-      function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) {
-          var milliseconds = duration._milliseconds,
-              days = duration._days,
-              months = duration._months;
-          updateOffset = updateOffset == null ? true : updateOffset;
+    return ids;
+  };
 
-          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);
-          }
-      }
+  /**
+   * Returns the DataSet itself. Is overwritten for example by the DataView,
+   * which returns the DataSet it is connected to instead.
+   */
+  DataSet.prototype.getDataSet = function () {
+    return this;
+  };
 
-      // check if is an array
-      function isArray(input) {
-          return Object.prototype.toString.call(input) === '[object Array]';
-      }
+  /**
+   * Execute a callback function for every item in the dataset.
+   * @param {function} callback
+   * @param {Object} [options]    Available options:
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] filter fields
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   */
+  DataSet.prototype.forEach = function (callback, options) {
+    var filter = options && options.filter,
+        type = options && options.type || this._options.type,
+        data = this._data,
+        item,
+        id;
 
-      function isDate(input) {
-          return  Object.prototype.toString.call(input) === '[object Date]' ||
-                  input instanceof Date;
-      }
+    if (options && options.order) {
+      // execute forEach on ordered list
+      var items = this.get(options);
 
-      // 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;
+      for (var i = 0, len = items.length; i < len; i++) {
+        item = items[i];
+        id = item[this._fieldId];
+        callback(item, id);
       }
-
-      function normalizeUnits(units) {
-          if (units) {
-              var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
-              units = unitAliases[units] || camelFunctions[lowered] || lowered;
+    }
+    else {
+      // unordered
+      for (id in data) {
+        if (data.hasOwnProperty(id)) {
+          item = this._getItem(id, type);
+          if (!filter || filter(item)) {
+            callback(item, id);
           }
-          return units;
+        }
       }
+    }
+  };
 
-      function normalizeObjectUnits(inputObject) {
-          var normalizedInput = {},
-              normalizedProp,
-              prop;
-
-          for (prop in inputObject) {
-              if (inputObject.hasOwnProperty(prop)) {
-                  normalizedProp = normalizeUnits(prop);
-                  if (normalizedProp) {
-                      normalizedInput[normalizedProp] = inputObject[prop];
-                  }
-              }
-          }
+  /**
+   * Map every item in the dataset.
+   * @param {function} callback
+   * @param {Object} [options]    Available options:
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] filter fields
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Object[]} mappedItems
+   */
+  DataSet.prototype.map = function (callback, options) {
+    var filter = options && options.filter,
+        type = options && options.type || this._options.type,
+        mappedItems = [],
+        data = this._data,
+        item;
 
-          return normalizedInput;
+    // convert and filter items
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        item = this._getItem(id, type);
+        if (!filter || filter(item)) {
+          mappedItems.push(callback(item, id));
+        }
       }
+    }
 
-      function makeList(field) {
-          var count, setter;
-
-          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.fn._lang[field],
-                  results = [];
+    // order items
+    if (options && options.order) {
+      this._sort(mappedItems, options.order);
+    }
 
-              if (typeof format === 'number') {
-                  index = format;
-                  format = undefined;
-              }
+    return mappedItems;
+  };
 
-              getter = function (i) {
-                  var m = moment().utc().set(setter, i);
-                  return method.call(moment.fn._lang, m, format || '');
-              };
+  /**
+   * Filter the fields of an item
+   * @param {Object} item
+   * @param {String[]} fields     Field names
+   * @return {Object} filteredItem
+   * @private
+   */
+  DataSet.prototype._filterFields = function (item, fields) {
+    var filteredItem = {};
 
-              if (index != null) {
-                  return getter(index);
-              }
-              else {
-                  for (i = 0; i < count; i++) {
-                      results.push(getter(i));
-                  }
-                  return results;
-              }
-          };
+    for (var field in item) {
+      if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
+        filteredItem[field] = item[field];
       }
+    }
 
-      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);
-              }
-          }
-
-          return value;
-      }
+    return filteredItem;
+  };
 
-      function daysInMonth(year, month) {
-          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
-      }
+  /**
+   * Sort the provided array with items
+   * @param {Object[]} items
+   * @param {String | function} order      A field name or custom sort function.
+   * @private
+   */
+  DataSet.prototype._sort = function (items, order) {
+    if (util.isString(order)) {
+      // order by provided field name
+      var name = order; // field name
+      items.sort(function (a, b) {
+        var av = a[name];
+        var bv = b[name];
+        return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
+      });
+    }
+    else if (typeof order === 'function') {
+      // order by sort function
+      items.sort(order);
+    }
+    // TODO: extend order by an Object {field:String, direction:String}
+    //       where direction can be 'asc' or 'desc'
+    else {
+      throw new TypeError('Order must be a function or a string');
+    }
+  };
 
-      function weeksInYear(year, dow, doy) {
-          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
-      }
+  /**
+   * Remove an object by pointer or by id
+   * @param {String | Number | Object | Array} id Object or id, or an array with
+   *                                              objects or ids to be removed
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} removedIds
+   */
+  DataSet.prototype.remove = function (id, senderId) {
+    var removedIds = [],
+        i, len, removedId;
 
-      function daysInYear(year) {
-          return isLeapYear(year) ? 366 : 365;
+    if (Array.isArray(id)) {
+      for (i = 0, len = id.length; i < len; i++) {
+        removedId = this._remove(id[i]);
+        if (removedId != null) {
+          removedIds.push(removedId);
+        }
       }
-
-      function isLeapYear(year) {
-          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    }
+    else {
+      removedId = this._remove(id);
+      if (removedId != null) {
+        removedIds.push(removedId);
       }
+    }
 
-      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] > 23 ? 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 (removedIds.length) {
+      this._trigger('remove', {items: removedIds}, senderId);
+    }
 
-              if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
-                  overflow = DATE;
-              }
+    return removedIds;
+  };
 
-              m._pf.overflow = overflow;
-          }
+  /**
+   * Remove an item by its id
+   * @param {Number | String | Object} id   id or item
+   * @returns {Number | String | null} id
+   * @private
+   */
+  DataSet.prototype._remove = function (id) {
+    if (util.isNumber(id) || util.isString(id)) {
+      if (this._data[id]) {
+        delete this._data[id];
+        return id;
       }
-
-      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;
-              }
-          }
-          return m._isValid;
+    }
+    else if (id instanceof Object) {
+      var itemId = id[this._fieldId];
+      if (itemId && this._data[itemId]) {
+        delete this._data[itemId];
+        return itemId;
       }
+    }
+    return null;
+  };
 
-      function normalizeLanguage(key) {
-          return key ? key.toLowerCase().replace('_', '-') : key;
-      }
+  /**
+   * Clear the data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} removedIds    The ids of all removed items
+   */
+  DataSet.prototype.clear = function (senderId) {
+    var ids = Object.keys(this._data);
 
-      // Return a moment from input, that is local/utc/zone equivalent to model.
-      function makeAs(input, model) {
-          return model._isUTC ? moment(input).zone(model._offset || 0) :
-              moment(input).local();
-      }
+    this._data = {};
 
-      /************************************
-          Languages
-      ************************************/
+    this._trigger('remove', {items: ids}, senderId);
 
+    return ids;
+  };
 
-      extend(Language.prototype, {
+  /**
+   * Find the item with maximum value of a specified field
+   * @param {String} field
+   * @return {Object | null} item  Item containing max value, or null if no items
+   */
+  DataSet.prototype.max = function (field) {
+    var data = this._data,
+        max = null,
+        maxField = null;
 
-          set : function (config) {
-              var prop, i;
-              for (i in config) {
-                  prop = config[i];
-                  if (typeof prop === 'function') {
-                      this[i] = prop;
-                  } else {
-                      this['_' + i] = prop;
-                  }
-              }
-          },
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        var item = data[id];
+        var itemField = item[field];
+        if (itemField != null && (!max || itemField > maxField)) {
+          max = item;
+          maxField = itemField;
+        }
+      }
+    }
 
-          _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          months : function (m) {
-              return this._months[m.month()];
-          },
+    return max;
+  };
 
-          _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          monthsShort : function (m) {
-              return this._monthsShort[m.month()];
-          },
+  /**
+   * Find the item with minimum value of a specified field
+   * @param {String} field
+   * @return {Object | null} item  Item containing max value, or null if no items
+   */
+  DataSet.prototype.min = function (field) {
+    var data = this._data,
+        min = null,
+        minField = null;
 
-          monthsParse : function (monthName) {
-              var i, mom, regex;
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        var item = data[id];
+        var itemField = item[field];
+        if (itemField != null && (!min || itemField < minField)) {
+          min = item;
+          minField = itemField;
+        }
+      }
+    }
 
-              if (!this._monthsParse) {
-                  this._monthsParse = [];
-              }
+    return min;
+  };
 
-              for (i = 0; i < 12; i++) {
-                  // make the regex if we don't have it already
-                  if (!this._monthsParse[i]) {
-                      mom = moment.utc([2000, i]);
-                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
-                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
-                  }
-                  // test the regex
-                  if (this._monthsParse[i].test(monthName)) {
-                      return i;
-                  }
-              }
-          },
+  /**
+   * Find all distinct values of a specified field
+   * @param {String} field
+   * @return {Array} values  Array containing all distinct values. If data items
+   *                         do not contain the specified field are ignored.
+   *                         The returned array is unordered.
+   */
+  DataSet.prototype.distinct = function (field) {
+    var data = this._data;
+    var values = [];
+    var fieldType = this._options.type && this._options.type[field] || null;
+    var count = 0;
+    var i;
 
-          _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdays : function (m) {
-              return this._weekdays[m.day()];
-          },
+    for (var prop in data) {
+      if (data.hasOwnProperty(prop)) {
+        var item = data[prop];
+        var value = item[field];
+        var exists = false;
+        for (i = 0; i < count; i++) {
+          if (values[i] == value) {
+            exists = true;
+            break;
+          }
+        }
+        if (!exists && (value !== undefined)) {
+          values[count] = value;
+          count++;
+        }
+      }
+    }
 
-          _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysShort : function (m) {
-              return this._weekdaysShort[m.day()];
-          },
+    if (fieldType) {
+      for (i = 0; i < values.length; i++) {
+        values[i] = util.convert(values[i], fieldType);
+      }
+    }
 
-          _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          weekdaysMin : function (m) {
-              return this._weekdaysMin[m.day()];
-          },
+    return values;
+  };
 
-          weekdaysParse : function (weekdayName) {
-              var i, mom, regex;
+  /**
+   * Add a single item. Will fail when an item with the same id already exists.
+   * @param {Object} item
+   * @return {String} id
+   * @private
+   */
+  DataSet.prototype._addItem = function (item) {
+    var id = item[this._fieldId];
 
-              if (!this._weekdaysParse) {
-                  this._weekdaysParse = [];
-              }
+    if (id != undefined) {
+      // check whether this id is already taken
+      if (this._data[id]) {
+        // item already exists
+        throw new Error('Cannot add item: item with id ' + id + ' already exists');
+      }
+    }
+    else {
+      // generate an id
+      id = util.randomUUID();
+      item[this._fieldId] = id;
+    }
 
-              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;
-                  }
-              }
-          },
+    var d = {};
+    for (var field in item) {
+      if (item.hasOwnProperty(field)) {
+        var fieldType = this._type[field];  // type may be undefined
+        d[field] = util.convert(item[field], fieldType);
+      }
+    }
+    this._data[id] = d;
 
-          _longDateFormat : {
-              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;
-          },
+    return 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');
-          },
+  /**
+   * Get an item. Fields can be converted to a specific type
+   * @param {String} id
+   * @param {Object.<String, String>} [types]  field types to convert
+   * @return {Object | null} item
+   * @private
+   */
+  DataSet.prototype._getItem = function (id, types) {
+    var field, value;
 
-          _meridiemParse : /[ap]\.?m?\.?/i,
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'pm' : 'PM';
-              } else {
-                  return isLower ? 'am' : 'AM';
-              }
-          },
+    // get the item from the dataset
+    var raw = this._data[id];
+    if (!raw) {
+      return null;
+    }
 
-          _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) {
-              var output = this._calendar[key];
-              return typeof output === 'function' ? output.apply(mom) : output;
-          },
+    // convert the items field types
+    var converted = {};
+    if (types) {
+      for (field in raw) {
+        if (raw.hasOwnProperty(field)) {
+          value = raw[field];
+          converted[field] = util.convert(value, types[field]);
+        }
+      }
+    }
+    else {
+      // no field types specified, no converting needed
+      for (field in raw) {
+        if (raw.hasOwnProperty(field)) {
+          value = raw[field];
+          converted[field] = value;
+        }
+      }
+    }
+    return converted;
+  };
+
+  /**
+   * Update a single item: merge with existing item.
+   * Will fail when the item has no id, or when there does not exist an item
+   * with the same id.
+   * @param {Object} item
+   * @return {String} id
+   * @private
+   */
+  DataSet.prototype._updateItem = function (item) {
+    var id = item[this._fieldId];
+    if (id == undefined) {
+      throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
+    }
+    var d = this._data[id];
+    if (!d) {
+      // item doesn't exist
+      throw new Error('Cannot update item: no item with id ' + id + ' found');
+    }
 
-          _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);
-          },
-          pastFuture : function (diff, output) {
-              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
-              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
-          },
+    // merge with current item
+    for (var field in item) {
+      if (item.hasOwnProperty(field)) {
+        var fieldType = this._type[field];  // type may be undefined
+        d[field] = util.convert(item[field], fieldType);
+      }
+    }
 
-          ordinal : function (number) {
-              return this._ordinal.replace("%d", number);
-          },
-          _ordinal : "%d",
+    return id;
+  };
 
-          preparse : function (string) {
-              return string;
-          },
+  /**
+   * Get an array with the column names of a Google DataTable
+   * @param {DataTable} dataTable
+   * @return {String[]} columnNames
+   * @private
+   */
+  DataSet.prototype._getColumnNames = function (dataTable) {
+    var columns = [];
+    for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
+      columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
+    }
+    return columns;
+  };
 
-          postformat : function (string) {
-              return string;
-          },
+  /**
+   * Append an item as a row to the dataTable
+   * @param dataTable
+   * @param columns
+   * @param item
+   * @private
+   */
+  DataSet.prototype._appendRow = function (dataTable, columns, item) {
+    var row = dataTable.addRow();
 
-          week : function (mom) {
-              return weekOfYear(mom, this._week.dow, this._week.doy).week;
-          },
+    for (var col = 0, cols = columns.length; col < cols; col++) {
+      var field = columns[col];
+      dataTable.setValue(row, col, item[field]);
+    }
+  };
 
-          _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.
-          },
+  module.exports = DataSet;
 
-          _invalidDate: 'Invalid date',
-          invalidDate: function () {
-              return this._invalidDate;
-          }
-      });
 
-      // Loads a language definition into the `languages` cache.  The function
-      // takes a key and optionally values.  If not in the browser and no values
-      // are provided, it will load the language file module.  As a convenience,
-      // this function also returns the language values.
-      function loadLang(key, values) {
-          values.abbr = key;
-          if (!languages[key]) {
-              languages[key] = new Language();
-          }
-          languages[key].set(values);
-          return languages[key];
-      }
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // Remove a language from the `languages` cache. Mostly useful in tests.
-      function unloadLang(key) {
-          delete languages[key];
-      }
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(3);
 
-      // Determines which language definition to use and returns it.
-      //
-      // With no parameters, it will return the global language.  If you
-      // pass in a language key, such as 'en', it will return the
-      // definition for 'en', so long as 'en' has already been loaded using
-      // moment.lang.
-      function getLangDefinition(key) {
-          var i = 0, j, lang, next, split,
-              get = function (k) {
-                  if (!languages[k] && hasModule) {
-                      try {
-                          __webpack_require__(6)("./" + k);
-                      } catch (e) { }
-                  }
-                  return languages[k];
-              };
+  /**
+   * DataView
+   *
+   * a dataview offers a filtered view on a dataset or an other dataview.
+   *
+   * @param {DataSet | DataView} data
+   * @param {Object} [options]   Available options: see method get
+   *
+   * @constructor DataView
+   */
+  function DataView (data, options) {
+    this._data = null;
+    this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
+    this._options = options || {};
+    this._fieldId = 'id'; // name of the field containing id
+    this._subscribers = {}; // event subscribers
 
-          if (!key) {
-              return moment.fn._lang;
-          }
+    var me = this;
+    this.listener = function () {
+      me._onEvent.apply(me, arguments);
+    };
 
-          if (!isArray(key)) {
-              //short-circuit everything else
-              lang = get(key);
-              if (lang) {
-                  return lang;
-              }
-              key = [key];
-          }
+    this.setData(data);
+  }
 
-          //pick the language 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
-          while (i < key.length) {
-              split = normalizeLanguage(key[i]).split('-');
-              j = split.length;
-              next = normalizeLanguage(key[i + 1]);
-              next = next ? next.split('-') : null;
-              while (j > 0) {
-                  lang = get(split.slice(0, j).join('-'));
-                  if (lang) {
-                      return lang;
-                  }
-                  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 moment.fn._lang;
-      }
+  // TODO: implement a function .config() to dynamically update things like configured filter
+  // and trigger changes accordingly
 
-      /************************************
-          Formatting
-      ************************************/
+  /**
+   * Set a data source for the view
+   * @param {DataSet | DataView} data
+   */
+  DataView.prototype.setData = function (data) {
+    var ids, i, len;
 
+    if (this._data) {
+      // unsubscribe from current dataset
+      if (this._data.unsubscribe) {
+        this._data.unsubscribe('*', this.listener);
+      }
 
-      function removeFormattingTokens(input) {
-          if (input.match(/\[[\s\S]/)) {
-              return input.replace(/^\[|\]$/g, "");
-          }
-          return input.replace(/\\/g, "");
+      // trigger a remove of all items in memory
+      ids = [];
+      for (var id in this._ids) {
+        if (this._ids.hasOwnProperty(id)) {
+          ids.push(id);
+        }
       }
+      this._ids = {};
+      this._trigger('remove', {items: ids});
+    }
 
-      function makeFormatFunction(format) {
-          var array = format.match(formattingTokens), i, length;
+    this._data = data;
 
-          for (i = 0, length = array.length; i < length; i++) {
-              if (formatTokenFunctions[array[i]]) {
-                  array[i] = formatTokenFunctions[array[i]];
-              } else {
-                  array[i] = removeFormattingTokens(array[i]);
-              }
-          }
+    if (this._data) {
+      // update fieldId
+      this._fieldId = this._options.fieldId ||
+          (this._data && this._data.options && this._data.options.fieldId) ||
+          'id';
 
-          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;
-          };
+      // trigger an add of all added items
+      ids = this._data.getIds({filter: this._options && this._options.filter});
+      for (i = 0, len = ids.length; i < len; i++) {
+        id = ids[i];
+        this._ids[id] = true;
       }
+      this._trigger('add', {items: ids});
 
-      // format date using native date object
-      function formatMoment(m, format) {
+      // subscribe to new dataset
+      if (this._data.on) {
+        this._data.on('*', this.listener);
+      }
+    }
+  };
 
-          if (!m.isValid()) {
-              return m.lang().invalidDate();
-          }
+  /**
+   * Get data from the data view
+   *
+   * Usage:
+   *
+   *     get()
+   *     get(options: Object)
+   *     get(options: Object, data: Array | DataTable)
+   *
+   *     get(id: Number)
+   *     get(id: Number, options: Object)
+   *     get(id: Number, options: Object, data: Array | DataTable)
+   *
+   *     get(ids: Number[])
+   *     get(ids: Number[], options: Object)
+   *     get(ids: Number[], options: Object, data: Array | DataTable)
+   *
+   * Where:
+   *
+   * {Number | String} id         The id of an item
+   * {Number[] | String{}} ids    An array with ids of items
+   * {Object} options             An Object with options. Available options:
+   *                              {String} [type] Type of data to be returned. Can
+   *                                              be 'DataTable' or 'Array' (default)
+   *                              {Object.<String, String>} [convert]
+   *                              {String[]} [fields] field names to be returned
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * {Array | DataTable} [data]   If provided, items will be appended to this
+   *                              array or table. Required in case of Google
+   *                              DataTable.
+   * @param args
+   */
+  DataView.prototype.get = function (args) {
+    var me = this;
 
-          format = expandFormat(format, m.lang());
+    // parse the arguments
+    var ids, options, data;
+    var firstType = util.getType(arguments[0]);
+    if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
+      // get(id(s) [, options] [, data])
+      ids = arguments[0];  // can be a single id or an array with ids
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else {
+      // get([, options] [, data])
+      options = arguments[0];
+      data = arguments[1];
+    }
 
-          if (!formatFunctions[format]) {
-              formatFunctions[format] = makeFormatFunction(format);
-          }
+    // extend the options with the default options and provided options
+    var viewOptions = util.extend({}, this._options, options);
 
-          return formatFunctions[format](m);
+    // create a combined filter method when needed
+    if (this._options.filter && options && options.filter) {
+      viewOptions.filter = function (item) {
+        return me._options.filter(item) && options.filter(item);
       }
+    }
 
-      function expandFormat(format, lang) {
-          var i = 5;
+    // build up the call to the linked data set
+    var getArguments = [];
+    if (ids != undefined) {
+      getArguments.push(ids);
+    }
+    getArguments.push(viewOptions);
+    getArguments.push(data);
 
-          function replaceLongDateFormatTokens(input) {
-              return lang.longDateFormat(input) || input;
-          }
+    return this._data && this._data.get.apply(this._data, getArguments);
+  };
 
-          localFormattingTokens.lastIndex = 0;
-          while (i >= 0 && localFormattingTokens.test(format)) {
-              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
-              localFormattingTokens.lastIndex = 0;
-              i -= 1;
-          }
+  /**
+   * Get ids of all items or from a filtered set of items.
+   * @param {Object} [options]    An Object with options. Available options:
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Array} ids
+   */
+  DataView.prototype.getIds = function (options) {
+    var ids;
 
-          return format;
+    if (this._data) {
+      var defaultFilter = this._options.filter;
+      var filter;
+
+      if (options && options.filter) {
+        if (defaultFilter) {
+          filter = function (item) {
+            return defaultFilter(item) && options.filter(item);
+          }
+        }
+        else {
+          filter = options.filter;
+        }
+      }
+      else {
+        filter = defaultFilter;
       }
 
+      ids = this._data.getIds({
+        filter: filter,
+        order: options && options.order
+      });
+    }
+    else {
+      ids = [];
+    }
+
+    return ids;
+  };
 
-      /************************************
-          Parsing
-      ************************************/
+  /**
+   * Get the DataSet to which this DataView is connected. In case there is a chain
+   * of multiple DataViews, the root DataSet of this chain is returned.
+   * @return {DataSet} dataSet
+   */
+  DataView.prototype.getDataSet = function () {
+    var dataSet = this;
+    while (dataSet instanceof DataView) {
+      dataSet = dataSet._data;
+    }
+    return dataSet || null;
+  };
 
+  /**
+   * Event listener. Will propagate all events from the connected data set to
+   * the subscribers of the DataView, but will filter the items and only trigger
+   * when there are changes in the filtered data set.
+   * @param {String} event
+   * @param {Object | null} params
+   * @param {String} senderId
+   * @private
+   */
+  DataView.prototype._onEvent = function (event, params, senderId) {
+    var i, len, id, item,
+        ids = params && params.items,
+        data = this._data,
+        added = [],
+        updated = [],
+        removed = [];
 
-      // 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 getLangDefinition(config._l)._meridiemParse;
-          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 parseTokenOrdinal;
-          default :
-              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
-              return a;
+    if (ids && data) {
+      switch (event) {
+        case 'add':
+          // filter the ids of the added items
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            item = this.get(id);
+            if (item) {
+              this._ids[id] = true;
+              added.push(id);
+            }
           }
-      }
-
-      function timezoneMinutesFromString(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;
-      }
+          break;
 
-      // function to convert string input to date
-      function addTimeToArrayFromToken(token, input, config) {
-          var a, datePartArray = config._a;
+        case 'update':
+          // determine the event from the views viewpoint: an updated
+          // item can be added, updated, or removed from this view.
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            item = this.get(id);
 
-          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 = getLangDefinition(config._l).monthsParse(input);
-              // if we didn't find a month name, mark the date as invalid.
-              if (a != null) {
-                  datePartArray[MONTH] = a;
-              } else {
-                  config._pf.invalidMonth = input;
+            if (item) {
+              if (this._ids[id]) {
+                updated.push(id);
               }
-              break;
-          // DAY OF MONTH
-          case 'D' : // fall through to DD
-          case 'DD' :
-              if (input != null) {
-                  datePartArray[DATE] = toInt(input);
+              else {
+                this._ids[id] = true;
+                added.push(id);
               }
-              break;
-          case 'Do' :
-              if (input != null) {
-                  datePartArray[DATE] = toInt(parseInt(input, 10));
+            }
+            else {
+              if (this._ids[id]) {
+                delete this._ids[id];
+                removed.push(id);
               }
-              break;
-          // DAY OF YEAR
-          case 'DDD' : // fall through to DDDD
-          case 'DDDD' :
-              if (input != null) {
-                  config._dayOfYear = toInt(input);
+              else {
+                // nothing interesting for me :-(
               }
+            }
+          }
 
-              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._isPm = getLangDefinition(config._l).isPM(input);
-              break;
-          // 24 HOUR
-          case 'H' : // fall through to hh
-          case 'HH' : // fall through to hh
-          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 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 = timezoneMinutesFromString(input);
-              break;
-          // WEEKDAY - human
-          case 'dd':
-          case 'ddd':
-          case 'dddd':
-              a = getLangDefinition(config._l).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);
+          break;
+
+        case 'remove':
+          // filter the ids of the removed items
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            if (this._ids[id]) {
+              delete this._ids[id];
+              removed.push(id);
+            }
           }
+
+          break;
       }
 
-      function dayOfYearFromWeekInfo(config) {
-          var w, weekYear, week, weekday, dow, doy, temp, lang;
+      if (added.length) {
+        this._trigger('add', {items: added}, senderId);
+      }
+      if (updated.length) {
+        this._trigger('update', {items: updated}, senderId);
+      }
+      if (removed.length) {
+        this._trigger('remove', {items: removed}, senderId);
+      }
+    }
+  };
 
-          w = config._w;
-          if (w.GG != null || w.W != null || w.E != null) {
-              dow = 1;
-              doy = 4;
+  // copy subscription functionality from DataSet
+  DataView.prototype.on = DataSet.prototype.on;
+  DataView.prototype.off = DataSet.prototype.off;
+  DataView.prototype._trigger = DataSet.prototype._trigger;
 
-              // 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 {
-              lang = getLangDefinition(config._l);
-              dow = lang._week.dow;
-              doy = lang._week.doy;
+  // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
+  DataView.prototype.subscribe = DataView.prototype.on;
+  DataView.prototype.unsubscribe = DataView.prototype.off;
 
-              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
-              week = dfl(w.w, 1);
+  module.exports = DataView;
 
-              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);
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
 
-          config._a[YEAR] = temp.year;
-          config._dayOfYear = temp.dayOfYear;
+  var Emitter = __webpack_require__(41);
+  var Hammer = __webpack_require__(49);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Range = __webpack_require__(8);
+  var TimeAxis = __webpack_require__(21);
+  var CurrentTime = __webpack_require__(13);
+  var CustomTime = __webpack_require__(14);
+  var ItemSet = __webpack_require__(18);
+
+  /**
+   * Create a timeline visualization
+   * @param {HTMLElement} container
+   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
+   * @param {Object} [options]  See Timeline.setOptions for the available options.
+   * @constructor
+   */
+  function Timeline (container, items, options) {
+    if (!(this instanceof Timeline)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
+    }
+
+    var me = this;
+    this.defaultOptions = {
+      start: null,
+      end:   null,
+
+      autoResize: true,
+
+      orientation: 'bottom',
+      width: null,
+      height: null,
+      maxHeight: null,
+      minHeight: null
+    };
+    this.options = util.deepExtend({}, this.defaultOptions);
+
+    // Create the DOM, props, and emitter
+    this._create(container);
+
+    // all components listed here will be repainted automatically
+    this.components = [];
+
+    this.body = {
+      dom: this.dom,
+      domProps: this.props,
+      emitter: {
+        on: this.on.bind(this),
+        off: this.off.bind(this),
+        emit: this.emit.bind(this)
+      },
+      util: {
+        snap: null, // will be specified after TimeAxis is created
+        toScreen: me._toScreen.bind(me),
+        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+        toTime: me._toTime.bind(me),
+        toGlobalTime : me._toGlobalTime.bind(me)
       }
+    };
 
-      // 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;
+    // range
+    this.range = new Range(this.body);
+    this.components.push(this.range);
+    this.body.range = this.range;
 
-          if (config._d) {
-              return;
-          }
+    // time axis
+    this.timeAxis = new TimeAxis(this.body);
+    this.components.push(this.timeAxis);
+    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
 
-          currentDate = currentDateArray(config);
+    // current time bar
+    this.currentTime = new CurrentTime(this.body);
+    this.components.push(this.currentTime);
 
-          //compute day of the year from weeks and weekdays
-          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
-              dayOfYearFromWeekInfo(config);
-          }
+    // custom time bar
+    // Note: time bar will be attached in this.setOptions when selected
+    this.customTime = new CustomTime(this.body);
+    this.components.push(this.customTime);
 
-          //if the day of the year is set, figure out what it is
-          if (config._dayOfYear) {
-              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
+    // item set
+    this.itemSet = new ItemSet(this.body);
+    this.components.push(this.itemSet);
 
-              if (config._dayOfYear > daysInYear(yearToUse)) {
-                  config._pf._overflowDayOfYear = true;
-              }
+    this.itemsData = null;      // DataSet
+    this.groupsData = null;     // DataSet
 
-              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
-              config._a[MONTH] = date.getUTCMonth();
-              config._a[DATE] = date.getUTCDate();
-          }
+    // apply options
+    if (options) {
+      this.setOptions(options);
+    }
 
-          // 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];
-          }
+    // create itemset
+    if (items) {
+      this.setItems(items);
+    }
+    else {
+      this.redraw();
+    }
+  }
 
-          // 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];
-          }
+  // turn Timeline into an event emitter
+  Emitter(Timeline.prototype);
 
-          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
-          // Apply timezone offset from input. The actual zone can be changed
-          // with parseZone.
-          if (config._tzm != null) {
-              config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
-          }
-      }
+  /**
+   * Create the main DOM for the Timeline: a root panel containing left, right,
+   * top, bottom, content, and background panel.
+   * @param {Element} container  The container element where the Timeline will
+   *                             be attached.
+   * @private
+   */
+  Timeline.prototype._create = function (container) {
+    this.dom = {};
 
-      function dateFromObject(config) {
-          var normalizedInput;
+    this.dom.root                 = document.createElement('div');
+    this.dom.background           = document.createElement('div');
+    this.dom.backgroundVertical   = document.createElement('div');
+    this.dom.backgroundHorizontal = document.createElement('div');
+    this.dom.centerContainer      = document.createElement('div');
+    this.dom.leftContainer        = document.createElement('div');
+    this.dom.rightContainer       = document.createElement('div');
+    this.dom.center               = document.createElement('div');
+    this.dom.left                 = document.createElement('div');
+    this.dom.right                = document.createElement('div');
+    this.dom.top                  = document.createElement('div');
+    this.dom.bottom               = document.createElement('div');
+    this.dom.shadowTop            = document.createElement('div');
+    this.dom.shadowBottom         = document.createElement('div');
+    this.dom.shadowTopLeft        = document.createElement('div');
+    this.dom.shadowBottomLeft     = document.createElement('div');
+    this.dom.shadowTopRight       = document.createElement('div');
+    this.dom.shadowBottomRight    = document.createElement('div');
 
-          if (config._d) {
-              return;
-          }
+    this.dom.background.className           = 'vispanel background';
+    this.dom.backgroundVertical.className   = 'vispanel background vertical';
+    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
+    this.dom.centerContainer.className      = 'vispanel center';
+    this.dom.leftContainer.className        = 'vispanel left';
+    this.dom.rightContainer.className       = 'vispanel right';
+    this.dom.top.className                  = 'vispanel top';
+    this.dom.bottom.className               = 'vispanel bottom';
+    this.dom.left.className                 = 'content';
+    this.dom.center.className               = 'content';
+    this.dom.right.className                = 'content';
+    this.dom.shadowTop.className            = 'shadow top';
+    this.dom.shadowBottom.className         = 'shadow bottom';
+    this.dom.shadowTopLeft.className        = 'shadow top';
+    this.dom.shadowBottomLeft.className     = 'shadow bottom';
+    this.dom.shadowTopRight.className       = 'shadow top';
+    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-          normalizedInput = normalizeObjectUnits(config._i);
-          config._a = [
-              normalizedInput.year,
-              normalizedInput.month,
-              normalizedInput.day,
-              normalizedInput.hour,
-              normalizedInput.minute,
-              normalizedInput.second,
-              normalizedInput.millisecond
-          ];
+    this.dom.root.appendChild(this.dom.background);
+    this.dom.root.appendChild(this.dom.backgroundVertical);
+    this.dom.root.appendChild(this.dom.backgroundHorizontal);
+    this.dom.root.appendChild(this.dom.centerContainer);
+    this.dom.root.appendChild(this.dom.leftContainer);
+    this.dom.root.appendChild(this.dom.rightContainer);
+    this.dom.root.appendChild(this.dom.top);
+    this.dom.root.appendChild(this.dom.bottom);
 
-          dateFromConfig(config);
-      }
+    this.dom.centerContainer.appendChild(this.dom.center);
+    this.dom.leftContainer.appendChild(this.dom.left);
+    this.dom.rightContainer.appendChild(this.dom.right);
 
-      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.dom.centerContainer.appendChild(this.dom.shadowTop);
+    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
+    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
+    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
+    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
+    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-      // date from string and format string
-      function makeDateFromStringAndFormat(config) {
+    this.on('rangechange', this.redraw.bind(this));
+    this.on('change', this.redraw.bind(this));
+    this.on('touch', this._onTouch.bind(this));
+    this.on('pinch', this._onPinch.bind(this));
+    this.on('dragstart', this._onDragStart.bind(this));
+    this.on('drag', this._onDrag.bind(this));
 
-          if (config._f === moment.ISO_8601) {
-              parseISO(config);
-              return;
-          }
+    // create event listeners for all interesting events, these events will be
+    // emitted via emitter
+    this.hammer = Hammer(this.dom.root, {
+      prevent_default: true
+    });
+    this.listeners = {};
 
-          config._a = [];
-          config._pf.empty = true;
+    var me = this;
+    var events = [
+      'touch', 'pinch',
+      'tap', 'doubletap', 'hold',
+      'dragstart', 'drag', 'dragend',
+      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    ];
+    events.forEach(function (event) {
+      var listener = function () {
+        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
+        me.emit.apply(me, args);
+      };
+      me.hammer.on(event, listener);
+      me.listeners[event] = listener;
+    });
+
+    // size properties of each of the panels
+    this.props = {
+      root: {},
+      background: {},
+      centerContainer: {},
+      leftContainer: {},
+      rightContainer: {},
+      center: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {},
+      border: {},
+      scrollTop: 0,
+      scrollTopMin: 0
+    };
+    this.touch = {}; // store state information needed for touch events
+
+    // attach the root panel to the provided container
+    if (!container) throw new Error('No container provided');
+    container.appendChild(this.dom.root);
+  };
+
+  /**
+   * Destroy the Timeline, clean up all DOM elements and event listeners.
+   */
+  Timeline.prototype.destroy = function () {
+    // unbind datasets
+    this.clear();
+
+    // remove all event listeners
+    this.off();
+
+    // stop checking for changed size
+    this._stopAutoResize();
+
+    // remove from DOM
+    if (this.dom.root.parentNode) {
+      this.dom.root.parentNode.removeChild(this.dom.root);
+    }
+    this.dom = null;
+
+    // cleanup hammer touch events
+    for (var event in this.listeners) {
+      if (this.listeners.hasOwnProperty(event)) {
+        delete this.listeners[event];
+      }
+    }
+    this.listeners = null;
+    this.hammer = null;
 
-          // This array is used to make a Date, either with `new Date` or `Date.UTC`
-          var lang = getLangDefinition(config._l),
-              string = '' + config._i,
-              i, parsedInput, tokens, token, skipped,
-              stringLength = string.length,
-              totalParsedInputLength = 0;
+    // give all components the opportunity to cleanup
+    this.components.forEach(function (component) {
+      component.destroy();
+    });
 
-          tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
+    this.body = null;
+  };
 
-          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);
-              }
-          }
+  /**
+   * Set options. Options will be passed to all components loaded in the Timeline.
+   * @param {Object} [options]
+   *                           {String} orientation
+   *                              Vertical orientation for the Timeline,
+   *                              can be 'bottom' (default) or 'top'.
+   *                           {String | Number} width
+   *                              Width for the timeline, a number in pixels or
+   *                              a css string like '1000px' or '75%'. '100%' by default.
+   *                           {String | Number} height
+   *                              Fixed height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'. If undefined,
+   *                              The Timeline will automatically size such that
+   *                              its contents fit.
+   *                           {String | Number} minHeight
+   *                              Minimum height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {String | Number} maxHeight
+   *                              Maximum height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {Number | Date | String} start
+   *                              Start date for the visible window
+   *                           {Number | Date | String} end
+   *                              End date for the visible window
+   */
+  Timeline.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the known options
+      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
+      util.selectiveExtend(fields, this.options, options);
 
-          // add remaining unparsed input length to the string
-          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
-          if (string.length > 0) {
-              config._pf.unusedInput.push(string);
-          }
+      // enable/disable autoResize
+      this._initAutoResize();
+    }
 
-          // handle am pm
-          if (config._isPm && config._a[HOUR] < 12) {
-              config._a[HOUR] += 12;
-          }
-          // if is 12 am, change hours to 0
-          if (config._isPm === false && config._a[HOUR] === 12) {
-              config._a[HOUR] = 0;
-          }
+    // propagate options to all components
+    this.components.forEach(function (component) {
+      component.setOptions(options);
+    });
 
-          dateFromConfig(config);
-          checkOverflow(config);
-      }
+    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+    if (options && options.order) {
+      throw new Error('Option order is deprecated. There is no replacement for this feature.');
+    }
 
-      function unescapeFormat(s) {
-          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
-              return p1 || p2 || p3 || p4;
-          });
-      }
+    // redraw everything
+    this.redraw();
+  };
 
-      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
-      function regexpEscape(s) {
-          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-      }
+  /**
+   * Set a custom time bar
+   * @param {Date} time
+   */
+  Timeline.prototype.setCustomTime = function (time) {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+    }
 
-      // date from string and array of format strings
-      function makeDateFromStringAndArray(config) {
-          var tempConfig,
-              bestMoment,
+    this.customTime.setCustomTime(time);
+  };
 
-              scoreToBeat,
-              i,
-              currentScore;
+  /**
+   * Retrieve the current custom time.
+   * @return {Date} customTime
+   */
+  Timeline.prototype.getCustomTime = function() {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+    }
 
-          if (config._f.length === 0) {
-              config._pf.invalidFormat = true;
-              config._d = new Date(NaN);
-              return;
-          }
+    return this.customTime.getCustomTime();
+  };
 
-          for (i = 0; i < config._f.length; i++) {
-              currentScore = 0;
-              tempConfig = extend({}, config);
-              tempConfig._pf = defaultParsingFlags();
-              tempConfig._f = config._f[i];
-              makeDateFromStringAndFormat(tempConfig);
+  /**
+   * Set items
+   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
+   */
+  Timeline.prototype.setItems = function(items) {
+    var initialLoad = (this.itemsData == null);
 
-              if (!isValid(tempConfig)) {
-                  continue;
-              }
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!items) {
+      newDataSet = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      newDataSet = items;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(items, {
+        type: {
+          start: 'Date',
+          end: 'Date'
+        }
+      });
+    }
 
-              // if there is any input that was not parsed add a penalty for that format
-              currentScore += tempConfig._pf.charsLeftOver;
+    // set items
+    this.itemsData = newDataSet;
+    this.itemSet && this.itemSet.setItems(newDataSet);
 
-              //or tokens
-              currentScore += tempConfig._pf.unusedTokens.length * 10;
+    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
+      this.fit();
 
-              tempConfig._pf.score = currentScore;
+      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
+      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
 
-              if (scoreToBeat == null || currentScore < scoreToBeat) {
-                  scoreToBeat = currentScore;
-                  bestMoment = tempConfig;
-              }
-          }
+      this.setWindow(start, end);
+    }
+  };
 
-          extend(config, bestMoment || tempConfig);
-      }
+  /**
+   * Set groups
+   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+   */
+  Timeline.prototype.setGroups = function(groups) {
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!groups) {
+      newDataSet = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      newDataSet = groups;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(groups);
+    }
 
-      // date from iso format
-      function parseISO(config) {
-          var i, l,
-              string = config._i,
-              match = isoRegex.exec(string);
+    this.groupsData = newDataSet;
+    this.itemSet.setGroups(newDataSet);
+  };
 
-          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;
-          }
-      }
+  /**
+   * Clear the Timeline. By Default, items, groups and options are cleared.
+   * Example usage:
+   *
+   *     timeline.clear();                // clear items, groups, and options
+   *     timeline.clear({options: true}); // clear options only
+   *
+   * @param {Object} [what]      Optionally specify what to clear. By default:
+   *                             {items: true, groups: true, options: true}
+   */
+  Timeline.prototype.clear = function(what) {
+    // clear items
+    if (!what || what.items) {
+      this.setItems(null);
+    }
 
-      // date from iso format or fallback
-      function makeDateFromString(config) {
-          parseISO(config);
-          if (config._isValid === false) {
-              delete config._isValid;
-              moment.createFromInputFallback(config);
-          }
-      }
+    // clear groups
+    if (!what || what.groups) {
+      this.setGroups(null);
+    }
 
-      function makeDateFromInput(config) {
-          var input = config._i,
-              matched = aspNetJsonRegex.exec(input);
+    // clear options of timeline and of each of the components
+    if (!what || what.options) {
+      this.components.forEach(function (component) {
+        component.setOptions(component.defaultOptions);
+      });
 
-          if (input === undefined) {
-              config._d = new Date();
-          } else if (matched) {
-              config._d = new Date(+matched[1]);
-          } else if (typeof input === 'string') {
-              makeDateFromString(config);
-          } else if (isArray(input)) {
-              config._a = input.slice(0);
-              dateFromConfig(config);
-          } else if (isDate(input)) {
-              config._d = new Date(+input);
-          } else if (typeof(input) === 'object') {
-              dateFromObject(config);
-          } else if (typeof(input) === 'number') {
-              // from milliseconds
-              config._d = new Date(input);
-          } else {
-              moment.createFromInputFallback(config);
-          }
-      }
+      this.setOptions(this.defaultOptions); // this will also do a redraw
+    }
+  };
 
-      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);
+  /**
+   * Set Timeline window such that it fits all items
+   */
+  Timeline.prototype.fit = function() {
+    // apply the data range as range
+    var dataRange = this.getItemRange();
 
-          //the date constructor doesn't accept years < 1970
-          if (y < 1970) {
-              date.setFullYear(y);
-          }
-          return date;
+    // add 5% space on both sides
+    var start = dataRange.min;
+    var end = dataRange.max;
+    if (start != null && end != null) {
+      var interval = (end.valueOf() - start.valueOf());
+      if (interval <= 0) {
+        // prevent an empty interval
+        interval = 24 * 60 * 60 * 1000; // 1 day
       }
+      start = new Date(start.valueOf() - interval * 0.05);
+      end = new Date(end.valueOf() + interval * 0.05);
+    }
 
-      function makeUTCDate(y) {
-          var date = new Date(Date.UTC.apply(null, arguments));
-          if (y < 1970) {
-              date.setUTCFullYear(y);
-          }
-          return date;
-      }
+    // skip range set if there is no start and end date
+    if (start === null && end === null) {
+      return;
+    }
 
-      function parseWeekday(input, language) {
-          if (typeof input === 'string') {
-              if (!isNaN(input)) {
-                  input = parseInt(input, 10);
-              }
-              else {
-                  input = language.weekdaysParse(input);
-                  if (typeof input !== 'number') {
-                      return null;
-                  }
-              }
-          }
-          return input;
-      }
+    this.range.setRange(start, end);
+  };
 
-      /************************************
-          Relative Time
-      ************************************/
+  /**
+   * Get the data range of the item set.
+   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
+   *                                          When no minimum is found, min==null
+   *                                          When no maximum is found, max==null
+   */
+  Timeline.prototype.getItemRange = function() {
+    // calculate min from start filed
+    var dataset = this.itemsData.getDataSet(),
+        min = null,
+        max = null;
 
+    if (dataset) {
+      // calculate the minimum value of the field 'start'
+      var minItem = dataset.min('start');
+      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
+      // Note: we convert first to Date and then to number because else
+      // a conversion from ISODate to Number will fail
 
-      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
-      function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
-          return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+      // calculate maximum value of fields 'start' and 'end'
+      var maxStartItem = dataset.max('start');
+      if (maxStartItem) {
+        max = util.convert(maxStartItem.start, 'Date').valueOf();
       }
-
-      function relativeTime(milliseconds, withoutSuffix, lang) {
-          var seconds = round(Math.abs(milliseconds) / 1000),
-              minutes = round(seconds / 60),
-              hours = round(minutes / 60),
-              days = round(hours / 24),
-              years = round(days / 365),
-              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.dd && ['dd', days] ||
-                  days <= relativeTimeThresholds.dm && ['M'] ||
-                  days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
-                  years === 1 && ['y'] || ['yy', years];
-          args[2] = withoutSuffix;
-          args[3] = milliseconds > 0;
-          args[4] = lang;
-          return substituteTimeAgo.apply({}, args);
+      var maxEndItem = dataset.max('end');
+      if (maxEndItem) {
+        if (max == null) {
+          max = util.convert(maxEndItem.end, 'Date').valueOf();
+        }
+        else {
+          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+        }
       }
+    }
 
+    return {
+      min: (min != null) ? new Date(min) : null,
+      max: (max != null) ? new Date(max) : null
+    };
+  };
 
-      /************************************
-          Week of Year
-      ************************************/
+  /**
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {Array} [ids] An array with zero or more id's of the items to be
+   *                      selected. If ids is an empty array, all items will be
+   *                      unselected.
+   */
+  Timeline.prototype.setSelection = function(ids) {
+    this.itemSet && this.itemSet.setSelection(ids);
+  };
 
+  /**
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
+   */
+  Timeline.prototype.getSelection = function() {
+    return this.itemSet && this.itemSet.getSelection() || [];
+  };
 
-      // 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;
+  /**
+   * Set the visible window. Both parameters are optional, you can change only
+   * start or only end. Syntax:
+   *
+   *     TimeLine.setWindow(start, end)
+   *     TimeLine.setWindow(range)
+   *
+   * Where start and end can be a Date, number, or string, and range is an
+   * object with properties start and end.
+   *
+   * @param {Date | Number | String | Object} [start] Start date of visible window
+   * @param {Date | Number | String} [end]   End date of visible window
+   */
+  Timeline.prototype.setWindow = function(start, end) {
+    if (arguments.length == 1) {
+      var range = arguments[0];
+      this.range.setRange(range.start, range.end);
+    }
+    else {
+      this.range.setRange(start, end);
+    }
+  };
+
+  /**
+   * Get the visible window
+   * @return {{start: Date, end: Date}}   Visible range
+   */
+  Timeline.prototype.getWindow = function() {
+    var range = this.range.getRange();
+    return {
+      start: new Date(range.start),
+      end: new Date(range.end)
+    };
+  };
 
+  /**
+   * Force a redraw of the Timeline. Can be useful to manually redraw when
+   * option autoResize=false
+   */
+  Timeline.prototype.redraw = function() {
+    var resized = false,
+        options = this.options,
+        props = this.props,
+        dom = this.dom;
 
-          if (daysToDayOfWeek > end) {
-              daysToDayOfWeek -= 7;
-          }
+    if (!dom) return; // when destroyed
 
-          if (daysToDayOfWeek < end - 7) {
-              daysToDayOfWeek += 7;
-          }
+    // update class names
+    dom.root.className = 'vis timeline root ' + options.orientation;
 
-          adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
-          return {
-              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
-              year: adjustedMoment.year()
-          };
-      }
+    // update root width and height options
+    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
+    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
+    dom.root.style.width = util.option.asSize(options.width, '');
 
-      //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;
+    // calculate border widths
+    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
+    props.border.right  = props.border.left;
+    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.bottom = props.border.top;
+    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
-          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;
+    // calculate the heights. If any of the side panels is empty, we set the height to
+    // minus the border width, such that the border will be invisible
+    props.center.height = dom.center.offsetHeight;
+    props.left.height   = dom.left.offsetHeight;
+    props.right.height  = dom.right.offsetHeight;
+    props.top.height    = dom.top.clientHeight    || -props.border.top;
+    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
 
-          return {
-              year: dayOfYear > 0 ? year : year - 1,
-              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
-          };
-      }
+    // TODO: compensate borders when any of the panels is empty.
 
-      /************************************
-          Top Level Functions
-      ************************************/
+    // apply auto height
+    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
+    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
+    var autoHeight = props.top.height + contentHeight + props.bottom.height +
+        borderRootHeight + props.border.top + props.border.bottom;
+    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
-      function makeMoment(config) {
-          var input = config._i,
-              format = config._f;
+    // calculate heights of the content panels
+    props.root.height = dom.root.offsetHeight;
+    props.background.height = props.root.height - borderRootHeight;
+    var containerHeight = props.root.height - props.top.height - props.bottom.height -
+        borderRootHeight;
+    props.centerContainer.height  = containerHeight;
+    props.leftContainer.height    = containerHeight;
+    props.rightContainer.height   = props.leftContainer.height;
 
-          if (input === null || (format === undefined && input === '')) {
-              return moment.invalid({nullInput: true});
-          }
+    // calculate the widths of the panels
+    props.root.width = dom.root.offsetWidth;
+    props.background.width = props.root.width - borderRootWidth;
+    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
+    props.leftContainer.width = props.left.width;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    props.rightContainer.width = props.right.width;
+    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
+    props.center.width          = centerWidth;
+    props.centerContainer.width = centerWidth;
+    props.top.width             = centerWidth;
+    props.bottom.width          = centerWidth;
 
-          if (typeof input === 'string') {
-              config._i = input = getLangDefinition().preparse(input);
-          }
+    // resize the panels
+    dom.background.style.height           = props.background.height + 'px';
+    dom.backgroundVertical.style.height   = props.background.height + 'px';
+    dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
+    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
 
-          if (moment.isMoment(input)) {
-              config = cloneMoment(input);
+    dom.background.style.width            = props.background.width + 'px';
+    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+    dom.centerContainer.style.width       = props.center.width + 'px';
+    dom.top.style.width                   = props.top.width + 'px';
+    dom.bottom.style.width                = props.bottom.width + 'px';
 
-              config._d = new Date(+input._d);
-          } else if (format) {
-              if (isArray(format)) {
-                  makeDateFromStringAndArray(config);
-              } else {
-                  makeDateFromStringAndFormat(config);
-              }
-          } else {
-              makeDateFromInput(config);
-          }
+    // reposition the panels
+    dom.background.style.left           = '0';
+    dom.background.style.top            = '0';
+    dom.backgroundVertical.style.left   = props.left.width + 'px';
+    dom.backgroundVertical.style.top    = '0';
+    dom.backgroundHorizontal.style.left = '0';
+    dom.backgroundHorizontal.style.top  = props.top.height + 'px';
+    dom.centerContainer.style.left      = props.left.width + 'px';
+    dom.centerContainer.style.top       = props.top.height + 'px';
+    dom.leftContainer.style.left        = '0';
+    dom.leftContainer.style.top         = props.top.height + 'px';
+    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+    dom.rightContainer.style.top        = props.top.height + 'px';
+    dom.top.style.left                  = props.left.width + 'px';
+    dom.top.style.top                   = '0';
+    dom.bottom.style.left               = props.left.width + 'px';
+    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
 
-          return new Moment(config);
-      }
+    // update the scrollTop, feasible range for the offset can be changed
+    // when the height of the Timeline or of the contents of the center changed
+    this._updateScrollTop();
 
-      moment = function (input, format, lang, strict) {
-          var c;
+    // reposition the scrollable contents
+    var offset = this.props.scrollTop;
+    if (options.orientation == 'bottom') {
+      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
+          this.props.border.top - this.props.border.bottom, 0);
+    }
+    dom.center.style.left = '0';
+    dom.center.style.top  = offset + 'px';
+    dom.left.style.left   = '0';
+    dom.left.style.top    = offset + 'px';
+    dom.right.style.left  = '0';
+    dom.right.style.top   = offset + 'px';
 
-          if (typeof(lang) === "boolean") {
-              strict = lang;
-              lang = 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 = lang;
-          c._strict = strict;
-          c._isUTC = false;
-          c._pf = defaultParsingFlags();
+    // show shadows when vertical scrolling is available
+    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
+    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+    dom.shadowTop.style.visibility          = visibilityTop;
+    dom.shadowBottom.style.visibility       = visibilityBottom;
+    dom.shadowTopLeft.style.visibility      = visibilityTop;
+    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
+    dom.shadowTopRight.style.visibility     = visibilityTop;
+    dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
-          return makeMoment(c);
-      };
+    // redraw all components
+    this.components.forEach(function (component) {
+      resized = component.redraw() || resized;
+    });
+    if (resized) {
+      // keep repainting until all sizes are settled
+      this.redraw();
+    }
+  };
 
-      moment.suppressDeprecationWarnings = false;
+  // TODO: deprecated since version 1.1.0, remove some day
+  Timeline.prototype.repaint = function () {
+      throw new Error('Function repaint is deprecated. Use redraw instead.');
+  };
 
-      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);
-      });
+  /**
+   * Convert a position on screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toTime = function(x) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return new Date(x / conversion.scale + conversion.offset);
+  };
 
-      // 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;
-      }
 
-      moment.min = function () {
-          var args = [].slice.call(arguments, 0);
+  /**
+   * Convert a position on the global screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toGlobalTime = function(x) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return new Date(x / conversion.scale + conversion.offset);
+  };
 
-          return pickBy('isBefore', args);
-      };
+  /**
+   * Convert a datetime (Date object) into a position on the screen
+   * @param {Date}   time A date
+   * @return {int}   x    The position on the screen in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toScreen = function(time) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-      moment.max = function () {
-          var args = [].slice.call(arguments, 0);
 
-          return pickBy('isAfter', args);
-      };
+  /**
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toGlobalScreen = function(time) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-      // creating with utc
-      moment.utc = function (input, format, lang, strict) {
-          var c;
 
-          if (typeof(lang) === "boolean") {
-              strict = lang;
-              lang = 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 = lang;
-          c._i = input;
-          c._f = format;
-          c._strict = strict;
-          c._pf = defaultParsingFlags();
+  /**
+   * Initialize watching when option autoResize is true
+   * @private
+   */
+  Timeline.prototype._initAutoResize = function () {
+    if (this.options.autoResize == true) {
+      this._startAutoResize();
+    }
+    else {
+      this._stopAutoResize();
+    }
+  };
 
-          return makeMoment(c).utc();
-      };
+  /**
+   * Watch for changes in the size of the container. On resize, the Panel will
+   * automatically redraw itself.
+   * @private
+   */
+  Timeline.prototype._startAutoResize = function () {
+    var me = this;
 
-      // creating with unix timestamp (in seconds)
-      moment.unix = function (input) {
-          return moment(input * 1000);
-      };
+    this._stopAutoResize();
 
-      // duration
-      moment.duration = function (input, key) {
-          var duration = input,
-              // matching against regexp is expensive, do it on demand
-              match = null,
-              sign,
-              ret,
-              parseIso;
+    this._onResize = function() {
+      if (me.options.autoResize != true) {
+        // stop watching when the option autoResize is changed to false
+        me._stopAutoResize();
+        return;
+      }
 
-          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])
-              };
-          }
+      if (me.dom.root) {
+        // check whether the frame is resized
+        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+            (me.dom.root.clientHeight != me.props.lastHeight)) {
+          me.props.lastWidth = me.dom.root.clientWidth;
+          me.props.lastHeight = me.dom.root.clientHeight;
 
-          ret = new Duration(duration);
+          me.emit('change');
+        }
+      }
+    };
 
-          if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
-              ret._lang = input._lang;
-          }
+    // add event listener to window resize
+    util.addEventListener(window, 'resize', this._onResize);
 
-          return ret;
-      };
+    this.watchTimer = setInterval(this._onResize, 1000);
+  };
 
-      // version number
-      moment.version = VERSION;
+  /**
+   * Stop watching for a resize of the frame.
+   * @private
+   */
+  Timeline.prototype._stopAutoResize = function () {
+    if (this.watchTimer) {
+      clearInterval(this.watchTimer);
+      this.watchTimer = undefined;
+    }
 
-      // default format
-      moment.defaultFormat = isoFormat;
+    // remove event listener on window.resize
+    util.removeEventListener(window, 'resize', this._onResize);
+    this._onResize = null;
+  };
 
-      // constant that refers to the ISO standard
-      moment.ISO_8601 = function () {};
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onTouch = function (event) {
+    this.touch.allowDragging = true;
+  };
 
-      // Plugins that add properties should also add the key here (null value),
-      // so we can properly clone ourselves.
-      moment.momentProperties = momentProperties;
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onPinch = function (event) {
+    this.touch.allowDragging = false;
+  };
 
-      // 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 () {};
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onDragStart = function (event) {
+    this.touch.initialScrollTop = this.props.scrollTop;
+  };
 
-      // This function allows you to set a threshold for relative time strings
-      moment.relativeTimeThreshold = function(threshold, limit) {
-        if (relativeTimeThresholds[threshold] === undefined) {
-          return false;
-        }
-        relativeTimeThresholds[threshold] = limit;
-        return true;
-      };
+  /**
+   * Move the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onDrag = function (event) {
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.touch.allowDragging) return;
 
-      // This function will load languages and then set the global language.  If
-      // no arguments are passed in, it will simply return the current global
-      // language key.
-      moment.lang = function (key, values) {
-          var r;
-          if (!key) {
-              return moment.fn._lang._abbr;
-          }
-          if (values) {
-              loadLang(normalizeLanguage(key), values);
-          } else if (values === null) {
-              unloadLang(key);
-              key = 'en';
-          } else if (!languages[key]) {
-              getLangDefinition(key);
-          }
-          r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
-          return r._abbr;
-      };
+    var delta = event.gesture.deltaY;
 
-      // returns language data
-      moment.langData = function (key) {
-          if (key && key._lang && key._lang._abbr) {
-              key = key._lang._abbr;
-          }
-          return getLangDefinition(key);
-      };
+    var oldScrollTop = this._getScrollTop();
+    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
-      // compare moment object
-      moment.isMoment = function (obj) {
-          return obj instanceof Moment ||
-              (obj != null &&  obj.hasOwnProperty('_isAMomentObject'));
-      };
+    if (newScrollTop != oldScrollTop) {
+      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
+    }
+  };
 
-      // for typechecking Duration objects
-      moment.isDuration = function (obj) {
-          return obj instanceof Duration;
-      };
+  /**
+   * Apply a scrollTop
+   * @param {Number} scrollTop
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
+   */
+  Timeline.prototype._setScrollTop = function (scrollTop) {
+    this.props.scrollTop = scrollTop;
+    this._updateScrollTop();
+    return this.props.scrollTop;
+  };
 
-      for (i = lists.length - 1; i >= 0; --i) {
-          makeList(lists[i]);
+  /**
+   * Update the current scrollTop when the height of  the containers has been changed
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
+   */
+  Timeline.prototype._updateScrollTop = function () {
+    // recalculate the scrollTopMin
+    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
+    if (scrollTopMin != this.props.scrollTopMin) {
+      // in case of bottom orientation, change the scrollTop such that the contents
+      // do not move relative to the time axis at the bottom
+      if (this.options.orientation == 'bottom') {
+        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
       }
+      this.props.scrollTopMin = scrollTopMin;
+    }
 
-      moment.normalizeUnits = function (units) {
-          return normalizeUnits(units);
-      };
+    // limit the scrollTop to the feasible scroll range
+    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
+    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
-      moment.invalid = function (flags) {
-          var m = moment.utc(NaN);
-          if (flags != null) {
-              extend(m._pf, flags);
-          }
-          else {
-              m._pf.userInvalidated = true;
-          }
+    return this.props.scrollTop;
+  };
 
-          return m;
-      };
+  /**
+   * Get the current scrollTop
+   * @returns {number} scrollTop
+   * @private
+   */
+  Timeline.prototype._getScrollTop = function () {
+    return this.props.scrollTop;
+  };
 
-      moment.parseZone = function () {
-          return moment.apply(null, arguments).parseZone();
-      };
+  module.exports = Timeline;
 
-      moment.parseTwoDigitYear = function (input) {
-          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
-      };
 
-      /************************************
-          Moment Prototype
-      ************************************/
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
 
+  /**
+   * @constructor  DataStep
+   * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
+   * end data point. The class itself determines the best scale (step size) based on the
+   * provided start Date, end Date, and minimumStep.
+   *
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   *
+   * Alternatively, you can set a scale by hand.
+   * After creation, you can initialize the class by executing first(). Then you
+   * can iterate from the start date to the end date via next(). You can check if
+   * the end date is reached with the function hasNext(). After each step, you can
+   * retrieve the current date via getCurrent().
+   * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
+   * days, to years.
+   *
+   * Version: 1.2
+   *
+   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
+   *                               or new Date(2010, 9, 21, 23, 45, 00)
+   * @param {Date} [end]           The end date
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+   */
+  function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
+    // variables
+    this.current = 0;
 
-      extend(moment.fn = Moment.prototype, {
+    this.autoScale = true;
+    this.stepIndex = 0;
+    this.step = 1;
+    this.scale = 1;
 
-          clone : function () {
-              return moment(this);
-          },
+    this.marginStart;
+    this.marginEnd;
 
-          valueOf : function () {
-              return +this._d + ((this._offset || 0) * 60000);
-          },
+    this.majorSteps = [1,     2,    5,  10];
+    this.minorSteps = [0.25,  0.5,  1,  2];
 
-          unix : function () {
-              return Math.floor(+this / 1000);
-          },
+    this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
+  }
 
-          toString : function () {
-              return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
-          },
 
-          toDate : function () {
-              return this._offset ? new Date(+this) : this._d;
-          },
 
-          toISOString : function () {
-              var m = moment(this).utc();
-              if (0 < m.year() && m.year() <= 9999) {
-                  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]');
-              }
-          },
+  /**
+   * Set a new range
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   * @param {Number} [start]      The start date and time.
+   * @param {Number} [end]        The end date and time.
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+   */
+  DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
+    this._start = start;
+    this._end = end;
 
-          toArray : function () {
-              var m = this;
-              return [
-                  m.year(),
-                  m.month(),
-                  m.date(),
-                  m.hours(),
-                  m.minutes(),
-                  m.seconds(),
-                  m.milliseconds()
-              ];
-          },
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
+    }
+    this.setFirst();
+  };
 
-          isValid : function () {
-              return isValid(this);
-          },
+  /**
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
+   */
+  DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
+    // round to floor
+    var size = this._end - this._start;
+    var safeSize = size * 1.1;
+    var minimumStepValue = minimumStep * (safeSize / containerHeight);
+    var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
 
-          isDSTShifted : function () {
+    var minorStepIdx = -1;
+    var magnitudefactor = Math.pow(10,orderOfMagnitude);
 
-              if (this._a) {
-                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
-              }
+    var start = 0;
+    if (orderOfMagnitude < 0) {
+      start = orderOfMagnitude;
+    }
 
-              return false;
-          },
+    var solutionFound = false;
+    for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
+      magnitudefactor = Math.pow(10,i);
+      for (var j = 0; j < this.minorSteps.length; j++) {
+        var stepSize = magnitudefactor * this.minorSteps[j];
+        if (stepSize >= minimumStepValue) {
+          solutionFound = true;
+          minorStepIdx = j;
+          break;
+        }
+      }
+      if (solutionFound == true) {
+        break;
+      }
+    }
+    this.stepIndex = minorStepIdx;
+    this.scale = magnitudefactor;
+    this.step = magnitudefactor * this.minorSteps[minorStepIdx];
+  };
 
-          parsingFlags : function () {
-              return extend({}, this._pf);
-          },
 
-          invalidAt: function () {
-              return this._pf.overflow;
-          },
+  /**
+   * Set the range iterator to the start date.
+   */
+  DataStep.prototype.first = function() {
+    this.setFirst();
+  };
 
-          utc : function () {
-              return this.zone(0);
-          },
+  /**
+   * Round the current date to the first minor date value
+   * This must be executed once when the current date is set to start Date
+   */
+  DataStep.prototype.setFirst = function() {
+    var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
+    var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
 
-          local : function () {
-              this.zone(0);
-              this._isUTC = false;
-              return this;
-          },
+    this.marginEnd = this.roundToMinor(niceEnd);
+    this.marginStart = this.roundToMinor(niceStart);
+    this.marginRange = this.marginEnd - this.marginStart;
 
-          format : function (inputString) {
-              var output = formatMoment(this, inputString || moment.defaultFormat);
-              return this.lang().postformat(output);
-          },
+    this.current = this.marginEnd;
 
-          add : function (input, val) {
-              var dur;
-              // switch args to support add('s', 1) and add(1, 's')
-              if (typeof input === 'string' && typeof val === 'string') {
-                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
-              } else if (typeof input === 'string') {
-                  dur = moment.duration(+val, input);
-              } else {
-                  dur = moment.duration(input, val);
-              }
-              addOrSubtractDurationFromMoment(this, dur, 1);
-              return this;
-          },
+  };
 
-          subtract : function (input, val) {
-              var dur;
-              // switch args to support subtract('s', 1) and subtract(1, 's')
-              if (typeof input === 'string' && typeof val === 'string') {
-                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
-              } else if (typeof input === 'string') {
-                  dur = moment.duration(+val, input);
-              } else {
-                  dur = moment.duration(input, val);
-              }
-              addOrSubtractDurationFromMoment(this, dur, -1);
-              return this;
-          },
+  DataStep.prototype.roundToMinor = function(value) {
+    var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
+    if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
+      return rounded + (this.scale * this.minorSteps[this.stepIndex]);
+    }
+    else {
+      return rounded;
+    }
+  }
 
-          diff : function (input, units, asFloat) {
-              var that = makeAs(input, this),
-                  zoneDiff = (this.zone() - that.zone()) * 6e4,
-                  diff, output;
 
-              units = normalizeUnits(units);
+  /**
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
+   */
+  DataStep.prototype.hasNext = function () {
+    return (this.current >= this.marginStart);
+  };
 
-              if (units === 'year' || units === 'month') {
-                  // average number of days in the months in the given dates
-                  diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
-                  // difference in months
-                  output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
-                  // adjust by taking difference in days, average number of days
-                  // and dst in the given months.
-                  output += ((this - moment(this).startOf('month')) -
-                          (that - moment(that).startOf('month'))) / diff;
-                  // same as above but with zones, to negate all dst
-                  output -= ((this.zone() - moment(this).startOf('month').zone()) -
-                          (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
-                  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);
-          },
+  /**
+   * Do the next step
+   */
+  DataStep.prototype.next = function() {
+    var prev = this.current;
+    this.current -= this.step;
 
-          from : function (time, withoutSuffix) {
-              return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
-          },
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current == prev) {
+      this.current = this._end;
+    }
+  };
 
-          fromNow : function (withoutSuffix) {
-              return this.from(moment(), withoutSuffix);
-          },
+  /**
+   * Do the next step
+   */
+  DataStep.prototype.previous = function() {
+    this.current += this.step;
+    this.marginEnd += this.step;
+    this.marginRange = this.marginEnd - this.marginStart;
+  };
 
-          calendar : function (time) {
-              // We want to compare the start of today, vs this.
-              // Getting start-of-today depends on whether we're zone'd 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.lang().calendar(format, this));
-          },
 
-          isLeapYear : function () {
-              return isLeapYear(this.year());
-          },
 
-          isDST : function () {
-              return (this.zone() < this.clone().month(0).zone() ||
-                  this.zone() < this.clone().month(5).zone());
-          },
+  /**
+   * Get the current datetime
+   * @return {String}  current The current date
+   */
+  DataStep.prototype.getCurrent = function() {
+    var toPrecision = '' + Number(this.current).toPrecision(5);
+    for (var i = toPrecision.length-1; i > 0; i--) {
+      if (toPrecision[i] == "0") {
+        toPrecision = toPrecision.slice(0,i);
+      }
+      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+        toPrecision = toPrecision.slice(0,i);
+        break;
+      }
+      else{
+        break;
+      }
+    }
 
-          day : function (input) {
-              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
-              if (input != null) {
-                  input = parseWeekday(input, this.lang());
-                  return this.add({ d : input - day });
-              } else {
-                  return day;
-              }
-          },
+    return toPrecision;
+  };
 
-          month : makeAccessor('Month', true),
 
-          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);
-              }
+  /**
+   * 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
+   */
+  DataStep.prototype.snap = function(date) {
 
-              // quarters are also special
-              if (units === 'quarter') {
-                  this.month(Math.floor(this.month() / 3) * 3);
-              }
+  };
 
-              return this;
-          },
+  /**
+   * Check if the current value is a major value (for example when the step
+   * is DAY, a major value is each first day of the MONTH)
+   * @return {boolean} true if current date is major, else false.
+   */
+  DataStep.prototype.isMajor = function() {
+    return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+  };
 
-          endOf: function (units) {
-              units = normalizeUnits(units);
-              return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
-          },
+  module.exports = DataStep;
 
-          isAfter: function (input, units) {
-              units = typeof units !== 'undefined' ? units : 'millisecond';
-              return +this.clone().startOf(units) > +moment(input).startOf(units);
-          },
 
-          isBefore: function (input, units) {
-              units = typeof units !== 'undefined' ? units : 'millisecond';
-              return +this.clone().startOf(units) < +moment(input).startOf(units);
-          },
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
 
-          isSame: function (input, units) {
-              units = units || 'ms';
-              return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
-          },
+  var Emitter = __webpack_require__(41);
+  var Hammer = __webpack_require__(49);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Range = __webpack_require__(8);
+  var TimeAxis = __webpack_require__(21);
+  var CurrentTime = __webpack_require__(13);
+  var CustomTime = __webpack_require__(14);
+  var LineGraph = __webpack_require__(20);
 
-          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;
-                   }
-           ),
+  /**
+   * Create a timeline visualization
+   * @param {HTMLElement} container
+   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
+   * @param {Object} [options]  See Graph2d.setOptions for the available options.
+   * @constructor
+   */
+  function Graph2d (container, items, options, groups) {
+    var me = this;
+    this.defaultOptions = {
+      start: null,
+      end:   null,
 
-          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;
-                  }
-          ),
+      autoResize: true,
 
-          // keepTime = true means only change the timezone, without affecting
-          // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
-          // It is possible that 5:31:26 doesn't exist int zone +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.
-          zone : function (input, keepTime) {
-              var offset = this._offset || 0;
-              if (input != null) {
-                  if (typeof input === "string") {
-                      input = timezoneMinutesFromString(input);
-                  }
-                  if (Math.abs(input) < 16) {
-                      input = input * 60;
-                  }
-                  this._offset = input;
-                  this._isUTC = true;
-                  if (offset !== input) {
-                      if (!keepTime || this._changeInProgress) {
-                          addOrSubtractDurationFromMoment(this,
-                                  moment.duration(offset - input, 'm'), 1, false);
-                      } else if (!this._changeInProgress) {
-                          this._changeInProgress = true;
-                          moment.updateOffset(this, true);
-                          this._changeInProgress = null;
-                      }
-                  }
-              } else {
-                  return this._isUTC ? offset : this._d.getTimezoneOffset();
-              }
-              return this;
-          },
+      orientation: 'bottom',
+      width: null,
+      height: null,
+      maxHeight: null,
+      minHeight: null
+    };
+    this.options = util.deepExtend({}, this.defaultOptions);
 
-          zoneAbbr : function () {
-              return this._isUTC ? "UTC" : "";
-          },
+    // Create the DOM, props, and emitter
+    this._create(container);
 
-          zoneName : function () {
-              return this._isUTC ? "Coordinated Universal Time" : "";
-          },
+    // all components listed here will be repainted automatically
+    this.components = [];
 
-          parseZone : function () {
-              if (this._tzm) {
-                  this.zone(this._tzm);
-              } else if (typeof this._i === 'string') {
-                  this.zone(this._i);
-              }
-              return this;
-          },
+    this.body = {
+      dom: this.dom,
+      domProps: this.props,
+      emitter: {
+        on: this.on.bind(this),
+        off: this.off.bind(this),
+        emit: this.emit.bind(this)
+      },
+      util: {
+        snap: null, // will be specified after TimeAxis is created
+        toScreen: me._toScreen.bind(me),
+        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+        toTime: me._toTime.bind(me),
+        toGlobalTime : me._toGlobalTime.bind(me)
+      }
+    };
 
-          hasAlignedHourOffset : function (input) {
-              if (!input) {
-                  input = 0;
-              }
-              else {
-                  input = moment(input).zone();
-              }
+    // range
+    this.range = new Range(this.body);
+    this.components.push(this.range);
+    this.body.range = this.range;
 
-              return (this.zone() - input) % 60 === 0;
-          },
+    // time axis
+    this.timeAxis = new TimeAxis(this.body);
+    this.components.push(this.timeAxis);
+    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
 
-          daysInMonth : function () {
-              return daysInMonth(this.year(), this.month());
-          },
+    // current time bar
+    this.currentTime = new CurrentTime(this.body);
+    this.components.push(this.currentTime);
 
-          dayOfYear : function (input) {
-              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
-              return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
-          },
+    // custom time bar
+    // Note: time bar will be attached in this.setOptions when selected
+    this.customTime = new CustomTime(this.body);
+    this.components.push(this.customTime);
 
-          quarter : function (input) {
-              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
-          },
+    // item set
+    this.linegraph = new LineGraph(this.body);
+    this.components.push(this.linegraph);
 
-          weekYear : function (input) {
-              var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
-              return input == null ? year : this.add("y", (input - year));
-          },
+    this.itemsData = null;      // DataSet
+    this.groupsData = null;     // DataSet
 
-          isoWeekYear : function (input) {
-              var year = weekOfYear(this, 1, 4).year;
-              return input == null ? year : this.add("y", (input - year));
-          },
+    // apply options
+    if (options) {
+      this.setOptions(options);
+    }
 
-          week : function (input) {
-              var week = this.lang().week(this);
-              return input == null ? week : this.add("d", (input - week) * 7);
-          },
+    // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
+    if (groups) {
+      this.setGroups(groups);
+    }
 
-          isoWeek : function (input) {
-              var week = weekOfYear(this, 1, 4).week;
-              return input == null ? week : this.add("d", (input - week) * 7);
-          },
+    // create itemset
+    if (items) {
+      this.setItems(items);
+    }
+    else {
+      this.redraw();
+    }
+  }
 
-          weekday : function (input) {
-              var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
-              return input == null ? weekday : this.add("d", input - weekday);
-          },
+  // turn Graph2d into an event emitter
+  Emitter(Graph2d.prototype);
 
-          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);
-          },
+  /**
+   * Create the main DOM for the Graph2d: a root panel containing left, right,
+   * top, bottom, content, and background panel.
+   * @param {Element} container  The container element where the Graph2d will
+   *                             be attached.
+   * @private
+   */
+  Graph2d.prototype._create = function (container) {
+    this.dom = {};
 
-          isoWeeksInYear : function () {
-              return weeksInYear(this.year(), 1, 4);
-          },
+    this.dom.root                 = document.createElement('div');
+    this.dom.background           = document.createElement('div');
+    this.dom.backgroundVertical   = document.createElement('div');
+    this.dom.backgroundHorizontalContainer = document.createElement('div');
+    this.dom.centerContainer      = document.createElement('div');
+    this.dom.leftContainer        = document.createElement('div');
+    this.dom.rightContainer       = document.createElement('div');
+    this.dom.backgroundHorizontal = document.createElement('div');
+    this.dom.center               = document.createElement('div');
+    this.dom.left                 = document.createElement('div');
+    this.dom.right                = document.createElement('div');
+    this.dom.top                  = document.createElement('div');
+    this.dom.bottom               = document.createElement('div');
+    this.dom.shadowTop            = document.createElement('div');
+    this.dom.shadowBottom         = document.createElement('div');
+    this.dom.shadowTopLeft        = document.createElement('div');
+    this.dom.shadowBottomLeft     = document.createElement('div');
+    this.dom.shadowTopRight       = document.createElement('div');
+    this.dom.shadowBottomRight    = document.createElement('div');
 
-          weeksInYear : function () {
-              var weekInfo = this._lang._week;
-              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
-          },
+    this.dom.background.className           = 'vispanel background';
+    this.dom.backgroundVertical.className   = 'vispanel background vertical';
+    this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
+    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
+    this.dom.centerContainer.className      = 'vispanel center';
+    this.dom.leftContainer.className        = 'vispanel left';
+    this.dom.rightContainer.className       = 'vispanel right';
+    this.dom.top.className                  = 'vispanel top';
+    this.dom.bottom.className               = 'vispanel bottom';
+    this.dom.left.className                 = 'content';
+    this.dom.center.className               = 'content';
+    this.dom.right.className                = 'content';
+    this.dom.shadowTop.className            = 'shadow top';
+    this.dom.shadowBottom.className         = 'shadow bottom';
+    this.dom.shadowTopLeft.className        = 'shadow top';
+    this.dom.shadowBottomLeft.className     = 'shadow bottom';
+    this.dom.shadowTopRight.className       = 'shadow top';
+    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units]();
-          },
+    this.dom.root.appendChild(this.dom.background);
+    this.dom.root.appendChild(this.dom.backgroundVertical);
+    this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
+    this.dom.root.appendChild(this.dom.centerContainer);
+    this.dom.root.appendChild(this.dom.leftContainer);
+    this.dom.root.appendChild(this.dom.rightContainer);
+    this.dom.root.appendChild(this.dom.top);
+    this.dom.root.appendChild(this.dom.bottom);
 
-          set : function (units, value) {
-              units = normalizeUnits(units);
-              if (typeof this[units] === 'function') {
-                  this[units](value);
-              }
-              return this;
-          },
+    this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
+    this.dom.centerContainer.appendChild(this.dom.center);
+    this.dom.leftContainer.appendChild(this.dom.left);
+    this.dom.rightContainer.appendChild(this.dom.right);
 
-          // If passed a language key, it will set the language for this
-          // instance.  Otherwise, it will return the language configuration
-          // variables for this instance.
-          lang : function (key) {
-              if (key === undefined) {
-                  return this._lang;
-              } else {
-                  this._lang = getLangDefinition(key);
-                  return this;
-              }
-          }
-      });
+    this.dom.centerContainer.appendChild(this.dom.shadowTop);
+    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
+    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
+    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
+    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
+    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-      function rawMonthSetter(mom, value) {
-          var dayOfMonth;
+    this.on('rangechange', this.redraw.bind(this));
+    this.on('change', this.redraw.bind(this));
+    this.on('touch', this._onTouch.bind(this));
+    this.on('pinch', this._onPinch.bind(this));
+    this.on('dragstart', this._onDragStart.bind(this));
+    this.on('drag', this._onDrag.bind(this));
 
-          // TODO: Move this out of here!
-          if (typeof value === 'string') {
-              value = mom.lang().monthsParse(value);
-              // TODO: Another silent failure?
-              if (typeof value !== 'number') {
-                  return mom;
-              }
-          }
+    // create event listeners for all interesting events, these events will be
+    // emitted via emitter
+    this.hammer = Hammer(this.dom.root, {
+      prevent_default: true
+    });
+    this.listeners = {};
 
-          dayOfMonth = Math.min(mom.date(),
-                  daysInMonth(mom.year(), value));
-          mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
-          return mom;
-      }
+    var me = this;
+    var events = [
+      'touch', 'pinch',
+      'tap', 'doubletap', 'hold',
+      'dragstart', 'drag', 'dragend',
+      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    ];
+    events.forEach(function (event) {
+      var listener = function () {
+        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
+        me.emit.apply(me, args);
+      };
+      me.hammer.on(event, listener);
+      me.listeners[event] = listener;
+    });
 
-      function rawGetter(mom, unit) {
-          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
-      }
+    // size properties of each of the panels
+    this.props = {
+      root: {},
+      background: {},
+      centerContainer: {},
+      leftContainer: {},
+      rightContainer: {},
+      center: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {},
+      border: {},
+      scrollTop: 0,
+      scrollTopMin: 0
+    };
+    this.touch = {}; // store state information needed for touch events
 
-      function rawSetter(mom, unit, value) {
-          if (unit === 'Month') {
-              return rawMonthSetter(mom, value);
-          } else {
-              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
-          }
-      }
+    // attach the root panel to the provided container
+    if (!container) throw new Error('No container provided');
+    container.appendChild(this.dom.root);
+  };
 
-      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);
-              }
-          };
-      }
+  /**
+   * Destroy the Graph2d, clean up all DOM elements and event listeners.
+   */
+  Graph2d.prototype.destroy = function () {
+    // unbind datasets
+    this.clear();
 
-      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));
+    // remove all event listeners
+    this.off();
 
-      // 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;
+    // stop checking for changed size
+    this._stopAutoResize();
 
-      // add aliased format methods
-      moment.fn.toJSON = moment.fn.toISOString;
+    // remove from DOM
+    if (this.dom.root.parentNode) {
+      this.dom.root.parentNode.removeChild(this.dom.root);
+    }
+    this.dom = null;
 
-      /************************************
-          Duration Prototype
-      ************************************/
+    // cleanup hammer touch events
+    for (var event in this.listeners) {
+      if (this.listeners.hasOwnProperty(event)) {
+        delete this.listeners[event];
+      }
+    }
+    this.listeners = null;
+    this.hammer = null;
 
+    // give all components the opportunity to cleanup
+    this.components.forEach(function (component) {
+      component.destroy();
+    });
 
-      extend(moment.duration.fn = Duration.prototype, {
+    this.body = null;
+  };
 
-          _bubble : function () {
-              var milliseconds = this._milliseconds,
-                  days = this._days,
-                  months = this._months,
-                  data = this._data,
-                  seconds, minutes, hours, years;
+  /**
+   * Set options. Options will be passed to all components loaded in the Graph2d.
+   * @param {Object} [options]
+   *                           {String} orientation
+   *                              Vertical orientation for the Graph2d,
+   *                              can be 'bottom' (default) or 'top'.
+   *                           {String | Number} width
+   *                              Width for the timeline, a number in pixels or
+   *                              a css string like '1000px' or '75%'. '100%' by default.
+   *                           {String | Number} height
+   *                              Fixed height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'. If undefined,
+   *                              The Graph2d will automatically size such that
+   *                              its contents fit.
+   *                           {String | Number} minHeight
+   *                              Minimum height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {String | Number} maxHeight
+   *                              Maximum height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {Number | Date | String} start
+   *                              Start date for the visible window
+   *                           {Number | Date | String} end
+   *                              End date for the visible window
+   */
+  Graph2d.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the known options
+      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
+      util.selectiveExtend(fields, this.options, options);
 
-              // The following code bubbles up values, see the tests for
-              // examples of what that means.
-              data.milliseconds = milliseconds % 1000;
+      // enable/disable autoResize
+      this._initAutoResize();
+    }
 
-              seconds = absRound(milliseconds / 1000);
-              data.seconds = seconds % 60;
+    // propagate options to all components
+    this.components.forEach(function (component) {
+      component.setOptions(options);
+    });
 
-              minutes = absRound(seconds / 60);
-              data.minutes = minutes % 60;
+    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+    if (options && options.order) {
+      throw new Error('Option order is deprecated. There is no replacement for this feature.');
+    }
 
-              hours = absRound(minutes / 60);
-              data.hours = hours % 24;
+    // redraw everything
+    this.redraw();
+  };
 
-              days += absRound(hours / 24);
-              data.days = days % 30;
+  /**
+   * Set a custom time bar
+   * @param {Date} time
+   */
+  Graph2d.prototype.setCustomTime = function (time) {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+    }
 
-              months += absRound(days / 30);
-              data.months = months % 12;
+    this.customTime.setCustomTime(time);
+  };
 
-              years = absRound(months / 12);
-              data.years = years;
-          },
+  /**
+   * Retrieve the current custom time.
+   * @return {Date} customTime
+   */
+  Graph2d.prototype.getCustomTime = function() {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+    }
 
-          weeks : function () {
-              return absRound(this.days() / 7);
-          },
+    return this.customTime.getCustomTime();
+  };
 
-          valueOf : function () {
-              return this._milliseconds +
-                this._days * 864e5 +
-                (this._months % 12) * 2592e6 +
-                toInt(this._months / 12) * 31536e6;
-          },
+  /**
+   * Set items
+   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
+   */
+  Graph2d.prototype.setItems = function(items) {
+    var initialLoad = (this.itemsData == null);
 
-          humanize : function (withSuffix) {
-              var difference = +this,
-                  output = relativeTime(difference, !withSuffix, this.lang());
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!items) {
+      newDataSet = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      newDataSet = items;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(items, {
+        type: {
+          start: 'Date',
+          end: 'Date'
+        }
+      });
+    }
 
-              if (withSuffix) {
-                  output = this.lang().pastFuture(difference, output);
-              }
+    // set items
+    this.itemsData = newDataSet;
+    this.linegraph && this.linegraph.setItems(newDataSet);
 
-              return this.lang().postformat(output);
-          },
+    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
+      this.fit();
 
-          add : function (input, val) {
-              // supports only 2.0-style add(1, 's') or add(moment)
-              var dur = moment.duration(input, val);
+      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
+      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
 
-              this._milliseconds += dur._milliseconds;
-              this._days += dur._days;
-              this._months += dur._months;
+      this.setWindow(start, end);
+    }
+  };
 
-              this._bubble();
+  /**
+   * Set groups
+   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+   */
+  Graph2d.prototype.setGroups = function(groups) {
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!groups) {
+      newDataSet = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      newDataSet = groups;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(groups);
+    }
 
-              return this;
-          },
+    this.groupsData = newDataSet;
+    this.linegraph.setGroups(newDataSet);
+  };
 
-          subtract : function (input, val) {
-              var dur = moment.duration(input, val);
+  /**
+   * Clear the Graph2d. By Default, items, groups and options are cleared.
+   * Example usage:
+   *
+   *     timeline.clear();                // clear items, groups, and options
+   *     timeline.clear({options: true}); // clear options only
+   *
+   * @param {Object} [what]      Optionally specify what to clear. By default:
+   *                             {items: true, groups: true, options: true}
+   */
+  Graph2d.prototype.clear = function(what) {
+    // clear items
+    if (!what || what.items) {
+      this.setItems(null);
+    }
 
-              this._milliseconds -= dur._milliseconds;
-              this._days -= dur._days;
-              this._months -= dur._months;
+    // clear groups
+    if (!what || what.groups) {
+      this.setGroups(null);
+    }
 
-              this._bubble();
+    // clear options of timeline and of each of the components
+    if (!what || what.options) {
+      this.components.forEach(function (component) {
+        component.setOptions(component.defaultOptions);
+      });
 
-              return this;
-          },
+      this.setOptions(this.defaultOptions); // this will also do a redraw
+    }
+  };
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units.toLowerCase() + 's']();
-          },
+  /**
+   * Set Graph2d window such that it fits all items
+   */
+  Graph2d.prototype.fit = function() {
+    // apply the data range as range
+    var dataRange = this.getItemRange();
 
-          as : function (units) {
-              units = normalizeUnits(units);
-              return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
-          },
+    // add 5% space on both sides
+    var start = dataRange.min;
+    var end = dataRange.max;
+    if (start != null && end != null) {
+      var interval = (end.valueOf() - start.valueOf());
+      if (interval <= 0) {
+        // prevent an empty interval
+        interval = 24 * 60 * 60 * 1000; // 1 day
+      }
+      start = new Date(start.valueOf() - interval * 0.05);
+      end = new Date(end.valueOf() + interval * 0.05);
+    }
 
-          lang : moment.fn.lang,
+    // skip range set if there is no start and end date
+    if (start === null && end === null) {
+      return;
+    }
 
-          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);
+    this.range.setRange(start, end);
+  };
 
-              if (!this.asSeconds()) {
-                  // this is the same as C#'s (Noda) and python (isodate)...
-                  // but not other JS (goog.date)
-                  return 'P0D';
-              }
+  /**
+   * Get the data range of the item set.
+   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
+   *                                          When no minimum is found, min==null
+   *                                          When no maximum is found, max==null
+   */
+  Graph2d.prototype.getItemRange = function() {
+    // calculate min from start filed
+    var itemsData = this.itemsData,
+      min = null,
+      max = null;
 
-              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' : '');
-          }
-      });
+    if (itemsData) {
+      // calculate the minimum value of the field 'start'
+      var minItem = itemsData.min('start');
+      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
+      // Note: we convert first to Date and then to number because else
+      // a conversion from ISODate to Number will fail
 
-      function makeDurationGetter(name) {
-          moment.duration.fn[name] = function () {
-              return this._data[name];
-          };
+      // calculate maximum value of fields 'start' and 'end'
+      var maxStartItem = itemsData.max('start');
+      if (maxStartItem) {
+        max = util.convert(maxStartItem.start, 'Date').valueOf();
       }
-
-      function makeDurationAsGetter(name, factor) {
-          moment.duration.fn['as' + name] = function () {
-              return +this / factor;
-          };
+      var maxEndItem = itemsData.max('end');
+      if (maxEndItem) {
+        if (max == null) {
+          max = util.convert(maxEndItem.end, 'Date').valueOf();
+        }
+        else {
+          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+        }
       }
+    }
 
-      for (i in unitMillisecondFactors) {
-          if (unitMillisecondFactors.hasOwnProperty(i)) {
-              makeDurationAsGetter(i, unitMillisecondFactors[i]);
-              makeDurationGetter(i.toLowerCase());
-          }
-      }
+    return {
+      min: (min != null) ? new Date(min) : null,
+      max: (max != null) ? new Date(max) : null
+    };
+  };
 
-      makeDurationAsGetter('Weeks', 6048e5);
-      moment.duration.fn.asMonths = function () {
-          return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
-      };
+  /**
+   * Set the visible window. Both parameters are optional, you can change only
+   * start or only end. Syntax:
+   *
+   *     TimeLine.setWindow(start, end)
+   *     TimeLine.setWindow(range)
+   *
+   * Where start and end can be a Date, number, or string, and range is an
+   * object with properties start and end.
+   *
+   * @param {Date | Number | String | Object} [start] Start date of visible window
+   * @param {Date | Number | String} [end]   End date of visible window
+   */
+  Graph2d.prototype.setWindow = function(start, end) {
+    if (arguments.length == 1) {
+      var range = arguments[0];
+      this.range.setRange(range.start, range.end);
+    }
+    else {
+      this.range.setRange(start, end);
+    }
+  };
 
+  /**
+   * Get the visible window
+   * @return {{start: Date, end: Date}}   Visible range
+   */
+  Graph2d.prototype.getWindow = function() {
+    var range = this.range.getRange();
+    return {
+      start: new Date(range.start),
+      end: new Date(range.end)
+    };
+  };
 
-      /************************************
-          Default Lang
-      ************************************/
+  /**
+   * Force a redraw of the Graph2d. Can be useful to manually redraw when
+   * option autoResize=false
+   */
+  Graph2d.prototype.redraw = function() {
+    var resized = false,
+      options = this.options,
+      props = this.props,
+      dom = this.dom;
 
+    if (!dom) return; // when destroyed
 
-      // Set default language, other languages will inherit from English.
-      moment.lang('en', {
-          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;
-          }
-      });
+    // update class names
+    dom.root.className = 'vis timeline root ' + options.orientation;
 
-      /* EMBED_LANGUAGES */
+    // update root width and height options
+    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
+    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
+    dom.root.style.width = util.option.asSize(options.width, '');
 
-      /************************************
-          Exposing Moment
-      ************************************/
+    // calculate border widths
+    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
+    props.border.right  = props.border.left;
+    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.bottom = props.border.top;
+    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
-      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;
-          }
-      }
+    // calculate the heights. If any of the side panels is empty, we set the height to
+    // minus the border width, such that the border will be invisible
+    props.center.height = dom.center.offsetHeight;
+    props.left.height   = dom.left.offsetHeight;
+    props.right.height  = dom.right.offsetHeight;
+    props.top.height    = dom.top.clientHeight    || -props.border.top;
+    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
 
-      // 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;
-              }
+    // TODO: compensate borders when any of the panels is empty.
 
-              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__(7)(module)))
+    // apply auto height
+    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
+    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
+    var autoHeight = props.top.height + contentHeight + props.bottom.height +
+      borderRootHeight + props.border.top + props.border.bottom;
+    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
-/***/ },
-/* 6 */
-/***/ function(module, exports, __webpack_require__) {
+    // calculate heights of the content panels
+    props.root.height = dom.root.offsetHeight;
+    props.background.height = props.root.height - borderRootHeight;
+    var containerHeight = props.root.height - props.top.height - props.bottom.height -
+      borderRootHeight;
+    props.centerContainer.height  = containerHeight;
+    props.leftContainer.height    = containerHeight;
+    props.rightContainer.height   = props.leftContainer.height;
 
-  var map = {
-  	"./ar": 59,
-  	"./ar-ma": 57,
-  	"./ar-ma.js": 57,
-  	"./ar-sa": 58,
-  	"./ar-sa.js": 58,
-  	"./ar.js": 59,
-  	"./az": 60,
-  	"./az.js": 60,
-  	"./bg": 61,
-  	"./bg.js": 61,
-  	"./bn": 62,
-  	"./bn.js": 62,
-  	"./br": 63,
-  	"./br.js": 63,
-  	"./bs": 64,
-  	"./bs.js": 64,
-  	"./ca": 65,
-  	"./ca.js": 65,
-  	"./cs": 66,
-  	"./cs.js": 66,
-  	"./cv": 67,
-  	"./cv.js": 67,
-  	"./cy": 68,
-  	"./cy.js": 68,
-  	"./da": 69,
-  	"./da.js": 69,
-  	"./de": 71,
-  	"./de-at": 70,
-  	"./de-at.js": 70,
-  	"./de.js": 71,
-  	"./el": 72,
-  	"./el.js": 72,
-  	"./en-au": 73,
-  	"./en-au.js": 73,
-  	"./en-ca": 74,
-  	"./en-ca.js": 74,
-  	"./en-gb": 75,
-  	"./en-gb.js": 75,
-  	"./eo": 76,
-  	"./eo.js": 76,
-  	"./es": 77,
-  	"./es.js": 77,
-  	"./et": 78,
-  	"./et.js": 78,
-  	"./eu": 79,
-  	"./eu.js": 79,
-  	"./fa": 80,
-  	"./fa.js": 80,
-  	"./fi": 81,
-  	"./fi.js": 81,
-  	"./fo": 82,
-  	"./fo.js": 82,
-  	"./fr": 84,
-  	"./fr-ca": 83,
-  	"./fr-ca.js": 83,
-  	"./fr.js": 84,
-  	"./gl": 85,
-  	"./gl.js": 85,
-  	"./he": 86,
-  	"./he.js": 86,
-  	"./hi": 87,
-  	"./hi.js": 87,
-  	"./hr": 88,
-  	"./hr.js": 88,
-  	"./hu": 89,
-  	"./hu.js": 89,
-  	"./hy-am": 90,
-  	"./hy-am.js": 90,
-  	"./id": 91,
-  	"./id.js": 91,
-  	"./is": 92,
-  	"./is.js": 92,
-  	"./it": 93,
-  	"./it.js": 93,
-  	"./ja": 94,
-  	"./ja.js": 94,
-  	"./ka": 95,
-  	"./ka.js": 95,
-  	"./km": 96,
-  	"./km.js": 96,
-  	"./ko": 97,
-  	"./ko.js": 97,
-  	"./lb": 98,
-  	"./lb.js": 98,
-  	"./lt": 99,
-  	"./lt.js": 99,
-  	"./lv": 100,
-  	"./lv.js": 100,
-  	"./mk": 101,
-  	"./mk.js": 101,
-  	"./ml": 102,
-  	"./ml.js": 102,
-  	"./mr": 103,
-  	"./mr.js": 103,
-  	"./ms-my": 104,
-  	"./ms-my.js": 104,
-  	"./nb": 105,
-  	"./nb.js": 105,
-  	"./ne": 106,
-  	"./ne.js": 106,
-  	"./nl": 107,
-  	"./nl.js": 107,
-  	"./nn": 108,
-  	"./nn.js": 108,
-  	"./pl": 109,
-  	"./pl.js": 109,
-  	"./pt": 111,
-  	"./pt-br": 110,
-  	"./pt-br.js": 110,
-  	"./pt.js": 111,
-  	"./ro": 112,
-  	"./ro.js": 112,
-  	"./ru": 113,
-  	"./ru.js": 113,
-  	"./sk": 114,
-  	"./sk.js": 114,
-  	"./sl": 115,
-  	"./sl.js": 115,
-  	"./sq": 116,
-  	"./sq.js": 116,
-  	"./sr": 118,
-  	"./sr-cyrl": 117,
-  	"./sr-cyrl.js": 117,
-  	"./sr.js": 118,
-  	"./sv": 119,
-  	"./sv.js": 119,
-  	"./ta": 120,
-  	"./ta.js": 120,
-  	"./th": 121,
-  	"./th.js": 121,
-  	"./tl-ph": 122,
-  	"./tl-ph.js": 122,
-  	"./tr": 123,
-  	"./tr.js": 123,
-  	"./tzm": 125,
-  	"./tzm-latn": 124,
-  	"./tzm-latn.js": 124,
-  	"./tzm.js": 125,
-  	"./uk": 126,
-  	"./uk.js": 126,
-  	"./uz": 127,
-  	"./uz.js": 127,
-  	"./vi": 128,
-  	"./vi.js": 128,
-  	"./zh-cn": 129,
-  	"./zh-cn.js": 129,
-  	"./zh-tw": 130,
-  	"./zh-tw.js": 130
-  };
-  function webpackContext(req) {
-  	return __webpack_require__(webpackContextResolve(req));
-  };
-  function webpackContextResolve(req) {
-  	return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
-  };
-  webpackContext.keys = function webpackContextKeys() {
-  	return Object.keys(map);
-  };
-  webpackContext.resolve = webpackContextResolve;
-  module.exports = webpackContext;
+    // calculate the widths of the panels
+    props.root.width = dom.root.offsetWidth;
+    props.background.width = props.root.width - borderRootWidth;
+    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
+    props.leftContainer.width = props.left.width;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    props.rightContainer.width = props.right.width;
+    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
+    props.center.width          = centerWidth;
+    props.centerContainer.width = centerWidth;
+    props.top.width             = centerWidth;
+    props.bottom.width          = centerWidth;
 
+    // resize the panels
+    dom.background.style.height           = props.background.height + 'px';
+    dom.backgroundVertical.style.height   = props.background.height + 'px';
+    dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
+    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
 
-/***/ },
-/* 7 */
-/***/ function(module, exports, __webpack_require__) {
+    dom.background.style.width            = props.background.width + 'px';
+    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+    dom.backgroundHorizontalContainer.style.width  = props.background.width + 'px';
+    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+    dom.centerContainer.style.width       = props.center.width + 'px';
+    dom.top.style.width                   = props.top.width + 'px';
+    dom.bottom.style.width                = props.bottom.width + 'px';
 
-  module.exports = function(module) {
-  	if(!module.webpackPolyfill) {
-  		module.deprecate = function() {};
-  		module.paths = [];
-  		// module.parent = undefined by default
-  		module.children = [];
-  		module.webpackPolyfill = 1;
-  	}
-  	return module;
-  }
+    // reposition the panels
+    dom.background.style.left           = '0';
+    dom.background.style.top            = '0';
+    dom.backgroundVertical.style.left   = props.left.width + 'px';
+    dom.backgroundVertical.style.top    = '0';
+    dom.backgroundHorizontalContainer.style.left = '0';
+    dom.backgroundHorizontalContainer.style.top  = props.top.height + 'px';
+    dom.centerContainer.style.left      = props.left.width + 'px';
+    dom.centerContainer.style.top       = props.top.height + 'px';
+    dom.leftContainer.style.left        = '0';
+    dom.leftContainer.style.top         = props.top.height + 'px';
+    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+    dom.rightContainer.style.top        = props.top.height + 'px';
+    dom.top.style.left                  = props.left.width + 'px';
+    dom.top.style.top                   = '0';
+    dom.bottom.style.left               = props.left.width + 'px';
+    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
 
+    // update the scrollTop, feasible range for the offset can be changed
+    // when the height of the Graph2d or of the contents of the center changed
+    this._updateScrollTop();
 
-/***/ },
-/* 8 */
-/***/ function(module, exports, __webpack_require__) {
+    // reposition the scrollable contents
+    var offset = this.props.scrollTop;
+    if (options.orientation == 'bottom') {
+      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
+          this.props.border.top - this.props.border.bottom, 0);
+    }
+    dom.center.style.left = '0';
+    dom.center.style.top  = offset + 'px';
+    dom.backgroundHorizontal.style.left = '0';
+    dom.backgroundHorizontal.style.top  = offset + 'px';
+    dom.left.style.left   = '0';
+    dom.left.style.top    = offset + 'px';
+    dom.right.style.left  = '0';
+    dom.right.style.top   = offset + 'px';
 
-  // DOM utility methods
+    // show shadows when vertical scrolling is available
+    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
+    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+    dom.shadowTop.style.visibility          = visibilityTop;
+    dom.shadowBottom.style.visibility       = visibilityBottom;
+    dom.shadowTopLeft.style.visibility      = visibilityTop;
+    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
+    dom.shadowTopRight.style.visibility     = visibilityTop;
+    dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
-  /**
-   * this prepares the JSON container for allocating SVG elements
-   * @param JSONcontainer
-   * @private
-   */
-  exports.prepareElements = function(JSONcontainer) {
-    // cleanup the redundant svgElements;
-    for (var elementType in JSONcontainer) {
-      if (JSONcontainer.hasOwnProperty(elementType)) {
-        JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
-        JSONcontainer[elementType].used = [];
-      }
+    // redraw all components
+    this.components.forEach(function (component) {
+      resized = component.redraw() || resized;
+    });
+    if (resized) {
+      // keep redrawing until all sizes are settled
+      this.redraw();
     }
   };
 
   /**
-   * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
-   * which to remove the redundant elements.
-   *
-   * @param JSONcontainer
+   * Convert a position on screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
    * @private
    */
-  exports.cleanupElements = function(JSONcontainer) {
-    // cleanup the redundant svgElements;
-    for (var elementType in JSONcontainer) {
-      if (JSONcontainer.hasOwnProperty(elementType)) {
-        if (JSONcontainer[elementType].redundant) {
-          for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
-            JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
-          }
-          JSONcontainer[elementType].redundant = [];
-        }
-      }
-    }
+  // TODO: move this function to Range
+  Graph2d.prototype._toTime = function(x) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return new Date(x / conversion.scale + conversion.offset);
   };
 
   /**
-   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
-   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
-   *
-   * @param elementType
-   * @param JSONcontainer
-   * @param svgContainer
-   * @returns {*}
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
    * @private
    */
-  exports.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
-    var element;
-    // allocate SVG element, if it doesnt yet exist, create one.
-    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
-      // check if there is an redundant element
-      if (JSONcontainer[elementType].redundant.length > 0) {
-        element = JSONcontainer[elementType].redundant[0];
-        JSONcontainer[elementType].redundant.shift();
-      }
-      else {
-        // create a new element and add it to the SVG
-        element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
-        svgContainer.appendChild(element);
-      }
-    }
-    else {
-      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
-      element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
-      JSONcontainer[elementType] = {used: [], redundant: []};
-      svgContainer.appendChild(element);
-    }
-    JSONcontainer[elementType].used.push(element);
-    return element;
+  // TODO: move this function to Range
+  Graph2d.prototype._toGlobalTime = function(x) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return new Date(x / conversion.scale + conversion.offset);
   };
 
-
   /**
-   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
-   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
-   *
-   * @param elementType
-   * @param JSONcontainer
-   * @param DOMContainer
-   * @returns {*}
+   * Convert a datetime (Date object) into a position on the screen
+   * @param {Date}   time A date
+   * @return {int}   x    The position on the screen in pixels which corresponds
+   *                      with the given date.
    * @private
    */
-  exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
-    var element;
-    // allocate SVG element, if it doesnt yet exist, create one.
-    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
-      // check if there is an redundant element
-      if (JSONcontainer[elementType].redundant.length > 0) {
-        element = JSONcontainer[elementType].redundant[0];
-        JSONcontainer[elementType].redundant.shift();
-      }
-      else {
-        // create a new element and add it to the SVG
-        element = document.createElement(elementType);
-        DOMContainer.appendChild(element);
-      }
-    }
-    else {
-      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
-      element = document.createElement(elementType);
-      JSONcontainer[elementType] = {used: [], redundant: []};
-      DOMContainer.appendChild(element);
-    }
-    JSONcontainer[elementType].used.push(element);
-    return element;
+  // TODO: move this function to Range
+  Graph2d.prototype._toScreen = function(time) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
   };
 
 
-
-
   /**
-   * draw a point object. this is a seperate function because it can also be called by the legend.
-   * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
-   * as well.
-   *
-   * @param x
-   * @param y
-   * @param group
-   * @param JSONcontainer
-   * @param svgContainer
-   * @returns {*}
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Graph2d.prototype._toGlobalScreen = function(time) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
+
+  /**
+   * Initialize watching when option autoResize is true
+   * @private
    */
-  exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
-    var point;
-    if (group.options.drawPoints.style == 'circle') {
-      point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
-      point.setAttributeNS(null, "cx", x);
-      point.setAttributeNS(null, "cy", y);
-      point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
-      point.setAttributeNS(null, "class", group.className + " point");
+  Graph2d.prototype._initAutoResize = function () {
+    if (this.options.autoResize == true) {
+      this._startAutoResize();
     }
     else {
-      point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
-      point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
-      point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
-      point.setAttributeNS(null, "width", group.options.drawPoints.size);
-      point.setAttributeNS(null, "height", group.options.drawPoints.size);
-      point.setAttributeNS(null, "class", group.className + " point");
+      this._stopAutoResize();
     }
-    return point;
   };
 
   /**
-   * draw a bar SVG element centered on the X coordinate
-   *
-   * @param x
-   * @param y
-   * @param className
+   * Watch for changes in the size of the container. On resize, the Panel will
+   * automatically redraw itself.
+   * @private
    */
-  exports.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
-    var rect = exports.getSVGElement('rect',JSONcontainer, svgContainer);
-    rect.setAttributeNS(null, "x", x - 0.5 * width);
-    rect.setAttributeNS(null, "y", y);
-    rect.setAttributeNS(null, "width", width);
-    rect.setAttributeNS(null, "height", height);
-    rect.setAttributeNS(null, "class", className);
-  };
-
-/***/ },
-/* 9 */
-/***/ function(module, exports, __webpack_require__) {
+  Graph2d.prototype._startAutoResize = function () {
+    var me = this;
 
-  var util = __webpack_require__(1);
+    this._stopAutoResize();
 
-  /**
-   * DataSet
-   *
-   * Usage:
-   *     var dataSet = new DataSet({
-   *         fieldId: '_id',
-   *         type: {
-   *             // ...
-   *         }
-   *     });
-   *
-   *     dataSet.add(item);
-   *     dataSet.add(data);
-   *     dataSet.update(item);
-   *     dataSet.update(data);
-   *     dataSet.remove(id);
-   *     dataSet.remove(ids);
-   *     var data = dataSet.get();
-   *     var data = dataSet.get(id);
-   *     var data = dataSet.get(ids);
-   *     var data = dataSet.get(ids, options, data);
-   *     dataSet.clear();
-   *
-   * A data set can:
-   * - add/remove/update data
-   * - gives triggers upon changes in the data
-   * - can  import/export data in various data formats
-   *
-   * @param {Array | DataTable} [data]    Optional array with initial data
-   * @param {Object} [options]   Available options:
-   *                             {String} fieldId Field name of the id in the
-   *                                              items, 'id' by default.
-   *                             {Object.<String, String} type
-   *                                              A map with field names as key,
-   *                                              and the field type as value.
-   * @constructor DataSet
-   */
-  // TODO: add a DataSet constructor DataSet(data, options)
-  function DataSet (data, options) {
-    // correctly read optional arguments
-    if (data && !Array.isArray(data) && !util.isDataTable(data)) {
-      options = data;
-      data = null;
-    }
+    this._onResize = function() {
+      if (me.options.autoResize != true) {
+        // stop watching when the option autoResize is changed to false
+        me._stopAutoResize();
+        return;
+      }
 
-    this._options = options || {};
-    this._data = {};                                 // map with data indexed by id
-    this._fieldId = this._options.fieldId || 'id';   // name of the field containing id
-    this._type = {};                                 // internal field types (NOTE: this can differ from this._options.type)
+      if (me.dom.root) {
+        // check whether the frame is resized
+        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+          (me.dom.root.clientHeight != me.props.lastHeight)) {
+          me.props.lastWidth = me.dom.root.clientWidth;
+          me.props.lastHeight = me.dom.root.clientHeight;
 
-    // all variants of a Date are internally stored as Date, so we can convert
-    // from everything to everything (also from ISODate to Number for example)
-    if (this._options.type) {
-      for (var field in this._options.type) {
-        if (this._options.type.hasOwnProperty(field)) {
-          var value = this._options.type[field];
-          if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
-            this._type[field] = 'Date';
-          }
-          else {
-            this._type[field] = value;
-          }
+          me.emit('change');
         }
       }
-    }
-
-    // TODO: deprecated since version 1.1.1 (or 2.0.0?)
-    if (this._options.convert) {
-      throw new Error('Option "convert" is deprecated. Use "type" instead.');
-    }
+    };
 
-    this._subscribers = {};  // event subscribers
+    // add event listener to window resize
+    util.addEventListener(window, 'resize', this._onResize);
 
-    // add initial data when provided
-    if (data) {
-      this.add(data);
-    }
-  }
+    this.watchTimer = setInterval(this._onResize, 1000);
+  };
 
   /**
-   * Subscribe to an event, add an event listener
-   * @param {String} event        Event name. Available events: 'put', 'update',
-   *                              'remove'
-   * @param {function} callback   Callback method. Called with three parameters:
-   *                                  {String} event
-   *                                  {Object | null} params
-   *                                  {String | Number} senderId
+   * Stop watching for a resize of the frame.
+   * @private
    */
-  DataSet.prototype.on = function(event, callback) {
-    var subscribers = this._subscribers[event];
-    if (!subscribers) {
-      subscribers = [];
-      this._subscribers[event] = subscribers;
+  Graph2d.prototype._stopAutoResize = function () {
+    if (this.watchTimer) {
+      clearInterval(this.watchTimer);
+      this.watchTimer = undefined;
     }
 
-    subscribers.push({
-      callback: callback
-    });
+    // remove event listener on window.resize
+    util.removeEventListener(window, 'resize', this._onResize);
+    this._onResize = null;
   };
 
-  // TODO: make this function deprecated (replaced with `on` since version 0.5)
-  DataSet.prototype.subscribe = DataSet.prototype.on;
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Graph2d.prototype._onTouch = function (event) {
+    this.touch.allowDragging = true;
+  };
 
   /**
-   * Unsubscribe from an event, remove an event listener
-   * @param {String} event
-   * @param {function} callback
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  DataSet.prototype.off = function(event, callback) {
-    var subscribers = this._subscribers[event];
-    if (subscribers) {
-      this._subscribers[event] = subscribers.filter(function (listener) {
-        return (listener.callback != callback);
-      });
-    }
+  Graph2d.prototype._onPinch = function (event) {
+    this.touch.allowDragging = false;
   };
 
-  // TODO: make this function deprecated (replaced with `on` since version 0.5)
-  DataSet.prototype.unsubscribe = DataSet.prototype.off;
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Graph2d.prototype._onDragStart = function (event) {
+    this.touch.initialScrollTop = this.props.scrollTop;
+  };
 
   /**
-   * Trigger an event
-   * @param {String} event
-   * @param {Object | null} params
-   * @param {String} [senderId]       Optional id of the sender.
+   * Move the timeline vertically
+   * @param {Event} event
    * @private
    */
-  DataSet.prototype._trigger = function (event, params, senderId) {
-    if (event == '*') {
-      throw new Error('Cannot trigger event *');
-    }
+  Graph2d.prototype._onDrag = function (event) {
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.touch.allowDragging) return;
 
-    var subscribers = [];
-    if (event in this._subscribers) {
-      subscribers = subscribers.concat(this._subscribers[event]);
-    }
-    if ('*' in this._subscribers) {
-      subscribers = subscribers.concat(this._subscribers['*']);
-    }
+    var delta = event.gesture.deltaY;
 
-    for (var i = 0; i < subscribers.length; i++) {
-      var subscriber = subscribers[i];
-      if (subscriber.callback) {
-        subscriber.callback(event, params, senderId || null);
-      }
+    var oldScrollTop = this._getScrollTop();
+    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+
+    if (newScrollTop != oldScrollTop) {
+      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
     }
   };
 
   /**
-   * Add data.
-   * Adding an item will fail when there already is an item with the same id.
-   * @param {Object | Array | DataTable} data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} addedIds      Array with the ids of the added items
+   * Apply a scrollTop
+   * @param {Number} scrollTop
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
    */
-  DataSet.prototype.add = function (data, senderId) {
-    var addedIds = [],
-        id,
-        me = this;
+  Graph2d.prototype._setScrollTop = function (scrollTop) {
+    this.props.scrollTop = scrollTop;
+    this._updateScrollTop();
+    return this.props.scrollTop;
+  };
 
-    if (Array.isArray(data)) {
-      // Array
-      for (var i = 0, len = data.length; i < len; i++) {
-        id = me._addItem(data[i]);
-        addedIds.push(id);
+  /**
+   * Update the current scrollTop when the height of  the containers has been changed
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
+   */
+  Graph2d.prototype._updateScrollTop = function () {
+    // recalculate the scrollTopMin
+    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
+    if (scrollTopMin != this.props.scrollTopMin) {
+      // in case of bottom orientation, change the scrollTop such that the contents
+      // do not move relative to the time axis at the bottom
+      if (this.options.orientation == 'bottom') {
+        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
       }
+      this.props.scrollTopMin = scrollTopMin;
     }
-    else if (util.isDataTable(data)) {
-      // Google DataTable
-      var columns = this._getColumnNames(data);
-      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-        var item = {};
-        for (var col = 0, cols = columns.length; col < cols; col++) {
-          var field = columns[col];
-          item[field] = data.getValue(row, col);
-        }
 
-        id = me._addItem(item);
-        addedIds.push(id);
-      }
-    }
-    else if (data instanceof Object) {
-      // Single item
-      id = me._addItem(data);
-      addedIds.push(id);
-    }
-    else {
-      throw new Error('Unknown dataType');
-    }
+    // limit the scrollTop to the feasible scroll range
+    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
+    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
-    if (addedIds.length) {
-      this._trigger('add', {items: addedIds}, senderId);
-    }
+    return this.props.scrollTop;
+  };
 
-    return addedIds;
+  /**
+   * Get the current scrollTop
+   * @returns {number} scrollTop
+   * @private
+   */
+  Graph2d.prototype._getScrollTop = function () {
+    return this.props.scrollTop;
   };
 
+  module.exports = Graph2d;
+
+
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var moment = __webpack_require__(38);
+  var Component = __webpack_require__(12);
+
   /**
-   * Update existing items. When an item does not exist, it will be created
-   * @param {Object | Array | DataTable} data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} updatedIds     The ids of the added or updated items
+   * @constructor Range
+   * A Range controls a numeric range with a start and end value.
+   * The Range adjusts the range based on mouse events or programmatic changes,
+   * and triggers events when the range is changing or has been changed.
+   * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
+   * @param {Object} [options]    See description at Range.setOptions
    */
-  DataSet.prototype.update = function (data, senderId) {
-    var addedIds = [],
-        updatedIds = [],
-        me = this,
-        fieldId = me._fieldId;
+  function Range(body, options) {
+    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
+    this.start = now.clone().add('days', -3).valueOf(); // Number
+    this.end = now.clone().add('days', 4).valueOf();   // Number
 
-    var addOrUpdate = function (item) {
-      var id = item[fieldId];
-      if (me._data[id]) {
-        // update item
-        id = me._updateItem(item);
-        updatedIds.push(id);
-      }
-      else {
-        // add new item
-        id = me._addItem(item);
-        addedIds.push(id);
-      }
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      start: null,
+      end: null,
+      direction: 'horizontal', // 'horizontal' or 'vertical'
+      moveable: true,
+      zoomable: true,
+      min: null,
+      max: null,
+      zoomMin: 10,                                // milliseconds
+      zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000  // milliseconds
     };
+    this.options = util.extend({}, this.defaultOptions);
 
-    if (Array.isArray(data)) {
-      // Array
-      for (var i = 0, len = data.length; i < len; i++) {
-        addOrUpdate(data[i]);
-      }
-    }
-    else if (util.isDataTable(data)) {
-      // Google DataTable
-      var columns = this._getColumnNames(data);
-      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-        var item = {};
-        for (var col = 0, cols = columns.length; col < cols; col++) {
-          var field = columns[col];
-          item[field] = data.getValue(row, col);
-        }
+    this.props = {
+      touch: {}
+    };
 
-        addOrUpdate(item);
-      }
-    }
-    else if (data instanceof Object) {
-      // Single item
-      addOrUpdate(data);
-    }
-    else {
-      throw new Error('Unknown dataType');
-    }
+    // drag listeners for dragging
+    this.body.emitter.on('dragstart', this._onDragStart.bind(this));
+    this.body.emitter.on('drag',      this._onDrag.bind(this));
+    this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
 
-    if (addedIds.length) {
-      this._trigger('add', {items: addedIds}, senderId);
-    }
-    if (updatedIds.length) {
-      this._trigger('update', {items: updatedIds}, senderId);
-    }
+    // ignore dragging when holding
+    this.body.emitter.on('hold', this._onHold.bind(this));
 
-    return addedIds.concat(updatedIds);
-  };
+    // mouse wheel for zooming
+    this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));
+    this.body.emitter.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
+
+    // pinch to zoom
+    this.body.emitter.on('touch', this._onTouch.bind(this));
+    this.body.emitter.on('pinch', this._onPinch.bind(this));
+
+    this.setOptions(options);
+  }
+
+  Range.prototype = new Component();
 
   /**
-   * Get a data item or multiple items.
-   *
-   * Usage:
-   *
-   *     get()
-   *     get(options: Object)
-   *     get(options: Object, data: Array | DataTable)
-   *
-   *     get(id: Number | String)
-   *     get(id: Number | String, options: Object)
-   *     get(id: Number | String, options: Object, data: Array | DataTable)
-   *
-   *     get(ids: Number[] | String[])
-   *     get(ids: Number[] | String[], options: Object)
-   *     get(ids: Number[] | String[], options: Object, data: Array | DataTable)
-   *
-   * Where:
-   *
-   * {Number | String} id         The id of an item
-   * {Number[] | String{}} ids    An array with ids of items
-   * {Object} options             An Object with options. Available options:
-   *                              {String} [returnType] Type of data to be
-   *                                  returned. Can be 'DataTable' or 'Array' (default)
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] field names to be returned
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * {Array | DataTable} [data]   If provided, items will be appended to this
-   *                              array or table. Required in case of Google
-   *                              DataTable.
-   *
-   * @throws Error
+   * Set options for the range controller
+   * @param {Object} options      Available options:
+   *                              {Number | Date | String} start  Start date for the range
+   *                              {Number | Date | String} end    End date for the range
+   *                              {Number} min    Minimum value for start
+   *                              {Number} max    Maximum value for end
+   *                              {Number} zoomMin    Set a minimum value for
+   *                                                  (end - start).
+   *                              {Number} zoomMax    Set a maximum value for
+   *                                                  (end - start).
+   *                              {Boolean} moveable Enable moving of the range
+   *                                                 by dragging. True by default
+   *                              {Boolean} zoomable Enable zooming of the range
+   *                                                 by pinching/scrolling. True by default
    */
-  DataSet.prototype.get = function (args) {
-    var me = this;
+  Range.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the options that we know
+      var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
+      util.selectiveExtend(fields, this.options, options);
 
-    // parse the arguments
-    var id, ids, options, data;
-    var firstType = util.getType(arguments[0]);
-    if (firstType == 'String' || firstType == 'Number') {
-      // get(id [, options] [, data])
-      id = arguments[0];
-      options = arguments[1];
-      data = arguments[2];
+      if ('start' in options || 'end' in options) {
+        // apply a new range. both start and end are optional
+        this.setRange(options.start, options.end);
+      }
     }
-    else if (firstType == 'Array') {
-      // get(ids [, options] [, data])
-      ids = arguments[0];
-      options = arguments[1];
-      data = arguments[2];
+  };
+
+  /**
+   * Test whether direction has a valid value
+   * @param {String} direction    'horizontal' or 'vertical'
+   */
+  function validateDirection (direction) {
+    if (direction != 'horizontal' && direction != 'vertical') {
+      throw new TypeError('Unknown direction "' + direction + '". ' +
+          'Choose "horizontal" or "vertical".');
     }
-    else {
-      // get([, options] [, data])
-      options = arguments[0];
-      data = arguments[1];
+  }
+
+  /**
+   * Set a new start and end range
+   * @param {Number} [start]
+   * @param {Number} [end]
+   */
+  Range.prototype.setRange = function(start, end) {
+    var changed = this._applyRange(start, end);
+    if (changed) {
+      var params = {
+        start: new Date(this.start),
+        end: new Date(this.end)
+      };
+      this.body.emitter.emit('rangechange', params);
+      this.body.emitter.emit('rangechanged', params);
     }
+  };
 
-    // determine the return type
-    var returnType;
-    if (options && options.returnType) {
-      returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
+  /**
+   * Set a new start and end range. This method is the same as setRange, but
+   * does not trigger a range change and range changed event, and it returns
+   * true when the range is changed
+   * @param {Number} [start]
+   * @param {Number} [end]
+   * @return {Boolean} changed
+   * @private
+   */
+  Range.prototype._applyRange = function(start, end) {
+    var newStart = (start != null) ? util.convert(start, 'Date').valueOf() : this.start,
+        newEnd   = (end != null)   ? util.convert(end, 'Date').valueOf()   : this.end,
+        max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
+        min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
+        diff;
 
-      if (data && (returnType != util.getType(data))) {
-        throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
-            'does not correspond with specified options.type (' + options.type + ')');
-      }
-      if (returnType == 'DataTable' && !util.isDataTable(data)) {
-        throw new Error('Parameter "data" must be a DataTable ' +
-            'when options.type is "DataTable"');
-      }
+    // check for valid number
+    if (isNaN(newStart) || newStart === null) {
+      throw new Error('Invalid start "' + start + '"');
     }
-    else if (data) {
-      returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+    if (isNaN(newEnd) || newEnd === null) {
+      throw new Error('Invalid end "' + end + '"');
     }
-    else {
-      returnType = 'Array';
+
+    // prevent start < end
+    if (newEnd < newStart) {
+      newEnd = newStart;
     }
 
-    // build options
-    var type = options && options.type || this._options.type;
-    var filter = options && options.filter;
-    var items = [], item, itemId, i, len;
+    // prevent start < min
+    if (min !== null) {
+      if (newStart < min) {
+        diff = (min - newStart);
+        newStart += diff;
+        newEnd += diff;
 
-    // convert items
-    if (id != undefined) {
-      // return a single item
-      item = me._getItem(id, type);
-      if (filter && !filter(item)) {
-        item = null;
-      }
-    }
-    else if (ids != undefined) {
-      // return a subset of items
-      for (i = 0, len = ids.length; i < len; i++) {
-        item = me._getItem(ids[i], type);
-        if (!filter || filter(item)) {
-          items.push(item);
-        }
-      }
-    }
-    else {
-      // return all items
-      for (itemId in this._data) {
-        if (this._data.hasOwnProperty(itemId)) {
-          item = me._getItem(itemId, type);
-          if (!filter || filter(item)) {
-            items.push(item);
+        // prevent end > max
+        if (max != null) {
+          if (newEnd > max) {
+            newEnd = max;
           }
         }
       }
     }
 
-    // order the results
-    if (options && options.order && id == undefined) {
-      this._sort(items, options.order);
-    }
+    // prevent end > max
+    if (max !== null) {
+      if (newEnd > max) {
+        diff = (newEnd - max);
+        newStart -= diff;
+        newEnd -= diff;
 
-    // filter fields of the items
-    if (options && options.fields) {
-      var fields = options.fields;
-      if (id != undefined) {
-        item = this._filterFields(item, fields);
-      }
-      else {
-        for (i = 0, len = items.length; i < len; i++) {
-          items[i] = this._filterFields(items[i], fields);
+        // prevent start < min
+        if (min != null) {
+          if (newStart < min) {
+            newStart = min;
+          }
         }
       }
     }
 
-    // return the results
-    if (returnType == 'DataTable') {
-      var columns = this._getColumnNames(data);
-      if (id != undefined) {
-        // append a single item to the data table
-        me._appendRow(data, columns, item);
+    // prevent (end-start) < zoomMin
+    if (this.options.zoomMin !== null) {
+      var zoomMin = parseFloat(this.options.zoomMin);
+      if (zoomMin < 0) {
+        zoomMin = 0;
       }
-      else {
-        // copy the items to the provided data table
-        for (i = 0, len = items.length; i < len; i++) {
-          me._appendRow(data, columns, items[i]);
+      if ((newEnd - newStart) < zoomMin) {
+        if ((this.end - this.start) === zoomMin) {
+          // ignore this action, we are already zoomed to the minimum
+          newStart = this.start;
+          newEnd = this.end;
+        }
+        else {
+          // zoom to the minimum
+          diff = (zoomMin - (newEnd - newStart));
+          newStart -= diff / 2;
+          newEnd += diff / 2;
         }
       }
-      return data;
     }
-    else {
-      // return an array
-      if (id != undefined) {
-        // a single item
-        return item;
+
+    // prevent (end-start) > zoomMax
+    if (this.options.zoomMax !== null) {
+      var zoomMax = parseFloat(this.options.zoomMax);
+      if (zoomMax < 0) {
+        zoomMax = 0;
       }
-      else {
-        // multiple items
-        if (data) {
-          // copy the items to the provided array
-          for (i = 0, len = items.length; i < len; i++) {
-            data.push(items[i]);
-          }
-          return data;
+      if ((newEnd - newStart) > zoomMax) {
+        if ((this.end - this.start) === zoomMax) {
+          // ignore this action, we are already zoomed to the maximum
+          newStart = this.start;
+          newEnd = this.end;
         }
         else {
-          // just return our array
-          return items;
+          // zoom to the maximum
+          diff = ((newEnd - newStart) - zoomMax);
+          newStart += diff / 2;
+          newEnd -= diff / 2;
         }
       }
     }
+
+    var changed = (this.start != newStart || this.end != newEnd);
+
+    this.start = newStart;
+    this.end = newEnd;
+
+    return changed;
   };
 
   /**
-   * Get ids of all items or from a filtered set of items.
-   * @param {Object} [options]    An Object with options. Available options:
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Array} ids
+   * Retrieve the current range.
+   * @return {Object} An object with start and end properties
    */
-  DataSet.prototype.getIds = function (options) {
-    var data = this._data,
-        filter = options && options.filter,
-        order = options && options.order,
-        type = options && options.type || this._options.type,
-        i,
-        len,
-        id,
-        item,
-        items,
-        ids = [];
-
-    if (filter) {
-      // get filtered items
-      if (order) {
-        // create ordered list
-        items = [];
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = this._getItem(id, type);
-            if (filter(item)) {
-              items.push(item);
-            }
-          }
-        }
+  Range.prototype.getRange = function() {
+    return {
+      start: this.start,
+      end: this.end
+    };
+  };
 
-        this._sort(items, order);
+  /**
+   * Calculate the conversion offset and scale for current range, based on
+   * the provided width
+   * @param {Number} width
+   * @returns {{offset: number, scale: number}} conversion
+   */
+  Range.prototype.conversion = function (width) {
+    return Range.conversion(this.start, this.end, width);
+  };
 
-        for (i = 0, len = items.length; i < len; i++) {
-          ids[i] = items[i][this._fieldId];
-        }
-      }
-      else {
-        // create unordered list
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = this._getItem(id, type);
-            if (filter(item)) {
-              ids.push(item[this._fieldId]);
-            }
-          }
-        }
+  /**
+   * Static method to calculate the conversion offset and scale for a range,
+   * based on the provided start, end, and width
+   * @param {Number} start
+   * @param {Number} end
+   * @param {Number} width
+   * @returns {{offset: number, scale: number}} conversion
+   */
+  Range.conversion = function (start, end, width) {
+    if (width != 0 && (end - start != 0)) {
+      return {
+        offset: start,
+        scale: width / (end - start)
       }
     }
     else {
-      // get all items
-      if (order) {
-        // create an ordered list
-        items = [];
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            items.push(data[id]);
-          }
-        }
+      return {
+        offset: 0,
+        scale: 1
+      };
+    }
+  };
 
-        this._sort(items, order);
+  /**
+   * Start dragging horizontally or vertically
+   * @param {Event} event
+   * @private
+   */
+  Range.prototype._onDragStart = function(event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
 
-        for (i = 0, len = items.length; i < len; i++) {
-          ids[i] = items[i][this._fieldId];
-        }
-      }
-      else {
-        // create unordered list
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = data[id];
-            ids.push(item[this._fieldId]);
-          }
-        }
-      }
-    }
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
 
-    return ids;
+    this.props.touch.start = this.start;
+    this.props.touch.end = this.end;
+
+    if (this.body.dom.root) {
+      this.body.dom.root.style.cursor = 'move';
+    }
   };
 
   /**
-   * Returns the DataSet itself. Is overwritten for example by the DataView,
-   * which returns the DataSet it is connected to instead.
+   * Perform dragging operation
+   * @param {Event} event
+   * @private
    */
-  DataSet.prototype.getDataSet = function () {
-    return this;
+  Range.prototype._onDrag = function (event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
+    var direction = this.options.direction;
+    validateDirection(direction);
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
+    var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
+        interval = (this.props.touch.end - this.props.touch.start),
+        width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
+        diffRange = -delta / width * interval;
+    this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
+    this.body.emitter.emit('rangechange', {
+      start: new Date(this.start),
+      end:   new Date(this.end)
+    });
   };
 
   /**
-   * Execute a callback function for every item in the dataset.
-   * @param {function} callback
-   * @param {Object} [options]    Available options:
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] filter fields
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
+   * Stop dragging operation
+   * @param {event} event
+   * @private
    */
-  DataSet.prototype.forEach = function (callback, options) {
-    var filter = options && options.filter,
-        type = options && options.type || this._options.type,
-        data = this._data,
-        item,
-        id;
+  Range.prototype._onDragEnd = function (event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
 
-    if (options && options.order) {
-      // execute forEach on ordered list
-      var items = this.get(options);
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
 
-      for (var i = 0, len = items.length; i < len; i++) {
-        item = items[i];
-        id = item[this._fieldId];
-        callback(item, id);
-      }
-    }
-    else {
-      // unordered
-      for (id in data) {
-        if (data.hasOwnProperty(id)) {
-          item = this._getItem(id, type);
-          if (!filter || filter(item)) {
-            callback(item, id);
-          }
-        }
-      }
+    if (this.body.dom.root) {
+      this.body.dom.root.style.cursor = 'auto';
     }
+
+    // fire a rangechanged event
+    this.body.emitter.emit('rangechanged', {
+      start: new Date(this.start),
+      end:   new Date(this.end)
+    });
   };
 
   /**
-   * Map every item in the dataset.
-   * @param {function} callback
-   * @param {Object} [options]    Available options:
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] filter fields
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Object[]} mappedItems
+   * Event handler for mouse wheel event, used to zoom
+   * Code from http://adomas.org/javascript-mouse-wheel/
+   * @param {Event} event
+   * @private
    */
-  DataSet.prototype.map = function (callback, options) {
-    var filter = options && options.filter,
-        type = options && options.type || this._options.type,
-        mappedItems = [],
-        data = this._data,
-        item;
+  Range.prototype._onMouseWheel = function(event) {
+    // only allow zooming when configured as zoomable and moveable
+    if (!(this.options.zoomable && this.options.moveable)) return;
 
-    // convert and filter items
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        item = this._getItem(id, type);
-        if (!filter || filter(item)) {
-          mappedItems.push(callback(item, id));
-        }
-      }
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta / 120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail / 3;
     }
 
-    // order items
-    if (options && options.order) {
-      this._sort(mappedItems, options.order);
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+      // perform the zoom action. Delta is normally 1 or -1
+
+      // adjust a negative delta such that zooming in with delta 0.1
+      // equals zooming out with a delta -0.1
+      var scale;
+      if (delta < 0) {
+        scale = 1 - (delta / 5);
+      }
+      else {
+        scale = 1 / (1 + (delta / 5)) ;
+      }
+
+      // calculate center, the date to zoom around
+      var gesture = util.fakeGesture(this, event),
+          pointer = getPointer(gesture.center, this.body.dom.center),
+          pointerDate = this._pointerToDate(pointer);
+
+      this.zoom(scale, pointerDate);
     }
 
-    return mappedItems;
+    // Prevent default actions caused by mouse wheel
+    // (else the page and timeline both zoom and scroll)
+    event.preventDefault();
   };
 
   /**
-   * Filter the fields of an item
-   * @param {Object} item
-   * @param {String[]} fields     Field names
-   * @return {Object} filteredItem
+   * Start of a touch gesture
    * @private
    */
-  DataSet.prototype._filterFields = function (item, fields) {
-    var filteredItem = {};
-
-    for (var field in item) {
-      if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
-        filteredItem[field] = item[field];
-      }
-    }
-
-    return filteredItem;
+  Range.prototype._onTouch = function (event) {
+    this.props.touch.start = this.start;
+    this.props.touch.end = this.end;
+    this.props.touch.allowDragging = true;
+    this.props.touch.center = null;
   };
 
   /**
-   * Sort the provided array with items
-   * @param {Object[]} items
-   * @param {String | function} order      A field name or custom sort function.
+   * On start of a hold gesture
    * @private
    */
-  DataSet.prototype._sort = function (items, order) {
-    if (util.isString(order)) {
-      // order by provided field name
-      var name = order; // field name
-      items.sort(function (a, b) {
-        var av = a[name];
-        var bv = b[name];
-        return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
-      });
-    }
-    else if (typeof order === 'function') {
-      // order by sort function
-      items.sort(order);
-    }
-    // TODO: extend order by an Object {field:String, direction:String}
-    //       where direction can be 'asc' or 'desc'
-    else {
-      throw new TypeError('Order must be a function or a string');
-    }
+  Range.prototype._onHold = function () {
+    this.props.touch.allowDragging = false;
   };
 
   /**
-   * Remove an object by pointer or by id
-   * @param {String | Number | Object | Array} id Object or id, or an array with
-   *                                              objects or ids to be removed
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} removedIds
+   * Handle pinch event
+   * @param {Event} event
+   * @private
    */
-  DataSet.prototype.remove = function (id, senderId) {
-    var removedIds = [],
-        i, len, removedId;
+  Range.prototype._onPinch = function (event) {
+    // only allow zooming when configured as zoomable and moveable
+    if (!(this.options.zoomable && this.options.moveable)) return;
 
-    if (Array.isArray(id)) {
-      for (i = 0, len = id.length; i < len; i++) {
-        removedId = this._remove(id[i]);
-        if (removedId != null) {
-          removedIds.push(removedId);
-        }
-      }
-    }
-    else {
-      removedId = this._remove(id);
-      if (removedId != null) {
-        removedIds.push(removedId);
+    this.props.touch.allowDragging = false;
+
+    if (event.gesture.touches.length > 1) {
+      if (!this.props.touch.center) {
+        this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
       }
-    }
 
-    if (removedIds.length) {
-      this._trigger('remove', {items: removedIds}, senderId);
-    }
+      var scale = 1 / event.gesture.scale,
+          initDate = this._pointerToDate(this.props.touch.center);
+
+      // calculate new start and end
+      var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
+      var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
 
-    return removedIds;
+      // apply new range
+      this.setRange(newStart, newEnd);
+    }
   };
 
   /**
-   * Remove an item by its id
-   * @param {Number | String | Object} id   id or item
-   * @returns {Number | String | null} id
+   * Helper function to calculate the center date for zooming
+   * @param {{x: Number, y: Number}} pointer
+   * @return {number} date
    * @private
    */
-  DataSet.prototype._remove = function (id) {
-    if (util.isNumber(id) || util.isString(id)) {
-      if (this._data[id]) {
-        delete this._data[id];
-        return id;
-      }
+  Range.prototype._pointerToDate = function (pointer) {
+    var conversion;
+    var direction = this.options.direction;
+
+    validateDirection(direction);
+
+    if (direction == 'horizontal') {
+      var width = this.body.domProps.center.width;
+      conversion = this.conversion(width);
+      return pointer.x / conversion.scale + conversion.offset;
     }
-    else if (id instanceof Object) {
-      var itemId = id[this._fieldId];
-      if (itemId && this._data[itemId]) {
-        delete this._data[itemId];
-        return itemId;
-      }
+    else {
+      var height = this.body.domProps.center.height;
+      conversion = this.conversion(height);
+      return pointer.y / conversion.scale + conversion.offset;
     }
-    return null;
   };
 
   /**
-   * Clear the data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} removedIds    The ids of all removed items
+   * Get the pointer location relative to the location of the dom element
+   * @param {{pageX: Number, pageY: Number}} touch
+   * @param {Element} element   HTML DOM element
+   * @return {{x: Number, y: Number}} pointer
+   * @private
    */
-  DataSet.prototype.clear = function (senderId) {
-    var ids = Object.keys(this._data);
-
-    this._data = {};
-
-    this._trigger('remove', {items: ids}, senderId);
-
-    return ids;
-  };
+  function getPointer (touch, element) {
+    return {
+      x: touch.pageX - util.getAbsoluteLeft(element),
+      y: touch.pageY - util.getAbsoluteTop(element)
+    };
+  }
 
   /**
-   * Find the item with maximum value of a specified field
-   * @param {String} field
-   * @return {Object | null} item  Item containing max value, or null if no items
+   * Zoom the range the given scale in or out. Start and end date will
+   * be adjusted, and the timeline will be redrawn. You can optionally give a
+   * date around which to zoom.
+   * For example, try scale = 0.9 or 1.1
+   * @param {Number} scale      Scaling factor. Values above 1 will zoom out,
+   *                            values below 1 will zoom in.
+   * @param {Number} [center]   Value representing a date around which will
+   *                            be zoomed.
    */
-  DataSet.prototype.max = function (field) {
-    var data = this._data,
-        max = null,
-        maxField = null;
-
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        var item = data[id];
-        var itemField = item[field];
-        if (itemField != null && (!max || itemField > maxField)) {
-          max = item;
-          maxField = itemField;
-        }
-      }
+  Range.prototype.zoom = function(scale, center) {
+    // if centerDate is not provided, take it half between start Date and end Date
+    if (center == null) {
+      center = (this.start + this.end) / 2;
     }
 
-    return max;
+    // calculate new start and end
+    var newStart = center + (this.start - center) * scale;
+    var newEnd = center + (this.end - center) * scale;
+
+    this.setRange(newStart, newEnd);
   };
 
   /**
-   * Find the item with minimum value of a specified field
-   * @param {String} field
-   * @return {Object | null} item  Item containing max value, or null if no items
+   * Move the range with a given delta to the left or right. Start and end
+   * value will be adjusted. For example, try delta = 0.1 or -0.1
+   * @param {Number}  delta     Moving amount. Positive value will move right,
+   *                            negative value will move left
    */
-  DataSet.prototype.min = function (field) {
-    var data = this._data,
-        min = null,
-        minField = null;
+  Range.prototype.move = function(delta) {
+    // zoom start Date and end Date relative to the centerDate
+    var diff = (this.end - this.start);
 
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        var item = data[id];
-        var itemField = item[field];
-        if (itemField != null && (!min || itemField < minField)) {
-          min = item;
-          minField = itemField;
-        }
-      }
-    }
+    // apply new values
+    var newStart = this.start + diff * delta;
+    var newEnd = this.end + diff * delta;
 
-    return min;
+    // TODO: reckon with min and max range
+
+    this.start = newStart;
+    this.end = newEnd;
   };
 
   /**
-   * Find all distinct values of a specified field
-   * @param {String} field
-   * @return {Array} values  Array containing all distinct values. If data items
-   *                         do not contain the specified field are ignored.
-   *                         The returned array is unordered.
+   * Move the range to a new center point
+   * @param {Number} moveTo      New center point of the range
    */
-  DataSet.prototype.distinct = function (field) {
-    var data = this._data;
-    var values = [];
-    var fieldType = this._options.type && this._options.type[field] || null;
-    var count = 0;
-    var i;
+  Range.prototype.moveTo = function(moveTo) {
+    var center = (this.start + this.end) / 2;
 
-    for (var prop in data) {
-      if (data.hasOwnProperty(prop)) {
-        var item = data[prop];
-        var value = item[field];
-        var exists = false;
-        for (i = 0; i < count; i++) {
-          if (values[i] == value) {
-            exists = true;
-            break;
-          }
-        }
-        if (!exists && (value !== undefined)) {
-          values[count] = value;
-          count++;
-        }
-      }
-    }
+    var diff = center - moveTo;
 
-    if (fieldType) {
-      for (i = 0; i < values.length; i++) {
-        values[i] = util.convert(values[i], fieldType);
-      }
-    }
+    // calculate new start and end
+    var newStart = this.start - diff;
+    var newEnd = this.end - diff;
 
-    return values;
+    this.setRange(newStart, newEnd);
   };
 
-  /**
-   * Add a single item. Will fail when an item with the same id already exists.
-   * @param {Object} item
-   * @return {String} id
-   * @private
-   */
-  DataSet.prototype._addItem = function (item) {
-    var id = item[this._fieldId];
+  module.exports = Range;
 
-    if (id != undefined) {
-      // check whether this id is already taken
-      if (this._data[id]) {
-        // item already exists
-        throw new Error('Cannot add item: item with id ' + id + ' already exists');
-      }
-    }
-    else {
-      // generate an id
-      id = util.randomUUID();
-      item[this._fieldId] = id;
-    }
 
-    var d = {};
-    for (var field in item) {
-      if (item.hasOwnProperty(field)) {
-        var fieldType = this._type[field];  // type may be undefined
-        d[field] = util.convert(item[field], fieldType);
-      }
-    }
-    this._data[id] = d;
+/***/ },
+/* 9 */
+/***/ function(module, exports, __webpack_require__) {
 
-    return id;
-  };
+  // Utility functions for ordering and stacking of items
+  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
 
   /**
-   * Get an item. Fields can be converted to a specific type
-   * @param {String} id
-   * @param {Object.<String, String>} [types]  field types to convert
-   * @return {Object | null} item
-   * @private
+   * Order items by their start data
+   * @param {Item[]} items
    */
-  DataSet.prototype._getItem = function (id, types) {
-    var field, value;
+  exports.orderByStart = function(items) {
+    items.sort(function (a, b) {
+      return a.data.start - b.data.start;
+    });
+  };
 
-    // get the item from the dataset
-    var raw = this._data[id];
-    if (!raw) {
-      return null;
-    }
+  /**
+   * Order items by their end date. If they have no end date, their start date
+   * is used.
+   * @param {Item[]} items
+   */
+  exports.orderByEnd = function(items) {
+    items.sort(function (a, b) {
+      var aTime = ('end' in a.data) ? a.data.end : a.data.start,
+          bTime = ('end' in b.data) ? b.data.end : b.data.start;
 
-    // convert the items field types
-    var converted = {};
-    if (types) {
-      for (field in raw) {
-        if (raw.hasOwnProperty(field)) {
-          value = raw[field];
-          converted[field] = util.convert(value, types[field]);
-        }
-      }
-    }
-    else {
-      // no field types specified, no converting needed
-      for (field in raw) {
-        if (raw.hasOwnProperty(field)) {
-          value = raw[field];
-          converted[field] = value;
-        }
-      }
-    }
-    return converted;
+      return aTime - bTime;
+    });
   };
 
   /**
-   * Update a single item: merge with existing item.
-   * Will fail when the item has no id, or when there does not exist an item
-   * with the same id.
-   * @param {Object} item
-   * @return {String} id
-   * @private
+   * Adjust vertical positions of the items such that they don't overlap each
+   * other.
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: number, axis: number}} margin
+   *            Margins between items and between items and the axis.
+   * @param {boolean} [force=false]
+   *            If true, all items will be repositioned. If false (default), only
+   *            items having a top===null will be re-stacked
    */
-  DataSet.prototype._updateItem = function (item) {
-    var id = item[this._fieldId];
-    if (id == undefined) {
-      throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
-    }
-    var d = this._data[id];
-    if (!d) {
-      // item doesn't exist
-      throw new Error('Cannot update item: no item with id ' + id + ' found');
-    }
+  exports.stack = function(items, margin, force) {
+    var i, iMax;
 
-    // merge with current item
-    for (var field in item) {
-      if (item.hasOwnProperty(field)) {
-        var fieldType = this._type[field];  // type may be undefined
-        d[field] = util.convert(item[field], fieldType);
+    if (force) {
+      // reset top position of all items
+      for (i = 0, iMax = items.length; i < iMax; i++) {
+        items[i].top = null;
       }
     }
 
-    return id;
-  };
+    // calculate new, non-overlapping positions
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      var item = items[i];
+      if (item.top === null) {
+        // initialize top position
+        item.top = margin.axis;
 
-  /**
-   * Get an array with the column names of a Google DataTable
-   * @param {DataTable} dataTable
-   * @return {String[]} columnNames
-   * @private
-   */
-  DataSet.prototype._getColumnNames = function (dataTable) {
-    var columns = [];
-    for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
-      columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
+        do {
+          // TODO: optimize checking for overlap. when there is a gap without items,
+          //       you only need to check for items from the next item on, not from zero
+          var collidingItem = null;
+          for (var j = 0, jj = items.length; j < jj; j++) {
+            var other = items[j];
+            if (other.top !== null && other !== item && exports.collision(item, other, margin.item)) {
+              collidingItem = other;
+              break;
+            }
+          }
+
+          if (collidingItem != null) {
+            // There is a collision. Reposition the items above the colliding element
+            item.top = collidingItem.top + collidingItem.height + margin.item;
+          }
+        } while (collidingItem);
+      }
     }
-    return columns;
   };
 
   /**
-   * Append an item as a row to the dataTable
-   * @param dataTable
-   * @param columns
-   * @param item
-   * @private
+   * Adjust vertical positions of the items without stacking them
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: number, axis: number}} margin
+   *            Margins between items and between items and the axis.
    */
-  DataSet.prototype._appendRow = function (dataTable, columns, item) {
-    var row = dataTable.addRow();
+  exports.nostack = function(items, margin) {
+    var i, iMax;
 
-    for (var col = 0, cols = columns.length; col < cols; col++) {
-      var field = columns[col];
-      dataTable.setValue(row, col, item[field]);
+    // reset top position of all items
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      items[i].top = margin.axis;
     }
   };
 
-  module.exports = DataSet;
+  /**
+   * Test if the two provided items collide
+   * The items must have parameters left, width, top, and height.
+   * @param {Item} a          The first item
+   * @param {Item} b          The second item
+   * @param {Number} margin   A minimum required margin.
+   *                          If margin is provided, the two items will be
+   *                          marked colliding when they overlap or
+   *                          when the margin between the two is smaller than
+   *                          the requested margin.
+   * @return {boolean}        true if a and b collide, else false
+   */
+  exports.collision = function(a, b, margin) {
+    return ((a.left - margin + EPSILON)       < (b.left + b.width) &&
+        (a.left + a.width + margin - EPSILON) > b.left &&
+        (a.top - margin + EPSILON)            < (b.top + b.height) &&
+        (a.top + a.height + margin - EPSILON) > b.top);
+  };
 
 
 /***/ },
 /* 10 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(9);
+  var moment = __webpack_require__(38);
 
   /**
-   * DataView
+   * @constructor  TimeStep
+   * The class TimeStep is an iterator for dates. You provide a start date and an
+   * end date. The class itself determines the best scale (step size) based on the
+   * provided start Date, end Date, and minimumStep.
    *
-   * a dataview offers a filtered view on a dataset or an other dataview.
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
    *
-   * @param {DataSet | DataView} data
-   * @param {Object} [options]   Available options: see method get
+   * Alternatively, you can set a scale by hand.
+   * After creation, you can initialize the class by executing first(). Then you
+   * can iterate from the start date to the end date via next(). You can check if
+   * the end date is reached with the function hasNext(). After each step, you can
+   * retrieve the current date via getCurrent().
+   * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
+   * days, to years.
    *
-   * @constructor DataView
+   * Version: 1.2
+   *
+   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
+   *                               or new Date(2010, 9, 21, 23, 45, 00)
+   * @param {Date} [end]           The end date
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  function DataView (data, options) {
-    this._data = null;
-    this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
-    this._options = options || {};
-    this._fieldId = 'id'; // name of the field containing id
-    this._subscribers = {}; // event subscribers
+  function TimeStep(start, end, minimumStep) {
+    // variables
+    this.current = new Date();
+    this._start = new Date();
+    this._end = new Date();
 
-    var me = this;
-    this.listener = function () {
-      me._onEvent.apply(me, arguments);
-    };
+    this.autoScale  = true;
+    this.scale = TimeStep.SCALE.DAY;
+    this.step = 1;
 
-    this.setData(data);
+    // initialize the range
+    this.setRange(start, end, minimumStep);
   }
 
-  // TODO: implement a function .config() to dynamically update things like configured filter
-  // and trigger changes accordingly
+  /// enum scale
+  TimeStep.SCALE = {
+    MILLISECOND: 1,
+    SECOND: 2,
+    MINUTE: 3,
+    HOUR: 4,
+    DAY: 5,
+    WEEKDAY: 6,
+    MONTH: 7,
+    YEAR: 8
+  };
+
+
+  /**
+   * Set a new range
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   * @param {Date} [start]      The start date and time.
+   * @param {Date} [end]        The end date and time.
+   * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
+   */
+  TimeStep.prototype.setRange = function(start, end, minimumStep) {
+    if (!(start instanceof Date) || !(end instanceof Date)) {
+      throw  "No legal start or end date in method setRange";
+    }
+
+    this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
+    this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
+
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep);
+    }
+  };
+
+  /**
+   * Set the range iterator to the start date.
+   */
+  TimeStep.prototype.first = function() {
+    this.current = new Date(this._start.valueOf());
+    this.roundToMinor();
+  };
+
+  /**
+   * Round the current date to the first minor date value
+   * This must be executed once when the current date is set to start Date
+   */
+  TimeStep.prototype.roundToMinor = function() {
+    // round to floor
+    // IMPORTANT: we have no breaks in this switch! (this is no bug)
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.scale) {
+      case TimeStep.SCALE.YEAR:
+        this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
+        this.current.setMonth(0);
+      case TimeStep.SCALE.MONTH:        this.current.setDate(1);
+      case TimeStep.SCALE.DAY:          // intentional fall through
+      case TimeStep.SCALE.WEEKDAY:      this.current.setHours(0);
+      case TimeStep.SCALE.HOUR:         this.current.setMinutes(0);
+      case TimeStep.SCALE.MINUTE:       this.current.setSeconds(0);
+      case TimeStep.SCALE.SECOND:       this.current.setMilliseconds(0);
+      //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
+    }
+
+    if (this.step != 1) {
+      // round down to the first minor value that is a multiple of the current step size
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step);  break;
+        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
+        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
+        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step);  break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
+        default: break;
+      }
+    }
+  };
+
+  /**
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
+   */
+  TimeStep.prototype.hasNext = function () {
+    return (this.current.valueOf() <= this._end.valueOf());
+  };
 
   /**
-   * Set a data source for the view
-   * @param {DataSet | DataView} data
+   * Do the next step
    */
-  DataView.prototype.setData = function (data) {
-    var ids, i, len;
+  TimeStep.prototype.next = function() {
+    var prev = this.current.valueOf();
 
-    if (this._data) {
-      // unsubscribe from current dataset
-      if (this._data.unsubscribe) {
-        this._data.unsubscribe('*', this.listener);
-      }
+    // Two cases, needed to prevent issues with switching daylight savings
+    // (end of March and end of October)
+    if (this.current.getMonth() < 6)   {
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:
 
-      // trigger a remove of all items in memory
-      ids = [];
-      for (var id in this._ids) {
-        if (this._ids.hasOwnProperty(id)) {
-          ids.push(id);
-        }
+          this.current = new Date(this.current.valueOf() + this.step); break;
+        case TimeStep.SCALE.SECOND:       this.current = new Date(this.current.valueOf() + this.step * 1000); break;
+        case TimeStep.SCALE.MINUTE:       this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
+        case TimeStep.SCALE.HOUR:
+          this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
+          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
+          var h = this.current.getHours();
+          this.current.setHours(h - (h % this.step));
+          break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
+        default:                      break;
       }
-      this._ids = {};
-      this._trigger('remove', {items: ids});
     }
-
-    this._data = data;
-
-    if (this._data) {
-      // update fieldId
-      this._fieldId = this._options.fieldId ||
-          (this._data && this._data.options && this._data.options.fieldId) ||
-          'id';
-
-      // trigger an add of all added items
-      ids = this._data.getIds({filter: this._options && this._options.filter});
-      for (i = 0, len = ids.length; i < len; i++) {
-        id = ids[i];
-        this._ids[id] = true;
+    else {
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  this.current = new Date(this.current.valueOf() + this.step); break;
+        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() + this.step); break;
+        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() + this.step); break;
+        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() + this.step); break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
+        default:                      break;
       }
-      this._trigger('add', {items: ids});
+    }
 
-      // subscribe to new dataset
-      if (this._data.on) {
-        this._data.on('*', this.listener);
+    if (this.step != 1) {
+      // round down to the correct major value
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0);  break;
+        case TimeStep.SCALE.SECOND:       if(this.current.getSeconds() < this.step) this.current.setSeconds(0);  break;
+        case TimeStep.SCALE.MINUTE:       if(this.current.getMinutes() < this.step) this.current.setMinutes(0);  break;
+        case TimeStep.SCALE.HOUR:         if(this.current.getHours() < this.step) this.current.setHours(0);  break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
+        case TimeStep.SCALE.MONTH:        if(this.current.getMonth() < this.step) this.current.setMonth(0);  break;
+        case TimeStep.SCALE.YEAR:         break; // nothing to do for year
+        default:                break;
       }
     }
+
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current.valueOf() == prev) {
+      this.current = new Date(this._end.valueOf());
+    }
   };
 
+
   /**
-   * Get data from the data view
-   *
-   * Usage:
-   *
-   *     get()
-   *     get(options: Object)
-   *     get(options: Object, data: Array | DataTable)
-   *
-   *     get(id: Number)
-   *     get(id: Number, options: Object)
-   *     get(id: Number, options: Object, data: Array | DataTable)
-   *
-   *     get(ids: Number[])
-   *     get(ids: Number[], options: Object)
-   *     get(ids: Number[], options: Object, data: Array | DataTable)
-   *
-   * Where:
+   * Get the current datetime
+   * @return {Date}  current The current date
+   */
+  TimeStep.prototype.getCurrent = function() {
+    return this.current;
+  };
+
+  /**
+   * Set a custom scale. Autoscaling will be disabled.
+   * For example setScale(SCALE.MINUTES, 5) will result
+   * in minor steps of 5 minutes, and major steps of an hour.
    *
-   * {Number | String} id         The id of an item
-   * {Number[] | String{}} ids    An array with ids of items
-   * {Object} options             An Object with options. Available options:
-   *                              {String} [type] Type of data to be returned. Can
-   *                                              be 'DataTable' or 'Array' (default)
-   *                              {Object.<String, String>} [convert]
-   *                              {String[]} [fields] field names to be returned
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * {Array | DataTable} [data]   If provided, items will be appended to this
-   *                              array or table. Required in case of Google
-   *                              DataTable.
-   * @param args
+   * @param {TimeStep.SCALE} newScale
+   *                               A scale. Choose from SCALE.MILLISECOND,
+   *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
+   *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
+   *                               SCALE.YEAR.
+   * @param {Number}     newStep   A step size, by default 1. Choose for
+   *                               example 1, 2, 5, or 10.
    */
-  DataView.prototype.get = function (args) {
-    var me = this;
+  TimeStep.prototype.setScale = function(newScale, newStep) {
+    this.scale = newScale;
 
-    // parse the arguments
-    var ids, options, data;
-    var firstType = util.getType(arguments[0]);
-    if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
-      // get(id(s) [, options] [, data])
-      ids = arguments[0];  // can be a single id or an array with ids
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else {
-      // get([, options] [, data])
-      options = arguments[0];
-      data = arguments[1];
+    if (newStep > 0) {
+      this.step = newStep;
     }
 
-    // extend the options with the default options and provided options
-    var viewOptions = util.extend({}, this._options, options);
+    this.autoScale = false;
+  };
 
-    // create a combined filter method when needed
-    if (this._options.filter && options && options.filter) {
-      viewOptions.filter = function (item) {
-        return me._options.filter(item) && options.filter(item);
-      }
-    }
+  /**
+   * Enable or disable autoscaling
+   * @param {boolean} enable  If true, autoascaling is set true
+   */
+  TimeStep.prototype.setAutoScale = function (enable) {
+    this.autoScale = enable;
+  };
 
-    // build up the call to the linked data set
-    var getArguments = [];
-    if (ids != undefined) {
-      getArguments.push(ids);
+
+  /**
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
+   */
+  TimeStep.prototype.setMinimumStep = function(minimumStep) {
+    if (minimumStep == undefined) {
+      return;
     }
-    getArguments.push(viewOptions);
-    getArguments.push(data);
 
-    return this._data && this._data.get.apply(this._data, getArguments);
+    var stepYear       = (1000 * 60 * 60 * 24 * 30 * 12);
+    var stepMonth      = (1000 * 60 * 60 * 24 * 30);
+    var stepDay        = (1000 * 60 * 60 * 24);
+    var stepHour       = (1000 * 60 * 60);
+    var stepMinute     = (1000 * 60);
+    var stepSecond     = (1000);
+    var stepMillisecond= (1);
+
+    // find the smallest step that is larger than the provided minimumStep
+    if (stepYear*1000 > minimumStep)        {this.scale = TimeStep.SCALE.YEAR;        this.step = 1000;}
+    if (stepYear*500 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 500;}
+    if (stepYear*100 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 100;}
+    if (stepYear*50 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 50;}
+    if (stepYear*10 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 10;}
+    if (stepYear*5 > minimumStep)           {this.scale = TimeStep.SCALE.YEAR;        this.step = 5;}
+    if (stepYear > minimumStep)             {this.scale = TimeStep.SCALE.YEAR;        this.step = 1;}
+    if (stepMonth*3 > minimumStep)          {this.scale = TimeStep.SCALE.MONTH;       this.step = 3;}
+    if (stepMonth > minimumStep)            {this.scale = TimeStep.SCALE.MONTH;       this.step = 1;}
+    if (stepDay*5 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 5;}
+    if (stepDay*2 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 2;}
+    if (stepDay > minimumStep)              {this.scale = TimeStep.SCALE.DAY;         this.step = 1;}
+    if (stepDay/2 > minimumStep)            {this.scale = TimeStep.SCALE.WEEKDAY;     this.step = 1;}
+    if (stepHour*4 > minimumStep)           {this.scale = TimeStep.SCALE.HOUR;        this.step = 4;}
+    if (stepHour > minimumStep)             {this.scale = TimeStep.SCALE.HOUR;        this.step = 1;}
+    if (stepMinute*15 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 15;}
+    if (stepMinute*10 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 10;}
+    if (stepMinute*5 > minimumStep)         {this.scale = TimeStep.SCALE.MINUTE;      this.step = 5;}
+    if (stepMinute > minimumStep)           {this.scale = TimeStep.SCALE.MINUTE;      this.step = 1;}
+    if (stepSecond*15 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 15;}
+    if (stepSecond*10 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 10;}
+    if (stepSecond*5 > minimumStep)         {this.scale = TimeStep.SCALE.SECOND;      this.step = 5;}
+    if (stepSecond > minimumStep)           {this.scale = TimeStep.SCALE.SECOND;      this.step = 1;}
+    if (stepMillisecond*200 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
+    if (stepMillisecond*100 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
+    if (stepMillisecond*50 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
+    if (stepMillisecond*10 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
+    if (stepMillisecond*5 > minimumStep)    {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
+    if (stepMillisecond > minimumStep)      {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
   };
 
   /**
-   * Get ids of all items or from a filtered set of items.
-   * @param {Object} [options]    An Object with options. Available options:
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Array} ids
+   * 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
    */
-  DataView.prototype.getIds = function (options) {
-    var ids;
-
-    if (this._data) {
-      var defaultFilter = this._options.filter;
-      var filter;
+  TimeStep.prototype.snap = function(date) {
+    var clone = new Date(date.valueOf());
 
-      if (options && options.filter) {
-        if (defaultFilter) {
-          filter = function (item) {
-            return defaultFilter(item) && options.filter(item);
-          }
-        }
-        else {
-          filter = options.filter;
-        }
+    if (this.scale == TimeStep.SCALE.YEAR) {
+      var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
+      clone.setFullYear(Math.round(year / this.step) * this.step);
+      clone.setMonth(0);
+      clone.setDate(0);
+      clone.setHours(0);
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
+    }
+    else if (this.scale == TimeStep.SCALE.MONTH) {
+      if (clone.getDate() > 15) {
+        clone.setDate(1);
+        clone.setMonth(clone.getMonth() + 1);
+        // important: first set Date to 1, after that change the month.
       }
       else {
-        filter = defaultFilter;
+        clone.setDate(1);
       }
 
-      ids = this._data.getIds({
-        filter: filter,
-        order: options && options.order
-      });
+      clone.setHours(0);
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-    else {
-      ids = [];
+    else if (this.scale == TimeStep.SCALE.DAY) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 5:
+        case 2:
+          clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
+        default:
+          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+      }
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    return ids;
+    else if (this.scale == TimeStep.SCALE.WEEKDAY) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 5:
+        case 2:
+          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+        default:
+          clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
+      }
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
+    }
+    else if (this.scale == TimeStep.SCALE.HOUR) {
+      switch (this.step) {
+        case 4:
+          clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
+        default:
+          clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
+      }
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
+    } else if (this.scale == TimeStep.SCALE.MINUTE) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 15:
+        case 10:
+          clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
+          clone.setSeconds(0);
+          break;
+        case 5:
+          clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
+        default:
+          clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
+      }
+      clone.setMilliseconds(0);
+    }
+    else if (this.scale == TimeStep.SCALE.SECOND) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 15:
+        case 10:
+          clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
+          clone.setMilliseconds(0);
+          break;
+        case 5:
+          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
+        default:
+          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
+      }
+    }
+    else if (this.scale == TimeStep.SCALE.MILLISECOND) {
+      var step = this.step > 5 ? this.step / 2 : 1;
+      clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
+    }
+    
+    return clone;
   };
 
   /**
-   * Get the DataSet to which this DataView is connected. In case there is a chain
-   * of multiple DataViews, the root DataSet of this chain is returned.
-   * @return {DataSet} dataSet
+   * Check if the current value is a major value (for example when the step
+   * is DAY, a major value is each first day of the MONTH)
+   * @return {boolean} true if current date is major, else false.
    */
-  DataView.prototype.getDataSet = function () {
-    var dataSet = this;
-    while (dataSet instanceof DataView) {
-      dataSet = dataSet._data;
+  TimeStep.prototype.isMajor = function() {
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:
+        return (this.current.getMilliseconds() == 0);
+      case TimeStep.SCALE.SECOND:
+        return (this.current.getSeconds() == 0);
+      case TimeStep.SCALE.MINUTE:
+        return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
+      // Note: this is no bug. Major label is equal for both minute and hour scale
+      case TimeStep.SCALE.HOUR:
+        return (this.current.getHours() == 0);
+      case TimeStep.SCALE.WEEKDAY: // intentional fall through
+      case TimeStep.SCALE.DAY:
+        return (this.current.getDate() == 1);
+      case TimeStep.SCALE.MONTH:
+        return (this.current.getMonth() == 0);
+      case TimeStep.SCALE.YEAR:
+        return false;
+      default:
+        return false;
     }
-    return dataSet || null;
   };
 
+
   /**
-   * Event listener. Will propagate all events from the connected data set to
-   * the subscribers of the DataView, but will filter the items and only trigger
-   * when there are changes in the filtered data set.
-   * @param {String} event
-   * @param {Object | null} params
-   * @param {String} senderId
-   * @private
+   * Returns formatted text for the minor axislabel, depending on the current
+   * date and the scale. For example when scale is MINUTE, the current time is
+   * formatted as "hh:mm".
+   * @param {Date} [date] custom date. if not provided, current date is taken
    */
-  DataView.prototype._onEvent = function (event, params, senderId) {
-    var i, len, id, item,
-        ids = params && params.items,
-        data = this._data,
-        added = [],
-        updated = [],
-        removed = [];
-
-    if (ids && data) {
-      switch (event) {
-        case 'add':
-          // filter the ids of the added items
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            item = this.get(id);
-            if (item) {
-              this._ids[id] = true;
-              added.push(id);
-            }
-          }
-
-          break;
-
-        case 'update':
-          // determine the event from the views viewpoint: an updated
-          // item can be added, updated, or removed from this view.
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            item = this.get(id);
-
-            if (item) {
-              if (this._ids[id]) {
-                updated.push(id);
-              }
-              else {
-                this._ids[id] = true;
-                added.push(id);
-              }
-            }
-            else {
-              if (this._ids[id]) {
-                delete this._ids[id];
-                removed.push(id);
-              }
-              else {
-                // nothing interesting for me :-(
-              }
-            }
-          }
+  TimeStep.prototype.getLabelMinor = function(date) {
+    if (date == undefined) {
+      date = this.current;
+    }
 
-          break;
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:  return moment(date).format('SSS');
+      case TimeStep.SCALE.SECOND:       return moment(date).format('s');
+      case TimeStep.SCALE.MINUTE:       return moment(date).format('HH:mm');
+      case TimeStep.SCALE.HOUR:         return moment(date).format('HH:mm');
+      case TimeStep.SCALE.WEEKDAY:      return moment(date).format('ddd D');
+      case TimeStep.SCALE.DAY:          return moment(date).format('D');
+      case TimeStep.SCALE.MONTH:        return moment(date).format('MMM');
+      case TimeStep.SCALE.YEAR:         return moment(date).format('YYYY');
+      default:                          return '';
+    }
+  };
 
-        case 'remove':
-          // filter the ids of the removed items
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            if (this._ids[id]) {
-              delete this._ids[id];
-              removed.push(id);
-            }
-          }
 
-          break;
-      }
+  /**
+   * Returns formatted text for the major axis label, depending on the current
+   * date and the scale. For example when scale is MINUTE, the major scale is
+   * hours, and the hour will be formatted as "hh".
+   * @param {Date} [date] custom date. if not provided, current date is taken
+   */
+  TimeStep.prototype.getLabelMajor = function(date) {
+    if (date == undefined) {
+      date = this.current;
+    }
 
-      if (added.length) {
-        this._trigger('add', {items: added}, senderId);
-      }
-      if (updated.length) {
-        this._trigger('update', {items: updated}, senderId);
-      }
-      if (removed.length) {
-        this._trigger('remove', {items: removed}, senderId);
-      }
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
+      case TimeStep.SCALE.SECOND:     return moment(date).format('D MMMM HH:mm');
+      case TimeStep.SCALE.MINUTE:
+      case TimeStep.SCALE.HOUR:       return moment(date).format('ddd D MMMM');
+      case TimeStep.SCALE.WEEKDAY:
+      case TimeStep.SCALE.DAY:        return moment(date).format('MMMM YYYY');
+      case TimeStep.SCALE.MONTH:      return moment(date).format('YYYY');
+      case TimeStep.SCALE.YEAR:       return '';
+      default:                        return '';
     }
   };
 
-  // copy subscription functionality from DataSet
-  DataView.prototype.on = DataSet.prototype.on;
-  DataView.prototype.off = DataSet.prototype.off;
-  DataView.prototype._trigger = DataSet.prototype._trigger;
-
-  // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
-  DataView.prototype.subscribe = DataView.prototype.on;
-  DataView.prototype.unsubscribe = DataView.prototype.off;
+  module.exports = TimeStep;
 
-  module.exports = DataView;
 
 /***/ },
 /* 11 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Emitter = __webpack_require__(12);
-  var DataSet = __webpack_require__(9);
-  var DataView = __webpack_require__(10);
-  var Point3d = __webpack_require__(13);
-  var Point2d = __webpack_require__(14);
-  var Filter = __webpack_require__(15);
-  var StepNumber = __webpack_require__(16);
+  var Emitter = __webpack_require__(41);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Point3d = __webpack_require__(33);
+  var Point2d = __webpack_require__(34);
+  var Filter = __webpack_require__(35);
+  var StepNumber = __webpack_require__(36);
 
   /**
    * @constructor Graph3d
@@ -9740,11689 +8636,12278 @@ return /******/ (function(modules) { // webpackBootstrap
   /**
    * Execute the onchange callback function
    */
-  Slider.prototype.onChange = function() {
-    if (this.onChangeCallback !== undefined) {
-      this.onChangeCallback();
-    }
-  };
-
-  /**
-   * redraw the slider on the correct place
-   */
-  Slider.prototype.redraw = function() {
-    if (this.frame) {
-      // resize the bar
-      this.frame.bar.style.top = (this.frame.clientHeight/2 -
-        this.frame.bar.offsetHeight/2) + 'px';
-      this.frame.bar.style.width = (this.frame.clientWidth -
-        this.frame.prev.clientWidth -
-        this.frame.play.clientWidth -
-        this.frame.next.clientWidth - 30)  + 'px';
-
-      // position the slider button
-      var left = this.indexToLeft(this.index);
-      this.frame.slide.style.left = (left) + 'px';
-    }
-  };
-
-
-  /**
-   * Set the list with values for the slider
-   * @param {Array} values   A javascript array with values (any type)
-   */
-  Slider.prototype.setValues = function(values) {
-    this.values = values;
-
-    if (this.values.length > 0)
-      this.setIndex(0);
-    else
-      this.index = undefined;
-  };
-
-  /**
-   * Select a value by its index
-   * @param {Number} index
-   */
-  Slider.prototype.setIndex = function(index) {
-    if (index < this.values.length) {
-      this.index = index;
-
-      this.redraw();
-      this.onChange();
-    }
-    else {
-      throw 'Error: index out of range';
-    }
-  };
-
-  /**
-   * retrieve the index of the currently selected vaue
-   * @return {Number} index
-   */
-  Slider.prototype.getIndex = function() {
-    return this.index;
-  };
-
-
-  /**
-   * retrieve the currently selected value
-   * @return {*} value
-   */
-  Slider.prototype.get = function() {
-    return this.values[this.index];
-  };
-
-
-  Slider.prototype._onMouseDown = function(event) {
-    // only react on left mouse button down
-    var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
-    if (!leftButtonDown) return;
-
-    this.startClientX = event.clientX;
-    this.startSlideX = parseFloat(this.frame.slide.style.left);
-
-    this.frame.style.cursor = 'move';
-
-    // add event listeners to handle moving the contents
-    // we store the function onmousemove and onmouseup in the graph, so we can
-    // remove the eventlisteners lateron in the function mouseUp()
-    var me = this;
-    this.onmousemove = function (event) {me._onMouseMove(event);};
-    this.onmouseup   = function (event) {me._onMouseUp(event);};
-    G3DaddEventListener(document, 'mousemove', this.onmousemove);
-    G3DaddEventListener(document, 'mouseup',   this.onmouseup);
-    G3DpreventDefault(event);
-  };
-
-
-  Slider.prototype.leftToIndex = function (left) {
-    var width = parseFloat(this.frame.bar.style.width) -
-      this.frame.slide.clientWidth - 10;
-    var x = left - 3;
-
-    var index = Math.round(x / width * (this.values.length-1));
-    if (index < 0) index = 0;
-    if (index > this.values.length-1) index = this.values.length-1;
-
-    return index;
-  };
-
-  Slider.prototype.indexToLeft = function (index) {
-    var width = parseFloat(this.frame.bar.style.width) -
-      this.frame.slide.clientWidth - 10;
-
-    var x = index / (this.values.length-1) * width;
-    var left = x + 3;
-
-    return left;
-  };
-
-
-
-  Slider.prototype._onMouseMove = function (event) {
-    var diff = event.clientX - this.startClientX;
-    var x = this.startSlideX + diff;
-
-    var index = this.leftToIndex(x);
-
-    this.setIndex(index);
-
-    G3DpreventDefault();
-  };
-
-
-  Slider.prototype._onMouseUp = function (event) {
-    this.frame.style.cursor = 'auto';
-
-    // remove event listeners
-    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-    G3DremoveEventListener(document, 'mouseup', this.onmouseup);
-
-    G3DpreventDefault();
-  };
-
-
-
-  /**--------------------------------------------------------------------------**/
-
-
-
-  /**
-   * Retrieve the absolute left value of a DOM element
-   * @param {Element} elem  A dom element, for example a div
-   * @return {Number} left    The absolute left position of this element
-   *                in the browser page.
-   */
-  getAbsoluteLeft = function(elem) {
-    var left = 0;
-    while( elem !== null ) {
-      left += elem.offsetLeft;
-      left -= elem.scrollLeft;
-      elem = elem.offsetParent;
-    }
-    return left;
-  };
-
-  /**
-   * Retrieve the absolute top value of a DOM element
-   * @param {Element} elem  A dom element, for example a div
-   * @return {Number} top     The absolute top position of this element
-   *                in the browser page.
-   */
-  getAbsoluteTop = function(elem) {
-    var top = 0;
-    while( elem !== null ) {
-      top += elem.offsetTop;
-      top -= elem.scrollTop;
-      elem = elem.offsetParent;
-    }
-    return top;
-  };
-
-  /**
-   * Get the horizontal mouse position from a mouse event
-   * @param {Event} event
-   * @return {Number} mouse x
-   */
-  getMouseX = function(event) {
-    if ('clientX' in event) return event.clientX;
-    return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
-  };
-
-  /**
-   * Get the vertical mouse position from a mouse event
-   * @param {Event} event
-   * @return {Number} mouse y
-   */
-  getMouseY = function(event) {
-    if ('clientY' in event) return event.clientY;
-    return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
-  };
-
-  module.exports = Graph3d;
-
-
-/***/ },
-/* 12 */
-/***/ 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 || {};
-    return this._callbacks[event] || [];
+  Slider.prototype.onChange = function() {
+    if (this.onChangeCallback !== undefined) {
+      this.onChangeCallback();
+    }
   };
 
   /**
-   * Check if this emitter has `event` handlers.
-   *
-   * @param {String} event
-   * @return {Boolean}
-   * @api public
+   * redraw the slider on the correct place
    */
+  Slider.prototype.redraw = function() {
+    if (this.frame) {
+      // resize the bar
+      this.frame.bar.style.top = (this.frame.clientHeight/2 -
+        this.frame.bar.offsetHeight/2) + 'px';
+      this.frame.bar.style.width = (this.frame.clientWidth -
+        this.frame.prev.clientWidth -
+        this.frame.play.clientWidth -
+        this.frame.next.clientWidth - 30)  + 'px';
 
-  Emitter.prototype.hasListeners = function(event){
-    return !! this.listeners(event).length;
+      // position the slider button
+      var left = this.indexToLeft(this.index);
+      this.frame.slide.style.left = (left) + 'px';
+    }
   };
 
 
-/***/ },
-/* 13 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * @prototype Point3d
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {Number} [z]
+   * Set the list with values for the slider
+   * @param {Array} values   A javascript array with values (any type)
    */
-  function Point3d(x, y, z) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
-    this.z = z !== undefined ? z : 0;
+  Slider.prototype.setValues = function(values) {
+    this.values = values;
+
+    if (this.values.length > 0)
+      this.setIndex(0);
+    else
+      this.index = undefined;
   };
 
   /**
-   * Subtract the two provided points, returns a-b
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} a-b
+   * Select a value by its index
+   * @param {Number} index
    */
-  Point3d.subtract = function(a, b) {
-    var sub = new Point3d();
-    sub.x = a.x - b.x;
-    sub.y = a.y - b.y;
-    sub.z = a.z - b.z;
-    return sub;
+  Slider.prototype.setIndex = function(index) {
+    if (index < this.values.length) {
+      this.index = index;
+
+      this.redraw();
+      this.onChange();
+    }
+    else {
+      throw 'Error: index out of range';
+    }
   };
 
   /**
-   * Add the two provided points, returns a+b
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} a+b
+   * retrieve the index of the currently selected vaue
+   * @return {Number} index
    */
-  Point3d.add = function(a, b) {
-    var sum = new Point3d();
-    sum.x = a.x + b.x;
-    sum.y = a.y + b.y;
-    sum.z = a.z + b.z;
-    return sum;
+  Slider.prototype.getIndex = function() {
+    return this.index;
   };
 
+
   /**
-   * Calculate the average of two 3d points
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} The average, (a+b)/2
+   * retrieve the currently selected value
+   * @return {*} value
    */
-  Point3d.avg = function(a, b) {
-    return new Point3d(
-            (a.x + b.x) / 2,
-            (a.y + b.y) / 2,
-            (a.z + b.z) / 2
-    );
+  Slider.prototype.get = function() {
+    return this.values[this.index];
   };
 
-  /**
-   * Calculate the cross product of the two provided points, returns axb
-   * Documentation: http://en.wikipedia.org/wiki/Cross_product
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} cross product axb
-   */
-  Point3d.crossProduct = function(a, b) {
-    var crossproduct = new Point3d();
 
-    crossproduct.x = a.y * b.z - a.z * b.y;
-    crossproduct.y = a.z * b.x - a.x * b.z;
-    crossproduct.z = a.x * b.y - a.y * b.x;
+  Slider.prototype._onMouseDown = function(event) {
+    // only react on left mouse button down
+    var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
+    if (!leftButtonDown) return;
 
-    return crossproduct;
-  };
+    this.startClientX = event.clientX;
+    this.startSlideX = parseFloat(this.frame.slide.style.left);
 
+    this.frame.style.cursor = 'move';
 
-  /**
-   * Rtrieve the length of the vector (or the distance from this point to the origin
-   * @return {Number}  length
-   */
-  Point3d.prototype.length = function() {
-    return Math.sqrt(
-            this.x * this.x +
-            this.y * this.y +
-            this.z * this.z
-    );
+    // add event listeners to handle moving the contents
+    // we store the function onmousemove and onmouseup in the graph, so we can
+    // remove the eventlisteners lateron in the function mouseUp()
+    var me = this;
+    this.onmousemove = function (event) {me._onMouseMove(event);};
+    this.onmouseup   = function (event) {me._onMouseUp(event);};
+    G3DaddEventListener(document, 'mousemove', this.onmousemove);
+    G3DaddEventListener(document, 'mouseup',   this.onmouseup);
+    G3DpreventDefault(event);
   };
 
-  module.exports = Point3d;
 
+  Slider.prototype.leftToIndex = function (left) {
+    var width = parseFloat(this.frame.bar.style.width) -
+      this.frame.slide.clientWidth - 10;
+    var x = left - 3;
 
-/***/ },
-/* 14 */
-/***/ function(module, exports, __webpack_require__) {
+    var index = Math.round(x / width * (this.values.length-1));
+    if (index < 0) index = 0;
+    if (index > this.values.length-1) index = this.values.length-1;
 
-  /**
-   * @prototype Point2d
-   * @param {Number} [x]
-   * @param {Number} [y]
-   */
-  Point2d = function (x, y) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
+    return index;
   };
 
-  module.exports = Point2d;
+  Slider.prototype.indexToLeft = function (index) {
+    var width = parseFloat(this.frame.bar.style.width) -
+      this.frame.slide.clientWidth - 10;
 
+    var x = index / (this.values.length-1) * width;
+    var left = x + 3;
 
-/***/ },
-/* 15 */
-/***/ function(module, exports, __webpack_require__) {
+    return left;
+  };
 
-  var DataView = __webpack_require__(10);
 
-  /**
-   * @class Filter
-   *
-   * @param {DataSet} data The google data table
-   * @param {Number}  column             The index of the column to be filtered
-   * @param {Graph} graph           The graph
-   */
-  function Filter (data, column, graph) {
-    this.data = data;
-    this.column = column;
-    this.graph = graph; // the parent graph
 
-    this.index = undefined;
-    this.value = undefined;
+  Slider.prototype._onMouseMove = function (event) {
+    var diff = event.clientX - this.startClientX;
+    var x = this.startSlideX + diff;
 
-    // read all distinct values and select the first one
-    this.values = graph.getDistinctValues(data.get(), this.column);
+    var index = this.leftToIndex(x);
 
-    // sort both numeric and string values correctly
-    this.values.sort(function (a, b) {
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
+    this.setIndex(index);
 
-    if (this.values.length > 0) {
-      this.selectValue(0);
-    }
+    G3DpreventDefault();
+  };
 
-    // create an array with the filtered datapoints. this will be loaded afterwards
-    this.dataPoints = [];
 
-    this.loaded = false;
-    this.onLoadCallback = undefined;
+  Slider.prototype._onMouseUp = function (event) {
+    this.frame.style.cursor = 'auto';
 
-    if (graph.animationPreload) {
-      this.loaded = false;
-      this.loadInBackground();
-    }
-    else {
-      this.loaded = true;
-    }
+    // remove event listeners
+    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
+    G3DremoveEventListener(document, 'mouseup', this.onmouseup);
+
+    G3DpreventDefault();
   };
 
 
+
+  /**--------------------------------------------------------------------------**/
+
+
+
   /**
-   * Return the label
-   * @return {string} label
+   * Retrieve the absolute left value of a DOM element
+   * @param {Element} elem  A dom element, for example a div
+   * @return {Number} left    The absolute left position of this element
+   *                in the browser page.
    */
-  Filter.prototype.isLoaded = function() {
-    return this.loaded;
+  getAbsoluteLeft = function(elem) {
+    var left = 0;
+    while( elem !== null ) {
+      left += elem.offsetLeft;
+      left -= elem.scrollLeft;
+      elem = elem.offsetParent;
+    }
+    return left;
   };
 
-
   /**
-   * Return the loaded progress
-   * @return {Number} percentage between 0 and 100
+   * Retrieve the absolute top value of a DOM element
+   * @param {Element} elem  A dom element, for example a div
+   * @return {Number} top     The absolute top position of this element
+   *                in the browser page.
    */
-  Filter.prototype.getLoadedProgress = function() {
-    var len = this.values.length;
-
-    var i = 0;
-    while (this.dataPoints[i]) {
-      i++;
+  getAbsoluteTop = function(elem) {
+    var top = 0;
+    while( elem !== null ) {
+      top += elem.offsetTop;
+      top -= elem.scrollTop;
+      elem = elem.offsetParent;
     }
-
-    return Math.round(i / len * 100);
+    return top;
   };
 
+  /**
+   * Get the horizontal mouse position from a mouse event
+   * @param {Event} event
+   * @return {Number} mouse x
+   */
+  getMouseX = function(event) {
+    if ('clientX' in event) return event.clientX;
+    return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
+  };
 
   /**
-   * Return the label
-   * @return {string} label
+   * Get the vertical mouse position from a mouse event
+   * @param {Event} event
+   * @return {Number} mouse y
    */
-  Filter.prototype.getLabel = function() {
-    return this.graph.filterLabel;
+  getMouseY = function(event) {
+    if ('clientY' in event) return event.clientY;
+    return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
   };
 
+  module.exports = Graph3d;
+
+
+/***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Return the columnIndex of the filter
-   * @return {Number} columnIndex
+   * Prototype for visual components
+   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
+   * @param {Object} [options]
    */
-  Filter.prototype.getColumn = function() {
-    return this.column;
-  };
+  function Component (body, options) {
+    this.options = null;
+    this.props = null;
+  }
 
   /**
-   * Return the currently selected value. Returns undefined if there is no selection
-   * @return {*} value
+   * Set options for the component. The new options will be merged into the
+   * current options.
+   * @param {Object} options
    */
-  Filter.prototype.getSelectedValue = function() {
-    if (this.index === undefined)
-      return undefined;
+  Component.prototype.setOptions = function(options) {
+    if (options) {
+      util.extend(this.options, options);
+    }
+  };
 
-    return this.values[this.index];
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  Component.prototype.redraw = function() {
+    // should be implemented by the component
+    return false;
   };
 
   /**
-   * Retrieve all values of the filter
-   * @return {Array} values
+   * Destroy the component. Cleanup DOM and event listeners
    */
-  Filter.prototype.getValues = function() {
-    return this.values;
+  Component.prototype.destroy = function() {
+    // should be implemented by the component
   };
 
   /**
-   * Retrieve one value of the filter
-   * @param {Number}  index
-   * @return {*} value
+   * Test whether the component is resized since the last time _isResized() was
+   * called.
+   * @return {Boolean} Returns true if the component is resized
+   * @protected
    */
-  Filter.prototype.getValue = function(index) {
-    if (index >= this.values.length)
-      throw 'Error: index out of range';
+  Component.prototype._isResized = function() {
+    var resized = (this.props._previousWidth !== this.props.width ||
+        this.props._previousHeight !== this.props.height);
 
-    return this.values[index];
+    this.props._previousWidth = this.props.width;
+    this.props._previousHeight = this.props.height;
+
+    return resized;
   };
 
+  module.exports = Component;
+
+
+/***/ },
+/* 13 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(12);
 
   /**
-   * Retrieve the (filtered) dataPoints for the currently selected filter index
-   * @param {Number} [index] (optional)
-   * @return {Array} dataPoints
+   * A current time bar
+   * @param {{range: Range, dom: Object, domProps: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCurrentTime]
+   * @constructor CurrentTime
+   * @extends Component
    */
-  Filter.prototype._getDataPoints = function(index) {
-    if (index === undefined)
-      index = this.index;
+  function CurrentTime (body, options) {
+    this.body = body;
 
-    if (index === undefined)
-      return [];
+    // default options
+    this.defaultOptions = {
+      showCurrentTime: true
+    };
+    this.options = util.extend({}, this.defaultOptions);
 
-    var dataPoints;
-    if (this.dataPoints[index]) {
-      dataPoints = this.dataPoints[index];
-    }
-    else {
-      var f = {};
-      f.column = this.column;
-      f.value = this.values[index];
+    this._create();
 
-      var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
-      dataPoints = this.graph._getDataPoints(dataView);
+    this.setOptions(options);
+  }
 
-      this.dataPoints[index] = dataPoints;
-    }
+  CurrentTime.prototype = new Component();
 
-    return dataPoints;
+  /**
+   * Create the HTML DOM for the current time bar
+   * @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%';
+
+    this.bar = bar;
   };
 
+  /**
+   * Destroy the CurrentTime bar
+   */
+  CurrentTime.prototype.destroy = function () {
+    this.options.showCurrentTime = false;
+    this.redraw(); // will remove the bar from the DOM and stop refreshing
 
+    this.body = null;
+  };
 
   /**
-   * Set a callback function when the filter is fully loaded.
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCurrentTime]
    */
-  Filter.prototype.setOnLoadCallback = function(callback) {
-    this.onLoadCallback = callback;
+  CurrentTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCurrentTime'], this.options, options);
+    }
   };
 
-
   /**
-   * Add a value to the list with available values for this filter
-   * No double entries will be created.
-   * @param {Number} index
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  Filter.prototype.selectValue = function(index) {
-    if (index >= this.values.length)
-      throw 'Error: index out of range';
+  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.index = index;
-    this.value = this.values[index];
+        this.start();
+      }
+
+      var now = new Date();
+      var x = this.body.util.toScreen(now);
+
+      this.bar.style.left = x + 'px';
+      this.bar.title = 'Current time: ' + now;
+    }
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
+      this.stop();
+    }
+
+    return false;
   };
 
   /**
-   * Load all filtered rows in the background one by one
-   * Start this method without providing an index!
+   * Start auto refreshing the current time bar
    */
-  Filter.prototype.loadInBackground = function(index) {
-    if (index === undefined)
-      index = 0;
+  CurrentTime.prototype.start = function() {
+    var me = this;
 
-    var frame = this.graph.frame;
+    function update () {
+      me.stop();
 
-    if (index < this.values.length) {
-      var dataPointsTemp = this._getDataPoints(index);
-      //this.graph.redrawInfo(); // TODO: not neat
+      // 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;
 
-      // create a progress box
-      if (frame.progress === undefined) {
-        frame.progress = document.createElement('DIV');
-        frame.progress.style.position = 'absolute';
-        frame.progress.style.color = 'gray';
-        frame.appendChild(frame.progress);
-      }
-      var progress = this.getLoadedProgress();
-      frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
-      // TODO: this is no nice solution...
-      frame.progress.style.bottom = 60 + 'px'; // TODO: use height of slider
-      frame.progress.style.left = 10 + 'px';
+      me.redraw();
 
-      var me = this;
-      setTimeout(function() {me.loadInBackground(index+1);}, 10);
-      this.loaded = false;
+      // start a timer to adjust for the new time
+      me.currentTimeTimer = setTimeout(update, interval);
     }
-    else {
-      this.loaded = true;
 
-      // remove the progress box
-      if (frame.progress !== undefined) {
-        frame.removeChild(frame.progress);
-        frame.progress = undefined;
-      }
+    update();
+  };
 
-      if (this.onLoadCallback)
-        this.onLoadCallback();
+  /**
+   * Stop auto refreshing the current time bar
+   */
+  CurrentTime.prototype.stop = function() {
+    if (this.currentTimeTimer !== undefined) {
+      clearTimeout(this.currentTimeTimer);
+      delete this.currentTimeTimer;
     }
   };
 
-  module.exports = Filter;
+  module.exports = CurrentTime;
 
 
 /***/ },
-/* 16 */
+/* 14 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var Hammer = __webpack_require__(49);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(12);
+
   /**
-   * @prototype StepNumber
-   * The class StepNumber is an iterator for Numbers. You provide a start and end
-   * value, and a best step size. StepNumber itself rounds to fixed values and
-   * a finds the step that best fits the provided step.
-   *
-   * If prettyStep is true, the step size is chosen as close as possible to the
-   * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
-   *
-   * Example usage:
-   *   var step = new StepNumber(0, 10, 2.5, true);
-   *   step.start();
-   *   while (!step.end()) {
-   *   alert(step.getCurrent());
-   *   step.next();
-   *   }
-   *
-   * Version: 1.0
-   *
-   * @param {Number} start     The start value
-   * @param {Number} end     The end value
-   * @param {Number} step    Optional. Step size. Must be a positive value.
-   * @param {boolean} prettyStep Optional. If true, the step size is rounded
-   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   * A custom time bar
+   * @param {{range: Range, dom: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCustomTime]
+   * @constructor CustomTime
+   * @extends Component
    */
-  function StepNumber(start, end, step, prettyStep) {
-    // set default values
-    this._start = 0;
-    this._end = 0;
-    this._step = 1;
-    this.prettyStep = true;
-    this.precision = 5;
 
-    this._current = 0;
-    this.setRange(start, end, step, prettyStep);
+  function CustomTime (body, options) {
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      showCustomTime: false
+    };
+    this.options = util.extend({}, this.defaultOptions);
+
+    this.customTime = new Date();
+    this.eventParams = {}; // stores state parameters while dragging the bar
+
+    // create the DOM
+    this._create();
+
+    this.setOptions(options);
+  }
+
+  CustomTime.prototype = new Component();
+
+  /**
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCustomTime]
+   */
+  CustomTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCustomTime'], this.options, options);
+    }
   };
 
   /**
-   * Set a new range: start, end and step.
-   *
-   * @param {Number} start     The start value
-   * @param {Number} end     The end value
-   * @param {Number} step    Optional. Step size. Must be a positive value.
-   * @param {boolean} prettyStep Optional. If true, the step size is rounded
-   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   * Create the DOM for the custom time
+   * @private
    */
-  StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
-    this._start = start ? start : 0;
-    this._end = end ? end : 0;
+  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;
 
-    this.setStep(step, prettyStep);
+    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);
+
+    // 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));
   };
 
   /**
-   * Set a new step size
-   * @param {Number} step    New step size. Must be a positive value
-   * @param {boolean} prettyStep Optional. If true, the provided step is rounded
-   *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   * Destroy the CustomTime bar
    */
-  StepNumber.prototype.setStep = function(step, prettyStep) {
-    if (step === undefined || step <= 0)
-      return;
+  CustomTime.prototype.destroy = function () {
+    this.options.showCustomTime = false;
+    this.redraw(); // will remove the bar from the DOM
 
-    if (prettyStep !== undefined)
-      this.prettyStep = prettyStep;
+    this.hammer.enable(false);
+    this.hammer = null;
 
-    if (this.prettyStep === true)
-      this._step = StepNumber.calculatePrettyStep(step);
-    else
-      this._step = step;
+    this.body = null;
   };
 
   /**
-   * Calculate a nice step size, closest to the desired step size.
-   * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
-   * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
-   * @param {Number}  step  Desired step size
-   * @return {Number}     Nice step size
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  StepNumber.calculatePrettyStep = function (step) {
-    var log10 = function (x) {return Math.log(x) / Math.LN10;};
-
-    // try three steps (multiple of 1, 2, or 5
-    var step1 = Math.pow(10, Math.round(log10(step))),
-        step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
-        step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
+  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);
+      }
 
-    // choose the best step (closest to minimum step)
-    var prettyStep = step1;
-    if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
-    if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
+      var x = this.body.util.toScreen(this.customTime);
 
-    // for safety
-    if (prettyStep <= 0) {
-      prettyStep = 1;
+      this.bar.style.left = x + 'px';
+      this.bar.title = 'Time: ' + this.customTime;
+    }
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
     }
 
-    return prettyStep;
+    return false;
   };
 
   /**
-   * returns the current value of the step
-   * @return {Number} current value
+   * Set custom time.
+   * @param {Date} time
    */
-  StepNumber.prototype.getCurrent = function () {
-    return parseFloat(this._current.toPrecision(this.precision));
+  CustomTime.prototype.setCustomTime = function(time) {
+    this.customTime = new Date(time.valueOf());
+    this.redraw();
   };
 
   /**
-   * returns the current step size
-   * @return {Number} current step size
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  StepNumber.prototype.getStep = function () {
-    return this._step;
+  CustomTime.prototype.getCustomTime = function() {
+    return new Date(this.customTime.valueOf());
   };
 
   /**
-   * Set the current value to the largest value smaller than start, which
-   * is a multiple of the step size
+   * Start moving horizontally
+   * @param {Event} event
+   * @private
    */
-  StepNumber.prototype.start = function() {
-    this._current = this._start - this._start % this._step;
+  CustomTime.prototype._onDragStart = function(event) {
+    this.eventParams.dragging = true;
+    this.eventParams.customTime = this.customTime;
+
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /**
-   * Do a step, add the step size to the current value
+   * Perform moving operating.
+   * @param {Event} event
+   * @private
    */
-  StepNumber.prototype.next = function () {
-    this._current += this._step;
+  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();
   };
 
   /**
-   * Returns true whether the end is reached
-   * @return {boolean}  True if the current value has passed the end value.
+   * Stop moving operating.
+   * @param {event} event
+   * @private
    */
-  StepNumber.prototype.end = function () {
-    return (this._current > this._end);
+  CustomTime.prototype._onDragEnd = function (event) {
+    if (!this.eventParams.dragging) return;
+
+    // fire a timechanged event
+    this.body.emitter.emit('timechanged', {
+      time: new Date(this.customTime.valueOf())
+    });
+
+    event.stopPropagation();
+    event.preventDefault();
   };
 
-  module.exports = StepNumber;
+  module.exports = CustomTime;
 
 
 /***/ },
-/* 17 */
+/* 15 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Emitter = __webpack_require__(12);
-  var Hammer = __webpack_require__(3);
   var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(9);
-  var DataView = __webpack_require__(10);
-  var Range = __webpack_require__(18);
-  var TimeAxis = __webpack_require__(20);
-  var CurrentTime = __webpack_require__(22);
-  var CustomTime = __webpack_require__(23);
-  var ItemSet = __webpack_require__(24);
+  var DOMutil = __webpack_require__(2);
+  var Component = __webpack_require__(12);
+  var DataStep = __webpack_require__(6);
 
   /**
-   * Create a timeline visualization
-   * @param {HTMLElement} container
-   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
-   * @param {Object} [options]  See Timeline.setOptions for the available options.
-   * @constructor
+   * A horizontal time axis
+   * @param {Object} [options]        See DataAxis.setOptions for the available
+   *                                  options.
+   * @constructor DataAxis
+   * @extends Component
+   * @param body
    */
-  function Timeline (container, items, options) {
-    if (!(this instanceof Timeline)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+  function DataAxis (body, options, svg) {
+    this.id = util.randomUUID();
+    this.body = body;
 
-    var me = this;
     this.defaultOptions = {
-      start: null,
-      end:   null,
-
-      autoResize: true,
-
-      orientation: 'bottom',
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
+      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
     };
-    this.options = util.deepExtend({}, this.defaultOptions);
-
-    // Create the DOM, props, and emitter
-    this._create(container);
-
-    // all components listed here will be repainted automatically
-    this.components = [];
 
-    this.body = {
-      dom: this.dom,
-      domProps: this.props,
-      emitter: {
-        on: this.on.bind(this),
-        off: this.off.bind(this),
-        emit: this.emit.bind(this)
-      },
-      util: {
-        snap: null, // will be specified after TimeAxis is created
-        toScreen: me._toScreen.bind(me),
-        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
-        toTime: me._toTime.bind(me),
-        toGlobalTime : me._toGlobalTime.bind(me)
-      }
+    this.linegraphSVG = svg;
+    this.props = {};
+    this.DOMelements = { // dynamic elements
+      lines: {},
+      labels: {}
     };
 
-    // range
-    this.range = new Range(this.body);
-    this.components.push(this.range);
-    this.body.range = this.range;
+    this.dom = {};
 
-    // time axis
-    this.timeAxis = new TimeAxis(this.body);
-    this.components.push(this.timeAxis);
-    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+    this.range = {start:0, end:0};
 
-    // current time bar
-    this.currentTime = new CurrentTime(this.body);
-    this.components.push(this.currentTime);
+    this.options = util.extend({}, this.defaultOptions);
+    this.conversionFactor = 1;
 
-    // custom time bar
-    // Note: time bar will be attached in this.setOptions when selected
-    this.customTime = new CustomTime(this.body);
-    this.components.push(this.customTime);
+    this.setOptions(options);
+    this.width = Number(('' + this.options.width).replace("px",""));
+    this.minWidth = this.width;
+    this.height = this.linegraphSVG.offsetHeight;
 
-    // item set
-    this.itemSet = new ItemSet(this.body);
-    this.components.push(this.itemSet);
+    this.stepPixels = 25;
+    this.stepPixelsForced = 25;
+    this.lineOffset = 0;
+    this.master = true;
+    this.svgElements = {};
 
-    this.itemsData = null;      // DataSet
-    this.groupsData = null;     // DataSet
 
-    // apply options
-    if (options) {
-      this.setOptions(options);
-    }
+    this.groups = {};
+    this.amountOfGroups = 0;
 
-    // create itemset
-    if (items) {
-      this.setItems(items);
-    }
-    else {
-      this.redraw();
-    }
+    // create the HTML DOM
+    this._create();
   }
 
-  // turn Timeline into an event emitter
-  Emitter(Timeline.prototype);
-
-  /**
-   * Create the main DOM for the Timeline: a root panel containing left, right,
-   * top, bottom, content, and background panel.
-   * @param {Element} container  The container element where the Timeline will
-   *                             be attached.
-   * @private
-   */
-  Timeline.prototype._create = function (container) {
-    this.dom = {};
-
-    this.dom.root                 = document.createElement('div');
-    this.dom.background           = document.createElement('div');
-    this.dom.backgroundVertical   = document.createElement('div');
-    this.dom.backgroundHorizontal = document.createElement('div');
-    this.dom.centerContainer      = document.createElement('div');
-    this.dom.leftContainer        = document.createElement('div');
-    this.dom.rightContainer       = document.createElement('div');
-    this.dom.center               = document.createElement('div');
-    this.dom.left                 = document.createElement('div');
-    this.dom.right                = document.createElement('div');
-    this.dom.top                  = document.createElement('div');
-    this.dom.bottom               = document.createElement('div');
-    this.dom.shadowTop            = document.createElement('div');
-    this.dom.shadowBottom         = document.createElement('div');
-    this.dom.shadowTopLeft        = document.createElement('div');
-    this.dom.shadowBottomLeft     = document.createElement('div');
-    this.dom.shadowTopRight       = document.createElement('div');
-    this.dom.shadowBottomRight    = document.createElement('div');
+  DataAxis.prototype = new Component();
 
-    this.dom.background.className           = 'vispanel background';
-    this.dom.backgroundVertical.className   = 'vispanel background vertical';
-    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-    this.dom.centerContainer.className      = 'vispanel center';
-    this.dom.leftContainer.className        = 'vispanel left';
-    this.dom.rightContainer.className       = 'vispanel right';
-    this.dom.top.className                  = 'vispanel top';
-    this.dom.bottom.className               = 'vispanel bottom';
-    this.dom.left.className                 = 'content';
-    this.dom.center.className               = 'content';
-    this.dom.right.className                = 'content';
-    this.dom.shadowTop.className            = 'shadow top';
-    this.dom.shadowBottom.className         = 'shadow bottom';
-    this.dom.shadowTopLeft.className        = 'shadow top';
-    this.dom.shadowBottomLeft.className     = 'shadow bottom';
-    this.dom.shadowTopRight.className       = 'shadow top';
-    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-    this.dom.root.appendChild(this.dom.background);
-    this.dom.root.appendChild(this.dom.backgroundVertical);
-    this.dom.root.appendChild(this.dom.backgroundHorizontal);
-    this.dom.root.appendChild(this.dom.centerContainer);
-    this.dom.root.appendChild(this.dom.leftContainer);
-    this.dom.root.appendChild(this.dom.rightContainer);
-    this.dom.root.appendChild(this.dom.top);
-    this.dom.root.appendChild(this.dom.bottom);
 
-    this.dom.centerContainer.appendChild(this.dom.center);
-    this.dom.leftContainer.appendChild(this.dom.left);
-    this.dom.rightContainer.appendChild(this.dom.right);
+  DataAxis.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
+    }
+    this.amountOfGroups += 1;
+  };
 
-    this.dom.centerContainer.appendChild(this.dom.shadowTop);
-    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
-    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
-    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
-    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
-    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+  DataAxis.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
+  };
 
-    this.on('rangechange', this.redraw.bind(this));
-    this.on('change', this.redraw.bind(this));
-    this.on('touch', this._onTouch.bind(this));
-    this.on('pinch', this._onPinch.bind(this));
-    this.on('dragstart', this._onDragStart.bind(this));
-    this.on('drag', this._onDrag.bind(this));
+  DataAxis.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
+  };
 
-    // create event listeners for all interesting events, these events will be
-    // emitted via emitter
-    this.hammer = Hammer(this.dom.root, {
-      prevent_default: true
-    });
-    this.listeners = {};
 
-    var me = this;
-    var events = [
-      'touch', 'pinch',
-      'tap', 'doubletap', 'hold',
-      'dragstart', 'drag', 'dragend',
-      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
-    ];
-    events.forEach(function (event) {
-      var listener = function () {
-        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-        me.emit.apply(me, args);
-      };
-      me.hammer.on(event, listener);
-      me.listeners[event] = listener;
-    });
+  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'];
+      util.selectiveExtend(fields, this.options, options);
 
-    // size properties of each of the panels
-    this.props = {
-      root: {},
-      background: {},
-      centerContainer: {},
-      leftContainer: {},
-      rightContainer: {},
-      center: {},
-      left: {},
-      right: {},
-      top: {},
-      bottom: {},
-      border: {},
-      scrollTop: 0,
-      scrollTopMin: 0
-    };
-    this.touch = {}; // store state information needed for touch events
+      this.minWidth = Number(('' + this.options.width).replace("px",""));
 
-    // attach the root panel to the provided container
-    if (!container) throw new Error('No container provided');
-    container.appendChild(this.dom.root);
+      if (redraw == true && this.dom.frame) {
+        this.hide();
+        this.show();
+      }
+    }
   };
 
+
   /**
-   * Destroy the Timeline, clean up all DOM elements and event listeners.
+   * Create the HTML DOM for the DataAxis
    */
-  Timeline.prototype.destroy = function () {
-    // unbind datasets
-    this.clear();
+  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;
 
-    // remove all event listeners
-    this.off();
+    this.dom.lineContainer = document.createElement('div');
+    this.dom.lineContainer.style.width = '100%';
+    this.dom.lineContainer.style.height = this.height;
 
-    // stop checking for changed size
-    this._stopAutoResize();
+    // 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);
+  };
 
-    // remove from DOM
-    if (this.dom.root.parentNode) {
-      this.dom.root.parentNode.removeChild(this.dom.root);
+  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 {
+      x = this.width - iconWidth - iconOffset;
     }
-    this.dom = null;
 
-    // cleanup hammer touch events
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+        y += iconHeight + iconOffset;
       }
     }
-    this.listeners = null;
-    this.hammer = null;
-
-    // give all components the opportunity to cleanup
-    this.components.forEach(function (component) {
-      component.destroy();
-    });
 
-    this.body = null;
+    DOMutil.cleanupElements(this.svgElements);
   };
 
   /**
-   * Set options. Options will be passed to all components loaded in the Timeline.
-   * @param {Object} [options]
-   *                           {String} orientation
-   *                              Vertical orientation for the Timeline,
-   *                              can be 'bottom' (default) or 'top'.
-   *                           {String | Number} width
-   *                              Width for the timeline, a number in pixels or
-   *                              a css string like '1000px' or '75%'. '100%' by default.
-   *                           {String | Number} height
-   *                              Fixed height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'. If undefined,
-   *                              The Timeline will automatically size such that
-   *                              its contents fit.
-   *                           {String | Number} minHeight
-   *                              Minimum height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {String | Number} maxHeight
-   *                              Maximum height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {Number | Date | String} start
-   *                              Start date for the visible window
-   *                           {Number | Date | String} end
-   *                              End date for the visible window
+   * Create the HTML DOM for the DataAxis
    */
-  Timeline.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the known options
-      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
-      util.selectiveExtend(fields, this.options, options);
+  DataAxis.prototype.show = function() {
+    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);
+      }
+    }
 
-      // enable/disable autoResize
-      this._initAutoResize();
+    if (!this.dom.lineContainer.parentNode) {
+      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
     }
+  };
 
-    // propagate options to all components
-    this.components.forEach(function (component) {
-      component.setOptions(options);
-    });
+  /**
+   * Create the HTML DOM for the DataAxis
+   */
+  DataAxis.prototype.hide = function() {
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
 
-    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
-    if (options && options.order) {
-      throw new Error('Option order is deprecated. There is no replacement for this feature.');
+    if (this.dom.lineContainer.parentNode) {
+      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
     }
+  };
 
-    // redraw everything
-    this.redraw();
+  /**
+   * Set a range (start and end)
+   * @param end
+   * @param start
+   * @param end
+   */
+  DataAxis.prototype.setRange = function (start, end) {
+    this.range.start = start;
+    this.range.end = end;
   };
 
   /**
-   * Set a custom time bar
-   * @param {Date} time
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  Timeline.prototype.setCustomTime = function (time) {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+  DataAxis.prototype.redraw = function () {
+    var changeCalled = false;
+    if (this.amountOfGroups == 0) {
+      this.hide();
     }
+    else {
+      this.show();
+      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
+      // svg offsetheight did not work in firefox and explorer...
 
-    this.customTime.setCustomTime(time);
+      this.dom.lineContainer.style.height = this.height + 'px';
+      this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
+
+      var props = this.props;
+      var frame = this.dom.frame;
+
+      // update classname
+      frame.className = 'dataaxis';
+
+      // calculate character width and height
+      this._calculateCharSize();
+
+      var orientation = this.options.orientation;
+      var showMinorLabels = this.options.showMinorLabels;
+      var 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.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;
+
+      //  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";
+      }
+      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";
+      }
+      changeCalled = this._redrawLabels();
+      if (this.options.icons == true) {
+        this._redrawGroupIcons();
+      }
+    }
+    return changeCalled;
   };
 
   /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
+   * Repaint major and minor text labels and vertical grid lines
+   * @private
    */
-  Timeline.prototype.getCustomTime = function() {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+  DataAxis.prototype._redrawLabels = function () {
+    DOMutil.prepareElements(this.DOMelements);
+
+    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.step = step;
+    step.first();
+
+    // get the distance in pixels for a step
+    var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
+    this.stepPixels = stepPixels;
+
+    var amountOfSteps = this.height / stepPixels;
+    var stepDifference = 0;
+
+    if (this.master == false) {
+      stepPixels = this.stepPixelsForced;
+      stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
+      for (var i = 0; i < 0.5 * stepDifference; i++) {
+        step.previous();
+      }
+      amountOfSteps = this.height / stepPixels;
     }
 
-    return this.customTime.getCustomTime();
+
+    this.valueAtZero = step.marginEnd;
+    var marginStartPos = 0;
+
+    // do not draw the first label
+    var max = 1;
+    step.next();
+
+    this.maxLabelSize = 0;
+    var y = 0;
+    while (max < Math.round(amountOfSteps)) {
+
+      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(), orientation, 'yAxis minor', this.props.minorCharHeight);
+      }
+
+      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(), 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);
+      }
+
+      step.next();
+      max++;
+    }
+
+    this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
+
+    var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
+    // this will resize the yAxis to accomodate 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);
+      this.redraw();
+      return 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);
+      this.redraw();
+      return true;
+    }
+    else {
+      DOMutil.cleanupElements(this.DOMelements);
+      return false;
+    }
   };
 
   /**
-   * Set items
-   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
+   * Create a label for the axis at position x
+   * @private
+   * @param y
+   * @param text
+   * @param orientation
+   * @param className
+   * @param characterHeight
    */
-  Timeline.prototype.setItems = function(items) {
-    var initialLoad = (this.itemsData == null);
+  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
+    // reuse redundant label
+    var label = DOMutil.getDOMElement('div',this.DOMelements, this.dom.frame); //this.dom.redundant.labels.shift();
+    label.className = className;
+    label.innerHTML = text;
 
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!items) {
-      newDataSet = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      newDataSet = items;
+    if (orientation == 'left') {
+      label.style.left = '-' + this.options.labelOffsetX + 'px';
+      label.style.textAlign = "right";
     }
     else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(items, {
-        type: {
-          start: 'Date',
-          end: 'Date'
-        }
-      });
+      label.style.right = '-' + this.options.labelOffsetX + 'px';
+      label.style.textAlign = "left";
     }
 
-    // set items
-    this.itemsData = newDataSet;
-    this.itemSet && this.itemSet.setItems(newDataSet);
-
-    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
-      this.fit();
+    label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
 
-      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
-      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+    text += '';
 
-      this.setWindow(start, end);
+    var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
+    if (this.maxLabelSize < text.length * largestWidth) {
+      this.maxLabelSize = text.length * largestWidth;
     }
   };
 
   /**
-   * Set groups
-   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+   * Create a minor line for the axis at position y
+   * @param y
+   * @param orientation
+   * @param className
+   * @param offset
+   * @param width
    */
-  Timeline.prototype.setGroups = function(groups) {
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!groups) {
-      newDataSet = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      newDataSet = groups;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(groups);
+  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
+    if (this.master == true) {
+      var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
+      line.className = className;
+      line.innerHTML = '';
+
+      if (orientation == 'left') {
+        line.style.left = (this.width - offset) + 'px';
+      }
+      else {
+        line.style.right = (this.width - offset) + 'px';
+      }
+
+      line.style.width = width + 'px';
+      line.style.top = y + 'px';
     }
+  };
 
-    this.groupsData = newDataSet;
-    this.itemSet.setGroups(newDataSet);
+
+  DataAxis.prototype.convertValue = function (value) {
+    var invertedValue = this.valueAtZero - value;
+    var convertedValue = invertedValue * this.conversionFactor;
+    return convertedValue; // the -2 is to compensate for the borders
   };
 
+
   /**
-   * Clear the Timeline. By Default, items, groups and options are cleared.
-   * Example usage:
-   *
-   *     timeline.clear();                // clear items, groups, and options
-   *     timeline.clear({options: true}); // clear options only
-   *
-   * @param {Object} [what]      Optionally specify what to clear. By default:
-   *                             {items: true, groups: true, options: true}
+   * 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
    */
-  Timeline.prototype.clear = function(what) {
-    // clear items
-    if (!what || what.items) {
-      this.setItems(null);
-    }
+  DataAxis.prototype._calculateCharSize = function () {
+    // determine the char width and height on the minor axis
+    if (!('minorCharHeight' in this.props)) {
 
-    // clear groups
-    if (!what || what.groups) {
-      this.setGroups(null);
+      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);
     }
 
-    // clear options of timeline and of each of the components
-    if (!what || what.options) {
-      this.components.forEach(function (component) {
-        component.setOptions(component.defaultOptions);
-      });
+    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);
 
-      this.setOptions(this.defaultOptions); // this will also do a redraw
+      this.props.majorCharHeight = measureCharMajor.clientHeight;
+      this.props.majorCharWidth = measureCharMajor.clientWidth;
+
+      this.dom.frame.removeChild(measureCharMajor);
     }
   };
 
   /**
-   * Set Timeline window such that it fits all items
+   * 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
    */
-  Timeline.prototype.fit = function() {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
+  DataAxis.prototype.snap = function(date) {
+    return this.step.snap(date);
+  };
 
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
+  module.exports = DataAxis;
+
+
+/***/ },
+/* 16 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(2);
+
+  /**
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
+   */
+  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 = [];
+  }
+
+  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;})
       }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
     }
+    else {
+      this.itemsData = [];
+    }
+  };
 
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
+  GraphGroup.prototype.setZeroPosition = function(pos) {
+    this.zeroPosition = pos;
+  };
+
+  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;
+            }
+          }
+        }
+      }
     }
+  };
 
-    this.range.setRange(start, end);
+  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.setOptions(group.options);
   };
 
-  /**
-   * Get the data range of the item set.
-   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
-   *                                          When no minimum is found, min==null
-   *                                          When no maximum is found, max==null
-   */
-  Timeline.prototype.getItemRange = function() {
-    // calculate min from start filed
-    var dataset = this.itemsData.getDataSet(),
-        min = null,
-        max = null;
+  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
+    var fillHeight = iconHeight * 0.5;
+    var path, fillPath;
 
-    if (dataset) {
-      // calculate the minimum value of the field 'start'
-      var minItem = dataset.min('start');
-      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-      // Note: we convert first to Date and then to number because else
-      // a conversion from ISODate to Number will fail
+    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");
 
-      // calculate maximum value of fields 'start' and 'end'
-      var maxStartItem = dataset.max('start');
-      if (maxStartItem) {
-        max = util.convert(maxStartItem.start, 'Date').valueOf();
-      }
-      var maxEndItem = dataset.max('end');
-      if (maxEndItem) {
-        if (max == null) {
-          max = util.convert(maxEndItem.end, 'Date').valueOf();
+    if (this.options.style == 'line') {
+      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+      path.setAttributeNS(null, "class", this.className);
+      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 {
-          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+          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);
 
-    return {
-      min: (min != null) ? new Date(min) : null,
-      max: (max != null) ? new Date(max) : null
-    };
-  };
+      var offset = Math.round((iconWidth - (2 * barWidth))/3);
 
-  /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {Array} [ids] An array with zero or more id's of the items to be
-   *                      selected. If ids is an empty array, all items will be
-   *                      unselected.
-   */
-  Timeline.prototype.setSelection = function(ids) {
-    this.itemSet && this.itemSet.setSelection(ids);
+      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);
+    }
   };
 
-  /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
-   */
-  Timeline.prototype.getSelection = function() {
-    return this.itemSet && this.itemSet.getSelection() || [];
-  };
+  module.exports = GraphGroup;
 
-  /**
-   * Set the visible window. Both parameters are optional, you can change only
-   * start or only end. Syntax:
-   *
-   *     TimeLine.setWindow(start, end)
-   *     TimeLine.setWindow(range)
-   *
-   * Where start and end can be a Date, number, or string, and range is an
-   * object with properties start and end.
-   *
-   * @param {Date | Number | String | Object} [start] Start date of visible window
-   * @param {Date | Number | String} [end]   End date of visible window
-   */
-  Timeline.prototype.setWindow = function(start, end) {
-    if (arguments.length == 1) {
-      var range = arguments[0];
-      this.range.setRange(range.start, range.end);
-    }
-    else {
-      this.range.setRange(start, end);
-    }
-  };
 
-  /**
-   * Get the visible window
-   * @return {{start: Date, end: Date}}   Visible range
-   */
-  Timeline.prototype.getWindow = function() {
-    var range = this.range.getRange();
-    return {
-      start: new Date(range.start),
-      end: new Date(range.end)
-    };
-  };
+/***/ },
+/* 17 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var stack = __webpack_require__(9);
+  var ItemRange = __webpack_require__(25);
 
   /**
-   * Force a redraw of the Timeline. Can be useful to manually redraw when
-   * option autoResize=false
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  Timeline.prototype.redraw = function() {
-    var resized = false,
-        options = this.options,
-        props = this.props,
-        dom = this.dom;
-
-    if (!dom) return; // when destroyed
-
-    // update class names
-    dom.root.className = 'vis timeline root ' + options.orientation;
+  function Group (groupId, data, itemSet) {
+    this.groupId = groupId;
 
-    // update root width and height options
-    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
-    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
-    dom.root.style.width = util.option.asSize(options.width, '');
+    this.itemSet = itemSet;
 
-    // calculate border widths
-    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
-    props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
-    props.border.bottom = props.border.top;
-    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+    this.dom = {};
+    this.props = {
+      label: {
+        width: 0,
+        height: 0
+      }
+    };
+    this.className = null;
 
-    // calculate the heights. If any of the side panels is empty, we set the height to
-    // minus the border width, such that the border will be invisible
-    props.center.height = dom.center.offsetHeight;
-    props.left.height   = dom.left.offsetHeight;
-    props.right.height  = dom.right.offsetHeight;
-    props.top.height    = dom.top.clientHeight    || -props.border.top;
-    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
+    this.items = {};        // items filtered by groupId of this group
+    this.visibleItems = []; // items currently visible in window
+    this.orderedItems = {   // items sorted by start and by end
+      byStart: [],
+      byEnd: []
+    };
 
-    // TODO: compensate borders when any of the panels is empty.
+    this._create();
 
-    // apply auto height
-    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
-    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
-    var autoHeight = props.top.height + contentHeight + props.bottom.height +
-        borderRootHeight + props.border.top + props.border.bottom;
-    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
+    this.setData(data);
+  }
 
-    // calculate heights of the content panels
-    props.root.height = dom.root.offsetHeight;
-    props.background.height = props.root.height - borderRootHeight;
-    var containerHeight = props.root.height - props.top.height - props.bottom.height -
-        borderRootHeight;
-    props.centerContainer.height  = containerHeight;
-    props.leftContainer.height    = containerHeight;
-    props.rightContainer.height   = props.leftContainer.height;
+  /**
+   * Create DOM elements for the group
+   * @private
+   */
+  Group.prototype._create = function() {
+    var label = document.createElement('div');
+    label.className = 'vlabel';
+    this.dom.label = label;
 
-    // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
-    props.background.width = props.root.width - borderRootWidth;
-    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
-    props.leftContainer.width = props.left.width;
-    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
-    props.rightContainer.width = props.right.width;
-    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-    props.center.width          = centerWidth;
-    props.centerContainer.width = centerWidth;
-    props.top.width             = centerWidth;
-    props.bottom.width          = centerWidth;
+    var inner = document.createElement('div');
+    inner.className = 'inner';
+    label.appendChild(inner);
+    this.dom.inner = inner;
 
-    // resize the panels
-    dom.background.style.height           = props.background.height + 'px';
-    dom.backgroundVertical.style.height   = props.background.height + 'px';
-    dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
-    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+    var foreground = document.createElement('div');
+    foreground.className = 'group';
+    foreground['timeline-group'] = this;
+    this.dom.foreground = foreground;
 
-    dom.background.style.width            = props.background.width + 'px';
-    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-    dom.centerContainer.style.width       = props.center.width + 'px';
-    dom.top.style.width                   = props.top.width + 'px';
-    dom.bottom.style.width                = props.bottom.width + 'px';
+    this.dom.background = document.createElement('div');
+    this.dom.background.className = 'group';
 
-    // reposition the panels
-    dom.background.style.left           = '0';
-    dom.background.style.top            = '0';
-    dom.backgroundVertical.style.left   = props.left.width + 'px';
-    dom.backgroundVertical.style.top    = '0';
-    dom.backgroundHorizontal.style.left = '0';
-    dom.backgroundHorizontal.style.top  = props.top.height + 'px';
-    dom.centerContainer.style.left      = props.left.width + 'px';
-    dom.centerContainer.style.top       = props.top.height + 'px';
-    dom.leftContainer.style.left        = '0';
-    dom.leftContainer.style.top         = props.top.height + 'px';
-    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-    dom.rightContainer.style.top        = props.top.height + 'px';
-    dom.top.style.left                  = props.left.width + 'px';
-    dom.top.style.top                   = '0';
-    dom.bottom.style.left               = props.left.width + 'px';
-    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
+    this.dom.axis = document.createElement('div');
+    this.dom.axis.className = 'group';
 
-    // update the scrollTop, feasible range for the offset can be changed
-    // when the height of the Timeline or of the contents of the center changed
-    this._updateScrollTop();
+    // 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';
+    this.dom.marker.innerHTML = '?';
+    this.dom.background.appendChild(this.dom.marker);
+  };
 
-    // reposition the scrollable contents
-    var offset = this.props.scrollTop;
-    if (options.orientation == 'bottom') {
-      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-          this.props.border.top - this.props.border.bottom, 0);
+  /**
+   * 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);
+    }
+    else if (content != undefined) {
+      this.dom.inner.innerHTML = content;
+    }
+    else {
+      this.dom.inner.innerHTML = this.groupId;
     }
-    dom.center.style.left = '0';
-    dom.center.style.top  = offset + 'px';
-    dom.left.style.left   = '0';
-    dom.left.style.top    = offset + 'px';
-    dom.right.style.left  = '0';
-    dom.right.style.top   = offset + 'px';
 
-    // show shadows when vertical scrolling is available
-    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
-    dom.shadowTop.style.visibility          = visibilityTop;
-    dom.shadowBottom.style.visibility       = visibilityBottom;
-    dom.shadowTopLeft.style.visibility      = visibilityTop;
-    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
-    dom.shadowTopRight.style.visibility     = visibilityTop;
-    dom.shadowBottomRight.style.visibility  = visibilityBottom;
+    // update title
+    this.dom.label.title = data && data.title || '';
 
-    // redraw all components
-    this.components.forEach(function (component) {
-      resized = component.redraw() || resized;
-    });
-    if (resized) {
-      // keep repainting until all sizes are settled
-      this.redraw();
+    if (!this.dom.inner.firstChild) {
+      util.addClassName(this.dom.inner, 'hidden');
+    }
+    else {
+      util.removeClassName(this.dom.inner, 'hidden');
     }
-  };
 
-  // TODO: deprecated since version 1.1.0, remove some day
-  Timeline.prototype.repaint = function () {
-      throw new Error('Function repaint is deprecated. Use redraw instead.');
+    // update className
+    var className = data && data.className || null;
+    if (className != this.className) {
+      if (this.className) {
+        util.removeClassName(this.dom.label, className);
+        util.removeClassName(this.dom.foreground, className);
+        util.removeClassName(this.dom.background, className);
+        util.removeClassName(this.dom.axis, 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);
+    }
   };
 
   /**
-   * Convert a position on screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
+   * Get the width of the group label
+   * @return {number} width
    */
-  // TODO: move this function to Range
-  Timeline.prototype._toTime = function(x) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return new Date(x / conversion.scale + conversion.offset);
+  Group.prototype.getLabelWidth = function() {
+    return this.props.label.width;
   };
 
 
   /**
-   * Convert a position on the global screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
+   * Repaint this group
+   * @param {{start: number, end: number}} range
+   * @param {{item: number, axis: number}} margin
+   * @param {boolean} [restack=false]  Force restacking of all items
+   * @return {boolean} Returns true if the group is resized
    */
-  // TODO: move this function to Range
-  Timeline.prototype._toGlobalTime = function(x) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+  Group.prototype.redraw = function(range, margin, restack) {
+    var resized = false;
 
-  /**
-   * Convert a datetime (Date object) into a position on the screen
-   * @param {Date}   time A date
-   * @return {int}   x    The position on the screen in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toScreen = function(time) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+    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;
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toGlobalScreen = function(time) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+      util.forEach(this.items, function (item) {
+        item.dirty = true;
+        if (item.displayed) item.redraw();
+      });
 
+      restack = true;
+    }
 
-  /**
-   * Initialize watching when option autoResize is true
-   * @private
-   */
-  Timeline.prototype._initAutoResize = function () {
-    if (this.options.autoResize == true) {
-      this._startAutoResize();
+    // 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);
+    }
+
+    // recalculate the height of the group
+    var height;
+    var visibleItems = this.visibleItems;
+    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 (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 / 2;
     }
     else {
-      this._stopAutoResize();
+      height = margin.axis + margin.item;
+    }
+    height = Math.max(height, this.props.label.height);
+
+    // 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;
+
+    // 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;
+
+    // apply new height
+    this.dom.background.style.height  = height + 'px';
+    this.dom.foreground.style.height  = height + 'px';
+    this.dom.label.style.height = height + 'px';
+
+    // 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();
     }
+
+    return resized;
   };
 
   /**
-   * Watch for changes in the size of the container. On resize, the Panel will
-   * automatically redraw itself.
-   * @private
+   * Show this group: attach to the DOM
    */
-  Timeline.prototype._startAutoResize = function () {
-    var me = this;
+  Group.prototype.show = function() {
+    if (!this.dom.label.parentNode) {
+      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+    }
 
-    this._stopAutoResize();
+    if (!this.dom.foreground.parentNode) {
+      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
+    }
 
-    this._onResize = function() {
-      if (me.options.autoResize != true) {
-        // stop watching when the option autoResize is changed to false
-        me._stopAutoResize();
-        return;
-      }
+    if (!this.dom.background.parentNode) {
+      this.itemSet.dom.background.appendChild(this.dom.background);
+    }
 
-      if (me.dom.root) {
-        // check whether the frame is resized
-        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
-            (me.dom.root.clientHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.clientWidth;
-          me.props.lastHeight = me.dom.root.clientHeight;
+    if (!this.dom.axis.parentNode) {
+      this.itemSet.dom.axis.appendChild(this.dom.axis);
+    }
+  };
 
-          me.emit('change');
-        }
-      }
-    };
+  /**
+   * Hide this group: remove from the DOM
+   */
+  Group.prototype.hide = function() {
+    var label = this.dom.label;
+    if (label.parentNode) {
+      label.parentNode.removeChild(label);
+    }
 
-    // add event listener to window resize
-    util.addEventListener(window, 'resize', this._onResize);
+    var foreground = this.dom.foreground;
+    if (foreground.parentNode) {
+      foreground.parentNode.removeChild(foreground);
+    }
 
-    this.watchTimer = setInterval(this._onResize, 1000);
+    var background = this.dom.background;
+    if (background.parentNode) {
+      background.parentNode.removeChild(background);
+    }
+
+    var axis = this.dom.axis;
+    if (axis.parentNode) {
+      axis.parentNode.removeChild(axis);
+    }
   };
 
   /**
-   * Stop watching for a resize of the frame.
-   * @private
+   * Add an item to the group
+   * @param {Item} item
    */
-  Timeline.prototype._stopAutoResize = function () {
-    if (this.watchTimer) {
-      clearInterval(this.watchTimer);
-      this.watchTimer = undefined;
-    }
+  Group.prototype.add = function(item) {
+    this.items[item.id] = item;
+    item.setParent(this);
 
-    // remove event listener on window.resize
-    util.removeEventListener(window, 'resize', this._onResize);
-    this._onResize = null;
+    if (item instanceof ItemRange && 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);
+    }
   };
 
   /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
+   * Remove an item from the group
+   * @param {Item} item
    */
-  Timeline.prototype._onTouch = function (event) {
-    this.touch.allowDragging = true;
+  Group.prototype.remove = function(item) {
+    delete this.items[item.id];
+    item.setParent(this.itemSet);
+
+    // remove from visible items
+    var index = this.visibleItems.indexOf(item);
+    if (index != -1) this.visibleItems.splice(index, 1);
+
+    // TODO: also remove from ordered items?
   };
 
   /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
+   * Remove an item from the corresponding DataSet
+   * @param {Item} item
    */
-  Timeline.prototype._onPinch = function (event) {
-    this.touch.allowDragging = false;
+  Group.prototype.removeFromDataSet = function(item) {
+    this.itemSet.removeItem(item.id);
   };
 
   /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
+   * Reorder the items
    */
-  Timeline.prototype._onDragStart = function (event) {
-    this.touch.initialScrollTop = this.props.scrollTop;
+  Group.prototype.order = function() {
+    var array = util.toArray(this.items);
+    this.orderedItems.byStart = array;
+    this.orderedItems.byEnd = this._constructByEndArray(array);
+
+    stack.orderByStart(this.orderedItems.byStart);
+    stack.orderByEnd(this.orderedItems.byEnd);
   };
 
   /**
-   * Move the timeline vertically
-   * @param {Event} event
+   * Create an array containing all items being a range (having an end date)
+   * @param {Item[]} array
+   * @returns {ItemRange[]}
    * @private
    */
-  Timeline.prototype._onDrag = function (event) {
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.touch.allowDragging) return;
-
-    var delta = event.gesture.deltaY;
-
-    var oldScrollTop = this._getScrollTop();
-    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+  Group.prototype._constructByEndArray = function(array) {
+    var endArray = [];
 
-    if (newScrollTop != oldScrollTop) {
-      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] instanceof ItemRange) {
+        endArray.push(array[i]);
+      }
     }
+    return endArray;
   };
 
   /**
-   * Apply a scrollTop
-   * @param {Number} scrollTop
-   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * 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
    */
-  Timeline.prototype._setScrollTop = function (scrollTop) {
-    this.props.scrollTop = scrollTop;
-    this._updateScrollTop();
-    return this.props.scrollTop;
+  Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
+    var initialPosByStart,
+        newVisibleItems = [],
+        i;
+
+    // first check if the items that were in view previously are still in view.
+    // this handles the case for the ItemRange that is both before and after the current one.
+    if (visibleItems.length > 0) {
+      for (i = 0; i < visibleItems.length; i++) {
+        this._checkIfVisible(visibleItems[i], newVisibleItems, range);
+      }
+    }
+
+    // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
+    if (newVisibleItems.length == 0) {
+      initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
+    }
+    else {
+      initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
+    }
+
+    // use visible search to find a visible ItemRange (only based on endTime)
+    var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
+
+    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+    if (initialPosByStart != -1) {
+      for (i = initialPosByStart; i >= 0; i--) {
+        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      }
+      for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
+        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      }
+    }
+
+    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+    if (initialPosByEnd != -1) {
+      for (i = initialPosByEnd; i >= 0; i--) {
+        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+      }
+      for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
+        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+      }
+    }
+
+    return newVisibleItems;
   };
 
+
+
   /**
-   * Update the current scrollTop when the height of  the containers has been changed
-   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * this function checks if an item is invisible. If it is NOT we make it visible
+   * and add it to the global visible items. If it is, return true.
+   *
+   * @param {Item} item
+   * @param {Item[]} visibleItems
+   * @param {{start:number, end:number}} range
+   * @returns {boolean}
    * @private
    */
-  Timeline.prototype._updateScrollTop = function () {
-    // recalculate the scrollTopMin
-    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
-    if (scrollTopMin != this.props.scrollTopMin) {
-      // in case of bottom orientation, change the scrollTop such that the contents
-      // do not move relative to the time axis at the bottom
-      if (this.options.orientation == 'bottom') {
-        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+  Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
+    if (item.isVisible(range)) {
+      if (!item.displayed) item.show();
+      item.repositionX();
+      if (visibleItems.indexOf(item) == -1) {
+        visibleItems.push(item);
       }
-      this.props.scrollTopMin = scrollTopMin;
+      return false;
+    }
+    else {
+      if (item.displayed) item.hide();
+      return true;
     }
-
-    // limit the scrollTop to the feasible scroll range
-    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
-    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
-
-    return this.props.scrollTop;
   };
 
   /**
-   * Get the current scrollTop
-   * @returns {number} scrollTop
+   * 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
    */
-  Timeline.prototype._getScrollTop = function () {
-    return this.props.scrollTop;
+  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();
+    }
   };
 
-  module.exports = Timeline;
+  module.exports = Group;
 
 
 /***/ },
 /* 18 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var Hammer = __webpack_require__(49);
   var util = __webpack_require__(1);
-  var moment = __webpack_require__(4);
-  var Component = __webpack_require__(19);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Component = __webpack_require__(12);
+  var Group = __webpack_require__(17);
+  var ItemBox = __webpack_require__(23);
+  var ItemPoint = __webpack_require__(24);
+  var ItemRange = __webpack_require__(25);
+
+
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
   /**
-   * @constructor Range
-   * A Range controls a numeric range with a start and end value.
-   * The Range adjusts the range based on mouse events or programmatic changes,
-   * and triggers events when the range is changing or has been changed.
-   * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
-   * @param {Object} [options]    See description at Range.setOptions
+   * 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
    */
-  function Range(body, options) {
-    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
-    this.start = now.clone().add('days', -3).valueOf(); // Number
-    this.end = now.clone().add('days', 4).valueOf();   // Number
-
+  function ItemSet(body, options) {
     this.body = body;
 
-    // default options
     this.defaultOptions = {
-      start: null,
-      end: null,
-      direction: 'horizontal', // 'horizontal' or 'vertical'
-      moveable: true,
-      zoomable: true,
-      min: null,
-      max: null,
-      zoomMin: 10,                                // milliseconds
-      zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000  // milliseconds
+      type: null,  // 'box', 'point', 'range'
+      orientation: 'bottom',  // 'top' or 'bottom'
+      align: 'center', // alignment of box items
+      stack: true,
+      groupOrder: null,
+
+      selectable: true,
+      editable: {
+        updateTime: false,
+        updateGroup: false,
+        add: false,
+        remove: false
+      },
+
+      onAdd: function (item, callback) {
+        callback(item);
+      },
+      onUpdate: function (item, callback) {
+        callback(item);
+      },
+      onMove: function (item, callback) {
+        callback(item);
+      },
+      onRemove: function (item, callback) {
+        callback(item);
+      },
+
+      margin: {
+        item: 10,
+        axis: 20
+      },
+      padding: 5
     };
+
+    // options is shared by this ItemSet and all its items
     this.options = util.extend({}, this.defaultOptions);
 
-    this.props = {
-      touch: {}
+    // options for getting items from the DataSet with the correct type
+    this.itemOptions = {
+      type: {start: 'Date', end: 'Date'}
     };
 
-    // drag listeners for dragging
-    this.body.emitter.on('dragstart', this._onDragStart.bind(this));
-    this.body.emitter.on('drag',      this._onDrag.bind(this));
-    this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
+    this.conversion = {
+      toScreen: body.util.toScreen,
+      toTime: body.util.toTime
+    };
+    this.dom = {};
+    this.props = {};
+    this.hammer = null;
 
-    // ignore dragging when holding
-    this.body.emitter.on('hold', this._onHold.bind(this));
+    var me = this;
+    this.itemsData = null;    // DataSet
+    this.groupsData = null;   // DataSet
 
-    // mouse wheel for zooming
-    this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));
-    this.body.emitter.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
+    // 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);
+      }
+    };
 
-    // pinch to zoom
-    this.body.emitter.on('touch', this._onTouch.bind(this));
-    this.body.emitter.on('pinch', this._onPinch.bind(this));
+    // 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);
+      }
+    };
+
+    this.items = {};      // object with an Item for every data item
+    this.groups = {};     // Group object for every group
+    this.groupIds = [];
+
+    this.selection = [];  // list with the ids of all selected nodes
+    this.stackDirty = true; // if true, all items will be restacked on next redraw
+
+    this.touchParams = {}; // stores properties while dragging
+    // create the HTML DOM
+
+    this._create();
 
     this.setOptions(options);
   }
 
-  Range.prototype = new Component();
+  ItemSet.prototype = new Component();
+
+  // available item types will be registered here
+  ItemSet.types = {
+    box: ItemBox,
+    range: ItemRange,
+    point: ItemPoint
+  };
+
+  /**
+   * Create the HTML DOM for the ItemSet
+   */
+  ItemSet.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'itemset';
+    frame['timeline-itemset'] = this;
+    this.dom.frame = frame;
+
+    // create background panel
+    var background = document.createElement('div');
+    background.className = 'background';
+    frame.appendChild(background);
+    this.dom.background = background;
+
+    // create foreground panel
+    var foreground = document.createElement('div');
+    foreground.className = 'foreground';
+    frame.appendChild(foreground);
+    this.dom.foreground = foreground;
+
+    // create axis panel
+    var axis = document.createElement('div');
+    axis.className = 'axis';
+    this.dom.axis = axis;
+
+    // create labelset
+    var labelSet = document.createElement('div');
+    labelSet.className = 'labelset';
+    this.dom.labelSet = labelSet;
+
+    // create ungrouped Group
+    this._updateUngrouped();
+
+    // 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, {
+      prevent_default: true
+    });
+
+    // 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));
+
+    // single select (or unselect) when tapping an item
+    this.hammer.on('tap',  this._onSelectItem.bind(this));
+
+    // multi select when holding mouse/touch, or on ctrl+click
+    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
+
+    // add item on doubletap
+    this.hammer.on('doubletap', this._onAddItem.bind(this));
+
+    // attach to the DOM
+    this.show();
+  };
+
+  /**
+   * 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', or 'range'. The default
+   *                              Style can be overwritten by individual items.
+   *                           {String} align
+   *                              Alignment for the items, only applicable for
+   *                              ItemBox. 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
+   *                              Margin between items in pixels. 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.
+   */
+  ItemSet.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
+      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 = options.margin;
+        }
+        else if (typeof options.margin === 'object'){
+          util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
+        }
+      }
+
+      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);
+        }
+      }
+
+      // callback functions
+      var addCallback = (function (name) {
+        if (name in options) {
+          var fn = options[name];
+          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'].forEach(addCallback);
+
+      // force the itemSet to refresh: options like orientation and margins may be changed
+      this.markDirty();
+    }
+  };
+
+  /**
+   * Mark the ItemSet dirty so it will refresh everything with next redraw
+   */
+  ItemSet.prototype.markDirty = function() {
+    this.groupIds = [];
+    this.stackDirty = true;
+  };
 
   /**
-   * Set options for the range controller
-   * @param {Object} options      Available options:
-   *                              {Number | Date | String} start  Start date for the range
-   *                              {Number | Date | String} end    End date for the range
-   *                              {Number} min    Minimum value for start
-   *                              {Number} max    Maximum value for end
-   *                              {Number} zoomMin    Set a minimum value for
-   *                                                  (end - start).
-   *                              {Number} zoomMax    Set a maximum value for
-   *                                                  (end - start).
-   *                              {Boolean} moveable Enable moving of the range
-   *                                                 by dragging. True by default
-   *                              {Boolean} zoomable Enable zooming of the range
-   *                                                 by pinching/scrolling. True by default
+   * Destroy the ItemSet
    */
-  Range.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the options that we know
-      var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
-      util.selectiveExtend(fields, this.options, options);
+  ItemSet.prototype.destroy = function() {
+    this.hide();
+    this.setItems(null);
+    this.setGroups(null);
 
-      if ('start' in options || 'end' in options) {
-        // apply a new range. both start and end are optional
-        this.setRange(options.start, options.end);
-      }
-    }
+    this.hammer = null;
+
+    this.body = null;
+    this.conversion = null;
   };
 
   /**
-   * Test whether direction has a valid value
-   * @param {String} direction    'horizontal' or 'vertical'
+   * Hide the component from the DOM
    */
-  function validateDirection (direction) {
-    if (direction != 'horizontal' && direction != 'vertical') {
-      throw new TypeError('Unknown direction "' + direction + '". ' +
-          'Choose "horizontal" or "vertical".');
+  ItemSet.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
-  }
 
-  /**
-   * Set a new start and end range
-   * @param {Number} [start]
-   * @param {Number} [end]
-   */
-  Range.prototype.setRange = function(start, end) {
-    var changed = this._applyRange(start, end);
-    if (changed) {
-      var params = {
-        start: new Date(this.start),
-        end: new Date(this.end)
-      };
-      this.body.emitter.emit('rangechange', params);
-      this.body.emitter.emit('rangechanged', params);
+    // 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);
     }
   };
 
   /**
-   * Set a new start and end range. This method is the same as setRange, but
-   * does not trigger a range change and range changed event, and it returns
-   * true when the range is changed
-   * @param {Number} [start]
-   * @param {Number} [end]
+   * Show the component in the DOM (when not already visible).
    * @return {Boolean} changed
-   * @private
    */
-  Range.prototype._applyRange = function(start, end) {
-    var newStart = (start != null) ? util.convert(start, 'Date').valueOf() : this.start,
-        newEnd   = (end != null)   ? util.convert(end, 'Date').valueOf()   : this.end,
-        max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
-        min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
-        diff;
-
-    // check for valid number
-    if (isNaN(newStart) || newStart === null) {
-      throw new Error('Invalid start "' + start + '"');
-    }
-    if (isNaN(newEnd) || newEnd === null) {
-      throw new Error('Invalid end "' + end + '"');
+  ItemSet.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
     }
 
-    // prevent start < end
-    if (newEnd < newStart) {
-      newEnd = newStart;
+    // show axis with dots
+    if (!this.dom.axis.parentNode) {
+      this.body.dom.backgroundVertical.appendChild(this.dom.axis);
     }
 
-    // prevent start < min
-    if (min !== null) {
-      if (newStart < min) {
-        diff = (min - newStart);
-        newStart += diff;
-        newEnd += diff;
-
-        // prevent end > max
-        if (max != null) {
-          if (newEnd > max) {
-            newEnd = max;
-          }
-        }
-      }
+    // show labelset containing labels
+    if (!this.dom.labelSet.parentNode) {
+      this.body.dom.left.appendChild(this.dom.labelSet);
     }
+  };
 
-    // prevent end > max
-    if (max !== null) {
-      if (newEnd > max) {
-        diff = (newEnd - max);
-        newStart -= diff;
-        newEnd -= diff;
+  /**
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {Array} [ids] An array with zero or more id's of the items to be
+   *                      selected. If ids is an empty array, all items will be
+   *                      unselected.
+   */
+  ItemSet.prototype.setSelection = function(ids) {
+    var i, ii, id, item;
 
-        // prevent start < min
-        if (min != null) {
-          if (newStart < min) {
-            newStart = min;
-          }
-        }
+    if (ids) {
+      if (!Array.isArray(ids)) {
+        throw new TypeError('Array expected');
       }
-    }
 
-    // prevent (end-start) < zoomMin
-    if (this.options.zoomMin !== null) {
-      var zoomMin = parseFloat(this.options.zoomMin);
-      if (zoomMin < 0) {
-        zoomMin = 0;
-      }
-      if ((newEnd - newStart) < zoomMin) {
-        if ((this.end - this.start) === zoomMin) {
-          // ignore this action, we are already zoomed to the minimum
-          newStart = this.start;
-          newEnd = this.end;
-        }
-        else {
-          // zoom to the minimum
-          diff = (zoomMin - (newEnd - newStart));
-          newStart -= diff / 2;
-          newEnd += diff / 2;
-        }
+      // 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();
       }
-    }
 
-    // prevent (end-start) > zoomMax
-    if (this.options.zoomMax !== null) {
-      var zoomMax = parseFloat(this.options.zoomMax);
-      if (zoomMax < 0) {
-        zoomMax = 0;
-      }
-      if ((newEnd - newStart) > zoomMax) {
-        if ((this.end - this.start) === zoomMax) {
-          // ignore this action, we are already zoomed to the maximum
-          newStart = this.start;
-          newEnd = this.end;
-        }
-        else {
-          // zoom to the maximum
-          diff = ((newEnd - newStart) - zoomMax);
-          newStart += diff / 2;
-          newEnd -= diff / 2;
+      // 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 changed = (this.start != newStart || this.end != newEnd);
-
-    this.start = newStart;
-    this.end = newEnd;
-
-    return changed;
   };
 
   /**
-   * Retrieve the current range.
-   * @return {Object} An object with start and end properties
-   */
-  Range.prototype.getRange = function() {
-    return {
-      start: this.start,
-      end: this.end
-    };
-  };
-
-  /**
-   * Calculate the conversion offset and scale for current range, based on
-   * the provided width
-   * @param {Number} width
-   * @returns {{offset: number, scale: number}} conversion
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
    */
-  Range.prototype.conversion = function (width) {
-    return Range.conversion(this.start, this.end, width);
+  ItemSet.prototype.getSelection = function() {
+    return this.selection.concat([]);
   };
 
   /**
-   * Static method to calculate the conversion offset and scale for a range,
-   * based on the provided start, end, and width
-   * @param {Number} start
-   * @param {Number} end
-   * @param {Number} width
-   * @returns {{offset: number, scale: number}} conversion
+   * Deselect a selected item
+   * @param {String | Number} id
+   * @private
    */
-  Range.conversion = function (start, end, width) {
-    if (width != 0 && (end - start != 0)) {
-      return {
-        offset: start,
-        scale: width / (end - start)
+  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;
       }
     }
-    else {
-      return {
-        offset: 0,
-        scale: 1
-      };
-    }
   };
 
   /**
-   * Start dragging horizontally or vertically
-   * @param {Event} event
-   * @private
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  Range.prototype._onDragStart = function(event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
+  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;
 
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
+    // update class name
+    frame.className = 'itemset' + (editable ? ' editable' : '');
 
-    this.props.touch.start = this.start;
-    this.props.touch.end = this.end;
+    // reorder the groups (if needed)
+    resized = this._orderGroups() || resized;
 
-    if (this.body.dom.root) {
-      this.body.dom.root.style.cursor = 'move';
-    }
-  };
+    // 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;
 
-  /**
-   * Perform dragging operation
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onDrag = function (event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
-    var direction = this.options.direction;
-    validateDirection(direction);
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
-    var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
-        interval = (this.props.touch.end - this.props.touch.start),
-        width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
-        diffRange = -delta / width * interval;
-    this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
-    this.body.emitter.emit('rangechange', {
-      start: new Date(this.start),
-      end:   new Date(this.end)
+    // redraw all groups
+    var restack = this.stackDirty,
+        firstGroup = this._firstGroup(),
+        firstMargin = {
+          item: margin.item,
+          axis: margin.axis
+        },
+        nonFirstMargin = {
+          item: margin.item,
+          axis: margin.item / 2
+        },
+        height = 0,
+        minHeight = margin.axis + margin.item;
+    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;
 
-  /**
-   * Stop dragging operation
-   * @param {event} event
-   * @private
-   */
-  Range.prototype._onDragEnd = function (event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
+    // update frame height
+    frame.style.height  = asSize(height);
 
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
+    // calculate actual size and position
+    this.props.top = frame.offsetTop;
+    this.props.left = frame.offsetLeft;
+    this.props.width = frame.offsetWidth;
+    this.props.height = height;
 
-    if (this.body.dom.root) {
-      this.body.dom.root.style.cursor = 'auto';
-    }
+    // 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 = this.body.domProps.border.left + 'px';
 
-    // fire a rangechanged event
-    this.body.emitter.emit('rangechanged', {
-      start: new Date(this.start),
-      end:   new Date(this.end)
-    });
+    // check if this component is resized
+    resized = this._isResized() || resized;
+
+    return resized;
   };
 
   /**
-   * Event handler for mouse wheel event, used to zoom
-   * Code from http://adomas.org/javascript-mouse-wheel/
-   * @param {Event} event
+   * Get the first group, aligned with the axis
+   * @return {Group | null} firstGroup
    * @private
    */
-  Range.prototype._onMouseWheel = function(event) {
-    // only allow zooming when configured as zoomable and moveable
-    if (!(this.options.zoomable && this.options.moveable)) return;
+  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];
 
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta / 120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail / 3;
-    }
+    return firstGroup || null;
+  };
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-      // perform the zoom action. Delta is normally 1 or -1
+  /**
+   * Create or delete the group holding all ungrouped items. This group is used when
+   * there are no groups specified.
+   * @protected
+   */
+  ItemSet.prototype._updateUngrouped = function() {
+    var ungrouped = this.groups[UNGROUPED];
 
-      // adjust a negative delta such that zooming in with delta 0.1
-      // equals zooming out with a delta -0.1
-      var scale;
-      if (delta < 0) {
-        scale = 1 - (delta / 5);
-      }
-      else {
-        scale = 1 / (1 + (delta / 5)) ;
+    if (this.groupsData) {
+      // remove the group holding all ungrouped items
+      if (ungrouped) {
+        ungrouped.hide();
+        delete this.groups[UNGROUPED];
       }
-
-      // calculate center, the date to zoom around
-      var gesture = util.fakeGesture(this, event),
-          pointer = getPointer(gesture.center, this.body.dom.center),
-          pointerDate = this._pointerToDate(pointer);
-
-      this.zoom(scale, pointerDate);
     }
+    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;
 
-    // Prevent default actions caused by mouse wheel
-    // (else the page and timeline both zoom and scroll)
-    event.preventDefault();
-  };
+        for (var itemId in this.items) {
+          if (this.items.hasOwnProperty(itemId)) {
+            ungrouped.add(this.items[itemId]);
+          }
+        }
 
-  /**
-   * Start of a touch gesture
-   * @private
-   */
-  Range.prototype._onTouch = function (event) {
-    this.props.touch.start = this.start;
-    this.props.touch.end = this.end;
-    this.props.touch.allowDragging = true;
-    this.props.touch.center = null;
+        ungrouped.show();
+      }
+    }
   };
 
   /**
-   * On start of a hold gesture
-   * @private
+   * Get the element for the labelset
+   * @return {HTMLElement} labelSet
    */
-  Range.prototype._onHold = function () {
-    this.props.touch.allowDragging = false;
+  ItemSet.prototype.getLabelSet = function() {
+    return this.dom.labelSet;
   };
 
   /**
-   * Handle pinch event
-   * @param {Event} event
-   * @private
+   * Set items
+   * @param {vis.DataSet | null} items
    */
-  Range.prototype._onPinch = function (event) {
-    // only allow zooming when configured as zoomable and moveable
-    if (!(this.options.zoomable && this.options.moveable)) return;
+  ItemSet.prototype.setItems = function(items) {
+    var me = this,
+        ids,
+        oldItemsData = this.itemsData;
 
-    this.props.touch.allowDragging = false;
+    // 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');
+    }
 
-    if (event.gesture.touches.length > 1) {
-      if (!this.props.touch.center) {
-        this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
-      }
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-      var scale = 1 / event.gesture.scale,
-          initDate = this._pointerToDate(this.props.touch.center);
+      // remove all drawn items
+      ids = oldItemsData.getIds();
+      this._onRemove(ids);
+    }
 
-      // calculate new start and end
-      var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
-      var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
+    if (this.itemsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.itemListeners, function (callback, event) {
+        me.itemsData.on(event, callback, id);
+      });
 
-      // apply new range
-      this.setRange(newStart, newEnd);
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
+
+      // update the group holding all ungrouped items
+      this._updateUngrouped();
     }
   };
 
   /**
-   * Helper function to calculate the center date for zooming
-   * @param {{x: Number, y: Number}} pointer
-   * @return {number} date
-   * @private
+   * Get the current items
+   * @returns {vis.DataSet | null}
    */
-  Range.prototype._pointerToDate = function (pointer) {
-    var conversion;
-    var direction = this.options.direction;
+  ItemSet.prototype.getItems = function() {
+    return this.itemsData;
+  };
 
-    validateDirection(direction);
+  /**
+   * Set groups
+   * @param {vis.DataSet} groups
+   */
+  ItemSet.prototype.setGroups = function(groups) {
+    var me = this,
+        ids;
 
-    if (direction == 'horizontal') {
-      var width = this.body.domProps.center.width;
-      conversion = this.conversion(width);
-      return pointer.x / conversion.scale + conversion.offset;
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
+
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
+    }
+
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
     }
     else {
-      var height = this.body.domProps.center.height;
-      conversion = this.conversion(height);
-      return pointer.y / conversion.scale + conversion.offset;
+      throw new TypeError('Data must be an instance of DataSet or DataView');
     }
-  };
 
-  /**
-   * Get the pointer location relative to the location of the dom element
-   * @param {{pageX: Number, pageY: Number}} touch
-   * @param {Element} element   HTML DOM element
-   * @return {{x: Number, y: Number}} pointer
-   * @private
-   */
-  function getPointer (touch, element) {
-    return {
-      x: touch.pageX - util.getAbsoluteLeft(element),
-      y: touch.pageY - util.getAbsoluteTop(element)
-    };
-  }
+    if (this.groupsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.on(event, callback, id);
+      });
 
-  /**
-   * Zoom the range the given scale in or out. Start and end date will
-   * be adjusted, and the timeline will be redrawn. You can optionally give a
-   * date around which to zoom.
-   * For example, try scale = 0.9 or 1.1
-   * @param {Number} scale      Scaling factor. Values above 1 will zoom out,
-   *                            values below 1 will zoom in.
-   * @param {Number} [center]   Value representing a date around which will
-   *                            be zoomed.
-   */
-  Range.prototype.zoom = function(scale, center) {
-    // if centerDate is not provided, take it half between start Date and end Date
-    if (center == null) {
-      center = (this.start + this.end) / 2;
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
     }
 
-    // calculate new start and end
-    var newStart = center + (this.start - center) * scale;
-    var newEnd = center + (this.end - center) * scale;
+    // update the group holding all ungrouped items
+    this._updateUngrouped();
 
-    this.setRange(newStart, newEnd);
+    // update the order of all items in each group
+    this._order();
+
+    this.body.emitter.emit('change');
   };
 
   /**
-   * Move the range with a given delta to the left or right. Start and end
-   * value will be adjusted. For example, try delta = 0.1 or -0.1
-   * @param {Number}  delta     Moving amount. Positive value will move right,
-   *                            negative value will move left
+   * Get the current groups
+   * @returns {vis.DataSet | null} groups
    */
-  Range.prototype.move = function(delta) {
-    // zoom start Date and end Date relative to the centerDate
-    var diff = (this.end - this.start);
-
-    // apply new values
-    var newStart = this.start + diff * delta;
-    var newEnd = this.end + diff * delta;
+  ItemSet.prototype.getGroups = function() {
+    return this.groupsData;
+  };
 
-    // TODO: reckon with min and max range
+  /**
+   * Remove an item by its id
+   * @param {String | Number} id
+   */
+  ItemSet.prototype.removeItem = function(id) {
+    var item = this.itemsData.get(id),
+        dataset = this.itemsData.getDataSet();
 
-    this.start = newStart;
-    this.end = newEnd;
+    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);
+        }
+      });
+    }
   };
 
   /**
-   * Move the range to a new center point
-   * @param {Number} moveTo      New center point of the range
+   * Handle updated items
+   * @param {Number[]} ids
+   * @protected
    */
-  Range.prototype.moveTo = function(moveTo) {
-    var center = (this.start + this.end) / 2;
-
-    var diff = center - moveTo;
+  ItemSet.prototype._onUpdate = function(ids) {
+    var me = this;
 
-    // calculate new start and end
-    var newStart = this.start - diff;
-    var newEnd = this.end - diff;
+    ids.forEach(function (id) {
+      var itemData = me.itemsData.get(id, me.itemOptions),
+          item = me.items[id],
+          type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
 
-    this.setRange(newStart, newEnd);
-  };
+      var constructor = ItemSet.types[type];
 
-  module.exports = Range;
+      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);
+        }
+      }
 
+      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 + '"');
+        }
+      }
+    });
 
-/***/ },
-/* 19 */
-/***/ function(module, exports, __webpack_require__) {
+    this._order();
+    this.stackDirty = true; // force re-stacking of all items next redraw
+    this.body.emitter.emit('change');
+  };
 
   /**
-   * Prototype for visual components
-   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
-   * @param {Object} [options]
+   * Handle added items
+   * @param {Number[]} ids
+   * @protected
    */
-  function Component (body, options) {
-    this.options = null;
-    this.props = null;
-  }
+  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
 
   /**
-   * Set options for the component. The new options will be merged into the
-   * current options.
-   * @param {Object} options
+   * Handle removed items
+   * @param {Number[]} ids
+   * @protected
    */
-  Component.prototype.setOptions = function(options) {
-    if (options) {
-      util.extend(this.options, options);
+  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);
+      }
+    });
+
+    if (count) {
+      // update order
+      this._order();
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
     }
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * Update the order of item in all groups
+   * @private
    */
-  Component.prototype.redraw = function() {
-    // should be implemented by the component
-    return false;
+  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();
+    });
   };
 
   /**
-   * Destroy the component. Cleanup DOM and event listeners
+   * Handle updated groups
+   * @param {Number[]} ids
+   * @private
    */
-  Component.prototype.destroy = function() {
-    // should be implemented by the component
+  ItemSet.prototype._onUpdateGroups = function(ids) {
+    this._onAddGroups(ids);
   };
 
   /**
-   * Test whether the component is resized since the last time _isResized() was
-   * called.
-   * @return {Boolean} Returns true if the component is resized
-   * @protected
+   * Handle changed groups
+   * @param {Number[]} ids
+   * @private
    */
-  Component.prototype._isResized = function() {
-    var resized = (this.props._previousWidth !== this.props.width ||
-        this.props._previousHeight !== this.props.height);
+  ItemSet.prototype._onAddGroups = function(ids) {
+    var me = this;
 
-    this.props._previousWidth = this.props.width;
-    this.props._previousHeight = this.props.height;
+    ids.forEach(function (id) {
+      var groupData = me.groupsData.get(id);
+      var group = me.groups[id];
 
-    return resized;
-  };
+      if (!group) {
+        // check for reserved ids
+        if (id == UNGROUPED) {
+          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
+        }
 
-  module.exports = Component;
+        var groupOptions = Object.create(me.options);
+        util.extend(groupOptions, {
+          height: null
+        });
 
+        group = new Group(id, groupData, me);
+        me.groups[id] = group;
 
-/***/ },
-/* 20 */
-/***/ function(module, exports, __webpack_require__) {
+        // 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);
+            }
+          }
+        }
 
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(19);
-  var TimeStep = __webpack_require__(21);
+        group.order();
+        group.show();
+      }
+      else {
+        // update group
+        group.setData(groupData);
+      }
+    });
+
+    this.body.emitter.emit('change');
+  };
 
   /**
-   * 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
+   * Handle removed groups
+   * @param {Number[]} ids
+   * @private
    */
-  function TimeAxis (body, options) {
-    this.dom = {
-      foreground: null,
-      majorLines: [],
-      majorTexts: [],
-      minorLines: [],
-      minorTexts: [],
-      redundant: {
-        majorLines: [],
-        majorTexts: [],
-        minorLines: [],
-        minorTexts: []
+  ItemSet.prototype._onRemoveGroups = function(ids) {
+    var groups = this.groups;
+    ids.forEach(function (id) {
+      var group = groups[id];
+
+      if (group) {
+        group.hide();
+        delete groups[id];
       }
-    };
-    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
-    };
-    this.options = util.extend({}, this.defaultOptions);
+    this.markDirty();
 
-    this.body = body;
+    this.body.emitter.emit('change');
+  };
 
-    // create the HTML DOM
-    this._create();
+  /**
+   * 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
+      });
 
-    this.setOptions(options);
-  }
+      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();
+        });
 
-  TimeAxis.prototype = new Component();
+        // show the groups again, attach them to the DOM in correct order
+        groupIds.forEach(function (groupId) {
+          groups[groupId].show();
+        });
 
-  /**
-   * 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'], this.options, options);
+        this.groupIds = groupIds;
+      }
+
+      return changed;
+    }
+    else {
+      return false;
     }
   };
 
   /**
-   * Create the HTML DOM for the TimeAxis
+   * Add a new item
+   * @param {Item} item
+   * @private
    */
-  TimeAxis.prototype._create = function() {
-    this.dom.foreground = document.createElement('div');
-    this.dom.background = document.createElement('div');
+  ItemSet.prototype._addItem = function(item) {
+    this.items[item.id] = item;
 
-    this.dom.foreground.className = 'timeaxis foreground';
-    this.dom.background.className = 'timeaxis background';
+    // add to group
+    var groupId = this.groupsData ? item.data.group : UNGROUPED;
+    var group = this.groups[groupId];
+    if (group) group.add(item);
   };
 
   /**
-   * Destroy the TimeAxis
+   * Update an existing item
+   * @param {Item} item
+   * @param {Object} itemData
+   * @private
    */
-  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);
+  ItemSet.prototype._updateItem = function(item, itemData) {
+    var oldGroupId = item.data.group;
+
+    item.data = itemData;
+    if (item.displayed) {
+      item.redraw();
     }
 
-    this.body = null;
+    // update group
+    if (oldGroupId != item.data.group) {
+      var oldGroup = this.groups[oldGroupId];
+      if (oldGroup) oldGroup.remove(item);
+
+      var groupId = this.groupsData ? item.data.group : UNGROUPED;
+      var group = this.groups[groupId];
+      if (group) group.add(item);
+    }
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * 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
    */
-  TimeAxis.prototype.redraw = function () {
-    var options = this.options,
-        props = this.props,
-        foreground = this.dom.foreground,
-        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
+  ItemSet.prototype._removeItem = function(item) {
+    // remove from DOM
+    item.hide();
 
-    //  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);
+    // remove from items
+    delete this.items[item.id];
 
-    foreground.style.height = this.props.height + 'px';
+    // remove from selection
+    var index = this.selection.indexOf(item.id);
+    if (index != -1) this.selection.splice(index, 1);
 
-    this._repaintLabels();
+    // remove from group
+    var groupId = this.groupsData ? item.data.group : UNGROUPED;
+    var group = this.groups[groupId];
+    if (group) group.remove(item);
+  };
 
-    // 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)
+  /**
+   * 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 = [];
+
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] instanceof ItemRange) {
+        endArray.push(array[i]);
+      }
     }
+    return endArray;
+  };
 
-    return this._isResized() || parentChanged;
+  /**
+   * 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
+   */
+  ItemSet.prototype._onTouch = function (event) {
+    // store the touched item, used in _onDragStart
+    this.touchParams.item = ItemSet.itemFromTarget(event);
   };
 
   /**
-   * Repaint major and minor text labels and vertical grid lines
+   * Start dragging the selected events
+   * @param {Event} event
    * @private
    */
-  TimeAxis.prototype._repaintLabels = function () {
-    var orientation = this.options.orientation;
+  ItemSet.prototype._onDragStart = function (event) {
+    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
+      return;
+    }
 
-    // calculate range and step (step such that we have space for 7 characters per label)
-    var start = util.convert(this.body.range.start, 'Number'),
-        end = util.convert(this.body.range.end, 'Number'),
-        minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
-            -this.body.util.toTime(0).valueOf();
-    var step = new TimeStep(new Date(start), new Date(end), minimumStep);
-    this.step = step;
+    var item = this.touchParams.item || null,
+        me = this,
+        props;
 
-    // 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.majorLines = dom.majorLines;
-    dom.redundant.majorTexts = dom.majorTexts;
-    dom.redundant.minorLines = dom.minorLines;
-    dom.redundant.minorTexts = dom.minorTexts;
-    dom.majorLines = [];
-    dom.majorTexts = [];
-    dom.minorLines = [];
-    dom.minorTexts = [];
+    if (item && item.selected) {
+      var dragLeftItem = event.target.dragLeftItem;
+      var dragRightItem = event.target.dragRightItem;
 
-    step.first();
-    var xFirstMajorLabel = undefined;
-    var max = 0;
-    while (step.hasNext() && max < 1000) {
-      max++;
-      var cur = step.getCurrent(),
-          x = this.body.util.toScreen(cur),
-          isMajor = step.isMajor();
+      if (dragLeftItem) {
+        props = {
+          item: dragLeftItem
+        };
 
-      // TODO: lines must have a width, such that we can create css backgrounds
+        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;
+        }
 
-      if (this.options.showMinorLabels) {
-        this._repaintMinorText(x, step.getLabelMinor(), orientation);
+        this.touchParams.itemProps = [props];
       }
+      else if (dragRightItem) {
+        props = {
+          item: dragRightItem
+        };
 
-      if (isMajor && this.options.showMajorLabels) {
-        if (x > 0) {
-          if (xFirstMajorLabel == undefined) {
-            xFirstMajorLabel = x;
-          }
-          this._repaintMajorText(x, step.getLabelMajor(), orientation);
+        if (me.options.editable.updateTime) {
+          props.end = item.data.end.valueOf();
         }
-        this._repaintMajorLine(x, orientation);
+        if (me.options.editable.updateGroup) {
+          if ('group' in item.data) props.group = item.data.group;
+        }
+
+        this.touchParams.itemProps = [props];
       }
       else {
-        this._repaintMinorLine(x, orientation);
-      }
-
-      step.next();
-    }
+        this.touchParams.itemProps = this.getSelection().map(function (id) {
+          var item = me.items[id];
+          var props = {
+            item: item
+          };
 
-    // 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 (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 (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
-        this._repaintMajorText(0, leftText, orientation);
+          return props;
+        });
       }
-    }
 
-    // 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);
-        }
-      }
-    });
+      event.stopPropagation();
+    }
   };
 
   /**
-   * Create a minor label for the axis at position x
-   * @param {Number} x
-   * @param {String} text
-   * @param {String} orientation   "top" or "bottom" (default)
+   * Drag selected items
+   * @param {Event} event
    * @private
    */
-  TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
-    // reuse redundant label
-    var label = this.dom.redundant.minorTexts.shift();
+  ItemSet.prototype._onDrag = function (event) {
+    if (this.touchParams.itemProps) {
+      var range = this.body.range,
+          snap = this.body.util.snap || null,
+          deltaX = event.gesture.deltaX,
+          scale = (this.props.width / (range.end - range.start)),
+          offset = deltaX / scale;
 
-    if (!label) {
-      // create new label
-      var content = document.createTextNode('');
-      label = document.createElement('div');
-      label.appendChild(content);
-      label.className = 'text minor';
-      this.dom.foreground.appendChild(label);
-    }
-    this.dom.minorTexts.push(label);
+      // move
+      this.touchParams.itemProps.forEach(function (props) {
+        if ('start' in props) {
+          var start = new Date(props.start + offset);
+          props.item.data.start = snap ? snap(start) : start;
+        }
 
-    label.childNodes[0].nodeValue = text;
+        if ('end' in props) {
+          var end = new Date(props.end + offset);
+          props.item.data.end = snap ? snap(end) : end;
+        }
 
-    label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
-    label.style.left = x + 'px';
-    //label.title = title;  // TODO: this is a heavy operation
-  };
+        if ('group' in props) {
+          // drag from one group to another
+          var group = ItemSet.groupFromTarget(event);
+          if (group && group.groupId != props.item.data.group) {
+            var oldGroup = props.item.parent;
+            oldGroup.remove(props.item);
+            oldGroup.order();
+            group.add(props.item);
+            group.order();
 
-  /**
-   * Create a Major label for the axis at position x
-   * @param {Number} x
-   * @param {String} text
-   * @param {String} orientation   "top" or "bottom" (default)
-   * @private
-   */
-  TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
-    // reuse redundant label
-    var label = this.dom.redundant.majorTexts.shift();
+            props.item.data.group = group.groupId;
+          }
+        }
+      });
 
-    if (!label) {
-      // create label
-      var content = document.createTextNode(text);
-      label = document.createElement('div');
-      label.className = 'text major';
-      label.appendChild(content);
-      this.dom.foreground.appendChild(label);
-    }
-    this.dom.majorTexts.push(label);
+      // TODO: implement onMoving handler
 
-    label.childNodes[0].nodeValue = text;
-    //label.title = title; // TODO: this is a heavy operation
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
 
-    label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
-    label.style.left = x + 'px';
+      event.stopPropagation();
+    }
   };
 
   /**
-   * Create a minor line for the axis at position x
-   * @param {Number} x
-   * @param {String} orientation   "top" or "bottom" (default)
+   * End of dragging selected items
+   * @param {Event} event
    * @private
    */
-  TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
-    // reuse redundant line
-    var line = this.dom.redundant.minorLines.shift();
+  ItemSet.prototype._onDragEnd = function (event) {
+    if (this.touchParams.itemProps) {
+      // prepare a change set for the changed items
+      var changes = [],
+          me = this,
+          dataset = this.itemsData.getDataSet();
 
-    if (!line) {
-      // create vertical line
-      line = document.createElement('div');
-      line.className = 'grid vertical minor';
-      this.dom.background.appendChild(line);
-    }
-    this.dom.minorLines.push(line);
+      this.touchParams.itemProps.forEach(function (props) {
+        var id = props.item.id,
+            itemData = me.itemsData.get(id, me.itemOptions);
 
-    var props = this.props;
-    if (orientation == 'top') {
-      line.style.top = props.majorLabelHeight + 'px';
-    }
-    else {
-      line.style.top = this.body.domProps.top.height + 'px';
+        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;
+        }
+
+        // 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
+              if ('start' in props) props.item.data.start = props.start;
+              if ('end' in props)   props.item.data.end   = props.end;
+
+              me.stackDirty = true; // force re-stacking of all items next redraw
+              me.body.emitter.emit('change');
+            }
+          });
+        }
+      });
+      this.touchParams.itemProps = null;
+
+      // apply the changes to the data (if there are changes)
+      if (changes.length) {
+        dataset.update(changes);
+      }
+
+      event.stopPropagation();
     }
-    line.style.height = props.minorLineHeight + 'px';
-    line.style.left = (x - props.minorLineWidth / 2) + 'px';
   };
 
   /**
-   * Create a Major line for the axis at position x
-   * @param {Number} x
-   * @param {String} orientation   "top" or "bottom" (default)
+   * Handle selecting/deselecting an item when tapping it
+   * @param {Event} event
    * @private
    */
-  TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
-    // reuse redundant line
-    var line = this.dom.redundant.majorLines.shift();
+  ItemSet.prototype._onSelectItem = function (event) {
+    if (!this.options.selectable) return;
 
-    if (!line) {
-      // create vertical line
-      line = document.createElement('DIV');
-      line.className = 'grid vertical major';
-      this.dom.background.appendChild(line);
+    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.dom.majorLines.push(line);
 
-    var props = this.props;
-    if (orientation == 'top') {
-      line.style.top = '0';
-    }
-    else {
-      line.style.top = this.body.domProps.top.height + 'px';
+    var oldSelection = this.getSelection();
+
+    var item = ItemSet.itemFromTarget(event);
+    var selection = item ? [item.id] : [];
+    this.setSelection(selection);
+
+    var newSelection = this.getSelection();
+
+    // 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: this.getSelection()
+      });
     }
-    line.style.left = (x - props.majorLineWidth / 2) + 'px';
-    line.style.height = props.majorLineHeight + 'px';
+
+    event.stopPropagation();
   };
 
   /**
-   * 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.
+   * Handle creation and updates of an item on double tap
+   * @param event
    * @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';
+  ItemSet.prototype._onAddItem = function (event) {
+    if (!this.options.selectable) return;
+    if (!this.options.editable.add) return;
 
-      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;
+    var me = this,
+        snap = this.body.util.snap || null,
+        item = ItemSet.itemFromTarget(event);
 
-    // 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 minor measure';
-      this.dom.measureCharMajor.style.position = 'absolute';
+    if (item) {
+      // update item
 
-      this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
-      this.dom.foreground.appendChild(this.dom.measureCharMajor);
+      // 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.update(itemData);
+        }
+      });
     }
-    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);
-  };
+    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'
+      };
 
-  module.exports = TimeAxis;
+      // 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();
 
-/***/ },
-/* 21 */
-/***/ function(module, exports, __webpack_require__) {
+      var group = ItemSet.groupFromTarget(event);
+      if (group) {
+        newItem.group = group.groupId;
+      }
 
-  var moment = __webpack_require__(4);
+      // execute async handler to customize (or cancel) adding an item
+      this.options.onAdd(newItem, function (item) {
+        if (item) {
+          me.itemsData.add(newItem);
+          // TODO: need to trigger a redraw?
+        }
+      });
+    }
+  };
 
   /**
-   * @constructor  TimeStep
-   * The class TimeStep is an iterator for dates. You provide a start date and an
-   * end date. The class itself determines the best scale (step size) based on the
-   * provided start Date, end Date, and minimumStep.
-   *
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   *
-   * Alternatively, you can set a scale by hand.
-   * After creation, you can initialize the class by executing first(). Then you
-   * can iterate from the start date to the end date via next(). You can check if
-   * the end date is reached with the function hasNext(). After each step, you can
-   * retrieve the current date via getCurrent().
-   * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
-   * days, to years.
-   *
-   * Version: 1.2
-   *
-   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
-   *                               or new Date(2010, 9, 21, 23, 45, 00)
-   * @param {Date} [end]           The end date
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+   * Handle selecting/deselecting multiple items when holding an item
+   * @param {Event} event
+   * @private
    */
-  function TimeStep(start, end, minimumStep) {
-    // variables
-    this.current = new Date();
-    this._start = new Date();
-    this._end = new Date();
+  ItemSet.prototype._onMultiSelectItem = function (event) {
+    if (!this.options.selectable) return;
 
-    this.autoScale  = true;
-    this.scale = TimeStep.SCALE.DAY;
-    this.step = 1;
+    var selection,
+        item = ItemSet.itemFromTarget(event);
 
-    // initialize the range
-    this.setRange(start, end, minimumStep);
-  }
+    if (item) {
+      // multi select items
+      selection = this.getSelection(); // 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);
+      }
+      this.setSelection(selection);
 
-  /// enum scale
-  TimeStep.SCALE = {
-    MILLISECOND: 1,
-    SECOND: 2,
-    MINUTE: 3,
-    HOUR: 4,
-    DAY: 5,
-    WEEKDAY: 6,
-    MONTH: 7,
-    YEAR: 8
-  };
+      this.body.emitter.emit('select', {
+        items: this.getSelection()
+      });
 
+      event.stopPropagation();
+    }
+  };
 
   /**
-   * Set a new range
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   * @param {Date} [start]      The start date and time.
-   * @param {Date} [end]        The end date and time.
-   * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
+   * 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
    */
-  TimeStep.prototype.setRange = function(start, end, minimumStep) {
-    if (!(start instanceof Date) || !(end instanceof Date)) {
-      throw  "No legal start or end date in method setRange";
+  ItemSet.itemFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-item')) {
+        return target['timeline-item'];
+      }
+      target = target.parentNode;
     }
 
-    this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
-    this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
-
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep);
-    }
+    return null;
   };
 
   /**
-   * Set the range iterator to the start date.
+   * 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
    */
-  TimeStep.prototype.first = function() {
-    this.current = new Date(this._start.valueOf());
-    this.roundToMinor();
+  ItemSet.groupFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-group')) {
+        return target['timeline-group'];
+      }
+      target = target.parentNode;
+    }
+
+    return null;
   };
 
   /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
+   * 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
    */
-  TimeStep.prototype.roundToMinor = function() {
-    // round to floor
-    // IMPORTANT: we have no breaks in this switch! (this is no bug)
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.scale) {
-      case TimeStep.SCALE.YEAR:
-        this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
-        this.current.setMonth(0);
-      case TimeStep.SCALE.MONTH:        this.current.setDate(1);
-      case TimeStep.SCALE.DAY:          // intentional fall through
-      case TimeStep.SCALE.WEEKDAY:      this.current.setHours(0);
-      case TimeStep.SCALE.HOUR:         this.current.setMinutes(0);
-      case TimeStep.SCALE.MINUTE:       this.current.setSeconds(0);
-      case TimeStep.SCALE.SECOND:       this.current.setMilliseconds(0);
-      //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
-    }
-
-    if (this.step != 1) {
-      // round down to the first minor value that is a multiple of the current step size
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step);  break;
-        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
-        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
-        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step);  break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
-        default: break;
+  ItemSet.itemSetFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-itemset')) {
+        return target['timeline-itemset'];
       }
+      target = target.parentNode;
     }
-  };
 
-  /**
-   * Check if the there is a next step
-   * @return {boolean}  true if the current date has not passed the end date
-   */
-  TimeStep.prototype.hasNext = function () {
-    return (this.current.valueOf() <= this._end.valueOf());
+    return null;
   };
 
-  /**
-   * Do the next step
-   */
-  TimeStep.prototype.next = function() {
-    var prev = this.current.valueOf();
+  module.exports = ItemSet;
 
-    // Two cases, needed to prevent issues with switching daylight savings
-    // (end of March and end of October)
-    if (this.current.getMonth() < 6)   {
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:
 
-          this.current = new Date(this.current.valueOf() + this.step); break;
-        case TimeStep.SCALE.SECOND:       this.current = new Date(this.current.valueOf() + this.step * 1000); break;
-        case TimeStep.SCALE.MINUTE:       this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
-        case TimeStep.SCALE.HOUR:
-          this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
-          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
-          var h = this.current.getHours();
-          this.current.setHours(h - (h % this.step));
-          break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
-        default:                      break;
-      }
-    }
-    else {
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  this.current = new Date(this.current.valueOf() + this.step); break;
-        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() + this.step); break;
-        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() + this.step); break;
-        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() + this.step); break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
-        default:                      break;
-      }
-    }
+/***/ },
+/* 19 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (this.step != 1) {
-      // round down to the correct major value
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0);  break;
-        case TimeStep.SCALE.SECOND:       if(this.current.getSeconds() < this.step) this.current.setSeconds(0);  break;
-        case TimeStep.SCALE.MINUTE:       if(this.current.getMinutes() < this.step) this.current.setMinutes(0);  break;
-        case TimeStep.SCALE.HOUR:         if(this.current.getHours() < this.step) this.current.setHours(0);  break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
-        case TimeStep.SCALE.MONTH:        if(this.current.getMonth() < this.step) this.current.setMonth(0);  break;
-        case TimeStep.SCALE.YEAR:         break; // nothing to do for year
-        default:                break;
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(2);
+  var Component = __webpack_require__(12);
+
+  /**
+   * Legend for Graph2d
+   */
+  function Legend(body, options, side) {
+    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);
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current.valueOf() == prev) {
-      this.current = new Date(this._end.valueOf());
+    this.svgElements = {};
+    this.dom = {};
+    this.groups = {};
+    this.amountOfGroups = 0;
+    this._create();
+
+    this.setOptions(options);
+  }
+
+  Legend.prototype = new Component();
+
+
+  Legend.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
     }
+    this.amountOfGroups += 1;
   };
 
+  Legend.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
+  };
 
-  /**
-   * Get the current datetime
-   * @return {Date}  current The current date
-   */
-  TimeStep.prototype.getCurrent = function() {
-    return this.current;
+  Legend.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
   };
 
-  /**
-   * Set a custom scale. Autoscaling will be disabled.
-   * For example setScale(SCALE.MINUTES, 5) will result
-   * in minor steps of 5 minutes, and major steps of an hour.
-   *
-   * @param {TimeStep.SCALE} newScale
-   *                               A scale. Choose from SCALE.MILLISECOND,
-   *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
-   *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
-   *                               SCALE.YEAR.
-   * @param {Number}     newStep   A step size, by default 1. Choose for
-   *                               example 1, 2, 5, or 10.
-   */
-  TimeStep.prototype.setScale = function(newScale, newStep) {
-    this.scale = newScale;
+  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";
 
-    if (newStep > 0) {
-      this.step = newStep;
-    }
+    this.dom.textArea = document.createElement('div');
+    this.dom.textArea.className = 'legendText';
+    this.dom.textArea.style.position = "relative";
+    this.dom.textArea.style.top = "0px";
 
-    this.autoScale = 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.dom.frame.appendChild(this.svg);
+    this.dom.frame.appendChild(this.dom.textArea);
   };
 
   /**
-   * Enable or disable autoscaling
-   * @param {boolean} enable  If true, autoascaling is set true
+   * Hide the component from the DOM
    */
-  TimeStep.prototype.setAutoScale = function (enable) {
-    this.autoScale = enable;
+  Legend.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
   };
 
-
   /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
    */
-  TimeStep.prototype.setMinimumStep = function(minimumStep) {
-    if (minimumStep == undefined) {
-      return;
+  Legend.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
     }
-
-    var stepYear       = (1000 * 60 * 60 * 24 * 30 * 12);
-    var stepMonth      = (1000 * 60 * 60 * 24 * 30);
-    var stepDay        = (1000 * 60 * 60 * 24);
-    var stepHour       = (1000 * 60 * 60);
-    var stepMinute     = (1000 * 60);
-    var stepSecond     = (1000);
-    var stepMillisecond= (1);
-
-    // find the smallest step that is larger than the provided minimumStep
-    if (stepYear*1000 > minimumStep)        {this.scale = TimeStep.SCALE.YEAR;        this.step = 1000;}
-    if (stepYear*500 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 500;}
-    if (stepYear*100 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 100;}
-    if (stepYear*50 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 50;}
-    if (stepYear*10 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 10;}
-    if (stepYear*5 > minimumStep)           {this.scale = TimeStep.SCALE.YEAR;        this.step = 5;}
-    if (stepYear > minimumStep)             {this.scale = TimeStep.SCALE.YEAR;        this.step = 1;}
-    if (stepMonth*3 > minimumStep)          {this.scale = TimeStep.SCALE.MONTH;       this.step = 3;}
-    if (stepMonth > minimumStep)            {this.scale = TimeStep.SCALE.MONTH;       this.step = 1;}
-    if (stepDay*5 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 5;}
-    if (stepDay*2 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 2;}
-    if (stepDay > minimumStep)              {this.scale = TimeStep.SCALE.DAY;         this.step = 1;}
-    if (stepDay/2 > minimumStep)            {this.scale = TimeStep.SCALE.WEEKDAY;     this.step = 1;}
-    if (stepHour*4 > minimumStep)           {this.scale = TimeStep.SCALE.HOUR;        this.step = 4;}
-    if (stepHour > minimumStep)             {this.scale = TimeStep.SCALE.HOUR;        this.step = 1;}
-    if (stepMinute*15 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 15;}
-    if (stepMinute*10 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 10;}
-    if (stepMinute*5 > minimumStep)         {this.scale = TimeStep.SCALE.MINUTE;      this.step = 5;}
-    if (stepMinute > minimumStep)           {this.scale = TimeStep.SCALE.MINUTE;      this.step = 1;}
-    if (stepSecond*15 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 15;}
-    if (stepSecond*10 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 10;}
-    if (stepSecond*5 > minimumStep)         {this.scale = TimeStep.SCALE.SECOND;      this.step = 5;}
-    if (stepSecond > minimumStep)           {this.scale = TimeStep.SCALE.SECOND;      this.step = 1;}
-    if (stepMillisecond*200 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
-    if (stepMillisecond*100 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
-    if (stepMillisecond*50 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
-    if (stepMillisecond*10 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
-    if (stepMillisecond*5 > minimumStep)    {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
-    if (stepMillisecond > minimumStep)      {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
   };
 
-  /**
-   * 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
-   */
-  TimeStep.prototype.snap = function(date) {
-    var clone = new Date(date.valueOf());
+  Legend.prototype.setOptions = function(options) {
+    var fields = ['enabled','orientation','icons','left','right'];
+    util.selectiveDeepExtend(fields, this.options, options);
+  };
 
-    if (this.scale == TimeStep.SCALE.YEAR) {
-      var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
-      clone.setFullYear(Math.round(year / this.step) * this.step);
-      clone.setMonth(0);
-      clone.setDate(0);
-      clone.setHours(0);
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
+  Legend.prototype.redraw = function() {
+    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
+      this.hide();
     }
-    else if (this.scale == TimeStep.SCALE.MONTH) {
-      if (clone.getDate() > 15) {
-        clone.setDate(1);
-        clone.setMonth(clone.getMonth() + 1);
-        // important: first set Date to 1, after that change the month.
+    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 {
-        clone.setDate(1);
+        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 = '';
       }
 
-      clone.setHours(0);
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.DAY) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 5:
-        case 2:
-          clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
-        default:
-          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
-      }
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.WEEKDAY) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 5:
-        case 2:
-          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
-        default:
-          clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
+      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 = '';
       }
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.HOUR) {
-      switch (this.step) {
-        case 4:
-          clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
-        default:
-          clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
+      else {
+        this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+        this.dom.frame.style.top = '';
       }
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    } else if (this.scale == TimeStep.SCALE.MINUTE) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 15:
-        case 10:
-          clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
-          clone.setSeconds(0);
-          break;
-        case 5:
-          clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
-        default:
-          clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
+
+      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';
       }
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.SECOND) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 15:
-        case 10:
-          clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
-          clone.setMilliseconds(0);
-          break;
-        case 5:
-          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
-        default:
-          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
+      else {
+        this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
+        this.drawLegendIcons();
       }
-    }
-    else if (this.scale == TimeStep.SCALE.MILLISECOND) {
-      var step = this.step > 5 ? this.step / 2 : 1;
-      clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
-    }
-    
-    return clone;
-  };
 
-  /**
-   * Check if the current value is a major value (for example when the step
-   * is DAY, a major value is each first day of the MONTH)
-   * @return {boolean} true if current date is major, else false.
-   */
-  TimeStep.prototype.isMajor = function() {
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:
-        return (this.current.getMilliseconds() == 0);
-      case TimeStep.SCALE.SECOND:
-        return (this.current.getSeconds() == 0);
-      case TimeStep.SCALE.MINUTE:
-        return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
-      // Note: this is no bug. Major label is equal for both minute and hour scale
-      case TimeStep.SCALE.HOUR:
-        return (this.current.getHours() == 0);
-      case TimeStep.SCALE.WEEKDAY: // intentional fall through
-      case TimeStep.SCALE.DAY:
-        return (this.current.getDate() == 1);
-      case TimeStep.SCALE.MONTH:
-        return (this.current.getMonth() == 0);
-      case TimeStep.SCALE.YEAR:
-        return false;
-      default:
-        return false;
+      var content = '';
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          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';
     }
   };
 
+  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;
 
-  /**
-   * Returns formatted text for the minor axislabel, depending on the current
-   * date and the scale. For example when scale is MINUTE, the current time is
-   * formatted as "hh:mm".
-   * @param {Date} [date] custom date. if not provided, current date is taken
-   */
-  TimeStep.prototype.getLabelMinor = function(date) {
-    if (date == undefined) {
-      date = this.current;
-    }
-
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:  return moment(date).format('SSS');
-      case TimeStep.SCALE.SECOND:       return moment(date).format('s');
-      case TimeStep.SCALE.MINUTE:       return moment(date).format('HH:mm');
-      case TimeStep.SCALE.HOUR:         return moment(date).format('HH:mm');
-      case TimeStep.SCALE.WEEKDAY:      return moment(date).format('ddd D');
-      case TimeStep.SCALE.DAY:          return moment(date).format('D');
-      case TimeStep.SCALE.MONTH:        return moment(date).format('MMM');
-      case TimeStep.SCALE.YEAR:         return moment(date).format('YYYY');
-      default:                          return '';
-    }
-  };
-
+      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
 
-  /**
-   * Returns formatted text for the major axis label, depending on the current
-   * date and the scale. For example when scale is MINUTE, the major scale is
-   * hours, and the hour will be formatted as "hh".
-   * @param {Date} [date] custom date. if not provided, current date is taken
-   */
-  TimeStep.prototype.getLabelMajor = function(date) {
-    if (date == undefined) {
-      date = this.current;
-    }
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+          y += iconHeight + this.options.iconSpacing;
+        }
+      }
 
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
-      case TimeStep.SCALE.SECOND:     return moment(date).format('D MMMM HH:mm');
-      case TimeStep.SCALE.MINUTE:
-      case TimeStep.SCALE.HOUR:       return moment(date).format('ddd D MMMM');
-      case TimeStep.SCALE.WEEKDAY:
-      case TimeStep.SCALE.DAY:        return moment(date).format('MMMM YYYY');
-      case TimeStep.SCALE.MONTH:      return moment(date).format('YYYY');
-      case TimeStep.SCALE.YEAR:       return '';
-      default:                        return '';
+      DOMutil.cleanupElements(this.svgElements);
     }
   };
 
-  module.exports = TimeStep;
+  module.exports = Legend;
 
 
 /***/ },
-/* 22 */
+/* 20 */
 /***/ function(module, exports, __webpack_require__) {
 
   var util = __webpack_require__(1);
-  var Component = __webpack_require__(19);
+  var DOMutil = __webpack_require__(2);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Component = __webpack_require__(12);
+  var DataAxis = __webpack_require__(15);
+  var GraphGroup = __webpack_require__(16);
+  var Legend = __webpack_require__(19);
+
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
   /**
-   * A current time bar
-   * @param {{range: Range, dom: Object, domProps: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCurrentTime]
-   * @constructor CurrentTime
-   * @extends Component
+   * This is the constructor of the LineGraph. It requires a Timeline body and options.
+   *
+   * @param body
+   * @param options
+   * @constructor
    */
-  function CurrentTime (body, options) {
+  function LineGraph(body, options) {
+    this.id = util.randomUUID();
     this.body = body;
 
-    // default options
     this.defaultOptions = {
-      showCurrentTime: true
+      yAxisOrientation: 'left',
+      defaultGroup: 'default',
+      sort: true,
+      sampling: true,
+      graphHeight: '400px',
+      shaded: {
+        enabled: false,
+        orientation: 'bottom' // top, bottom
+      },
+      style: 'line', // line, bar
+      barChart: {
+        width: 50,
+        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
+      },
+      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
+        }
+      }
     };
+
+    // 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._create();
+    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);
+      }
+    };
+
+    // 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);
+      }
+    };
+
+    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.body.emitter.on("rangechange",function() {
+        if (me.lastStart != 0) {
+          var offset = me.body.range.start - me.lastStart;
+          var range = me.body.range.end - me.body.range.start;
+          if (me.width != 0) {
+            var rangePerPixelInv = me.width/range;
+            var xOffset = offset * rangePerPixelInv;
+            me.svg.style.left = (-me.width - xOffset) + "px";
+          }
+        }
+      });
+    this.body.emitter.on("rangechanged", function() {
+      me.lastStart = me.body.range.start;
+      me.svg.style.left = util.option.asSize(-me.width);
+      me._updateGraph.apply(me);
+    });
+
+    // create the HTML DOM
+    this._create();
+    this.body.emitter.emit("change");
   }
 
-  CurrentTime.prototype = new Component();
+  LineGraph.prototype = new Component();
 
   /**
-   * Create the HTML DOM for the current time bar
-   * @private
+   * Create the HTML DOM for the ItemSet
    */
-  CurrentTime.prototype._create = function() {
-    var bar = document.createElement('div');
-    bar.className = 'currenttime';
-    bar.style.position = 'absolute';
-    bar.style.top = '0px';
-    bar.style.height = '100%';
+  LineGraph.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'LineGraph';
+    this.dom.frame = frame;
 
-    this.bar = bar;
-  };
+    // 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);
 
-  /**
-   * Destroy the CurrentTime bar
-   */
-  CurrentTime.prototype.destroy = function () {
-    this.options.showCurrentTime = false;
-    this.redraw(); // will remove the bar from the DOM and stop refreshing
+    // data axis
+    this.options.dataAxis.orientation = 'left';
+    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
 
-    this.body = null;
+    this.options.dataAxis.orientation = 'right';
+    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
+    delete this.options.dataAxis.orientation;
+
+    // legends
+    this.legendLeft = new Legend(this.body, this.options.legend, 'left');
+    this.legendRight = new Legend(this.body, this.options.legend, 'right');
+
+    this.show();
   };
 
   /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCurrentTime]
+   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
+   * @param options
    */
-  CurrentTime.prototype.setOptions = function(options) {
+  LineGraph.prototype.setOptions = function(options) {
     if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCurrentTime'], this.options, options);
-    }
-  };
+      var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
+      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');
 
-  /**
-   * 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);
+      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;
+            }
+          }
         }
-        parent.appendChild(this.bar);
+      }
 
-        this.start();
+      if (this.yAxisLeft) {
+        if (options.dataAxis !== undefined) {
+          this.yAxisLeft.setOptions(this.options.dataAxis);
+          this.yAxisRight.setOptions(this.options.dataAxis);
+        }
       }
 
-      var now = new Date();
-      var x = this.body.util.toScreen(now);
+      if (this.legendLeft) {
+        if (options.legend !== undefined) {
+          this.legendLeft.setOptions(this.options.legend);
+          this.legendRight.setOptions(this.options.legend);
+        }
+      }
 
-      this.bar.style.left = x + 'px';
-      this.bar.title = 'Current time: ' + now;
-    }
-    else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
+      if (this.groups.hasOwnProperty(UNGROUPED)) {
+        this.groups[UNGROUPED].setOptions(options);
       }
-      this.stop();
     }
-
-    return false;
+    if (this.dom.frame) {
+      this._updateGraph();
+    }
   };
 
   /**
-   * Start auto refreshing the current time bar
+   * Hide the component from the DOM
    */
-  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);
+  LineGraph.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
-
-    update();
   };
 
   /**
-   * Stop auto refreshing the current time bar
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
    */
-  CurrentTime.prototype.stop = function() {
-    if (this.currentTimeTimer !== undefined) {
-      clearTimeout(this.currentTimeTimer);
-      delete this.currentTimeTimer;
+  LineGraph.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
     }
   };
 
-  module.exports = CurrentTime;
-
-
-/***/ },
-/* 23 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Hammer = __webpack_require__(3);
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(19);
 
   /**
-   * A custom time bar
-   * @param {{range: Range, dom: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCustomTime]
-   * @constructor CustomTime
-   * @extends Component
+   * Set items
+   * @param {vis.DataSet | null} items
    */
+  LineGraph.prototype.setItems = function(items) {
+    var me = this,
+      ids,
+      oldItemsData = this.itemsData;
 
-  function CustomTime (body, options) {
-    this.body = body;
-
-    // default options
-    this.defaultOptions = {
-      showCustomTime: false
-    };
-    this.options = util.extend({}, this.defaultOptions);
+    // 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');
+    }
 
-    this.customTime = new Date();
-    this.eventParams = {}; // stores state parameters while dragging the bar
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-    // create the DOM
-    this._create();
+      // remove all drawn items
+      ids = oldItemsData.getIds();
+      this._onRemove(ids);
+    }
 
-    this.setOptions(options);
-  }
+    if (this.itemsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.itemListeners, function (callback, event) {
+        me.itemsData.on(event, callback, id);
+      });
 
-  CustomTime.prototype = new Component();
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
+    }
+    this._updateUngrouped();
+    this._updateGraph();
+    this.redraw();
+  };
 
   /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCustomTime]
+   * Set groups
+   * @param {vis.DataSet} groups
    */
-  CustomTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCustomTime'], this.options, options);
+  LineGraph.prototype.setGroups = function(groups) {
+    var me = this,
+      ids;
+
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
+
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
+    }
+
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
+    }
+    else {
+      throw new TypeError('Data must be an instance of DataSet or DataView');
+    }
+
+    if (this.groupsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.on(event, callback, id);
+      });
+
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
     }
+    this._onUpdate();
   };
 
-  /**
-   * Create the DOM for the custom time
-   * @private
-   */
-  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;
 
-    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);
 
-    // 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));
+  LineGraph.prototype._onUpdate = function(ids) {
+    this._updateUngrouped();
+    this._updateAllGroupData();
+    this._updateGraph();
+    this.redraw();
+  };
+  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();
+  };
+  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
+
+  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();
   };
 
   /**
-   * Destroy the CustomTime bar
+   * update a group object
+   *
+   * @param group
+   * @param groupId
+   * @private
    */
-  CustomTime.prototype.destroy = function () {
-    this.options.showCustomTime = false;
-    this.redraw(); // will remove the bar from the DOM
+  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();
+  };
 
-    this.hammer.enable(false);
-    this.hammer = null;
+  LineGraph.prototype._updateAllGroupData = function () {
+    if (this.itemsData != null) {
+      // ~450 ms @ 500k
 
-    this.body = null;
+      var groupsContent = {};
+      for (var 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];
+          item.x = util.convert(item.x,"Date");
+          groupsContent[item.group].push(item);
+        }
+      }
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].setItems(groupsContent[groupId]);
+        }
+      }
+  //    // ~4500ms @ 500k
+  //    for (var groupId in this.groups) {
+  //      if (this.groups.hasOwnProperty(groupId)) {
+  //        this.groups[groupId].setItems(this.itemsData.get({filter:
+  //            function (item) {
+  //              return (item.group == groupId);
+  //            }, type:{x:"Date"}}
+  //        ));
+  //      }
+  //    }
+    }
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * 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
    */
-  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);
+  LineGraph.prototype._updateUngrouped = function() {
+    if (this.itemsData != null) {
+  //    var t0 = new Date();
+      var group = {id: UNGROUPED, content: this.options.defaultGroup};
+      this._updateGroup(group, UNGROUPED);
+      var ungroupedCounter = 0;
+      if (this.itemsData) {
+        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;
+            }
+          }
         }
-        parent.appendChild(this.bar);
       }
 
-      var x = this.body.util.toScreen(this.customTime);
-
-      this.bar.style.left = x + 'px';
-      this.bar.title = 'Time: ' + this.customTime;
+      // much much slower
+  //    var datapoints = this.itemsData.get({
+  //      filter: function (item) {return item.group === undefined;},
+  //      showInternalIds:true
+  //    });
+  //    if (datapoints.length > 0) {
+  //      var updateQuery = [];
+  //      for (var i = 0; i < datapoints.length; i++) {
+  //        updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
+  //      }
+  //      this.itemsData.update(updateQuery, true);
+  //    }
+  //    var t1 = new Date();
+  //    var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
+      if (ungroupedCounter == 0) {
+        delete this.groups[UNGROUPED];
+        this.legendLeft.removeGroup(UNGROUPED);
+        this.legendRight.removeGroup(UNGROUPED);
+        this.yAxisLeft.removeGroup(UNGROUPED);
+        this.yAxisRight.removeGroup(UNGROUPED);
+      }
+  //    console.log("getting amount ungrouped",new Date() - t1);
+  //    console.log("putting in ungrouped",new Date() - t0);
     }
     else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
-      }
+      delete this.groups[UNGROUPED];
+      this.legendLeft.removeGroup(UNGROUPED);
+      this.legendRight.removeGroup(UNGROUPED);
+      this.yAxisLeft.removeGroup(UNGROUPED);
+      this.yAxisRight.removeGroup(UNGROUPED);
     }
 
-    return false;
-  };
-
-  /**
-   * Set custom time.
-   * @param {Date} time
-   */
-  CustomTime.prototype.setCustomTime = function(time) {
-    this.customTime = new Date(time.valueOf());
-    this.redraw();
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
   };
 
-  /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
-   */
-  CustomTime.prototype.getCustomTime = function() {
-    return new Date(this.customTime.valueOf());
-  };
 
   /**
-   * Start moving horizontally
-   * @param {Event} event
-   * @private
+   * Redraw the component, mandatory function
+   * @return {boolean} Returns true if the component is resized
    */
-  CustomTime.prototype._onDragStart = function(event) {
-    this.eventParams.dragging = true;
-    this.eventParams.customTime = this.customTime;
-
-    event.stopPropagation();
-    event.preventDefault();
-  };
+  LineGraph.prototype.redraw = function() {
+    var resized = false;
 
-  /**
-   * Perform moving operating.
-   * @param {Event} event
-   * @private
-   */
-  CustomTime.prototype._onDrag = function (event) {
-    if (!this.eventParams.dragging) return;
+    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+    if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
+      resized = true;
+    }
+    // check if this component is resized
+    resized = this._isResized() || resized;
+    // 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.width != this.lastWidth);
+    this.lastVisibleInterval = visibleInterval;
+    this.lastWidth = this.width;
 
-    var deltaX = event.gesture.deltaX,
-        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
-        time = this.body.util.toTime(x);
+    // calculate actual size and position
+    this.width = this.dom.frame.offsetWidth;
 
-    this.setCustomTime(time);
+    // 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.width);
+      this.svg.style.left = util.option.asSize(-this.width);
+    }
+    if (zoomed == true) {
+      this._updateGraph();
+    }
 
-    // fire a timechange event
-    this.body.emitter.emit('timechange', {
-      time: new Date(this.customTime.valueOf())
-    });
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
 
-    event.stopPropagation();
-    event.preventDefault();
+    return resized;
   };
 
   /**
-   * Stop moving operating.
-   * @param {event} event
-   * @private
+   * Update and redraw the graph.
+   *
    */
-  CustomTime.prototype._onDragEnd = function (event) {
-    if (!this.eventParams.dragging) return;
-
-    // fire a timechanged event
-    this.body.emitter.emit('timechanged', {
-      time: new Date(this.customTime.valueOf())
-    });
-
-    event.stopPropagation();
-    event.preventDefault();
-  };
-
-  module.exports = CustomTime;
-
+  LineGraph.prototype._updateGraph = function () {
+    // reset the svg elements
+    DOMutil.prepareElements(this.svgElements);
+  //        // very slow...
+  //        groupData = group.itemsData.get({filter:
+  //          function (item) {
+  //            return (item.x > minDate && item.x < maxDate);
+  //          }}
+  //        );
 
-/***/ },
-/* 24 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var Hammer = __webpack_require__(3);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(9);
-  var DataView = __webpack_require__(10);
-  var Component = __webpack_require__(19);
-  var Group = __webpack_require__(25);
-  var ItemBox = __webpack_require__(29);
-  var ItemPoint = __webpack_require__(30);
-  var ItemRange = __webpack_require__(27);
+    if (this.width != 0 && this.itemsData != null) {
+      var group, groupData, preprocessedGroup, i;
+      var preprocessedGroupData = [];
+      var processedGroupData = [];
+      var groupRanges = [];
+      var changeCalled = false;
 
+      // getting group Ids
+      var groupIds = [];
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          groupIds.push(groupId);
+        }
+      }
 
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+      // 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);
 
-  /**
-   * 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
-   */
-  function ItemSet(body, options) {
-    this.body = body;
+      // 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.
+      if (groupIds.length > 0) {
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          groupData = [];
+          // optimization for sorted data
+          if (group.options.sort == true) {
+            var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
 
-    this.defaultOptions = {
-      type: null,  // 'box', 'point', 'range'
-      orientation: 'bottom',  // 'top' or 'bottom'
-      align: 'center', // alignment of box items
-      stack: true,
-      groupOrder: null,
+            for (var j = guess; j < group.itemsData.length; j++) {
+              var item = group.itemsData[j];
+              if (item !== undefined) {
+                if (item.x > maxDate) {
+                 groupData.push(item);
+                 break;
+                }
+                else {
+                  groupData.push(item);
+                }
+              }
+            }
+          }
+          else {
+            for (var j = 0; j < group.itemsData.length; j++) {
+              var item = group.itemsData[j];
+              if (item !== undefined) {
+                if (item.x > minDate && item.x < maxDate) {
+                  groupData.push(item);
+                }
+              }
+            }
+          }
+          // preprocess, split into ranges and data
+          preprocessedGroup = this._preprocessData(groupData, group);
+          groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
+          preprocessedGroupData.push(preprocessedGroup.data);
+        }
 
-      selectable: true,
-      editable: {
-        updateTime: false,
-        updateGroup: false,
-        add: false,
-        remove: false
-      },
+        // 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);
+        if (changeCalled == true) {
+          DOMutil.cleanupElements(this.svgElements);
+          this.body.emitter.emit("change");
+          return;
+        }
 
-      onAdd: function (item, callback) {
-        callback(item);
-      },
-      onUpdate: function (item, callback) {
-        callback(item);
-      },
-      onMove: function (item, callback) {
-        callback(item);
-      },
-      onRemove: function (item, callback) {
-        callback(item);
-      },
+        // 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.push(this._convertYvalues(preprocessedGroupData[i],group))
+        }
 
-      margin: {
-        item: 10,
-        axis: 20
-      },
-      padding: 5
-    };
+        // draw the groups
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          if (group.options.style == 'line') {
+            this._drawLineGraph(processedGroupData[i], group);
+          }
+          else {
+            this._drawBarGraph (processedGroupData[i], group);
+          }
+        }
+      }
+    }
 
-    // options is shared by this ItemSet and all its items
-    this.options = util.extend({}, this.defaultOptions);
+    // cleanup unused svg elements
+    DOMutil.cleanupElements(this.svgElements);
+  };
 
-    // options for getting items from the DataSet with the correct type
-    this.itemOptions = {
-      type: {start: 'Date', end: 'Date'}
-    };
+  /**
+   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
+   * @param {array} groupIds
+   * @private
+   */
+  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
+    var changeCalled = false;
+    var yAxisLeftUsed = false;
+    var yAxisRightUsed = false;
+    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
+    var orientation = 'left';
 
-    this.conversion = {
-      toScreen: body.util.toScreen,
-      toTime: body.util.toTime
-    };
-    this.dom = {};
-    this.props = {};
-    this.hammer = null;
+    // if groups are present
+    if (groupIds.length > 0) {
+      for (var i = 0; i < groupIds.length; i++) {
+        orientation = 'left';
+        var group = this.groups[groupIds[i]];
+        if (group.options.yAxisOrientation == 'right') {
+          orientation = 'right';
+        }
 
-    var me = this;
-    this.itemsData = null;    // DataSet
-    this.groupsData = null;   // DataSet
+        minVal = groupRanges[i].min;
+        maxVal = groupRanges[i].max;
 
-    // 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);
+        if (orientation == 'left') {
+          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;
+        }
       }
-    };
-
-    // 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 (yAxisLeftUsed == true) {
+        this.yAxisLeft.setRange(minLeft, maxLeft);
       }
-    };
-
-    this.items = {};      // object with an Item for every data item
-    this.groups = {};     // Group object for every group
-    this.groupIds = [];
-
-    this.selection = [];  // list with the ids of all selected nodes
-    this.stackDirty = true; // if true, all items will be restacked on next redraw
-
-    this.touchParams = {}; // stores properties while dragging
-    // create the HTML DOM
+      if (yAxisRightUsed == true) {
+        this.yAxisRight.setRange(minRight, maxRight);
+      }
+    }
 
-    this._create();
+    changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
+    changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
 
-    this.setOptions(options);
-  }
+    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
+      this.yAxisLeft.drawIcons = true;
+      this.yAxisRight.drawIcons = true;
+    }
+    else {
+      this.yAxisLeft.drawIcons = false;
+      this.yAxisRight.drawIcons = false;
+    }
 
-  ItemSet.prototype = new Component();
+    this.yAxisRight.master = !yAxisLeftUsed;
 
-  // available item types will be registered here
-  ItemSet.types = {
-    box: ItemBox,
-    range: ItemRange,
-    point: ItemPoint
+    if (this.yAxisRight.master == false) {
+      if (yAxisRightUsed == true) {
+        this.yAxisLeft.lineOffset = this.yAxisRight.width;
+      }
+      changeCalled = this.yAxisLeft.redraw() || changeCalled;
+      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+      changeCalled = this.yAxisRight.redraw() || changeCalled;
+    }
+    else {
+      changeCalled = this.yAxisRight.redraw() || changeCalled;
+    }
+    return changeCalled;
   };
 
   /**
-   * Create the HTML DOM for the ItemSet
+   * 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._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'itemset';
-    frame['timeline-itemset'] = this;
-    this.dom.frame = frame;
-
-    // create background panel
-    var background = document.createElement('div');
-    background.className = 'background';
-    frame.appendChild(background);
-    this.dom.background = background;
-
-    // create foreground panel
-    var foreground = document.createElement('div');
-    foreground.className = 'foreground';
-    frame.appendChild(foreground);
-    this.dom.foreground = foreground;
-
-    // create axis panel
-    var axis = document.createElement('div');
-    axis.className = 'axis';
-    this.dom.axis = axis;
-
-    // create labelset
-    var labelSet = document.createElement('div');
-    labelSet.className = 'labelset';
-    this.dom.labelSet = labelSet;
-
-    // create ungrouped Group
-    this._updateUngrouped();
-
-    // 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, {
-      prevent_default: true
-    });
-
-    // 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));
-
-    // single select (or unselect) when tapping an item
-    this.hammer.on('tap',  this._onSelectItem.bind(this));
-
-    // multi select when holding mouse/touch, or on ctrl+click
-    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
-
-    // add item on doubletap
-    this.hammer.on('doubletap', this._onAddItem.bind(this));
-
-    // attach to the DOM
-    this.show();
+  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
+    var changed = false;
+    if (axisUsed == false) {
+      if (axis.dom.frame.parentNode) {
+        axis.hide();
+        changed = true;
+      }
+    }
+    else {
+      if (!axis.dom.frame.parentNode) {
+        axis.show();
+        changed = true;
+      }
+    }
+    return changed;
   };
 
+
   /**
-   * 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', or 'range'. The default
-   *                              Style can be overwritten by individual items.
-   *                           {String} align
-   *                              Alignment for the items, only applicable for
-   *                              ItemBox. 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
-   *                              Margin between items in pixels. 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.
+   * draw a bar graph
+   * @param datapoints
+   * @param group
    */
-  ItemSet.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
-      util.selectiveExtend(fields, this.options, options);
+  LineGraph.prototype._drawBarGraph = function (dataset, group) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var coreDistance;
+        var minWidth = 0.1 * group.options.barChart.width;
+        var offset = 0;
+        var width = group.options.barChart.width;
 
-      if ('margin' in options) {
-        if (typeof options.margin === 'number') {
-          this.options.margin.axis = options.margin;
-          this.options.margin.item = options.margin;
+        if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
+        else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
+
+        for (var i = 0; i < dataset.length; i++) {
+          // dynammically downscale the width so there is no overlap up to 1/10th the original width
+          if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
+          if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
+          if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
+
+          DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
         }
-        else if (typeof options.margin === 'object'){
-          util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
+
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
         }
       }
+    }
+  };
 
-      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;
+
+  /**
+   * draw a line graph
+   *
+   * @param datapoints
+   * @param group
+   */
+  LineGraph.prototype._drawLineGraph = function (dataset, group) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var path, d;
+        var svgHeight = Number(this.svg.style.height.replace("px",""));
+        path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
+        path.setAttributeNS(null, "class", group.className);
+
+        // construct path from dataset
+        if (group.options.catmullRom.enabled == true) {
+          d = this._catmullRom(dataset, group);
         }
-        else if (typeof options.editable === 'object') {
-          util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
+        else {
+          d = this._linear(dataset);
         }
-      }
 
-      // callback functions
-      var addCallback = (function (name) {
-        if (name in options) {
-          var fn = options[name];
-          if (!(fn instanceof Function)) {
-            throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
+        // append with points for fill and finalize the path
+        if (group.options.shaded.enabled == true) {
+          var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.svg);
+          var dFill;
+          if (group.options.shaded.orientation == 'top') {
+            dFill = "M" + dataset[0].x + "," + 0 + " " + d + "L" + dataset[dataset.length - 1].x + "," + 0;
           }
-          this.options[name] = fn;
+          else {
+            dFill = "M" + dataset[0].x + "," + svgHeight + " " + d + "L" + dataset[dataset.length - 1].x + "," + svgHeight;
+          }
+          fillPath.setAttributeNS(null, "class", group.className + " fill");
+          fillPath.setAttributeNS(null, "d", dFill);
         }
-      }).bind(this);
-      ['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(addCallback);
+        // copy properties to path for drawing.
+        path.setAttributeNS(null, "d", "M" + d);
 
-      // force the itemSet to refresh: options like orientation and margins may be changed
-      this.markDirty();
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          this._drawPoints(dataset, group, this.svgElements, this.svg);
+        }
+      }
     }
   };
 
   /**
-   * Mark the ItemSet dirty so it will refresh everything with next redraw
+   * draw the data points
+   *
+   * @param dataset
+   * @param JSONcontainer
+   * @param svg
+   * @param group
    */
-  ItemSet.prototype.markDirty = function() {
-    this.groupIds = [];
-    this.stackDirty = true;
+  LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
+    if (offset === undefined) {offset = 0;}
+    for (var i = 0; i < dataset.length; i++) {
+      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
+    }
   };
 
+
+
   /**
-   * Destroy the ItemSet
+   * 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.destroy = function() {
-    this.hide();
-    this.setItems(null);
-    this.setGroups(null);
+  LineGraph.prototype._preprocessData = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var toScreen = this.body.util.toScreen;
 
-    this.hammer = null;
+    var increment = 1;
+    var amountOfPoints = datapoints.length;
 
-    this.body = null;
-    this.conversion = null;
+    var yMin = datapoints[0].y;
+    var yMax = datapoints[0].y;
+
+    // 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.
+    if (group.options.sampling == true) {
+      var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
+      var pointsPerPixel = amountOfPoints/xDistance;
+      increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
+    }
+
+    for (var i = 0; i < amountOfPoints; i += increment) {
+      xValue = toScreen(datapoints[i].x) + this.width - 1;
+      yValue = datapoints[i].y;
+      extractedData.push({x: xValue, y: yValue});
+      yMin = yMin > yValue ? yValue : yMin;
+      yMax = yMax < yValue ? yValue : yMax;
+    }
+
+    // extractedData.sort(function (a,b) {return a.x - b.x;});
+    return {min: yMin, max: yMax, data: extractedData};
   };
 
   /**
-   * Hide the component from the DOM
+   * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
+   * util function toScreen to get the x coordinate from the timestamp.
+   *
+   * @param datapoints
+   * @param options
+   * @returns {Array}
+   * @private
    */
-  ItemSet.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
-    }
+  LineGraph.prototype._convertYvalues = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var axis = this.yAxisLeft;
+    var svgHeight = Number(this.svg.style.height.replace("px",""));
 
-    // remove the axis with dots
-    if (this.dom.axis.parentNode) {
-      this.dom.axis.parentNode.removeChild(this.dom.axis);
+    if (group.options.yAxisOrientation == 'right') {
+      axis = this.yAxisRight;
     }
 
-    // remove the labelset containing all group labels
-    if (this.dom.labelSet.parentNode) {
-      this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
+    for (var i = 0; i < datapoints.length; i++) {
+      xValue = datapoints[i].x;
+      yValue = Math.round(axis.convertValue(datapoints[i].y));
+      extractedData.push({x: xValue, y: yValue});
     }
+
+    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
+
+    // extractedData.sort(function (a,b) {return a.x - b.x;});
+    return extractedData;
   };
 
+
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * 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
    */
-  ItemSet.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  LineGraph.prototype._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++) {
 
-    // show axis with dots
-    if (!this.dom.axis.parentNode) {
-      this.body.dom.backgroundVertical.appendChild(this.dom.axis);
-    }
+      p0 = (i == 0) ? data[0] : data[i-1];
+      p1 = data[i];
+      p2 = data[i+1];
+      p3 = (i + 2 < length) ? data[i+2] : p2;
 
-    // show labelset containing labels
-    if (!this.dom.labelSet.parentNode) {
-      this.body.dom.left.appendChild(this.dom.labelSet);
+
+      // 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 d;
   };
 
   /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {Array} [ids] An array with zero or more id's of the items to be
-   *                      selected. If ids is an empty array, all items will be
-   *                      unselected.
+   * 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
+   * @returns {string}
+   * @private
    */
-  ItemSet.prototype.setSelection = function(ids) {
-    var i, ii, id, item;
+  LineGraph.prototype._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++) {
 
-    if (ids) {
-      if (!Array.isArray(ids)) {
-        throw new TypeError('Array expected');
+        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          ]
+
+        // [   0             1            0          0          ]
+        // [   -d2pow2a/N    A/N          d1pow2a/N  0          ]
+        // [   0             d3pow2a/M    B/M        -d2pow2a/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 + " ";
       }
 
-      // 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();
+      return d;
+    }
+  };
+
+  /**
+   * this generates the SVG path for a linear drawing between datapoints.
+   * @param data
+   * @returns {string}
+   * @private
+   */
+  LineGraph.prototype._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;
+  };
 
-      // 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();
-        }
+  module.exports = LineGraph;
+
+
+/***/ },
+/* 21 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(12);
+  var TimeStep = __webpack_require__(10);
+
+  /**
+   * 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,
+      majorLines: [],
+      majorTexts: [],
+      minorLines: [],
+      minorTexts: [],
+      redundant: {
+        majorLines: [],
+        majorTexts: [],
+        minorLines: [],
+        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
+    };
+    this.options = util.extend({}, this.defaultOptions);
+
+    this.body = body;
+
+    // create the HTML DOM
+    this._create();
+
+    this.setOptions(options);
+  }
+
+  TimeAxis.prototype = new Component();
+
+  /**
+   * 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'], this.options, options);
     }
   };
 
   /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
+   * Create the HTML DOM for the TimeAxis
    */
-  ItemSet.prototype.getSelection = function() {
-    return this.selection.concat([]);
+  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';
   };
 
   /**
-   * Deselect a selected item
-   * @param {String | Number} id
-   * @private
+   * Destroy the TimeAxis
    */
-  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;
-      }
+  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;
   };
 
   /**
    * 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;
+  TimeAxis.prototype.redraw = function () {
+    var options = this.options,
+        props = this.props,
+        foreground = this.dom.foreground,
+        background = this.dom.background;
 
-    // update class name
-    frame.className = 'itemset' + (editable ? ' editable' : '');
+    // 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);
 
-    // reorder the groups (if needed)
-    resized = this._orderGroups() || resized;
+    // calculate character width and height
+    this._calculateCharSize();
 
-    // 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;
+    // 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;
 
-    // redraw all groups
-    var restack = this.stackDirty,
-        firstGroup = this._firstGroup(),
-        firstMargin = {
-          item: margin.item,
-          axis: margin.axis
-        },
-        nonFirstMargin = {
-          item: margin.item,
-          axis: margin.item / 2
-        },
-        height = 0,
-        minHeight = margin.axis + margin.item;
-    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;
+    // 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;
 
-    // update frame height
-    frame.style.height  = asSize(height);
+    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
 
-    // calculate actual size and position
-    this.props.top = frame.offsetTop;
-    this.props.left = frame.offsetLeft;
-    this.props.width = frame.offsetWidth;
-    this.props.height = height;
+    //  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);
 
-    // 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 = this.body.domProps.border.left + 'px';
+    foreground.style.height = this.props.height + 'px';
 
-    // check if this component is resized
-    resized = this._isResized() || resized;
+    this._repaintLabels();
 
-    return resized;
+    // 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;
   };
 
   /**
-   * Get the first group, aligned with the axis
-   * @return {Group | null} firstGroup
+   * Repaint major and minor text labels and vertical grid lines
    * @private
    */
-  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];
+  TimeAxis.prototype._repaintLabels = function () {
+    var orientation = this.options.orientation;
 
-    return firstGroup || null;
-  };
+    // calculate range and step (step such that we have space for 7 characters per label)
+    var start = util.convert(this.body.range.start, 'Number'),
+        end = util.convert(this.body.range.end, 'Number'),
+        minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
+            -this.body.util.toTime(0).valueOf();
+    var step = new TimeStep(new Date(start), new Date(end), minimumStep);
+    this.step = step;
 
-  /**
-   * Create or delete the group holding all ungrouped items. This group is used when
-   * there are no groups specified.
-   * @protected
-   */
-  ItemSet.prototype._updateUngrouped = function() {
-    var ungrouped = this.groups[UNGROUPED];
+    // 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.majorLines = dom.majorLines;
+    dom.redundant.majorTexts = dom.majorTexts;
+    dom.redundant.minorLines = dom.minorLines;
+    dom.redundant.minorTexts = dom.minorTexts;
+    dom.majorLines = [];
+    dom.majorTexts = [];
+    dom.minorLines = [];
+    dom.minorTexts = [];
 
-    if (this.groupsData) {
-      // remove the group holding all ungrouped items
-      if (ungrouped) {
-        ungrouped.hide();
-        delete this.groups[UNGROUPED];
+    step.first();
+    var xFirstMajorLabel = undefined;
+    var max = 0;
+    while (step.hasNext() && max < 1000) {
+      max++;
+      var cur = step.getCurrent(),
+          x = this.body.util.toScreen(cur),
+          isMajor = step.isMajor();
+
+      // TODO: lines must have a width, such that we can create css backgrounds
+
+      if (this.options.showMinorLabels) {
+        this._repaintMinorText(x, step.getLabelMinor(), orientation);
       }
-    }
-    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 (var itemId in this.items) {
-          if (this.items.hasOwnProperty(itemId)) {
-            ungrouped.add(this.items[itemId]);
+      if (isMajor && this.options.showMajorLabels) {
+        if (x > 0) {
+          if (xFirstMajorLabel == undefined) {
+            xFirstMajorLabel = x;
           }
+          this._repaintMajorText(x, step.getLabelMajor(), orientation);
         }
+        this._repaintMajorLine(x, orientation);
+      }
+      else {
+        this._repaintMinorLine(x, orientation);
+      }
 
-        ungrouped.show();
+      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);
       }
     }
-  };
 
-  /**
-   * Get the element for the labelset
-   * @return {HTMLElement} labelSet
-   */
-  ItemSet.prototype.getLabelSet = function() {
-    return this.dom.labelSet;
+    // 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);
+        }
+      }
+    });
   };
 
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Create a minor label for the axis at position x
+   * @param {Number} x
+   * @param {String} text
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @private
    */
-  ItemSet.prototype.setItems = function(items) {
-    var me = this,
-        ids,
-        oldItemsData = this.itemsData;
+  TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
+    // reuse redundant label
+    var label = this.dom.redundant.minorTexts.shift();
 
-    // 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');
+    if (!label) {
+      // create new label
+      var content = document.createTextNode('');
+      label = document.createElement('div');
+      label.appendChild(content);
+      label.className = 'text minor';
+      this.dom.foreground.appendChild(label);
     }
+    this.dom.minorTexts.push(label);
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
-
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
-    }
+    label.childNodes[0].nodeValue = text;
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+    label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
+    label.style.left = x + 'px';
+    //label.title = title;  // TODO: this is a heavy operation
+  };
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
+  /**
+   * Create a Major label for the axis at position x
+   * @param {Number} x
+   * @param {String} text
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @private
+   */
+  TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
+    // reuse redundant label
+    var label = this.dom.redundant.majorTexts.shift();
 
-      // update the group holding all ungrouped items
-      this._updateUngrouped();
+    if (!label) {
+      // create label
+      var content = document.createTextNode(text);
+      label = document.createElement('div');
+      label.className = 'text major';
+      label.appendChild(content);
+      this.dom.foreground.appendChild(label);
     }
+    this.dom.majorTexts.push(label);
+
+    label.childNodes[0].nodeValue = text;
+    //label.title = title; // TODO: this is a heavy operation
+
+    label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
+    label.style.left = x + 'px';
   };
 
   /**
-   * Get the current items
-   * @returns {vis.DataSet | null}
+   * Create a minor line for the axis at position x
+   * @param {Number} x
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @private
    */
-  ItemSet.prototype.getItems = function() {
-    return this.itemsData;
+  TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
+    // reuse redundant line
+    var line = this.dom.redundant.minorLines.shift();
+
+    if (!line) {
+      // create vertical line
+      line = document.createElement('div');
+      line.className = 'grid vertical minor';
+      this.dom.background.appendChild(line);
+    }
+    this.dom.minorLines.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';
   };
 
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * Create a Major line for the axis at position x
+   * @param {Number} x
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @private
    */
-  ItemSet.prototype.setGroups = function(groups) {
-    var me = this,
-        ids;
-
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
+    // reuse redundant line
+    var line = this.dom.redundant.majorLines.shift();
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
+    if (!line) {
+      // create vertical line
+      line = document.createElement('DIV');
+      line.className = 'grid vertical major';
+      this.dom.background.appendChild(line);
     }
+    this.dom.majorLines.push(line);
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
+    var props = this.props;
+    if (orientation == 'top') {
+      line.style.top = '0';
     }
     else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
+      line.style.top = this.body.domProps.top.height + 'px';
     }
+    line.style.left = (x - props.majorLineWidth / 2) + 'px';
+    line.style.height = props.majorLineHeight + 'px';
+  };
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
+  /**
+   * 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.
 
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
-    }
+    // 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';
 
-    // update the group holding all ungrouped items
-    this._updateUngrouped();
+      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;
 
-    // update the order of all items in each group
-    this._order();
+    // 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 minor measure';
+      this.dom.measureCharMajor.style.position = 'absolute';
 
-    this.body.emitter.emit('change');
+      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;
   };
 
   /**
-   * Get the current groups
-   * @returns {vis.DataSet | null} groups
+   * 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
    */
-  ItemSet.prototype.getGroups = function() {
-    return this.groupsData;
+  TimeAxis.prototype.snap = function(date) {
+    return this.step.snap(date);
   };
 
-  /**
-   * Remove an item by its id
-   * @param {String | Number} id
-   */
-  ItemSet.prototype.removeItem = function(id) {
-    var item = this.itemsData.get(id),
-        dataset = this.itemsData.getDataSet();
+  module.exports = TimeAxis;
 
-    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);
-        }
-      });
-    }
-  };
 
-  /**
-   * Handle updated items
-   * @param {Number[]} ids
-   * @protected
-   */
-  ItemSet.prototype._onUpdate = function(ids) {
-    var me = this;
+/***/ },
+/* 22 */
+/***/ function(module, exports, __webpack_require__) {
 
-    ids.forEach(function (id) {
-      var itemData = me.itemsData.get(id, me.itemOptions),
-          item = me.items[id],
-          type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
+  var Hammer = __webpack_require__(49);
 
-      var constructor = ItemSet.types[type];
+  /**
+   * @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 Item (data, conversion, options) {
+    this.id = null;
+    this.parent = null;
+    this.data = data;
+    this.dom = null;
+    this.conversion = conversion || {};
+    this.options = options || {};
 
-      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);
-        }
-      }
+    this.selected = false;
+    this.displayed = false;
+    this.dirty = true;
 
-      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 + '"');
-        }
-      }
-    });
+    this.top = null;
+    this.left = null;
+    this.width = null;
+    this.height = null;
+  }
 
-    this._order();
-    this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
+  /**
+   * Select current item
+   */
+  Item.prototype.select = function() {
+    this.selected = true;
+    if (this.displayed) this.redraw();
   };
 
   /**
-   * Handle added items
-   * @param {Number[]} ids
-   * @protected
+   * Unselect current item
    */
-  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
+  Item.prototype.unselect = function() {
+    this.selected = false;
+    if (this.displayed) this.redraw();
+  };
 
   /**
-   * Handle removed items
-   * @param {Number[]} ids
-   * @protected
+   * Set a parent for the item
+   * @param {ItemSet | Group} parent
    */
-  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);
+  Item.prototype.setParent = function(parent) {
+    if (this.displayed) {
+      this.hide();
+      this.parent = parent;
+      if (this.parent) {
+        this.show();
       }
-    });
-
-    if (count) {
-      // update order
-      this._order();
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
+    }
+    else {
+      this.parent = parent;
     }
   };
 
   /**
-   * Update the order of item in all groups
-   * @private
+   * 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
    */
-  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();
-    });
+  Item.prototype.isVisible = function(range) {
+    // Should be implemented by Item implementations
+    return false;
   };
 
   /**
-   * Handle updated groups
-   * @param {Number[]} ids
-   * @private
+   * Show the Item in the DOM (when not already visible)
+   * @return {Boolean} changed
    */
-  ItemSet.prototype._onUpdateGroups = function(ids) {
-    this._onAddGroups(ids);
+  Item.prototype.show = function() {
+    return false;
   };
 
   /**
-   * Handle changed groups
-   * @param {Number[]} ids
-   * @private
+   * Hide the Item from the DOM (when visible)
+   * @return {Boolean} changed
    */
-  ItemSet.prototype._onAddGroups = function(ids) {
-    var me = this;
-
-    ids.forEach(function (id) {
-      var groupData = me.groupsData.get(id);
-      var group = me.groups[id];
-
-      if (!group) {
-        // check for reserved ids
-        if (id == UNGROUPED) {
-          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');
+  Item.prototype.hide = function() {
+    return false;
   };
 
   /**
-   * Handle removed groups
-   * @param {Number[]} ids
-   * @private
+   * Repaint the item
    */
-  ItemSet.prototype._onRemoveGroups = function(ids) {
-    var groups = this.groups;
-    ids.forEach(function (id) {
-      var group = groups[id];
-
-      if (group) {
-        group.hide();
-        delete groups[id];
-      }
-    });
-
-    this.markDirty();
-
-    this.body.emitter.emit('change');
+  Item.prototype.redraw = function() {
+    // should be implemented by the item
   };
 
   /**
-   * Reorder the groups if needed
-   * @return {boolean} changed
-   * @private
+   * Reposition the Item horizontally
    */
-  ItemSet.prototype._orderGroups = function () {
-    if (this.groupsData) {
-      // reorder the groups
-      var groupIds = this.groupsData.getIds({
-        order: this.options.groupOrder
-      });
-
-      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();
-        });
-
-        // show the groups again, attach them to the DOM in correct order
-        groupIds.forEach(function (groupId) {
-          groups[groupId].show();
-        });
-
-        this.groupIds = groupIds;
-      }
-
-      return changed;
-    }
-    else {
-      return false;
-    }
+  Item.prototype.repositionX = function() {
+    // should be implemented by the item
   };
 
   /**
-   * Add a new item
-   * @param {Item} item
-   * @private
+   * Reposition the Item vertically
    */
-  ItemSet.prototype._addItem = function(item) {
-    this.items[item.id] = item;
-
-    // add to group
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.add(item);
+  Item.prototype.repositionY = function() {
+    // should be implemented by the item
   };
 
   /**
-   * Update an existing item
-   * @param {Item} item
-   * @param {Object} itemData
-   * @private
+   * Repaint a delete button on the top right of the item when the item is selected
+   * @param {HTMLElement} anchor
+   * @protected
    */
-  ItemSet.prototype._updateItem = function(item, itemData) {
-    var oldGroupId = item.data.group;
+  Item.prototype._repaintDeleteButton = function (anchor) {
+    if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
+      // create and show button
+      var me = this;
 
-    item.data = itemData;
-    if (item.displayed) {
-      item.redraw();
-    }
+      var deleteButton = document.createElement('div');
+      deleteButton.className = 'delete';
+      deleteButton.title = 'Delete this item';
 
-    // update group
-    if (oldGroupId != item.data.group) {
-      var oldGroup = this.groups[oldGroupId];
-      if (oldGroup) oldGroup.remove(item);
+      Hammer(deleteButton, {
+        preventDefault: true
+      }).on('tap', function (event) {
+        me.parent.removeFromDataSet(me);
+        event.stopPropagation();
+      });
 
-      var groupId = this.groupsData ? item.data.group : UNGROUPED;
-      var group = this.groups[groupId];
-      if (group) group.add(item);
+      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;
     }
   };
 
-  /**
-   * 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
-   */
-  ItemSet.prototype._removeItem = function(item) {
-    // remove from DOM
-    item.hide();
+  module.exports = Item;
 
-    // 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);
+/***/ },
+/* 23 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // remove from group
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.remove(item);
-  };
+  var Item = __webpack_require__(22);
 
   /**
-   * Create an array containing all items being a range (having an end date)
-   * @param array
-   * @returns {Array}
-   * @private
+   * @constructor ItemBox
+   * @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
    */
-  ItemSet.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+  function ItemBox (data, conversion, options) {
+    this.props = {
+      dot: {
+        width: 0,
+        height: 0
+      },
+      line: {
+        width: 0,
+        height: 0
+      }
+    };
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof ItemRange) {
-        endArray.push(array[i]);
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data);
       }
     }
-    return endArray;
-  };
+
+    Item.call(this, data, conversion, options);
+  }
+
+  ItemBox.prototype = new Item (null, null, null);
 
   /**
-   * 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
+   * 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
    */
-  ItemSet.prototype._onTouch = function (event) {
-    // store the touched item, used in _onDragStart
-    this.touchParams.item = ItemSet.itemFromTarget(event);
+  ItemBox.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);
   };
 
   /**
-   * Start dragging the selected events
-   * @param {Event} event
-   * @private
+   * Repaint the item
    */
-  ItemSet.prototype._onDragStart = function (event) {
-    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
-      return;
-    }
+  ItemBox.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    var item = this.touchParams.item || null,
-        me = this,
-        props;
+      // create main box
+      dom.box = document.createElement('DIV');
 
-    if (item && item.selected) {
-      var dragLeftItem = event.target.dragLeftItem;
-      var dragRightItem = event.target.dragRightItem;
+      // contents box (inside the background box). used for making margins
+      dom.content = document.createElement('DIV');
+      dom.content.className = 'content';
+      dom.box.appendChild(dom.content);
 
-      if (dragLeftItem) {
-        props = {
-          item: dragLeftItem
-        };
+      // line to axis
+      dom.line = document.createElement('DIV');
+      dom.line.className = 'line';
 
-        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;
-        }
+      // dot on axis
+      dom.dot = document.createElement('DIV');
+      dom.dot.className = 'dot';
 
-        this.touchParams.itemProps = [props];
-      }
-      else if (dragRightItem) {
-        props = {
-          item: dragRightItem
-        };
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
+    }
 
-        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;
-        }
+    // 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 time axis: 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 time axis: 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 time axis: parent has no axis container element');
+      axis.appendChild(dom.dot);
+    }
+    this.displayed = true;
 
-        this.touchParams.itemProps = [props];
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
       }
       else {
-        this.touchParams.itemProps = this.getSelection().map(function (id) {
-          var item = me.items[id];
-          var props = {
-            item: item
-          };
-
-          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 props;
-        });
+        throw new Error('Property "content" missing in item ' + this.data.id);
       }
 
-      event.stopPropagation();
+      this.dirty = true;
     }
-  };
-
-  /**
-   * Drag selected items
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onDrag = function (event) {
-    if (this.touchParams.itemProps) {
-      var range = this.body.range,
-          snap = this.body.util.snap || null,
-          deltaX = event.gesture.deltaX,
-          scale = (this.props.width / (range.end - range.start)),
-          offset = deltaX / scale;
-
-      // move
-      this.touchParams.itemProps.forEach(function (props) {
-        if ('start' in props) {
-          var start = new Date(props.start + offset);
-          props.item.data.start = snap ? snap(start) : start;
-        }
-
-        if ('end' in props) {
-          var end = new Date(props.end + offset);
-          props.item.data.end = snap ? snap(end) : end;
-        }
-
-        if ('group' in props) {
-          // drag from one group to another
-          var group = ItemSet.groupFromTarget(event);
-          if (group && group.groupId != props.item.data.group) {
-            var oldGroup = props.item.parent;
-            oldGroup.remove(props.item);
-            oldGroup.order();
-            group.add(props.item);
-            group.order();
-
-            props.item.data.group = group.groupId;
-          }
-        }
-      });
-
-      // TODO: implement onMoving handler
-
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
 
-      event.stopPropagation();
+    // update title
+    if (this.data.title != this.title) {
+      dom.box.title = this.data.title;
+      this.title = this.data.title;
     }
-  };
-
-  /**
-   * End of dragging selected items
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onDragEnd = function (event) {
-    if (this.touchParams.itemProps) {
-      // prepare a change set for the changed items
-      var changes = [],
-          me = this,
-          dataset = this.itemsData.getDataSet();
 
-      this.touchParams.itemProps.forEach(function (props) {
-        var id = props.item.id,
-            itemData = me.itemsData.get(id, me.itemOptions);
+    // update class
+    var className = (this.data.className? ' ' + this.data.className : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.box.className = 'item box' + className;
+      dom.line.className = 'item line' + className;
+      dom.dot.className  = 'item dot' + className;
 
-        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.dirty = true;
+    }
 
-        // 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
-              if ('start' in props) props.item.data.start = props.start;
-              if ('end' in props)   props.item.data.end   = props.end;
+    // recalculate size
+    if (this.dirty) {
+      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;
 
-              me.stackDirty = true; // force re-stacking of all items next redraw
-              me.body.emitter.emit('change');
-            }
-          });
-        }
-      });
-      this.touchParams.itemProps = null;
+      this.dirty = false;
+    }
 
-      // apply the changes to the data (if there are changes)
-      if (changes.length) {
-        dataset.update(changes);
-      }
+    this._repaintDeleteButton(dom.box);
+  };
 
-      event.stopPropagation();
+  /**
+   * Show the item in the DOM (when not already displayed). The items DOM will
+   * be created when needed.
+   */
+  ItemBox.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
   };
 
   /**
-   * Handle selecting/deselecting an item when tapping it
-   * @param {Event} event
-   * @private
+   * Hide the item from the DOM (when visible)
    */
-  ItemSet.prototype._onSelectItem = function (event) {
-    if (!this.options.selectable) return;
+  ItemBox.prototype.hide = function() {
+    if (this.displayed) {
+      var dom = this.dom;
 
-    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;
-    }
+      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);
 
-    var oldSelection = this.getSelection();
+      this.top = null;
+      this.left = null;
 
-    var item = ItemSet.itemFromTarget(event);
-    var selection = item ? [item.id] : [];
-    this.setSelection(selection);
+      this.displayed = false;
+    }
+  };
 
-    var newSelection = this.getSelection();
+  /**
+   * Reposition the item horizontally
+   * @Override
+   */
+  ItemBox.prototype.repositionX = function() {
+    var start = this.conversion.toScreen(this.data.start),
+        align = this.options.align,
+        left,
+        box = this.dom.box,
+        line = this.dom.line,
+        dot = this.dom.dot;
 
-    // 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: this.getSelection()
-      });
+    // calculate left position of the box
+    if (align == 'right') {
+      this.left = start - this.width;
+    }
+    else if (align == 'left') {
+      this.left = start;
+    }
+    else {
+      // default or 'center'
+      this.left = start - this.width / 2;
     }
 
-    event.stopPropagation();
+    // 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';
   };
 
   /**
-   * Handle creation and updates of an item on double tap
-   * @param event
-   * @private
+   * Reposition the item vertically
+   * @Override
    */
-  ItemSet.prototype._onAddItem = function (event) {
-    if (!this.options.selectable) return;
-    if (!this.options.editable.add) return;
+  ItemBox.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box,
+        line = this.dom.line,
+        dot = this.dom.dot;
 
-    var me = this,
-        snap = this.body.util.snap || null,
-        item = ItemSet.itemFromTarget(event);
+    if (orientation == 'top') {
+      box.style.top     = (this.top || 0) + 'px';
 
-    if (item) {
-      // update item
+      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;
 
-      // 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.update(itemData);
-        }
-      });
+      box.style.top     = (this.parent.height - this.top - this.height || 0) + 'px';
+      line.style.top    = (itemSetHeight - lineHeight) + 'px';
+      line.style.bottom = '0';
     }
-    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;
-      }
+    dot.style.top = (-this.props.dot.height / 2) + 'px';
+  };
 
-      newItem[this.itemsData.fieldId] = util.randomUUID();
+  module.exports = ItemBox;
 
-      var group = ItemSet.groupFromTarget(event);
-      if (group) {
-        newItem.group = group.groupId;
+
+/***/ },
+/* 24 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Item = __webpack_require__(22);
+
+  /**
+   * @constructor ItemPoint
+   * @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 ItemPoint (data, conversion, options) {
+    this.props = {
+      dot: {
+        top: 0,
+        width: 0,
+        height: 0
+      },
+      content: {
+        height: 0,
+        marginLeft: 0
       }
+    };
 
-      // execute async handler to customize (or cancel) adding an item
-      this.options.onAdd(newItem, function (item) {
-        if (item) {
-          me.itemsData.add(newItem);
-          // TODO: need to trigger a redraw?
-        }
-      });
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data);
+      }
     }
+
+    Item.call(this, data, conversion, options);
+  }
+
+  ItemPoint.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
+   */
+  ItemPoint.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);
   };
 
   /**
-   * Handle selecting/deselecting multiple items when holding an item
-   * @param {Event} event
-   * @private
+   * Repaint the item
    */
-  ItemSet.prototype._onMultiSelectItem = function (event) {
-    if (!this.options.selectable) return;
+  ItemPoint.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    var selection,
-        item = ItemSet.itemFromTarget(event);
+      // background box
+      dom.point = document.createElement('div');
+      // className is updated in redraw()
 
-    if (item) {
-      // multi select items
-      selection = this.getSelection(); // current selection
-      var index = selection.indexOf(item.id);
-      if (index == -1) {
-        // item is not yet selected -> select it
-        selection.push(item.id);
+      // 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;
+    }
+
+    // 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 time axis: parent has no foreground container element');
+      }
+      foreground.appendChild(dom.point);
+    }
+    this.displayed = true;
+
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
       }
       else {
-        // item is already selected -> deselect it
-        selection.splice(index, 1);
+        throw new Error('Property "content" missing in item ' + this.data.id);
       }
-      this.setSelection(selection);
 
-      this.body.emitter.emit('select', {
-        items: this.getSelection()
-      });
+      this.dirty = true;
+    }
 
-      event.stopPropagation();
+    // update title
+    if (this.data.title != this.title) {
+      dom.point.title = this.data.title;
+      this.title = this.data.title;
+    }
+
+    // update class
+    var className = (this.data.className? ' ' + this.data.className : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.point.className  = 'item point' + className;
+      dom.dot.className  = 'item dot' + className;
+
+      this.dirty = true;
+    }
+
+    // recalculate size
+    if (this.dirty) {
+      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
+
+      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
+      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+
+      this.dirty = false;
     }
+
+    this._repaintDeleteButton(dom.point);
   };
 
   /**
-   * 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
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  ItemSet.itemFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-item')) {
-        return target['timeline-item'];
-      }
-      target = target.parentNode;
+  ItemPoint.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
-
-    return null;
   };
 
   /**
-   * 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
+   * Hide the item from the DOM (when visible)
    */
-  ItemSet.groupFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-group')) {
-        return target['timeline-group'];
+  ItemPoint.prototype.hide = function() {
+    if (this.displayed) {
+      if (this.dom.point.parentNode) {
+        this.dom.point.parentNode.removeChild(this.dom.point);
       }
-      target = target.parentNode;
+
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
     }
+  };
 
-    return null;
+  /**
+   * Reposition the item horizontally
+   * @Override
+   */
+  ItemPoint.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';
   };
 
   /**
-   * 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
+   * Reposition the item vertically
+   * @Override
    */
-  ItemSet.itemSetFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-itemset')) {
-        return target['timeline-itemset'];
-      }
-      target = target.parentNode;
-    }
+  ItemPoint.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        point = this.dom.point;
 
-    return null;
+    if (orientation == 'top') {
+      point.style.top = this.top + 'px';
+    }
+    else {
+      point.style.top = (this.parent.height - this.top - this.height) + 'px';
+    }
   };
 
-  module.exports = ItemSet;
+  module.exports = ItemPoint;
 
 
 /***/ },
 /* 25 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var stack = __webpack_require__(26);
-  var ItemRange = __webpack_require__(27);
+  var Hammer = __webpack_require__(49);
+  var Item = __webpack_require__(22);
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * @constructor ItemRange
+   * @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 Group (groupId, data, itemSet) {
-    this.groupId = groupId;
-
-    this.itemSet = itemSet;
-
-    this.dom = {};
+  function ItemRange (data, conversion, options) {
     this.props = {
-      label: {
-        width: 0,
-        height: 0
+      content: {
+        width: 0
       }
     };
-    this.className = null;
-
-    this.items = {};        // items filtered by groupId of this group
-    this.visibleItems = []; // items currently visible in window
-    this.orderedItems = {   // items sorted by start and by end
-      byStart: [],
-      byEnd: []
-    };
+    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
 
-    this._create();
+    // 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.setData(data);
+    Item.call(this, data, conversion, options);
   }
 
+  ItemRange.prototype = new Item (null, null, null);
+
+  ItemRange.prototype.baseClassName = 'item range';
+
   /**
-   * Create DOM elements for the group
-   * @private
+   * 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
    */
-  Group.prototype._create = function() {
-    var label = document.createElement('div');
-    label.className = 'vlabel';
-    this.dom.label = label;
+  ItemRange.prototype.isVisible = function(range) {
+    // determine visibility
+    return (this.data.start < range.end) && (this.data.end > range.start);
+  };
 
-    var inner = document.createElement('div');
-    inner.className = 'inner';
-    label.appendChild(inner);
-    this.dom.inner = inner;
+  /**
+   * Repaint the item
+   */
+  ItemRange.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    var foreground = document.createElement('div');
-    foreground.className = 'group';
-    foreground['timeline-group'] = this;
-    this.dom.foreground = foreground;
+        // background box
+      dom.box = document.createElement('div');
+      // className is updated in redraw()
 
-    this.dom.background = document.createElement('div');
-    this.dom.background.className = 'group';
+      // contents box
+      dom.content = document.createElement('div');
+      dom.content.className = 'content';
+      dom.box.appendChild(dom.content);
 
-    this.dom.axis = document.createElement('div');
-    this.dom.axis.className = 'group';
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
+    }
 
-    // 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';
-    this.dom.marker.innerHTML = '?';
-    this.dom.background.appendChild(this.dom.marker);
-  };
+    // 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 time axis: parent has no foreground container element');
+      }
+      foreground.appendChild(dom.box);
+    }
+    this.displayed = true;
+
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
+      }
+      else {
+        throw new Error('Property "content" missing in item ' + this.data.id);
+      }
 
-  /**
-   * 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);
-    }
-    else if (content != undefined) {
-      this.dom.inner.innerHTML = content;
-    }
-    else {
-      this.dom.inner.innerHTML = this.groupId;
+      this.dirty = true;
     }
 
     // update title
-    this.dom.label.title = data && data.title || '';
-
-    if (!this.dom.inner.firstChild) {
-      util.addClassName(this.dom.inner, 'hidden');
+    if (this.data.title != this.title) {
+      dom.box.title = this.data.title;
+      this.title = this.data.title;
     }
-    else {
-      util.removeClassName(this.dom.inner, 'hidden');
+
+    // update class
+    var className = (this.data.className ? (' ' + this.data.className) : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.box.className = this.baseClassName + className;
+
+      this.dirty = true;
     }
 
-    // update className
-    var className = data && data.className || null;
-    if (className != this.className) {
-      if (this.className) {
-        util.removeClassName(this.dom.label, className);
-        util.removeClassName(this.dom.foreground, className);
-        util.removeClassName(this.dom.background, className);
-        util.removeClassName(this.dom.axis, 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);
+    // recalculate size
+    if (this.dirty) {
+      // determine from css whether this box has overflow
+      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+
+      this.props.content.width = this.dom.content.offsetWidth;
+      this.height = this.dom.box.offsetHeight;
+
+      this.dirty = false;
     }
+
+    this._repaintDeleteButton(dom.box);
+    this._repaintDragLeft();
+    this._repaintDragRight();
   };
 
   /**
-   * Get the width of the group label
-   * @return {number} width
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  Group.prototype.getLabelWidth = function() {
-    return this.props.label.width;
+  ItemRange.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
+    }
   };
 
-
   /**
-   * Repaint this group
-   * @param {{start: number, end: number}} range
-   * @param {{item: number, axis: number}} margin
-   * @param {boolean} [restack=false]  Force restacking of all items
-   * @return {boolean} Returns true if the group is resized
+   * Hide the item from the DOM (when visible)
+   * @return {Boolean} changed
    */
-  Group.prototype.redraw = function(range, margin, restack) {
-    var resized = false;
-
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+  ItemRange.prototype.hide = function() {
+    if (this.displayed) {
+      var box = this.dom.box;
 
-    // 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;
+      if (box.parentNode) {
+        box.parentNode.removeChild(box);
+      }
 
-      util.forEach(this.items, function (item) {
-        item.dirty = true;
-        if (item.displayed) item.redraw();
-      });
+      this.top = null;
+      this.left = null;
 
-      restack = true;
+      this.displayed = false;
     }
+  };
 
-    // 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);
-    }
+  /**
+   * Reposition the item horizontally
+   * @Override
+   */
+  // TODO: delete the old function
+  ItemRange.prototype.repositionX = function() {
+    var props = this.props,
+        parentWidth = this.parent.width,
+        start = this.conversion.toScreen(this.data.start),
+        end = this.conversion.toScreen(this.data.end),
+        padding = this.options.padding,
+        contentLeft;
 
-    // recalculate the height of the group
-    var height;
-    var visibleItems = this.visibleItems;
-    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 (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 / 2;
+    // limit the width of the this, as browsers cannot draw very wide divs
+    if (start < -parentWidth) {
+      start = -parentWidth;
     }
-    else {
-      height = margin.axis + margin.item;
+    if (end > 2 * parentWidth) {
+      end = 2 * parentWidth;
     }
-    height = Math.max(height, this.props.label.height);
-
-    // 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;
+    var boxWidth = Math.max(end - start, 1);
 
-    // 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;
+    if (this.overflow) {
+      // when range exceeds left of the window, position the contents at the left of the visible area
+      contentLeft = Math.max(-start, 0);
 
-    // 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.left = start;
+      this.width = boxWidth + this.props.content.width;
+      // Note: The calculation of width is an optimistic calculation, giving
+      //       a width which will not change when moving the Timeline
+      //       So no restacking needed, which is nicer for the eye;
+    }
+    else { // no overflow
+      // when range exceeds left of the window, position the contents at the left of the visible area
+      if (start < 0) {
+        contentLeft = Math.min(-start,
+            (end - start - props.content.width - 2 * padding));
+        // TODO: remove the need for options.padding. it's terrible.
+      }
+      else {
+        contentLeft = 0;
+      }
 
-    // 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();
+      this.left = start;
+      this.width = boxWidth;
     }
 
-    return resized;
+    this.dom.box.style.left = this.left + 'px';
+    this.dom.box.style.width = boxWidth + 'px';
+    this.dom.content.style.left = contentLeft + 'px';
   };
 
   /**
-   * Show this group: attach to the DOM
+   * Reposition the item vertically
+   * @Override
    */
-  Group.prototype.show = function() {
-    if (!this.dom.label.parentNode) {
-      this.itemSet.dom.labelSet.appendChild(this.dom.label);
-    }
-
-    if (!this.dom.foreground.parentNode) {
-      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
-    }
+  ItemRange.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box;
 
-    if (!this.dom.background.parentNode) {
-      this.itemSet.dom.background.appendChild(this.dom.background);
+    if (orientation == 'top') {
+      box.style.top = this.top + 'px';
     }
-
-    if (!this.dom.axis.parentNode) {
-      this.itemSet.dom.axis.appendChild(this.dom.axis);
+    else {
+      box.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
   };
 
   /**
-   * Hide this group: remove from the DOM
+   * Repaint a drag area on the left side of the range when the range is selected
+   * @protected
    */
-  Group.prototype.hide = function() {
-    var label = this.dom.label;
-    if (label.parentNode) {
-      label.parentNode.removeChild(label);
-    }
+  ItemRange.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 foreground = this.dom.foreground;
-    if (foreground.parentNode) {
-      foreground.parentNode.removeChild(foreground);
-    }
+      // TODO: this should be redundant?
+      Hammer(dragLeft, {
+        preventDefault: true
+      }).on('drag', function () {
+            //console.log('drag left')
+          });
 
-    var background = this.dom.background;
-    if (background.parentNode) {
-      background.parentNode.removeChild(background);
+      this.dom.box.appendChild(dragLeft);
+      this.dom.dragLeft = dragLeft;
     }
-
-    var axis = this.dom.axis;
-    if (axis.parentNode) {
-      axis.parentNode.removeChild(axis);
+    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;
     }
   };
 
   /**
-   * Add an item to the group
-   * @param {Item} item
+   * Repaint a drag area on the right side of the range when the range is selected
+   * @protected
    */
-  Group.prototype.add = function(item) {
-    this.items[item.id] = item;
-    item.setParent(this);
+  ItemRange.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;
 
-    if (item instanceof ItemRange && 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);
+      // 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;
     }
   };
 
-  /**
-   * Remove an item from the group
-   * @param {Item} item
-   */
-  Group.prototype.remove = function(item) {
-    delete this.items[item.id];
-    item.setParent(this.itemSet);
+  module.exports = ItemRange;
+
+
+/***/ },
+/* 26 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Emitter = __webpack_require__(41);
+  var Hammer = __webpack_require__(49);
+  var mousetrap = __webpack_require__(42);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var dotparser = __webpack_require__(32);
+  var Groups = __webpack_require__(28);
+  var Images = __webpack_require__(29);
+  var Node = __webpack_require__(30);
+  var Edge = __webpack_require__(27);
+  var Popup = __webpack_require__(31);
+  var MixinLoader = __webpack_require__(40);
+
+  // Load custom shapes into CanvasRenderingContext2D
+  __webpack_require__(37);
+
+  /**
+   * @constructor Network
+   * Create a network visualization, displaying nodes and edges.
+   *
+   * @param {Element} container   The DOM element in which the Network will
+   *                                  be created. Normally a div element.
+   * @param {Object} data         An object containing parameters
+   *                              {Array} nodes
+   *                              {Array} edges
+   * @param {Object} options      Options
+   */
+  function Network (container, data, options) {
+    if (!(this instanceof Network)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
+    }
+
+    this._initializeMixinLoaders();
+
+    // create variables and set default values
+    this.containerElement = container;
+    this.width = '100%';
+    this.height = '100%';
+
+    // render and calculation settings
+    this.renderRefreshRate = 60;                         // hz (fps)
+    this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
+    this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
+    this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
+    this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
+
+    this.stabilize = true;  // stabilize before displaying the network
+    this.selectable = true;
+    this.initializing = true;
+
+    // these functions are triggered when the dataset is edited
+    this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
+
+
+    // set constant values
+    this.constants = {
+      nodes: {
+        radiusMin: 10,
+        radiusMax: 30,
+        radius: 10,
+        shape: 'ellipse',
+        image: undefined,
+        widthMin: 16, // px
+        widthMax: 64, // px
+        fixed: false,
+        fontColor: 'black',
+        fontSize: 14, // px
+        fontFace: 'verdana',
+        level: -1,
+        color: {
+            border: '#2B7CE9',
+            background: '#97C2FC',
+          highlight: {
+            border: '#2B7CE9',
+            background: '#D2E5FF'
+          },
+          hover: {
+            border: '#2B7CE9',
+            background: '#D2E5FF'
+          }
+        },
+        borderColor: '#2B7CE9',
+        backgroundColor: '#97C2FC',
+        highlightColor: '#D2E5FF',
+        group: undefined
+      },
+      edges: {
+        widthMin: 1,
+        widthMax: 15,
+        width: 1,
+        widthSelectionMultiplier: 2,
+        hoverWidth: 1.5,
+        style: 'line',
+        color: {
+          color:'#848484',
+          highlight:'#848484',
+          hover: '#848484'
+        },
+        fontColor: '#343434',
+        fontSize: 14, // px
+        fontFace: 'arial',
+        fontFill: 'white',
+        arrowScaleFactor: 1,
+        dash: {
+          length: 10,
+          gap: 5,
+          altLength: undefined
+        },
+        inheritColor: "from" // to, from, false, true (== from)
+      },
+      configurePhysics:false,
+      physics: {
+        barnesHut: {
+          enabled: true,
+          theta: 1 / 0.6, // inverted to save time during calculation
+          gravitationalConstant: -2000,
+          centralGravity: 0.3,
+          springLength: 95,
+          springConstant: 0.04,
+          damping: 0.09
+        },
+        repulsion: {
+          centralGravity: 0.1,
+          springLength: 200,
+          springConstant: 0.05,
+          nodeDistance: 100,
+          damping: 0.09
+        },
+        hierarchicalRepulsion: {
+          enabled: false,
+          centralGravity: 0.5,
+          springLength: 150,
+          springConstant: 0.01,
+          nodeDistance: 60,
+          damping: 0.09
+        },
+        damping: null,
+        centralGravity: null,
+        springLength: null,
+        springConstant: null
+      },
+      clustering: {                   // Per Node in Cluster = PNiC
+        enabled: false,               // (Boolean)             | global on/off switch for clustering.
+        initialMaxNodes: 100,         // (# nodes)             | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
+        clusterThreshold:500,         // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
+        reduceToNodes:300,            // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
+        chainThreshold: 0.4,          // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
+        clusterEdgeThreshold: 20,     // (px)                  | edge length threshold. if smaller, this node is clustered.
+        sectorThreshold: 100,         // (# nodes in cluster)  | cluster size threshold. If larger, expanding in own sector.
+        screenSizeThreshold: 0.2,     // (% of canvas)         | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
+        fontSizeMultiplier: 4.0,      // (px PNiC)             | how much the cluster font size grows per node in cluster (in px).
+        maxFontSize: 1000,
+        forceAmplification: 0.1,      // (multiplier PNiC)     | factor of increase fo the repulsion force of a cluster (per node in cluster).
+        distanceAmplification: 0.1,   // (multiplier PNiC)     | factor how much the repulsion distance of a cluster increases (per node in cluster).
+        edgeGrowth: 20,               // (px PNiC)             | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
+        nodeScaling: {width:  1,      // (px PNiC)             | growth of the width  per node in cluster.
+                      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
+      },
+      navigation: {
+        enabled: false
+      },
+      keyboard: {
+        enabled: false,
+        speed: {x: 10, y: 10, zoom: 0.02}
+      },
+      dataManipulation: {
+        enabled: false,
+        initiallyVisible: false
+      },
+      hierarchicalLayout: {
+        enabled:false,
+        levelSeparation: 150,
+        nodeSpacing: 100,
+        direction: "UD"   // UD, DU, LR, RL
+      },
+      freezeForStabilization: false,
+      smoothCurves: {
+        enabled: true,
+        dynamic: true,
+        type: "continuous",
+        roundness: 0.5
+      },
+      dynamicSmoothCurves: true,
+      maxVelocity:  30,
+      minVelocity:  0.1,   // px/s
+      stabilizationIterations: 1000,  // maximum number of iteration to stabilize
+      labels:{
+        add:"Add Node",
+        edit:"Edit",
+        link:"Add Link",
+        del:"Delete selected",
+        editNode:"Edit Node",
+        editEdge:"Edit Edge",
+        back:"Back",
+        addDescription:"Click in an empty space to place a new node.",
+        linkDescription:"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.",
+        addError:"The function for add does not support two arguments (data,callback).",
+        linkError:"The function for connect does not support two arguments (data,callback).",
+        editError:"The function for edit does not support two arguments (data, callback).",
+        editBoundError:"No edit function has been bound to this button.",
+        deleteError:"The function for delete does not support two arguments (data, callback).",
+        deleteClusterError:"Clusters cannot be deleted."
+      },
+      tooltip: {
+        delay: 300,
+        fontColor: 'black',
+        fontSize: 14, // px
+        fontFace: 'verdana',
+        color: {
+          border: '#666',
+          background: '#FFFFC6'
+        }
+      },
+      dragNetwork: true,
+      dragNodes: true,
+      zoomable: true,
+      hover: false,
+      hideEdgesOnDrag: false,
+      hideNodesOnDrag: false
+    };
+    this.hoverObj = {nodes:{},edges:{}};
+    this.controlNodesActive = false;
+
+    // Node variables
+    var network = this;
+    this.groups = new Groups(); // object with groups
+    this.images = new Images(); // object with images
+    this.images.setOnloadCallback(function () {
+      network._redraw();
+    });
+
+    // keyboard navigation variables
+    this.xIncrement = 0;
+    this.yIncrement = 0;
+    this.zoomIncrement = 0;
 
-    // remove from visible items
-    var index = this.visibleItems.indexOf(item);
-    if (index != -1) this.visibleItems.splice(index, 1);
+    // loading all the mixins:
+    // load the force calculation functions, grouped under the physics system.
+    this._loadPhysicsSystem();
+    // create a frame and canvas
+    this._create();
+    // load the sector system.    (mandatory, fully integrated with Network)
+    this._loadSectorSystem();
+    // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
+    this._loadClusterSystem();
+    // load the selection system. (mandatory, required by Network)
+    this._loadSelectionSystem();
+    // load the selection system. (mandatory, required by Network)
+    this._loadHierarchySystem();
 
-    // TODO: also remove from ordered items?
-  };
+    // apply options
+    this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
+    this._setScale(1);
+    this.setOptions(options);
 
-  /**
-   * Remove an item from the corresponding DataSet
-   * @param {Item} item
-   */
-  Group.prototype.removeFromDataSet = function(item) {
-    this.itemSet.removeItem(item.id);
-  };
+    // other vars
+    this.freezeSimulation = false;// freeze the simulation
+    this.cachedFunctions = {};
 
-  /**
-   * Reorder the items
-   */
-  Group.prototype.order = function() {
-    var array = util.toArray(this.items);
-    this.orderedItems.byStart = array;
-    this.orderedItems.byEnd = this._constructByEndArray(array);
+    // containers for nodes and edges
+    this.calculationNodes = {};
+    this.calculationNodeIndices = [];
+    this.nodeIndices = [];        // array with all the indices of the nodes. Used to speed up forces calculation
+    this.nodes = {};              // object with Node objects
+    this.edges = {};              // object with Edge objects
 
-    stack.orderByStart(this.orderedItems.byStart);
-    stack.orderByEnd(this.orderedItems.byEnd);
-  };
+    // position and scale variables and objects
+    this.canvasTopLeft     = {"x": 0,"y": 0};   // coordinates of the top left of the canvas.     they will be set during _redraw.
+    this.canvasBottomRight = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
+    this.pointerPosition = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
+    this.areaCenter = {};               // object with x and y elements used for determining the center of the zoom action
+    this.scale = 1;                     // defining the global scale variable in the constructor
+    this.previousScale = this.scale;    // this is used to check if the zoom operation is zooming in or out
 
-  /**
-   * Create an array containing all items being a range (having an end date)
-   * @param {Item[]} array
-   * @returns {ItemRange[]}
-   * @private
-   */
-  Group.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+    // datasets or dataviews
+    this.nodesData = null;      // A DataSet or DataView
+    this.edgesData = null;      // A DataSet or DataView
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof ItemRange) {
-        endArray.push(array[i]);
+    // create event listeners used to subscribe on the DataSets of the nodes and edges
+    this.nodesListeners = {
+      'add': function (event, params) {
+        network._addNodes(params.items);
+        network.start();
+      },
+      'update': function (event, params) {
+        network._updateNodes(params.items);
+        network.start();
+      },
+      'remove': function (event, params) {
+        network._removeNodes(params.items);
+        network.start();
       }
-    }
-    return endArray;
-  };
+    };
+    this.edgesListeners = {
+      'add': function (event, params) {
+        network._addEdges(params.items);
+        network.start();
+      },
+      'update': function (event, params) {
+        network._updateEdges(params.items);
+        network.start();
+      },
+      'remove': function (event, params) {
+        network._removeEdges(params.items);
+        network.start();
+      }
+    };
 
-  /**
-   * 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
-   */
-  Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
-    var initialPosByStart,
-        newVisibleItems = [],
-        i;
+    // properties for the animation
+    this.moving = true;
+    this.timer = undefined; // Scheduling function. Is definded in this.start();
 
-    // first check if the items that were in view previously are still in view.
-    // this handles the case for the ItemRange that is both before and after the current one.
-    if (visibleItems.length > 0) {
-      for (i = 0; i < visibleItems.length; i++) {
-        this._checkIfVisible(visibleItems[i], newVisibleItems, range);
-      }
-    }
+    // load data (the disable start variable will be the same as the enabled clustering)
+    this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
 
-    // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
-    if (newVisibleItems.length == 0) {
-      initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
+    // hierarchical layout
+    this.initializing = false;
+    if (this.constants.hierarchicalLayout.enabled == true) {
+      this._setupHierarchicalLayout();
     }
     else {
-      initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
-    }
-
-    // use visible search to find a visible ItemRange (only based on endTime)
-    var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
-
-    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
-    if (initialPosByStart != -1) {
-      for (i = initialPosByStart; i >= 0; i--) {
-        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
-      }
-      for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
-        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      // zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
+      if (this.stabilize == false) {
+        this.zoomExtent(true,this.constants.clustering.enabled);
       }
     }
 
-    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
-    if (initialPosByEnd != -1) {
-      for (i = initialPosByEnd; i >= 0; i--) {
-        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
-      }
-      for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
-        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
-      }
+    // if clustering is disabled, the simulation will have started in the setData function
+    if (this.constants.clustering.enabled) {
+      this.startWithClustering();
     }
+  }
 
-    return newVisibleItems;
-  };
-
-
+  // Extend Network with an Emitter mixin
+  Emitter(Network.prototype);
 
   /**
-   * this function checks if an item is invisible. If it is NOT we make it visible
-   * and add it to the global visible items. If it is, return true.
+   * Get the script path where the vis.js library is located
    *
-   * @param {Item} item
-   * @param {Item[]} visibleItems
-   * @param {{start:number, end:number}} range
-   * @returns {boolean}
+   * @returns {string | null} path   Path or null when not found. Path does not
+   *                                 end with a slash.
    * @private
    */
-  Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
-    if (item.isVisible(range)) {
-      if (!item.displayed) item.show();
-      item.repositionX();
-      if (visibleItems.indexOf(item) == -1) {
-        visibleItems.push(item);
-      }
-      return false;
-    }
-    else {
-      if (item.displayed) item.hide();
-      return true;
-    }
-  };
+  Network.prototype._getScriptPath = function() {
+    var scripts = document.getElementsByTagName( 'script' );
 
-  /**
-   * 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._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();
+    // find script named vis.js or vis.min.js
+    for (var i = 0; i < scripts.length; i++) {
+      var src = scripts[i].src;
+      var match = src && /\/?vis(.min)?\.js$/.exec(src);
+      if (match) {
+        // return path without the script name
+        return src.substring(0, src.length - match[0].length);
+      }
     }
-  };
-
-  module.exports = Group;
-
-
-/***/ },
-/* 26 */
-/***/ function(module, exports, __webpack_require__) {
-
-  // Utility functions for ordering and stacking of items
-  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
 
-  /**
-   * Order items by their start data
-   * @param {Item[]} items
-   */
-  exports.orderByStart = function(items) {
-    items.sort(function (a, b) {
-      return a.data.start - b.data.start;
-    });
+    return null;
   };
 
-  /**
-   * Order items by their end date. If they have no end date, their start date
-   * is used.
-   * @param {Item[]} items
-   */
-  exports.orderByEnd = function(items) {
-    items.sort(function (a, b) {
-      var aTime = ('end' in a.data) ? a.data.end : a.data.start,
-          bTime = ('end' in b.data) ? b.data.end : b.data.start;
-
-      return aTime - bTime;
-    });
-  };
 
   /**
-   * Adjust vertical positions of the items such that they don't overlap each
-   * other.
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: number, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   * @param {boolean} [force=false]
-   *            If true, all items will be repositioned. If false (default), only
-   *            items having a top===null will be re-stacked
+   * Find the center position of the network
+   * @private
    */
-  exports.stack = function(items, margin, force) {
-    var i, iMax;
-
-    if (force) {
-      // reset top position of all items
-      for (i = 0, iMax = items.length; i < iMax; i++) {
-        items[i].top = null;
+  Network.prototype._getRange = function() {
+    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.x)) {minX = node.x;}
+        if (maxX < (node.x)) {maxX = node.x;}
+        if (minY > (node.y)) {minY = node.y;}
+        if (maxY < (node.y)) {maxY = node.y;}
       }
     }
-
-    // calculate new, non-overlapping positions
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      var item = items[i];
-      if (item.top === null) {
-        // initialize top position
-        item.top = margin.axis;
-
-        do {
-          // TODO: optimize checking for overlap. when there is a gap without items,
-          //       you only need to check for items from the next item on, not from zero
-          var collidingItem = null;
-          for (var j = 0, jj = items.length; j < jj; j++) {
-            var other = items[j];
-            if (other.top !== null && other !== item && exports.collision(item, other, margin.item)) {
-              collidingItem = other;
-              break;
-            }
-          }
-
-          if (collidingItem != null) {
-            // There is a collision. Reposition the items above the colliding element
-            item.top = collidingItem.top + collidingItem.height + margin.item;
-          }
-        } while (collidingItem);
-      }
+    if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
+      minY = 0, maxY = 0, minX = 0, maxX = 0;
     }
+    return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
   };
 
-  /**
-   * Adjust vertical positions of the items without stacking them
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: number, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   */
-  exports.nostack = function(items, margin) {
-    var i, iMax;
-
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].top = margin.axis;
-    }
-  };
 
   /**
-   * Test if the two provided items collide
-   * The items must have parameters left, width, top, and height.
-   * @param {Item} a          The first item
-   * @param {Item} b          The second item
-   * @param {Number} margin   A minimum required margin.
-   *                          If margin is provided, the two items will be
-   *                          marked colliding when they overlap or
-   *                          when the margin between the two is smaller than
-   *                          the requested margin.
-   * @return {boolean}        true if a and b collide, else false
+   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+   * @returns {{x: number, y: number}}
+   * @private
    */
-  exports.collision = function(a, b, margin) {
-    return ((a.left - margin + EPSILON)       < (b.left + b.width) &&
-        (a.left + a.width + margin - EPSILON) > b.left &&
-        (a.top - margin + EPSILON)            < (b.top + b.height) &&
-        (a.top + a.height + margin - EPSILON) > b.top);
+  Network.prototype._findCenter = function(range) {
+    return {x: (0.5 * (range.maxX + range.minX)),
+            y: (0.5 * (range.maxY + range.minY))};
   };
 
 
-/***/ },
-/* 27 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Hammer = __webpack_require__(3);
-  var Item = __webpack_require__(28);
-
   /**
-   * @constructor ItemRange
-   * @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
+   * center the network
+   *
+   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
    */
-  function ItemRange (data, conversion, options) {
-    this.props = {
-      content: {
-        width: 0
-      }
-    };
-    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);
-      }
-    }
-
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemRange.prototype = new Item (null, null, null);
+  Network.prototype._centerNetwork = function(range) {
+    var center = this._findCenter(range);
 
-  ItemRange.prototype.baseClassName = 'item range';
+    center.x *= this.scale;
+    center.y *= this.scale;
+    center.x -= 0.5 * this.frame.canvas.clientWidth;
+    center.y -= 0.5 * this.frame.canvas.clientHeight;
 
-  /**
-   * 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
-   */
-  ItemRange.prototype.isVisible = function(range) {
-    // determine visibility
-    return (this.data.start < range.end) && (this.data.end > range.start);
+    this._setTranslation(-center.x,-center.y); // set at 0,0
   };
 
+
   /**
-   * Repaint the item
+   * This function zooms out to fit all data on screen based on amount of nodes
+   *
+   * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
+   * @param {Boolean} [disableStart] | If true, start is not called.
    */
-  ItemRange.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-        // background box
-      dom.box = document.createElement('div');
-      // className is updated in redraw()
-
-      // 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;
-    }
-
-    // append DOM to parent DOM
-    if (!this.parent) {
-      throw new Error('Cannot redraw item: no parent attached');
+  Network.prototype.zoomExtent = function(initialZoom, disableStart) {
+    if (initialZoom === undefined) {
+      initialZoom = false;
     }
-    if (!dom.box.parentNode) {
-      var foreground = this.parent.dom.foreground;
-      if (!foreground) {
-        throw new Error('Cannot redraw time axis: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.box);
+    if (disableStart === undefined) {
+      disableStart = false;
     }
-    this.displayed = true;
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
+    var range = this._getRange();
+    var zoomLevel;
+
+    if (initialZoom == true) {
+      var numberOfNodes = this.nodeIndices.length;
+      if (this.constants.smoothCurves == true) {
+        if (this.constants.clustering.enabled == true &&
+          numberOfNodes >= this.constants.clustering.initialMaxNodes) {
+          zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+        }
+        else {
+          zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+        }
       }
       else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        if (this.constants.clustering.enabled == true &&
+            numberOfNodes >= this.constants.clustering.initialMaxNodes) {
+          zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+        }
+        else {
+          zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+        }
       }
 
-      this.dirty = true;
-    }
-
-    // update title
-    if (this.data.title != this.title) {
-      dom.box.title = this.data.title;
-      this.title = this.data.title;
-    }
-
-    // update class
-    var className = (this.data.className ? (' ' + this.data.className) : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = this.baseClassName + className;
-
-      this.dirty = true;
+      // correct for larger canvasses.
+      var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
+      zoomLevel *= factor;
     }
+    else {
+      var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
+      var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
 
-    // recalculate size
-    if (this.dirty) {
-      // determine from css whether this box has overflow
-      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+      var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
+      var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
 
-      this.props.content.width = this.dom.content.offsetWidth;
-      this.height = this.dom.box.offsetHeight;
+      zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
+    }
 
-      this.dirty = false;
+    if (zoomLevel > 1.0) {
+      zoomLevel = 1.0;
     }
 
-    this._repaintDeleteButton(dom.box);
-    this._repaintDragLeft();
-    this._repaintDragRight();
+
+    this._setScale(zoomLevel);
+    this._centerNetwork(range);
+    if (disableStart == false) {
+      this.moving = true;
+      this.start();
+    }
   };
 
+
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Update the this.nodeIndices with the most recent node index list
+   * @private
    */
-  ItemRange.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  Network.prototype._updateNodeIndexList = function() {
+    this._clearNodeIndexList();
+    for (var idx in this.nodes) {
+      if (this.nodes.hasOwnProperty(idx)) {
+        this.nodeIndices.push(idx);
+      }
     }
   };
 
+
   /**
-   * Hide the item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Set nodes and edges, and optionally options as well.
+   *
+   * @param {Object} data              Object containing parameters:
+   *                                   {Array | DataSet | DataView} [nodes] Array with nodes
+   *                                   {Array | DataSet | DataView} [edges] Array with edges
+   *                                   {String} [dot] String containing data in DOT format
+   *                                   {Options} [options] Object with options
+   * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
    */
-  ItemRange.prototype.hide = function() {
-    if (this.displayed) {
-      var box = this.dom.box;
+  Network.prototype.setData = function(data, disableStart) {
+    if (disableStart === undefined) {
+      disableStart = false;
+    }
 
-      if (box.parentNode) {
-        box.parentNode.removeChild(box);
+    if (data && data.dot && (data.nodes || data.edges)) {
+      throw new SyntaxError('Data must contain either parameter "dot" or ' +
+          ' parameter pair "nodes" and "edges", but not both.');
+    }
+
+    // set options
+    this.setOptions(data && data.options);
+
+    // set all data
+    if (data && data.dot) {
+      // parse DOT file
+      if(data && data.dot) {
+        var dotData = dotparser.DOTToGraph(data.dot);
+        this.setData(dotData);
+        return;
       }
+    }
+    else {
+      this._setNodes(data && data.nodes);
+      this._setEdges(data && data.edges);
+    }
 
-      this.top = null;
-      this.left = null;
+    this._putDataInSector();
 
-      this.displayed = false;
+    if (!disableStart) {
+      // find a stable position or start animating to a stable position
+      if (this.stabilize) {
+        var me = this;
+        setTimeout(function() {me._stabilize(); me.start();},0)
+      }
+      else {
+        this.start();
+      }
     }
   };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Set options
+   * @param {Object} options
+   * @param {Boolean} [initializeView] | set zoom and translation to default.
    */
-  // TODO: delete the old function
-  ItemRange.prototype.repositionX = function() {
-    var props = this.props,
-        parentWidth = this.parent.width,
-        start = this.conversion.toScreen(this.data.start),
-        end = this.conversion.toScreen(this.data.end),
-        padding = this.options.padding,
-        contentLeft;
+  Network.prototype.setOptions = function (options) {
+    if (options) {
+      var prop;
+      // retrieve parameter values
+      if (options.width !== undefined)           {this.width = options.width;}
+      if (options.height !== undefined)          {this.height = options.height;}
+      if (options.stabilize !== undefined)       {this.stabilize = options.stabilize;}
+      if (options.selectable !== undefined)      {this.selectable = options.selectable;}
+      if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
+      if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
+      if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
+      if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
+      if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
+      if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
+      if (options.hover !== undefined)           {this.constants.hover = options.hover;}
+      if (options.hideEdgesOnDrag !== undefined) {this.constants.hideEdgesOnDrag = options.hideEdgesOnDrag;}
+      if (options.hideNodesOnDrag !== undefined) {this.constants.hideNodesOnDrag = options.hideNodesOnDrag;}
 
-    // 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);
+      // TODO: deprecated since version 3.0.0. Cleanup some day
+      if (options.dragGraph !== undefined) {
+        throw new Error('Option dragGraph is renamed to dragNetwork');
+      }
 
-    if (this.overflow) {
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      contentLeft = Math.max(-start, 0);
+      if (options.labels !== undefined)  {
+        for (prop in options.labels) {
+          if (options.labels.hasOwnProperty(prop)) {
+            this.constants.labels[prop] = options.labels[prop];
+          }
+        }
+      }
 
-      this.left = start;
-      this.width = boxWidth + this.props.content.width;
-      // Note: The calculation of width is an optimistic calculation, giving
-      //       a width which will not change when moving the Timeline
-      //       So no restacking needed, which is nicer for the eye;
-    }
-    else { // no overflow
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      if (start < 0) {
-        contentLeft = Math.min(-start,
-            (end - start - props.content.width - 2 * padding));
-        // TODO: remove the need for options.padding. it's terrible.
+      if (options.onAdd) {
+          this.triggerFunctions.add = options.onAdd;
+        }
+
+      if (options.onEdit) {
+        this.triggerFunctions.edit = options.onEdit;
       }
-      else {
-        contentLeft = 0;
+
+      if (options.onEditEdge) {
+        this.triggerFunctions.editEdge = options.onEditEdge;
       }
 
-      this.left = start;
-      this.width = boxWidth;
-    }
+      if (options.onConnect) {
+        this.triggerFunctions.connect = options.onConnect;
+      }
 
-    this.dom.box.style.left = this.left + 'px';
-    this.dom.box.style.width = boxWidth + 'px';
-    this.dom.content.style.left = contentLeft + 'px';
-  };
+      if (options.onDelete) {
+        this.triggerFunctions.del = options.onDelete;
+      }
 
-  /**
-   * Reposition the item vertically
-   * @Override
-   */
-  ItemRange.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box;
+      if (options.physics) {
+        if (options.physics.barnesHut) {
+          this.constants.physics.barnesHut.enabled = true;
+          for (prop in options.physics.barnesHut) {
+            if (options.physics.barnesHut.hasOwnProperty(prop)) {
+              this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
+            }
+          }
+        }
 
-    if (orientation == 'top') {
-      box.style.top = this.top + 'px';
-    }
-    else {
-      box.style.top = (this.parent.height - this.top - this.height) + 'px';
-    }
-  };
+        if (options.physics.repulsion) {
+          this.constants.physics.barnesHut.enabled = false;
+          for (prop in options.physics.repulsion) {
+            if (options.physics.repulsion.hasOwnProperty(prop)) {
+              this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
+            }
+          }
+        }
 
-  /**
-   * Repaint a drag area on the left side of the range when the range is selected
-   * @protected
-   */
-  ItemRange.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 (options.physics.hierarchicalRepulsion) {
+          this.constants.hierarchicalLayout.enabled = true;
+          this.constants.physics.hierarchicalRepulsion.enabled = true;
+          this.constants.physics.barnesHut.enabled = false;
+          for (prop in options.physics.hierarchicalRepulsion) {
+            if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
+              this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
+            }
+          }
+        }
+      }
 
-      // TODO: this should be redundant?
-      Hammer(dragLeft, {
-        preventDefault: true
-      }).on('drag', function () {
-            //console.log('drag left')
-          });
+      if (options.smoothCurves !== undefined) {
+        if (typeof options.smoothCurves == 'boolean') {
+          this.constants.smoothCurves.enabled = options.smoothCurves;
+        }
+        else {
+          this.constants.smoothCurves.enabled = true;
+          for (prop in options.smoothCurves) {
+            if (options.smoothCurves.hasOwnProperty(prop)) {
+              this.constants.smoothCurves[prop] = options.smoothCurves[prop];
+            }
+          }
+        }
+      }
 
-      this.dom.box.appendChild(dragLeft);
-      this.dom.dragLeft = dragLeft;
-    }
-    else if (!this.selected && this.dom.dragLeft) {
-      // delete drag area
-      if (this.dom.dragLeft.parentNode) {
-        this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
+      if (options.hierarchicalLayout) {
+        this.constants.hierarchicalLayout.enabled = true;
+        for (prop in options.hierarchicalLayout) {
+          if (options.hierarchicalLayout.hasOwnProperty(prop)) {
+            this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
+          }
+        }
+      }
+      else if (options.hierarchicalLayout !== undefined)  {
+        this.constants.hierarchicalLayout.enabled = false;
       }
-      this.dom.dragLeft = null;
-    }
-  };
 
-  /**
-   * Repaint a drag area on the right side of the range when the range is selected
-   * @protected
-   */
-  ItemRange.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;
+      if (options.clustering) {
+        this.constants.clustering.enabled = true;
+        for (prop in options.clustering) {
+          if (options.clustering.hasOwnProperty(prop)) {
+            this.constants.clustering[prop] = options.clustering[prop];
+          }
+        }
+      }
+      else if (options.clustering !== undefined)  {
+        this.constants.clustering.enabled = false;
+      }
 
-      // TODO: this should be redundant?
-      Hammer(dragRight, {
-        preventDefault: true
-      }).on('drag', function () {
-        //console.log('drag right')
-      });
+      if (options.navigation) {
+        this.constants.navigation.enabled = true;
+        for (prop in options.navigation) {
+          if (options.navigation.hasOwnProperty(prop)) {
+            this.constants.navigation[prop] = options.navigation[prop];
+          }
+        }
+      }
+      else if (options.navigation !== undefined) {
+        this.constants.navigation.enabled = false;
+      }
 
-      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);
+      if (options.keyboard) {
+        this.constants.keyboard.enabled = true;
+        for (prop in options.keyboard) {
+          if (options.keyboard.hasOwnProperty(prop)) {
+            this.constants.keyboard[prop] = options.keyboard[prop];
+          }
+        }
+      }
+      else if (options.keyboard !== undefined)  {
+        this.constants.keyboard.enabled = false;
+      }
+
+      if (options.dataManipulation) {
+        this.constants.dataManipulation.enabled = true;
+        for (prop in options.dataManipulation) {
+          if (options.dataManipulation.hasOwnProperty(prop)) {
+            this.constants.dataManipulation[prop] = options.dataManipulation[prop];
+          }
+        }
+        this.editMode = this.constants.dataManipulation.initiallyVisible;
+      }
+      else if (options.dataManipulation !== undefined)  {
+        this.constants.dataManipulation.enabled = false;
+      }
+
+      // TODO: work out these options and document them
+      if (options.edges) {
+        for (prop in options.edges) {
+          if (options.edges.hasOwnProperty(prop)) {
+            if (typeof options.edges[prop] != "object") {
+              this.constants.edges[prop] = options.edges[prop];
+            }
+          }
+        }
+
+        if (options.edges.color !== undefined) {
+          if (util.isString(options.edges.color)) {
+            this.constants.edges.color = {};
+            this.constants.edges.color.color = options.edges.color;
+            this.constants.edges.color.highlight = options.edges.color;
+            this.constants.edges.color.hover = options.edges.color;
+          }
+          else {
+            if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
+            if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
+            if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
+          }
+        }
+
+        if (!options.edges.fontColor) {
+          if (options.edges.color !== undefined) {
+            if (util.isString(options.edges.color))           {this.constants.edges.fontColor = options.edges.color;}
+            else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.color;}
+          }
+        }
+
+        // Added to support dashed lines
+        // David Jordan
+        // 2012-08-08
+        if (options.edges.dash) {
+          if (options.edges.dash.length !== undefined) {
+            this.constants.edges.dash.length = options.edges.dash.length;
+          }
+          if (options.edges.dash.gap !== undefined) {
+            this.constants.edges.dash.gap = options.edges.dash.gap;
+          }
+          if (options.edges.dash.altLength !== undefined) {
+            this.constants.edges.dash.altLength = options.edges.dash.altLength;
+          }
+        }
+      }
+
+      if (options.nodes) {
+        for (prop in options.nodes) {
+          if (options.nodes.hasOwnProperty(prop)) {
+            this.constants.nodes[prop] = options.nodes[prop];
+          }
+        }
+
+        if (options.nodes.color) {
+          this.constants.nodes.color = util.parseColor(options.nodes.color);
+        }
+
+        /*
+         if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
+         if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
+         */
+      }
+      if (options.groups) {
+        for (var groupname in options.groups) {
+          if (options.groups.hasOwnProperty(groupname)) {
+            var group = options.groups[groupname];
+            this.groups.add(groupname, group);
+          }
+        }
+      }
+
+      if (options.tooltip) {
+        for (prop in options.tooltip) {
+          if (options.tooltip.hasOwnProperty(prop)) {
+            this.constants.tooltip[prop] = options.tooltip[prop];
+          }
+        }
+        if (options.tooltip.color) {
+          this.constants.tooltip.color = util.parseColor(options.tooltip.color);
+        }
       }
-      this.dom.dragRight = null;
     }
-  };
 
-  module.exports = ItemRange;
+
+    // (Re)loading the mixins that can be enabled or disabled in the options.
+    // load the force calculation functions, grouped under the physics system.
+    this._loadPhysicsSystem();
+    // load the navigation system.
+    this._loadNavigationControls();
+    // load the data manipulation system
+    this._loadManipulationSystem();
+    // configure the smooth curves
+    this._configureSmoothCurves();
 
 
-/***/ },
-/* 28 */
-/***/ function(module, exports, __webpack_require__) {
+    // bind keys. If disabled, this will not do anything;
+    this._createKeyBinds();
+    this.setSize(this.width, this.height);
+    this.moving = true;
+    this.start();
 
-  var Hammer = __webpack_require__(3);
+  };
 
   /**
-   * @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
+   * Create the main frame for the Network.
+   * This function is executed once when a Network object is created. The frame
+   * contains a canvas, and this canvas contains all objects like the axis and
+   * nodes.
+   * @private
    */
-  function Item (data, conversion, options) {
-    this.id = null;
-    this.parent = null;
-    this.data = data;
-    this.dom = null;
-    this.conversion = conversion || {};
-    this.options = options || {};
+  Network.prototype._create = function () {
+    // remove all elements from the container element.
+    while (this.containerElement.hasChildNodes()) {
+      this.containerElement.removeChild(this.containerElement.firstChild);
+    }
 
-    this.selected = false;
-    this.displayed = false;
-    this.dirty = true;
+    this.frame = document.createElement('div');
+    this.frame.className = 'network-frame';
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
-    this.top = null;
-    this.left = null;
-    this.width = null;
-    this.height = null;
-  }
+    // create the network canvas (HTML canvas element)
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
+    this.frame.appendChild(this.frame.canvas);
+    if (!this.frame.canvas.getContext) {
+      var noCanvas = document.createElement( 'DIV' );
+      noCanvas.style.color = 'red';
+      noCanvas.style.fontWeight =  'bold' ;
+      noCanvas.style.padding =  '10px';
+      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
+      this.frame.canvas.appendChild(noCanvas);
+    }
 
-  /**
-   * Select current item
-   */
-  Item.prototype.select = function() {
-    this.selected = true;
-    if (this.displayed) this.redraw();
-  };
+    var me = this;
+    this.drag = {};
+    this.pinch = {};
+    this.hammer = Hammer(this.frame.canvas, {
+      prevent_default: true
+    });
+    this.hammer.on('tap',       me._onTap.bind(me) );
+    this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
+    this.hammer.on('hold',      me._onHold.bind(me) );
+    this.hammer.on('pinch',     me._onPinch.bind(me) );
+    this.hammer.on('touch',     me._onTouch.bind(me) );
+    this.hammer.on('dragstart', me._onDragStart.bind(me) );
+    this.hammer.on('drag',      me._onDrag.bind(me) );
+    this.hammer.on('dragend',   me._onDragEnd.bind(me) );
+    this.hammer.on('release',   me._onRelease.bind(me) );
+    this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
+    this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
+    this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
+
+    // add the frame to the container element
+    this.containerElement.appendChild(this.frame);
 
-  /**
-   * Unselect current item
-   */
-  Item.prototype.unselect = function() {
-    this.selected = false;
-    if (this.displayed) this.redraw();
   };
 
+
   /**
-   * Set a parent for the item
-   * @param {ItemSet | Group} parent
+   * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
+   * @private
    */
-  Item.prototype.setParent = function(parent) {
-    if (this.displayed) {
-      this.hide();
-      this.parent = parent;
-      if (this.parent) {
-        this.show();
-      }
-    }
-    else {
-      this.parent = parent;
+  Network.prototype._createKeyBinds = function() {
+    var me = this;
+    this.mousetrap = mousetrap;
+
+    this.mousetrap.reset();
+
+    if (this.constants.keyboard.enabled == true) {
+      this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
+      this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
+      this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
+      this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
+      this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("=",    this._zoomIn.bind(me),    "keydown");
+      this.mousetrap.bind("=",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("-",    this._zoomOut.bind(me),   "keydown");
+      this.mousetrap.bind("-",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("[",    this._zoomIn.bind(me),    "keydown");
+      this.mousetrap.bind("[",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("]",    this._zoomOut.bind(me),   "keydown");
+      this.mousetrap.bind("]",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("pageup",this._zoomIn.bind(me),   "keydown");
+      this.mousetrap.bind("pageup",this._stopZoom.bind(me),   "keyup");
+      this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
+      this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
     }
-  };
 
-  /**
-   * 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;
+    if (this.constants.dataManipulation.enabled == true) {
+      this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
+      this.mousetrap.bind("del",this._deleteSelected.bind(me));
+    }
   };
 
   /**
-   * Show the Item in the DOM (when not already visible)
-   * @return {Boolean} changed
+   * Get the pointer location from a touch location
+   * @param {{pageX: Number, pageY: Number}} touch
+   * @return {{x: Number, y: Number}} pointer
+   * @private
    */
-  Item.prototype.show = function() {
-    return false;
+  Network.prototype._getPointer = function (touch) {
+    return {
+      x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
+      y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
+    };
   };
 
   /**
-   * Hide the Item from the DOM (when visible)
-   * @return {Boolean} changed
+   * On start of a touch gesture, store the pointer
+   * @param event
+   * @private
    */
-  Item.prototype.hide = function() {
-    return false;
-  };
+  Network.prototype._onTouch = function (event) {
+    this.drag.pointer = this._getPointer(event.gesture.center);
+    this.drag.pinched = false;
+    this.pinch.scale = this._getScale();
 
-  /**
-   * Repaint the item
-   */
-  Item.prototype.redraw = function() {
-    // should be implemented by the item
+    this._handleTouch(this.drag.pointer);
   };
 
   /**
-   * Reposition the Item horizontally
+   * handle drag start event
+   * @private
    */
-  Item.prototype.repositionX = function() {
-    // should be implemented by the item
+  Network.prototype._onDragStart = function () {
+    this._handleDragStart();
   };
 
-  /**
-   * Reposition the Item vertically
-   */
-  Item.prototype.repositionY = function() {
-    // should be implemented by the item
-  };
 
   /**
-   * Repaint a delete button on the top right of the item when the item is selected
-   * @param {HTMLElement} anchor
-   * @protected
+   * This function is called by _onDragStart.
+   * It is separated out because we can then overload it for the datamanipulation system.
+   *
+   * @private
    */
-  Item.prototype._repaintDeleteButton = function (anchor) {
-    if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
-      // create and show button
-      var me = this;
-
-      var deleteButton = document.createElement('div');
-      deleteButton.className = 'delete';
-      deleteButton.title = 'Delete this item';
+  Network.prototype._handleDragStart = function() {
+    var drag = this.drag;
+    var node = this._getNodeAt(drag.pointer);
+    // note: drag.pointer is set in _onTouch to get the initial touch location
 
-      Hammer(deleteButton, {
-        preventDefault: true
-      }).on('tap', function (event) {
-        me.parent.removeFromDataSet(me);
-        event.stopPropagation();
-      });
+    drag.dragging = true;
+    drag.selection = [];
+    drag.translation = this._getTranslation();
+    drag.nodeId = null;
 
-      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);
+    if (node != null) {
+      drag.nodeId = node.id;
+      // select the clicked node if not yet selected
+      if (!node.isSelected()) {
+        this._selectObject(node,false);
       }
-      this.dom.deleteButton = null;
-    }
-  };
-
-  module.exports = Item;
 
+      // create an array with the selected nodes and their original location and status
+      for (var objectId in this.selectionObj.nodes) {
+        if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
+          var object = this.selectionObj.nodes[objectId];
+          var s = {
+            id: object.id,
+            node: object,
 
-/***/ },
-/* 29 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Item = __webpack_require__(28);
+            // store original x, y, xFixed and yFixed, make the node temporarily Fixed
+            x: object.x,
+            y: object.y,
+            xFixed: object.xFixed,
+            yFixed: object.yFixed
+          };
 
-  /**
-   * @constructor ItemBox
-   * @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 ItemBox (data, conversion, options) {
-    this.props = {
-      dot: {
-        width: 0,
-        height: 0
-      },
-      line: {
-        width: 0,
-        height: 0
-      }
-    };
+          object.xFixed = true;
+          object.yFixed = true;
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
+          drag.selection.push(s);
+        }
       }
     }
+  };
 
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemBox.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
+   * handle drag event
+   * @private
    */
-  ItemBox.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);
+  Network.prototype._onDrag = function (event) {
+    this._handleOnDrag(event)
   };
 
+
   /**
-   * Repaint the item
+   * This function is called by _onDrag.
+   * It is separated out because we can then overload it for the datamanipulation system.
+   *
+   * @private
    */
-  ItemBox.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-      // 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;
+  Network.prototype._handleOnDrag = function(event) {
+    if (this.drag.pinched) {
+      return;
     }
 
-    // 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 time axis: 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 time axis: 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 time axis: parent has no axis container element');
-      axis.appendChild(dom.dot);
-    }
-    this.displayed = true;
+    var pointer = this._getPointer(event.gesture.center);
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
-      }
+    var me = this,
+      drag = this.drag,
+      selection = drag.selection;
+    if (selection && selection.length && this.constants.dragNodes == true) {
+      // calculate delta's and new location
+      var deltaX = pointer.x - drag.pointer.x,
+        deltaY = pointer.y - drag.pointer.y;
 
-      this.dirty = true;
-    }
+      // update position of all selected nodes
+      selection.forEach(function (s) {
+        var node = s.node;
 
-    // update title
-    if (this.data.title != this.title) {
-      dom.box.title = this.data.title;
-      this.title = this.data.title;
-    }
+        if (!s.xFixed) {
+          node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
+        }
 
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = 'item box' + className;
-      dom.line.className = 'item line' + className;
-      dom.dot.className  = 'item dot' + className;
+        if (!s.yFixed) {
+          node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
+        }
+      });
 
-      this.dirty = true;
+      // start _animationStep if not yet running
+      if (!this.moving) {
+        this.moving = true;
+        this.start();
+      }
     }
+    else {
+      if (this.constants.dragNetwork == true) {
+        // move the network
+        var diffX = pointer.x - this.drag.pointer.x;
+        var diffY = pointer.y - this.drag.pointer.y;
 
-    // recalculate size
-    if (this.dirty) {
-      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;
+        this._setTranslation(
+          this.drag.translation.x + diffX,
+          this.drag.translation.y + diffY
+        );
+        this._redraw();
+  //      this.moving = true;
+  //      this.start();
+      }
     }
-
-    this._repaintDeleteButton(dom.box);
   };
 
   /**
-   * Show the item in the DOM (when not already displayed). The items DOM will
-   * be created when needed.
+   * handle drag start event
+   * @private
    */
-  ItemBox.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  Network.prototype._onDragEnd = function () {
+    this.drag.dragging = false;
+    var selection = this.drag.selection;
+    if (selection) {
+      selection.forEach(function (s) {
+        // restore original xFixed and yFixed
+        s.node.xFixed = s.xFixed;
+        s.node.yFixed = s.yFixed;
+      });
     }
+    this._redraw();
   };
 
   /**
-   * Hide the item from the DOM (when visible)
+   * handle tap/click event: select/unselect a node
+   * @private
    */
-  ItemBox.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.top = null;
-      this.left = null;
+  Network.prototype._onTap = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this.pointerPosition = pointer;
+    this._handleTap(pointer);
 
-      this.displayed = false;
-    }
   };
 
+
   /**
-   * Reposition the item horizontally
-   * @Override
+   * handle doubletap event
+   * @private
    */
-  ItemBox.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start),
-        align = this.options.align,
-        left,
-        box = this.dom.box,
-        line = this.dom.line,
-        dot = this.dom.dot;
-
-    // calculate left position of the box
-    if (align == 'right') {
-      this.left = start - this.width;
-    }
-    else if (align == 'left') {
-      this.left = start;
-    }
-    else {
-      // default or 'center'
-      this.left = start - this.width / 2;
-    }
-
-    // reposition box
-    box.style.left = this.left + 'px';
+  Network.prototype._onDoubleTap = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this._handleDoubleTap(pointer);
+  };
 
-    // reposition line
-    line.style.left = (start - this.props.line.width / 2) + 'px';
 
-    // reposition dot
-    dot.style.left = (start - this.props.dot.width / 2) + 'px';
+  /**
+   * handle long tap event: multi select nodes
+   * @private
+   */
+  Network.prototype._onHold = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this.pointerPosition = pointer;
+    this._handleOnHold(pointer);
   };
 
   /**
-   * Reposition the item vertically
-   * @Override
+   * handle the release of the screen
+   *
+   * @private
    */
-  ItemBox.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box,
-        line = this.dom.line,
-        dot = this.dom.dot;
-
-    if (orientation == 'top') {
-      box.style.top     = (this.top || 0) + 'px';
-
-      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;
-
-      box.style.top     = (this.parent.height - this.top - this.height || 0) + 'px';
-      line.style.top    = (itemSetHeight - lineHeight) + 'px';
-      line.style.bottom = '0';
-    }
-
-    dot.style.top = (-this.props.dot.height / 2) + 'px';
+  Network.prototype._onRelease = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this._handleOnRelease(pointer);
   };
 
-  module.exports = ItemBox;
-
-
-/***/ },
-/* 30 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Item = __webpack_require__(28);
-
   /**
-   * @constructor ItemPoint
-   * @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
+   * Handle pinch event
+   * @param event
+   * @private
    */
-  function ItemPoint (data, conversion, options) {
-    this.props = {
-      dot: {
-        top: 0,
-        width: 0,
-        height: 0
-      },
-      content: {
-        height: 0,
-        marginLeft: 0
-      }
-    };
+  Network.prototype._onPinch = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
-      }
+    this.drag.pinched = true;
+    if (!('scale' in this.pinch)) {
+      this.pinch.scale = 1;
     }
-
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemPoint.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
-   */
-  ItemPoint.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);
+
+    // TODO: enabled moving while pinching?
+    var scale = this.pinch.scale * event.gesture.scale;
+    this._zoom(scale, pointer)
   };
 
   /**
-   * Repaint the item
+   * Zoom the network in or out
+   * @param {Number} scale a number around 1, and between 0.01 and 10
+   * @param {{x: Number, y: Number}} pointer    Position on screen
+   * @return {Number} appliedScale    scale is limited within the boundaries
+   * @private
    */
-  ItemPoint.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);
+  Network.prototype._zoom = function(scale, pointer) {
+    if (this.constants.zoomable == true) {
+      var scaleOld = this._getScale();
+      if (scale < 0.00001) {
+        scale = 0.00001;
+      }
+      if (scale > 10) {
+        scale = 10;
+      }
+    // + this.frame.canvas.clientHeight / 2
+      var translation = this._getTranslation();
 
-      // dot at start
-      dom.dot = document.createElement('div');
-      dom.point.appendChild(dom.dot);
+      var scaleFrac = scale / scaleOld;
+      var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
+      var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
 
-      // attach this item as attribute
-      dom.point['timeline-item'] = this;
-    }
+      this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
+                         "y" : this._YconvertDOMtoCanvas(pointer.y)};
 
-    // 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 time axis: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.point);
-    }
-    this.displayed = true;
+      this._setScale(scale);
+      this._setTranslation(tx, ty);
+      this.updateClustersDefault();
+      this._redraw();
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
+      if (scaleOld < scale) {
+        this.emit("zoom", {direction:"+"});
       }
       else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        this.emit("zoom", {direction:"-"});
       }
 
-      this.dirty = true;
-    }
-
-    // update title
-    if (this.data.title != this.title) {
-      dom.point.title = this.data.title;
-      this.title = this.data.title;
+      return scale;
     }
+  };
 
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.point.className  = 'item point' + className;
-      dom.dot.className  = 'item dot' + className;
 
-      this.dirty = true;
+  /**
+   * Event handler for mouse wheel event, used to zoom the timeline
+   * See http://adomas.org/javascript-mouse-wheel/
+   *     https://github.com/EightMedia/hammer.js/issues/256
+   * @param {MouseEvent}  event
+   * @private
+   */
+  Network.prototype._onMouseWheel = function(event) {
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail/3;
     }
 
-    // recalculate size
-    if (this.dirty) {
-      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;
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
 
-      // resize contents
-      dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
-      //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
+      // calculate the new scale
+      var scale = this._getScale();
+      var zoom = delta / 10;
+      if (delta < 0) {
+        zoom = zoom / (1 - zoom);
+      }
+      scale *= (1 + zoom);
 
-      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
-      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+      // calculate the pointer location
+      var gesture = util.fakeGesture(this, event);
+      var pointer = this._getPointer(gesture.center);
 
-      this.dirty = false;
+      // apply the new scale
+      this._zoom(scale, pointer);
     }
 
-    this._repaintDeleteButton(dom.point);
+    // Prevent default actions caused by mouse wheel.
+    event.preventDefault();
   };
 
+
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Mouse move handler for checking whether the title moves over a node with a title.
+   * @param  {Event} event
+   * @private
    */
-  ItemPoint.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  Network.prototype._onMouseMoveTitle = function (event) {
+    var gesture = util.fakeGesture(this, event);
+    var pointer = this._getPointer(gesture.center);
+
+    // check if the previously selected node is still selected
+    if (this.popupObj) {
+      this._checkHidePopup(pointer);
     }
-  };
 
-  /**
-   * Hide the item from the DOM (when visible)
-   */
-  ItemPoint.prototype.hide = function() {
-    if (this.displayed) {
-      if (this.dom.point.parentNode) {
-        this.dom.point.parentNode.removeChild(this.dom.point);
+    // start a timeout that will check if the mouse is positioned above
+    // an element
+    var me = this;
+    var checkShow = function() {
+      me._checkShowPopup(pointer);
+    };
+    if (this.popupTimer) {
+      clearInterval(this.popupTimer); // stop any running calculationTimer
+    }
+    if (!this.drag.dragging) {
+      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
+    }
+
+
+    /**
+     * Adding hover highlights
+     */
+    if (this.constants.hover == true) {
+      // removing all hover highlights
+      for (var edgeId in this.hoverObj.edges) {
+        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
+          this.hoverObj.edges[edgeId].hover = false;
+          delete this.hoverObj.edges[edgeId];
+        }
       }
 
-      this.top = null;
-      this.left = null;
+      // adding hover highlights
+      var obj = this._getNodeAt(pointer);
+      if (obj == null) {
+        obj = this._getEdgeAt(pointer);
+      }
+      if (obj != null) {
+        this._hoverObject(obj);
+      }
 
-      this.displayed = false;
+      // removing all node hover highlights except for the selected one.
+      for (var nodeId in this.hoverObj.nodes) {
+        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+            this._blurObject(this.hoverObj.nodes[nodeId]);
+            delete this.hoverObj.nodes[nodeId];
+          }
+        }
+      }
+      this.redraw();
     }
   };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Check if there is an element on the given position in the network
+   * (a node or edge). If so, and if this element has a title,
+   * show a popup window with its title.
+   *
+   * @param {{x:Number, y:Number}} pointer
+   * @private
    */
-  ItemPoint.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start);
+  Network.prototype._checkShowPopup = function (pointer) {
+    var obj = {
+      left:   this._XconvertDOMtoCanvas(pointer.x),
+      top:    this._YconvertDOMtoCanvas(pointer.y),
+      right:  this._XconvertDOMtoCanvas(pointer.x),
+      bottom: this._YconvertDOMtoCanvas(pointer.y)
+    };
 
-    this.left = start - this.props.dot.width;
+    var id;
+    var lastPopupNode = this.popupObj;
 
-    // reposition point
-    this.dom.point.style.left = this.left + 'px';
-  };
+    if (this.popupObj == undefined) {
+      // search the nodes for overlap, select the top one in case of multiple nodes
+      var nodes = this.nodes;
+      for (id in nodes) {
+        if (nodes.hasOwnProperty(id)) {
+          var node = nodes[id];
+          if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
+            this.popupObj = node;
+            break;
+          }
+        }
+      }
+    }
 
-  /**
-   * Reposition the item vertically
-   * @Override
-   */
-  ItemPoint.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        point = this.dom.point;
+    if (this.popupObj === undefined) {
+      // search the edges for overlap
+      var edges = this.edges;
+      for (id in edges) {
+        if (edges.hasOwnProperty(id)) {
+          var edge = edges[id];
+          if (edge.connected && (edge.getTitle() !== undefined) &&
+              edge.isOverlappingWith(obj)) {
+            this.popupObj = edge;
+            break;
+          }
+        }
+      }
+    }
 
-    if (orientation == 'top') {
-      point.style.top = this.top + 'px';
+    if (this.popupObj) {
+      // show popup message window
+      if (this.popupObj != lastPopupNode) {
+        var me = this;
+        if (!me.popup) {
+          me.popup = new Popup(me.frame, me.constants.tooltip);
+        }
+
+        // adjust a small offset such that the mouse cursor is located in the
+        // bottom left location of the popup, and you can easily move over the
+        // popup area
+        me.popup.setPosition(pointer.x - 3, pointer.y - 3);
+        me.popup.setText(me.popupObj.getTitle());
+        me.popup.show();
+      }
     }
     else {
-      point.style.top = (this.parent.height - this.top - this.height) + 'px';
+      if (this.popup) {
+        this.popup.hide();
+      }
     }
   };
 
-  module.exports = ItemPoint;
-
 
-/***/ },
-/* 31 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Check if the popup must be hided, which is the case when the mouse is no
+   * longer hovering on the object
+   * @param {{x:Number, y:Number}} pointer
+   * @private
+   */
+  Network.prototype._checkHidePopup = function (pointer) {
+    if (!this.popupObj || !this._getNodeAt(pointer) ) {
+      this.popupObj = undefined;
+      if (this.popup) {
+        this.popup.hide();
+      }
+    }
+  };
 
-  var Emitter = __webpack_require__(12);
-  var Hammer = __webpack_require__(3);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(9);
-  var DataView = __webpack_require__(10);
-  var Range = __webpack_require__(18);
-  var TimeAxis = __webpack_require__(20);
-  var CurrentTime = __webpack_require__(22);
-  var CustomTime = __webpack_require__(23);
-  var LineGraph = __webpack_require__(32);
 
   /**
-   * Create a timeline visualization
-   * @param {HTMLElement} container
-   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
-   * @param {Object} [options]  See Graph2d.setOptions for the available options.
-   * @constructor
+   * Set a new size for the network
+   * @param {string} width   Width in pixels or percentage (for example '800px'
+   *                         or '50%')
+   * @param {string} height  Height in pixels or percentage  (for example '400px'
+   *                         or '30%')
    */
-  function Graph2d (container, items, options, groups) {
-    var me = this;
-    this.defaultOptions = {
-      start: null,
-      end:   null,
+  Network.prototype.setSize = function(width, height) {
+    this.frame.style.width = width;
+    this.frame.style.height = height;
 
-      autoResize: true,
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
-      orientation: 'bottom',
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
-    };
-    this.options = util.deepExtend({}, this.defaultOptions);
+    this.frame.canvas.width = this.frame.canvas.clientWidth;
+    this.frame.canvas.height = this.frame.canvas.clientHeight;
 
-    // Create the DOM, props, and emitter
-    this._create(container);
+    if (this.manipulationDiv !== undefined) {
+      this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
+    }
+    if (this.navigationDivs !== undefined) {
+      if (this.navigationDivs['wrapper'] !== undefined) {
+        this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+        this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+      }
+    }
 
-    // all components listed here will be repainted automatically
-    this.components = [];
+    this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
+  };
 
-    this.body = {
-      dom: this.dom,
-      domProps: this.props,
-      emitter: {
-        on: this.on.bind(this),
-        off: this.off.bind(this),
-        emit: this.emit.bind(this)
-      },
-      util: {
-        snap: null, // will be specified after TimeAxis is created
-        toScreen: me._toScreen.bind(me),
-        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
-        toTime: me._toTime.bind(me),
-        toGlobalTime : me._toGlobalTime.bind(me)
-      }
-    };
+  /**
+   * Set a data set with nodes for the network
+   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
+   * @private
+   */
+  Network.prototype._setNodes = function(nodes) {
+    var oldNodesData = this.nodesData;
 
-    // range
-    this.range = new Range(this.body);
-    this.components.push(this.range);
-    this.body.range = this.range;
+    if (nodes instanceof DataSet || nodes instanceof DataView) {
+      this.nodesData = nodes;
+    }
+    else if (nodes instanceof Array) {
+      this.nodesData = new DataSet();
+      this.nodesData.add(nodes);
+    }
+    else if (!nodes) {
+      this.nodesData = new DataSet();
+    }
+    else {
+      throw new TypeError('Array or DataSet expected');
+    }
 
-    // time axis
-    this.timeAxis = new TimeAxis(this.body);
-    this.components.push(this.timeAxis);
-    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+    if (oldNodesData) {
+      // unsubscribe from old dataset
+      util.forEach(this.nodesListeners, function (callback, event) {
+        oldNodesData.off(event, callback);
+      });
+    }
 
-    // current time bar
-    this.currentTime = new CurrentTime(this.body);
-    this.components.push(this.currentTime);
+    // remove drawn nodes
+    this.nodes = {};
 
-    // custom time bar
-    // Note: time bar will be attached in this.setOptions when selected
-    this.customTime = new CustomTime(this.body);
-    this.components.push(this.customTime);
+    if (this.nodesData) {
+      // subscribe to new dataset
+      var me = this;
+      util.forEach(this.nodesListeners, function (callback, event) {
+        me.nodesData.on(event, callback);
+      });
 
-    // item set
-    this.linegraph = new LineGraph(this.body);
-    this.components.push(this.linegraph);
+      // draw all new nodes
+      var ids = this.nodesData.getIds();
+      this._addNodes(ids);
+    }
+    this._updateSelection();
+  };
 
-    this.itemsData = null;      // DataSet
-    this.groupsData = null;     // DataSet
+  /**
+   * Add nodes
+   * @param {Number[] | String[]} ids
+   * @private
+   */
+  Network.prototype._addNodes = function(ids) {
+    var id;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      id = ids[i];
+      var data = this.nodesData.get(id);
+      var node = new Node(data, this.images, this.groups, this.constants);
+      this.nodes[id] = node; // note: this may replace an existing node
 
-    // apply options
-    if (options) {
-      this.setOptions(options);
+      if ((node.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
+        var radius = 10 * 0.1*ids.length;
+        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.moving = true;
+    }
+    this._updateNodeIndexList();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateCalculationNodes();
+    this._reconnectEdges();
+    this._updateValueRange(this.nodes);
+    this.updateLabels();
+  };
 
-    // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
-    if (groups) {
-      this.setGroups(groups);
+  /**
+   * Update existing nodes, or create them when not yet existing
+   * @param {Number[] | String[]} ids
+   * @private
+   */
+  Network.prototype._updateNodes = function(ids) {
+    var nodes = this.nodes,
+        nodesData = this.nodesData;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      var node = nodes[id];
+      var data = nodesData.get(id);
+      if (node) {
+        // update node
+        node.setProperties(data, this.constants);
+      }
+      else {
+        // create node
+        node = new Node(properties, this.images, this.groups, this.constants);
+        nodes[id] = node;
+      }
+    }
+    this.moving = true;
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateNodeIndexList();
+    this._reconnectEdges();
+    this._updateValueRange(nodes);
+  };
 
-    // create itemset
-    if (items) {
-      this.setItems(items);
+  /**
+   * Remove existing nodes. If nodes do not exist, the method will just ignore it.
+   * @param {Number[] | String[]} ids
+   * @private
+   */
+  Network.prototype._removeNodes = function(ids) {
+    var nodes = this.nodes;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      delete nodes[id];
     }
-    else {
-      this.redraw();
+    this._updateNodeIndexList();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
-  }
-
-  // turn Graph2d into an event emitter
-  Emitter(Graph2d.prototype);
+    this._updateCalculationNodes();
+    this._reconnectEdges();
+    this._updateSelection();
+    this._updateValueRange(nodes);
+  };
 
   /**
-   * Create the main DOM for the Graph2d: a root panel containing left, right,
-   * top, bottom, content, and background panel.
-   * @param {Element} container  The container element where the Graph2d will
-   *                             be attached.
+   * Load edges by reading the data table
+   * @param {Array | DataSet | DataView} edges    The data containing the edges.
+   * @private
    * @private
    */
-  Graph2d.prototype._create = function (container) {
-    this.dom = {};
-
-    this.dom.root                 = document.createElement('div');
-    this.dom.background           = document.createElement('div');
-    this.dom.backgroundVertical   = document.createElement('div');
-    this.dom.backgroundHorizontalContainer = document.createElement('div');
-    this.dom.centerContainer      = document.createElement('div');
-    this.dom.leftContainer        = document.createElement('div');
-    this.dom.rightContainer       = document.createElement('div');
-    this.dom.backgroundHorizontal = document.createElement('div');
-    this.dom.center               = document.createElement('div');
-    this.dom.left                 = document.createElement('div');
-    this.dom.right                = document.createElement('div');
-    this.dom.top                  = document.createElement('div');
-    this.dom.bottom               = document.createElement('div');
-    this.dom.shadowTop            = document.createElement('div');
-    this.dom.shadowBottom         = document.createElement('div');
-    this.dom.shadowTopLeft        = document.createElement('div');
-    this.dom.shadowBottomLeft     = document.createElement('div');
-    this.dom.shadowTopRight       = document.createElement('div');
-    this.dom.shadowBottomRight    = document.createElement('div');
-
-    this.dom.background.className           = 'vispanel background';
-    this.dom.backgroundVertical.className   = 'vispanel background vertical';
-    this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
-    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-    this.dom.centerContainer.className      = 'vispanel center';
-    this.dom.leftContainer.className        = 'vispanel left';
-    this.dom.rightContainer.className       = 'vispanel right';
-    this.dom.top.className                  = 'vispanel top';
-    this.dom.bottom.className               = 'vispanel bottom';
-    this.dom.left.className                 = 'content';
-    this.dom.center.className               = 'content';
-    this.dom.right.className                = 'content';
-    this.dom.shadowTop.className            = 'shadow top';
-    this.dom.shadowBottom.className         = 'shadow bottom';
-    this.dom.shadowTopLeft.className        = 'shadow top';
-    this.dom.shadowBottomLeft.className     = 'shadow bottom';
-    this.dom.shadowTopRight.className       = 'shadow top';
-    this.dom.shadowBottomRight.className    = 'shadow bottom';
-
-    this.dom.root.appendChild(this.dom.background);
-    this.dom.root.appendChild(this.dom.backgroundVertical);
-    this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
-    this.dom.root.appendChild(this.dom.centerContainer);
-    this.dom.root.appendChild(this.dom.leftContainer);
-    this.dom.root.appendChild(this.dom.rightContainer);
-    this.dom.root.appendChild(this.dom.top);
-    this.dom.root.appendChild(this.dom.bottom);
-
-    this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
-    this.dom.centerContainer.appendChild(this.dom.center);
-    this.dom.leftContainer.appendChild(this.dom.left);
-    this.dom.rightContainer.appendChild(this.dom.right);
+  Network.prototype._setEdges = function(edges) {
+    var oldEdgesData = this.edgesData;
 
-    this.dom.centerContainer.appendChild(this.dom.shadowTop);
-    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
-    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
-    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
-    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
-    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+    if (edges instanceof DataSet || edges instanceof DataView) {
+      this.edgesData = edges;
+    }
+    else if (edges instanceof Array) {
+      this.edgesData = new DataSet();
+      this.edgesData.add(edges);
+    }
+    else if (!edges) {
+      this.edgesData = new DataSet();
+    }
+    else {
+      throw new TypeError('Array or DataSet expected');
+    }
 
-    this.on('rangechange', this.redraw.bind(this));
-    this.on('change', this.redraw.bind(this));
-    this.on('touch', this._onTouch.bind(this));
-    this.on('pinch', this._onPinch.bind(this));
-    this.on('dragstart', this._onDragStart.bind(this));
-    this.on('drag', this._onDrag.bind(this));
+    if (oldEdgesData) {
+      // unsubscribe from old dataset
+      util.forEach(this.edgesListeners, function (callback, event) {
+        oldEdgesData.off(event, callback);
+      });
+    }
 
-    // create event listeners for all interesting events, these events will be
-    // emitted via emitter
-    this.hammer = Hammer(this.dom.root, {
-      prevent_default: true
-    });
-    this.listeners = {};
+    // remove drawn edges
+    this.edges = {};
 
-    var me = this;
-    var events = [
-      'touch', 'pinch',
-      'tap', 'doubletap', 'hold',
-      'dragstart', 'drag', 'dragend',
-      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
-    ];
-    events.forEach(function (event) {
-      var listener = function () {
-        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-        me.emit.apply(me, args);
-      };
-      me.hammer.on(event, listener);
-      me.listeners[event] = listener;
-    });
+    if (this.edgesData) {
+      // subscribe to new dataset
+      var me = this;
+      util.forEach(this.edgesListeners, function (callback, event) {
+        me.edgesData.on(event, callback);
+      });
 
-    // size properties of each of the panels
-    this.props = {
-      root: {},
-      background: {},
-      centerContainer: {},
-      leftContainer: {},
-      rightContainer: {},
-      center: {},
-      left: {},
-      right: {},
-      top: {},
-      bottom: {},
-      border: {},
-      scrollTop: 0,
-      scrollTopMin: 0
-    };
-    this.touch = {}; // store state information needed for touch events
+      // draw all new nodes
+      var ids = this.edgesData.getIds();
+      this._addEdges(ids);
+    }
 
-    // attach the root panel to the provided container
-    if (!container) throw new Error('No container provided');
-    container.appendChild(this.dom.root);
+    this._reconnectEdges();
   };
 
   /**
-   * Destroy the Graph2d, clean up all DOM elements and event listeners.
+   * Add edges
+   * @param {Number[] | String[]} ids
+   * @private
    */
-  Graph2d.prototype.destroy = function () {
-    // unbind datasets
-    this.clear();
+  Network.prototype._addEdges = function (ids) {
+    var edges = this.edges,
+        edgesData = this.edgesData;
 
-    // remove all event listeners
-    this.off();
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
 
-    // stop checking for changed size
-    this._stopAutoResize();
+      var oldEdge = edges[id];
+      if (oldEdge) {
+        oldEdge.disconnect();
+      }
 
-    // remove from DOM
-    if (this.dom.root.parentNode) {
-      this.dom.root.parentNode.removeChild(this.dom.root);
+      var data = edgesData.get(id, {"showInternalIds" : true});
+      edges[id] = new Edge(data, this, this.constants);
     }
-    this.dom = null;
 
-    // cleanup hammer touch events
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
-      }
+    this.moving = true;
+    this._updateValueRange(edges);
+    this._createBezierNodes();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
-    this.listeners = null;
-    this.hammer = null;
-
-    // give all components the opportunity to cleanup
-    this.components.forEach(function (component) {
-      component.destroy();
-    });
-
-    this.body = null;
+    this._updateCalculationNodes();
   };
 
   /**
-   * Set options. Options will be passed to all components loaded in the Graph2d.
-   * @param {Object} [options]
-   *                           {String} orientation
-   *                              Vertical orientation for the Graph2d,
-   *                              can be 'bottom' (default) or 'top'.
-   *                           {String | Number} width
-   *                              Width for the timeline, a number in pixels or
-   *                              a css string like '1000px' or '75%'. '100%' by default.
-   *                           {String | Number} height
-   *                              Fixed height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'. If undefined,
-   *                              The Graph2d will automatically size such that
-   *                              its contents fit.
-   *                           {String | Number} minHeight
-   *                              Minimum height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {String | Number} maxHeight
-   *                              Maximum height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {Number | Date | String} start
-   *                              Start date for the visible window
-   *                           {Number | Date | String} end
-   *                              End date for the visible window
+   * Update existing edges, or create them when not yet existing
+   * @param {Number[] | String[]} ids
+   * @private
    */
-  Graph2d.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the known options
-      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
-      util.selectiveExtend(fields, this.options, options);
+  Network.prototype._updateEdges = function (ids) {
+    var edges = this.edges,
+        edgesData = this.edgesData;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
 
-      // enable/disable autoResize
-      this._initAutoResize();
+      var data = edgesData.get(id);
+      var edge = edges[id];
+      if (edge) {
+        // update edge
+        edge.disconnect();
+        edge.setProperties(data, this.constants);
+        edge.connect();
+      }
+      else {
+        // create edge
+        edge = new Edge(data, this, this.constants);
+        this.edges[id] = edge;
+      }
     }
 
-    // propagate options to all components
-    this.components.forEach(function (component) {
-      component.setOptions(options);
-    });
-
-    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
-    if (options && options.order) {
-      throw new Error('Option order is deprecated. There is no replacement for this feature.');
+    this._createBezierNodes();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
-
-    // redraw everything
-    this.redraw();
+    this.moving = true;
+    this._updateValueRange(edges);
   };
 
   /**
-   * Set a custom time bar
-   * @param {Date} time
+   * Remove existing edges. Non existing ids will be ignored
+   * @param {Number[] | String[]} ids
+   * @private
    */
-  Graph2d.prototype.setCustomTime = function (time) {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+  Network.prototype._removeEdges = function (ids) {
+    var edges = this.edges;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      var edge = edges[id];
+      if (edge) {
+        if (edge.via != null) {
+          delete this.sectors['support']['nodes'][edge.via.id];
+        }
+        edge.disconnect();
+        delete edges[id];
+      }
     }
 
-    this.customTime.setCustomTime(time);
+    this.moving = true;
+    this._updateValueRange(edges);
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
+    }
+    this._updateCalculationNodes();
   };
 
   /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
+   * Reconnect all edges
+   * @private
    */
-  Graph2d.prototype.getCustomTime = function() {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+  Network.prototype._reconnectEdges = function() {
+    var id,
+        nodes = this.nodes,
+        edges = this.edges;
+    for (id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        nodes[id].edges = [];
+      }
     }
 
-    return this.customTime.getCustomTime();
+    for (id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        var edge = edges[id];
+        edge.from = null;
+        edge.to = null;
+        edge.connect();
+      }
+    }
   };
 
   /**
-   * Set items
-   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
+   * Update the values of all object in the given array according to the current
+   * value range of the objects in the array.
+   * @param {Object} obj    An object containing a set of Edges or Nodes
+   *                        The objects must have a method getValue() and
+   *                        setValueRange(min, max).
+   * @private
    */
-  Graph2d.prototype.setItems = function(items) {
-    var initialLoad = (this.itemsData == null);
+  Network.prototype._updateValueRange = function(obj) {
+    var id;
 
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!items) {
-      newDataSet = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      newDataSet = items;
+    // determine the range of the objects
+    var valueMin = undefined;
+    var valueMax = undefined;
+    for (id in obj) {
+      if (obj.hasOwnProperty(id)) {
+        var value = obj[id].getValue();
+        if (value !== undefined) {
+          valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
+          valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
+        }
+      }
     }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(items, {
-        type: {
-          start: 'Date',
-          end: 'Date'
+
+    // adjust the range of all objects
+    if (valueMin !== undefined && valueMax !== undefined) {
+      for (id in obj) {
+        if (obj.hasOwnProperty(id)) {
+          obj[id].setValueRange(valueMin, valueMax);
         }
-      });
+      }
     }
+  };
 
-    // set items
-    this.itemsData = newDataSet;
-    this.linegraph && this.linegraph.setItems(newDataSet);
+  /**
+   * Redraw the network with the current data
+   * chart will be resized too.
+   */
+  Network.prototype.redraw = function() {
+    this.setSize(this.width, this.height);
+    this._redraw();
+  };
 
-    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
-      this.fit();
+  /**
+   * Redraw the network with the current data
+   * @private
+   */
+  Network.prototype._redraw = function() {
+    var ctx = this.frame.canvas.getContext('2d');
+    // clear the canvas
+    var w = this.frame.canvas.width;
+    var h = this.frame.canvas.height;
+    ctx.clearRect(0, 0, w, h);
 
-      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
-      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+    // set scaling and translation
+    ctx.save();
+    ctx.translate(this.translation.x, this.translation.y);
+    ctx.scale(this.scale, this.scale);
 
-      this.setWindow(start, end);
+    this.canvasTopLeft = {
+      "x": this._XconvertDOMtoCanvas(0),
+      "y": this._YconvertDOMtoCanvas(0)
+    };
+    this.canvasBottomRight = {
+      "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
+      "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
+    };
+
+
+    this._doInAllSectors("_drawAllSectorNodes",ctx);
+    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
+      this._doInAllSectors("_drawEdges",ctx);
+    }
+
+    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
+      this._doInAllSectors("_drawNodes",ctx,false);
+    }
+
+    if (this.controlNodesActive == true) {
+      this._doInAllSectors("_drawControlNodes",ctx);
     }
+
+  //  this._doInSupportSector("_drawNodes",ctx,true);
+  //  this._drawTree(ctx,"#F00F0F");
+
+    // restore original scaling and translation
+    ctx.restore();
   };
 
   /**
-   * Set groups
-   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+   * Set the translation of the network
+   * @param {Number} offsetX    Horizontal offset
+   * @param {Number} offsetY    Vertical offset
+   * @private
    */
-  Graph2d.prototype.setGroups = function(groups) {
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!groups) {
-      newDataSet = null;
+  Network.prototype._setTranslation = function(offsetX, offsetY) {
+    if (this.translation === undefined) {
+      this.translation = {
+        x: 0,
+        y: 0
+      };
     }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      newDataSet = groups;
+
+    if (offsetX !== undefined) {
+      this.translation.x = offsetX;
     }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(groups);
+    if (offsetY !== undefined) {
+      this.translation.y = offsetY;
     }
 
-    this.groupsData = newDataSet;
-    this.linegraph.setGroups(newDataSet);
+    this.emit('viewChanged');
   };
 
   /**
-   * Clear the Graph2d. By Default, items, groups and options are cleared.
-   * Example usage:
-   *
-   *     timeline.clear();                // clear items, groups, and options
-   *     timeline.clear({options: true}); // clear options only
-   *
-   * @param {Object} [what]      Optionally specify what to clear. By default:
-   *                             {items: true, groups: true, options: true}
+   * Get the translation of the network
+   * @return {Object} translation    An object with parameters x and y, both a number
+   * @private
    */
-  Graph2d.prototype.clear = function(what) {
-    // clear items
-    if (!what || what.items) {
-      this.setItems(null);
-    }
+  Network.prototype._getTranslation = function() {
+    return {
+      x: this.translation.x,
+      y: this.translation.y
+    };
+  };
 
-    // clear groups
-    if (!what || what.groups) {
-      this.setGroups(null);
-    }
+  /**
+   * Scale the network
+   * @param {Number} scale   Scaling factor 1.0 is unscaled
+   * @private
+   */
+  Network.prototype._setScale = function(scale) {
+    this.scale = scale;
+  };
+
+  /**
+   * Get the current scale of  the network
+   * @return {Number} scale   Scaling factor 1.0 is unscaled
+   * @private
+   */
+  Network.prototype._getScale = function() {
+    return this.scale;
+  };
+
+  /**
+   * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
+   * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+   * @param {number} x
+   * @returns {number}
+   * @private
+   */
+  Network.prototype._XconvertDOMtoCanvas = function(x) {
+    return (x - this.translation.x) / this.scale;
+  };
 
-    // clear options of timeline and of each of the components
-    if (!what || what.options) {
-      this.components.forEach(function (component) {
-        component.setOptions(component.defaultOptions);
-      });
+  /**
+   * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+   * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
+   * @param {number} x
+   * @returns {number}
+   * @private
+   */
+  Network.prototype._XconvertCanvasToDOM = function(x) {
+    return x * this.scale + this.translation.x;
+  };
 
-      this.setOptions(this.defaultOptions); // this will also do a redraw
-    }
+  /**
+   * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
+   * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+   * @param {number} y
+   * @returns {number}
+   * @private
+   */
+  Network.prototype._YconvertDOMtoCanvas = function(y) {
+    return (y - this.translation.y) / this.scale;
   };
 
   /**
-   * Set Graph2d window such that it fits all items
+   * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+   * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
+   * @param {number} y
+   * @returns {number}
+   * @private
    */
-  Graph2d.prototype.fit = function() {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
+  Network.prototype._YconvertCanvasToDOM = function(y) {
+    return y * this.scale + this.translation.y ;
+  };
 
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
-      }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
 
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
-    }
+  /**
+   *
+   * @param {object} pos   = {x: number, y: number}
+   * @returns {{x: number, y: number}}
+   * @constructor
+   */
+  Network.prototype.canvasToDOM = function(pos) {
+    return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
+  }
 
-    this.range.setRange(start, end);
-  };
+  /**
+   *
+   * @param {object} pos   = {x: number, y: number}
+   * @returns {{x: number, y: number}}
+   * @constructor
+   */
+  Network.prototype.DOMtoCanvas = function(pos) {
+    return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
+  }
 
   /**
-   * Get the data range of the item set.
-   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
-   *                                          When no minimum is found, min==null
-   *                                          When no maximum is found, max==null
+   * Redraw all nodes
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Boolean} [alwaysShow]
+   * @private
    */
-  Graph2d.prototype.getItemRange = function() {
-    // calculate min from start filed
-    var itemsData = this.itemsData,
-      min = null,
-      max = null;
+  Network.prototype._drawNodes = function(ctx,alwaysShow) {
+    if (alwaysShow === undefined) {
+      alwaysShow = false;
+    }
 
-    if (itemsData) {
-      // calculate the minimum value of the field 'start'
-      var minItem = itemsData.min('start');
-      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-      // Note: we convert first to Date and then to number because else
-      // a conversion from ISODate to Number will fail
+    // first draw the unselected nodes
+    var nodes = this.nodes;
+    var selected = [];
 
-      // calculate maximum value of fields 'start' and 'end'
-      var maxStartItem = itemsData.max('start');
-      if (maxStartItem) {
-        max = util.convert(maxStartItem.start, 'Date').valueOf();
-      }
-      var maxEndItem = itemsData.max('end');
-      if (maxEndItem) {
-        if (max == null) {
-          max = util.convert(maxEndItem.end, 'Date').valueOf();
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
+        if (nodes[id].isSelected()) {
+          selected.push(id);
         }
         else {
-          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+          if (nodes[id].inArea() || alwaysShow) {
+            nodes[id].draw(ctx);
+          }
         }
       }
     }
 
-    return {
-      min: (min != null) ? new Date(min) : null,
-      max: (max != null) ? new Date(max) : null
-    };
+    // draw the selected nodes on top
+    for (var s = 0, sMax = selected.length; s < sMax; s++) {
+      if (nodes[selected[s]].inArea() || alwaysShow) {
+        nodes[selected[s]].draw(ctx);
+      }
+    }
   };
 
   /**
-   * Set the visible window. Both parameters are optional, you can change only
-   * start or only end. Syntax:
-   *
-   *     TimeLine.setWindow(start, end)
-   *     TimeLine.setWindow(range)
-   *
-   * Where start and end can be a Date, number, or string, and range is an
-   * object with properties start and end.
-   *
-   * @param {Date | Number | String | Object} [start] Start date of visible window
-   * @param {Date | Number | String} [end]   End date of visible window
+   * Redraw all edges
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
    */
-  Graph2d.prototype.setWindow = function(start, end) {
-    if (arguments.length == 1) {
-      var range = arguments[0];
-      this.range.setRange(range.start, range.end);
-    }
-    else {
-      this.range.setRange(start, end);
+  Network.prototype._drawEdges = function(ctx) {
+    var edges = this.edges;
+    for (var id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        var edge = edges[id];
+        edge.setScale(this.scale);
+        if (edge.connected) {
+          edges[id].draw(ctx);
+        }
+      }
     }
   };
 
   /**
-   * Get the visible window
-   * @return {{start: Date, end: Date}}   Visible range
+   * Redraw all edges
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
    */
-  Graph2d.prototype.getWindow = function() {
-    var range = this.range.getRange();
-    return {
-      start: new Date(range.start),
-      end: new Date(range.end)
-    };
+  Network.prototype._drawControlNodes = function(ctx) {
+    var edges = this.edges;
+    for (var id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        edges[id]._drawControlNodes(ctx);
+      }
+    }
   };
 
   /**
-   * Force a redraw of the Graph2d. Can be useful to manually redraw when
-   * option autoResize=false
+   * Find a stable position for all nodes
+   * @private
    */
-  Graph2d.prototype.redraw = function() {
-    var resized = false,
-      options = this.options,
-      props = this.props,
-      dom = this.dom;
-
-    if (!dom) return; // when destroyed
-
-    // update class names
-    dom.root.className = 'vis timeline root ' + options.orientation;
-
-    // update root width and height options
-    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
-    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
-    dom.root.style.width = util.option.asSize(options.width, '');
-
-    // calculate border widths
-    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
-    props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
-    props.border.bottom = props.border.top;
-    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
-
-    // calculate the heights. If any of the side panels is empty, we set the height to
-    // minus the border width, such that the border will be invisible
-    props.center.height = dom.center.offsetHeight;
-    props.left.height   = dom.left.offsetHeight;
-    props.right.height  = dom.right.offsetHeight;
-    props.top.height    = dom.top.clientHeight    || -props.border.top;
-    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
-
-    // TODO: compensate borders when any of the panels is empty.
-
-    // apply auto height
-    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
-    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
-    var autoHeight = props.top.height + contentHeight + props.bottom.height +
-      borderRootHeight + props.border.top + props.border.bottom;
-    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
-
-    // calculate heights of the content panels
-    props.root.height = dom.root.offsetHeight;
-    props.background.height = props.root.height - borderRootHeight;
-    var containerHeight = props.root.height - props.top.height - props.bottom.height -
-      borderRootHeight;
-    props.centerContainer.height  = containerHeight;
-    props.leftContainer.height    = containerHeight;
-    props.rightContainer.height   = props.leftContainer.height;
-
-    // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
-    props.background.width = props.root.width - borderRootWidth;
-    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
-    props.leftContainer.width = props.left.width;
-    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
-    props.rightContainer.width = props.right.width;
-    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-    props.center.width          = centerWidth;
-    props.centerContainer.width = centerWidth;
-    props.top.width             = centerWidth;
-    props.bottom.width          = centerWidth;
-
-    // resize the panels
-    dom.background.style.height           = props.background.height + 'px';
-    dom.backgroundVertical.style.height   = props.background.height + 'px';
-    dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
-    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
-
-    dom.background.style.width            = props.background.width + 'px';
-    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-    dom.backgroundHorizontalContainer.style.width  = props.background.width + 'px';
-    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-    dom.centerContainer.style.width       = props.center.width + 'px';
-    dom.top.style.width                   = props.top.width + 'px';
-    dom.bottom.style.width                = props.bottom.width + 'px';
-
-    // reposition the panels
-    dom.background.style.left           = '0';
-    dom.background.style.top            = '0';
-    dom.backgroundVertical.style.left   = props.left.width + 'px';
-    dom.backgroundVertical.style.top    = '0';
-    dom.backgroundHorizontalContainer.style.left = '0';
-    dom.backgroundHorizontalContainer.style.top  = props.top.height + 'px';
-    dom.centerContainer.style.left      = props.left.width + 'px';
-    dom.centerContainer.style.top       = props.top.height + 'px';
-    dom.leftContainer.style.left        = '0';
-    dom.leftContainer.style.top         = props.top.height + 'px';
-    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-    dom.rightContainer.style.top        = props.top.height + 'px';
-    dom.top.style.left                  = props.left.width + 'px';
-    dom.top.style.top                   = '0';
-    dom.bottom.style.left               = props.left.width + 'px';
-    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
-
-    // update the scrollTop, feasible range for the offset can be changed
-    // when the height of the Graph2d or of the contents of the center changed
-    this._updateScrollTop();
-
-    // reposition the scrollable contents
-    var offset = this.props.scrollTop;
-    if (options.orientation == 'bottom') {
-      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-          this.props.border.top - this.props.border.bottom, 0);
+  Network.prototype._stabilize = function() {
+    if (this.constants.freezeForStabilization == true) {
+      this._freezeDefinedNodes();
     }
-    dom.center.style.left = '0';
-    dom.center.style.top  = offset + 'px';
-    dom.backgroundHorizontal.style.left = '0';
-    dom.backgroundHorizontal.style.top  = offset + 'px';
-    dom.left.style.left   = '0';
-    dom.left.style.top    = offset + 'px';
-    dom.right.style.left  = '0';
-    dom.right.style.top   = offset + 'px';
-
-    // show shadows when vertical scrolling is available
-    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
-    dom.shadowTop.style.visibility          = visibilityTop;
-    dom.shadowBottom.style.visibility       = visibilityBottom;
-    dom.shadowTopLeft.style.visibility      = visibilityTop;
-    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
-    dom.shadowTopRight.style.visibility     = visibilityTop;
-    dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
-    // redraw all components
-    this.components.forEach(function (component) {
-      resized = component.redraw() || resized;
-    });
-    if (resized) {
-      // keep redrawing until all sizes are settled
-      this.redraw();
+    // find stable position
+    var count = 0;
+    while (this.moving && count < this.constants.stabilizationIterations) {
+      this._physicsTick();
+      count++;
+    }
+    this.zoomExtent(false,true);
+    if (this.constants.freezeForStabilization == true) {
+      this._restoreFrozenNodes();
     }
+    this.emit("stabilized",{iterations:count});
   };
 
   /**
-   * Convert a position on screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
+   * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
+   * because only the supportnodes for the smoothCurves have to settle.
+   *
    * @private
    */
-  // TODO: move this function to Range
-  Graph2d.prototype._toTime = function(x) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return new Date(x / conversion.scale + conversion.offset);
+  Network.prototype._freezeDefinedNodes = function() {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        if (nodes[id].x != null && nodes[id].y != null) {
+          nodes[id].fixedData.x = nodes[id].xFixed;
+          nodes[id].fixedData.y = nodes[id].yFixed;
+          nodes[id].xFixed = true;
+          nodes[id].yFixed = true;
+        }
+      }
+    }
   };
 
   /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
+   * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
+   *
    * @private
    */
-  // TODO: move this function to Range
-  Graph2d.prototype._toGlobalTime = function(x) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return new Date(x / conversion.scale + conversion.offset);
+  Network.prototype._restoreFrozenNodes = function() {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        if (nodes[id].fixedData.x != null) {
+          nodes[id].xFixed = nodes[id].fixedData.x;
+          nodes[id].yFixed = nodes[id].fixedData.y;
+        }
+      }
+    }
   };
 
+
   /**
-   * Convert a datetime (Date object) into a position on the screen
-   * @param {Date}   time A date
-   * @return {int}   x    The position on the screen in pixels which corresponds
-   *                      with the given date.
+   * Check if any of the nodes is still moving
+   * @param {number} vmin   the minimum velocity considered as 'moving'
+   * @return {boolean}      true if moving, false if non of the nodes is moving
    * @private
    */
-  // TODO: move this function to Range
-  Graph2d.prototype._toScreen = function(time) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
+  Network.prototype._isMoving = function(vmin) {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
+        return true;
+      }
+    }
+    return false;
   };
 
 
   /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
+   * /**
+   * Perform one discrete step for all nodes
+   *
    * @private
    */
-  // TODO: move this function to Range
-  Graph2d.prototype._toGlobalScreen = function(time) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
+  Network.prototype._discreteStepNodes = function() {
+    var interval = this.physicsDiscreteStepsize;
+    var nodes = this.nodes;
+    var nodeId;
+    var nodesPresent = false;
+
+    if (this.constants.maxVelocity > 0) {
+      for (nodeId in nodes) {
+        if (nodes.hasOwnProperty(nodeId)) {
+          nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
+          nodesPresent = true;
+        }
+      }
+    }
+    else {
+      for (nodeId in nodes) {
+        if (nodes.hasOwnProperty(nodeId)) {
+          nodes[nodeId].discreteStep(interval);
+          nodesPresent = true;
+        }
+      }
+    }
+
+    if (nodesPresent == true) {
+      var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
+      if (vminCorrected > 0.5*this.constants.maxVelocity) {
+        this.moving = true;
+      }
+      else {
+        this.moving = this._isMoving(vminCorrected) || this.constants.configurePhysics;
+      }
+    }
   };
 
   /**
-   * Initialize watching when option autoResize is true
+   * A single simulation step (or "tick") in the physics simulation
+   *
    * @private
    */
-  Graph2d.prototype._initAutoResize = function () {
-    if (this.options.autoResize == true) {
-      this._startAutoResize();
-    }
-    else {
-      this._stopAutoResize();
+  Network.prototype._physicsTick = function() {
+    if (!this.freezeSimulation) {
+      if (this.moving) {
+        this._doInAllActiveSectors("_initializeForceCalculation");
+        this._doInAllActiveSectors("_discreteStepNodes");
+        if (this.constants.smoothCurves) {
+          this._doInSupportSector("_discreteStepNodes");
+        }
+        this._findCenter(this._getRange())
+      }
     }
   };
 
+
   /**
-   * Watch for changes in the size of the container. On resize, the Panel will
-   * automatically redraw itself.
+   * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
+   * It reschedules itself at the beginning of the function
+   *
    * @private
    */
-  Graph2d.prototype._startAutoResize = function () {
-    var me = this;
+  Network.prototype._animationStep = function() {
+    // reset the timer so a new scheduled animation step can be set
+    this.timer = undefined;
+    // handle the keyboad movement
+    this._handleNavigation();
 
-    this._stopAutoResize();
+    // this schedules a new animation step
+    this.start();
 
-    this._onResize = function() {
-      if (me.options.autoResize != true) {
-        // stop watching when the option autoResize is changed to false
-        me._stopAutoResize();
-        return;
-      }
+    // start the physics simulation
+    var calculationTime = Date.now();
+    var maxSteps = 1;
+    this._physicsTick();
+    var timeRequired = Date.now() - calculationTime;
+    while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
+      this._physicsTick();
+      timeRequired = Date.now() - calculationTime;
+      maxSteps++;
+    }
 
-      if (me.dom.root) {
-        // check whether the frame is resized
-        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
-          (me.dom.root.clientHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.clientWidth;
-          me.props.lastHeight = me.dom.root.clientHeight;
+    // start the rendering process
+    var renderTime = Date.now();
+    this._redraw();
+    this.renderTime = Date.now() - renderTime;
+
+  };
+
+  if (typeof window !== 'undefined') {
+    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  }
+
+  /**
+   * Schedule a animation step with the refreshrate interval.
+   */
+  Network.prototype.start = function() {
+    if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
+      if (!this.timer) {
+        var ua = navigator.userAgent.toLowerCase();
+
+        var requiresTimeout = false;
+        if (ua.indexOf('msie 9.0') != -1) { // IE 9
+          requiresTimeout = true;
+        }
+        else if (ua.indexOf('safari') != -1) {  // safari
+          if (ua.indexOf('chrome') <= -1) {
+            requiresTimeout = true;
+          }
+        }
 
-          me.emit('change');
+        if (requiresTimeout == true) {
+          this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
+        }
+        else{
+          this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
         }
       }
-    };
-
-    // add event listener to window resize
-    util.addEventListener(window, 'resize', this._onResize);
-
-    this.watchTimer = setInterval(this._onResize, 1000);
+    }
+    else {
+      this._redraw();
+    }
   };
 
+
   /**
-   * Stop watching for a resize of the frame.
+   * Move the network according to the keyboard presses.
+   *
    * @private
    */
-  Graph2d.prototype._stopAutoResize = function () {
-    if (this.watchTimer) {
-      clearInterval(this.watchTimer);
-      this.watchTimer = undefined;
+  Network.prototype._handleNavigation = function() {
+    if (this.xIncrement != 0 || this.yIncrement != 0) {
+      var translation = this._getTranslation();
+      this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
+    }
+    if (this.zoomIncrement != 0) {
+      var center = {
+        x: this.frame.canvas.clientWidth / 2,
+        y: this.frame.canvas.clientHeight / 2
+      };
+      this._zoom(this.scale*(1 + this.zoomIncrement), center);
     }
-
-    // remove event listener on window.resize
-    util.removeEventListener(window, 'resize', this._onResize);
-    this._onResize = null;
   };
 
+
   /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
+   *  Freeze the _animationStep
    */
-  Graph2d.prototype._onTouch = function (event) {
-    this.touch.allowDragging = true;
+  Network.prototype.toggleFreeze = function() {
+    if (this.freezeSimulation == false) {
+      this.freezeSimulation = true;
+    }
+    else {
+      this.freezeSimulation = false;
+      this.start();
+    }
   };
 
+
   /**
-   * Start moving the timeline vertically
-   * @param {Event} event
+   * This function cleans the support nodes if they are not needed and adds them when they are.
+   *
+   * @param {boolean} [disableStart]
    * @private
    */
-  Graph2d.prototype._onPinch = function (event) {
-    this.touch.allowDragging = false;
+  Network.prototype._configureSmoothCurves = function(disableStart) {
+    if (disableStart === undefined) {
+      disableStart = true;
+    }
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      this._createBezierNodes();
+    }
+    else {
+      // delete the support nodes
+      this.sectors['support']['nodes'] = {};
+      for (var edgeId in this.edges) {
+        if (this.edges.hasOwnProperty(edgeId)) {
+          this.edges[edgeId].smooth = false;
+          this.edges[edgeId].via = null;
+        }
+      }
+    }
+    this._updateCalculationNodes();
+    if (!disableStart) {
+      this.moving = true;
+      this.start();
+    }
   };
 
+
   /**
-   * Start moving the timeline vertically
-   * @param {Event} event
+   * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
+   * are used for the force calculation.
+   *
    * @private
    */
-  Graph2d.prototype._onDragStart = function (event) {
-    this.touch.initialScrollTop = this.props.scrollTop;
+  Network.prototype._createBezierNodes = function() {
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      for (var edgeId in this.edges) {
+        if (this.edges.hasOwnProperty(edgeId)) {
+          var edge = this.edges[edgeId];
+          if (edge.via == null) {
+            edge.smooth = true;
+            var nodeId = "edgeId:".concat(edge.id);
+            this.sectors['support']['nodes'][nodeId] = new Node(
+                    {id:nodeId,
+                      mass:1,
+                      shape:'circle',
+                      image:"",
+                      internalMultiplier:1
+                    },{},{},this.constants);
+            edge.via = this.sectors['support']['nodes'][nodeId];
+            edge.via.parentEdgeId = edge.id;
+            edge.positionBezierNode();
+          }
+        }
+      }
+    }
   };
 
   /**
-   * Move the timeline vertically
-   * @param {Event} event
+   * load the functions that load the mixins into the prototype.
+   *
    * @private
    */
-  Graph2d.prototype._onDrag = function (event) {
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.touch.allowDragging) return;
-
-    var delta = event.gesture.deltaY;
-
-    var oldScrollTop = this._getScrollTop();
-    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
-
-    if (newScrollTop != oldScrollTop) {
-      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
+  Network.prototype._initializeMixinLoaders = function () {
+    for (var mixin in MixinLoader) {
+      if (MixinLoader.hasOwnProperty(mixin)) {
+        Network.prototype[mixin] = MixinLoader[mixin];
+      }
     }
   };
 
   /**
-   * Apply a scrollTop
-   * @param {Number} scrollTop
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
+   * Load the XY positions of the nodes into the dataset.
    */
-  Graph2d.prototype._setScrollTop = function (scrollTop) {
-    this.props.scrollTop = scrollTop;
-    this._updateScrollTop();
-    return this.props.scrollTop;
+  Network.prototype.storePosition = function() {
+    var dataArray = [];
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        var allowedToMoveX = !this.nodes.xFixed;
+        var allowedToMoveY = !this.nodes.yFixed;
+        if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
+          dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
+        }
+      }
+    }
+    this.nodesData.update(dataArray);
   };
 
+
   /**
-   * Update the current scrollTop when the height of  the containers has been changed
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
+   * Center a node in view.
+   *
+   * @param {Number} nodeId
+   * @param {Number} [zoomLevel]
    */
-  Graph2d.prototype._updateScrollTop = function () {
-    // recalculate the scrollTopMin
-    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
-    if (scrollTopMin != this.props.scrollTopMin) {
-      // in case of bottom orientation, change the scrollTop such that the contents
-      // do not move relative to the time axis at the bottom
-      if (this.options.orientation == 'bottom') {
-        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+  Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
+    if (this.nodes.hasOwnProperty(nodeId)) {
+      if (zoomLevel === undefined) {
+        zoomLevel = this._getScale();
       }
-      this.props.scrollTopMin = scrollTopMin;
-    }
+      var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
 
-    // limit the scrollTop to the feasible scroll range
-    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
-    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
+      var requiredScale = zoomLevel;
+      this._setScale(requiredScale);
 
-    return this.props.scrollTop;
-  };
+      var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
+      var translation = this._getTranslation();
 
-  /**
-   * Get the current scrollTop
-   * @returns {number} scrollTop
-   * @private
-   */
-  Graph2d.prototype._getScrollTop = function () {
-    return this.props.scrollTop;
+      var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
+                                y:canvasCenter.y - nodePosition.y};
+
+      this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
+                           translation.y + requiredScale * distanceFromCenter.y);
+      this.redraw();
+    }
+    else {
+      console.log("This nodeId cannot be found.")
+    }
   };
 
-  module.exports = Graph2d;
+  module.exports = Network;
 
 
 /***/ },
-/* 32 */
+/* 27 */
 /***/ function(module, exports, __webpack_require__) {
 
   var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(8);
-  var DataSet = __webpack_require__(9);
-  var DataView = __webpack_require__(10);
-  var Component = __webpack_require__(19);
-  var DataAxis = __webpack_require__(33);
-  var GraphGroup = __webpack_require__(35);
-  var Legend = __webpack_require__(36);
-
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+  var Node = __webpack_require__(30);
 
   /**
-   * This is the constructor of the LineGraph. It requires a Timeline body and options.
+   * @class Edge
    *
-   * @param body
-   * @param options
-   * @constructor
+   * A edge connects two nodes
+   * @param {Object} properties     Object with properties. Must contain
+   *                                At least properties from and to.
+   *                                Available properties: from (number),
+   *                                to (number), label (string, color (string),
+   *                                width (number), style (string),
+   *                                length (number), title (string)
+   * @param {Network} network       A Network object, used to find and edge to
+   *                                nodes.
+   * @param {Object} constants      An object with default values for
+   *                                example for the color
    */
-  function LineGraph(body, options) {
-    this.id = util.randomUUID();
-    this.body = body;
+  function Edge (properties, network, constants) {
+    if (!network) {
+      throw "No network provided";
+    }
+    this.network = network;
 
-    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,
-        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
-      },
-      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
-        }
-      }
-    };
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
 
-    // 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 = {};
+    // initialize variables
+    this.id     = undefined;
+    this.fromId = undefined;
+    this.toId   = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+    this.hoverWidth = constants.edges.hoverWidth;
+    this.value  = undefined;
+    this.length = constants.physics.springLength;
+    this.customLength = false;
+    this.selected = false;
+    this.hover = false;
+    this.smoothCurves = constants.smoothCurves;
+    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
+    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
+    this.inheritColor = constants.edges.inheritColor;
 
-    var me = this;
-    this.itemsData = null;    // DataSet
-    this.groupsData = null;   // DataSet
+    this.from = null;   // a node
+    this.to = null;     // a node
+    this.via = null;    // a temp node
 
-    // 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);
-      }
-    };
+    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+    // by storing the original information we can revert to the original connection when the cluser is opened.
+    this.originalFromId = [];
+    this.originalToId = [];
 
-    // 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);
-      }
-    };
+    this.connected = false;
 
-    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
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-    this.svgElements = {};
-    this.setOptions(options);
-    this.groupsUsingDefaultStyles = [0];
+    this.color       = {color:constants.edges.color.color,
+                        highlight:constants.edges.color.highlight,
+                        hover:constants.edges.color.hover};
+    this.widthFixed  = false;
+    this.lengthFixed = false;
 
-    this.body.emitter.on("rangechange",function() {
-        if (me.lastStart != 0) {
-          var offset = me.body.range.start - me.lastStart;
-          var range = me.body.range.end - me.body.range.start;
-          if (me.width != 0) {
-            var rangePerPixelInv = me.width/range;
-            var xOffset = offset * rangePerPixelInv;
-            me.svg.style.left = (-me.width - xOffset) + "px";
-          }
-        }
-      });
-    this.body.emitter.on("rangechanged", function() {
-      me.lastStart = me.body.range.start;
-      me.svg.style.left = util.option.asSize(-me.width);
-      me._updateGraph.apply(me);
-    });
+    this.setProperties(properties, constants);
 
-    // create the HTML DOM
-    this._create();
-    this.body.emitter.emit("change");
+    this.controlNodesEnabled = false;
+    this.controlNodes = {from:null, to:null, positions:{}};
+    this.connectedNode = null;
   }
 
-  LineGraph.prototype = new Component();
-
   /**
-   * Create the HTML DOM for the ItemSet
+   * Set or overwrite properties for the edge
+   * @param {Object} properties  an object with properties
+   * @param {Object} constants   and object with default, global properties
    */
-  LineGraph.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'LineGraph';
-    this.dom.frame = frame;
+  Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
+    }
 
-    // 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);
+    if (properties.from !== undefined)           {this.fromId = properties.from;}
+    if (properties.to !== undefined)             {this.toId = properties.to;}
 
-    // data axis
-    this.options.dataAxis.orientation = 'left';
-    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
+    if (properties.id !== undefined)             {this.id = properties.id;}
+    if (properties.style !== undefined)          {this.style = properties.style;}
+    if (properties.label !== undefined)          {this.label = properties.label;}
 
-    this.options.dataAxis.orientation = 'right';
-    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
-    delete this.options.dataAxis.orientation;
+    if (this.label) {
+      this.fontSize = constants.edges.fontSize;
+      this.fontFace = constants.edges.fontFace;
+      this.fontColor = constants.edges.fontColor;
+      this.fontFill = constants.edges.fontFill;
 
-    // legends
-    this.legendLeft = new Legend(this.body, this.options.legend, 'left');
-    this.legendRight = new Legend(this.body, this.options.legend, 'right');
+      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
+      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
+      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
+      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    }
 
-    this.show();
+    if (properties.title !== undefined)        {this.title = properties.title;}
+    if (properties.width !== undefined)        {this.width = properties.width;}
+    if (properties.widthSelectionMultiplier !== undefined)
+                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
+    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
+    if (properties.value !== undefined)        {this.value = properties.value;}
+    if (properties.length !== undefined)       {this.length = properties.length;
+                                                this.customLength = true;}
+
+    // scale the arrow
+    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
+
+    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
+
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dash) {
+      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
+      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
+      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+    }
+
+    if (properties.color !== undefined) {
+      if (util.isString(properties.color)) {
+        this.color.color = properties.color;
+        this.color.highlight = properties.color;
+      }
+      else {
+        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
+      }
+    }
+
+    // A node is connected when it has a from and to node.
+    this.connect();
+
+    this.widthFixed = this.widthFixed || (properties.width !== undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
+
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+
+    // set draw method based on style
+    switch (this.style) {
+      case 'line':          this.draw = this._drawLine; break;
+      case 'arrow':         this.draw = this._drawArrow; break;
+      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
+      case 'dash-line':     this.draw = this._drawDashLine; break;
+      default:              this.draw = this._drawLine; break;
+    }
+  };
+
+  /**
+   * Connect an edge to its nodes
+   */
+  Edge.prototype.connect = function () {
+    this.disconnect();
+
+    this.from = this.network.nodes[this.fromId] || null;
+    this.to = this.network.nodes[this.toId] || null;
+    this.connected = (this.from && this.to);
+
+    if (this.connected) {
+      this.from.attachEdge(this);
+      this.to.attachEdge(this);
+    }
+    else {
+      if (this.from) {
+        this.from.detachEdge(this);
+      }
+      if (this.to) {
+        this.to.detachEdge(this);
+      }
+    }
   };
 
   /**
-   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
-   * @param options
+   * Disconnect an edge from its nodes
    */
-  LineGraph.prototype.setOptions = function(options) {
-    if (options) {
-      var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
-      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');
+  Edge.prototype.disconnect = function () {
+    if (this.from) {
+      this.from.detachEdge(this);
+      this.from = null;
+    }
+    if (this.to) {
+      this.to.detachEdge(this);
+      this.to = null;
+    }
 
-      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;
-            }
-          }
-        }
-      }
+    this.connected = false;
+  };
 
-      if (this.yAxisLeft) {
-        if (options.dataAxis !== undefined) {
-          this.yAxisLeft.setOptions(this.options.dataAxis);
-          this.yAxisRight.setOptions(this.options.dataAxis);
-        }
-      }
+  /**
+   * get the title of this edge.
+   * @return {string} title    The title of the edge, or undefined when no title
+   *                           has been set.
+   */
+  Edge.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-      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);
-      }
-    }
-    if (this.dom.frame) {
-      this._updateGraph();
-    }
+  /**
+   * Retrieve the value of the edge. Can be undefined
+   * @return {Number} value
+   */
+  Edge.prototype.getValue = function() {
+    return this.value;
   };
 
   /**
-   * Hide the component from the DOM
+   * Adjust the value range of the edge. The edge will adjust it's width
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
    */
-  LineGraph.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+  Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+      var scale = (this.widthMax - this.widthMin) / (max - min);
+      this.width = (this.value - min) * scale + this.widthMin;
     }
   };
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Redraw a edge
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    */
-  LineGraph.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
   };
 
-
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top
+   * @return {boolean}     True if location is located on the edge
    */
-  LineGraph.prototype.setItems = function(items) {
-    var me = this,
-      ids,
-      oldItemsData = this.itemsData;
+  Edge.prototype.isOverlappingWith = function(obj) {
+    if (this.connected) {
+      var distMax = 10;
+      var xFrom = this.from.x;
+      var yFrom = this.from.y;
+      var xTo = this.to.x;
+      var yTo = this.to.y;
+      var xObj = obj.left;
+      var yObj = obj.top;
 
-    // replace the dataset
-    if (!items) {
-      this.itemsData = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      this.itemsData = items;
+      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+      return (dist < distMax);
     }
     else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
+      return false
     }
+  };
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
-
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
+  Edge.prototype._getColor = function() {
+    var colorObj = this.color;
+    if (this.inheritColor == "to") {
+      colorObj = {
+        highlight: this.to.color.highlight.border,
+        hover: this.to.color.hover.border,
+        color: this.to.color.border
+      };
+    }
+    else if (this.inheritColor == "from" || this.inheritColor == true) {
+      colorObj = {
+        highlight: this.from.color.highlight.border,
+        hover: this.from.color.hover.border,
+        color: this.from.color.border
+      };
     }
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+    if (this.selected == true)   {return colorObj.highlight;}
+    else if (this.hover == true) {return colorObj.hover;}
+    else                         {return colorObj.color;}
+  }
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
-    }
-    this._updateUngrouped();
-    this._updateGraph();
-    this.redraw();
-  };
 
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * Redraw a edge as a line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
    */
-  LineGraph.prototype.setGroups = function(groups) {
-    var me = this,
-      ids;
-
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this._getColor();
+    ctx.lineWidth   = this._getLineWidth();
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
-    }
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
+      // draw label
+      var point;
+      if (this.label) {
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
+      }
     }
     else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
+      var x, y;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      this._circle(ctx, x, y, radius);
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      this._label(ctx, this.label, point.x, point.y);
     }
+  };
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
-
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
+  /**
+   * Get the line width of the edge. Depends on width and whether one of the
+   * connected nodes is selected.
+   * @return {Number} width
+   * @private
+   */
+  Edge.prototype._getLineWidth = function() {
+    if (this.selected == true) {
+      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
+    }
+    else {
+      if (this.hover == true) {
+        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
+      }
+      else {
+        return this.width*this.networkScaleInv;
+      }
     }
-    this._onUpdate();
   };
 
+  Edge.prototype._getViaCoordinates = function () {
+    var xVia = null;
+    var yVia = null;
+    var factor = this.smoothCurves.roundness;
+    var type = this.smoothCurves.type;
+    if (factor == 0) {
+      return {x:null,y:null};
+    }
 
-
-  LineGraph.prototype._onUpdate = function(ids) {
-    this._updateUngrouped();
-    this._updateAllGroupData();
-    this._updateGraph();
-    this.redraw();
-  };
-  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]);
+    var dx = Math.abs(this.from.x - this.to.x);
+    var dy = Math.abs(this.from.y - this.to.y);
+    if (type == 'discrete' || type == 'diagonalCross') {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+          }
+        }
+        if (type == "discrete") {
+          xVia = dx < factor * dy ? this.from.x : xVia;
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
+        }
+        if (type == "discrete") {
+          yVia = dy < factor * dx ? this.from.y : yVia;
+        }
+      }
+    }
+    else if (type == "straightCross") {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        xVia = this.from.x;
+        yVia = this.to.y
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        xVia = this.to.x;
+        yVia = this.from.y;
+      }
+    }
+    else if (type == 'horizontal') {
+      xVia = this.to.x;
+      yVia = this.from.y;
+    }
+    else if (type == 'vertical') {
+      xVia = this.from.x;
+      yVia = this.to.y;
+    }
+    else { // continuous
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(1)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(2)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x > xVia ? this.to.x :xVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(3)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(4, this.from.x, this.to.x)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x > xVia ? this.to.x : xVia;
+          }
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(5)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(6)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(7)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(8)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+        }
+      }
     }
 
-    this._updateGraph();
-    this.redraw();
-  };
-  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
 
-  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();
+    return {x:xVia, y:yVia};
+  }
+
+  /**
+   * Draw a line between two nodes
+   * @param {CanvasRenderingContext2D} ctx
+   * @private
+   */
+  Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    if (this.smoothCurves.enabled == true) {
+      if (this.smoothCurves.dynamic == false) {
+        var via = this._getViaCoordinates();
+        if (via.x == null) {
+          ctx.lineTo(this.to.x, this.to.y);
+          ctx.stroke();
+          return null;
         }
         else {
-          this.yAxisLeft.removeGroup(groupIds[i]);
-          this.legendLeft.removeGroup(groupIds[i]);
-          this.legendLeft.redraw();
+  //        this.via.x = via.x;
+  //        this.via.y = via.y;
+          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+          ctx.stroke();
+          return via;
         }
-        delete this.groups[groupIds[i]];
+      }
+      else {
+        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+        ctx.stroke();
+        return this.via;
       }
     }
-    this._updateUngrouped();
-    this._updateGraph();
-    this.redraw();
+    else {
+      ctx.lineTo(this.to.x, this.to.y);
+      ctx.stroke();
+      return null;
+    }
+  };
+
+  /**
+   * Draw a line from a node to itself, a circle
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @private
+   */
+  Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
+  };
+
+  /**
+   * Draw label with white background and with the middle at (x, y)
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {Number} x
+   * @param {Number} y
+   * @private
+   */
+  Edge.prototype._label = function (ctx, text, x, y) {
+    if (text) {
+      // TODO: cache the calculated size
+      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+          this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontFill;
+      var width = ctx.measureText(text).width;
+      var height = this.fontSize;
+      var left = x - width / 2;
+      var top = y - height / 2;
+
+      ctx.fillRect(left, top, width, height);
+
+      // draw text
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillText(text, left, top);
+    }
   };
 
   /**
-   * update a group object
-   *
-   * @param group
-   * @param groupId
+   * Redraw a edge as a dashed line
+   * Draw this edge in the given canvas
+   * @author David Jordan
+   * @date 2012-08-08
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    * @private
    */
-  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]);
+  Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;}
+
+    ctx.lineWidth = this._getLineWidth();
+
+    var via = null;
+    // only firefox and chrome support this method, else we use the legacy one.
+    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+      // configure the dash pattern
+      var pattern = [0];
+      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
+        pattern = [this.dash.length,this.dash.gap];
       }
       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]);
+        pattern = [5,5];
       }
-      else {
-        this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
-        this.legendLeft.updateGroup(groupId, this.groups[groupId]);
+
+      // set dash settings for chrome or firefox
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash(pattern);
+        ctx.lineDashOffset = 0;
+
+      } else { //Firefox
+        ctx.mozDash = pattern;
+        ctx.mozDashOffset = 0;
       }
-    }
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-  };
 
-  LineGraph.prototype._updateAllGroupData = function () {
-    if (this.itemsData != null) {
-      // ~450 ms @ 500k
+      // draw the line
+      via = this._line(ctx);
 
-      var groupsContent = {};
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupsContent[groupId] = [];
-        }
+      // restore the dash settings.
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash([0]);
+        ctx.lineDashOffset = 0;
+
+      } else { //Firefox
+        ctx.mozDash = [0];
+        ctx.mozDashOffset = 0;
       }
-      for (var itemId in this.itemsData._data) {
-        if (this.itemsData._data.hasOwnProperty(itemId)) {
-          var item = this.itemsData._data[itemId];
-          item.x = util.convert(item.x,"Date");
-          groupsContent[item.group].push(item);
-        }
+    }
+    else { // unsupporting smooth lines
+      // draw dashed line
+      ctx.beginPath();
+      ctx.lineCap = 'round';
+      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
       }
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].setItems(groupsContent[groupId]);
-        }
+      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
       }
-  //    // ~4500ms @ 500k
-  //    for (var groupId in this.groups) {
-  //      if (this.groups.hasOwnProperty(groupId)) {
-  //        this.groups[groupId].setItems(this.itemsData.get({filter:
-  //            function (item) {
-  //              return (item.group == groupId);
-  //            }, type:{x:"Date"}}
-  //        ));
-  //      }
-  //    }
+      else //If all else fails draw a line
+      {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+      }
+      ctx.stroke();
     }
-  };
 
-  /**
-   * 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
-   */
-  LineGraph.prototype._updateUngrouped = function() {
-    if (this.itemsData != null) {
-  //    var t0 = new Date();
-      var group = {id: UNGROUPED, content: this.options.defaultGroup};
-      this._updateGroup(group, UNGROUPED);
-      var ungroupedCounter = 0;
-      if (this.itemsData) {
-        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;
-            }
-          }
-        }
+    // draw label
+    if (this.label) {
+      var point;
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
       }
-
-      // much much slower
-  //    var datapoints = this.itemsData.get({
-  //      filter: function (item) {return item.group === undefined;},
-  //      showInternalIds:true
-  //    });
-  //    if (datapoints.length > 0) {
-  //      var updateQuery = [];
-  //      for (var i = 0; i < datapoints.length; i++) {
-  //        updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
-  //      }
-  //      this.itemsData.update(updateQuery, true);
-  //    }
-  //    var t1 = new Date();
-  //    var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
-      if (ungroupedCounter == 0) {
-        delete this.groups[UNGROUPED];
-        this.legendLeft.removeGroup(UNGROUPED);
-        this.legendRight.removeGroup(UNGROUPED);
-        this.yAxisLeft.removeGroup(UNGROUPED);
-        this.yAxisRight.removeGroup(UNGROUPED);
+      else {
+        point = this._pointOnLine(0.5);
       }
-  //    console.log("getting amount ungrouped",new Date() - t1);
-  //    console.log("putting in ungrouped",new Date() - t0);
-    }
-    else {
-      delete this.groups[UNGROUPED];
-      this.legendLeft.removeGroup(UNGROUPED);
-      this.legendRight.removeGroup(UNGROUPED);
-      this.yAxisLeft.removeGroup(UNGROUPED);
-      this.yAxisRight.removeGroup(UNGROUPED);
+      this._label(ctx, this.label, point.x, point.y);
     }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
   };
 
-
   /**
-   * Redraw the component, mandatory function
-   * @return {boolean} Returns true if the component is resized
+   * Get a point on a line
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
    */
-  LineGraph.prototype.redraw = function() {
-    var resized = false;
-
-    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
-    if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
-      resized = true;
+  Edge.prototype._pointOnLine = function (percentage) {
+    return {
+      x: (1 - percentage) * this.from.x + percentage * this.to.x,
+      y: (1 - percentage) * this.from.y + percentage * this.to.y
     }
-    // check if this component is resized
-    resized = this._isResized() || resized;
-    // 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.width != this.lastWidth);
-    this.lastVisibleInterval = visibleInterval;
-    this.lastWidth = this.width;
-
-    // calculate actual size and position
-    this.width = this.dom.frame.offsetWidth;
+  };
 
-    // 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.width);
-      this.svg.style.left = util.option.asSize(-this.width);
-    }
-    if (zoomed == true) {
-      this._updateGraph();
+  /**
+   * Get a point on a circle
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
+   * @private
+   */
+  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+      x: x + radius * Math.cos(angle),
+      y: y - radius * Math.sin(angle)
     }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-
-    return resized;
   };
 
   /**
-   * Update and redraw the graph.
-   *
+   * Redraw a edge as a line with an arrow halfway the line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   * @private
    */
-  LineGraph.prototype._updateGraph = function () {
-    // reset the svg elements
-    DOMutil.prepareElements(this.svgElements);
-  //        // very slow...
-  //        groupData = group.itemsData.get({filter:
-  //          function (item) {
-  //            return (item.x > minDate && item.x < maxDate);
-  //          }}
-  //        );
-
+  Edge.prototype._drawArrowCenter = function(ctx) {
+    var point;
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+    ctx.lineWidth = this._getLineWidth();
 
-    if (this.width != 0 && this.itemsData != null) {
-      var group, groupData, preprocessedGroup, i;
-      var preprocessedGroupData = [];
-      var processedGroupData = [];
-      var groupRanges = [];
-      var changeCalled = false;
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
 
-      // getting group Ids
-      var groupIds = [];
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupIds.push(groupId);
-        }
+      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      // draw an arrow halfway the line
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
       }
 
-      // 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);
-
-      // 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.
-      if (groupIds.length > 0) {
-        for (i = 0; i < groupIds.length; i++) {
-          group = this.groups[groupIds[i]];
-          groupData = [];
-          // optimization for sorted data
-          if (group.options.sort == true) {
-            var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
-
-            for (var j = guess; j < group.itemsData.length; j++) {
-              var item = group.itemsData[j];
-              if (item !== undefined) {
-                if (item.x > maxDate) {
-                 groupData.push(item);
-                 break;
-                }
-                else {
-                  groupData.push(item);
-                }
-              }
-            }
-          }
-          else {
-            for (var j = 0; j < group.itemsData.length; j++) {
-              var item = group.itemsData[j];
-              if (item !== undefined) {
-                if (item.x > minDate && item.x < maxDate) {
-                  groupData.push(item);
-                }
-              }
-            }
-          }
-          // preprocess, split into ranges and data
-          preprocessedGroup = this._preprocessData(groupData, group);
-          groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
-          preprocessedGroupData.push(preprocessedGroup.data);
-        }
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-        // 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);
-        if (changeCalled == true) {
-          DOMutil.cleanupElements(this.svgElements);
-          this.body.emitter.emit("change");
-          return;
-        }
+      // draw label
+      if (this.label) {
+        this._label(ctx, this.label, point.x, point.y);
+      }
+    }
+    else {
+      // draw circle
+      var x, y;
+      var radius = 0.25 * Math.max(100,this.length);
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+      }
+      this._circle(ctx, x, y, radius);
 
-        // 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.push(this._convertYvalues(preprocessedGroupData[i],group))
-        }
+      // draw all arrows
+      var angle = 0.2 * Math.PI;
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-        // draw the groups
-        for (i = 0; i < groupIds.length; i++) {
-          group = this.groups[groupIds[i]];
-          if (group.options.style == 'line') {
-            this._drawLineGraph(processedGroupData[i], group);
-          }
-          else {
-            this._drawBarGraph (processedGroupData[i], group);
-          }
-        }
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
       }
     }
-
-    // cleanup unused svg elements
-    DOMutil.cleanupElements(this.svgElements);
   };
 
+
+
   /**
-   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
-   * @param {array} groupIds
+   * Redraw a edge as a line with an arrow
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    * @private
    */
-  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
-    var changeCalled = false;
-    var yAxisLeftUsed = false;
-    var yAxisRightUsed = false;
-    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
-    var orientation = 'left';
+  Edge.prototype._drawArrow = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
 
-    // if groups are present
-    if (groupIds.length > 0) {
-      for (var i = 0; i < groupIds.length; i++) {
-        orientation = 'left';
-        var group = this.groups[groupIds[i]];
-        if (group.options.yAxisOrientation == 'right') {
-          orientation = 'right';
-        }
+    ctx.lineWidth = this._getLineWidth();
 
-        minVal = groupRanges[i].min;
-        maxVal = groupRanges[i].max;
+    var angle, length;
+    //draw a line
+    if (this.from != this.to) {
+      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var dx = (this.to.x - this.from.x);
+      var dy = (this.to.y - this.from.y);
+      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
 
-        if (orientation == 'left') {
-          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;
-        }
+      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+      var via;
+      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
+        via = this.via;
       }
-      if (yAxisLeftUsed == true) {
-        this.yAxisLeft.setRange(minLeft, maxLeft);
+      else if (this.smoothCurves.enabled == true) {
+        via = this._getViaCoordinates();
       }
-      if (yAxisRightUsed == true) {
-        this.yAxisRight.setRange(minRight, maxRight);
+
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+        dx = (this.to.x - via.x);
+        dy = (this.to.y - via.y);
+        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
       }
-    }
+      var toBorderDist = this.to.distanceToBorder(ctx, angle);
+      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-    changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
-    changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
+      var xTo,yTo;
+      if (this.smoothCurves.enabled == true && via.x != null) {
+       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+      }
+      else {
+        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+      }
 
-    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
-      this.yAxisLeft.drawIcons = true;
-      this.yAxisRight.drawIcons = true;
+      ctx.beginPath();
+      ctx.moveTo(xFrom,yFrom);
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+      }
+      else {
+        ctx.lineTo(xTo, yTo);
+      }
+      ctx.stroke();
+
+      // draw arrow at the end of the line
+      length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(xTo, yTo, angle, length);
+      ctx.fill();
+      ctx.stroke();
+
+      // draw label
+      if (this.label) {
+        var point;
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
+      }
     }
     else {
-      this.yAxisLeft.drawIcons = false;
-      this.yAxisRight.drawIcons = false;
-    }
+      // draw circle
+      var node = this.from;
+      var x, y, arrow;
+      var radius = 0.25 * Math.max(100,this.length);
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+        arrow = {
+          x: x,
+          y: node.y,
+          angle: 0.9 * Math.PI
+        };
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+        arrow = {
+          x: node.x,
+          y: y,
+          angle: 0.6 * Math.PI
+        };
+      }
+      ctx.beginPath();
+      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+      ctx.stroke();
 
-    this.yAxisRight.master = !yAxisLeftUsed;
+      // draw all arrows
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-    if (this.yAxisRight.master == false) {
-      if (yAxisRightUsed == true) {
-        this.yAxisLeft.lineOffset = this.yAxisRight.width;
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
       }
-      changeCalled = this.yAxisLeft.redraw() || changeCalled;
-      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
-      changeCalled = this.yAxisRight.redraw() || changeCalled;
     }
-    else {
-      changeCalled = this.yAxisRight.redraw() || changeCalled;
-    }
-    return changeCalled;
   };
 
+
+
   /**
-   * 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}
+   * Calculate the distance between a point (x3,y3) and a line segment from
+   * (x1,y1) to (x2,y2).
+   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @param {number} x3
+   * @param {number} y3
    * @private
-   * @param axis
    */
-  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
-    var changed = false;
-    if (axisUsed == false) {
-      if (axis.dom.frame.parentNode) {
-        axis.hide();
-        changed = true;
+  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    if (this.from != this.to) {
+      if (this.smoothCurves.enabled == true) {
+        var xVia, yVia;
+        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
+          xVia = this.via.x;
+          yVia = this.via.y;
+        }
+        else {
+          var via = this._getViaCoordinates();
+          xVia = via.x;
+          yVia = via.y;
+        }
+        var minDistance = 1e9;
+        var distance;
+        var i,t,x,y, lastX, lastY;
+        for (i = 0; i < 10; i++) {
+          t = 0.1*i;
+          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+          if (i > 0) {
+            distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
+            minDistance = distance < minDistance ? distance : minDistance;
+          }
+          lastX = x; lastY = y;
+        }
+        return minDistance
+      }
+      else {
+        return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
       }
     }
     else {
-      if (!axis.dom.frame.parentNode) {
-        axis.show();
-        changed = true;
+      var x, y, dx, dy;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
       }
+      dx = x - x3;
+      dy = y - y3;
+      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
     }
-    return changed;
   };
 
+  Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
+    var px = x2-x1,
+      py = y2-y1,
+      something = px*px + py*py,
+      u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+    if (u > 1) {
+      u = 1;
+    }
+    else if (u < 0) {
+      u = 0;
+    }
+
+    var x = x1 + u * px,
+      y = y1 + u * py,
+      dx = x - x3,
+      dy = y - y3;
+
+    //# Note: If the actual distance does not matter,
+    //# if you only want to compare what this function
+    //# returns to other results of this function, you
+    //# can just return the squared distance instead
+    //# (i.e. remove the sqrt) to gain a little performance
+
+    return Math.sqrt(dx*dx + dy*dy);
+  }
 
   /**
-   * draw a bar graph
-   * @param datapoints
-   * @param group
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
    */
-  LineGraph.prototype._drawBarGraph = function (dataset, group) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var coreDistance;
-        var minWidth = 0.1 * group.options.barChart.width;
-        var offset = 0;
-        var width = group.options.barChart.width;
+  Edge.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+  };
 
-        if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
-        else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
 
-        for (var i = 0; i < dataset.length; i++) {
-          // dynammically downscale the width so there is no overlap up to 1/10th the original width
-          if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
-          if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
-          if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
+  Edge.prototype.select = function() {
+    this.selected = true;
+  };
 
-          DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
-        }
+  Edge.prototype.unselect = function() {
+    this.selected = false;
+  };
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
-        }
-      }
+  Edge.prototype.positionBezierNode = function() {
+    if (this.via !== null) {
+      this.via.x = 0.5 * (this.from.x + this.to.x);
+      this.via.y = 0.5 * (this.from.y + this.to.y);
     }
   };
 
-
   /**
-   * draw a line graph
-   *
-   * @param datapoints
-   * @param group
+   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
+   * @param ctx
    */
-  LineGraph.prototype._drawLineGraph = function (dataset, group) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var path, d;
-        var svgHeight = Number(this.svg.style.height.replace("px",""));
-        path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
-        path.setAttributeNS(null, "class", group.className);
-
-        // construct path from dataset
-        if (group.options.catmullRom.enabled == true) {
-          d = this._catmullRom(dataset, group);
-        }
-        else {
-          d = this._linear(dataset);
-        }
-
-        // append with points for fill and finalize the path
-        if (group.options.shaded.enabled == true) {
-          var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.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");
-          fillPath.setAttributeNS(null, "d", dFill);
-        }
-        // copy properties to path for drawing.
-        path.setAttributeNS(null, "d", "M" + d);
+  Edge.prototype._drawControlNodes = function(ctx) {
+    if (this.controlNodesEnabled == true) {
+      if (this.controlNodes.from === null && this.controlNodes.to === null) {
+        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+        var nodeIdTo = "edgeIdTo:".concat(this.id);
+        var constants = {
+                        nodes:{group:'', radius:8},
+                        physics:{damping:0},
+                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+                        };
+        this.controlNodes.from = new Node(
+          {id:nodeIdFrom,
+            shape:'dot',
+              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+        this.controlNodes.to = new Node(
+          {id:nodeIdTo,
+            shape:'dot',
+            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+      }
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          this._drawPoints(dataset, group, this.svgElements, this.svg);
-        }
+      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+        this.controlNodes.positions = this.getControlNodePositions(ctx);
+        this.controlNodes.from.x = this.controlNodes.positions.from.x;
+        this.controlNodes.from.y = this.controlNodes.positions.from.y;
+        this.controlNodes.to.x = this.controlNodes.positions.to.x;
+        this.controlNodes.to.y = this.controlNodes.positions.to.y;
       }
+
+      this.controlNodes.from.draw(ctx);
+      this.controlNodes.to.draw(ctx);
+    }
+    else {
+      this.controlNodes = {from:null, to:null, positions:{}};
     }
   };
 
   /**
-   * draw the data points
-   *
-   * @param dataset
-   * @param JSONcontainer
-   * @param svg
-   * @param group
+   * Enable control nodes.
+   * @private
    */
-  LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
-    if (offset === undefined) {offset = 0;}
-    for (var i = 0; i < dataset.length; i++) {
-      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
-    }
+  Edge.prototype._enableControlNodes = function() {
+    this.controlNodesEnabled = true;
   };
 
-
-
   /**
-   * 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}
+   * disable control nodes
    * @private
    */
-  LineGraph.prototype._preprocessData = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var toScreen = this.body.util.toScreen;
-
-    var increment = 1;
-    var amountOfPoints = datapoints.length;
-
-    var yMin = datapoints[0].y;
-    var yMax = datapoints[0].y;
-
-    // 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.
-    if (group.options.sampling == true) {
-      var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
-      var pointsPerPixel = amountOfPoints/xDistance;
-      increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
-    }
-
-    for (var i = 0; i < amountOfPoints; i += increment) {
-      xValue = toScreen(datapoints[i].x) + this.width - 1;
-      yValue = datapoints[i].y;
-      extractedData.push({x: xValue, y: yValue});
-      yMin = yMin > yValue ? yValue : yMin;
-      yMax = yMax < yValue ? yValue : yMax;
-    }
-
-    // extractedData.sort(function (a,b) {return a.x - b.x;});
-    return {min: yMin, max: yMax, data: extractedData};
+  Edge.prototype._disableControlNodes = function() {
+    this.controlNodesEnabled = false;
   };
 
   /**
-   * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
-   * util function toScreen to get the x coordinate from the timestamp.
-   *
-   * @param datapoints
-   * @param options
-   * @returns {Array}
+   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+   * @param x
+   * @param y
+   * @returns {null}
    * @private
    */
-  LineGraph.prototype._convertYvalues = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var axis = this.yAxisLeft;
-    var svgHeight = Number(this.svg.style.height.replace("px",""));
+  Edge.prototype._getSelectedControlNode = function(x,y) {
+    var positions = this.controlNodes.positions;
+    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
 
-    if (group.options.yAxisOrientation == 'right') {
-      axis = this.yAxisRight;
+    if (fromDistance < 15) {
+      this.connectedNode = this.from;
+      this.from = this.controlNodes.from;
+      return this.controlNodes.from;
     }
-
-    for (var i = 0; i < datapoints.length; i++) {
-      xValue = datapoints[i].x;
-      yValue = Math.round(axis.convertValue(datapoints[i].y));
-      extractedData.push({x: xValue, y: yValue});
+    else if (toDistance < 15) {
+      this.connectedNode = this.to;
+      this.to = this.controlNodes.to;
+      return this.controlNodes.to;
+    }
+    else {
+      return null;
     }
-
-    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
-
-    // extractedData.sort(function (a,b) {return a.x - b.x;});
-    return extractedData;
   };
 
 
   /**
-   * 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}
+   * this resets the control nodes to their original position.
    * @private
    */
-  LineGraph.prototype._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++) {
-
-      p0 = (i == 0) ? data[0] : data[i-1];
-      p1 = data[i];
-      p2 = data[i+1];
-      p3 = (i + 2 < length) ? data[i+2] : p2;
-
-
-      // 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 + " ";
+  Edge.prototype._restoreControlNodes = function() {
+    if (this.controlNodes.from.selected == true) {
+      this.from = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.from.unselect();
+    }
+    if (this.controlNodes.to.selected == true) {
+      this.to = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.to.unselect();
     }
-
-    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.
+   * this calculates the position of the control nodes on the edges of the parent nodes.
    *
-   * One optimization can be used to reuse distances since this is a sliding window approach.
-   * @param data
-   * @returns {string}
-   * @private
+   * @param ctx
+   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
    */
-  LineGraph.prototype._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          ]
-
-        // [   0             1            0          0          ]
-        // [   -d2pow2a/N    A/N          d1pow2a/N  0          ]
-        // [   0             d3pow2a/M    B/M        -d2pow2a/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)};
+  Edge.prototype.getControlNodePositions = function(ctx) {
+    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+    var dx = (this.to.x - this.from.x);
+    var dy = (this.to.y - this.from.y);
+    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
 
-        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 + " ";
-      }
+    var via;
+    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
+      via = this.via;
+    }
+    else if (this.smoothCurves.enabled == true) {
+      via = this._getViaCoordinates();
+    }
 
-      return d;
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+      dx = (this.to.x - via.x);
+      dy = (this.to.y - via.y);
+      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
     }
-  };
+    var toBorderDist = this.to.distanceToBorder(ctx, angle);
+    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-  /**
-   * this generates the SVG path for a linear drawing between datapoints.
-   * @param data
-   * @returns {string}
-   * @private
-   */
-  LineGraph.prototype._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;
-      }
+    var xTo,yTo;
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+    }
+    else {
+      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
     }
-    return d;
-  };
 
-  module.exports = LineGraph;
+    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+  };
 
+  module.exports = Edge;
 
 /***/ },
-/* 33 */
+/* 28 */
 /***/ function(module, exports, __webpack_require__) {
 
   var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(8);
-  var Component = __webpack_require__(19);
-  var DataStep = __webpack_require__(34);
 
   /**
-   * A horizontal time axis
-   * @param {Object} [options]        See DataAxis.setOptions for the available
-   *                                  options.
-   * @constructor DataAxis
-   * @extends Component
-   * @param body
+   * @class Groups
+   * This class can store groups and properties specific for groups.
    */
-  function DataAxis (body, options, svg) {
-    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
-    };
-
-    this.linegraphSVG = svg;
-    this.props = {};
-    this.DOMelements = { // dynamic elements
-      lines: {},
-      labels: {}
-    };
-
-    this.dom = {};
-
-    this.range = {start:0, end:0};
-
-    this.options = util.extend({}, this.defaultOptions);
-    this.conversionFactor = 1;
+  function Groups() {
+    this.clear();
+    this.defaultIndex = 0;
+  }
 
-    this.setOptions(options);
-    this.width = Number(('' + this.options.width).replace("px",""));
-    this.minWidth = this.width;
-    this.height = this.linegraphSVG.offsetHeight;
 
-    this.stepPixels = 25;
-    this.stepPixelsForced = 25;
-    this.lineOffset = 0;
-    this.master = true;
-    this.svgElements = {};
+  /**
+   * default constants for group colors
+   */
+  Groups.DEFAULT = [
+    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
+  ];
 
 
+  /**
+   * Clear all groups
+   */
+  Groups.prototype.clear = function () {
     this.groups = {};
-    this.amountOfGroups = 0;
-
-    // create the HTML DOM
-    this._create();
-  }
-
-  DataAxis.prototype = new Component();
+    this.groups.length = function()
+    {
+      var i = 0;
+      for ( var p in this ) {
+        if (this.hasOwnProperty(p)) {
+          i++;
+        }
+      }
+      return i;
+    }
+  };
 
 
+  /**
+   * get group properties of a groupname. If groupname is not found, a new group
+   * is added.
+   * @param {*} groupname        Can be a number, string, Date, etc.
+   * @return {Object} group      The created group, containing all group properties
+   */
+  Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
 
-  DataAxis.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
+    if (group == undefined) {
+      // create new group
+      var index = this.defaultIndex % Groups.DEFAULT.length;
+      this.defaultIndex++;
+      group = {};
+      group.color = Groups.DEFAULT[index];
+      this.groups[groupname] = group;
     }
-    this.amountOfGroups += 1;
-  };
 
-  DataAxis.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
+    return group;
   };
 
-  DataAxis.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
+  /**
+   * Add a custom group style
+   * @param {String} groupname
+   * @param {Object} style       An object containing borderColor,
+   *                             backgroundColor, etc.
+   * @return {Object} group      The created group object
+   */
+  Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    if (style.color) {
+      style.color = util.parseColor(style.color);
     }
+    return style;
   };
 
+  module.exports = Groups;
 
-  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'];
-      util.selectiveExtend(fields, this.options, options);
 
-      this.minWidth = Number(('' + this.options.width).replace("px",""));
+/***/ },
+/* 29 */
+/***/ function(module, exports, __webpack_require__) {
 
-      if (redraw == true && this.dom.frame) {
-        this.hide();
-        this.show();
-      }
-    }
-  };
+  /**
+   * @class Images
+   * This class loads images and keeps them stored.
+   */
+  function Images() {
+    this.images = {};
 
+    this.callback = undefined;
+  }
 
   /**
-   * Create the HTML DOM for the DataAxis
+   * Set an onload callback function. This will be called each time an image
+   * is loaded
+   * @param {function} callback
    */
-  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;
+  Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
+  };
 
-    this.dom.lineContainer = document.createElement('div');
-    this.dom.lineContainer.style.width = '100%';
-    this.dom.lineContainer.style.height = this.height;
+  /**
+   *
+   * @param {string} url          Url of the image
+   * @return {Image} img          The image object
+   */
+  Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+      // create the image
+      var images = this;
+      img = new Image();
+      this.images[url] = img;
+      img.onload = function() {
+        if (images.callback) {
+          images.callback(this);
+        }
+      };
+      img.src = url;
+    }
 
-    // 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);
+    return img;
   };
 
-  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;
+  module.exports = Images;
 
-    if (this.options.orientation == 'left') {
-      x = iconOffset;
-    }
-    else {
-      x = this.width - iconWidth - iconOffset;
-    }
 
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-        y += iconHeight + iconOffset;
-      }
-    }
+/***/ },
+/* 30 */
+/***/ function(module, exports, __webpack_require__) {
 
-    DOMutil.cleanupElements(this.svgElements);
-  };
+  var util = __webpack_require__(1);
 
   /**
-   * Create the HTML DOM for the DataAxis
+   * @class Node
+   * A node. A node can be connected to other nodes via one or multiple edges.
+   * @param {object} properties An object containing properties for the node. All
+   *                            properties are optional, except for the id.
+   *                              {number} id     Id of the node. Required
+   *                              {string} label  Text label for the node
+   *                              {number} x      Horizontal position of the node
+   *                              {number} y      Vertical position of the node
+   *                              {string} shape  Node shape, available:
+   *                                              "database", "circle", "ellipse",
+   *                                              "box", "image", "text", "dot",
+   *                                              "star", "triangle", "triangleDown",
+   *                                              "square"
+   *                              {string} image  An image url
+   *                              {string} title  An title text, can be HTML
+   *                              {anytype} group A group name or number
+   * @param {Network.Images} imagelist    A list with images. Only needed
+   *                                            when the node has an image
+   * @param {Network.Groups} grouplist    A list with groups. Needed for
+   *                                            retrieving group properties
+   * @param {Object}               constants    An object with default values for
+   *                                            example for the color
+   *
    */
-  DataAxis.prototype.show = function() {
-    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);
-      }
-    }
-
-    if (!this.dom.lineContainer.parentNode) {
-      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
-    }
-  };
+  function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
+    this.hover = false;
 
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.hide = function() {
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
-    }
+    this.edges = []; // all edges connected to this node
+    this.dynamicEdges = [];
+    this.reroutedEdges = {};
 
-    if (this.dom.lineContainer.parentNode) {
-      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
-    }
-  };
+    this.group = constants.nodes.group;
+    this.fontSize = Number(constants.nodes.fontSize);
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
+    this.fontDrawThreshold = 3;
 
-  /**
-   * Set a range (start and end)
-   * @param end
-   * @param start
-   * @param end
-   */
-  DataAxis.prototype.setRange = function (start, end) {
-    this.range.start = start;
-    this.range.end = end;
-  };
+    this.color = constants.nodes.color;
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  DataAxis.prototype.redraw = function () {
-    var changeCalled = false;
-    if (this.amountOfGroups == 0) {
-      this.hide();
-    }
-    else {
-      this.show();
-      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
-      // svg offsetheight did not work in firefox and explorer...
+    // set defaults for the properties
+    this.id = undefined;
+    this.shape = constants.nodes.shape;
+    this.image = constants.nodes.image;
+    this.x = null;
+    this.y = null;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.horizontalAlignLeft = true; // these are for the navigation controls
+    this.verticalAlignTop    = true; // these are for the navigation controls
+    this.radius = constants.nodes.radius;
+    this.baseRadiusValue = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+    this.level = -1;
+    this.preassignedLevel = false;
 
-      this.dom.lineContainer.style.height = this.height + 'px';
-      this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
 
-      var props = this.props;
-      var frame = this.dom.frame;
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
 
-      // update classname
-      frame.className = 'dataaxis';
+    // physics properties
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = constants.physics.damping;
+    this.mass = 1;  // kg
+    this.fixedData = {x:null,y:null};
 
-      // calculate character width and height
-      this._calculateCharSize();
+    this.setProperties(properties, constants);
 
-      var orientation = this.options.orientation;
-      var showMinorLabels = this.options.showMinorLabels;
-      var showMajorLabels = this.options.showMajorLabels;
+    // creating the variables for clustering
+    this.resetCluster();
+    this.dynamicEdgesLength = 0;
+    this.clusterSession = 0;
+    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
+    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
+    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
+    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
+    this.growthIndicator = 0;
 
-      // determine the width and height of the elemens for the axis
-      props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
-      props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+    // variables to tell the node about the network.
+    this.networkScaleInv = 1;
+    this.networkScale = 1;
+    this.canvasTopLeft = {"x": -300, "y": -300};
+    this.canvasBottomRight = {"x":  300, "y":  300};
+    this.parentEdgeId = null;
+  }
 
-      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;
+  /**
+   * (re)setting the clustering variables and objects
+   */
+  Node.prototype.resetCluster = function() {
+    // clustering variables
+    this.formationScale = undefined; // this is used to determine when to open the cluster
+    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
+    this.containedNodes = {};
+    this.containedEdges = {};
+    this.clusterSessions = [];
+  };
 
-      //  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";
-      }
-      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";
-      }
-      changeCalled = this._redrawLabels();
-      if (this.options.icons == true) {
-        this._redrawGroupIcons();
-      }
+  /**
+   * Attach a edge to the node
+   * @param {Edge} edge
+   */
+  Node.prototype.attachEdge = function(edge) {
+    if (this.edges.indexOf(edge) == -1) {
+      this.edges.push(edge);
     }
-    return changeCalled;
+    if (this.dynamicEdges.indexOf(edge) == -1) {
+      this.dynamicEdges.push(edge);
+    }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
   /**
-   * Repaint major and minor text labels and vertical grid lines
-   * @private
+   * Detach a edge from the node
+   * @param {Edge} edge
    */
-  DataAxis.prototype._redrawLabels = function () {
-    DOMutil.prepareElements(this.DOMelements);
-
-    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.step = step;
-    step.first();
-
-    // get the distance in pixels for a step
-    var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
-    this.stepPixels = stepPixels;
+  Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+      this.edges.splice(index, 1);
+      this.dynamicEdges.splice(index, 1);
+    }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
+  };
 
-    var amountOfSteps = this.height / stepPixels;
-    var stepDifference = 0;
 
-    if (this.master == false) {
-      stepPixels = this.stepPixelsForced;
-      stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
-      for (var i = 0; i < 0.5 * stepDifference; i++) {
-        step.previous();
-      }
-      amountOfSteps = this.height / stepPixels;
+  /**
+   * Set or overwrite properties for the node
+   * @param {Object} properties an object with properties
+   * @param {Object} constants  and object with default, global properties
+   */
+  Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
     }
+    this.originalLabel = undefined;
+    // basic properties
+    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.group !== undefined)     {this.group = properties.group;}
+    if (properties.x !== undefined)         {this.x = properties.x;}
+    if (properties.y !== undefined)         {this.y = properties.y;}
+    if (properties.value !== undefined)     {this.value = properties.value;}
+    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
 
-    this.valueAtZero = step.marginEnd;
-    var marginStartPos = 0;
-
-    // do not draw the first label
-    var max = 1;
-    step.next();
+    // physics
+    if (properties.mass !== undefined)                {this.mass = properties.mass;}
 
-    this.maxLabelSize = 0;
-    var y = 0;
-    while (max < Math.round(amountOfSteps)) {
+    // navigation controls properties
+    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
 
-      y = Math.round(max * stepPixels);
-      marginStartPos = max * stepPixels;
-      var isMajor = step.isMajor();
+    if (this.id === undefined) {
+      throw "Node must have an id";
+    }
 
-      if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
-        this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
+    // copy group properties
+    if (this.group) {
+      var groupObj = this.grouplist.get(this.group);
+      for (var prop in groupObj) {
+        if (groupObj.hasOwnProperty(prop)) {
+          this[prop] = groupObj[prop];
+        }
       }
+    }
 
-      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
-          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
+    // individual shape properties
+    if (properties.shape !== undefined)          {this.shape = properties.shape;}
+    if (properties.image !== undefined)          {this.image = properties.image;}
+    if (properties.radius !== undefined)         {this.radius = properties.radius; this.baseRadiusValue = this.radius;}
+    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
-        if (y >= 0) {
-          this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
-        }
-        this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
+
+    if (this.image !== undefined && this.image != "") {
+      if (this.imagelist) {
+        this.imageObj = this.imagelist.load(this.image);
       }
       else {
-        this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+        throw "No imagelist provided";
       }
-
-      step.next();
-      max++;
     }
 
-    this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
+    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
+    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
-    var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
-    // this will resize the yAxis to accomodate 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);
-      this.redraw();
-      return 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);
-      this.redraw();
-      return true;
+    if (this.shape == 'image') {
+      this.radiusMin = constants.nodes.widthMin;
+      this.radiusMax = constants.nodes.widthMax;
     }
-    else {
-      DOMutil.cleanupElements(this.DOMelements);
-      return false;
+
+    // choose draw method depending on the shape
+    switch (this.shape) {
+      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
+      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+      // TODO: add diamond shape
+      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
     }
+    // reset the size of the node, this can be changed
+    this._reset();
   };
 
   /**
-   * Create a label for the axis at position x
-   * @private
-   * @param y
-   * @param text
-   * @param orientation
-   * @param className
-   * @param characterHeight
+   * select this node
    */
-  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
-    // reuse redundant label
-    var label = DOMutil.getDOMElement('div',this.DOMelements, 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;
-    }
+  Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
   };
 
   /**
-   * Create a minor line for the axis at position y
-   * @param y
-   * @param orientation
-   * @param className
-   * @param offset
-   * @param width
+   * unselect this node
    */
-  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
-    if (this.master == true) {
-      var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
-      line.className = className;
-      line.innerHTML = '';
-
-      if (orientation == 'left') {
-        line.style.left = (this.width - offset) + 'px';
-      }
-      else {
-        line.style.right = (this.width - offset) + 'px';
-      }
-
-      line.style.width = width + 'px';
-      line.style.top = y + 'px';
-    }
+  Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
   };
 
 
-  DataAxis.prototype.convertValue = function (value) {
-    var invertedValue = this.valueAtZero - value;
-    var convertedValue = invertedValue * this.conversionFactor;
-    return convertedValue; // the -2 is to compensate for the borders
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   */
+  Node.prototype.clearSizeCache = function() {
+    this._reset();
   };
 
-
   /**
-   * 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.
+   * Reset the calculated size of the node, forces it to recalculate its size
    * @private
    */
-  DataAxis.prototype._calculateCharSize = function () {
-    // determine the char width and height on the minor axis
-    if (!('minorCharHeight' in this.props)) {
+  Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
+  };
 
-      var textMinor = document.createTextNode('0');
-      var measureCharMinor = document.createElement('DIV');
-      measureCharMinor.className = 'yAxis minor measure';
-      measureCharMinor.appendChild(textMinor);
-      this.dom.frame.appendChild(measureCharMinor);
+  /**
+   * get the title of this node.
+   * @return {string} title    The title of the node, or undefined when no title
+   *                           has been set.
+   */
+  Node.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-      this.props.minorCharHeight = measureCharMinor.clientHeight;
-      this.props.minorCharWidth = measureCharMinor.clientWidth;
+  /**
+   * Calculate the distance to the border of the Node
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Number} angle        Angle in radians
+   * @returns {number} distance   Distance to the border in pixels
+   */
+  Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
 
-      this.dom.frame.removeChild(measureCharMinor);
+    if (!this.width) {
+      this.resize(ctx);
     }
 
-    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);
+    switch (this.shape) {
+      case 'circle':
+      case 'dot':
+        return this.radius + borderWidth;
 
-      this.props.majorCharHeight = measureCharMajor.clientHeight;
-      this.props.majorCharWidth = measureCharMajor.clientWidth;
+      case 'ellipse':
+        var a = this.width / 2;
+        var b = this.height / 2;
+        var w = (Math.sin(angle) * a);
+        var h = (Math.cos(angle) * b);
+        return a * b / Math.sqrt(w * w + h * h);
+
+      // TODO: implement distanceToBorder for database
+      // TODO: implement distanceToBorder for triangle
+      // TODO: implement distanceToBorder for triangleDown
+
+      case 'box':
+      case 'image':
+      case 'text':
+      default:
+        if (this.width) {
+          return Math.min(
+              Math.abs(this.width / 2 / Math.cos(angle)),
+              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+          // TODO: reckon with border radius too in case of box
+        }
+        else {
+          return 0;
+        }
 
-      this.dom.frame.removeChild(measureCharMajor);
     }
+    // TODO: implement calculation of distance to border for all shapes
   };
 
   /**
-   * 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
+   * Set forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
    */
-  DataAxis.prototype.snap = function(date) {
-    return this.step.snap(date);
+  Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
   };
 
-  module.exports = DataAxis;
-
-
-/***/ },
-/* 34 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Add forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
+   * @private
+   */
+  Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
+  };
 
   /**
-   * @constructor  DataStep
-   * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
-   * end data point. The class itself determines the best scale (step size) based on the
-   * provided start Date, end Date, and minimumStep.
-   *
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   *
-   * Alternatively, you can set a scale by hand.
-   * After creation, you can initialize the class by executing first(). Then you
-   * can iterate from the start date to the end date via next(). You can check if
-   * the end date is reached with the function hasNext(). After each step, you can
-   * retrieve the current date via getCurrent().
-   * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
-   * days, to years.
-   *
-   * Version: 1.2
-   *
-   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
-   *                               or new Date(2010, 9, 21, 23, 45, 00)
-   * @param {Date} [end]           The end date
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
    */
-  function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
-    // variables
-    this.current = 0;
+  Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.x  += this.vx * interval;          // position
+    }
 
-    this.autoScale = true;
-    this.stepIndex = 0;
-    this.step = 1;
-    this.scale = 1;
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.y  += this.vy * interval;          // position
+    }
+  };
 
-    this.marginStart;
-    this.marginEnd;
 
-    this.majorSteps = [1,     2,    5,  10];
-    this.minorSteps = [0.25,  0.5,  1,  2];
 
-    this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
-  }
+  /**
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   * @param {number} maxVelocity The speed limit imposed on the velocity
+   */
+  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
+      this.x  += this.vx * interval;          // position
+    }
+    else {
+      this.fx = 0;
+    }
 
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
+      this.y  += this.vy * interval;          // position
+    }
+    else {
+      this.fy = 0;
+    }
+  };
 
+  /**
+   * Check if this node has a fixed x and y position
+   * @return {boolean}      true if fixed, false if not
+   */
+  Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
+  };
 
   /**
-   * Set a new range
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   * @param {Number} [start]      The start date and time.
-   * @param {Number} [end]        The end date and time.
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
+   * Check if this node is moving
+   * @param {number} vmin   the minimum velocity considered as "moving"
+   * @return {boolean}      true if moving, false if it has no velocity
    */
-  DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
-    this._start = start;
-    this._end = end;
+  // TODO: replace this method with calculating the kinetic energy
+  Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  };
 
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
-    }
-    this.setFirst();
+  /**
+   * check if this node is selecte
+   * @return {boolean} selected   True if node is selected, else false
+   */
+  Node.prototype.isSelected = function() {
+    return this.selected;
   };
 
   /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
+   * Retrieve the value of the node. Can be undefined
+   * @return {Number} value
    */
-  DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
-    // round to floor
-    var size = this._end - this._start;
-    var safeSize = size * 1.1;
-    var minimumStepValue = minimumStep * (safeSize / containerHeight);
-    var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
+  Node.prototype.getValue = function() {
+    return this.value;
+  };
 
-    var minorStepIdx = -1;
-    var magnitudefactor = Math.pow(10,orderOfMagnitude);
+  /**
+   * Calculate the distance from the nodes location to the given location (x,y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Number} value
+   */
+  Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
 
-    var start = 0;
-    if (orderOfMagnitude < 0) {
-      start = orderOfMagnitude;
-    }
 
-    var solutionFound = false;
-    for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
-      magnitudefactor = Math.pow(10,i);
-      for (var j = 0; j < this.minorSteps.length; j++) {
-        var stepSize = magnitudefactor * this.minorSteps[j];
-        if (stepSize >= minimumStepValue) {
-          solutionFound = true;
-          minorStepIdx = j;
-          break;
-        }
+  /**
+   * Adjust the value range of the node. The node will adjust it's radius
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
+   */
+  Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+      if (max == min) {
+        this.radius = (this.radiusMin + this.radiusMax) / 2;
       }
-      if (solutionFound == true) {
-        break;
+      else {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
       }
     }
-    this.stepIndex = minorStepIdx;
-    this.scale = magnitudefactor;
-    this.step = magnitudefactor * this.minorSteps[minorStepIdx];
+    this.baseRadiusValue = this.radius;
   };
 
+  /**
+   * Draw this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
+  };
 
   /**
-   * Set the range iterator to the start date.
+   * Recalculate the size of this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    */
-  DataStep.prototype.first = function() {
-    this.setFirst();
+  Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
   };
 
   /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top, right, bottom
+   * @return {boolean}     True if location is located on node
    */
-  DataStep.prototype.setFirst = function() {
-    var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
-    var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
+  Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left              < obj.right  &&
+            this.left + this.width > obj.left   &&
+            this.top               < obj.bottom &&
+            this.top + this.height > obj.top);
+  };
 
-    this.marginEnd = this.roundToMinor(niceEnd);
-    this.marginStart = this.roundToMinor(niceStart);
-    this.marginRange = this.marginEnd - this.marginStart;
+  Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
 
-    this.current = this.marginEnd;
+    if (!this.width || !this.height) {  // undefined or 0
+      var width, height;
+      if (this.value) {
+        this.radius = this.baseRadiusValue;
+        var scale = this.imageObj.height / this.imageObj.width;
+        if (scale !== undefined) {
+          width = this.radius || this.imageObj.width;
+          height = this.radius * scale || this.imageObj.height;
+        }
+        else {
+          width = 0;
+          height = 0;
+        }
+      }
+      else {
+        width = this.imageObj.width;
+        height = this.imageObj.height;
+      }
+      this.width  = width;
+      this.height = height;
+
+      this.growthIndicator = 0;
+      if (this.width > 0 && this.height > 0) {
+        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
+        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+        this.growthIndicator = this.width - width;
+      }
+    }
 
   };
 
-  DataStep.prototype.roundToMinor = function(value) {
-    var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
-    if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
-      return rounded + (this.scale * this.minorSteps[this.stepIndex]);
+  Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
+
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
+
+    var yLabel;
+    if (this.imageObj.width != 0 ) {
+      // draw the shade
+      if (this.clusterSize > 1) {
+        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
+        lineWidth *= this.networkScaleInv;
+        lineWidth = Math.min(0.2 * this.width,lineWidth);
+
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+      }
+
+      // draw the image
+      ctx.globalAlpha = 1.0;
+      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      yLabel = this.y + this.height / 2;
     }
     else {
-      return rounded;
-    }
-  }
-
+      // image still loading... just draw the label for now
+      yLabel = this.y;
+    }
 
-  /**
-   * Check if the there is a next step
-   * @return {boolean}  true if the current date has not passed the end date
-   */
-  DataStep.prototype.hasNext = function () {
-    return (this.current >= this.marginStart);
+    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
   };
 
-  /**
-   * Do the next step
-   */
-  DataStep.prototype.next = function() {
-    var prev = this.current;
-    this.current -= this.step;
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current == prev) {
-      this.current = this._end;
+  Node.prototype._resizeBox = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
+
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+
     }
   };
 
-  /**
-   * Do the next step
-   */
-  DataStep.prototype.previous = function() {
-    this.current += this.step;
-    this.marginEnd += this.step;
-    this.marginRange = this.marginEnd - this.marginStart;
-  };
+  Node.prototype._drawBox = function (ctx) {
+    this._resizeBox(ctx);
 
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-  /**
-   * Get the current datetime
-   * @return {String}  current The current date
-   */
-  DataStep.prototype.getCurrent = function() {
-    var toPrecision = '' + Number(this.current).toPrecision(5);
-    for (var i = toPrecision.length-1; i > 0; i--) {
-      if (toPrecision[i] == "0") {
-        toPrecision = toPrecision.slice(0,i);
-      }
-      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
-        toPrecision = toPrecision.slice(0,i);
-        break;
-      }
-      else{
-        break;
-      }
-    }
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    return toPrecision;
-  };
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
+      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
 
-  /**
-   * 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
-   */
-  DataStep.prototype.snap = function(date) {
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  /**
-   * Check if the current value is a major value (for example when the step
-   * is DAY, a major value is each first day of the MONTH)
-   * @return {boolean} true if current date is major, else false.
-   */
-  DataStep.prototype.isMajor = function() {
-    return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+
+  Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var size = textSize.width + 2 * margin;
+      this.width = size;
+      this.height = size;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
+    }
   };
 
-  module.exports = DataStep;
+  Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-/***/ },
-/* 35 */
-/***/ function(module, exports, __webpack_require__) {
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(8);
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
-   */
-  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;
+      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
+      ctx.stroke();
     }
-    this.itemsData = [];
-  }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  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 = [];
-    }
-  };
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
 
-  GraphGroup.prototype.setZeroPosition = function(pos) {
-    this.zeroPosition = pos;
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  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');
+  Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+      this.radius = diameter / 2;
 
-      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;
-            }
-          }
-        }
-      }
+      this.width = diameter;
+      this.height = diameter;
+
+      // scaling used for clustering
+  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.radius - 0.5*diameter;
     }
   };
 
-  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.setOptions(group.options);
-  };
+  Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
-    var fillHeight = iconHeight * 0.5;
-    var path, fillPath;
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-    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");
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    if (this.options.style == 'line') {
-      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-      path.setAttributeNS(null, "class", this.className);
-      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");
-      }
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-      if (this.options.drawPoints.enabled == true) {
-        DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
-      }
+      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
+      ctx.stroke();
     }
-    else {
-      var barWidth = Math.round(0.3 * iconWidth);
-      var bar1Height = Math.round(0.4 * iconHeight);
-      var bar2Height = Math.round(0.75 * iconHeight);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-      var offset = Math.round((iconWidth - (2 * barWidth))/3);
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-      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);
+    this._label(ctx, this.label, this.x, this.y);
+  };
+
+  Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+      var textSize = this.getTextSize(ctx);
+
+      this.width = textSize.width * 1.5;
+      this.height = textSize.height * 2;
+      if (this.width < this.height) {
+        this.width = this.height;
+      }
+      var defaultSize = this.width;
+
+        // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - defaultSize;
     }
   };
 
-  module.exports = GraphGroup;
+  Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-/***/ },
-/* 36 */
-/***/ function(module, exports, __webpack_require__) {
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(8);
-  var Component = __webpack_require__(19);
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   * Legend for Graph2d
-   */
-  function Legend(body, options, side) {
-    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
-      }
+      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
+      ctx.stroke();
     }
-    this.side = side;
-    this.options = util.extend({},this.defaultOptions);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    this.svgElements = {};
-    this.dom = {};
-    this.groups = {};
-    this.amountOfGroups = 0;
-    this._create();
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
-    this.setOptions(options);
-  }
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-  Legend.prototype = new Component();
+  Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+  };
 
+  Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
+  };
 
-  Legend.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
-    }
-    this.amountOfGroups += 1;
+  Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
   };
 
-  Legend.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
+  Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
   };
 
-  Legend.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
+  Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+  };
+
+  Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+      this.radius = this.baseRadiusValue;
+      var size = 2 * this.radius;
+      this.width = size;
+      this.height = size;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
   };
 
-  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";
+  Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
 
-    this.dom.textArea = document.createElement('div');
-    this.dom.textArea.className = 'legendText';
-    this.dom.textArea.style.position = "relative";
-    this.dom.textArea.style.top = "0px";
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    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';
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+    var radiusMultiplier = 2;
 
-    this.dom.frame.appendChild(this.svg);
-    this.dom.frame.appendChild(this.dom.textArea);
-  };
+    // choose draw method depending on the shape
+    switch (shape) {
+      case 'dot':           radiusMultiplier = 2; break;
+      case 'square':        radiusMultiplier = 2; break;
+      case 'triangle':      radiusMultiplier = 3; break;
+      case 'triangleDown':  radiusMultiplier = 3; break;
+      case 'star':          radiusMultiplier = 4; break;
+    }
 
-  /**
-   * Hide the component from the DOM
-   */
-  Legend.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
+      ctx.stroke();
     }
-  };
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
-   */
-  Legend.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    if (this.label) {
+      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
     }
   };
 
-  Legend.prototype.setOptions = function(options) {
-    var fields = ['enabled','orientation','icons','left','right'];
-    util.selectiveDeepExtend(fields, this.options, options);
-  };
+  Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
 
-  Legend.prototype.redraw = function() {
-    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
-      this.hide();
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
     }
-    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 (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 {
-        this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
-        this.dom.frame.style.top = '';
-      }
+  Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-      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();
+    this._label(ctx, this.label, this.x, this.y);
+  };
+
+
+  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
+    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = align || "center";
+      ctx.textBaseline = baseline || "middle";
+
+      var lines = text.split('\n');
+      var lineCount = lines.length;
+      var fontSize = (this.fontSize + 4);
+      var yLine = y + (1 - lineCount) / 2 * fontSize;
+      if (labelUnderNode == true) {
+        yLine = y + (1 - lineCount) / (2 * fontSize);
       }
 
-      var content = '';
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          content += this.groups[groupId].content + '<br />';
-        }
+      for (var i = 0; i < lineCount; i++) {
+        ctx.fillText(lines[i], x, yLine);
+        yLine += fontSize;
       }
-      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';
+  Node.prototype.getTextSize = function(ctx) {
+    if (this.label !== undefined) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
 
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-          y += iconHeight + this.options.iconSpacing;
-        }
+      var lines = this.label.split('\n'),
+          height = (this.fontSize + 4) * lines.length,
+          width = 0;
+
+      for (var i = 0, iMax = lines.length; i < iMax; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width);
       }
 
-      DOMutil.cleanupElements(this.svgElements);
+      return {"width": width, "height": height};
+    }
+    else {
+      return {"width": 0, "height": 0};
     }
   };
 
-  module.exports = Legend;
-
+  /**
+   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+   * there is a safety margin of 0.3 * width;
+   *
+   * @returns {boolean}
+   */
+  Node.prototype.inArea = function() {
+    if (this.width !== undefined) {
+    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
+            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
+            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
+            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+    }
+    else {
+      return true;
+    }
+  };
 
-/***/ },
-/* 37 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+   * @returns {boolean}
+   */
+  Node.prototype.inView = function() {
+    return (this.x >= this.canvasTopLeft.x    &&
+            this.x < this.canvasBottomRight.x &&
+            this.y >= this.canvasTopLeft.y    &&
+            this.y < this.canvasBottomRight.y);
+  };
 
-  var Emitter = __webpack_require__(12);
-  var Hammer = __webpack_require__(3);
-  var mousetrap = __webpack_require__(38);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(9);
-  var DataView = __webpack_require__(10);
-  var dotparser = __webpack_require__(39);
-  var Groups = __webpack_require__(40);
-  var Images = __webpack_require__(41);
-  var Node = __webpack_require__(42);
-  var Edge = __webpack_require__(43);
-  var Popup = __webpack_require__(44);
-  var MixinLoader = __webpack_require__(45);
+  /**
+   * This allows the zoom level of the network to influence the rendering
+   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+   *
+   * @param scale
+   * @param canvasTopLeft
+   * @param canvasBottomRight
+   */
+  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+    this.canvasTopLeft = canvasTopLeft;
+    this.canvasBottomRight = canvasBottomRight;
+  };
 
-  // Load custom shapes into CanvasRenderingContext2D
-  __webpack_require__(56);
 
   /**
-   * @constructor Network
-   * Create a network visualization, displaying nodes and edges.
+   * This allows the zoom level of the network to influence the rendering
    *
-   * @param {Element} container   The DOM element in which the Network will
-   *                                  be created. Normally a div element.
-   * @param {Object} data         An object containing parameters
-   *                              {Array} nodes
-   *                              {Array} edges
-   * @param {Object} options      Options
+   * @param scale
    */
-  function Network (container, data, options) {
-    if (!(this instanceof Network)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+  Node.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+  };
 
-    this._initializeMixinLoaders();
 
-    // create variables and set default values
-    this.containerElement = container;
-    this.width = '100%';
-    this.height = '100%';
 
-    // render and calculation settings
-    this.renderRefreshRate = 60;                         // hz (fps)
-    this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
-    this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
-    this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
-    this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
+  /**
+   * set the velocity at 0. Is called when this node is contained in another during clustering
+   */
+  Node.prototype.clearVelocity = function() {
+    this.vx = 0;
+    this.vy = 0;
+  };
 
-    this.stabilize = true;  // stabilize before displaying the network
-    this.selectable = true;
-    this.initializing = true;
 
-    // these functions are triggered when the dataset is edited
-    this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
+  /**
+   * Basic preservation of (kinectic) energy
+   *
+   * @param massBeforeClustering
+   */
+  Node.prototype.updateVelocity = function(massBeforeClustering) {
+    var energyBefore = this.vx * this.vx * massBeforeClustering;
+    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vx = Math.sqrt(energyBefore/this.mass);
+    energyBefore = this.vy * this.vy * massBeforeClustering;
+    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vy = Math.sqrt(energyBefore/this.mass);
+  };
 
+  module.exports = Node;
 
-    // set constant values
-    this.constants = {
-      nodes: {
-        radiusMin: 10,
-        radiusMax: 30,
-        radius: 10,
-        shape: 'ellipse',
-        image: undefined,
-        widthMin: 16, // px
-        widthMax: 64, // px
-        fixed: false,
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        level: -1,
-        color: {
-            border: '#2B7CE9',
-            background: '#97C2FC',
-          highlight: {
-            border: '#2B7CE9',
-            background: '#D2E5FF'
-          },
-          hover: {
-            border: '#2B7CE9',
-            background: '#D2E5FF'
+
+/***/ },
+/* 31 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * Popup is a class to create a popup window with some text
+   * @param {Element}  container     The container object.
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {String} [text]
+   * @param {Object} [style]     An object containing borderColor,
+   *                             backgroundColor, etc.
+   */
+  function Popup(container, x, y, text, style) {
+    if (container) {
+      this.container = container;
+    }
+    else {
+      this.container = document.body;
+    }
+
+    // x, y and text are optional, see if a style object was passed in their place
+    if (style === undefined) {
+      if (typeof x === "object") {
+        style = x;
+        x = undefined;
+      } else if (typeof text === "object") {
+        style = text;
+        text = undefined;
+      } else {
+        // for backwards compatibility, in case clients other than Network are creating Popup directly
+        style = {
+          fontColor: 'black',
+          fontSize: 14, // px
+          fontFace: 'verdana',
+          color: {
+            border: '#666',
+            background: '#FFFFC6'
           }
-        },
-        borderColor: '#2B7CE9',
-        backgroundColor: '#97C2FC',
-        highlightColor: '#D2E5FF',
-        group: undefined
-      },
-      edges: {
-        widthMin: 1,
-        widthMax: 15,
-        width: 1,
-        widthSelectionMultiplier: 2,
-        hoverWidth: 1.5,
-        style: 'line',
-        color: {
-          color:'#848484',
-          highlight:'#848484',
-          hover: '#848484'
-        },
-        fontColor: '#343434',
-        fontSize: 14, // px
-        fontFace: 'arial',
-        fontFill: 'white',
-        arrowScaleFactor: 1,
-        dash: {
-          length: 10,
-          gap: 5,
-          altLength: undefined
-        },
-        inheritColor: "from" // to, from, false, true (== from)
-      },
-      configurePhysics:false,
-      physics: {
-        barnesHut: {
-          enabled: true,
-          theta: 1 / 0.6, // inverted to save time during calculation
-          gravitationalConstant: -2000,
-          centralGravity: 0.3,
-          springLength: 95,
-          springConstant: 0.04,
-          damping: 0.09
-        },
-        repulsion: {
-          centralGravity: 0.1,
-          springLength: 200,
-          springConstant: 0.05,
-          nodeDistance: 100,
-          damping: 0.09
-        },
-        hierarchicalRepulsion: {
-          enabled: false,
-          centralGravity: 0.5,
-          springLength: 150,
-          springConstant: 0.01,
-          nodeDistance: 60,
-          damping: 0.09
-        },
-        damping: null,
-        centralGravity: null,
-        springLength: null,
-        springConstant: null
-      },
-      clustering: {                   // Per Node in Cluster = PNiC
-        enabled: false,               // (Boolean)             | global on/off switch for clustering.
-        initialMaxNodes: 100,         // (# nodes)             | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
-        clusterThreshold:500,         // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
-        reduceToNodes:300,            // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
-        chainThreshold: 0.4,          // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
-        clusterEdgeThreshold: 20,     // (px)                  | edge length threshold. if smaller, this node is clustered.
-        sectorThreshold: 100,         // (# nodes in cluster)  | cluster size threshold. If larger, expanding in own sector.
-        screenSizeThreshold: 0.2,     // (% of canvas)         | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
-        fontSizeMultiplier: 4.0,      // (px PNiC)             | how much the cluster font size grows per node in cluster (in px).
-        maxFontSize: 1000,
-        forceAmplification: 0.1,      // (multiplier PNiC)     | factor of increase fo the repulsion force of a cluster (per node in cluster).
-        distanceAmplification: 0.1,   // (multiplier PNiC)     | factor how much the repulsion distance of a cluster increases (per node in cluster).
-        edgeGrowth: 20,               // (px PNiC)             | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
-        nodeScaling: {width:  1,      // (px PNiC)             | growth of the width  per node in cluster.
-                      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
-      },
-      navigation: {
-        enabled: false
-      },
-      keyboard: {
-        enabled: false,
-        speed: {x: 10, y: 10, zoom: 0.02}
-      },
-      dataManipulation: {
-        enabled: false,
-        initiallyVisible: false
-      },
-      hierarchicalLayout: {
-        enabled:false,
-        levelSeparation: 150,
-        nodeSpacing: 100,
-        direction: "UD"   // UD, DU, LR, RL
-      },
-      freezeForStabilization: false,
-      smoothCurves: {
-        enabled: true,
-        dynamic: true,
-        type: "continuous",
-        roundness: 0.5
-      },
-      dynamicSmoothCurves: true,
-      maxVelocity:  30,
-      minVelocity:  0.1,   // px/s
-      stabilizationIterations: 1000,  // maximum number of iteration to stabilize
-      labels:{
-        add:"Add Node",
-        edit:"Edit",
-        link:"Add Link",
-        del:"Delete selected",
-        editNode:"Edit Node",
-        editEdge:"Edit Edge",
-        back:"Back",
-        addDescription:"Click in an empty space to place a new node.",
-        linkDescription:"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.",
-        addError:"The function for add does not support two arguments (data,callback).",
-        linkError:"The function for connect does not support two arguments (data,callback).",
-        editError:"The function for edit does not support two arguments (data, callback).",
-        editBoundError:"No edit function has been bound to this button.",
-        deleteError:"The function for delete does not support two arguments (data, callback).",
-        deleteClusterError:"Clusters cannot be deleted."
-      },
-      tooltip: {
-        delay: 300,
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        color: {
-          border: '#666',
-          background: '#FFFFC6'
         }
-      },
-      dragNetwork: true,
-      dragNodes: true,
-      zoomable: true,
-      hover: false,
-      hideEdgesOnDrag: false,
-      hideNodesOnDrag: false
-    };
-    this.hoverObj = {nodes:{},edges:{}};
-    this.controlNodesActive = false;
-
-    // Node variables
-    var network = this;
-    this.groups = new Groups(); // object with groups
-    this.images = new Images(); // object with images
-    this.images.setOnloadCallback(function () {
-      network._redraw();
-    });
+      }
+    }
 
-    // keyboard navigation variables
-    this.xIncrement = 0;
-    this.yIncrement = 0;
-    this.zoomIncrement = 0;
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
 
-    // loading all the mixins:
-    // load the force calculation functions, grouped under the physics system.
-    this._loadPhysicsSystem();
-    // create a frame and canvas
-    this._create();
-    // load the sector system.    (mandatory, fully integrated with Network)
-    this._loadSectorSystem();
-    // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
-    this._loadClusterSystem();
-    // load the selection system. (mandatory, required by Network)
-    this._loadSelectionSystem();
-    // load the selection system. (mandatory, required by Network)
-    this._loadHierarchySystem();
+    if (x !== undefined && y !== undefined ) {
+      this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+      this.setText(text);
+    }
 
-    // apply options
-    this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
-    this._setScale(1);
-    this.setOptions(options);
+    // create the frame
+    this.frame = document.createElement("div");
+    var styleAttr = this.frame.style;
+    styleAttr.position = "absolute";
+    styleAttr.visibility = "hidden";
+    styleAttr.border = "1px solid " + style.color.border;
+    styleAttr.color = style.fontColor;
+    styleAttr.fontSize = style.fontSize + "px";
+    styleAttr.fontFamily = style.fontFace;
+    styleAttr.padding = this.padding + "px";
+    styleAttr.backgroundColor = style.color.background;
+    styleAttr.borderRadius = "3px";
+    styleAttr.MozBorderRadius = "3px";
+    styleAttr.WebkitBorderRadius = "3px";
+    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    styleAttr.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+  }
 
-    // other vars
-    this.freezeSimulation = false;// freeze the simulation
-    this.cachedFunctions = {};
+  /**
+   * @param {number} x   Horizontal position of the popup window
+   * @param {number} y   Vertical position of the popup window
+   */
+  Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
+  };
 
-    // containers for nodes and edges
-    this.calculationNodes = {};
-    this.calculationNodeIndices = [];
-    this.nodeIndices = [];        // array with all the indices of the nodes. Used to speed up forces calculation
-    this.nodes = {};              // object with Node objects
-    this.edges = {};              // object with Edge objects
+  /**
+   * Set the text for the popup window. This can be HTML code
+   * @param {string} text
+   */
+  Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
+  };
 
-    // position and scale variables and objects
-    this.canvasTopLeft     = {"x": 0,"y": 0};   // coordinates of the top left of the canvas.     they will be set during _redraw.
-    this.canvasBottomRight = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
-    this.pointerPosition = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
-    this.areaCenter = {};               // object with x and y elements used for determining the center of the zoom action
-    this.scale = 1;                     // defining the global scale variable in the constructor
-    this.previousScale = this.scale;    // this is used to check if the zoom operation is zooming in or out
+  /**
+   * Show the popup window
+   * @param {boolean} show    Optional. Show or hide the window
+   */
+  Popup.prototype.show = function (show) {
+    if (show === undefined) {
+      show = true;
+    }
 
-    // datasets or dataviews
-    this.nodesData = null;      // A DataSet or DataView
-    this.edgesData = null;      // A DataSet or DataView
+    if (show) {
+      var height = this.frame.clientHeight;
+      var width =  this.frame.clientWidth;
+      var maxHeight = this.frame.parentNode.clientHeight;
+      var maxWidth = this.frame.parentNode.clientWidth;
 
-    // create event listeners used to subscribe on the DataSets of the nodes and edges
-    this.nodesListeners = {
-      'add': function (event, params) {
-        network._addNodes(params.items);
-        network.start();
-      },
-      'update': function (event, params) {
-        network._updateNodes(params.items);
-        network.start();
-      },
-      'remove': function (event, params) {
-        network._removeNodes(params.items);
-        network.start();
+      var top = (this.y - height);
+      if (top + height + this.padding > maxHeight) {
+        top = maxHeight - height - this.padding;
       }
-    };
-    this.edgesListeners = {
-      'add': function (event, params) {
-        network._addEdges(params.items);
-        network.start();
-      },
-      'update': function (event, params) {
-        network._updateEdges(params.items);
-        network.start();
-      },
-      'remove': function (event, params) {
-        network._removeEdges(params.items);
-        network.start();
+      if (top < this.padding) {
+        top = this.padding;
       }
-    };
-
-    // properties for the animation
-    this.moving = true;
-    this.timer = undefined; // Scheduling function. Is definded in this.start();
 
-    // load data (the disable start variable will be the same as the enabled clustering)
-    this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
+      var left = this.x;
+      if (left + width + this.padding > maxWidth) {
+        left = maxWidth - width - this.padding;
+      }
+      if (left < this.padding) {
+        left = this.padding;
+      }
 
-    // hierarchical layout
-    this.initializing = false;
-    if (this.constants.hierarchicalLayout.enabled == true) {
-      this._setupHierarchicalLayout();
+      this.frame.style.left = left + "px";
+      this.frame.style.top = top + "px";
+      this.frame.style.visibility = "visible";
     }
     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.stabilize == false) {
-        this.zoomExtent(true,this.constants.clustering.enabled);
-      }
-    }
-
-    // if clustering is disabled, the simulation will have started in the setData function
-    if (this.constants.clustering.enabled) {
-      this.startWithClustering();
+      this.hide();
     }
-  }
-
-  // Extend Network with an Emitter mixin
-  Emitter(Network.prototype);
+  };
 
   /**
-   * Get the script path where the vis.js library is located
-   *
-   * @returns {string | null} path   Path or null when not found. Path does not
-   *                                 end with a slash.
-   * @private
+   * Hide the popup window
    */
-  Network.prototype._getScriptPath = function() {
-    var scripts = document.getElementsByTagName( 'script' );
+  Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
+  };
 
-    // find script named vis.js or vis.min.js
-    for (var i = 0; i < scripts.length; i++) {
-      var src = scripts[i].src;
-      var match = src && /\/?vis(.min)?\.js$/.exec(src);
-      if (match) {
-        // return path without the script name
-        return src.substring(0, src.length - match[0].length);
-      }
-    }
+  module.exports = Popup;
 
-    return null;
-  };
 
+/***/ },
+/* 32 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Find the center position of the network
-   * @private
+   * Parse a text source containing data in DOT language into a JSON object.
+   * The object contains two lists: one with nodes and one with edges.
+   *
+   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+   *
+   * @param {String} data     Text containing a graph in DOT-notation
+   * @return {Object} graph   An object containing two parameters:
+   *                          {Object[]} nodes
+   *                          {Object[]} edges
    */
-  Network.prototype._getRange = function() {
-    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.x)) {minX = node.x;}
-        if (maxX < (node.x)) {maxX = node.x;}
-        if (minY > (node.y)) {minY = node.y;}
-        if (maxY < (node.y)) {maxY = node.y;}
-      }
-    }
-    if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
-      minY = 0, maxY = 0, minX = 0, maxX = 0;
-    }
-    return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+  function parseDOT (data) {
+    dot = data;
+    return parseGraph();
+  }
+
+  // token types enumeration
+  var TOKENTYPE = {
+    NULL : 0,
+    DELIMITER : 1,
+    IDENTIFIER: 2,
+    UNKNOWN : 3
   };
 
+  // map with all delimiters
+  var DELIMITERS = {
+    '{': true,
+    '}': true,
+    '[': true,
+    ']': true,
+    ';': true,
+    '=': true,
+    ',': true,
 
-  /**
-   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
-   * @returns {{x: number, y: number}}
-   * @private
-   */
-  Network.prototype._findCenter = function(range) {
-    return {x: (0.5 * (range.maxX + range.minX)),
-            y: (0.5 * (range.maxY + range.minY))};
+    '->': true,
+    '--': true
   };
 
+  var dot = '';                   // current dot file
+  var index = 0;                  // current index in dot file
+  var c = '';                     // current token character in expr
+  var token = '';                 // current token
+  var tokenType = TOKENTYPE.NULL; // type of the token
 
   /**
-   * center the network
-   *
-   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+   * Get the first character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
    */
-  Network.prototype._centerNetwork = function(range) {
-    var center = this._findCenter(range);
+  function first() {
+    index = 0;
+    c = dot.charAt(0);
+  }
 
-    center.x *= this.scale;
-    center.y *= this.scale;
-    center.x -= 0.5 * this.frame.canvas.clientWidth;
-    center.y -= 0.5 * this.frame.canvas.clientHeight;
+  /**
+   * Get the next character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
+   */
+  function next() {
+    index++;
+    c = dot.charAt(index);
+  }
 
-    this._setTranslation(-center.x,-center.y); // set at 0,0
-  };
+  /**
+   * Preview the next character from the dot file.
+   * @return {String} cNext
+   */
+  function nextPreview() {
+    return dot.charAt(index + 1);
+  }
 
+  /**
+   * Test whether given character is alphabetic or numeric
+   * @param {String} c
+   * @return {Boolean} isAlphaNumeric
+   */
+  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+  function isAlphaNumeric(c) {
+    return regexAlphaNumeric.test(c);
+  }
 
   /**
-   * This function zooms out to fit all data on screen based on amount of nodes
-   *
-   * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
-   * @param {Boolean} [disableStart] | If true, start is not called.
+   * Merge all properties of object b into object b
+   * @param {Object} a
+   * @param {Object} b
+   * @return {Object} a
    */
-  Network.prototype.zoomExtent = function(initialZoom, disableStart) {
-    if (initialZoom === undefined) {
-      initialZoom = false;
-    }
-    if (disableStart === undefined) {
-      disableStart = false;
+  function merge (a, b) {
+    if (!a) {
+      a = {};
     }
 
-    var range = this._getRange();
-    var zoomLevel;
-
-    if (initialZoom == true) {
-      var numberOfNodes = this.nodeIndices.length;
-      if (this.constants.smoothCurves == true) {
-        if (this.constants.clustering.enabled == true &&
-          numberOfNodes >= this.constants.clustering.initialMaxNodes) {
-          zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+    if (b) {
+      for (var name in b) {
+        if (b.hasOwnProperty(name)) {
+          a[name] = b[name];
         }
-        else {
-          zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+      }
+    }
+    return a;
+  }
+
+  /**
+   * Set a value in an object, where the provided parameter name can be a
+   * path with nested parameters. For example:
+   *
+   *     var obj = {a: 2};
+   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   *
+   * @param {Object} obj
+   * @param {String} path  A parameter name or dot-separated parameter path,
+   *                      like "color.highlight.border".
+   * @param {*} value
+   */
+  function setValue(obj, path, value) {
+    var keys = path.split('.');
+    var o = obj;
+    while (keys.length) {
+      var key = keys.shift();
+      if (keys.length) {
+        // this isn't the end point
+        if (!o[key]) {
+          o[key] = {};
         }
+        o = o[key];
       }
       else {
-        if (this.constants.clustering.enabled == true &&
-            numberOfNodes >= this.constants.clustering.initialMaxNodes) {
-          zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-        else {
-          zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
+        // this is the end point
+        o[key] = value;
       }
-
-      // correct for larger canvasses.
-      var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
-      zoomLevel *= factor;
     }
-    else {
-      var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
-      var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
+  }
 
-      var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
-      var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
+  /**
+   * Add a node to a graph object. If there is already a node with
+   * the same id, their attributes will be merged.
+   * @param {Object} graph
+   * @param {Object} node
+   */
+  function addNode(graph, node) {
+    var i, len;
+    var current = null;
 
-      zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
+    // find root graph (in case of subgraph)
+    var graphs = [graph]; // list with all graphs from current graph to root graph
+    var root = graph;
+    while (root.parent) {
+      graphs.push(root.parent);
+      root = root.parent;
     }
 
-    if (zoomLevel > 1.0) {
-      zoomLevel = 1.0;
+    // find existing node (at root level) by its id
+    if (root.nodes) {
+      for (i = 0, len = root.nodes.length; i < len; i++) {
+        if (node.id === root.nodes[i].id) {
+          current = root.nodes[i];
+          break;
+        }
+      }
     }
 
-
-    this._setScale(zoomLevel);
-    this._centerNetwork(range);
-    if (disableStart == false) {
-      this.moving = true;
-      this.start();
+    if (!current) {
+      // this is a new node
+      current = {
+        id: node.id
+      };
+      if (graph.node) {
+        // clone default attributes
+        current.attr = merge(current.attr, graph.node);
+      }
     }
-  };
 
+    // add node to this (sub)graph and all its parent graphs
+    for (i = graphs.length - 1; i >= 0; i--) {
+      var g = graphs[i];
 
-  /**
-   * Update the this.nodeIndices with the most recent node index list
-   * @private
-   */
-  Network.prototype._updateNodeIndexList = function() {
-    this._clearNodeIndexList();
-    for (var idx in this.nodes) {
-      if (this.nodes.hasOwnProperty(idx)) {
-        this.nodeIndices.push(idx);
+      if (!g.nodes) {
+        g.nodes = [];
+      }
+      if (g.nodes.indexOf(current) == -1) {
+        g.nodes.push(current);
       }
     }
-  };
 
+    // merge attributes
+    if (node.attr) {
+      current.attr = merge(current.attr, node.attr);
+    }
+  }
 
   /**
-   * Set nodes and edges, and optionally options as well.
-   *
-   * @param {Object} data              Object containing parameters:
-   *                                   {Array | DataSet | DataView} [nodes] Array with nodes
-   *                                   {Array | DataSet | DataView} [edges] Array with edges
-   *                                   {String} [dot] String containing data in DOT format
-   *                                   {Options} [options] Object with options
-   * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
+   * Add an edge to a graph object
+   * @param {Object} graph
+   * @param {Object} edge
    */
-  Network.prototype.setData = function(data, disableStart) {
-    if (disableStart === undefined) {
-      disableStart = false;
+  function addEdge(graph, edge) {
+    if (!graph.edges) {
+      graph.edges = [];
     }
-
-    if (data && data.dot && (data.nodes || data.edges)) {
-      throw new SyntaxError('Data must contain either parameter "dot" or ' +
-          ' parameter pair "nodes" and "edges", but not both.');
+    graph.edges.push(edge);
+    if (graph.edge) {
+      var attr = merge({}, graph.edge);     // clone default attributes
+      edge.attr = merge(attr, edge.attr); // merge attributes
     }
+  }
 
-    // set options
-    this.setOptions(data && data.options);
+  /**
+   * Create an edge to a graph object
+   * @param {Object} graph
+   * @param {String | Number | Object} from
+   * @param {String | Number | Object} to
+   * @param {String} type
+   * @param {Object | null} attr
+   * @return {Object} edge
+   */
+  function createEdge(graph, from, to, type, attr) {
+    var edge = {
+      from: from,
+      to: to,
+      type: type
+    };
 
-    // set all data
-    if (data && data.dot) {
-      // parse DOT file
-      if(data && data.dot) {
-        var dotData = dotparser.DOTToGraph(data.dot);
-        this.setData(dotData);
-        return;
-      }
-    }
-    else {
-      this._setNodes(data && data.nodes);
-      this._setEdges(data && data.edges);
+    if (graph.edge) {
+      edge.attr = merge({}, graph.edge);  // clone default attributes
     }
+    edge.attr = merge(edge.attr || {}, attr); // merge attributes
 
-    this._putDataInSector();
-
-    if (!disableStart) {
-      // find a stable position or start animating to a stable position
-      if (this.stabilize) {
-        var me = this;
-        setTimeout(function() {me._stabilize(); me.start();},0)
-      }
-      else {
-        this.start();
-      }
-    }
-  };
+    return edge;
+  }
 
   /**
-   * Set options
-   * @param {Object} options
-   * @param {Boolean} [initializeView] | set zoom and translation to default.
+   * Get next token in the current dot file.
+   * The token and token type are available as token and tokenType
    */
-  Network.prototype.setOptions = function (options) {
-    if (options) {
-      var prop;
-      // retrieve parameter values
-      if (options.width !== undefined)           {this.width = options.width;}
-      if (options.height !== undefined)          {this.height = options.height;}
-      if (options.stabilize !== undefined)       {this.stabilize = options.stabilize;}
-      if (options.selectable !== undefined)      {this.selectable = options.selectable;}
-      if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
-      if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
-      if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
-      if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
-      if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
-      if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
-      if (options.hover !== undefined)           {this.constants.hover = options.hover;}
-      if (options.hideEdgesOnDrag !== undefined) {this.constants.hideEdgesOnDrag = options.hideEdgesOnDrag;}
-      if (options.hideNodesOnDrag !== undefined) {this.constants.hideNodesOnDrag = options.hideNodesOnDrag;}
-
-      // TODO: deprecated since version 3.0.0. Cleanup some day
-      if (options.dragGraph !== undefined) {
-        throw new Error('Option dragGraph is renamed to dragNetwork');
-      }
-
-      if (options.labels !== undefined)  {
-        for (prop in options.labels) {
-          if (options.labels.hasOwnProperty(prop)) {
-            this.constants.labels[prop] = options.labels[prop];
-          }
-        }
-      }
-
-      if (options.onAdd) {
-          this.triggerFunctions.add = options.onAdd;
-        }
-
-      if (options.onEdit) {
-        this.triggerFunctions.edit = options.onEdit;
-      }
-
-      if (options.onEditEdge) {
-        this.triggerFunctions.editEdge = options.onEditEdge;
-      }
-
-      if (options.onConnect) {
-        this.triggerFunctions.connect = options.onConnect;
-      }
+  function getToken() {
+    tokenType = TOKENTYPE.NULL;
+    token = '';
 
-      if (options.onDelete) {
-        this.triggerFunctions.del = options.onDelete;
-      }
+    // skip over whitespaces
+    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+      next();
+    }
 
-      if (options.physics) {
-        if (options.physics.barnesHut) {
-          this.constants.physics.barnesHut.enabled = true;
-          for (prop in options.physics.barnesHut) {
-            if (options.physics.barnesHut.hasOwnProperty(prop)) {
-              this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
-            }
-          }
-        }
+    do {
+      var isComment = false;
 
-        if (options.physics.repulsion) {
-          this.constants.physics.barnesHut.enabled = false;
-          for (prop in options.physics.repulsion) {
-            if (options.physics.repulsion.hasOwnProperty(prop)) {
-              this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
-            }
-          }
+      // skip comment
+      if (c == '#') {
+        // find the previous non-space character
+        var i = index - 1;
+        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+          i--;
         }
-
-        if (options.physics.hierarchicalRepulsion) {
-          this.constants.hierarchicalLayout.enabled = true;
-          this.constants.physics.hierarchicalRepulsion.enabled = true;
-          this.constants.physics.barnesHut.enabled = false;
-          for (prop in options.physics.hierarchicalRepulsion) {
-            if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
-              this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
-            }
+        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+          // the # is at the start of a line, this is indeed a line comment
+          while (c != '' && c != '\n') {
+            next();
           }
+          isComment = true;
         }
       }
-
-      if (options.smoothCurves !== undefined) {
-        if (typeof options.smoothCurves == 'boolean') {
-          this.constants.smoothCurves.enabled = options.smoothCurves;
-        }
-        else {
-          this.constants.smoothCurves.enabled = true;
-          for (prop in options.smoothCurves) {
-            if (options.smoothCurves.hasOwnProperty(prop)) {
-              this.constants.smoothCurves[prop] = options.smoothCurves[prop];
-            }
-          }
+      if (c == '/' && nextPreview() == '/') {
+        // skip line comment
+        while (c != '' && c != '\n') {
+          next();
         }
+        isComment = true;
       }
-
-      if (options.hierarchicalLayout) {
-        this.constants.hierarchicalLayout.enabled = true;
-        for (prop in options.hierarchicalLayout) {
-          if (options.hierarchicalLayout.hasOwnProperty(prop)) {
-            this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
+      if (c == '/' && nextPreview() == '*') {
+        // skip block comment
+        while (c != '') {
+          if (c == '*' && nextPreview() == '/') {
+            // end of block comment found. skip these last two characters
+            next();
+            next();
+            break;
           }
-        }
-      }
-      else if (options.hierarchicalLayout !== undefined)  {
-        this.constants.hierarchicalLayout.enabled = false;
-      }
-
-      if (options.clustering) {
-        this.constants.clustering.enabled = true;
-        for (prop in options.clustering) {
-          if (options.clustering.hasOwnProperty(prop)) {
-            this.constants.clustering[prop] = options.clustering[prop];
+          else {
+            next();
           }
         }
+        isComment = true;
       }
-      else if (options.clustering !== undefined)  {
-        this.constants.clustering.enabled = false;
+
+      // skip over whitespaces
+      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+        next();
       }
+    }
+    while (isComment);
 
-      if (options.navigation) {
-        this.constants.navigation.enabled = true;
-        for (prop in options.navigation) {
-          if (options.navigation.hasOwnProperty(prop)) {
-            this.constants.navigation[prop] = options.navigation[prop];
-          }
-        }
+    // check for end of dot file
+    if (c == '') {
+      // token is still empty
+      tokenType = TOKENTYPE.DELIMITER;
+      return;
+    }
+
+    // check for delimiters consisting of 2 characters
+    var c2 = c + nextPreview();
+    if (DELIMITERS[c2]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c2;
+      next();
+      next();
+      return;
+    }
+
+    // check for delimiters consisting of 1 character
+    if (DELIMITERS[c]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c;
+      next();
+      return;
+    }
+
+    // check for an identifier (number or string)
+    // TODO: more precise parsing of numbers/strings (and the port separator ':')
+    if (isAlphaNumeric(c) || c == '-') {
+      token += c;
+      next();
+
+      while (isAlphaNumeric(c)) {
+        token += c;
+        next();
       }
-      else if (options.navigation !== undefined) {
-        this.constants.navigation.enabled = false;
+      if (token == 'false') {
+        token = false;   // convert to boolean
       }
-
-      if (options.keyboard) {
-        this.constants.keyboard.enabled = true;
-        for (prop in options.keyboard) {
-          if (options.keyboard.hasOwnProperty(prop)) {
-            this.constants.keyboard[prop] = options.keyboard[prop];
-          }
-        }
+      else if (token == 'true') {
+        token = true;   // convert to boolean
       }
-      else if (options.keyboard !== undefined)  {
-        this.constants.keyboard.enabled = false;
+      else if (!isNaN(Number(token))) {
+        token = Number(token); // convert to number
       }
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
+    }
 
-      if (options.dataManipulation) {
-        this.constants.dataManipulation.enabled = true;
-        for (prop in options.dataManipulation) {
-          if (options.dataManipulation.hasOwnProperty(prop)) {
-            this.constants.dataManipulation[prop] = options.dataManipulation[prop];
-          }
+    // check for a string enclosed by double quotes
+    if (c == '"') {
+      next();
+      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+        token += c;
+        if (c == '"') { // skip the escape character
+          next();
         }
-        this.editMode = this.constants.dataManipulation.initiallyVisible;
+        next();
       }
-      else if (options.dataManipulation !== undefined)  {
-        this.constants.dataManipulation.enabled = false;
+      if (c != '"') {
+        throw newSyntaxError('End of string " expected');
       }
+      next();
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
+    }
 
-      // TODO: work out these options and document them
-      if (options.edges) {
-        for (prop in options.edges) {
-          if (options.edges.hasOwnProperty(prop)) {
-            if (typeof options.edges[prop] != "object") {
-              this.constants.edges[prop] = options.edges[prop];
-            }
-          }
-        }
+    // something unknown is found, wrong characters, a syntax error
+    tokenType = TOKENTYPE.UNKNOWN;
+    while (c != '') {
+      token += c;
+      next();
+    }
+    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+  }
 
-        if (options.edges.color !== undefined) {
-          if (util.isString(options.edges.color)) {
-            this.constants.edges.color = {};
-            this.constants.edges.color.color = options.edges.color;
-            this.constants.edges.color.highlight = options.edges.color;
-            this.constants.edges.color.hover = options.edges.color;
-          }
-          else {
-            if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
-            if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
-            if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
-          }
-        }
+  /**
+   * Parse a graph.
+   * @returns {Object} graph
+   */
+  function parseGraph() {
+    var graph = {};
 
-        if (!options.edges.fontColor) {
-          if (options.edges.color !== undefined) {
-            if (util.isString(options.edges.color))           {this.constants.edges.fontColor = options.edges.color;}
-            else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.color;}
-          }
-        }
+    first();
+    getToken();
 
-        // Added to support dashed lines
-        // David Jordan
-        // 2012-08-08
-        if (options.edges.dash) {
-          if (options.edges.dash.length !== undefined) {
-            this.constants.edges.dash.length = options.edges.dash.length;
-          }
-          if (options.edges.dash.gap !== undefined) {
-            this.constants.edges.dash.gap = options.edges.dash.gap;
-          }
-          if (options.edges.dash.altLength !== undefined) {
-            this.constants.edges.dash.altLength = options.edges.dash.altLength;
-          }
-        }
-      }
+    // optional strict keyword
+    if (token == 'strict') {
+      graph.strict = true;
+      getToken();
+    }
 
-      if (options.nodes) {
-        for (prop in options.nodes) {
-          if (options.nodes.hasOwnProperty(prop)) {
-            this.constants.nodes[prop] = options.nodes[prop];
-          }
-        }
+    // graph or digraph keyword
+    if (token == 'graph' || token == 'digraph') {
+      graph.type = token;
+      getToken();
+    }
 
-        if (options.nodes.color) {
-          this.constants.nodes.color = util.parseColor(options.nodes.color);
-        }
+    // optional graph id
+    if (tokenType == TOKENTYPE.IDENTIFIER) {
+      graph.id = token;
+      getToken();
+    }
 
-        /*
-         if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
-         if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
-         */
-      }
-      if (options.groups) {
-        for (var groupname in options.groups) {
-          if (options.groups.hasOwnProperty(groupname)) {
-            var group = options.groups[groupname];
-            this.groups.add(groupname, group);
-          }
-        }
-      }
+    // open angle bracket
+    if (token != '{') {
+      throw newSyntaxError('Angle bracket { expected');
+    }
+    getToken();
 
-      if (options.tooltip) {
-        for (prop in options.tooltip) {
-          if (options.tooltip.hasOwnProperty(prop)) {
-            this.constants.tooltip[prop] = options.tooltip[prop];
-          }
-        }
-        if (options.tooltip.color) {
-          this.constants.tooltip.color = util.parseColor(options.tooltip.color);
-        }
+    // statements
+    parseStatements(graph);
+
+    // close angle bracket
+    if (token != '}') {
+      throw newSyntaxError('Angle bracket } expected');
+    }
+    getToken();
+
+    // end of file
+    if (token !== '') {
+      throw newSyntaxError('End of file expected');
+    }
+    getToken();
+
+    // remove temporary default properties
+    delete graph.node;
+    delete graph.edge;
+    delete graph.graph;
+
+    return graph;
+  }
+
+  /**
+   * Parse a list with statements.
+   * @param {Object} graph
+   */
+  function parseStatements (graph) {
+    while (token !== '' && token != '}') {
+      parseStatement(graph);
+      if (token == ';') {
+        getToken();
       }
     }
+  }
 
+  /**
+   * Parse a single statement. Can be a an attribute statement, node
+   * statement, a series of node statements and edge statements, or a
+   * parameter.
+   * @param {Object} graph
+   */
+  function parseStatement(graph) {
+    // parse subgraph
+    var subgraph = parseSubgraph(graph);
+    if (subgraph) {
+      // edge statements
+      parseEdge(graph, subgraph);
 
-    // (Re)loading the mixins that can be enabled or disabled in the options.
-    // load the force calculation functions, grouped under the physics system.
-    this._loadPhysicsSystem();
-    // load the navigation system.
-    this._loadNavigationControls();
-    // load the data manipulation system
-    this._loadManipulationSystem();
-    // configure the smooth curves
-    this._configureSmoothCurves();
+      return;
+    }
 
+    // parse an attribute statement
+    var attr = parseAttributeStatement(graph);
+    if (attr) {
+      return;
+    }
 
-    // bind keys. If disabled, this will not do anything;
-    this._createKeyBinds();
-    this.setSize(this.width, this.height);
-    this.moving = true;
-    this.start();
+    // parse node
+    if (tokenType != TOKENTYPE.IDENTIFIER) {
+      throw newSyntaxError('Identifier expected');
+    }
+    var id = token; // id can be a string or a number
+    getToken();
 
-  };
+    if (token == '=') {
+      // id statement
+      getToken();
+      if (tokenType != TOKENTYPE.IDENTIFIER) {
+        throw newSyntaxError('Identifier expected');
+      }
+      graph[id] = token;
+      getToken();
+      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
+    }
+    else {
+      parseNodeStatement(graph, id);
+    }
+  }
 
   /**
-   * Create the main frame for the Network.
-   * This function is executed once when a Network object is created. The frame
-   * contains a canvas, and this canvas contains all objects like the axis and
-   * nodes.
-   * @private
+   * Parse a subgraph
+   * @param {Object} graph    parent graph object
+   * @return {Object | null} subgraph
    */
-  Network.prototype._create = function () {
-    // remove all elements from the container element.
-    while (this.containerElement.hasChildNodes()) {
-      this.containerElement.removeChild(this.containerElement.firstChild);
-    }
+  function parseSubgraph (graph) {
+    var subgraph = null;
 
-    this.frame = document.createElement('div');
-    this.frame.className = 'network-frame';
-    this.frame.style.position = 'relative';
-    this.frame.style.overflow = 'hidden';
+    // optional subgraph keyword
+    if (token == 'subgraph') {
+      subgraph = {};
+      subgraph.type = 'subgraph';
+      getToken();
 
-    // create the network canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( 'canvas' );
-    this.frame.canvas.style.position = 'relative';
-    this.frame.appendChild(this.frame.canvas);
-    if (!this.frame.canvas.getContext) {
-      var noCanvas = document.createElement( 'DIV' );
-      noCanvas.style.color = 'red';
-      noCanvas.style.fontWeight =  'bold' ;
-      noCanvas.style.padding =  '10px';
-      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
-      this.frame.canvas.appendChild(noCanvas);
+      // optional graph id
+      if (tokenType == TOKENTYPE.IDENTIFIER) {
+        subgraph.id = token;
+        getToken();
+      }
     }
 
-    var me = this;
-    this.drag = {};
-    this.pinch = {};
-    this.hammer = Hammer(this.frame.canvas, {
-      prevent_default: true
-    });
-    this.hammer.on('tap',       me._onTap.bind(me) );
-    this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
-    this.hammer.on('hold',      me._onHold.bind(me) );
-    this.hammer.on('pinch',     me._onPinch.bind(me) );
-    this.hammer.on('touch',     me._onTouch.bind(me) );
-    this.hammer.on('dragstart', me._onDragStart.bind(me) );
-    this.hammer.on('drag',      me._onDrag.bind(me) );
-    this.hammer.on('dragend',   me._onDragEnd.bind(me) );
-    this.hammer.on('release',   me._onRelease.bind(me) );
-    this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
-    this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
-    this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
+    // open angle bracket
+    if (token == '{') {
+      getToken();
 
-    // add the frame to the container element
-    this.containerElement.appendChild(this.frame);
+      if (!subgraph) {
+        subgraph = {};
+      }
+      subgraph.parent = graph;
+      subgraph.node = graph.node;
+      subgraph.edge = graph.edge;
+      subgraph.graph = graph.graph;
 
-  };
+      // statements
+      parseStatements(subgraph);
+
+      // close angle bracket
+      if (token != '}') {
+        throw newSyntaxError('Angle bracket } expected');
+      }
+      getToken();
+
+      // remove temporary default properties
+      delete subgraph.node;
+      delete subgraph.edge;
+      delete subgraph.graph;
+      delete subgraph.parent;
+
+      // register at the parent graph
+      if (!graph.subgraphs) {
+        graph.subgraphs = [];
+      }
+      graph.subgraphs.push(subgraph);
+    }
 
+    return subgraph;
+  }
 
   /**
-   * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
-   * @private
+   * parse an attribute statement like "node [shape=circle fontSize=16]".
+   * Available keywords are 'node', 'edge', 'graph'.
+   * The previous list with default attributes will be replaced
+   * @param {Object} graph
+   * @returns {String | null} keyword Returns the name of the parsed attribute
+   *                                  (node, edge, graph), or null if nothing
+   *                                  is parsed.
    */
-  Network.prototype._createKeyBinds = function() {
-    var me = this;
-    this.mousetrap = mousetrap;
+  function parseAttributeStatement (graph) {
+    // attribute statements
+    if (token == 'node') {
+      getToken();
 
-    this.mousetrap.reset();
+      // node attributes
+      graph.node = parseAttributeList();
+      return 'node';
+    }
+    else if (token == 'edge') {
+      getToken();
 
-    if (this.constants.keyboard.enabled == true) {
-      this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
-      this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
-      this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
-      this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
-      this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("=",    this._zoomIn.bind(me),    "keydown");
-      this.mousetrap.bind("=",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("-",    this._zoomOut.bind(me),   "keydown");
-      this.mousetrap.bind("-",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("[",    this._zoomIn.bind(me),    "keydown");
-      this.mousetrap.bind("[",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("]",    this._zoomOut.bind(me),   "keydown");
-      this.mousetrap.bind("]",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("pageup",this._zoomIn.bind(me),   "keydown");
-      this.mousetrap.bind("pageup",this._stopZoom.bind(me),   "keyup");
-      this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
-      this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
+      // edge attributes
+      graph.edge = parseAttributeList();
+      return 'edge';
     }
+    else if (token == 'graph') {
+      getToken();
 
-    if (this.constants.dataManipulation.enabled == true) {
-      this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
-      this.mousetrap.bind("del",this._deleteSelected.bind(me));
+      // graph attributes
+      graph.graph = parseAttributeList();
+      return 'graph';
     }
-  };
+
+    return null;
+  }
 
   /**
-   * Get the pointer location from a touch location
-   * @param {{pageX: Number, pageY: Number}} touch
-   * @return {{x: Number, y: Number}} pointer
-   * @private
+   * parse a node statement
+   * @param {Object} graph
+   * @param {String | Number} id
    */
-  Network.prototype._getPointer = function (touch) {
-    return {
-      x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
-      y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
+  function parseNodeStatement(graph, id) {
+    // node statement
+    var node = {
+      id: id
     };
-  };
+    var attr = parseAttributeList();
+    if (attr) {
+      node.attr = attr;
+    }
+    addNode(graph, node);
+
+    // edge statements
+    parseEdge(graph, id);
+  }
 
   /**
-   * On start of a touch gesture, store the pointer
-   * @param event
-   * @private
+   * Parse an edge or a series of edges
+   * @param {Object} graph
+   * @param {String | Number} from        Id of the from node
    */
-  Network.prototype._onTouch = function (event) {
-    this.drag.pointer = this._getPointer(event.gesture.center);
-    this.drag.pinched = false;
-    this.pinch.scale = this._getScale();
+  function parseEdge(graph, from) {
+    while (token == '->' || token == '--') {
+      var to;
+      var type = token;
+      getToken();
 
-    this._handleTouch(this.drag.pointer);
-  };
+      var subgraph = parseSubgraph(graph);
+      if (subgraph) {
+        to = subgraph;
+      }
+      else {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Identifier or subgraph expected');
+        }
+        to = token;
+        addNode(graph, {
+          id: to
+        });
+        getToken();
+      }
 
-  /**
-   * handle drag start event
-   * @private
-   */
-  Network.prototype._onDragStart = function () {
-    this._handleDragStart();
-  };
+      // parse edge attributes
+      var attr = parseAttributeList();
+
+      // create edge
+      var edge = createEdge(graph, from, to, type, attr);
+      addEdge(graph, edge);
 
+      from = to;
+    }
+  }
 
   /**
-   * This function is called by _onDragStart.
-   * It is separated out because we can then overload it for the datamanipulation system.
-   *
-   * @private
+   * Parse a set with attributes,
+   * for example [label="1.000", shape=solid]
+   * @return {Object | null} attr
    */
-  Network.prototype._handleDragStart = function() {
-    var drag = this.drag;
-    var node = this._getNodeAt(drag.pointer);
-    // note: drag.pointer is set in _onTouch to get the initial touch location
-
-    drag.dragging = true;
-    drag.selection = [];
-    drag.translation = this._getTranslation();
-    drag.nodeId = null;
-
-    if (node != null) {
-      drag.nodeId = node.id;
-      // select the clicked node if not yet selected
-      if (!node.isSelected()) {
-        this._selectObject(node,false);
-      }
+  function parseAttributeList() {
+    var attr = null;
 
-      // create an array with the selected nodes and their original location and status
-      for (var objectId in this.selectionObj.nodes) {
-        if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
-          var object = this.selectionObj.nodes[objectId];
-          var s = {
-            id: object.id,
-            node: object,
+    while (token == '[') {
+      getToken();
+      attr = {};
+      while (token !== '' && token != ']') {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute name expected');
+        }
+        var name = token;
 
-            // store original x, y, xFixed and yFixed, make the node temporarily Fixed
-            x: object.x,
-            y: object.y,
-            xFixed: object.xFixed,
-            yFixed: object.yFixed
-          };
+        getToken();
+        if (token != '=') {
+          throw newSyntaxError('Equal sign = expected');
+        }
+        getToken();
 
-          object.xFixed = true;
-          object.yFixed = true;
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute value expected');
+        }
+        var value = token;
+        setValue(attr, name, value); // name can be a path
 
-          drag.selection.push(s);
+        getToken();
+        if (token ==',') {
+          getToken();
         }
       }
+
+      if (token != ']') {
+        throw newSyntaxError('Bracket ] expected');
+      }
+      getToken();
     }
-  };
 
+    return attr;
+  }
 
   /**
-   * handle drag event
-   * @private
+   * Create a syntax error with extra information on current token and index.
+   * @param {String} message
+   * @returns {SyntaxError} err
    */
-  Network.prototype._onDrag = function (event) {
-    this._handleOnDrag(event)
-  };
+  function newSyntaxError(message) {
+    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+  }
 
+  /**
+   * Chop off text after a maximum length
+   * @param {String} text
+   * @param {Number} maxLength
+   * @returns {String}
+   */
+  function chop (text, maxLength) {
+    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+  }
 
   /**
-   * This function is called by _onDrag.
-   * It is separated out because we can then overload it for the datamanipulation system.
-   *
-   * @private
+   * Execute a function fn for each pair of elements in two arrays
+   * @param {Array | *} array1
+   * @param {Array | *} array2
+   * @param {function} fn
    */
-  Network.prototype._handleOnDrag = function(event) {
-    if (this.drag.pinched) {
-      return;
+  function forEach2(array1, array2, fn) {
+    if (array1 instanceof Array) {
+      array1.forEach(function (elem1) {
+        if (array2 instanceof Array) {
+          array2.forEach(function (elem2)  {
+            fn(elem1, elem2);
+          });
+        }
+        else {
+          fn(elem1, array2);
+        }
+      });
+    }
+    else {
+      if (array2 instanceof Array) {
+        array2.forEach(function (elem2)  {
+          fn(array1, elem2);
+        });
+      }
+      else {
+        fn(array1, array2);
+      }
     }
+  }
 
-    var pointer = this._getPointer(event.gesture.center);
+  /**
+   * Convert a string containing a graph in DOT language into a map containing
+   * with nodes and edges in the format of graph.
+   * @param {String} data         Text containing a graph in DOT-notation
+   * @return {Object} graphData
+   */
+  function DOTToGraph (data) {
+    // parse the DOT file
+    var dotData = parseDOT(data);
+    var graphData = {
+      nodes: [],
+      edges: [],
+      options: {}
+    };
 
-    var me = this,
-      drag = this.drag,
-      selection = drag.selection;
-    if (selection && selection.length && this.constants.dragNodes == true) {
-      // calculate delta's and new location
-      var deltaX = pointer.x - drag.pointer.x,
-        deltaY = pointer.y - drag.pointer.y;
+    // copy the nodes
+    if (dotData.nodes) {
+      dotData.nodes.forEach(function (dotNode) {
+        var graphNode = {
+          id: dotNode.id,
+          label: String(dotNode.label || dotNode.id)
+        };
+        merge(graphNode, dotNode.attr);
+        if (graphNode.image) {
+          graphNode.shape = 'image';
+        }
+        graphData.nodes.push(graphNode);
+      });
+    }
 
-      // update position of all selected nodes
-      selection.forEach(function (s) {
-        var node = s.node;
+    // copy the edges
+    if (dotData.edges) {
+      /**
+       * Convert an edge in DOT format to an edge with VisGraph format
+       * @param {Object} dotEdge
+       * @returns {Object} graphEdge
+       */
+      function convertEdge(dotEdge) {
+        var graphEdge = {
+          from: dotEdge.from,
+          to: dotEdge.to
+        };
+        merge(graphEdge, dotEdge.attr);
+        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+        return graphEdge;
+      }
 
-        if (!s.xFixed) {
-          node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
+      dotData.edges.forEach(function (dotEdge) {
+        var from, to;
+        if (dotEdge.from instanceof Object) {
+          from = dotEdge.from.nodes;
+        }
+        else {
+          from = {
+            id: dotEdge.from
+          }
         }
 
-        if (!s.yFixed) {
-          node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
+        if (dotEdge.to instanceof Object) {
+          to = dotEdge.to.nodes;
+        }
+        else {
+          to = {
+            id: dotEdge.to
+          }
         }
-      });
 
-      // start _animationStep if not yet running
-      if (!this.moving) {
-        this.moving = true;
-        this.start();
-      }
-    }
-    else {
-      if (this.constants.dragNetwork == true) {
-        // move the network
-        var diffX = pointer.x - this.drag.pointer.x;
-        var diffY = pointer.y - this.drag.pointer.y;
+        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+          dotEdge.from.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
 
-        this._setTranslation(
-          this.drag.translation.x + diffX,
-          this.drag.translation.y + diffY
-        );
-        this._redraw();
-  //      this.moving = true;
-  //      this.start();
-      }
-    }
-  };
+        forEach2(from, to, function (from, to) {
+          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+          var graphEdge = convertEdge(subEdge);
+          graphData.edges.push(graphEdge);
+        });
 
-  /**
-   * handle drag start event
-   * @private
-   */
-  Network.prototype._onDragEnd = function () {
-    this.drag.dragging = false;
-    var selection = this.drag.selection;
-    if (selection) {
-      selection.forEach(function (s) {
-        // restore original xFixed and yFixed
-        s.node.xFixed = s.xFixed;
-        s.node.yFixed = s.yFixed;
+        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+          dotEdge.to.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
       });
     }
-    this._redraw();
-  };
 
-  /**
-   * handle tap/click event: select/unselect a node
-   * @private
-   */
-  Network.prototype._onTap = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this.pointerPosition = pointer;
-    this._handleTap(pointer);
+    // copy the options
+    if (dotData.attr) {
+      graphData.options = dotData.attr;
+    }
 
-  };
+    return graphData;
+  }
 
+  // exports
+  exports.parseDOT = parseDOT;
+  exports.DOTToGraph = DOTToGraph;
 
-  /**
-   * handle doubletap event
-   * @private
-   */
-  Network.prototype._onDoubleTap = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this._handleDoubleTap(pointer);
-  };
 
+/***/ },
+/* 33 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * handle long tap event: multi select nodes
-   * @private
+   * @prototype Point3d
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {Number} [z]
    */
-  Network.prototype._onHold = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this.pointerPosition = pointer;
-    this._handleOnHold(pointer);
+  function Point3d(x, y, z) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
+    this.z = z !== undefined ? z : 0;
   };
 
   /**
-   * handle the release of the screen
-   *
-   * @private
+   * Subtract the two provided points, returns a-b
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} a-b
    */
-  Network.prototype._onRelease = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this._handleOnRelease(pointer);
+  Point3d.subtract = function(a, b) {
+    var sub = new Point3d();
+    sub.x = a.x - b.x;
+    sub.y = a.y - b.y;
+    sub.z = a.z - b.z;
+    return sub;
   };
 
   /**
-   * Handle pinch event
-   * @param event
-   * @private
+   * Add the two provided points, returns a+b
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} a+b
    */
-  Network.prototype._onPinch = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-
-    this.drag.pinched = true;
-    if (!('scale' in this.pinch)) {
-      this.pinch.scale = 1;
-    }
-
-    // TODO: enabled moving while pinching?
-    var scale = this.pinch.scale * event.gesture.scale;
-    this._zoom(scale, pointer)
+  Point3d.add = function(a, b) {
+    var sum = new Point3d();
+    sum.x = a.x + b.x;
+    sum.y = a.y + b.y;
+    sum.z = a.z + b.z;
+    return sum;
   };
 
   /**
-   * Zoom the network in or out
-   * @param {Number} scale a number around 1, and between 0.01 and 10
-   * @param {{x: Number, y: Number}} pointer    Position on screen
-   * @return {Number} appliedScale    scale is limited within the boundaries
-   * @private
+   * Calculate the average of two 3d points
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} The average, (a+b)/2
    */
-  Network.prototype._zoom = function(scale, pointer) {
-    if (this.constants.zoomable == true) {
-      var scaleOld = this._getScale();
-      if (scale < 0.00001) {
-        scale = 0.00001;
-      }
-      if (scale > 10) {
-        scale = 10;
-      }
-    // + this.frame.canvas.clientHeight / 2
-      var translation = this._getTranslation();
-
-      var scaleFrac = scale / scaleOld;
-      var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
-      var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
-
-      this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
-                         "y" : this._YconvertDOMtoCanvas(pointer.y)};
-
-      this._setScale(scale);
-      this._setTranslation(tx, ty);
-      this.updateClustersDefault();
-      this._redraw();
-
-      if (scaleOld < scale) {
-        this.emit("zoom", {direction:"+"});
-      }
-      else {
-        this.emit("zoom", {direction:"-"});
-      }
-
-      return scale;
-    }
+  Point3d.avg = function(a, b) {
+    return new Point3d(
+            (a.x + b.x) / 2,
+            (a.y + b.y) / 2,
+            (a.z + b.z) / 2
+    );
   };
 
-
   /**
-   * Event handler for mouse wheel event, used to zoom the timeline
-   * See http://adomas.org/javascript-mouse-wheel/
-   *     https://github.com/EightMedia/hammer.js/issues/256
-   * @param {MouseEvent}  event
-   * @private
+   * Calculate the cross product of the two provided points, returns axb
+   * Documentation: http://en.wikipedia.org/wiki/Cross_product
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} cross product axb
    */
-  Network.prototype._onMouseWheel = function(event) {
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta/120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail/3;
-    }
-
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-
-      // calculate the new scale
-      var scale = this._getScale();
-      var zoom = delta / 10;
-      if (delta < 0) {
-        zoom = zoom / (1 - zoom);
-      }
-      scale *= (1 + zoom);
-
-      // calculate the pointer location
-      var gesture = util.fakeGesture(this, event);
-      var pointer = this._getPointer(gesture.center);
+  Point3d.crossProduct = function(a, b) {
+    var crossproduct = new Point3d();
 
-      // apply the new scale
-      this._zoom(scale, pointer);
-    }
+    crossproduct.x = a.y * b.z - a.z * b.y;
+    crossproduct.y = a.z * b.x - a.x * b.z;
+    crossproduct.z = a.x * b.y - a.y * b.x;
 
-    // Prevent default actions caused by mouse wheel.
-    event.preventDefault();
+    return crossproduct;
   };
 
 
   /**
-   * Mouse move handler for checking whether the title moves over a node with a title.
-   * @param  {Event} event
-   * @private
+   * Rtrieve the length of the vector (or the distance from this point to the origin
+   * @return {Number}  length
    */
-  Network.prototype._onMouseMoveTitle = function (event) {
-    var gesture = util.fakeGesture(this, event);
-    var pointer = this._getPointer(gesture.center);
-
-    // check if the previously selected node is still selected
-    if (this.popupObj) {
-      this._checkHidePopup(pointer);
-    }
-
-    // start a timeout that will check if the mouse is positioned above
-    // an element
-    var me = this;
-    var checkShow = function() {
-      me._checkShowPopup(pointer);
-    };
-    if (this.popupTimer) {
-      clearInterval(this.popupTimer); // stop any running calculationTimer
-    }
-    if (!this.drag.dragging) {
-      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
-    }
+  Point3d.prototype.length = function() {
+    return Math.sqrt(
+            this.x * this.x +
+            this.y * this.y +
+            this.z * this.z
+    );
+  };
 
+  module.exports = Point3d;
 
-    /**
-     * Adding hover highlights
-     */
-    if (this.constants.hover == true) {
-      // removing all hover highlights
-      for (var edgeId in this.hoverObj.edges) {
-        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
-          this.hoverObj.edges[edgeId].hover = false;
-          delete this.hoverObj.edges[edgeId];
-        }
-      }
 
-      // adding hover highlights
-      var obj = this._getNodeAt(pointer);
-      if (obj == null) {
-        obj = this._getEdgeAt(pointer);
-      }
-      if (obj != null) {
-        this._hoverObject(obj);
-      }
+/***/ },
+/* 34 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // removing all node hover highlights except for the selected one.
-      for (var nodeId in this.hoverObj.nodes) {
-        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
-            this._blurObject(this.hoverObj.nodes[nodeId]);
-            delete this.hoverObj.nodes[nodeId];
-          }
-        }
-      }
-      this.redraw();
-    }
+  /**
+   * @prototype Point2d
+   * @param {Number} [x]
+   * @param {Number} [y]
+   */
+  Point2d = function (x, y) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
   };
 
+  module.exports = Point2d;
+
+
+/***/ },
+/* 35 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var DataView = __webpack_require__(4);
+
   /**
-   * Check if there is an element on the given position in the network
-   * (a node or edge). If so, and if this element has a title,
-   * show a popup window with its title.
+   * @class Filter
    *
-   * @param {{x:Number, y:Number}} pointer
-   * @private
+   * @param {DataSet} data The google data table
+   * @param {Number}  column             The index of the column to be filtered
+   * @param {Graph} graph           The graph
    */
-  Network.prototype._checkShowPopup = function (pointer) {
-    var obj = {
-      left:   this._XconvertDOMtoCanvas(pointer.x),
-      top:    this._YconvertDOMtoCanvas(pointer.y),
-      right:  this._XconvertDOMtoCanvas(pointer.x),
-      bottom: this._YconvertDOMtoCanvas(pointer.y)
-    };
+  function Filter (data, column, graph) {
+    this.data = data;
+    this.column = column;
+    this.graph = graph; // the parent graph
 
-    var id;
-    var lastPopupNode = this.popupObj;
+    this.index = undefined;
+    this.value = undefined;
 
-    if (this.popupObj == undefined) {
-      // search the nodes for overlap, select the top one in case of multiple nodes
-      var nodes = this.nodes;
-      for (id in nodes) {
-        if (nodes.hasOwnProperty(id)) {
-          var node = nodes[id];
-          if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
-            this.popupObj = node;
-            break;
-          }
-        }
-      }
-    }
+    // read all distinct values and select the first one
+    this.values = graph.getDistinctValues(data.get(), this.column);
 
-    if (this.popupObj === undefined) {
-      // search the edges for overlap
-      var edges = this.edges;
-      for (id in edges) {
-        if (edges.hasOwnProperty(id)) {
-          var edge = edges[id];
-          if (edge.connected && (edge.getTitle() !== undefined) &&
-              edge.isOverlappingWith(obj)) {
-            this.popupObj = edge;
-            break;
-          }
-        }
-      }
+    // sort both numeric and string values correctly
+    this.values.sort(function (a, b) {
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
+
+    if (this.values.length > 0) {
+      this.selectValue(0);
     }
 
-    if (this.popupObj) {
-      // show popup message window
-      if (this.popupObj != lastPopupNode) {
-        var me = this;
-        if (!me.popup) {
-          me.popup = new Popup(me.frame, me.constants.tooltip);
-        }
+    // create an array with the filtered datapoints. this will be loaded afterwards
+    this.dataPoints = [];
 
-        // adjust a small offset such that the mouse cursor is located in the
-        // bottom left location of the popup, and you can easily move over the
-        // popup area
-        me.popup.setPosition(pointer.x - 3, pointer.y - 3);
-        me.popup.setText(me.popupObj.getTitle());
-        me.popup.show();
-      }
+    this.loaded = false;
+    this.onLoadCallback = undefined;
+
+    if (graph.animationPreload) {
+      this.loaded = false;
+      this.loadInBackground();
     }
     else {
-      if (this.popup) {
-        this.popup.hide();
-      }
+      this.loaded = true;
     }
   };
 
 
   /**
-   * Check if the popup must be hided, which is the case when the mouse is no
-   * longer hovering on the object
-   * @param {{x:Number, y:Number}} pointer
-   * @private
+   * Return the label
+   * @return {string} label
    */
-  Network.prototype._checkHidePopup = function (pointer) {
-    if (!this.popupObj || !this._getNodeAt(pointer) ) {
-      this.popupObj = undefined;
-      if (this.popup) {
-        this.popup.hide();
-      }
-    }
+  Filter.prototype.isLoaded = function() {
+    return this.loaded;
   };
 
 
   /**
-   * Set a new size for the network
-   * @param {string} width   Width in pixels or percentage (for example '800px'
-   *                         or '50%')
-   * @param {string} height  Height in pixels or percentage  (for example '400px'
-   *                         or '30%')
+   * Return the loaded progress
+   * @return {Number} percentage between 0 and 100
    */
-  Network.prototype.setSize = function(width, height) {
-    this.frame.style.width = width;
-    this.frame.style.height = height;
-
-    this.frame.canvas.style.width = '100%';
-    this.frame.canvas.style.height = '100%';
-
-    this.frame.canvas.width = this.frame.canvas.clientWidth;
-    this.frame.canvas.height = this.frame.canvas.clientHeight;
+  Filter.prototype.getLoadedProgress = function() {
+    var len = this.values.length;
 
-    if (this.manipulationDiv !== undefined) {
-      this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
-    }
-    if (this.navigationDivs !== undefined) {
-      if (this.navigationDivs['wrapper'] !== undefined) {
-        this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-        this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-      }
+    var i = 0;
+    while (this.dataPoints[i]) {
+      i++;
     }
 
-    this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
+    return Math.round(i / len * 100);
   };
 
+
   /**
-   * Set a data set with nodes for the network
-   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
-   * @private
+   * Return the label
+   * @return {string} label
    */
-  Network.prototype._setNodes = function(nodes) {
-    var oldNodesData = this.nodesData;
-
-    if (nodes instanceof DataSet || nodes instanceof DataView) {
-      this.nodesData = nodes;
-    }
-    else if (nodes instanceof Array) {
-      this.nodesData = new DataSet();
-      this.nodesData.add(nodes);
-    }
-    else if (!nodes) {
-      this.nodesData = new DataSet();
-    }
-    else {
-      throw new TypeError('Array or DataSet expected');
-    }
-
-    if (oldNodesData) {
-      // unsubscribe from old dataset
-      util.forEach(this.nodesListeners, function (callback, event) {
-        oldNodesData.off(event, callback);
-      });
-    }
-
-    // remove drawn nodes
-    this.nodes = {};
+  Filter.prototype.getLabel = function() {
+    return this.graph.filterLabel;
+  };
 
-    if (this.nodesData) {
-      // subscribe to new dataset
-      var me = this;
-      util.forEach(this.nodesListeners, function (callback, event) {
-        me.nodesData.on(event, callback);
-      });
 
-      // draw all new nodes
-      var ids = this.nodesData.getIds();
-      this._addNodes(ids);
-    }
-    this._updateSelection();
+  /**
+   * Return the columnIndex of the filter
+   * @return {Number} columnIndex
+   */
+  Filter.prototype.getColumn = function() {
+    return this.column;
   };
 
   /**
-   * Add nodes
-   * @param {Number[] | String[]} ids
-   * @private
+   * Return the currently selected value. Returns undefined if there is no selection
+   * @return {*} value
    */
-  Network.prototype._addNodes = function(ids) {
-    var id;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      id = ids[i];
-      var data = this.nodesData.get(id);
-      var node = new Node(data, this.images, this.groups, this.constants);
-      this.nodes[id] = node; // note: this may replace an existing node
+  Filter.prototype.getSelectedValue = function() {
+    if (this.index === undefined)
+      return undefined;
 
-      if ((node.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
-        var radius = 10 * 0.1*ids.length;
-        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.moving = true;
-    }
-    this._updateNodeIndexList();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateCalculationNodes();
-    this._reconnectEdges();
-    this._updateValueRange(this.nodes);
-    this.updateLabels();
+    return this.values[this.index];
   };
 
   /**
-   * Update existing nodes, or create them when not yet existing
-   * @param {Number[] | String[]} ids
-   * @private
+   * Retrieve all values of the filter
+   * @return {Array} values
    */
-  Network.prototype._updateNodes = function(ids) {
-    var nodes = this.nodes,
-        nodesData = this.nodesData;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      var node = nodes[id];
-      var data = nodesData.get(id);
-      if (node) {
-        // update node
-        node.setProperties(data, this.constants);
-      }
-      else {
-        // create node
-        node = new Node(properties, this.images, this.groups, this.constants);
-        nodes[id] = node;
-      }
-    }
-    this.moving = true;
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateNodeIndexList();
-    this._reconnectEdges();
-    this._updateValueRange(nodes);
+  Filter.prototype.getValues = function() {
+    return this.values;
   };
 
   /**
-   * Remove existing nodes. If nodes do not exist, the method will just ignore it.
-   * @param {Number[] | String[]} ids
-   * @private
+   * Retrieve one value of the filter
+   * @param {Number}  index
+   * @return {*} value
    */
-  Network.prototype._removeNodes = function(ids) {
-    var nodes = this.nodes;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      delete nodes[id];
-    }
-    this._updateNodeIndexList();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateCalculationNodes();
-    this._reconnectEdges();
-    this._updateSelection();
-    this._updateValueRange(nodes);
+  Filter.prototype.getValue = function(index) {
+    if (index >= this.values.length)
+      throw 'Error: index out of range';
+
+    return this.values[index];
   };
 
+
   /**
-   * Load edges by reading the data table
-   * @param {Array | DataSet | DataView} edges    The data containing the edges.
-   * @private
-   * @private
+   * Retrieve the (filtered) dataPoints for the currently selected filter index
+   * @param {Number} [index] (optional)
+   * @return {Array} dataPoints
    */
-  Network.prototype._setEdges = function(edges) {
-    var oldEdgesData = this.edgesData;
+  Filter.prototype._getDataPoints = function(index) {
+    if (index === undefined)
+      index = this.index;
 
-    if (edges instanceof DataSet || edges instanceof DataView) {
-      this.edgesData = edges;
-    }
-    else if (edges instanceof Array) {
-      this.edgesData = new DataSet();
-      this.edgesData.add(edges);
-    }
-    else if (!edges) {
-      this.edgesData = new DataSet();
-    }
-    else {
-      throw new TypeError('Array or DataSet expected');
-    }
+    if (index === undefined)
+      return [];
 
-    if (oldEdgesData) {
-      // unsubscribe from old dataset
-      util.forEach(this.edgesListeners, function (callback, event) {
-        oldEdgesData.off(event, callback);
-      });
+    var dataPoints;
+    if (this.dataPoints[index]) {
+      dataPoints = this.dataPoints[index];
     }
+    else {
+      var f = {};
+      f.column = this.column;
+      f.value = this.values[index];
 
-    // remove drawn edges
-    this.edges = {};
-
-    if (this.edgesData) {
-      // subscribe to new dataset
-      var me = this;
-      util.forEach(this.edgesListeners, function (callback, event) {
-        me.edgesData.on(event, callback);
-      });
+      var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
+      dataPoints = this.graph._getDataPoints(dataView);
 
-      // draw all new nodes
-      var ids = this.edgesData.getIds();
-      this._addEdges(ids);
+      this.dataPoints[index] = dataPoints;
     }
 
-    this._reconnectEdges();
+    return dataPoints;
   };
 
-  /**
-   * Add edges
-   * @param {Number[] | String[]} ids
-   * @private
-   */
-  Network.prototype._addEdges = function (ids) {
-    var edges = this.edges,
-        edgesData = this.edgesData;
-
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-
-      var oldEdge = edges[id];
-      if (oldEdge) {
-        oldEdge.disconnect();
-      }
-
-      var data = edgesData.get(id, {"showInternalIds" : true});
-      edges[id] = new Edge(data, this, this.constants);
-    }
 
-    this.moving = true;
-    this._updateValueRange(edges);
-    this._createBezierNodes();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateCalculationNodes();
-  };
 
   /**
-   * Update existing edges, or create them when not yet existing
-   * @param {Number[] | String[]} ids
-   * @private
+   * Set a callback function when the filter is fully loaded.
    */
-  Network.prototype._updateEdges = function (ids) {
-    var edges = this.edges,
-        edgesData = this.edgesData;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-
-      var data = edgesData.get(id);
-      var edge = edges[id];
-      if (edge) {
-        // update edge
-        edge.disconnect();
-        edge.setProperties(data, this.constants);
-        edge.connect();
-      }
-      else {
-        // create edge
-        edge = new Edge(data, this, this.constants);
-        this.edges[id] = edge;
-      }
-    }
-
-    this._createBezierNodes();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this.moving = true;
-    this._updateValueRange(edges);
+  Filter.prototype.setOnLoadCallback = function(callback) {
+    this.onLoadCallback = callback;
   };
 
+
   /**
-   * Remove existing edges. Non existing ids will be ignored
-   * @param {Number[] | String[]} ids
-   * @private
+   * Add a value to the list with available values for this filter
+   * No double entries will be created.
+   * @param {Number} index
    */
-  Network.prototype._removeEdges = function (ids) {
-    var edges = this.edges;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      var edge = edges[id];
-      if (edge) {
-        if (edge.via != null) {
-          delete this.sectors['support']['nodes'][edge.via.id];
-        }
-        edge.disconnect();
-        delete edges[id];
-      }
-    }
+  Filter.prototype.selectValue = function(index) {
+    if (index >= this.values.length)
+      throw 'Error: index out of range';
 
-    this.moving = true;
-    this._updateValueRange(edges);
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateCalculationNodes();
+    this.index = index;
+    this.value = this.values[index];
   };
 
   /**
-   * Reconnect all edges
-   * @private
+   * Load all filtered rows in the background one by one
+   * Start this method without providing an index!
    */
-  Network.prototype._reconnectEdges = function() {
-    var id,
-        nodes = this.nodes,
-        edges = this.edges;
-    for (id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        nodes[id].edges = [];
-      }
-    }
+  Filter.prototype.loadInBackground = function(index) {
+    if (index === undefined)
+      index = 0;
 
-    for (id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        var edge = edges[id];
-        edge.from = null;
-        edge.to = null;
-        edge.connect();
-      }
-    }
-  };
+    var frame = this.graph.frame;
 
-  /**
-   * Update the values of all object in the given array according to the current
-   * value range of the objects in the array.
-   * @param {Object} obj    An object containing a set of Edges or Nodes
-   *                        The objects must have a method getValue() and
-   *                        setValueRange(min, max).
-   * @private
-   */
-  Network.prototype._updateValueRange = function(obj) {
-    var id;
+    if (index < this.values.length) {
+      var dataPointsTemp = this._getDataPoints(index);
+      //this.graph.redrawInfo(); // TODO: not neat
 
-    // determine the range of the objects
-    var valueMin = undefined;
-    var valueMax = undefined;
-    for (id in obj) {
-      if (obj.hasOwnProperty(id)) {
-        var value = obj[id].getValue();
-        if (value !== undefined) {
-          valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
-          valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
-        }
+      // create a progress box
+      if (frame.progress === undefined) {
+        frame.progress = document.createElement('DIV');
+        frame.progress.style.position = 'absolute';
+        frame.progress.style.color = 'gray';
+        frame.appendChild(frame.progress);
       }
+      var progress = this.getLoadedProgress();
+      frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
+      // TODO: this is no nice solution...
+      frame.progress.style.bottom = 60 + 'px'; // TODO: use height of slider
+      frame.progress.style.left = 10 + 'px';
+
+      var me = this;
+      setTimeout(function() {me.loadInBackground(index+1);}, 10);
+      this.loaded = false;
     }
+    else {
+      this.loaded = true;
 
-    // adjust the range of all objects
-    if (valueMin !== undefined && valueMax !== undefined) {
-      for (id in obj) {
-        if (obj.hasOwnProperty(id)) {
-          obj[id].setValueRange(valueMin, valueMax);
-        }
+      // remove the progress box
+      if (frame.progress !== undefined) {
+        frame.removeChild(frame.progress);
+        frame.progress = undefined;
       }
+
+      if (this.onLoadCallback)
+        this.onLoadCallback();
     }
   };
 
+  module.exports = Filter;
+
+
+/***/ },
+/* 36 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Redraw the network with the current data
-   * chart will be resized too.
+   * @prototype StepNumber
+   * The class StepNumber is an iterator for Numbers. You provide a start and end
+   * value, and a best step size. StepNumber itself rounds to fixed values and
+   * a finds the step that best fits the provided step.
+   *
+   * If prettyStep is true, the step size is chosen as close as possible to the
+   * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
+   *
+   * Example usage:
+   *   var step = new StepNumber(0, 10, 2.5, true);
+   *   step.start();
+   *   while (!step.end()) {
+   *   alert(step.getCurrent());
+   *   step.next();
+   *   }
+   *
+   * Version: 1.0
+   *
+   * @param {Number} start     The start value
+   * @param {Number} end     The end value
+   * @param {Number} step    Optional. Step size. Must be a positive value.
+   * @param {boolean} prettyStep Optional. If true, the step size is rounded
+   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
    */
-  Network.prototype.redraw = function() {
-    this.setSize(this.width, this.height);
-    this._redraw();
+  function StepNumber(start, end, step, prettyStep) {
+    // set default values
+    this._start = 0;
+    this._end = 0;
+    this._step = 1;
+    this.prettyStep = true;
+    this.precision = 5;
+
+    this._current = 0;
+    this.setRange(start, end, step, prettyStep);
   };
 
   /**
-   * Redraw the network with the current data
-   * @private
+   * Set a new range: start, end and step.
+   *
+   * @param {Number} start     The start value
+   * @param {Number} end     The end value
+   * @param {Number} step    Optional. Step size. Must be a positive value.
+   * @param {boolean} prettyStep Optional. If true, the step size is rounded
+   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
    */
-  Network.prototype._redraw = function() {
-    var ctx = this.frame.canvas.getContext('2d');
-    // clear the canvas
-    var w = this.frame.canvas.width;
-    var h = this.frame.canvas.height;
-    ctx.clearRect(0, 0, w, h);
-
-    // set scaling and translation
-    ctx.save();
-    ctx.translate(this.translation.x, this.translation.y);
-    ctx.scale(this.scale, this.scale);
-
-    this.canvasTopLeft = {
-      "x": this._XconvertDOMtoCanvas(0),
-      "y": this._YconvertDOMtoCanvas(0)
-    };
-    this.canvasBottomRight = {
-      "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
-      "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
-    };
-
-
-    this._doInAllSectors("_drawAllSectorNodes",ctx);
-    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
-      this._doInAllSectors("_drawEdges",ctx);
-    }
+  StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
+    this._start = start ? start : 0;
+    this._end = end ? end : 0;
 
-    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
-      this._doInAllSectors("_drawNodes",ctx,false);
-    }
+    this.setStep(step, prettyStep);
+  };
 
-    if (this.controlNodesActive == true) {
-      this._doInAllSectors("_drawControlNodes",ctx);
-    }
+  /**
+   * Set a new step size
+   * @param {Number} step    New step size. Must be a positive value
+   * @param {boolean} prettyStep Optional. If true, the provided step is rounded
+   *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   */
+  StepNumber.prototype.setStep = function(step, prettyStep) {
+    if (step === undefined || step <= 0)
+      return;
 
-  //  this._doInSupportSector("_drawNodes",ctx,true);
-  //  this._drawTree(ctx,"#F00F0F");
+    if (prettyStep !== undefined)
+      this.prettyStep = prettyStep;
 
-    // restore original scaling and translation
-    ctx.restore();
+    if (this.prettyStep === true)
+      this._step = StepNumber.calculatePrettyStep(step);
+    else
+      this._step = step;
   };
 
   /**
-   * Set the translation of the network
-   * @param {Number} offsetX    Horizontal offset
-   * @param {Number} offsetY    Vertical offset
-   * @private
+   * Calculate a nice step size, closest to the desired step size.
+   * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
+   * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
+   * @param {Number}  step  Desired step size
+   * @return {Number}     Nice step size
    */
-  Network.prototype._setTranslation = function(offsetX, offsetY) {
-    if (this.translation === undefined) {
-      this.translation = {
-        x: 0,
-        y: 0
-      };
-    }
+  StepNumber.calculatePrettyStep = function (step) {
+    var log10 = function (x) {return Math.log(x) / Math.LN10;};
 
-    if (offsetX !== undefined) {
-      this.translation.x = offsetX;
-    }
-    if (offsetY !== undefined) {
-      this.translation.y = offsetY;
+    // try three steps (multiple of 1, 2, or 5
+    var step1 = Math.pow(10, Math.round(log10(step))),
+        step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
+        step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
+
+    // choose the best step (closest to minimum step)
+    var prettyStep = step1;
+    if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
+    if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
+
+    // for safety
+    if (prettyStep <= 0) {
+      prettyStep = 1;
     }
 
-    this.emit('viewChanged');
+    return prettyStep;
   };
 
   /**
-   * Get the translation of the network
-   * @return {Object} translation    An object with parameters x and y, both a number
-   * @private
+   * returns the current value of the step
+   * @return {Number} current value
    */
-  Network.prototype._getTranslation = function() {
-    return {
-      x: this.translation.x,
-      y: this.translation.y
-    };
+  StepNumber.prototype.getCurrent = function () {
+    return parseFloat(this._current.toPrecision(this.precision));
   };
 
   /**
-   * Scale the network
-   * @param {Number} scale   Scaling factor 1.0 is unscaled
-   * @private
+   * returns the current step size
+   * @return {Number} current step size
    */
-  Network.prototype._setScale = function(scale) {
-    this.scale = scale;
+  StepNumber.prototype.getStep = function () {
+    return this._step;
   };
 
   /**
-   * Get the current scale of  the network
-   * @return {Number} scale   Scaling factor 1.0 is unscaled
-   * @private
+   * Set the current value to the largest value smaller than start, which
+   * is a multiple of the step size
    */
-  Network.prototype._getScale = function() {
-    return this.scale;
+  StepNumber.prototype.start = function() {
+    this._current = this._start - this._start % this._step;
   };
 
   /**
-   * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
-   * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
-   * @param {number} x
-   * @returns {number}
-   * @private
+   * Do a step, add the step size to the current value
    */
-  Network.prototype._XconvertDOMtoCanvas = function(x) {
-    return (x - this.translation.x) / this.scale;
+  StepNumber.prototype.next = function () {
+    this._current += this._step;
   };
 
   /**
-   * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
-   * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
-   * @param {number} x
-   * @returns {number}
-   * @private
+   * Returns true whether the end is reached
+   * @return {boolean}  True if the current value has passed the end value.
    */
-  Network.prototype._XconvertCanvasToDOM = function(x) {
-    return x * this.scale + this.translation.x;
+  StepNumber.prototype.end = function () {
+    return (this._current > this._end);
   };
 
-  /**
-   * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
-   * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
-   * @param {number} y
-   * @returns {number}
-   * @private
-   */
-  Network.prototype._YconvertDOMtoCanvas = function(y) {
-    return (y - this.translation.y) / this.scale;
-  };
+  module.exports = StepNumber;
 
-  /**
-   * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
-   * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
-   * @param {number} y
-   * @returns {number}
-   * @private
-   */
-  Network.prototype._YconvertCanvasToDOM = function(y) {
-    return y * this.scale + this.translation.y ;
-  };
 
+/***/ },
+/* 37 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   *
-   * @param {object} pos   = {x: number, y: number}
-   * @returns {{x: number, y: number}}
-   * @constructor
+   * Canvas shapes used by Network
    */
-  Network.prototype.canvasToDOM = function(pos) {
-    return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
-  }
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
 
-  /**
-   *
-   * @param {object} pos   = {x: number, y: number}
-   * @returns {{x: number, y: number}}
-   * @constructor
-   */
-  Network.prototype.DOMtoCanvas = function(pos) {
-    return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
-  }
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+      this.beginPath();
+      this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
 
-  /**
-   * Redraw all nodes
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Boolean} [alwaysShow]
-   * @private
-   */
-  Network.prototype._drawNodes = function(ctx,alwaysShow) {
-    if (alwaysShow === undefined) {
-      alwaysShow = false;
-    }
+    /**
+     * 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);
+    };
 
-    // first draw the unselected nodes
-    var nodes = this.nodes;
-    var selected = [];
+    /**
+     * 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();
 
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
-        if (nodes[id].isSelected()) {
-          selected.push(id);
-        }
-        else {
-          if (nodes[id].inArea() || alwaysShow) {
-            nodes[id].draw(ctx);
-          }
-        }
+      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 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();
+
+      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)
+        );
       }
-    }
 
-    // draw the selected nodes on top
-    for (var s = 0, sMax = selected.length; s < sMax; s++) {
-      if (nodes[selected[s]].inArea() || alwaysShow) {
-        nodes[selected[s]].draw(ctx);
+      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;
       }
+    };
+
+    // TODO: add diamond shape
+  }
+
+
+/***/ },
+/* 38 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // 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__(51);
+
+
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // 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__(49);
+    // TODO: throw an error when hammerjs is not available?
+  }
+  else {
+    module.exports = function () {
+      throw Error('hammer.js is only available in a browser, not in node.js.');
     }
-  };
+  }
+
+
+/***/ },
+/* 40 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var PhysicsMixin = __webpack_require__(50);
+  var ClusterMixin = __webpack_require__(43);
+  var SectorsMixin = __webpack_require__(44);
+  var SelectionMixin = __webpack_require__(45);
+  var ManipulationMixin = __webpack_require__(46);
+  var NavigationMixin = __webpack_require__(47);
+  var HierarchicalLayoutMixin = __webpack_require__(48);
 
   /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
+   * Load a mixin into the network object
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
    * @private
    */
-  Network.prototype._drawEdges = function(ctx) {
-    var edges = this.edges;
-    for (var id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        var edge = edges[id];
-        edge.setScale(this.scale);
-        if (edge.connected) {
-          edges[id].draw(ctx);
-        }
+  exports._loadMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = sourceVariable[mixinFunction];
       }
     }
   };
 
+
   /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
+   * removes a mixin from the network object.
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
    * @private
    */
-  Network.prototype._drawControlNodes = function(ctx) {
-    var edges = this.edges;
-    for (var id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        edges[id]._drawControlNodes(ctx);
+  exports._clearMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = undefined;
       }
     }
   };
 
+
   /**
-   * Find a stable position for all nodes
+   * Mixin the physics system and initialize the parameters required.
+   *
    * @private
    */
-  Network.prototype._stabilize = function() {
-    if (this.constants.freezeForStabilization == true) {
-      this._freezeDefinedNodes();
-    }
-
-    // find stable position
-    var count = 0;
-    while (this.moving && count < this.constants.stabilizationIterations) {
-      this._physicsTick();
-      count++;
-    }
-    this.zoomExtent(false,true);
-    if (this.constants.freezeForStabilization == true) {
-      this._restoreFrozenNodes();
+  exports._loadPhysicsSystem = function () {
+    this._loadMixin(PhysicsMixin);
+    this._loadSelectedForceSolver();
+    if (this.constants.configurePhysics == true) {
+      this._loadPhysicsConfiguration();
     }
-    this.emit("stabilized",{iterations:count});
   };
 
+
   /**
-   * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
-   * because only the supportnodes for the smoothCurves have to settle.
+   * Mixin the cluster system and initialize the parameters required.
    *
    * @private
    */
-  Network.prototype._freezeDefinedNodes = function() {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        if (nodes[id].x != null && nodes[id].y != null) {
-          nodes[id].fixedData.x = nodes[id].xFixed;
-          nodes[id].fixedData.y = nodes[id].yFixed;
-          nodes[id].xFixed = true;
-          nodes[id].yFixed = true;
-        }
-      }
-    }
+  exports._loadClusterSystem = function () {
+    this.clusterSession = 0;
+    this.hubThreshold = 5;
+    this._loadMixin(ClusterMixin);
   };
 
+
   /**
-   * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
+   * Mixin the sector system and initialize the parameters required
    *
    * @private
    */
-  Network.prototype._restoreFrozenNodes = function() {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        if (nodes[id].fixedData.x != null) {
-          nodes[id].xFixed = nodes[id].fixedData.x;
-          nodes[id].yFixed = nodes[id].fixedData.y;
-        }
-      }
-    }
+  exports._loadSectorSystem = function () {
+    this.sectors = {};
+    this.activeSector = ["default"];
+    this.sectors["active"] = {};
+    this.sectors["active"]["default"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
+    this.sectors["frozen"] = {};
+    this.sectors["support"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
+
+    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
+
+    this._loadMixin(SectorsMixin);
   };
 
 
   /**
-   * Check if any of the nodes is still moving
-   * @param {number} vmin   the minimum velocity considered as 'moving'
-   * @return {boolean}      true if moving, false if non of the nodes is moving
+   * Mixin the selection system and initialize the parameters required
+   *
    * @private
    */
-  Network.prototype._isMoving = function(vmin) {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
-        return true;
-      }
-    }
-    return false;
+  exports._loadSelectionSystem = function () {
+    this.selectionObj = {nodes: {}, edges: {}};
+
+    this._loadMixin(SelectionMixin);
   };
 
 
   /**
-   * /**
-   * Perform one discrete step for all nodes
+   * Mixin the navigationUI (User Interface) system and initialize the parameters required
    *
    * @private
    */
-  Network.prototype._discreteStepNodes = function() {
-    var interval = this.physicsDiscreteStepsize;
-    var nodes = this.nodes;
-    var nodeId;
-    var nodesPresent = false;
+  exports._loadManipulationSystem = function () {
+    // reset global variables -- these are used by the selection of nodes and edges.
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-    if (this.constants.maxVelocity > 0) {
-      for (nodeId in nodes) {
-        if (nodes.hasOwnProperty(nodeId)) {
-          nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
-          nodesPresent = true;
+    if (this.constants.dataManipulation.enabled == true) {
+      // load the manipulator HTML elements. All styling done in css.
+      if (this.manipulationDiv === undefined) {
+        this.manipulationDiv = document.createElement('div');
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
+        if (this.editMode == true) {
+          this.manipulationDiv.style.display = "block";
+        }
+        else {
+          this.manipulationDiv.style.display = "none";
         }
+        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
       }
-    }
-    else {
-      for (nodeId in nodes) {
-        if (nodes.hasOwnProperty(nodeId)) {
-          nodes[nodeId].discreteStep(interval);
-          nodesPresent = true;
+
+      if (this.editModeDiv === undefined) {
+        this.editModeDiv = document.createElement('div');
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
+        if (this.editMode == true) {
+          this.editModeDiv.style.display = "none";
+        }
+        else {
+          this.editModeDiv.style.display = "block";
         }
+        this.containerElement.insertBefore(this.editModeDiv, this.frame);
       }
-    }
 
-    if (nodesPresent == true) {
-      var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
-      if (vminCorrected > 0.5*this.constants.maxVelocity) {
-        this.moving = true;
+      if (this.closeDiv === undefined) {
+        this.closeDiv = document.createElement('div');
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
+        this.closeDiv.style.display = this.manipulationDiv.style.display;
+        this.containerElement.insertBefore(this.closeDiv, this.frame);
       }
-      else {
-        this.moving = this._isMoving(vminCorrected) || this.constants.configurePhysics;
+
+      // load the manipulation functions
+      this._loadMixin(ManipulationMixin);
+
+      // create the manipulator toolbar
+      this._createManipulatorBar();
+    }
+    else {
+      if (this.manipulationDiv !== undefined) {
+        // removes all the bindings and overloads
+        this._createManipulatorBar();
+        // remove the manipulation divs
+        this.containerElement.removeChild(this.manipulationDiv);
+        this.containerElement.removeChild(this.editModeDiv);
+        this.containerElement.removeChild(this.closeDiv);
+
+        this.manipulationDiv = undefined;
+        this.editModeDiv = undefined;
+        this.closeDiv = undefined;
+        // remove the mixin functions
+        this._clearMixin(ManipulationMixin);
       }
     }
   };
 
+
   /**
-   * A single simulation step (or "tick") in the physics simulation
+   * Mixin the navigation (User Interface) system and initialize the parameters required
    *
    * @private
    */
-  Network.prototype._physicsTick = function() {
-    if (!this.freezeSimulation) {
-      if (this.moving) {
-        this._doInAllActiveSectors("_initializeForceCalculation");
-        this._doInAllActiveSectors("_discreteStepNodes");
-        if (this.constants.smoothCurves) {
-          this._doInSupportSector("_discreteStepNodes");
-        }
-        this._findCenter(this._getRange())
-      }
+  exports._loadNavigationControls = function () {
+    this._loadMixin(NavigationMixin);
+
+    // the clean function removes the button divs, this is done to remove the bindings.
+    this._cleanNavigation();
+    if (this.constants.navigation.enabled == true) {
+      this._loadNavigationElements();
     }
   };
 
 
   /**
-   * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
-   * It reschedules itself at the beginning of the function
+   * Mixin the hierarchical layout system.
    *
    * @private
    */
-  Network.prototype._animationStep = function() {
-    // reset the timer so a new scheduled animation step can be set
-    this.timer = undefined;
-    // handle the keyboad movement
-    this._handleNavigation();
-
-    // this schedules a new animation step
-    this.start();
-
-    // start the physics simulation
-    var calculationTime = Date.now();
-    var maxSteps = 1;
-    this._physicsTick();
-    var timeRequired = Date.now() - calculationTime;
-    while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
-      this._physicsTick();
-      timeRequired = Date.now() - calculationTime;
-      maxSteps++;
-    }
-
-    // start the rendering process
-    var renderTime = Date.now();
-    this._redraw();
-    this.renderTime = Date.now() - renderTime;
-
+  exports._loadHierarchySystem = function () {
+    this._loadMixin(HierarchicalLayoutMixin);
   };
 
-  if (typeof window !== 'undefined') {
-    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-  }
 
+/***/ },
+/* 41 */
+/***/ function(module, exports, __webpack_require__) {
+
+  
   /**
-   * Schedule a animation step with the refreshrate interval.
+   * Expose `Emitter`.
    */
-  Network.prototype.start = function() {
-    if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
-      if (!this.timer) {
-        var ua = navigator.userAgent.toLowerCase();
-
-        var requiresTimeout = false;
-        if (ua.indexOf('msie 9.0') != -1) { // IE 9
-          requiresTimeout = true;
-        }
-        else if (ua.indexOf('safari') != -1) {  // safari
-          if (ua.indexOf('chrome') <= -1) {
-            requiresTimeout = true;
-          }
-        }
-
-        if (requiresTimeout == true) {
-          this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
-        }
-        else{
-          this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
-        }
-      }
-    }
-    else {
-      this._redraw();
-    }
-  };
 
+  module.exports = Emitter;
 
   /**
-   * Move the network according to the keyboard presses.
+   * Initialize a new `Emitter`.
    *
-   * @private
+   * @api public
    */
-  Network.prototype._handleNavigation = function() {
-    if (this.xIncrement != 0 || this.yIncrement != 0) {
-      var translation = this._getTranslation();
-      this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
-    }
-    if (this.zoomIncrement != 0) {
-      var center = {
-        x: this.frame.canvas.clientWidth / 2,
-        y: this.frame.canvas.clientHeight / 2
-      };
-      this._zoom(this.scale*(1 + this.zoomIncrement), center);
-    }
-  };
 
+  function Emitter(obj) {
+    if (obj) return mixin(obj);
+  };
 
   /**
-   *  Freeze the _animationStep
+   * Mixin the emitter properties.
+   *
+   * @param {Object} obj
+   * @return {Object}
+   * @api private
    */
-  Network.prototype.toggleFreeze = function() {
-    if (this.freezeSimulation == false) {
-      this.freezeSimulation = true;
-    }
-    else {
-      this.freezeSimulation = false;
-      this.start();
-    }
-  };
 
+  function mixin(obj) {
+    for (var key in Emitter.prototype) {
+      obj[key] = Emitter.prototype[key];
+    }
+    return obj;
+  }
 
   /**
-   * This function cleans the support nodes if they are not needed and adds them when they are.
+   * Listen on the given `event` with `fn`.
    *
-   * @param {boolean} [disableStart]
-   * @private
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  Network.prototype._configureSmoothCurves = function(disableStart) {
-    if (disableStart === undefined) {
-      disableStart = true;
-    }
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this._createBezierNodes();
-    }
-    else {
-      // delete the support nodes
-      this.sectors['support']['nodes'] = {};
-      for (var edgeId in this.edges) {
-        if (this.edges.hasOwnProperty(edgeId)) {
-          this.edges[edgeId].smooth = false;
-          this.edges[edgeId].via = null;
-        }
-      }
-    }
-    this._updateCalculationNodes();
-    if (!disableStart) {
-      this.moving = true;
-      this.start();
-    }
-  };
 
+  Emitter.prototype.on =
+  Emitter.prototype.addEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
+    (this._callbacks[event] = this._callbacks[event] || [])
+      .push(fn);
+    return this;
+  };
 
   /**
-   * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
-   * are used for the force calculation.
+   * Adds an `event` listener that will be invoked a single
+   * time then automatically removed.
    *
-   * @private
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  Network.prototype._createBezierNodes = function() {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      for (var edgeId in this.edges) {
-        if (this.edges.hasOwnProperty(edgeId)) {
-          var edge = this.edges[edgeId];
-          if (edge.via == null) {
-            edge.smooth = true;
-            var nodeId = "edgeId:".concat(edge.id);
-            this.sectors['support']['nodes'][nodeId] = new Node(
-                    {id:nodeId,
-                      mass:1,
-                      shape:'circle',
-                      image:"",
-                      internalMultiplier:1
-                    },{},{},this.constants);
-            edge.via = this.sectors['support']['nodes'][nodeId];
-            edge.via.parentEdgeId = edge.id;
-            edge.positionBezierNode();
-          }
-        }
-      }
+
+  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;
   };
 
   /**
-   * load the functions that load the mixins into the prototype.
+   * Remove the given callback for `event` or all
+   * registered callbacks.
    *
-   * @private
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  Network.prototype._initializeMixinLoaders = function () {
-    for (var mixin in MixinLoader) {
-      if (MixinLoader.hasOwnProperty(mixin)) {
-        Network.prototype[mixin] = MixinLoader[mixin];
+
+  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;
   };
 
   /**
-   * Load the XY positions of the nodes into the dataset.
+   * Emit `event` with the given args.
+   *
+   * @param {String} event
+   * @param {Mixed} ...
+   * @return {Emitter}
    */
-  Network.prototype.storePosition = function() {
-    var dataArray = [];
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var node = this.nodes[nodeId];
-        var allowedToMoveX = !this.nodes.xFixed;
-        var allowedToMoveY = !this.nodes.yFixed;
-        if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
-          dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
-        }
+
+  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);
       }
     }
-    this.nodesData.update(dataArray);
-  };
 
+    return this;
+  };
 
   /**
-   * Center a node in view.
+   * Return array of callbacks for `event`.
    *
-   * @param {Number} nodeId
-   * @param {Number} [zoomLevel]
+   * @param {String} event
+   * @return {Array}
+   * @api public
    */
-  Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
-    if (this.nodes.hasOwnProperty(nodeId)) {
-      if (zoomLevel === undefined) {
-        zoomLevel = this._getScale();
-      }
-      var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
-
-      var requiredScale = zoomLevel;
-      this._setScale(requiredScale);
 
-      var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
-      var translation = this._getTranslation();
+  Emitter.prototype.listeners = function(event){
+    this._callbacks = this._callbacks || {};
+    return this._callbacks[event] || [];
+  };
 
-      var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
-                                y:canvasCenter.y - nodePosition.y};
+  /**
+   * Check if this emitter has `event` handlers.
+   *
+   * @param {String} event
+   * @return {Boolean}
+   * @api public
+   */
 
-      this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
-                           translation.y + requiredScale * distanceFromCenter.y);
-      this.redraw();
-    }
-    else {
-      console.log("This nodeId cannot be found.")
-    }
+  Emitter.prototype.hasListeners = function(event){
+    return !! this.listeners(event).length;
   };
 
-  module.exports = Network;
-
 
 /***/ },
-/* 38 */
+/* 42 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
@@ -22227,8530 +21712,9034 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 39 */
+/* 43 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Parse a text source containing data in DOT language into a JSON object.
-   * The object contains two lists: one with nodes and one with edges.
+   * Creation of the ClusterMixin var.
    *
-   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+   * This contains all the functions the Network object can use to employ clustering
+   */
+
+  /**
+  * 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);
+
+   // updates the lables after clustering
+   this.updateLabels();
+
+   // 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();
+  };
+
+  /**
+   * This function clusters until the initialMaxNodes has been reached
    *
-   * @param {String} data     Text containing a graph in DOT-notation
-   * @return {Object} graph   An object containing two parameters:
-   *                          {Object[]} nodes
-   *                          {Object[]} edges
+   * @param {Number}  maxNumberOfNodes
+   * @param {Boolean} reposition
    */
-  function parseDOT (data) {
-    dot = data;
-    return parseGraph();
-  }
+  exports.clusterToFit = function(maxNumberOfNodes, reposition) {
+    var numberOfNodes = this.nodeIndices.length;
 
-  // token types enumeration
-  var TOKENTYPE = {
-    NULL : 0,
-    DELIMITER : 1,
-    IDENTIFIER: 2,
-    UNKNOWN : 3
+    var maxLevels = 50;
+    var level = 0;
+
+    // we first cluster the hubs, then we pull in the outliers, repeat
+    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+      if (level % 3 == 0) {
+        this.forceAggregateHubs(true);
+        this.normalizeClusterLevels();
+      }
+      else {
+        this.increaseClusterLevel(); // this also includes a cluster normalization
+      }
+
+      numberOfNodes = this.nodeIndices.length;
+      level += 1;
+    }
+
+    // after the clustering we reposition the nodes to reduce the initial chaos
+    if (level > 0 && reposition == true) {
+      this.repositionNodes();
+    }
+    this._updateCalculationNodes();
   };
 
-  // map with all delimiters
-  var DELIMITERS = {
-    '{': true,
-    '}': true,
-    '[': true,
-    ']': true,
-    ';': true,
-    '=': true,
-    ',': true,
+  /**
+   * 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;
 
-    '->': true,
-    '--': true
+      // we decluster until we reach a decent number of nodes
+      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+        this.decreaseClusterLevel();
+        level += 1;
+      }
+
+    }
+    else {
+      this._expandClusterNode(node,false,true);
+
+      // update the index list, dynamic edges and labels
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      this._updateCalculationNodes();
+      this.updateLabels();
+    }
+
+    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+    if (this.moving != isMovingBeforeClustering) {
+      this.start();
+    }
   };
 
-  var dot = '';                   // current dot file
-  var index = 0;                  // current index in dot file
-  var c = '';                     // current token character in expr
-  var token = '';                 // current token
-  var tokenType = TOKENTYPE.NULL; // type of the token
 
   /**
-   * Get the first character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
+   * This calls the updateClustes with default arguments
    */
-  function first() {
-    index = 0;
-    c = dot.charAt(0);
-  }
+  exports.updateClustersDefault = function() {
+    if (this.constants.clustering.enabled == true) {
+      this.updateClusters(0,false,false);
+    }
+  };
+
 
   /**
-   * Get the next character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
+   * 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.
    */
-  function next() {
-    index++;
-    c = dot.charAt(index);
-  }
+  exports.increaseClusterLevel = function() {
+    this.updateClusters(-1,false,true);
+  };
+
 
   /**
-   * Preview the next character from the dot file.
-   * @return {String} cNext
+   * 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.
    */
-  function nextPreview() {
-    return dot.charAt(index + 1);
-  }
+  exports.decreaseClusterLevel = function() {
+    this.updateClusters(1,false,true);
+  };
+
 
   /**
-   * Test whether given character is alphabetic or numeric
-   * @param {String} c
-   * @return {Boolean} isAlphaNumeric
+   * 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
+   *
    */
-  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
-  function isAlphaNumeric(c) {
-    return regexAlphaNumeric.test(c);
-  }
+  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();
+      }
+    }
+    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();
+
+    // 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();
+    }
+
+    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();
+      }
+    }
+
+    this._updateCalculationNodes();
+  };
+
+  /**
+   * 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)
+
+    }
+  };
+
+  /**
+   * this functions starts clustering by hubs
+   * The minimum hub threshold is set globally
+   *
+   * @private
+   */
+  exports._aggregateHubs = function(force) {
+    this._getHubSize();
+    this._formClustersByHub(force,false);
+  };
+
+
+  /**
+   * This function is fired by keypress. It forces hubs to form.
+   *
+   */
+  exports.forceAggregateHubs = function(doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
+
+    this._aggregateHubs(true);
+
+    // update the index list, dynamic edges and labels
+    this._updateNodeIndexList();
+    this._updateDynamicEdges();
+    this.updateLabels();
+
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length != amountOfNodes) {
+      this.clusterSession += 1;
+    }
+
+    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();
+      }
+    }
+  };
+
+  /**
+   * 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);
+          }
+        }
+      }
+    }
+  };
+
+
+  /**
+   * 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 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;
+      }
+      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];
+
+            // 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);
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * 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 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();
+
+      // put the child node back in the global nodes object
+      this.nodes[containedNodeId] = childNode;
+
+      // release the contained edges from this childNode back into the global edges
+      this._releaseContainedEdges(parentNode,childNode);
+
+      // reconnect rerouted edges to the childNode
+      this._connectEdgeBackToChild(parentNode,childNode);
+
+      // validate all edges in dynamicEdges
+      this._validateEdges(parentNode);
+
+      // undo the changes from the clustering operation on the parent node
+      parentNode.mass -= childNode.mass;
+      parentNode.clusterSize -= childNode.clusterSize;
+      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      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());
+      childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
+
+      // remove node from the list
+      delete parentNode.containedNodes[containedNodeId];
+
+      // 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;
+          }
+        }
+      }
+      // if there are no others, remove the cluster session from the list
+      if (othersPresent == false) {
+        parentNode.clusterSessions.pop();
+      }
+
+      this._repositionBezierNodes(childNode);
+  //      this._repositionBezierNodes(parentNode);
+
+      // remove the clusterSession from the child node
+      childNode.clusterSession = 0;
+
+      // recalculate the size of the node on the next time the node is rendered
+      parentNode.clearSizeCache();
+
+      // restart the simulation to reorganise all nodes
+      this.moving = true;
+    }
+
+    // check if a further expansion step is possible if recursivity is enabled
+    if (recursive == true) {
+      this._expandClusterNode(childNode,recursive,force,openAll);
+    }
+  };
+
+
+  /**
+   * 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();
+    }
+  };
+
+
+  /**
+   * 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();
+    }
+  };
+
 
   /**
-   * Merge all properties of object b into object b
-   * @param {Object} a
-   * @param {Object} b
-   * @return {Object} a
+   * This function handles the clustering by zooming out, this is based on a minimum edge distance
+   *
+   * @private
    */
-  function merge (a, b) {
-    if (!a) {
-      a = {};
-    }
+  exports._formClustersByZoom = function() {
+    var dx,dy,length,
+        minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
 
-    if (b) {
-      for (var name in b) {
-        if (b.hasOwnProperty(name)) {
-          a[name] = b[name];
+    // 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 (length < minLength) {
+              // first check which node is larger
+              var parentNode = edge.from;
+              var childNode = edge.to;
+              if (edge.to.mass > edge.from.mass) {
+                parentNode = edge.to;
+                childNode = edge.from;
+              }
+
+              if (childNode.dynamicEdgesLength == 1) {
+                this._addToCluster(parentNode,childNode,false);
+              }
+              else if (parentNode.dynamicEdgesLength == 1) {
+                this._addToCluster(childNode,parentNode,false);
+              }
+            }
+          }
         }
       }
     }
-    return a;
-  }
+  };
 
   /**
-   * Set a value in an object, where the provided parameter name can be a
-   * path with nested parameters. For example:
-   *
-   *     var obj = {a: 2};
-   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   * This function forces the network to cluster all nodes with only one connecting edge to their
+   * connected node.
    *
-   * @param {Object} obj
-   * @param {String} path  A parameter name or dot-separated parameter path,
-   *                      like "color.highlight.border".
-   * @param {*} value
+   * @private
    */
-  function setValue(obj, path, value) {
-    var keys = path.split('.');
-    var o = obj;
-    while (keys.length) {
-      var key = keys.shift();
-      if (keys.length) {
-        // this isn't the end point
-        if (!o[key]) {
-          o[key] = {};
+  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];
+
+        // the edges can be swallowed by another decrease
+        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.mass > childNode.mass) {
+              this._addToCluster(parentNode,childNode,true);
+            }
+            else {
+              this._addToCluster(childNode,parentNode,true);
+            }
+          }
         }
-        o = o[key];
-      }
-      else {
-        // this is the end point
-        o[key] = value;
       }
     }
-  }
+  };
+
 
   /**
-   * Add a node to a graph object. If there is already a node with
-   * the same id, their attributes will be merged.
-   * @param {Object} graph
-   * @param {Object} node
+   * 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
    */
-  function addNode(graph, node) {
-    var i, len;
-    var current = null;
+  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;
+        }
 
-    // find root graph (in case of subgraph)
-    var graphs = [graph]; // list with all graphs from current graph to root graph
-    var root = graph;
-    while (root.parent) {
-      graphs.push(root.parent);
-      root = root.parent;
-    }
 
-    // find existing node (at root level) by its id
-    if (root.nodes) {
-      for (i = 0, len = root.nodes.length; i < len; i++) {
-        if (node.id === root.nodes[i].id) {
-          current = root.nodes[i];
-          break;
+        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+          smallestNeighbour = neighbour.clusterSessions.length;
+          smallestNeighbourNode = neighbour;
         }
       }
     }
 
-    if (!current) {
-      // this is a new node
-      current = {
-        id: node.id
-      };
-      if (graph.node) {
-        // clone default attributes
-        current.attr = merge(current.attr, graph.node);
-      }
-    }
-
-    // add node to this (sub)graph and all its parent graphs
-    for (i = graphs.length - 1; i >= 0; i--) {
-      var g = graphs[i];
-
-      if (!g.nodes) {
-        g.nodes = [];
-      }
-      if (g.nodes.indexOf(current) == -1) {
-        g.nodes.push(current);
-      }
+    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+      this._addToCluster(neighbour, node, true);
     }
+  };
 
-    // merge attributes
-    if (node.attr) {
-      current.attr = merge(current.attr, node.attr);
-    }
-  }
 
   /**
-   * Add an edge to a graph object
-   * @param {Object} graph
-   * @param {Object} edge
+   * 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
    */
-  function addEdge(graph, edge) {
-    if (!graph.edges) {
-      graph.edges = [];
-    }
-    graph.edges.push(edge);
-    if (graph.edge) {
-      var attr = merge({}, graph.edge);     // clone default attributes
-      edge.attr = merge(attr, edge.attr); // merge attributes
+  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);
+      }
     }
-  }
+  };
 
   /**
-   * Create an edge to a graph object
-   * @param {Object} graph
-   * @param {String | Number | Object} from
-   * @param {String | Number | Object} to
-   * @param {String} type
-   * @param {Object | null} attr
-   * @return {Object} edge
+   * 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
    */
-  function createEdge(graph, from, to, type, attr) {
-    var edge = {
-      from: from,
-      to: to,
-      type: type
-    };
-
-    if (graph.edge) {
-      edge.attr = merge({}, graph.edge);  // clone default attributes
+  exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
+    if (absorptionSizeOffset === undefined) {
+      absorptionSizeOffset = 0;
     }
-    edge.attr = merge(edge.attr || {}, attr); // merge attributes
-
-    return edge;
-  }
-
-  /**
-   * Get next token in the current dot file.
-   * The token and token type are available as token and tokenType
-   */
-  function getToken() {
-    tokenType = TOKENTYPE.NULL;
-    token = '';
+    // we decide if the node is a hub
+    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
+      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+      // initialize variables
+      var dx,dy,length;
+      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+      var allowCluster = false;
 
-    // skip over whitespaces
-    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-      next();
-    }
+      // 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);
+      }
 
-    do {
-      var isComment = false;
+      // if the hub clustering is not forces, 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);
 
-      // skip comment
-      if (c == '#') {
-        // find the previous non-space character
-        var i = index - 1;
-        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
-          i--;
-        }
-        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
-          // the # is at the start of a line, this is indeed a line comment
-          while (c != '' && c != '\n') {
-            next();
+                if (length < minLength) {
+                  allowCluster = true;
+                  break;
+                }
+              }
+            }
           }
-          isComment = true;
-        }
-      }
-      if (c == '/' && nextPreview() == '/') {
-        // skip line comment
-        while (c != '' && c != '\n') {
-          next();
         }
-        isComment = true;
       }
-      if (c == '/' && nextPreview() == '*') {
-        // skip block comment
-        while (c != '') {
-          if (c == '*' && nextPreview() == '/') {
-            // end of block comment found. skip these last two characters
-            next();
-            next();
-            break;
-          }
-          else {
-            next();
+
+      // start the clustering if allowed
+      if ((!force && allowCluster) || force) {
+        // we loop over all edges INITIALLY connected to this hub
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          edge = this.edges[edgesIdarray[j]];
+          // the edge can be clustered by this function in a previous loop
+          if (edge !== undefined) {
+            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+            // 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);
+            }
           }
         }
-        isComment = true;
-      }
-
-      // skip over whitespaces
-      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-        next();
       }
     }
-    while (isComment);
-
-    // check for end of dot file
-    if (c == '') {
-      // token is still empty
-      tokenType = TOKENTYPE.DELIMITER;
-      return;
-    }
+  };
 
-    // check for delimiters consisting of 2 characters
-    var c2 = c + nextPreview();
-    if (DELIMITERS[c2]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c2;
-      next();
-      next();
-      return;
-    }
 
-    // check for delimiters consisting of 1 character
-    if (DELIMITERS[c]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c;
-      next();
-      return;
-    }
 
-    // check for an identifier (number or string)
-    // TODO: more precise parsing of numbers/strings (and the port separator ':')
-    if (isAlphaNumeric(c) || c == '-') {
-      token += c;
-      next();
+  /**
+   * 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;
 
-      while (isAlphaNumeric(c)) {
-        token += c;
-        next();
-      }
-      if (token == 'false') {
-        token = false;   // convert to boolean
-      }
-      else if (token == 'true') {
-        token = true;   // convert to boolean
+    // 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
+        this._addToContainedEdges(parentNode,childNode,edge);
       }
-      else if (!isNaN(Number(token))) {
-        token = Number(token); // convert to number
+      else {
+        this._connectEdgeToCluster(parentNode,childNode,edge);
       }
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
     }
+    // a contained node has no dynamic edges.
+    childNode.dynamicEdges = [];
 
-    // check for a string enclosed by double quotes
-    if (c == '"') {
-      next();
-      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
-        token += c;
-        if (c == '"') { // skip the escape character
-          next();
-        }
-        next();
-      }
-      if (c != '"') {
-        throw newSyntaxError('End of string " expected');
-      }
-      next();
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+    // remove circular edges from clusters
+    this._containCircularEdgesFromNode(parentNode,childNode);
 
-    // something unknown is found, wrong characters, a syntax error
-    tokenType = TOKENTYPE.UNKNOWN;
-    while (c != '') {
-      token += c;
-      next();
-    }
-    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
-  }
 
-  /**
-   * Parse a graph.
-   * @returns {Object} graph
-   */
-  function parseGraph() {
-    var graph = {};
+    // remove the childNode from the global nodes object
+    delete this.nodes[childNode.id];
 
-    first();
-    getToken();
+    // update the properties of the child and parent
+    var massBefore = parentNode.mass;
+    childNode.clusterSession = this.clusterSession;
+    parentNode.mass += childNode.mass;
+    parentNode.clusterSize += childNode.clusterSize;
+    parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
 
-    // optional strict keyword
-    if (token == 'strict') {
-      graph.strict = true;
-      getToken();
+    // 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);
     }
 
-    // graph or digraph keyword
-    if (token == 'graph' || token == 'digraph') {
-      graph.type = token;
-      getToken();
+    // forced clusters only open from screen size and double tap
+    if (force == true) {
+      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
+      parentNode.formationScale = 0;
     }
-
-    // optional graph id
-    if (tokenType == TOKENTYPE.IDENTIFIER) {
-      graph.id = token;
-      getToken();
+    else {
+      parentNode.formationScale = this.scale; // The latest child has been added on this scale
     }
 
-    // open angle bracket
-    if (token != '{') {
-      throw newSyntaxError('Angle bracket { expected');
-    }
-    getToken();
+    // recalculate the size of the node on the next time the node is rendered
+    parentNode.clearSizeCache();
 
-    // statements
-    parseStatements(graph);
+    // set the pop-out scale for the childnode
+    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
 
-    // close angle bracket
-    if (token != '}') {
-      throw newSyntaxError('Angle bracket } expected');
-    }
-    getToken();
+    // nullify the movement velocity of the child, this is to avoid hectic behaviour
+    childNode.clearVelocity();
 
-    // end of file
-    if (token !== '') {
-      throw newSyntaxError('End of file expected');
-    }
-    getToken();
+    // the mass has altered, preservation of energy dictates the velocity to be updated
+    parentNode.updateVelocity(massBefore);
 
-    // remove temporary default properties
-    delete graph.node;
-    delete graph.edge;
-    delete graph.graph;
+    // restart the simulation to reorganise all nodes
+    this.moving = true;
+  };
+
+
+  /**
+   * 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;
+            }
+          }
+        }
+      }
+      node.dynamicEdgesLength -= correction;
+    }
+  };
 
-    return graph;
-  }
 
   /**
-   * Parse a list with statements.
-   * @param {Object} graph
+   * 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
    */
-  function parseStatements (graph) {
-    while (token !== '' && token != '}') {
-      parseStatement(graph);
-      if (token == ';') {
-        getToken();
+  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;
       }
     }
-  }
+  };
 
   /**
-   * Parse a single statement. Can be a an attribute statement, node
-   * statement, a series of node statements and edge statements, or a
-   * parameter.
-   * @param {Object} graph
+   * 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
    */
-  function parseStatement(graph) {
-    // parse subgraph
-    var subgraph = parseSubgraph(graph);
-    if (subgraph) {
-      // edge statements
-      parseEdge(graph, subgraph);
-
-      return;
+  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
 
-    // parse an attribute statement
-    var attr = parseAttributeStatement(graph);
-    if (attr) {
-      return;
-    }
+        edge.originalFromId.push(childNode.id);
+        edge.from = parentNode;
+        edge.fromId = parentNode.id;
+      }
 
-    // parse node
-    if (tokenType != TOKENTYPE.IDENTIFIER) {
-      throw newSyntaxError('Identifier expected');
+      this._addToReroutedEdges(parentNode,childNode,edge);
     }
-    var id = token; // id can be a string or a number
-    getToken();
+  };
 
-    if (token == '=') {
-      // id statement
-      getToken();
-      if (tokenType != TOKENTYPE.IDENTIFIER) {
-        throw newSyntaxError('Identifier expected');
+
+  /**
+   * 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);
       }
-      graph[id] = token;
-      getToken();
-      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
-    }
-    else {
-      parseNodeStatement(graph, id);
     }
-  }
+  };
+
 
   /**
-   * Parse a subgraph
-   * @param {Object} graph    parent graph object
-   * @return {Object | null} subgraph
+   * 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
    */
-  function parseSubgraph (graph) {
-    var subgraph = null;
+  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);
 
-    // optional subgraph keyword
-    if (token == 'subgraph') {
-      subgraph = {};
-      subgraph.type = 'subgraph';
-      getToken();
+    // this edge becomes part of the dynamicEdges of the cluster node
+    parentNode.dynamicEdges.push(edge);
+   };
 
-      // optional graph id
-      if (tokenType == TOKENTYPE.IDENTIFIER) {
-        subgraph.id = token;
-        getToken();
-      }
-    }
 
-    // open angle bracket
-    if (token == '{') {
-      getToken();
 
-      if (!subgraph) {
-        subgraph = {};
-      }
-      subgraph.parent = graph;
-      subgraph.node = graph.node;
-      subgraph.edge = graph.edge;
-      subgraph.graph = graph.graph;
+  /**
+   * 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;
+        }
 
-      // statements
-      parseStatements(subgraph);
+        // append this edge to the list of edges connecting to the childnode
+        childNode.dynamicEdges.push(edge);
 
-      // close angle bracket
-      if (token != '}') {
-        throw newSyntaxError('Angle bracket } expected');
+        // 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;
+          }
+        }
       }
-      getToken();
+      // remove the entry from the rerouted edges
+      delete parentNode.reroutedEdges[childNode.id];
+    }
+  };
 
-      // remove temporary default properties
-      delete subgraph.node;
-      delete subgraph.edge;
-      delete subgraph.graph;
-      delete subgraph.parent;
 
-      // register at the parent graph
-      if (!graph.subgraphs) {
-        graph.subgraphs = [];
+  /**
+   * 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) {
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
+        parentNode.dynamicEdges.splice(i,1);
       }
-      graph.subgraphs.push(subgraph);
     }
+  };
 
-    return subgraph;
-  }
 
   /**
-   * parse an attribute statement like "node [shape=circle fontSize=16]".
-   * Available keywords are 'node', 'edge', 'graph'.
-   * The previous list with default attributes will be replaced
-   * @param {Object} graph
-   * @returns {String | null} keyword Returns the name of the parsed attribute
-   *                                  (node, edge, graph), or null if nothing
-   *                                  is parsed.
+   * 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
    */
-  function parseAttributeStatement (graph) {
-    // attribute statements
-    if (token == 'node') {
-      getToken();
+  exports._releaseContainedEdges = function(parentNode, childNode) {
+    for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
+      var edge = parentNode.containedEdges[childNode.id][i];
 
-      // node attributes
-      graph.node = parseAttributeList();
-      return 'node';
-    }
-    else if (token == 'edge') {
-      getToken();
+      // put the edge back in the global edges object
+      this.edges[edge.id] = edge;
 
-      // edge attributes
-      graph.edge = parseAttributeList();
-      return 'edge';
+      // put the edge back in the dynamic edges of the child and parent
+      childNode.dynamicEdges.push(edge);
+      parentNode.dynamicEdges.push(edge);
     }
-    else if (token == 'graph') {
-      getToken();
+    // remove the entry from the contained edges
+    delete parentNode.containedEdges[childNode.id];
 
-      // graph attributes
-      graph.graph = parseAttributeList();
-      return 'graph';
-    }
+  };
 
-    return null;
-  }
 
-  /**
-   * parse a node statement
-   * @param {Object} graph
-   * @param {String | Number} id
-   */
-  function parseNodeStatement(graph, id) {
-    // node statement
-    var node = {
-      id: id
-    };
-    var attr = parseAttributeList();
-    if (attr) {
-      node.attr = attr;
-    }
-    addNode(graph, node);
 
-    // edge statements
-    parseEdge(graph, id);
-  }
+
+  // ------------------- UTILITY FUNCTIONS ---------------------------- //
+
 
   /**
-   * Parse an edge or a series of edges
-   * @param {Object} graph
-   * @param {String | Number} from        Id of the from node
+   * This updates the node labels for all nodes (for debugging purposes)
    */
-  function parseEdge(graph, from) {
-    while (token == '->' || token == '--') {
-      var to;
-      var type = token;
-      getToken();
-
-      var subgraph = parseSubgraph(graph);
-      if (subgraph) {
-        to = subgraph;
+  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),"]");
+        }
       }
-      else {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Identifier or subgraph expected');
+    }
+
+    // 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);
+          }
         }
-        to = token;
-        addNode(graph, {
-          id: to
-        });
-        getToken();
       }
+    }
 
-      // parse edge attributes
-      var attr = parseAttributeList();
+  //    /* Debug Override */
+  //    for (nodeId in this.nodes) {
+  //      if (this.nodes.hasOwnProperty(nodeId)) {
+  //        node = this.nodes[nodeId];
+  //        node.label = String(node.level);
+  //      }
+  //    }
 
-      // create edge
-      var edge = createEdge(graph, from, to, type, attr);
-      addEdge(graph, edge);
+  };
 
-      from = to;
-    }
-  }
 
   /**
-   * Parse a set with attributes,
-   * for example [label="1.000", shape=solid]
-   * @return {Object | null} attr
+   * 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.
    */
-  function parseAttributeList() {
-    var attr = null;
-
-    while (token == '[') {
-      getToken();
-      attr = {};
-      while (token !== '' && token != ']') {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute name expected');
-        }
-        var name = token;
-
-        getToken();
-        if (token != '=') {
-          throw newSyntaxError('Equal sign = expected');
-        }
-        getToken();
+  exports.normalizeClusterLevels = function() {
+    var maxLevel = 0;
+    var minLevel = 1e9;
+    var clusterLevel = 0;
+    var nodeId;
 
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute value expected');
-        }
-        var value = token;
-        setValue(attr, name, value); // name can be a path
+    // 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;}
+      }
+    }
 
-        getToken();
-        if (token ==',') {
-          getToken();
+    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]);
+          }
         }
       }
-
-      if (token != ']') {
-        throw newSyntaxError('Bracket ] expected');
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      // if a cluster was formed, we increase the clusterSession
+      if (this.nodeIndices.length != amountOfNodes) {
+        this.clusterSession += 1;
       }
-      getToken();
     }
+  };
 
-    return attr;
-  }
 
-  /**
-   * Create a syntax error with extra information on current token and index.
-   * @param {String} message
-   * @returns {SyntaxError} err
-   */
-  function newSyntaxError(message) {
-    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
-  }
 
   /**
-   * Chop off text after a maximum length
-   * @param {String} text
-   * @param {Number} maxLength
-   * @returns {String}
+   * 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
    */
-  function chop (text, maxLength) {
-    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
-  }
+  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
+      )
+  };
+
 
   /**
-   * Execute a function fn for each pair of elements in two arrays
-   * @param {Array | *} array1
-   * @param {Array | *} array2
-   * @param {function} fn
+   * 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.
+   *
    */
-  function forEach2(array1, array2, fn) {
-    if (array1 instanceof Array) {
-      array1.forEach(function (elem1) {
-        if (array2 instanceof Array) {
-          array2.forEach(function (elem2)  {
-            fn(elem1, elem2);
-          });
-        }
-        else {
-          fn(elem1, array2);
-        }
-      });
-    }
-    else {
-      if (array2 instanceof Array) {
-        array2.forEach(function (elem2)  {
-          fn(array1, elem2);
-        });
-      }
-      else {
-        fn(array1, array2);
+  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.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);
       }
     }
-  }
+  };
+
 
   /**
-   * Convert a string containing a graph in DOT language into a map containing
-   * with nodes and edges in the format of graph.
-   * @param {String} data         Text containing a graph in DOT-notation
-   * @return {Object} graphData
+   * 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
    */
-  function DOTToGraph (data) {
-    // parse the DOT file
-    var dotData = parseDOT(data);
-    var graphData = {
-      nodes: [],
-      edges: [],
-      options: {}
-    };
+  exports._getHubSize = function() {
+    var average = 0;
+    var averageSquared = 0;
+    var hubCounter = 0;
+    var largestHub = 0;
 
-    // copy the nodes
-    if (dotData.nodes) {
-      dotData.nodes.forEach(function (dotNode) {
-        var graphNode = {
-          id: dotNode.id,
-          label: String(dotNode.label || dotNode.id)
-        };
-        merge(graphNode, dotNode.attr);
-        if (graphNode.image) {
-          graphNode.shape = 'image';
-        }
-        graphData.nodes.push(graphNode);
-      });
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+
+      var node = this.nodes[this.nodeIndices[i]];
+      if (node.dynamicEdgesLength > largestHub) {
+        largestHub = node.dynamicEdgesLength;
+      }
+      average += node.dynamicEdgesLength;
+      averageSquared += Math.pow(node.dynamicEdgesLength,2);
+      hubCounter += 1;
     }
+    average = average / hubCounter;
+    averageSquared = averageSquared / hubCounter;
 
-    // copy the edges
-    if (dotData.edges) {
-      /**
-       * Convert an edge in DOT format to an edge with VisGraph format
-       * @param {Object} dotEdge
-       * @returns {Object} graphEdge
-       */
-      function convertEdge(dotEdge) {
-        var graphEdge = {
-          from: dotEdge.from,
-          to: dotEdge.to
-        };
-        merge(graphEdge, dotEdge.attr);
-        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
-        return graphEdge;
-      }
+    var variance = averageSquared - Math.pow(average,2);
 
-      dotData.edges.forEach(function (dotEdge) {
-        var from, to;
-        if (dotEdge.from instanceof Object) {
-          from = dotEdge.from.nodes;
-        }
-        else {
-          from = {
-            id: dotEdge.from
-          }
-        }
+    var standardDeviation = Math.sqrt(variance);
 
-        if (dotEdge.to instanceof Object) {
-          to = dotEdge.to.nodes;
-        }
-        else {
-          to = {
-            id: dotEdge.to
-          }
-        }
+    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
-          dotEdge.from.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
+    // always have at least one to cluster
+    if (this.hubThreshold > largestHub) {
+      this.hubThreshold = largestHub;
+    }
 
-        forEach2(from, to, function (from, to) {
-          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
-          var graphEdge = convertEdge(subEdge);
-          graphData.edges.push(graphEdge);
-        });
+  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
+  //  console.log("hubThreshold:",this.hubThreshold);
+  };
 
-        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
-          dotEdge.to.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
+
+  /**
+   * 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;
+          }
         }
-      });
+      }
     }
+  };
 
-    // copy the options
-    if (dotData.attr) {
-      graphData.options = dotData.attr;
+  /**
+   * 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 graphData;
-  }
-
-  // exports
-  exports.parseDOT = parseDOT;
-  exports.DOTToGraph = DOTToGraph;
+    return chains/total;
+  };
 
 
 /***/ },
-/* 40 */
+/* 44 */
 /***/ function(module, exports, __webpack_require__) {
 
   var util = __webpack_require__(1);
 
   /**
-   * @class Groups
-   * This class can store groups and properties specific for groups.
+   * 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 Groups() {
-    this.clear();
-    this.defaultIndex = 0;
-  }
-
 
   /**
-   * default constants for group colors
+   * 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
    */
-  Groups.DEFAULT = [
-    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
-    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
-    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
-    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
-    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
-    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
-    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
-    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
-    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
-    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
-  ];
+  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;
+  };
 
 
   /**
-   * Clear all groups
+   *  /**
+   * 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
    */
-  Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-      var i = 0;
-      for ( var p in this ) {
-        if (this.hasOwnProperty(p)) {
-          i++;
-        }
-      }
-      return i;
+  exports._switchToSector = function(sectorId, sectorType) {
+    if (sectorType === undefined || sectorType == "active") {
+      this._switchToActiveSector(sectorId);
+    }
+    else {
+      this._switchToFrozenSector(sectorId);
     }
   };
 
 
   /**
-   * get group properties of a groupname. If groupname is not found, a new group
-   * is added.
-   * @param {*} groupname        Can be a number, string, Date, etc.
-   * @return {Object} group      The created group, containing all group properties
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the supplied active sector.
+   *
+   * @param sectorId
+   * @private
    */
-  Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
-
-    if (group == undefined) {
-      // create new group
-      var index = this.defaultIndex % Groups.DEFAULT.length;
-      this.defaultIndex++;
-      group = {};
-      group.color = Groups.DEFAULT[index];
-      this.groups[groupname] = group;
-    }
-
-    return group;
+  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"];
   };
 
+
   /**
-   * Add a custom group style
-   * @param {String} groupname
-   * @param {Object} style       An object containing borderColor,
-   *                             backgroundColor, etc.
-   * @return {Object} group      The created group object
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the supplied active sector.
+   *
+   * @private
    */
-  Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    if (style.color) {
-      style.color = util.parseColor(style.color);
-    }
-    return style;
+  exports._switchToSupportSector = function() {
+    this.nodeIndices = this.sectors["support"]["nodeIndices"];
+    this.nodes       = this.sectors["support"]["nodes"];
+    this.edges       = this.sectors["support"]["edges"];
   };
 
-  module.exports = Groups;
 
+  /**
+   * 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"];
+  };
 
-/***/ },
-/* 41 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * @class Images
-   * This class loads images and keeps them stored.
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the currently active sector.
+   *
+   * @private
    */
-  function Images() {
-    this.images = {};
+  exports._loadLatestSector = function() {
+    this._switchToSector(this._sector());
+  };
 
-    this.callback = undefined;
-  }
 
   /**
-   * Set an onload callback function. This will be called each time an image
-   * is loaded
-   * @param {function} callback
+   * This function returns the currently active sector Id
+   *
+   * @returns {String}
+   * @private
    */
-  Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
+  exports._sector = function() {
+    return this.activeSector[this.activeSector.length-1];
   };
 
+
   /**
+   * This function returns the previously active sector Id
    *
-   * @param {string} url          Url of the image
-   * @return {Image} img          The image object
+   * @returns {String}
+   * @private
    */
-  Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-      // create the image
-      var images = this;
-      img = new Image();
-      this.images[url] = img;
-      img.onload = function() {
-        if (images.callback) {
-          images.callback(this);
-        }
-      };
-      img.src = url;
+  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.');
     }
-
-    return img;
   };
 
-  module.exports = Images;
-
 
-/***/ },
-/* 42 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+  };
 
-  var util = __webpack_require__(1);
 
   /**
-   * @class Node
-   * A node. A node can be connected to other nodes via one or multiple edges.
-   * @param {object} properties An object containing properties for the node. All
-   *                            properties are optional, except for the id.
-   *                              {number} id     Id of the node. Required
-   *                              {string} label  Text label for the node
-   *                              {number} x      Horizontal position of the node
-   *                              {number} y      Vertical position of the node
-   *                              {string} shape  Node shape, available:
-   *                                              "database", "circle", "ellipse",
-   *                                              "box", "image", "text", "dot",
-   *                                              "star", "triangle", "triangleDown",
-   *                                              "square"
-   *                              {string} image  An image url
-   *                              {string} title  An title text, can be HTML
-   *                              {anytype} group A group name or number
-   * @param {Network.Images} imagelist    A list with images. Only needed
-   *                                            when the node has an image
-   * @param {Network.Groups} grouplist    A list with groups. Needed for
-   *                                            retrieving group properties
-   * @param {Object}               constants    An object with default values for
-   *                                            example for the color
+   * We remove the currently active sector id from the active sector stack. This happens when
+   * we reactivate the previously active sector
    *
+   * @private
    */
-  function Node(properties, imagelist, grouplist, constants) {
-    this.selected = false;
-    this.hover = false;
+  exports._forgetLastSector = function() {
+    this.activeSector.pop();
+  };
 
-    this.edges = []; // all edges connected to this node
-    this.dynamicEdges = [];
-    this.reroutedEdges = {};
 
-    this.group = constants.nodes.group;
-    this.fontSize = Number(constants.nodes.fontSize);
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-    this.fontDrawThreshold = 3;
+  /**
+   * 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};
 
-    this.color = constants.nodes.color;
+    // 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;
+  };
 
-    // set defaults for the properties
-    this.id = undefined;
-    this.shape = constants.nodes.shape;
-    this.image = constants.nodes.image;
-    this.x = null;
-    this.y = null;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.horizontalAlignLeft = true; // these are for the navigation controls
-    this.verticalAlignTop    = true; // these are for the navigation controls
-    this.radius = constants.nodes.radius;
-    this.baseRadiusValue = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
-    this.level = -1;
-    this.preassignedLevel = false;
 
+  /**
+   * 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.imagelist = imagelist;
-    this.grouplist = grouplist;
 
-    // physics properties
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = constants.physics.damping;
-    this.mass = 1;  // kg
-    this.fixedData = {x:null,y:null};
+  /**
+   * 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];
+  };
 
-    this.setProperties(properties, constants);
 
-    // creating the variables for clustering
-    this.resetCluster();
-    this.dynamicEdgesLength = 0;
-    this.clusterSession = 0;
-    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
-    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
-    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
-    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
-    this.growthIndicator = 0;
+  /**
+   * 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);
+  };
 
-    // variables to tell the node about the network.
-    this.networkScaleInv = 1;
-    this.networkScale = 1;
-    this.canvasTopLeft = {"x": -300, "y": -300};
-    this.canvasBottomRight = {"x":  300, "y":  300};
-    this.parentEdgeId = null;
-  }
 
   /**
-   * (re)setting the clustering variables and objects
+   * This is the reverse operation of _freezeSector. Activating means moving the sector from the "frozen"
+   * object to the "active" object.
+   *
+   * @param sectorId
+   * @private
    */
-  Node.prototype.resetCluster = function() {
-    // clustering variables
-    this.formationScale = undefined; // this is used to determine when to open the cluster
-    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
-    this.containedNodes = {};
-    this.containedEdges = {};
-    this.clusterSessions = [];
+  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);
   };
 
+
   /**
-   * Attach a edge to the node
-   * @param {Edge} edge
+   * 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
    */
-  Node.prototype.attachEdge = function(edge) {
-    if (this.edges.indexOf(edge) == -1) {
-      this.edges.push(edge);
+  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];
+      }
     }
-    if (this.dynamicEdges.indexOf(edge) == -1) {
-      this.dynamicEdges.push(edge);
+
+    // 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];
+      }
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
+
+    // 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);
   };
 
+
   /**
-   * Detach a edge from the node
-   * @param {Edge} edge
+   * We create a new active sector from the node that we want to open.
+   *
+   * @param node
+   * @private
    */
-  Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-      this.edges.splice(index, 1);
-      this.dynamicEdges.splice(index, 1);
-    }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
+  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;
   };
 
 
   /**
-   * Set or overwrite properties for the node
-   * @param {Object} properties an object with properties
-   * @param {Object} constants  and object with default, global properties
+   * 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
    */
-  Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
-    this.originalLabel = undefined;
-    // basic properties
-    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.group !== undefined)     {this.group = properties.group;}
-    if (properties.x !== undefined)         {this.x = properties.x;}
-    if (properties.y !== undefined)         {this.y = properties.y;}
-    if (properties.value !== undefined)     {this.value = properties.value;}
-    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
+  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();
 
-    // physics
-    if (properties.mass !== undefined)                {this.mass = properties.mass;}
+        // we collapse the sector back to a single cluster
+        this._collapseThisToSingleCluster();
 
-    // navigation controls properties
-    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
-    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
-    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
+        // 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 (this.id === undefined) {
-      throw "Node must have an id";
-    }
+        // 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);
 
-    // copy group properties
-    if (this.group) {
-      var groupObj = this.grouplist.get(this.group);
-      for (var prop in groupObj) {
-        if (groupObj.hasOwnProperty(prop)) {
-          this[prop] = groupObj[prop];
-        }
-      }
-    }
+        // we activate the previously active (and currently frozen) sector.
+        this._activateSector(previousSector);
 
-    // individual shape properties
-    if (properties.shape !== undefined)          {this.shape = properties.shape;}
-    if (properties.image !== undefined)          {this.image = properties.image;}
-    if (properties.radius !== undefined)         {this.radius = properties.radius; this.baseRadiusValue = this.radius;}
-    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
+        // we load the references from the newly active sector into the global references
+        this._switchToSector(previousSector);
 
-    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
+        // we forget the previously active sector because we reverted to the one before
+        this._forgetLastSector();
 
-    if (this.image !== undefined && this.image != "") {
-      if (this.imagelist) {
-        this.imageObj = this.imagelist.load(this.image);
-      }
-      else {
-        throw "No imagelist provided";
+        // finally, we update the node index list.
+        this._updateNodeIndexList();
+
+        // we refresh the list with calulation nodes and calculation node indices.
+        this._updateCalculationNodes();
       }
     }
+  };
 
-    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
-    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
-    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
-    if (this.shape == 'image') {
-      this.radiusMin = constants.nodes.widthMin;
-      this.radiusMax = constants.nodes.widthMax;
+  /**
+   * 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) {
+    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);
+          this[runFunction]();
+        }
+      }
     }
-
-    // choose draw method depending on the shape
-    switch (this.shape) {
-      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
-      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-      // TODO: add diamond shape
-      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+    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) {
+            this[runFunction](args[0],args[1]);
+          }
+          else {
+            this[runFunction](argument);
+          }
+        }
+      }
     }
-    // reset the size of the node, this can be changed
-    this._reset();
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
   };
 
-  /**
-   * select this node
-   */
-  Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
-  };
 
   /**
-   * unselect this node
+   * 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
    */
-  Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
+  exports._doInSupportSector = function(runFunction,argument) {
+    if (argument === undefined) {
+      this._switchToSupportSector();
+      this[runFunction]();
+    }
+    else {
+      this._switchToSupportSector();
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
+      }
+      else {
+        this[runFunction](argument);
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
   };
 
 
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
+   * 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
    */
-  Node.prototype.clearSizeCache = function() {
-    this._reset();
+  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);
+          }
+        }
+      }
+    }
+    this._loadLatestSector();
   };
 
+
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
+   * 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
    */
-  Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
+  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);
+      }
+    }
   };
 
+
   /**
-   * get the title of this node.
-   * @return {string} title    The title of the node, or undefined when no title
-   *                           has been set.
+   * 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
    */
-  Node.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
+  exports._clearNodeIndexList = function() {
+    var sector = this._sector();
+    this.sectors["active"][sector]["nodeIndices"] = [];
+    this.nodeIndices = this.sectors["active"][sector]["nodeIndices"];
   };
 
+
   /**
-   * Calculate the distance to the border of the Node
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Number} angle        Angle in radians
-   * @returns {number} distance   Distance to the border in pixels
+   * Draw the encompassing sector node
+   *
+   * @param ctx
+   * @param sectorType
+   * @private
    */
-  Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
+  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 (!this.width) {
-      this.resize(ctx);
+          this._switchToSector(sector,sectorType);
+
+          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.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
+          node.setScale(this.scale);
+          node._drawCircle(ctx);
+        }
+      }
     }
+  };
 
-    switch (this.shape) {
-      case 'circle':
-      case 'dot':
-        return this.radius + borderWidth;
+  exports._drawAllSectorNodes = function(ctx) {
+    this._drawSectorNodes(ctx,"frozen");
+    this._drawSectorNodes(ctx,"active");
+    this._loadLatestSector();
+  };
 
-      case 'ellipse':
-        var a = this.width / 2;
-        var b = this.height / 2;
-        var w = (Math.sin(angle) * a);
-        var h = (Math.cos(angle) * b);
-        return a * b / Math.sqrt(w * w + h * h);
 
-      // TODO: implement distanceToBorder for database
-      // TODO: implement distanceToBorder for triangle
-      // TODO: implement distanceToBorder for triangleDown
+/***/ },
+/* 45 */
+/***/ function(module, exports, __webpack_require__) {
 
-      case 'box':
-      case 'image':
-      case 'text':
-      default:
-        if (this.width) {
-          return Math.min(
-              Math.abs(this.width / 2 / Math.cos(angle)),
-              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-          // TODO: reckon with border radius too in case of box
-        }
-        else {
-          return 0;
-        }
+  var Node = __webpack_require__(30);
 
+  /**
+   * 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);
+        }
+      }
     }
-    // TODO: implement calculation of distance to border for all shapes
   };
 
   /**
-   * Set forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
+   * 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
    */
-  Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
+  exports._getAllNodesOverlappingWith = function (object) {
+    var overlappingNodes = [];
+    this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes);
+    return overlappingNodes;
   };
 
+
   /**
-   * Add forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
+   * Return a position object in canvasspace from a single point in screenspace
+   *
+   * @param pointer
+   * @returns {{left: number, top: number, right: number, bottom: number}}
    * @private
    */
-  Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
+  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
+    };
   };
 
+
   /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
+   * Get the top node at the a specific point (like a click)
+   *
+   * @param {{x: Number, y: Number}} pointer
+   * @return {Node | null} node
+   * @private
    */
-  Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.x  += this.vx * interval;          // position
-    }
+  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 (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.y  += this.vy * interval;          // position
+    // 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;
     }
   };
 
 
-
   /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   * @param {number} maxVelocity The speed limit imposed on the velocity
+   * 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
    */
-  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
-      this.x  += this.vx * interval;          // position
-    }
-    else {
-      this.fx = 0;
+  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);
+        }
+      }
     }
+  };
 
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
-      this.y  += this.vy * interval;          // position
+
+  /**
+   * 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;
+  };
+
+  /**
+   * 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 (overlappingEdges.length > 0) {
+      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
     }
     else {
-      this.fy = 0;
+      return null;
     }
   };
 
+
   /**
-   * Check if this node has a fixed x and y position
-   * @return {boolean}      true if fixed, false if not
+   * Add object to the selection array.
+   *
+   * @param obj
+   * @private
    */
-  Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
+  exports._addToSelection = function(obj) {
+    if (obj instanceof Node) {
+      this.selectionObj.nodes[obj.id] = obj;
+    }
+    else {
+      this.selectionObj.edges[obj.id] = obj;
+    }
   };
 
   /**
-   * Check if this node is moving
-   * @param {number} vmin   the minimum velocity considered as "moving"
-   * @return {boolean}      true if moving, false if it has no velocity
+   * Add object to the selection array.
+   *
+   * @param obj
+   * @private
    */
-  // TODO: replace this method with calculating the kinetic energy
-  Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  exports._addToHover = function(obj) {
+    if (obj instanceof Node) {
+      this.hoverObj.nodes[obj.id] = obj;
+    }
+    else {
+      this.hoverObj.edges[obj.id] = obj;
+    }
   };
 
+
   /**
-   * check if this node is selecte
-   * @return {boolean} selected   True if node is selected, else false
+   * Remove a single option from selection.
+   *
+   * @param {Object} obj
+   * @private
    */
-  Node.prototype.isSelected = function() {
-    return this.selected;
+  exports._removeFromSelection = function(obj) {
+    if (obj instanceof Node) {
+      delete this.selectionObj.nodes[obj.id];
+    }
+    else {
+      delete this.selectionObj.edges[obj.id];
+    }
   };
 
   /**
-   * Retrieve the value of the node. Can be undefined
-   * @return {Number} value
+   * Unselect all. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
    */
-  Node.prototype.getValue = function() {
-    return this.value;
+  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();
+      }
+    }
+
+    this.selectionObj = {nodes:{},edges:{}};
+
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
   };
 
   /**
-   * Calculate the distance from the nodes location to the given location (x,y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Number} value
+   * Unselect all clusters. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
    */
-  Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
+  exports._unselectClusters = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+
+    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]);
+        }
+      }
+    }
+
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
   };
 
 
   /**
-   * Adjust the value range of the node. The node will adjust it's radius
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
+   * return the number of selected nodes
+   *
+   * @returns {number}
+   * @private
    */
-  Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-      if (max == min) {
-        this.radius = (this.radiusMin + this.radiusMax) / 2;
-      }
-      else {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
+  exports._getSelectedNodeCount = function() {
+    var count = 0;
+    for (var nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        count += 1;
       }
     }
-    this.baseRadiusValue = this.radius;
+    return count;
   };
 
   /**
-   * Draw this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * return the selected node
+   *
+   * @returns {number}
+   * @private
    */
-  Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
+  exports._getSelectedNode = function() {
+    for (var nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        return this.selectionObj.nodes[nodeId];
+      }
+    }
+    return null;
   };
 
   /**
-   * Recalculate the size of this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * return the selected edge
+   *
+   * @returns {number}
+   * @private
    */
-  Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
+  exports._getSelectedEdge = function() {
+    for (var edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        return this.selectionObj.edges[edgeId];
+      }
+    }
+    return null;
   };
 
+
   /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top, right, bottom
-   * @return {boolean}     True if location is located on node
+   * return the number of selected edges
+   *
+   * @returns {number}
+   * @private
    */
-  Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left              < obj.right  &&
-            this.left + this.width > obj.left   &&
-            this.top               < obj.bottom &&
-            this.top + this.height > obj.top);
+  exports._getSelectedEdgeCount = function() {
+    var count = 0;
+    for (var edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        count += 1;
+      }
+    }
+    return count;
   };
 
-  Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
 
-    if (!this.width || !this.height) {  // undefined or 0
-      var width, height;
-      if (this.value) {
-        this.radius = this.baseRadiusValue;
-        var scale = this.imageObj.height / this.imageObj.width;
-        if (scale !== undefined) {
-          width = this.radius || this.imageObj.width;
-          height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-          width = 0;
-          height = 0;
-        }
-      }
-      else {
-        width = this.imageObj.width;
-        height = this.imageObj.height;
+  /**
+   * 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;
       }
-      this.width  = width;
-      this.height = height;
-
-      this.growthIndicator = 0;
-      if (this.width > 0 && this.height > 0) {
-        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
-        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-        this.growthIndicator = this.width - width;
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        count += 1;
       }
     }
-
+    return count;
   };
 
-  Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
-
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
-
-    var yLabel;
-    if (this.imageObj.width != 0 ) {
-      // draw the shade
-      if (this.clusterSize > 1) {
-        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
-        lineWidth *= this.networkScaleInv;
-        lineWidth = Math.min(0.2 * this.width,lineWidth);
-
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+  /**
+   * 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;
       }
-
-      // draw the image
-      ctx.globalAlpha = 1.0;
-      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-      yLabel = this.y + this.height / 2;
     }
-    else {
-      // image still loading... just draw the label for now
-      yLabel = this.y;
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        return false;
+      }
     }
-
-    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
+    return true;
   };
 
 
-  Node.prototype._resizeBox = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
-
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-
+  /**
+   * 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;
   };
 
-  Node.prototype._drawBox = function (ctx) {
-    this._resizeBox(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
-      ctx.stroke();
+  /**
+   * 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);
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
-
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    this._label(ctx, this.label, this.x, this.y);
   };
 
+  /**
+   * 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);
+    }
+  };
 
-  Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var size = textSize.width + 2 * margin;
-      this.width = size;
-      this.height = size;
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+  /**
+   * 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);
     }
   };
 
-  Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * 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) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    if (highlightEdges === undefined) {
+      highlightEdges = true;
+    }
 
-      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
-      ctx.stroke();
+    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
+      this._unselectAll(true);
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
+    if (object.selected == false) {
+      object.select();
+      this._addToSelection(object);
+      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
+        this._selectConnectedEdges(object);
+      }
+    }
+    else {
+      object.unselect();
+      this._removeFromSelection(object);
+    }
 
-    this._label(ctx, this.label, this.x, this.y);
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
   };
 
 
-  Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-      this.radius = diameter / 2;
-
-      this.width = diameter;
-      this.height = diameter;
-
-      // scaling used for clustering
-  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.radius - 0.5*diameter;
+  /**
+   * 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});
     }
   };
 
-  Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
-      ctx.stroke();
+  /**
+   * 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});
+      }
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
+    }
+  };
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
 
-    this._label(ctx, this.label, this.x, this.y);
+  /**
+   * 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) {
   };
 
-  Node.prototype._resizeEllipse = function (ctx) {
-    if (!this.width) {
-      var textSize = this.getTextSize(ctx);
 
-      this.width = textSize.width * 1.5;
-      this.height = textSize.height * 2;
-      if (this.width < this.height) {
-        this.width = this.height;
+  /**
+   * 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 defaultSize = this.width;
-
-        // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - defaultSize;
     }
+    this.emit("click", this.getSelection());
+    this._redraw();
   };
 
-  Node.prototype._drawEllipse = function (ctx) {
-    this._resizeEllipse(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * 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);
+    }
+    this.emit("doubleClick", this.getSelection());
+  };
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
-      ctx.stroke();
+  /**
+   * Handle the onHold selection part
+   *
+   * @param pointer
+   * @private
+   */
+  exports._handleOnHold = function(pointer) {
+    var node = this._getNodeAt(pointer);
+    if (node != null) {
+      this._selectObject(node,true);
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    else {
+      var edge = this._getEdgeAt(pointer);
+      if (edge != null) {
+        this._selectObject(edge,true);
+      }
+    }
+    this._redraw();
+  };
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
-    ctx.ellipse(this.left, this.top, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-    this._label(ctx, this.label, this.x, this.y);
-  };
+  /**
+   * handle the onRelease event. These functions are here for the navigation controls module.
+   *
+    * @private
+   */
+  exports._handleOnRelease = function(pointer) {
 
-  Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
   };
 
-  Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
-  };
 
-  Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-  };
 
-  Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
+  /**
+   *
+   * 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};
   };
 
-  Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
+  /**
+   *
+   * retrieve the currently selected nodes
+   * @return {String[]} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedNodes = function() {
+    var idArray = [];
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        idArray.push(nodeId);
+      }
+    }
+    return idArray
   };
 
-  Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-      this.radius = this.baseRadiusValue;
-      var size = 2 * this.radius;
-      this.width = size;
-      this.height = size;
-
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+  /**
+   *
+   * retrieve the currently selected edges
+   * @return {Array} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedEdges = function() {
+    var idArray = [];
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        idArray.push(edgeId);
+      }
     }
+    return idArray;
   };
 
-  Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-    var radiusMultiplier = 2;
-
-    // choose draw method depending on the shape
-    switch (shape) {
-      case 'dot':           radiusMultiplier = 2; break;
-      case 'square':        radiusMultiplier = 2; break;
-      case 'triangle':      radiusMultiplier = 3; break;
-      case 'triangleDown':  radiusMultiplier = 3; break;
-      case 'star':          radiusMultiplier = 4; break;
-    }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * select zero or more nodes
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.setSelection = function(selection) {
+    var i, iMax, id;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
-      ctx.stroke();
-    }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    // first unselect any selected node
+    this._unselectAll(true);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-    if (this.label) {
-      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
+      }
+      this._selectObject(node,true,true);
     }
-  };
 
-  Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+    console.log("setSelection is deprecated. Please use selectNodes instead.")
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-    }
+    this.redraw();
   };
 
-  Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+  /**
+   * 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 (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = align || "center";
-      ctx.textBaseline = baseline || "middle";
+    // first unselect any selected node
+    this._unselectAll(true);
 
-      var lines = text.split('\n');
-      var lineCount = lines.length;
-      var fontSize = (this.fontSize + 4);
-      var yLine = y + (1 - lineCount) / 2 * fontSize;
-      if (labelUnderNode == true) {
-        yLine = y + (1 - lineCount) / (2 * fontSize);
-      }
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-      for (var i = 0; i < lineCount; i++) {
-        ctx.fillText(lines[i], x, yLine);
-        yLine += fontSize;
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
       }
+      this._selectObject(node,true,true,highlightEdges);
     }
+    this.redraw();
   };
 
 
-  Node.prototype.getTextSize = function(ctx) {
-    if (this.label !== undefined) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+  /**
+   * 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;
 
-      var lines = this.label.split('\n'),
-          height = (this.fontSize + 4) * lines.length,
-          width = 0;
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-      for (var i = 0, iMax = lines.length; i < iMax; i++) {
-        width = Math.max(width, ctx.measureText(lines[i]).width);
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var edge = this.edges[id];
+      if (!edge) {
+        throw new RangeError('Edge with id "' + id + '" not found');
       }
+      this._selectObject(edge,true,true,highlightEdges);
+    }
+    this.redraw();
+  };
 
-      return {"width": width, "height": height};
+  /**
+   * 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];
+        }
+      }
     }
-    else {
-      return {"width": 0, "height": 0};
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        if (!this.edges.hasOwnProperty(edgeId)) {
+          delete this.selectionObj.edges[edgeId];
+        }
+      }
     }
   };
 
+
+/***/ },
+/* 46 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(30);
+  var Edge = __webpack_require__(27);
+
   /**
-   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
-   * there is a safety margin of 0.3 * width;
+   * clears the toolbar div element of children
    *
-   * @returns {boolean}
+   * @private
    */
-  Node.prototype.inArea = function() {
-    if (this.width !== undefined) {
-    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
-            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
-            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
-            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
-    }
-    else {
-      return true;
+  exports._clearManipulatorBar = function() {
+    while (this.manipulationDiv.hasChildNodes()) {
+      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
     }
   };
 
   /**
-   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
-   * @returns {boolean}
+   * 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
    */
-  Node.prototype.inView = function() {
-    return (this.x >= this.canvasTopLeft.x    &&
-            this.x < this.canvasBottomRight.x &&
-            this.y >= this.canvasTopLeft.y    &&
-            this.y < this.canvasBottomRight.y);
+  exports._restoreOverloadedFunctions = function() {
+    for (var functionName in this.cachedFunctions) {
+      if (this.cachedFunctions.hasOwnProperty(functionName)) {
+        this[functionName] = this.cachedFunctions[functionName];
+      }
+    }
   };
 
   /**
-   * This allows the zoom level of the network to influence the rendering
-   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+   * Enable or disable edit-mode.
    *
-   * @param scale
-   * @param canvasTopLeft
-   * @param canvasBottomRight
+   * @private
    */
-  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-    this.canvasTopLeft = canvasTopLeft;
-    this.canvasBottomRight = canvasBottomRight;
+  exports._toggleEditMode = function() {
+    this.editMode = !this.editMode;
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
+    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()
   };
 
-
   /**
-   * This allows the zoom level of the network to influence the rendering
+   * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
    *
-   * @param scale
+   * @private
    */
-  Node.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-  };
+  exports._createManipulatorBar = function() {
+    // remove bound functions
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+      this.controlNodesActive = false;
+    }
 
+    // restore overloaded functions
+    this._restoreOverloadedFunctions();
 
-  /**
-   * set the velocity at 0. Is called when this node is contained in another during clustering
-   */
-  Node.prototype.clearVelocity = function() {
-    this.vx = 0;
-    this.vy = 0;
+    // resume calculation
+    this.freezeSimulation = false;
+
+    // reset global variables
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
+
+    if (this.editMode == true) {
+      while (this.manipulationDiv.hasChildNodes()) {
+        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+      }
+      // add the icons to the manipulator div
+      this.manipulationDiv.innerHTML = "" +
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+      }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
+      }
+
+
+      // bind the icons
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
+      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
+      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        var editButton = document.getElementById("network-manipulate-editNode");
+        editButton.onclick = this._editNode.bind(this);
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        var editButton = document.getElementById("network-manipulate-editEdge");
+        editButton.onclick = this._createEditEdgeToolbar.bind(this);
+      }
+      if (this._selectionIsEmpty() == false) {
+        var deleteButton = document.getElementById("network-manipulate-delete");
+        deleteButton.onclick = this._deleteSelected.bind(this);
+      }
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
+      closeDiv.onclick = this._toggleEditMode.bind(this);
+
+      this.boundFunction = this._createManipulatorBar.bind(this);
+      this.on('select', this.boundFunction);
+    }
+    else {
+      this.editModeDiv.innerHTML = "" +
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
+      editModeButton.onclick = this._toggleEditMode.bind(this);
+    }
   };
 
 
+
   /**
-   * Basic preservation of (kinectic) energy
+   * Create the toolbar for adding Nodes
    *
-   * @param massBeforeClustering
+   * @private
    */
-  Node.prototype.updateVelocity = function(massBeforeClustering) {
-    var energyBefore = this.vx * this.vx * massBeforeClustering;
-    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vx = Math.sqrt(energyBefore/this.mass);
-    energyBefore = this.vy * this.vy * massBeforeClustering;
-    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vy = Math.sqrt(energyBefore/this.mass);
-  };
+  exports._createAddNodeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-  module.exports = Node;
+    // create the toolbar contents
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-/***/ },
-/* 43 */
-/***/ function(module, exports, __webpack_require__) {
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._addNode.bind(this);
+    this.on('select', this.boundFunction);
+  };
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(42);
 
   /**
-   * @class Edge
+   * create the toolbar to connect nodes
    *
-   * A edge connects two nodes
-   * @param {Object} properties     Object with properties. Must contain
-   *                                At least properties from and to.
-   *                                Available properties: from (number),
-   *                                to (number), label (string, color (string),
-   *                                width (number), style (string),
-   *                                length (number), title (string)
-   * @param {Network} network       A Network object, used to find and edge to
-   *                                nodes.
-   * @param {Object} constants      An object with default values for
-   *                                example for the color
+   * @private
    */
-  function Edge (properties, network, constants) {
-    if (!network) {
-      throw "No network provided";
-    }
-    this.network = network;
-
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
-
-    // initialize variables
-    this.id     = undefined;
-    this.fromId = undefined;
-    this.toId   = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
-    this.hoverWidth = constants.edges.hoverWidth;
-    this.value  = undefined;
-    this.length = constants.physics.springLength;
-    this.customLength = false;
-    this.selected = false;
-    this.hover = false;
-    this.smoothCurves = constants.smoothCurves;
-    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
-    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
-    this.inheritColor = constants.edges.inheritColor;
+  exports._createAddEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this._unselectAll(true);
+    this.freezeSimulation = true;
 
-    this.from = null;   // a node
-    this.to = null;     // a node
-    this.via = null;    // a temp node
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
-    // by storing the original information we can revert to the original connection when the cluser is opened.
-    this.originalFromId = [];
-    this.originalToId = [];
+    this._unselectAll();
+    this.forceAppendSelection = false;
+    this.blockConnectingEdgeSelection = true;
 
-    this.connected = false;
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-    this.color       = {color:constants.edges.color.color,
-                        highlight:constants.edges.color.highlight,
-                        hover:constants.edges.color.hover};
-    this.widthFixed  = false;
-    this.lengthFixed = false;
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._handleConnect.bind(this);
+    this.on('select', this.boundFunction);
 
-    this.setProperties(properties, constants);
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"] = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+    this._handleTouch = this._handleConnect;
+    this._handleOnRelease = this._finishConnect;
 
-    this.controlNodesEnabled = false;
-    this.controlNodes = {from:null, to:null, positions:{}};
-    this.connectedNode = null;
-  }
+    // redraw to show the unselect
+    this._redraw();
+  };
 
   /**
-   * Set or overwrite properties for the edge
-   * @param {Object} properties  an object with properties
-   * @param {Object} constants   and object with default, global properties
+   * create the toolbar to edit edges
+   *
+   * @private
    */
-  Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
-
-    if (properties.from !== undefined)           {this.fromId = properties.from;}
-    if (properties.to !== undefined)             {this.toId = properties.to;}
-
-    if (properties.id !== undefined)             {this.id = properties.id;}
-    if (properties.style !== undefined)          {this.style = properties.style;}
-    if (properties.label !== undefined)          {this.label = properties.label;}
-
-    if (this.label) {
-      this.fontSize = constants.edges.fontSize;
-      this.fontFace = constants.edges.fontFace;
-      this.fontColor = constants.edges.fontColor;
-      this.fontFill = constants.edges.fontFill;
+  exports._createEditEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this.controlNodesActive = true;
 
-      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
-      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
-      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
-      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
     }
 
-    if (properties.title !== undefined)        {this.title = properties.title;}
-    if (properties.width !== undefined)        {this.width = properties.width;}
-    if (properties.widthSelectionMultiplier !== undefined)
-                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
-    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
-    if (properties.value !== undefined)        {this.value = properties.value;}
-    if (properties.length !== undefined)       {this.length = properties.length;
-                                                this.customLength = true;}
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
 
-    // scale the arrow
-    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
-    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dash) {
-      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
-      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
-      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
-    }
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+    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._handleOnRelease = this._releaseControlNode;
 
-    if (properties.color !== undefined) {
-      if (util.isString(properties.color)) {
-        this.color.color = properties.color;
-        this.color.highlight = properties.color;
-      }
-      else {
-        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
-        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
-        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
-      }
-    }
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-    // A node is connected when it has a from and to node.
-    this.connect();
 
-    this.widthFixed = this.widthFixed || (properties.width !== undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
 
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
 
-    // set draw method based on style
-    switch (this.style) {
-      case 'line':          this.draw = this._drawLine; break;
-      case 'arrow':         this.draw = this._drawArrow; break;
-      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
-      case 'dash-line':     this.draw = this._drawDashLine; break;
-      default:              this.draw = this._drawLine; break;
-    }
-  };
 
   /**
-   * Connect an edge to its nodes
+   * 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
    */
-  Edge.prototype.connect = function () {
-    this.disconnect();
-
-    this.from = this.network.nodes[this.fromId] || null;
-    this.to = this.network.nodes[this.toId] || null;
-    this.connected = (this.from && this.to);
-
-    if (this.connected) {
-      this.from.attachEdge(this);
-      this.to.attachEdge(this);
-    }
-    else {
-      if (this.from) {
-        this.from.detachEdge(this);
-      }
-      if (this.to) {
-        this.to.detachEdge(this);
-      }
+  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();
   };
 
   /**
-   * Disconnect an edge from its nodes
+   * 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
    */
-  Edge.prototype.disconnect = function () {
-    if (this.from) {
-      this.from.detachEdge(this);
-      this.from = null;
-    }
-    if (this.to) {
-      this.to.detachEdge(this);
-      this.to = null;
+  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();
+  };
 
-    this.connected = false;
+  exports._releaseControlNode = function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode != null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
+      }
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
+      }
+    }
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
+    }
+    this.freezeSimulation = false;
+    this._redraw();
   };
 
   /**
-   * get the title of this edge.
-   * @return {string} title    The title of the edge, or undefined when no title
-   *                           has been set.
+   * 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
    */
-  Edge.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
-  };
+  exports._handleConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 0) {
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._selectObject(node,false);
+          // create a node the temporary line can look at
+          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetNode'].x = node.x;
+          this.sectors['support']['nodes']['targetNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
+          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
 
+          // create a temporary edge
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
+          this.edges['connectionEdge'].from = node;
+          this.edges['connectionEdge'].connected = true;
+          this.edges['connectionEdge'].smooth = true;
+          this.edges['connectionEdge'].selected = true;
+          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
+          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
 
-  /**
-   * Retrieve the value of the edge. Can be undefined
-   * @return {Number} value
-   */
-  Edge.prototype.getValue = function() {
-    return this.value;
-  };
+          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
+          this._handleOnDrag = function(event) {
+            var pointer = this._getPointer(event.gesture.center);
+            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
+            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
+            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+          };
 
-  /**
-   * Adjust the value range of the edge. The edge will adjust it's width
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
-   */
-  Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-      var scale = (this.widthMax - this.widthMin) / (max - min);
-      this.width = (this.value - min) * scale + this.widthMin;
+          this.moving = true;
+          this.start();
+        }
+      }
     }
   };
 
-  /**
-   * Redraw a edge
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
-  };
+  exports._finishConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 1) {
 
-  /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top
-   * @return {boolean}     True if location is located on the edge
-   */
-  Edge.prototype.isOverlappingWith = function(obj) {
-    if (this.connected) {
-      var distMax = 10;
-      var xFrom = this.from.x;
-      var yFrom = this.from.y;
-      var xTo = this.to.x;
-      var yTo = this.to.y;
-      var xObj = obj.left;
-      var yObj = obj.top;
+      // restore the drag function
+      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
+      delete this.cachedFunctions["_handleOnDrag"];
 
-      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+      // remember the edge id
+      var connectFromId = this.edges['connectionEdge'].fromId;
 
-      return (dist < distMax);
-    }
-    else {
-      return false
+      // remove the temporary nodes and edge
+      delete this.edges['connectionEdge'];
+      delete this.sectors['support']['nodes']['targetNode'];
+      delete this.sectors['support']['nodes']['targetViaNode'];
+
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._createEdge(connectFromId,node.id);
+          this._createManipulatorBar();
+        }
+      }
+      this._unselectAll();
     }
   };
 
-  Edge.prototype._getColor = function() {
-    var colorObj = this.color;
-    if (this.inheritColor == "to") {
-      colorObj = {
-        highlight: this.to.color.highlight.border,
-        hover: this.to.color.hover.border,
-        color: this.to.color.border
-      };
-    }
-    else if (this.inheritColor == "from" || this.inheritColor == true) {
-      colorObj = {
-        highlight: this.from.color.highlight.border,
-        hover: this.from.color.hover.border,
-        color: this.from.color.border
-      };
-    }
 
-    if (this.selected == true)   {return colorObj.highlight;}
-    else if (this.hover == true) {return colorObj.hover;}
-    else                         {return colorObj.color;}
-  }
+  /**
+   * 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 {
+          alert(this.constants.labels['addError']);
+          this._createManipulatorBar();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.nodesData.add(defaultData);
+        this._createManipulatorBar();
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
 
 
   /**
-   * Redraw a edge as a line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * connect two nodes with a new edge.
+   *
    * @private
    */
-  Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this._getColor();
-    ctx.lineWidth   = this._getLineWidth();
-
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
-
-      // draw label
-      var point;
-      if (this.label) {
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
+  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 {
-          point = this._pointOnLine(0.5);
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
         }
-        this._label(ctx, this.label, point.x, point.y);
       }
-    }
-    else {
-      var x, y;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
+      else {
+        this.edgesData.add(defaultData);
+        this.moving = true;
+        this.start();
       }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
+    }
+  };
+
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
       }
       else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
       }
-      this._circle(ctx, x, y, radius);
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      this._label(ctx, this.label, point.x, point.y);
     }
   };
 
   /**
-   * Get the line width of the edge. Depends on width and whether one of the
-   * connected nodes is selected.
-   * @return {Number} width
+   * 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
    */
-  Edge.prototype._getLineWidth = function() {
-    if (this.selected == true) {
-      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
-    }
-    else {
-      if (this.hover == true) {
-        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
+  exports._editNode = function() {
+    if (this.triggerFunctions.edit && this.editMode == true) {
+      var node = this._getSelectedNode();
+      var data = {id:node.id,
+        label: node.label,
+        group: node.group,
+        shape: node.shape,
+        color: {
+          background:node.color.background,
+          border:node.color.border,
+          highlight: {
+            background:node.color.highlight.background,
+            border:node.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 {
-        return this.width*this.networkScaleInv;
+        alert(this.constants.labels["editError"]);
       }
     }
+    else {
+      alert(this.constants.labels["editBoundError"]);
+    }
   };
 
-  Edge.prototype._getViaCoordinates = function () {
-    var xVia = null;
-    var yVia = null;
-    var factor = this.smoothCurves.roundness;
-    var type = this.smoothCurves.type;
-    if (factor == 0) {
-      return {x:null,y:null};
-    }
 
-    var dx = Math.abs(this.from.x - this.to.x);
-    var dy = Math.abs(this.from.y - this.to.y);
-    if (type == 'discrete' || type == 'diagonalCross') {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-        }
-        if (type == "discrete") {
-          xVia = dx < factor * dy ? this.from.x : xVia;
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
+
+
+  /**
+   * 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 if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
+          else {
+            alert(this.constants.labels["deleteError"])
           }
         }
-        if (type == "discrete") {
-          yVia = dy < factor * dx ? this.from.y : yVia;
+        else {
+          this.edgesData.remove(selectedEdges);
+          this.nodesData.remove(selectedNodes);
+          this._unselectAll();
+          this.moving = true;
+          this.start();
         }
       }
-    }
-    else if (type == "straightCross") {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        xVia = this.from.x;
-        yVia = this.to.y
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        xVia = this.to.x;
-        yVia = this.from.y;
+      else {
+        alert(this.constants.labels["deleteClusterError"]);
       }
     }
-    else if (type == 'horizontal') {
-      xVia = this.to.x;
-      yVia = this.from.y;
-    }
-    else if (type == 'vertical') {
-      xVia = this.from.x;
-      yVia = this.to.y;
+  };
+
+
+/***/ },
+/* 47 */
+/***/ function(module, exports, __webpack_require__) {
+
+  exports._cleanNavigation = function() {
+    // clean up previous navigation items
+    var wrapper = document.getElementById('network-navigation_wrapper');
+    if (wrapper != null) {
+      this.containerElement.removeChild(wrapper);
     }
-    else { // continuous
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(1)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(2)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x > xVia ? this.to.x :xVia;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(3)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(4, this.from.x, this.to.x)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x > xVia ? this.to.x : xVia;
-          }
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(5)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(6)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(7)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(8)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-        }
-      }
+    document.onmouseup = null;
+  };
+
+  /**
+   * 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();
+
+    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.navigationDivs['wrapper'].id = "network-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
+
+    for (var i = 0; i < navigationDivs.length; i++) {
+      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
+      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
     }
 
+    document.onmouseup = this._stopMovement.bind(this);
+  };
+
+  /**
+   * this stops all movement induced by the navigation buttons
+   *
+   * @private
+   */
+  exports._stopMovement = function() {
+    this._xStopMoving();
+    this._yStopMoving();
+    this._stopZoom();
+  };
 
-    return {x:xVia, y:yVia};
-  }
 
   /**
-   * Draw a line between two nodes
-   * @param {CanvasRenderingContext2D} ctx
+   * stops the actions performed by page up and down etc.
+   *
+   * @param event
    * @private
    */
-  Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    if (this.smoothCurves.enabled == true) {
-      if (this.smoothCurves.dynamic == false) {
-        var via = this._getViaCoordinates();
-        if (via.x == null) {
-          ctx.lineTo(this.to.x, this.to.y);
-          ctx.stroke();
-          return null;
-        }
-        else {
-  //        this.via.x = via.x;
-  //        this.via.y = via.y;
-          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
-          ctx.stroke();
-          return via;
-        }
-      }
-      else {
-        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
-        ctx.stroke();
-        return this.via;
+  exports._preventDefault = function(event) {
+    if (event !== undefined) {
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false;
       }
     }
-    else {
-      ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return null;
-    }
   };
 
+
   /**
-   * Draw a line from a node to itself, a circle
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
+   * 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
    */
-  Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
+  exports._moveUp = function(event) {
+    this.yIncrement = this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className += " active";
+    }
   };
 
+
   /**
-   * Draw label with white background and with the middle at (x, y)
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {Number} x
-   * @param {Number} y
+   * move the screen down
    * @private
    */
-  Edge.prototype._label = function (ctx, text, x, y) {
-    if (text) {
-      // TODO: cache the calculated size
-      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-          this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontFill;
-      var width = ctx.measureText(text).width;
-      var height = this.fontSize;
-      var left = x - width / 2;
-      var top = y - height / 2;
+  exports._moveDown = function(event) {
+    this.yIncrement = -this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['down'].className += " active";
+    }
+  };
 
-      ctx.fillRect(left, top, width, height);
 
-      // draw text
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = "left";
-      ctx.textBaseline = "top";
-      ctx.fillText(text, left, top);
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className += " active";
     }
   };
 
+
   /**
-   * Redraw a edge as a dashed line
-   * Draw this edge in the given canvas
-   * @author David Jordan
-   * @date 2012-08-08
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * move the screen right
    * @private
    */
-  Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;}
-
-    ctx.lineWidth = this._getLineWidth();
+  exports._moveRight = function(event) {
+    this.xIncrement = -this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['right'].className += " active";
+    }
+  };
 
-    var via = null;
-    // only firefox and chrome support this method, else we use the legacy one.
-    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
-      // configure the dash pattern
-      var pattern = [0];
-      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
-        pattern = [this.dash.length,this.dash.gap];
-      }
-      else {
-        pattern = [5,5];
-      }
 
-      // set dash settings for chrome or firefox
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash(pattern);
-        ctx.lineDashOffset = 0;
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className += " active";
+    }
+  };
 
-      } else { //Firefox
-        ctx.mozDash = pattern;
-        ctx.mozDashOffset = 0;
-      }
 
-      // draw the line
-      via = this._line(ctx);
+  /**
+   * Zoom out
+   * @private
+   */
+  exports._zoomOut = function() {
+    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomOut'].className += " active";
+    }
+  };
 
-      // restore the dash settings.
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash([0]);
-        ctx.lineDashOffset = 0;
 
-      } else { //Firefox
-        ctx.mozDash = [0];
-        ctx.mozDashOffset = 0;
-      }
-    }
-    else { // unsupporting smooth lines
-      // draw dashed line
-      ctx.beginPath();
-      ctx.lineCap = 'round';
-      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
-      }
-      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap]);
-      }
-      else //If all else fails draw a line
-      {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
-      }
-      ctx.stroke();
+  /**
+   * Stop zooming and unhighlight the zoom controls
+   * @private
+   */
+  exports._stopZoom = function() {
+    this.zoomIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
+      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
     }
+  };
 
-    // draw label
-    if (this.label) {
-      var point;
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
-      }
-      this._label(ctx, this.label, point.x, point.y);
+
+  /**
+   * Stop moving in the Y direction and unHighlight the up and down
+   * @private
+   */
+  exports._yStopMoving = function() {
+    this.yIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
+      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
     }
   };
 
+
   /**
-   * Get a point on a line
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
+   * Stop moving in the X direction and unHighlight left and right.
    * @private
    */
-  Edge.prototype._pointOnLine = function (percentage) {
-    return {
-      x: (1 - percentage) * this.from.x + percentage * this.to.x,
-      y: (1 - percentage) * this.from.y + percentage * this.to.y
+  exports._xStopMoving = function() {
+    this.xIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
+      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
     }
   };
 
-  /**
-   * Get a point on a circle
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-      x: x + radius * Math.cos(angle),
-      y: y - radius * Math.sin(angle)
+
+/***/ },
+/* 48 */
+/***/ 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;
+        }
+      }
     }
   };
 
   /**
-   * Redraw a edge as a line with an arrow halfway the line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * This is the main function to layout the nodes in a hierarchical way.
+   * It checks if the node details are supplied correctly
+   *
    * @private
    */
-  Edge.prototype._drawArrowCenter = function(ctx) {
-    var point;
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-    ctx.lineWidth = this._getLineWidth();
-
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
-
-      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      // draw an arrow halfway the line
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
+  exports._setupHierarchicalLayout = function() {
+    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
+        this.constants.hierarchicalLayout.levelSeparation *= -1;
       }
       else {
-        point = this._pointOnLine(0.5);
+        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
       }
 
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
-
-      // draw label
-      if (this.label) {
-        this._label(ctx, this.label, point.x, point.y);
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "LR") {
+        if (this.constants.smoothCurves.enabled == true) {
+          this.constants.smoothCurves.type = "vertical";
+        }
       }
-    }
-    else {
-      // draw circle
-      var x, y;
-      var radius = 0.25 * Math.max(100,this.length);
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
+      else {
+        if (this.constants.smoothCurves.enabled == true) {
+          this.constants.smoothCurves.type = "horizontal";
+        }
       }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
+      // 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;
+          }
+        }
       }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
+
+      // if the user defined some levels but not all, alert and run without hierarchical layout
+      if (undefinedLevel == true && definedLevel == true) {
+        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
+        this.zoomExtent(true,this.constants.clustering.enabled);
+        if (!this.constants.clustering.enabled) {
+          this.start();
+        }
       }
-      this._circle(ctx, x, y, radius);
+      else {
+        // setup the system to use hierarchical method.
+        this._changeConstants();
 
-      // draw all arrows
-      var angle = 0.2 * Math.PI;
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+        // define levels if undefined by the users. Based on hubsize
+        if (undefinedLevel == true) {
+          this._determineLevels(hubsize);
+        }
+        // check the distribution of the nodes per level.
+        var distribution = this._getDistribution();
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
+        // place the nodes on the canvas. This also stablilizes the system.
+        this._placeNodesByHierarchy(distribution);
+
+        // start the simulation.
+        this.start();
       }
     }
   };
 
 
-
   /**
-   * Redraw a edge as a line with an arrow
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * This function places the nodes on the canvas based on the hierarchial distribution.
+   *
+   * @param {Object} distribution | obtained by the function this._getDistribution()
    * @private
    */
-  Edge.prototype._drawArrow = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-
-    ctx.lineWidth = this._getLineWidth();
-
-    var angle, length;
-    //draw a line
-    if (this.from != this.to) {
-      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var dx = (this.to.x - this.from.x);
-      var dy = (this.to.y - this.from.y);
-      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-
-      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
-      var via;
-      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
-        via = this.via;
-      }
-      else if (this.smoothCurves.enabled == true) {
-        via = this._getViaCoordinates();
-      }
-
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-        dx = (this.to.x - via.x);
-        dy = (this.to.y - via.y);
-        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-      }
-      var toBorderDist = this.to.distanceToBorder(ctx, angle);
-      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
-
-      var xTo,yTo;
-      if (this.smoothCurves.enabled == true && via.x != null) {
-       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-      }
-      else {
-        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-      }
-
-      ctx.beginPath();
-      ctx.moveTo(xFrom,yFrom);
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
-      }
-      else {
-        ctx.lineTo(xTo, yTo);
-      }
-      ctx.stroke();
+  exports._placeNodesByHierarchy = function(distribution) {
+    var nodeId, node;
 
-      // draw arrow at the end of the line
-      length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(xTo, yTo, angle, length);
-      ctx.fill();
-      ctx.stroke();
+    // start placing all the level 0 nodes first. Then recursively position their branches.
+    for (nodeId in distribution[0].nodes) {
+      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
+        node = distribution[0].nodes[nodeId];
+        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+          if (node.xFixed) {
+            node.x = distribution[0].minPos;
+            node.xFixed = false;
 
-      // draw label
-      if (this.label) {
-        var point;
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
         }
         else {
-          point = this._pointOnLine(0.5);
+          if (node.yFixed) {
+            node.y = distribution[0].minPos;
+            node.yFixed = false;
+
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
         }
-        this._label(ctx, this.label, point.x, point.y);
+        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
       }
     }
-    else {
-      // draw circle
-      var node = this.from;
-      var x, y, arrow;
-      var radius = 0.25 * Math.max(100,this.length);
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-        arrow = {
-          x: x,
-          y: node.y,
-          angle: 0.9 * Math.PI
-        };
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-        arrow = {
-          x: node.x,
-          y: y,
-          angle: 0.6 * Math.PI
-        };
-      }
-      ctx.beginPath();
-      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-      ctx.stroke();
-
-      // draw all arrows
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-      ctx.fill();
-      ctx.stroke();
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
+    // stabilize the system after positioning. This function calls zoomExtent.
+    this._stabilize();
   };
 
 
-
   /**
-   * Calculate the distance between a point (x3,y3) and a line segment from
-   * (x1,y1) to (x2,y2).
-   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
-   * @param {number} x1
-   * @param {number} y1
-   * @param {number} x2
-   * @param {number} y2
-   * @param {number} x3
-   * @param {number} y3
+   * This function get the distribution of levels based on hubsize
+   *
+   * @returns {Object}
    * @private
    */
-  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    if (this.from != this.to) {
-      if (this.smoothCurves.enabled == true) {
-        var xVia, yVia;
-        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
-          xVia = this.via.x;
-          yVia = this.via.y;
+  exports._getDistribution = function() {
+    var distribution = {};
+    var nodeId, node, level;
+
+    // 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 {
-          var via = this._getViaCoordinates();
-          xVia = via.x;
-          yVia = via.y;
+          node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
         }
-        var minDistance = 1e9;
-        var i,t,x,y,dx,dy;
-        for (i = 0; i < 10; i++) {
-          t = 0.1*i;
-          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
-          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
-          dx = Math.abs(x3-x);
-          dy = Math.abs(y3-y);
-          minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
+        if (!distribution.hasOwnProperty(node.level)) {
+          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
         }
-        return minDistance
+        distribution[node.level].amount += 1;
+        distribution[node.level].nodes[node.id] = node;
       }
-      else {
-        var px = x2-x1,
-            py = y2-y1,
-            something = px*px + py*py,
-            u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+    }
 
-        if (u > 1) {
-          u = 1;
-        }
-        else if (u < 0) {
-          u = 0;
+    // 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;
         }
-
-        var x = x1 + u * px,
-            y = y1 + u * py,
-            dx = x - x3,
-            dy = y - y3;
-
-        //# Note: If the actual distance does not matter,
-        //# if you only want to compare what this function
-        //# returns to other results of this function, you
-        //# can just return the squared distance instead
-        //# (i.e. remove the sqrt) to gain a little performance
-
-        return Math.sqrt(dx*dx + dy*dy);
       }
     }
-    else {
-      var x, y, dx, dy;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
+
+    // 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);
       }
-      dx = x - x3;
-      dy = y - y3;
-      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
     }
-  };
 
+    return distribution;
+  };
 
 
   /**
-   * This allows the zoom level of the network to influence the rendering
+   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
    *
-   * @param scale
+   * @param hubsize
+   * @private
    */
-  Edge.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-  };
+  exports._determineLevels = function(hubsize) {
+    var nodeId, node;
 
+    // determine hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.edges.length == hubsize) {
+          node.level = 0;
+        }
+      }
+    }
 
-  Edge.prototype.select = function() {
-    this.selected = true;
+    // 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);
+        }
+      }
+    }
   };
 
-  Edge.prototype.unselect = function() {
-    this.selected = false;
-  };
 
-  Edge.prototype.positionBezierNode = function() {
-    if (this.via !== null) {
-      this.via.x = 0.5 * (this.from.x + this.to.x);
-      this.via.y = 0.5 * (this.from.y + this.to.y);
+  /**
+   * 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();
   };
 
+
   /**
-   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
-   * @param ctx
+   * 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
    */
-  Edge.prototype._drawControlNodes = function(ctx) {
-    if (this.controlNodesEnabled == true) {
-      if (this.controlNodes.from === null && this.controlNodes.to === null) {
-        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
-        var nodeIdTo = "edgeIdTo:".concat(this.id);
-        var constants = {
-                        nodes:{group:'', radius:8},
-                        physics:{damping:0},
-                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
-                        };
-        this.controlNodes.from = new Node(
-          {id:nodeIdFrom,
-            shape:'dot',
-              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-        this.controlNodes.to = new Node(
-          {id:nodeIdTo,
-            shape:'dot',
-            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
+  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 (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
-        this.controlNodes.positions = this.getControlNodePositions(ctx);
-        this.controlNodes.from.x = this.controlNodes.positions.from.x;
-        this.controlNodes.from.y = this.controlNodes.positions.from.y;
-        this.controlNodes.to.x = this.controlNodes.positions.to.x;
-        this.controlNodes.to.y = this.controlNodes.positions.to.y;
+      // 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.controlNodes.from.draw(ctx);
-      this.controlNodes.to.draw(ctx);
-    }
-    else {
-      this.controlNodes = {from:null, to:null, positions:{}};
+      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);
+        }
+      }
     }
   };
 
-  /**
-   * Enable control nodes.
-   * @private
-   */
-  Edge.prototype._enableControlNodes = function() {
-    this.controlNodesEnabled = true;
-  };
 
   /**
-   * disable control nodes
+   * 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
    */
-  Edge.prototype._disableControlNodes = function() {
-    this.controlNodesEnabled = false;
+  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 (edges.length > 1) {
+          this._setLevel(level+1, childNode.edges, childNode.id);
+        }
+      }
+    }
   };
 
+
   /**
-   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
-   * @param x
-   * @param y
-   * @returns {null}
+   * Unfix nodes
+   *
    * @private
    */
-  Edge.prototype._getSelectedControlNode = function(x,y) {
-    var positions = this.controlNodes.positions;
-    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
-    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
-
-    if (fromDistance < 15) {
-      this.connectedNode = this.from;
-      this.from = this.controlNodes.from;
-      return this.controlNodes.from;
-    }
-    else if (toDistance < 15) {
-      this.connectedNode = this.to;
-      this.to = this.controlNodes.to;
-      return this.controlNodes.to;
-    }
-    else {
-      return null;
+  exports._restoreNodes = function() {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        this.nodes[nodeId].xFixed = false;
+        this.nodes[nodeId].yFixed = false;
+      }
     }
   };
 
 
+/***/ },
+/* 49 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /*! Hammer.JS - v1.0.5 - 2013-04-07
+   * http://eightmedia.github.com/hammer.js
+   *
+   * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
+   * Licensed under the MIT license */
+
+  (function(window, undefined) {
+      'use strict';
+
   /**
-   * this resets the control nodes to their original position.
-   * @private
+   * Hammer
+   * use this to create instances
+   * @param   {HTMLElement}   element
+   * @param   {Object}        options
+   * @returns {Hammer.Instance}
+   * @constructor
    */
-  Edge.prototype._restoreControlNodes = function() {
-    if (this.controlNodes.from.selected == true) {
-      this.from = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.from.unselect();
-    }
-    if (this.controlNodes.to.selected == true) {
-      this.to = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.to.unselect();
-    }
+  var Hammer = function(element, options) {
+      return new Hammer.Instance(element, options || {});
   };
 
-  /**
-   * this calculates the position of the control nodes on the edges of the parent nodes.
-   *
-   * @param ctx
-   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
-   */
-  Edge.prototype.getControlNodePositions = function(ctx) {
-    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-    var dx = (this.to.x - this.from.x);
-    var dy = (this.to.y - this.from.y);
-    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+  // default settings
+  Hammer.defaults = {
+      // add styles and attributes to the element to prevent the browser from doing
+      // its native behavior. this doesnt prevent the scrolling, but cancels
+      // the contextmenu, tap highlighting etc
+      // set to false to disable this
+      stop_browser_behavior: {
+  		// this also triggers onselectstart=false for IE
+          userSelect: 'none',
+  		// this makes the element blocking in IE10 >, you could experiment with the value
+  		// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
+          touchAction: 'none',
+  		touchCallout: 'none',
+          contentZooming: 'none',
+          userDrag: 'none',
+          tapHighlightColor: 'rgba(0,0,0,0)'
+      }
 
-    var via;
-    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
-      via = this.via;
-    }
-    else if (this.smoothCurves.enabled == true) {
-      via = this._getViaCoordinates();
-    }
+      // more settings are defined per gesture at gestures.js
+  };
 
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-      dx = (this.to.x - via.x);
-      dy = (this.to.y - via.y);
-      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    }
-    var toBorderDist = this.to.distanceToBorder(ctx, angle);
-    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+  // detect touchevents
+  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
+  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
 
-    var xTo,yTo;
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-    }
-    else {
-      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-    }
+  // dont use mouseevents on mobile devices
+  Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+  Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
 
-    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
-  };
+  // eventtypes per touchevent (start, move, end)
+  // are filled by Hammer.event.determineEventTypes on setup
+  Hammer.EVENT_TYPES = {};
 
-  module.exports = Edge;
+  // direction defines
+  Hammer.DIRECTION_DOWN = 'down';
+  Hammer.DIRECTION_LEFT = 'left';
+  Hammer.DIRECTION_UP = 'up';
+  Hammer.DIRECTION_RIGHT = 'right';
 
-/***/ },
-/* 44 */
-/***/ function(module, exports, __webpack_require__) {
+  // pointer type
+  Hammer.POINTER_MOUSE = 'mouse';
+  Hammer.POINTER_TOUCH = 'touch';
+  Hammer.POINTER_PEN = 'pen';
+
+  // touch event defines
+  Hammer.EVENT_START = 'start';
+  Hammer.EVENT_MOVE = 'move';
+  Hammer.EVENT_END = 'end';
+
+  // hammer document where the base events are added at
+  Hammer.DOCUMENT = document;
+
+  // plugins namespace
+  Hammer.plugins = {};
+
+  // if the window events are set...
+  Hammer.READY = false;
 
   /**
-   * Popup is a class to create a popup window with some text
-   * @param {Element}  container     The container object.
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {String} [text]
-   * @param {Object} [style]     An object containing borderColor,
-   *                             backgroundColor, etc.
+   * setup events to detect gestures on the document
    */
-  function Popup(container, x, y, text, style) {
-    if (container) {
-      this.container = container;
-    }
-    else {
-      this.container = document.body;
-    }
+  function setup() {
+      if(Hammer.READY) {
+          return;
+      }
 
-    // x, y and text are optional, see if a style object was passed in their place
-    if (style === undefined) {
-      if (typeof x === "object") {
-        style = x;
-        x = undefined;
-      } else if (typeof text === "object") {
-        style = text;
-        text = undefined;
-      } else {
-        // for backwards compatibility, in case clients other than Network are creating Popup directly
-        style = {
-          fontColor: 'black',
-          fontSize: 14, // px
-          fontFace: 'verdana',
-          color: {
-            border: '#666',
-            background: '#FFFFC6'
+      // find what eventtypes we add listeners to
+      Hammer.event.determineEventTypes();
+
+      // Register all gestures inside Hammer.gestures
+      for(var name in Hammer.gestures) {
+          if(Hammer.gestures.hasOwnProperty(name)) {
+              Hammer.detection.register(Hammer.gestures[name]);
           }
-        }
       }
-    }
-
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
 
-    if (x !== undefined && y !== undefined ) {
-      this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-      this.setText(text);
-    }
+      // Add touch events on the document
+      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
+      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
 
-    // create the frame
-    this.frame = document.createElement("div");
-    var styleAttr = this.frame.style;
-    styleAttr.position = "absolute";
-    styleAttr.visibility = "hidden";
-    styleAttr.border = "1px solid " + style.color.border;
-    styleAttr.color = style.fontColor;
-    styleAttr.fontSize = style.fontSize + "px";
-    styleAttr.fontFamily = style.fontFace;
-    styleAttr.padding = this.padding + "px";
-    styleAttr.backgroundColor = style.color.background;
-    styleAttr.borderRadius = "3px";
-    styleAttr.MozBorderRadius = "3px";
-    styleAttr.WebkitBorderRadius = "3px";
-    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    styleAttr.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
+      // Hammer is ready...!
+      Hammer.READY = true;
   }
 
   /**
-   * @param {number} x   Horizontal position of the popup window
-   * @param {number} y   Vertical position of the popup window
+   * create new hammer instance
+   * all methods should return the instance itself, so it is chainable.
+   * @param   {HTMLElement}       element
+   * @param   {Object}            [options={}]
+   * @returns {Hammer.Instance}
+   * @constructor
    */
-  Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
-  };
+  Hammer.Instance = function(element, options) {
+      var self = this;
 
-  /**
-   * Set the text for the popup window. This can be HTML code
-   * @param {string} text
-   */
-  Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
-  };
+      // setup HammerJS window events and register all gestures
+      // this also sets up the default options
+      setup();
 
-  /**
-   * Show the popup window
-   * @param {boolean} show    Optional. Show or hide the window
-   */
-  Popup.prototype.show = function (show) {
-    if (show === undefined) {
-      show = true;
-    }
+      this.element = element;
 
-    if (show) {
-      var height = this.frame.clientHeight;
-      var width =  this.frame.clientWidth;
-      var maxHeight = this.frame.parentNode.clientHeight;
-      var maxWidth = this.frame.parentNode.clientWidth;
+      // start/stop detection option
+      this.enabled = true;
 
-      var top = (this.y - height);
-      if (top + height + this.padding > maxHeight) {
-        top = maxHeight - height - this.padding;
-      }
-      if (top < this.padding) {
-        top = this.padding;
-      }
+      // merge options
+      this.options = Hammer.utils.extend(
+          Hammer.utils.extend({}, Hammer.defaults),
+          options || {});
 
-      var left = this.x;
-      if (left + width + this.padding > maxWidth) {
-        left = maxWidth - width - this.padding;
-      }
-      if (left < this.padding) {
-        left = this.padding;
+      // add some css to the element to prevent the browser from doing its native behavoir
+      if(this.options.stop_browser_behavior) {
+          Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
       }
 
-      this.frame.style.left = left + "px";
-      this.frame.style.top = top + "px";
-      this.frame.style.visibility = "visible";
-    }
-    else {
-      this.hide();
-    }
-  };
+      // start detection on touchstart
+      Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
+          if(self.enabled) {
+              Hammer.detection.startDetect(self, ev);
+          }
+      });
 
-  /**
-   * Hide the popup window
-   */
-  Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
+      // return instance
+      return this;
   };
 
-  module.exports = Popup;
 
+  Hammer.Instance.prototype = {
+      /**
+       * bind events to the instance
+       * @param   {String}      gesture
+       * @param   {Function}    handler
+       * @returns {Hammer.Instance}
+       */
+      on: function onEvent(gesture, handler){
+          var gestures = gesture.split(' ');
+          for(var t=0; t<gestures.length; t++) {
+              this.element.addEventListener(gestures[t], handler, false);
+          }
+          return this;
+      },
 
-/***/ },
-/* 45 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var PhysicsMixin = __webpack_require__(46);
-  var ClusterMixin = __webpack_require__(50);
-  var SectorsMixin = __webpack_require__(51);
-  var SelectionMixin = __webpack_require__(52);
-  var ManipulationMixin = __webpack_require__(53);
-  var NavigationMixin = __webpack_require__(54);
-  var HierarchicalLayoutMixin = __webpack_require__(55);
+      /**
+       * unbind events to the instance
+       * @param   {String}      gesture
+       * @param   {Function}    handler
+       * @returns {Hammer.Instance}
+       */
+      off: function offEvent(gesture, handler){
+          var gestures = gesture.split(' ');
+          for(var t=0; t<gestures.length; t++) {
+              this.element.removeEventListener(gestures[t], handler, false);
+          }
+          return this;
+      },
 
-  /**
-   * Load a mixin into the network object
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
-   * @private
-   */
-  exports._loadMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = sourceVariable[mixinFunction];
+
+      /**
+       * trigger gesture event
+       * @param   {String}      gesture
+       * @param   {Object}      eventData
+       * @returns {Hammer.Instance}
+       */
+      trigger: function triggerEvent(gesture, 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(Hammer.utils.hasParent(eventData.target, element)) {
+              element = eventData.target;
+          }
+
+          element.dispatchEvent(event);
+          return this;
+      },
+
+
+      /**
+       * enable of disable hammer.js detection
+       * @param   {Boolean}   state
+       * @returns {Hammer.Instance}
+       */
+      enable: function enable(state) {
+          this.enabled = state;
+          return this;
       }
-    }
   };
 
+  /**
+   * this holds the last move event,
+   * used to fix empty touchend issue
+   * see the onTouch event for an explanation
+   * @type {Object}
+   */
+  var last_move_event = null;
+
 
   /**
-   * removes a mixin from the network object.
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
-   * @private
+   * when the mouse is hold down, this is true
+   * @type {Boolean}
    */
-  exports._clearMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = undefined;
-      }
-    }
-  };
+  var enable_detect = false;
+
+
+  /**
+   * when touch events have been fired, this is true
+   * @type {Boolean}
+   */
+  var touch_triggered = false;
+
+
+  Hammer.event = {
+      /**
+       * simple addEventListener
+       * @param   {HTMLElement}   element
+       * @param   {String}        type
+       * @param   {Function}      handler
+       */
+      bindDom: function(element, type, handler) {
+          var types = type.split(' ');
+          for(var t=0; t<types.length; t++) {
+              element.addEventListener(types[t], handler, false);
+          }
+      },
+
+
+      /**
+       * touch events with mouse fallback
+       * @param   {HTMLElement}   element
+       * @param   {String}        eventType        like Hammer.EVENT_MOVE
+       * @param   {Function}      handler
+       */
+      onTouch: function onTouch(element, eventType, handler) {
+  		var self = this;
+
+          this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
+              var sourceEventType = ev.type.toLowerCase();
+
+              // onmouseup, but when touchend has been fired we do nothing.
+              // this is for touchdevices which also fire a mouseup on touchend
+              if(sourceEventType.match(/mouse/) && touch_triggered) {
+                  return;
+              }
+
+              // mousebutton must be down or a touch event
+              else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
+                  sourceEventType.match(/pointerdown/) || // pointerevents touch
+                  (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
+              ){
+                  enable_detect = true;
+              }
+
+              // we are in a touch event, set the touch triggered bool to true,
+              // this for the conflicts that may occur on ios and android
+              if(sourceEventType.match(/touch|pointer/)) {
+                  touch_triggered = true;
+              }
+
+              // count the total touches on the screen
+              var count_touches = 0;
+
+              // when touch has been triggered in this detection session
+              // and we are now handling a mouse event, we stop that to prevent conflicts
+              if(enable_detect) {
+                  // update pointerevent
+                  if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
+                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+                  }
+                  // touch
+                  else if(sourceEventType.match(/touch/)) {
+                      count_touches = ev.touches.length;
+                  }
+                  // mouse
+                  else if(!touch_triggered) {
+                      count_touches = sourceEventType.match(/up/) ? 0 : 1;
+                  }
 
+                  // if we are in a end event, but when we remove one touch and
+                  // we still have enough, set eventType to move
+                  if(count_touches > 0 && eventType == Hammer.EVENT_END) {
+                      eventType = Hammer.EVENT_MOVE;
+                  }
+                  // no touches, force the end event
+                  else if(!count_touches) {
+                      eventType = Hammer.EVENT_END;
+                  }
 
-  /**
-   * Mixin the physics system and initialize the parameters required.
-   *
-   * @private
-   */
-  exports._loadPhysicsSystem = function () {
-    this._loadMixin(PhysicsMixin);
-    this._loadSelectedForceSolver();
-    if (this.constants.configurePhysics == true) {
-      this._loadPhysicsConfiguration();
-    }
-  };
+                  // because touchend has no touches, and we often want to use these in our gestures,
+                  // we send the last move event as our eventData in touchend
+                  if(!count_touches && last_move_event !== null) {
+                      ev = last_move_event;
+                  }
+                  // store the last move event
+                  else {
+                      last_move_event = ev;
+                  }
 
+                  // trigger the handler
+                  handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
 
-  /**
-   * Mixin the cluster system and initialize the parameters required.
-   *
-   * @private
-   */
-  exports._loadClusterSystem = function () {
-    this.clusterSession = 0;
-    this.hubThreshold = 5;
-    this._loadMixin(ClusterMixin);
-  };
+                  // remove pointerevent from list
+                  if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
+                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+                  }
+              }
 
+              //debug(sourceEventType +" "+ eventType);
 
-  /**
-   * Mixin the sector system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadSectorSystem = function () {
-    this.sectors = {};
-    this.activeSector = ["default"];
-    this.sectors["active"] = {};
-    this.sectors["active"]["default"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
-    this.sectors["frozen"] = {};
-    this.sectors["support"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
+              // on the end we reset everything
+              if(!count_touches) {
+                  last_move_event = null;
+                  enable_detect = false;
+                  touch_triggered = false;
+                  Hammer.PointerEvent.reset();
+              }
+          });
+      },
 
-    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
 
-    this._loadMixin(SectorsMixin);
-  };
+      /**
+       * we have different events for each device/browser
+       * determine what we need and set them in the Hammer.EVENT_TYPES constant
+       */
+      determineEventTypes: function determineEventTypes() {
+          // determine the eventtype we want to set
+          var types;
+
+          // pointerEvents magic
+          if(Hammer.HAS_POINTEREVENTS) {
+              types = Hammer.PointerEvent.getEvents();
+          }
+          // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
+          else if(Hammer.NO_MOUSEEVENTS) {
+              types = [
+                  'touchstart',
+                  'touchmove',
+                  'touchend touchcancel'];
+          }
+          // for non pointer events browsers and mixed browsers,
+          // like chrome on windows8 touch laptop
+          else {
+              types = [
+                  'touchstart mousedown',
+                  'touchmove mousemove',
+                  'touchend touchcancel mouseup'];
+          }
 
+          Hammer.EVENT_TYPES[Hammer.EVENT_START]  = types[0];
+          Hammer.EVENT_TYPES[Hammer.EVENT_MOVE]   = types[1];
+          Hammer.EVENT_TYPES[Hammer.EVENT_END]    = types[2];
+      },
 
-  /**
-   * Mixin the selection system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadSelectionSystem = function () {
-    this.selectionObj = {nodes: {}, edges: {}};
 
-    this._loadMixin(SelectionMixin);
-  };
+      /**
+       * create touchlist depending on the event
+       * @param   {Object}    ev
+       * @param   {String}    eventType   used by the fakemultitouch plugin
+       */
+      getTouchList: function getTouchList(ev/*, eventType*/) {
+          // get the fake pointerEvent touchlist
+          if(Hammer.HAS_POINTEREVENTS) {
+              return Hammer.PointerEvent.getTouchList();
+          }
+          // get the touchlist
+          else if(ev.touches) {
+              return ev.touches;
+          }
+          // make fake touchlist from mouse position
+          else {
+              return [{
+                  identifier: 1,
+                  pageX: ev.pageX,
+                  pageY: ev.pageY,
+                  target: ev.target
+              }];
+          }
+      },
 
 
-  /**
-   * Mixin the navigationUI (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadManipulationSystem = function () {
-    // reset global variables -- these are used by the selection of nodes and edges.
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+      /**
+       * collect event data for Hammer js
+       * @param   {HTMLElement}   element
+       * @param   {String}        eventType        like Hammer.EVENT_MOVE
+       * @param   {Object}        eventData
+       */
+      collectEventData: function collectEventData(element, eventType, ev) {
+          var touches = this.getTouchList(ev, eventType);
 
-    if (this.constants.dataManipulation.enabled == true) {
-      // load the manipulator HTML elements. All styling done in css.
-      if (this.manipulationDiv === undefined) {
-        this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'network-manipulationDiv';
-        this.manipulationDiv.id = 'network-manipulationDiv';
-        if (this.editMode == true) {
-          this.manipulationDiv.style.display = "block";
-        }
-        else {
-          this.manipulationDiv.style.display = "none";
-        }
-        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
-      }
+          // find out pointerType
+          var pointerType = Hammer.POINTER_TOUCH;
+          if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
+              pointerType = Hammer.POINTER_MOUSE;
+          }
 
-      if (this.editModeDiv === undefined) {
-        this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'network-manipulation-editMode';
-        this.editModeDiv.id = 'network-manipulation-editMode';
-        if (this.editMode == true) {
-          this.editModeDiv.style.display = "none";
-        }
-        else {
-          this.editModeDiv.style.display = "block";
-        }
-        this.containerElement.insertBefore(this.editModeDiv, this.frame);
-      }
+          return {
+              center      : Hammer.utils.getCenter(touches),
+              timeStamp   : new Date().getTime(),
+              target      : ev.target,
+              touches     : touches,
+              eventType   : eventType,
+              pointerType : pointerType,
+              srcEvent    : ev,
 
-      if (this.closeDiv === undefined) {
-        this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'network-manipulation-closeDiv';
-        this.closeDiv.id = 'network-manipulation-closeDiv';
-        this.closeDiv.style.display = this.manipulationDiv.style.display;
-        this.containerElement.insertBefore(this.closeDiv, this.frame);
-      }
+              /**
+               * prevent the browser default actions
+               * mostly used to disable scrolling of the browser
+               */
+              preventDefault: function() {
+                  if(this.srcEvent.preventManipulation) {
+                      this.srcEvent.preventManipulation();
+                  }
 
-      // load the manipulation functions
-      this._loadMixin(ManipulationMixin);
+                  if(this.srcEvent.preventDefault) {
+                      this.srcEvent.preventDefault();
+                  }
+              },
 
-      // create the manipulator toolbar
-      this._createManipulatorBar();
-    }
-    else {
-      if (this.manipulationDiv !== undefined) {
-        // removes all the bindings and overloads
-        this._createManipulatorBar();
-        // remove the manipulation divs
-        this.containerElement.removeChild(this.manipulationDiv);
-        this.containerElement.removeChild(this.editModeDiv);
-        this.containerElement.removeChild(this.closeDiv);
+              /**
+               * stop bubbling the event up to its parents
+               */
+              stopPropagation: function() {
+                  this.srcEvent.stopPropagation();
+              },
 
-        this.manipulationDiv = undefined;
-        this.editModeDiv = undefined;
-        this.closeDiv = undefined;
-        // remove the mixin functions
-        this._clearMixin(ManipulationMixin);
+              /**
+               * immediately stop gesture detection
+               * might be useful after a swipe was detected
+               * @return {*}
+               */
+              stopDetect: function() {
+                  return Hammer.detection.stopDetect();
+              }
+          };
       }
-    }
   };
 
+  Hammer.PointerEvent = {
+      /**
+       * holds all pointers
+       * @type {Object}
+       */
+      pointers: {},
 
-  /**
-   * Mixin the navigation (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadNavigationControls = function () {
-    this._loadMixin(NavigationMixin);
-
-    // the clean function removes the button divs, this is done to remove the bindings.
-    this._cleanNavigation();
-    if (this.constants.navigation.enabled == true) {
-      this._loadNavigationElements();
-    }
-  };
+      /**
+       * get a list of pointers
+       * @returns {Array}     touchlist
+       */
+      getTouchList: function() {
+          var self = this;
+          var touchlist = [];
 
+          // we can use forEach since pointerEvents only is in IE10
+          Object.keys(self.pointers).sort().forEach(function(id) {
+              touchlist.push(self.pointers[id]);
+          });
+          return touchlist;
+      },
 
-  /**
-   * Mixin the hierarchical layout system.
-   *
-   * @private
-   */
-  exports._loadHierarchySystem = function () {
-    this._loadMixin(HierarchicalLayoutMixin);
-  };
+      /**
+       * update the position of a pointer
+       * @param   {String}   type             Hammer.EVENT_END
+       * @param   {Object}   pointerEvent
+       */
+      updatePointer: function(type, pointerEvent) {
+          if(type == Hammer.EVENT_END) {
+              this.pointers = {};
+          }
+          else {
+              pointerEvent.identifier = pointerEvent.pointerId;
+              this.pointers[pointerEvent.pointerId] = pointerEvent;
+          }
 
+          return Object.keys(this.pointers).length;
+      },
 
-/***/ },
-/* 46 */
-/***/ function(module, exports, __webpack_require__) {
+      /**
+       * check if ev matches pointertype
+       * @param   {String}        pointerType     Hammer.POINTER_MOUSE
+       * @param   {PointerEvent}  ev
+       */
+      matchType: function(pointerType, ev) {
+          if(!ev.pointerType) {
+              return false;
+          }
 
-  var util = __webpack_require__(1);
-  var RepulsionMixin = __webpack_require__(47);
-  var HierarchialRepulsionMixin = __webpack_require__(48);
-  var BarnesHutMixin = __webpack_require__(49);
+          var types = {};
+          types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
+          types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
+          types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
+          return types[pointerType];
+      },
 
-  /**
-   * 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();
-  };
 
+      /**
+       * get events
+       */
+      getEvents: function() {
+          return [
+              'pointerdown MSPointerDown',
+              'pointermove MSPointerMove',
+              'pointerup pointercancel MSPointerUp MSPointerCancel'
+          ];
+      },
 
-  /**
-   * 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);
+      /**
+       * reset the list
+       */
+      reset: function() {
+          this.pointers = {};
+      }
+  };
 
-      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;
 
-      this._loadMixin(BarnesHutMixin);
-    }
-    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(RepulsionMixin);
+  Hammer.utils = {
+      /**
+       * extend method,
+       * also used for cloning when dest is an empty object
+       * @param   {Object}    dest
+       * @param   {Object}    src
+  	 * @parm	{Boolean}	merge		do a merge
+       * @returns {Object}    dest
+       */
+      extend: function extend(dest, src, merge) {
+          for (var key in src) {
+  			if(dest[key] !== undefined && merge) {
+  				continue;
+  			}
+              dest[key] = src[key];
+          }
+          return dest;
+      },
 
-      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;
 
-      this._loadMixin(HierarchialRepulsionMixin);
-    }
-    else {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
-      this.barnesHutTree = undefined;
+      /**
+       * find if a node is in the given parent
+       * used for event delegation tricks
+       * @param   {HTMLElement}   node
+       * @param   {HTMLElement}   parent
+       * @returns {boolean}       has_parent
+       */
+      hasParent: function(node, parent) {
+          while(node){
+              if(node == parent) {
+                  return true;
+              }
+              node = node.parentNode;
+          }
+          return false;
+      },
 
-      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;
 
-      this._loadMixin(RepulsionMixin);
-    }
-  };
+      /**
+       * get the center of all the touches
+       * @param   {Array}     touches
+       * @returns {Object}    center
+       */
+      getCenter: function getCenter(touches) {
+          var valuesX = [], valuesY = [];
 
-  /**
-   * 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);
-      }
+          for(var t= 0,len=touches.length; t<len; t++) {
+              valuesX.push(touches[t].pageX);
+              valuesY.push(touches[t].pageY);
+          }
 
-      // we now start the force calculation
-      this._calculateForces();
-    }
-  };
+          return {
+              pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
+              pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
+          };
+      },
 
 
-  /**
-   * 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
+      /**
+       * calculate the velocity between two points
+       * @param   {Number}    delta_time
+       * @param   {Number}    delta_x
+       * @param   {Number}    delta_y
+       * @returns {Object}    velocity
+       */
+      getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
+          return {
+              x: Math.abs(delta_x / delta_time) || 0,
+              y: Math.abs(delta_y / delta_time) || 0
+          };
+      },
 
-    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();
-        }
-      }
-    }
-  };
+      /**
+       * calculate the angle between two coordinates
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {Number}    angle
+       */
+      getAngle: function getAngle(touch1, touch2) {
+          var y = touch2.pageY - touch1.pageY,
+              x = touch2.pageX - touch1.pageX;
+          return Math.atan2(y, x) * 180 / Math.PI;
+      },
 
 
-  /**
-   * 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.
-   *
-   * @private
-   */
-  exports._updateCalculationNodes = function () {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this.calculationNodes = {};
-      this.calculationNodeIndices = [];
+      /**
+       * angle to direction define
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {String}    direction constant, like Hammer.DIRECTION_LEFT
+       */
+      getDirection: function getDirection(touch1, touch2) {
+          var x = Math.abs(touch1.pageX - touch2.pageX),
+              y = Math.abs(touch1.pageY - touch2.pageY);
 
-      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];
+          if(x >= y) {
+              return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
           }
           else {
-            supportNodes[supportNodeId]._setForce(0, 0);
+              return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
           }
-        }
-      }
+      },
 
-      for (var idx in this.calculationNodes) {
-        if (this.calculationNodes.hasOwnProperty(idx)) {
-          this.calculationNodeIndices.push(idx);
-        }
-      }
-    }
-    else {
-      this.calculationNodes = this.nodes;
-      this.calculationNodeIndices = this.nodeIndices;
-    }
-  };
 
+      /**
+       * calculate the distance between two touches
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {Number}    distance
+       */
+      getDistance: function getDistance(touch1, touch2) {
+          var x = touch2.pageX - touch1.pageX,
+              y = touch2.pageY - touch1.pageY;
+          return Math.sqrt((x*x) + (y*y));
+      },
 
-  /**
-   * 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);
+      /**
+       * calculate the scale factor between two touchLists (fingers)
+       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+       * @param   {Array}     start
+       * @param   {Array}     end
+       * @returns {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;
+      },
 
-        gravityForce = (distance == 0) ? 0 : (gravity / distance);
-        node.fx = dx * gravityForce;
-        node.fy = dy * gravityForce;
-      }
-      else {
-        node.fx = 0;
-        node.fy = 0;
-      }
-    }
-  };
 
+      /**
+       * calculate the rotation degrees between two touchLists (fingers)
+       * @param   {Array}     start
+       * @param   {Array}     end
+       * @returns {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;
+      },
 
 
+      /**
+       * boolean if the direction is vertical
+       * @param    {String}    direction
+       * @returns  {Boolean}   is_vertical
+       */
+      isVertical: function isVertical(direction) {
+          return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
+      },
 
-  /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
-   * @private
-   */
-  exports._calculateSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    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)) {
-            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+      /**
+       * stop browser default behavior with css props
+       * @param   {HtmlElement}   element
+       * @param   {Object}        css_props
+       */
+      stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
+          var prop,
+              vendors = ['webkit','khtml','moz','ms','o',''];
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+          if(!css_props || !element.style) {
+              return;
+          }
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
+          // with css properties for modern browsers
+          for(var i = 0; i < vendors.length; i++) {
+              for(var p in css_props) {
+                  if(css_props.hasOwnProperty(p)) {
+                      prop = p;
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+                      // vender prefix at the property
+                      if(vendors[i]) {
+                          prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
+                      }
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+                      // set the style
+                      element.style[prop] = css_props[p];
+                  }
+              }
+          }
 
-            edge.from.fx += fx;
-            edge.from.fy += fy;
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
+          // also the disable onselectstart
+          if(css_props.userSelect == 'none') {
+              element.onselectstart = function() {
+                  return false;
+              };
           }
-        }
       }
-    }
   };
 
+  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,
 
-  /**
-   * 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;
+      // when this becomes true, no gestures are fired
+      stopped: false,
 
-    // 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;
 
-              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+      /**
+       * start Hammer.gesture detection
+       * @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;
+          }
 
-              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+          this.stopped = false;
 
-              // 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);
-            }
+          this.current = {
+              inst        : inst, // reference to HammerInstance we're working for
+              startEvent  : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
+              lastEvent   : false, // last eventData
+              name        : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
+          };
+
+          this.detect(eventData);
+      },
+
+
+      /**
+       * Hammer.gesture detection
+       * @param   {Object}    eventData
+       * @param   {Object}    eventData
+       */
+      detect: function detect(eventData) {
+          if(!this.current || this.stopped) {
+              return;
           }
-        }
-      }
-    }
-  };
 
+          // extend event data with calculations about scale, distance etc
+          eventData = this.extendEventData(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;
+          // instance options
+          var inst_options = this.current.inst.options;
 
-    dx = (node1.x - node2.x);
-    dy = (node1.y - node2.y);
-    distance = Math.sqrt(dx * dx + dy * dy);
+          // call Hammer.gesture handlers
+          for(var g=0,len=this.gestures.length; g<len; g++) {
+              var gesture = this.gestures[g];
 
-    if (distance == 0) {
-      distance = 0.01;
-    }
+              // only when the instance options have enabled this gesture
+              if(!this.stopped && inst_options[gesture.name] !== false) {
+                  // if a handler returns false, we stop with the detection
+                  if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
+                      this.stopDetect();
+                      break;
+                  }
+              }
+          }
 
-    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+          // store as previous event event
+          if(this.current) {
+              this.current.lastEvent = eventData;
+          }
 
-    fx = dx * springForce;
-    fy = dy * springForce;
+          // endevent, but not the last touch, so dont stop
+          if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
+              this.stopDetect();
+          }
 
-    node1.fx += fx;
-    node1.fy += fy;
-    node2.fx -= fx;
-    node2.fy -= fy;
-  };
+          return eventData;
+      },
 
 
-  /**
-   * 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);
+      /**
+       * 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
+       */
+      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 = Hammer.utils.extend({}, this.current);
 
-      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);
+          // reset the current
+          this.current = null;
 
-      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");
+          // stopped!
+          this.stopped = true;
+      },
 
-      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");
 
-      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");
+      /**
+       * extend eventData for Hammer.gestures
+       * @param   {Object}   ev
+       * @returns {Object}   ev
+       */
+      extendEventData: function extendEventData(ev) {
+          var startEv = this.current.startEvent;
 
-      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;
-      }
+          // if the touches change, set the new touches over the startEvent touches
+          // this because touchevents don't have all the touches on touchstart, or the
+          // user must place his fingers at the EXACT same time on the screen, which is not realistic
+          // but, sometimes it happens that both fingers are touching at the EXACT same time
+          if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
+              // extend 1 level deep to get the touchlist with the touch objects
+              startEv.touches = [];
+              for(var i=0,len=ev.touches.length; i<len; i++) {
+                  startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
+              }
+          }
 
-      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
-      var graph_generateOptions = document.getElementById("graph_generateOptions");
+          var delta_time = ev.timeStamp - startEv.timeStamp,
+              delta_x = ev.center.pageX - startEv.center.pageX,
+              delta_y = ev.center.pageY - startEv.center.pageY,
+              velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
 
-      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";
-      }
+          Hammer.utils.extend(ev, {
+              deltaTime   : delta_time,
+
+              deltaX      : delta_x,
+              deltaY      : delta_y,
 
+              velocityX   : velocity.x,
+              velocityY   : velocity.y,
 
-      switchConfigurations.apply(this);
+              distance    : Hammer.utils.getDistance(startEv.center, ev.center),
+              angle       : Hammer.utils.getAngle(startEv.center, ev.center),
+              direction   : Hammer.utils.getDirection(startEv.center, ev.center),
 
-      radioButton1.onchange = switchConfigurations.bind(this);
-      radioButton2.onchange = switchConfigurations.bind(this);
-      radioButton3.onchange = switchConfigurations.bind(this);
-    }
-  };
+              scale       : Hammer.utils.getScale(startEv.touches, ev.touches),
+              rotation    : Hammer.utils.getRotation(startEv.touches, ev.touches),
 
-  /**
-   * 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;
-    }
-  };
+              startEvent  : startEv
+          });
 
+          return ev;
+      },
 
-  /**
-   * 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);
-  }
+      /**
+       * register new gesture
+       * @param   {Object}    gesture object, see gestures.js for documentation
+       * @returns {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;
+          }
 
-  /**
-   * 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();
-    }
-    else {
-      this.repositionNodes();
-    }
-    this.moving = true;
-    this.start();
-  }
+          // extend Hammer default options with the Hammer.gesture options
+          Hammer.utils.extend(Hammer.defaults, options, true);
 
-  /**
-   *  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}";
+          // 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;
       }
-      options += '};'
-    }
+  };
 
 
-    this.optionsDiv.innerHTML = options;
-  }
+  Hammer.gestures = Hammer.gestures || {};
 
   /**
-   * this is used to switch between barnesHut, repulsion and hierarchical.
+   * Custom gestures
+   * ==============================
    *
-   */
-  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();
-  }
+   * Gesture object
+   * --------------------
+   * The object structure of a gesture:
+   *
+   * { name: 'mygesture',
+   *   index: 1337,
+   *   defaults: {
+   *     mygesture_option: true
+   *   }
+   *   handler: function(type, ev, inst) {
+   *     // trigger gesture event
+   *     inst.trigger(this.name, ev);
+   *   }
+   * }
 
+   * @param   {String}    name
+   * this should be the name of the gesture, lowercase
+   * it is also being used to disable/enable the gesture per instance config.
+   *
+   * @param   {Number}    [index=1000]
+   * the index of the gesture, where it is going to be in the stack of gestures detection
+   * like when you build an gesture that depends on the drag gesture, it is a good
+   * idea to place it after the index of the drag gesture.
+   *
+   * @param   {Object}    [defaults={}]
+   * the default settings of the gesture. these are added to the instance settings,
+   * and can be overruled per instance. you can also add the name of the gesture,
+   * but this is also added by default (and set to true).
+   *
+   * @param   {Function}  handler
+   * this handles the gesture detection of your custom gesture and receives the
+   * following arguments:
+   *
+   *      @param  {Object}    eventData
+   *      event data containing the following properties:
+   *          timeStamp   {Number}        time the event occurred
+   *          target      {HTMLElement}   target element
+   *          touches     {Array}         touches (fingers, pointers, mouse) on the screen
+   *          pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
+   *          center      {Object}        center position of the touches. contains pageX and pageY
+   *          deltaTime   {Number}        the total time of the touches in the screen
+   *          deltaX      {Number}        the delta on x axis we haved moved
+   *          deltaY      {Number}        the delta on y axis we haved moved
+   *          velocityX   {Number}        the velocity on the x
+   *          velocityY   {Number}        the velocity on y
+   *          angle       {Number}        the angle we are moving
+   *          direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
+   *          distance    {Number}        the distance we haved moved
+   *          scale       {Number}        scaling of the touches, needs 2 touches
+   *          rotation    {Number}        rotation of the touches, needs 2 touches *
+   *          eventType   {String}        matches Hammer.EVENT_START|MOVE|END
+   *          srcEvent    {Object}        the source event, like TouchStart or MouseDown *
+   *          startEvent  {Object}        contains the same properties as above,
+   *                                      but from the first touch. this is used to calculate
+   *                                      distances, deltaTime, scaling etc
+   *
+   *      @param  {Hammer.Instance}    inst
+   *      the instance we are doing the detection for. you can get the options from
+   *      the inst.options object and trigger the gesture event by calling inst.trigger
+   *
+   *
+   * Handle gestures
+   * --------------------
+   * inside the handler you can get/set Hammer.detection.current. This is the current
+   * detection session. It has the following properties
+   *      @param  {String}    name
+   *      contains the name of the gesture we have detected. it has not a real function,
+   *      only to check in other gestures if something is detected.
+   *      like in the drag gesture we set it to 'drag' and in the swipe gesture we can
+   *      check if the current gesture is 'drag' by accessing Hammer.detection.current.name
+   *
+   *      @readonly
+   *      @param  {Hammer.Instance}    inst
+   *      the instance we do the detection for
+   *
+   *      @readonly
+   *      @param  {Object}    startEvent
+   *      contains the properties of the first gesture detection in this session.
+   *      Used for calculations about timing, distance, etc.
+   *
+   *      @readonly
+   *      @param  {Object}    lastEvent
+   *      contains all the properties of the last gesture detect in this session.
+   *
+   * after the gesture detection session has been completed (user has released the screen)
+   * the Hammer.detection.current object is copied into Hammer.detection.previous,
+   * this is usefull for gestures like doubletap, where you need to know if the
+   * previous gesture was a tap
+   *
+   * options that have been set by the instance can be received by calling inst.options
+   *
+   * You can trigger a gesture event by calling inst.trigger("mygesture", event).
+   * The first param is the name of your gesture, the second the event argument
+   *
+   *
+   * Register gestures
+   * --------------------
+   * When an gesture is added to the Hammer.gestures object, it is auto registered
+   * at the setup of the first Hammer instance. You can also call Hammer.detection.register
+   * manually and pass your gesture object as a param
+   *
+   */
 
   /**
-   * this generates the ranges depending on the iniital values.
-   *
-   * @param id
-   * @param map
-   * @param constantsVariableName
+   * Hold
+   * Touch stays at the same place for x time
+   * @events  hold
    */
-  function showValueOfRange (id,map,constantsVariableName) {
-    var valueId = id + "_value";
-    var rangeValue = document.getElementById(id).value;
+  Hammer.gestures.Hold = {
+      name: 'hold',
+      index: 10,
+      defaults: {
+          hold_timeout	: 500,
+          hold_threshold	: 1
+      },
+      timer: null,
+      handler: function holdGesture(ev, inst) {
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  // clear any running timers
+                  clearTimeout(this.timer);
 
-    if (map instanceof Array) {
-      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));
-    }
+                  // set the gesture so we can check in the timeout if it still is
+                  Hammer.detection.current.name = this.name;
 
-    if (constantsVariableName == "hierarchicalLayout_direction" ||
-      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
-      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
-      this._setupHierarchicalLayout();
-    }
-    this.moving = true;
-    this.start();
-  }
+                  // set timer and if after the timeout it still is hold,
+                  // we trigger the hold event
+                  this.timer = setTimeout(function() {
+                      if(Hammer.detection.current.name == 'hold') {
+                          inst.trigger('hold', ev);
+                      }
+                  }, inst.options.hold_timeout);
+                  break;
 
+              // when you move or end we clear the timer
+              case Hammer.EVENT_MOVE:
+                  if(ev.distance > inst.options.hold_threshold) {
+                      clearTimeout(this.timer);
+                  }
+                  break;
+
+              case Hammer.EVENT_END:
+                  clearTimeout(this.timer);
+                  break;
+          }
+      }
+  };
 
-/***/ },
-/* 47 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Calculate the forces the nodes apply on each other based on a repulsion field.
-   * This field is linearly approximated.
-   *
-   * @private
+   * Tap/DoubleTap
+   * Quick touch at a place or double at the same place
+   * @events  tap, doubletap
    */
-  exports._calculateNodeForces = function () {
-    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
-
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
-
-    // approximation constants
-    var a_base = -2 / 3;
-    var b = 4 / 3;
-
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
+  Hammer.gestures.Tap = {
+      name: 'tap',
+      index: 100,
+      defaults: {
+          tap_max_touchtime	: 250,
+          tap_max_distance	: 10,
+  		tap_always			: true,
+          doubletap_distance	: 20,
+          doubletap_interval	: 300
+      },
+      handler: function tapGesture(ev, inst) {
+          if(ev.eventType == Hammer.EVENT_END) {
+              // previous gesture, for the double tap since these are two different gesture detections
+              var prev = Hammer.detection.previous,
+  				did_doubletap = false;
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+              // when the touchtime is higher then the max touch time
+              // or when the moving distance is too much
+              if(ev.deltaTime > inst.options.tap_max_touchtime ||
+                  ev.distance > inst.options.tap_max_distance) {
+                  return;
+              }
 
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
+              // check if double tap
+              if(prev && prev.name == 'tap' &&
+                  (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
+                  ev.distance < inst.options.doubletap_distance) {
+  				inst.trigger('doubletap', ev);
+  				did_doubletap = true;
+              }
 
-        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
-        var a = a_base / minimumDistance;
-        if (distance < 2 * minimumDistance) {
-          if (distance < 0.5 * minimumDistance) {
-            repulsingForce = 1.0;
-          }
-          else {
-            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+  			// do a single tap
+  			if(!did_doubletap || inst.options.tap_always) {
+  				Hammer.detection.current.name = 'tap';
+  				inst.trigger(Hammer.detection.current.name, ev);
+  			}
           }
+      }
+  };
 
-          // amplify the repulsion for clusters.
-          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
-          repulsingForce = repulsingForce / distance;
 
-          fx = dx * repulsingForce;
-          fy = dy * repulsingForce;
+  /**
+   * Swipe
+   * triggers swipe events when the end velocity is above the threshold
+   * @events  swipe, swipeleft, swiperight, swipeup, swipedown
+   */
+  Hammer.gestures.Swipe = {
+      name: 'swipe',
+      index: 40,
+      defaults: {
+          // set 0 for unlimited, but this can conflict with transform
+          swipe_max_touches  : 1,
+          swipe_velocity     : 0.7
+      },
+      handler: function swipeGesture(ev, inst) {
+          if(ev.eventType == Hammer.EVENT_END) {
+              // max touches
+              if(inst.options.swipe_max_touches > 0 &&
+                  ev.touches.length > inst.options.swipe_max_touches) {
+                  return;
+              }
 
-          node1.fx -= fx;
-          node1.fy -= fy;
-          node2.fx += fx;
-          node2.fy += fy;
-        }
+              // when the distance we moved is too small we skip this gesture
+              // or we can be already in dragging
+              if(ev.velocityX > inst.options.swipe_velocity ||
+                  ev.velocityY > inst.options.swipe_velocity) {
+                  // trigger swipe events
+                  inst.trigger(this.name, ev);
+                  inst.trigger(this.name + ev.direction, ev);
+              }
+          }
       }
-    }
   };
 
 
-/***/ },
-/* 48 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * Calculate the forces the nodes apply on eachother based on a repulsion field.
-   * This field is linearly approximated.
-   *
-   * @private
+   * Drag
+   * Move with x fingers (default 1) around on the page. Blocking the scrolling when
+   * moving left and right is a good practice. When all the drag events are blocking
+   * you disable scrolling on that area.
+   * @events  drag, drapleft, dragright, dragup, dragdown
    */
-  exports._calculateNodeForces = function () {
-    var dx, dy, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
+  Hammer.gestures.Drag = {
+      name: 'drag',
+      index: 50,
+      defaults: {
+          drag_min_distance : 10,
+          // set 0 for unlimited, but this can conflict with transform
+          drag_max_touches  : 1,
+          // 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
+          drag_block_horizontal   : false,
+          drag_block_vertical     : false,
+          // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
+          // It disallows vertical directions if the initial direction was horizontal, and vice versa.
+          drag_lock_to_axis       : false,
+          // drag lock only kicks in when distance > drag_lock_min_distance
+          // This way, locking occurs only when the distance has become large enough to reliably determine the direction
+          drag_lock_min_distance : 25
+      },
+      triggered: false,
+      handler: function dragGesture(ev, inst) {
+          // current gesture isnt drag, but dragged is true
+          // this means an other gesture is busy. now call dragend
+          if(Hammer.detection.current.name != this.name && this.triggered) {
+              inst.trigger(this.name +'end', ev);
+              this.triggered = false;
+              return;
+          }
 
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
+          // max touches
+          if(inst.options.drag_max_touches > 0 &&
+              ev.touches.length > inst.options.drag_max_touches) {
+              return;
+          }
 
-    // approximation constants
-    var b = 5;
-    var a_base = 0.5 * -b;
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  this.triggered = false;
+                  break;
 
+              case Hammer.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.drag_min_distance &&
+                      Hammer.detection.current.name != this.name) {
+                      return;
+                  }
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
-    var a = a_base / minimumDistance;
+                  // we are dragging!
+                  Hammer.detection.current.name = this.name;
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
+                  // lock drag to axis?
+                  if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
+                      ev.drag_locked_to_axis = true;
+                  }
+                  var last_direction = Hammer.detection.current.lastEvent.direction;
+                  if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
+                      // keep direction on the axis that the drag gesture started on
+                      if(Hammer.utils.isVertical(last_direction)) {
+                          ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+                      }
+                      else {
+                          ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+                      }
+                  }
 
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        if (node1.level == node2.level) {
+                  // first time, trigger dragstart event
+                  if(!this.triggered) {
+                      inst.trigger(this.name +'start', ev);
+                      this.triggered = true;
+                  }
 
-          dx = node2.x - node1.x;
-          dy = node2.y - node1.y;
-          distance = Math.sqrt(dx * dx + dy * dy);
+                  // trigger normal event
+                  inst.trigger(this.name, ev);
 
+                  // direction event, like dragdown
+                  inst.trigger(this.name + ev.direction, ev);
 
-          if (distance < 2 * minimumDistance) {
-            repulsingForce = a * distance + b;
-            var c = 0.05;
-            var d = 2 * minimumDistance * 2 * c;
-            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
+                  // block the browser events
+                  if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
+                      (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
+                      ev.preventDefault();
+                  }
+                  break;
 
-            // normalize force with
-            if (distance == 0) {
-              distance = 0.01;
-            }
-            else {
-              repulsingForce = repulsingForce / distance;
-            }
-            fx = dx * repulsingForce;
-            fy = dy * repulsingForce;
+              case Hammer.EVENT_END:
+                  // trigger dragend
+                  if(this.triggered) {
+                      inst.trigger(this.name +'end', ev);
+                  }
 
-            node1.fx -= fx;
-            node1.fy -= fy;
-            node2.fx += fx;
-            node2.fy += fy;
+                  this.triggered = false;
+                  break;
           }
-        }
       }
-    }
   };
 
 
   /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
-   * @private
+   * Transform
+   * User want to scale or rotate with 2 fingers
+   * @events  transform, pinch, pinchin, pinchout, rotate
    */
-  exports._calculateHierarchicalSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+  Hammer.gestures.Transform = {
+      name: 'transform',
+      index: 45,
+      defaults: {
+          // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
+          transform_min_scale     : 0.01,
+          // rotation in degrees
+          transform_min_rotation  : 1,
+          // prevent default browser behavior when two touches are on the screen
+          // but it makes the element a blocking element
+          // when you are using the transform gesture, it is a good practice to set this true
+          transform_always_block  : false
+      },
+      triggered: false,
+      handler: function transformGesture(ev, inst) {
+          // current gesture isnt drag, but dragged is true
+          // this means an other gesture is busy. now call dragend
+          if(Hammer.detection.current.name != this.name && this.triggered) {
+              inst.trigger(this.name +'end', ev);
+              this.triggered = false;
+              return;
+          }
 
-    // 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.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+          // atleast multitouch
+          if(ev.touches.length < 2) {
+              return;
+          }
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+          // prevent default when two fingers are on the screen
+          if(inst.options.transform_always_block) {
+              ev.preventDefault();
+          }
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  this.triggered = false;
+                  break;
 
-            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
+              case Hammer.EVENT_MOVE:
+                  var scale_threshold = Math.abs(1-ev.scale);
+                  var rotation_threshold = Math.abs(ev.rotation);
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+                  // when the distance we moved is too small we skip this gesture
+                  // or we can be already in dragging
+                  if(scale_threshold < inst.options.transform_min_scale &&
+                      rotation_threshold < inst.options.transform_min_rotation) {
+                      return;
+                  }
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+                  // we are transforming!
+                  Hammer.detection.current.name = this.name;
 
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-            edge.from.fx += fx;
-            edge.from.fy += fy;
+                  // first time, trigger dragstart event
+                  if(!this.triggered) {
+                      inst.trigger(this.name +'start', ev);
+                      this.triggered = true;
+                  }
 
+                  inst.trigger(this.name, ev); // basic transform event
 
-            var factor = 5;
-            if (distance > edgeLength) {
-              factor = 25;
-            }
+                  // trigger rotate event
+                  if(rotation_threshold > inst.options.transform_min_rotation) {
+                      inst.trigger('rotate', ev);
+                  }
 
-            if (edge.from.level > edge.to.level) {
-              edge.to.fx -= factor*fx;
-              edge.to.fy -= factor*fy;
-            }
-            else if (edge.from.level < edge.to.level) {
-              edge.from.fx += factor*fx;
-              edge.from.fy += factor*fy;
-            }
+                  // trigger pinch event
+                  if(scale_threshold > inst.options.transform_min_scale) {
+                      inst.trigger('pinch', ev);
+                      inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
+                  }
+                  break;
+
+              case Hammer.EVENT_END:
+                  // trigger dragend
+                  if(this.triggered) {
+                      inst.trigger(this.name +'end', ev);
+                  }
+
+                  this.triggered = false;
+                  break;
           }
-        }
       }
-    }
   };
 
-/***/ },
-/* 49 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
-   * The Barnes Hut method is used to speed up this N-body simulation.
-   *
-   * @private
+   * Touch
+   * Called as first, tells the user has touched the screen
+   * @events  touch
    */
-  exports._calculateNodeForces = function() {
-    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
-      var node;
-      var nodes = this.calculationNodes;
-      var nodeIndices = this.calculationNodeIndices;
-      var nodeCount = nodeIndices.length;
+  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
+          prevent_default: false,
 
-      this._formBarnesHutTree(nodes,nodeIndices);
+          // disable mouse events, so only touch (or pen!) input triggers events
+          prevent_mouseevents: false
+      },
+      handler: function touchGesture(ev, inst) {
+          if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
+              ev.stopDetect();
+              return;
+          }
 
-      var barnesHutTree = this.barnesHutTree;
+          if(inst.options.prevent_default) {
+              ev.preventDefault();
+          }
 
-      // place the nodes one by one recursively
-      for (var i = 0; i < nodeCount; i++) {
-        node = nodes[nodeIndices[i]];
-        // starting with root is irrelevant, it never passes the BarnesHut condition
-        this._getForceContribution(barnesHutTree.root.children.NW,node);
-        this._getForceContribution(barnesHutTree.root.children.NE,node);
-        this._getForceContribution(barnesHutTree.root.children.SW,node);
-        this._getForceContribution(barnesHutTree.root.children.SE,node);
+          if(ev.eventType ==  Hammer.EVENT_START) {
+              inst.trigger(this.name, ev);
+          }
       }
-    }
   };
 
 
   /**
-   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
-   * If a region contains a single node, we check if it is not itself, then we apply the force.
-   *
-   * @param parentBranch
-   * @param node
-   * @private
+   * Release
+   * Called as last, tells the user has released the screen
+   * @events  release
    */
-  exports._getForceContribution = function(parentBranch,node) {
-    // we get no force contribution from an empty region
-    if (parentBranch.childrenCount > 0) {
-      var dx,dy,distance;
+  Hammer.gestures.Release = {
+      name: 'release',
+      index: Infinity,
+      handler: function releaseGesture(ev, inst) {
+          if(ev.eventType ==  Hammer.EVENT_END) {
+              inst.trigger(this.name, ev);
+          }
+      }
+  };
 
-      // get the distance from the center of mass to the node.
-      dx = parentBranch.centerOfMass.x - node.x;
-      dy = parentBranch.centerOfMass.y - node.y;
-      distance = Math.sqrt(dx * dx + dy * dy);
+  // node export
+  if(typeof module === 'object' && typeof module.exports === 'object'){
+      module.exports = Hammer;
+  }
+  // just window export
+  else {
+      window.Hammer = Hammer;
 
-      // BarnesHut condition
-      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
-      // calcSize = 1/s --> d * 1/s > 1/theta = passed
-      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
-        // duplicate code to reduce function calls to speed up program
-        if (distance == 0) {
-          distance = 0.1*Math.random();
-          dx = distance;
-        }
-        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-        var fx = dx * gravityForce;
-        var fy = dy * gravityForce;
-        node.fx += fx;
-        node.fy += fy;
-      }
-      else {
-        // Did not pass the condition, go into children if available
-        if (parentBranch.childrenCount == 4) {
-          this._getForceContribution(parentBranch.children.NW,node);
-          this._getForceContribution(parentBranch.children.NE,node);
-          this._getForceContribution(parentBranch.children.SW,node);
-          this._getForceContribution(parentBranch.children.SE,node);
-        }
-        else { // parentBranch must have only one node, if it was empty we wouldnt be here
-          if (parentBranch.children.data.id != node.id) { // if it is not self
-            // duplicate code to reduce function calls to speed up program
-            if (distance == 0) {
-              distance = 0.5*Math.random();
-              dx = distance;
-            }
-            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-            var fx = dx * gravityForce;
-            var fy = dy * gravityForce;
-            node.fx += fx;
-            node.fy += fy;
-          }
-        }
+      // requireJS module definition
+      if(typeof window.define === 'function' && window.define.amd) {
+          window.define('hammer', [], function() {
+              return Hammer;
+          });
       }
-    }
+  }
+  })(this);
+
+/***/ },
+/* 50 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var RepulsionMixin = __webpack_require__(52);
+  var HierarchialRepulsionMixin = __webpack_require__(53);
+  var BarnesHutMixin = __webpack_require__(54);
+
+  /**
+   * 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();
   };
 
+
   /**
-   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   * This loads the node force solver based on the barnes hut or repulsion algorithm
    *
-   * @param nodes
-   * @param nodeIndices
    * @private
    */
-  exports._formBarnesHutTree = function(nodes,nodeIndices) {
-    var node;
-    var nodeCount = nodeIndices.length;
+  exports._loadSelectedForceSolver = function () {
+    // this overloads the this._calculateNodeForces
+    if (this.constants.physics.barnesHut.enabled == true) {
+      this._clearMixin(RepulsionMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
 
-    var minX = Number.MAX_VALUE,
-      minY = Number.MAX_VALUE,
-      maxX =-Number.MAX_VALUE,
-      maxY =-Number.MAX_VALUE;
+      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;
 
-    // get the range of the nodes
-    for (var i = 0; i < nodeCount; i++) {
-      var x = nodes[nodeIndices[i]].x;
-      var y = nodes[nodeIndices[i]].y;
-      if (x < minX) { minX = x; }
-      if (x > maxX) { maxX = x; }
-      if (y < minY) { minY = y; }
-      if (y > maxY) { maxY = y; }
+      this._loadMixin(BarnesHutMixin);
     }
-    // make the range a square
-    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
-    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
-    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
+    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(RepulsionMixin);
 
+      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 minimumTreeSize = 1e-5;
-    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
-    var halfRootSize = 0.5 * rootSize;
-    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+      this._loadMixin(HierarchialRepulsionMixin);
+    }
+    else {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
+      this.barnesHutTree = undefined;
 
-    // construct the barnesHutTree
-    var barnesHutTree = {
-      root:{
-        centerOfMass: {x:0, y:0},
-        mass:0,
-        range: {
-          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
-          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
-        },
-        size: rootSize,
-        calcSize: 1 / rootSize,
-        children: { data:null},
-        maxWidth: 0,
-        level: 0,
-        childrenCount: 4
-      }
-    };
-    this._splitBranch(barnesHutTree.root);
+      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;
 
-    // place the nodes one by one recursively
-    for (i = 0; i < nodeCount; i++) {
-      node = nodes[nodeIndices[i]];
-      this._placeInTree(barnesHutTree.root,node);
+      this._loadMixin(RepulsionMixin);
     }
-
-    // make global
-    this.barnesHutTree = barnesHutTree
   };
 
-
   /**
-   * this updates the mass of a branch. this is increased by adding a node.
+   * 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.
    *
-   * @param parentBranch
-   * @param node
    * @private
    */
-  exports._updateBranchMass = function(parentBranch, node) {
-    var totalMass = parentBranch.mass + node.mass;
-    var totalMassInv = 1/totalMass;
-
-    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
-    parentBranch.centerOfMass.x *= totalMassInv;
-
-    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
-    parentBranch.centerOfMass.y *= totalMassInv;
-
-    parentBranch.mass = totalMass;
-    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
-    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+  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);
+      }
 
+      // we now start the force calculation
+      this._calculateForces();
+    }
   };
 
 
   /**
-   * determine in which branch the node will be placed.
-   *
-   * @param parentBranch
-   * @param node
-   * @param skipMassUpdate
+   * Calculate the external forces acting on the nodes
+   * Forces are caused by: edges, repulsing forces between nodes, gravity
    * @private
    */
-  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
-    if (skipMassUpdate != true || skipMassUpdate === undefined) {
-      // update the mass of the branch.
-      this._updateBranchMass(parentBranch,node);
-    }
+  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
 
-    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
-        this._placeInRegion(parentBranch,node,"NW");
-      }
-      else { // in SW
-        this._placeInRegion(parentBranch,node,"SW");
-      }
-    }
-    else { // in NE or SE
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
-        this._placeInRegion(parentBranch,node,"NE");
+    this._calculateGravitationalForces();
+    this._calculateNodeForces();
+
+    if (this.constants.physics.springConstant > 0) {
+      if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+        this._calculateSpringForcesWithSupport();
       }
-      else { // in SE
-        this._placeInRegion(parentBranch,node,"SE");
+      else {
+        if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+          this._calculateHierarchicalSpringForces();
+        }
+        else {
+          this._calculateSpringForces();
+        }
       }
     }
   };
 
 
   /**
-   * actually place the node in a region (or branch)
+   * 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.
    *
-   * @param parentBranch
-   * @param node
-   * @param region
    * @private
    */
-  exports._placeInRegion = function(parentBranch,node,region) {
-    switch (parentBranch.children[region].childrenCount) {
-      case 0: // place node here
-        parentBranch.children[region].children.data = node;
-        parentBranch.children[region].childrenCount = 1;
-        this._updateBranchMass(parentBranch.children[region],node);
-        break;
-      case 1: // convert into children
-        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
-        // we move one node a pixel and we do not put it in the tree.
-        if (parentBranch.children[region].children.data.x == node.x &&
-            parentBranch.children[region].children.data.y == node.y) {
-          node.x += Math.random();
-          node.y += Math.random();
+  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];
         }
-        else {
-          this._splitBranch(parentBranch.children[region]);
-          this._placeInTree(parentBranch.children[region],node);
+      }
+      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);
+          }
         }
-        break;
-      case 4: // place in branch
-        this._placeInTree(parentBranch.children[region],node);
-        break;
+      }
+
+      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 splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
-   * after the split is complete.
+   * this function applies the central gravity effect to keep groups from floating off
    *
-   * @param parentBranch
    * @private
    */
-  exports._splitBranch = function(parentBranch) {
-    // if the branch is shaded with a node, replace the node in the new subset.
-    var containedNode = null;
-    if (parentBranch.childrenCount == 1) {
-      containedNode = parentBranch.children.data;
-      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
-    }
-    parentBranch.childrenCount = 4;
-    parentBranch.children.data = null;
-    this._insertRegion(parentBranch,"NW");
-    this._insertRegion(parentBranch,"NE");
-    this._insertRegion(parentBranch,"SW");
-    this._insertRegion(parentBranch,"SE");
+  exports._calculateGravitationalForces = function () {
+    var dx, dy, distance, node, i;
+    var nodes = this.calculationNodes;
+    var gravity = this.constants.physics.centralGravity;
+    var gravityForce = 0;
 
-    if (containedNode != null) {
-      this._placeInTree(parentBranch,containedNode);
+    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 subdivides the region into four new segments.
-   * Specifically, this inserts a single new segment.
-   * It fills the children section of the parentBranch
+   * this function calculates the effects of the springs in the case of unsmooth curves.
    *
-   * @param parentBranch
-   * @param region
-   * @param parentRange
    * @private
    */
-  exports._insertRegion = function(parentBranch, region) {
-    var minX,maxX,minY,maxY;
-    var childSize = 0.5 * parentBranch.size;
-    switch (region) {
-      case "NW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "NE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "SW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-      case "SE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-    }
+  exports._calculateSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    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)) {
+            edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-    parentBranch.children[region] = {
-      centerOfMass:{x:0,y:0},
-      mass:0,
-      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
-      size: 0.5 * parentBranch.size,
-      calcSize: 2 * parentBranch.calcSize,
-      children: {data:null},
-      maxWidth: 0,
-      level: parentBranch.level+1,
-      childrenCount: 0
-    };
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance == 0) {
+              distance = 0.01;
+            }
+
+            // 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 function is for debugging purposed, it draws the tree.
+   * This function calculates the springforces on the nodes, accounting for the support nodes.
    *
-   * @param ctx
-   * @param color
    * @private
    */
-  exports._drawTree = function(ctx,color) {
-    if (this.barnesHutTree !== undefined) {
+  exports._calculateSpringForcesWithSupport = function () {
+    var edgeLength, edge, edgeId, combinedClusterSize;
+    var edges = this.edges;
 
-      ctx.lineWidth = 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)) {
+            if (edge.via != null) {
+              var node1 = edge.to;
+              var node2 = edge.via;
+              var node3 = edge.from;
 
-      this._drawBranch(this.barnesHutTree.root,ctx,color);
+              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+
+              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+
+              // 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);
+            }
+          }
+        }
+      }
     }
   };
 
 
   /**
-   * This function is for debugging purposes. It draws the branches recursively.
+   * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
    *
-   * @param branch
-   * @param ctx
-   * @param color
+   * @param node1
+   * @param node2
+   * @param edgeLength
    * @private
    */
-  exports._drawBranch = function(branch,ctx,color) {
-    if (color === undefined) {
-      color = "#FF0000";
-    }
+  exports._calculateSpringForce = function (node1, node2, edgeLength) {
+    var dx, dy, fx, fy, springForce, distance;
 
-    if (branch.childrenCount == 4) {
-      this._drawBranch(branch.children.NW,ctx);
-      this._drawBranch(branch.children.NE,ctx);
-      this._drawBranch(branch.children.SE,ctx);
-      this._drawBranch(branch.children.SW,ctx);
-    }
-    ctx.strokeStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.minY);
-    ctx.stroke();
+    dx = (node1.x - node2.x);
+    dy = (node1.y - node2.y);
+    distance = Math.sqrt(dx * dx + dy * dy);
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.maxY);
-    ctx.stroke();
+    if (distance == 0) {
+      distance = 0.01;
+    }
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.maxY);
-    ctx.stroke();
+    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.minY);
-    ctx.stroke();
+    fx = dx * springForce;
+    fy = dy * springForce;
 
-    /*
-     if (branch.mass > 0) {
-     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
-     ctx.stroke();
-     }
-     */
+    node1.fx += fx;
+    node1.fy += fy;
+    node2.fx -= fx;
+    node2.fy -= fy;
   };
 
 
-/***/ },
-/* 50 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * Creation of the ClusterMixin var.
-   *
-   * This contains all the functions the Network object can use to employ clustering
+   * 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);
 
-  /**
-  * 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);
+      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);
 
-   // updates the lables after clustering
-   this.updateLabels();
+      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");
 
-   // 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();
-  };
+      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");
 
-  /**
-   * 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;
+      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");
 
-    var maxLevels = 50;
-    var level = 0;
+      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 first cluster the hubs, then we pull in the outliers, repeat
-    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-      if (level % 3 == 0) {
-        this.forceAggregateHubs(true);
-        this.normalizeClusterLevels();
+      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
+      var graph_generateOptions = document.getElementById("graph_generateOptions");
+
+      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 {
-        this.increaseClusterLevel(); // this also includes a cluster normalization
+        graph_toggleSmooth.style.background = "#FF8532";
       }
 
-      numberOfNodes = this.nodeIndices.length;
-      level += 1;
-    }
 
-    // after the clustering we reposition the nodes to reduce the initial chaos
-    if (level > 0 && reposition == true) {
-      this.repositionNodes();
+      switchConfigurations.apply(this);
+
+      radioButton1.onchange = switchConfigurations.bind(this);
+      radioButton2.onchange = switchConfigurations.bind(this);
+      radioButton3.onchange = switchConfigurations.bind(this);
     }
-    this._updateCalculationNodes();
   };
 
   /**
-   * This function can be called to open up a specific cluster. It is only called by
-   * It will unpack the cluster back one level.
+   * This overwrites the this.constants.
    *
-   * @param node    | Node object: cluster to open.
+   * @param constantsVariableName
+   * @param value
+   * @private
    */
-  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;
-
-      // we decluster until we reach a decent number of nodes
-      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
-        this.decreaseClusterLevel();
-        level += 1;
-      }
-
-    }
-    else {
-      this._expandClusterNode(node,false,true);
-
-      // update the index list, dynamic edges and labels
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      this._updateCalculationNodes();
-      this.updateLabels();
+  exports._overWriteGraphConstants = function (constantsVariableName, value) {
+    var nameArray = constantsVariableName.split("_");
+    if (nameArray.length == 1) {
+      this.constants[nameArray[0]] = value;
     }
-
-    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-    if (this.moving != isMovingBeforeClustering) {
-      this.start();
+    else if (nameArray.length == 2) {
+      this.constants[nameArray[0]][nameArray[1]] = value;
     }
-  };
-
-
-  /**
-   * This calls the updateClustes with default arguments
-   */
-  exports.updateClustersDefault = function() {
-    if (this.constants.clustering.enabled == true) {
-      this.updateClusters(0,false,false);
+    else if (nameArray.length == 3) {
+      this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
     }
   };
 
 
   /**
-   * 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);
-  };
-
-
-  /**
-   * 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.
+   * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
    */
-  exports.decreaseClusterLevel = function() {
-    this.updateClusters(1,false,true);
-  };
+  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);
+  }
 
   /**
-   * 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
+   * this function is used to scramble the nodes
    *
    */
-  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 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;
       }
     }
-    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();
-
-    // 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();
-    }
-
-    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();
-      }
+    if (this.constants.hierarchicalLayout.enabled == true) {
+      this._setupHierarchicalLayout();
     }
-
-    this._updateCalculationNodes();
-  };
-
-  /**
-   * 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)
-
+    else {
+      this.repositionNodes();
     }
-  };
-
-  /**
-   * this functions starts clustering by hubs
-   * The minimum hub threshold is set globally
-   *
-   * @private
-   */
-  exports._aggregateHubs = function(force) {
-    this._getHubSize();
-    this._formClustersByHub(force,false);
-  };
-
+    this.moving = true;
+    this.start();
+  }
 
   /**
-   * This function is fired by keypress. It forces hubs to form.
-   *
+   *  this is used to generate an options file from the playing with physics system.
    */
-  exports.forceAggregateHubs = function(doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
-
-    this._aggregateHubs(true);
-
-    // update the index list, dynamic edges and labels
-    this._updateNodeIndexList();
-    this._updateDynamicEdges();
-    this.updateLabels();
-
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length != amountOfNodes) {
-      this.clusterSession += 1;
+  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 += '};'
+      }
     }
-
-    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();
+    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 += '};'
     }
-  };
-
-  /**
-   * 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);
+    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 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.optionsDiv.innerHTML = options;
+  }
 
   /**
-   * 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.
+   * this is used to switch between barnesHut, repulsion and hierarchical.
    *
-   * @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;
+  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";
       }
-      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];
-
-            // 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);
-              }
-            }
-          }
-        }
+    }
+    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();
+  }
+
 
   /**
-   * 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.
+   * this generates the ranges depending on the iniital values.
    *
-   * @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
+   * @param id
+   * @param map
+   * @param constantsVariableName
    */
-  exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
-    var childNode = parentNode.containedNodes[containedNodeId];
-
-    // 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();
-
-      // put the child node back in the global nodes object
-      this.nodes[containedNodeId] = childNode;
-
-      // release the contained edges from this childNode back into the global edges
-      this._releaseContainedEdges(parentNode,childNode);
-
-      // reconnect rerouted edges to the childNode
-      this._connectEdgeBackToChild(parentNode,childNode);
-
-      // validate all edges in dynamicEdges
-      this._validateEdges(parentNode);
-
-      // undo the changes from the clustering operation on the parent node
-      parentNode.mass -= childNode.mass;
-      parentNode.clusterSize -= childNode.clusterSize;
-      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-      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());
-      childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
-
-      // remove node from the list
-      delete parentNode.containedNodes[containedNodeId];
-
-      // 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;
-          }
-        }
-      }
-      // if there are no others, remove the cluster session from the list
-      if (othersPresent == false) {
-        parentNode.clusterSessions.pop();
-      }
+  function showValueOfRange (id,map,constantsVariableName) {
+    var valueId = id + "_value";
+    var rangeValue = document.getElementById(id).value;
 
-      this._repositionBezierNodes(childNode);
-  //      this._repositionBezierNodes(parentNode);
+    if (map instanceof Array) {
+      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));
+    }
 
-      // remove the clusterSession from the child node
-      childNode.clusterSession = 0;
+    if (constantsVariableName == "hierarchicalLayout_direction" ||
+      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
+      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
+      this._setupHierarchicalLayout();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-      // recalculate the size of the node on the next time the node is rendered
-      parentNode.clearSizeCache();
 
-      // restart the simulation to reorganise all nodes
-      this.moving = true;
-    }
+/***/ },
+/* 51 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // check if a further expansion step is possible if recursivity is enabled
-    if (recursive == true) {
-      this._expandClusterNode(childNode,recursive,force,openAll);
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
+  //! version : 2.7.0
+  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+  //! license : MIT
+  //! momentjs.com
 
+  (function (undefined) {
 
-  /**
-   * 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();
-    }
-  };
+      /************************************
+          Constants
+      ************************************/
 
+      var moment,
+          VERSION = "2.7.0",
+          // the global-scope this is NOT the global object in Node.js
+          globalScope = typeof global !== 'undefined' ? global : this,
+          oldGlobalMoment,
+          round = Math.round,
+          i,
 
-  /**
-   * 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();
-    }
-  };
+          YEAR = 0,
+          MONTH = 1,
+          DATE = 2,
+          HOUR = 3,
+          MINUTE = 4,
+          SECOND = 5,
+          MILLISECOND = 6,
 
+          // internal storage for language config files
+          languages = {},
 
-  /**
-   * 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;
+          // moment internal properties
+          momentProperties = {
+              _isAMomentObject: null,
+              _i : null,
+              _f : null,
+              _l : null,
+              _strict : null,
+              _tzm : null,
+              _isUTC : null,
+              _offset : null,  // optional. Combine with _isUTC
+              _pf : null,
+              _lang : null  // optional
+          },
 
-    // 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);
+          // check for nodeJS
+          hasModule = (typeof module !== 'undefined' && module.exports),
 
+          // ASP.NET json date format regex
+          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
+          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
 
-            if (length < minLength) {
-              // first check which node is larger
-              var parentNode = edge.from;
-              var childNode = edge.to;
-              if (edge.to.mass > edge.from.mass) {
-                parentNode = edge.to;
-                childNode = edge.from;
-              }
+          // 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)$/,
 
-              if (childNode.dynamicEdgesLength == 1) {
-                this._addToCluster(parentNode,childNode,false);
-              }
-              else if (parentNode.dynamicEdgesLength == 1) {
-                this._addToCluster(childNode,parentNode,false);
-              }
-            }
-          }
-        }
-      }
-    }
-  };
+          // 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|zz?|ZZ?|.)/g,
+          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
 
-  /**
-   * 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];
+          // 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)
+          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
+          parseTokenOrdinal = /\d{1,2}/,
 
-        // the edges can be swallowed by another decrease
-        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];
+          //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
 
-          // group to the largest node
-          if (childNode.id != parentNode.id) {
-            if (parentNode.mass > childNode.mass) {
-              this._addToCluster(parentNode,childNode,true);
-            }
-            else {
-              this._addToCluster(childNode,parentNode,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)?)?$/,
 
+          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
 
-  /**
-   * 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;
-        }
+          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/]
+          ],
 
-        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
-          smallestNeighbour = neighbour.clusterSessions.length;
-          smallestNeighbourNode = neighbour;
-        }
-      }
-    }
+          // timezone chunker "+10:00" > ["10", "00"] or "-1530" > ["-15", "30"]
+          parseTimezoneChunker = /([\+\-]|\d\d)/gi,
 
-    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
-      this._addToCluster(neighbour, node, true);
-    }
-  };
+          // 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
+          },
 
+          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'
+          },
 
-  /**
-   * 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);
-      }
-    }
-  };
+          camelFunctions = {
+              dayofyear : 'dayOfYear',
+              isoweekday : 'isoWeekday',
+              isoweek : 'isoWeek',
+              weekyear : 'weekYear',
+              isoweekyear : 'isoWeekYear'
+          },
 
-  /**
-   * 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;
-    }
-    // we decide if the node is a hub
-    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
-      // initialize variables
-      var dx,dy,length;
-      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-      var allowCluster = false;
+          // format function strings
+          formatFunctions = {},
 
-      // 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);
-      }
+          // default relative time thresholds
+          relativeTimeThresholds = {
+            s: 45,   //seconds to minutes
+            m: 45,   //minutes to hours
+            h: 22,   //hours to days
+            dd: 25,  //days to month (month == 1)
+            dm: 45,  //days to months (months > 1)
+            dy: 345  //days to year
+          },
 
-      // if the hub clustering is not forces, 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);
+          // tokens to ordinalize and pad
+          ordinalizeTokens = 'DDD w W M D d'.split(' '),
+          paddedTokens = 'M D H h m s w W'.split(' '),
 
-                if (length < minLength) {
-                  allowCluster = true;
-                  break;
-                }
+          formatTokenFunctions = {
+              M    : function () {
+                  return this.month() + 1;
+              },
+              MMM  : function (format) {
+                  return this.lang().monthsShort(this, format);
+              },
+              MMMM : function (format) {
+                  return this.lang().months(this, format);
+              },
+              D    : function () {
+                  return this.date();
+              },
+              DDD  : function () {
+                  return this.dayOfYear();
+              },
+              d    : function () {
+                  return this.day();
+              },
+              dd   : function (format) {
+                  return this.lang().weekdaysMin(this, format);
+              },
+              ddd  : function (format) {
+                  return this.lang().weekdaysShort(this, format);
+              },
+              dddd : function (format) {
+                  return this.lang().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.lang().meridiem(this.hours(), this.minutes(), true);
+              },
+              A    : function () {
+                  return this.lang().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.zone(),
+                      b = "+";
+                  if (a < 0) {
+                      a = -a;
+                      b = "-";
+                  }
+                  return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
+              },
+              ZZ   : function () {
+                  var a = -this.zone(),
+                      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.unix();
+              },
+              Q : function () {
+                  return this.quarter();
               }
-            }
-          }
-        }
-      }
+          },
 
-      // start the clustering if allowed
-      if ((!force && allowCluster) || force) {
-        // we loop over all edges INITIALLY connected to this hub
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          edge = this.edges[edgesIdarray[j]];
-          // the edge can be clustered by this function in a previous loop
-          if (edge !== undefined) {
-            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
-            // 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);
-            }
+          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
+
+      // 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 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 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;
+      function deprecate(msg, fn) {
+          var firstTime = true;
+          function printMsg() {
+              if (moment.suppressDeprecationWarnings === false &&
+                      typeof console !== 'undefined' && console.warn) {
+                  console.warn("Deprecation warning: " + msg);
+              }
+          }
+          return extend(function () {
+              if (firstTime) {
+                  printMsg();
+                  firstTime = false;
+              }
+              return fn.apply(this, arguments);
+          }, fn);
+      }
 
-    // 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
-        this._addToContainedEdges(parentNode,childNode,edge);
+      function padToken(func, count) {
+          return function (a) {
+              return leftZeroFill(func.call(this, a), count);
+          };
       }
-      else {
-        this._connectEdgeToCluster(parentNode,childNode,edge);
+      function ordinalizeToken(func, period) {
+          return function (a) {
+              return this.lang().ordinal(func.call(this, a), period);
+          };
       }
-    }
-    // a contained node has no dynamic edges.
-    childNode.dynamicEdges = [];
-
-    // remove circular edges from clusters
-    this._containCircularEdgesFromNode(parentNode,childNode);
 
+      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);
 
-    // remove the childNode from the global nodes object
-    delete this.nodes[childNode.id];
 
-    // update the properties of the child and parent
-    var massBefore = parentNode.mass;
-    childNode.clusterSession = this.clusterSession;
-    parentNode.mass += childNode.mass;
-    parentNode.clusterSize += childNode.clusterSize;
-    parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      /************************************
+          Constructors
+      ************************************/
 
-    // 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);
-    }
+      function Language() {
 
-    // forced clusters only open from screen size and double tap
-    if (force == true) {
-      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
-      parentNode.formationScale = 0;
-    }
-    else {
-      parentNode.formationScale = this.scale; // The latest child has been added on this scale
-    }
+      }
 
-    // recalculate the size of the node on the next time the node is rendered
-    parentNode.clearSizeCache();
+      // Moment prototype object
+      function Moment(config) {
+          checkOverflow(config);
+          extend(this, config);
+      }
 
-    // set the pop-out scale for the childnode
-    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+      // 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;
 
-    // nullify the movement velocity of the child, this is to avoid hectic behaviour
-    childNode.clearVelocity();
+          // 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;
 
-    // the mass has altered, preservation of energy dictates the velocity to be updated
-    parentNode.updateVelocity(massBefore);
+          this._data = {};
 
-    // restart the simulation to reorganise all nodes
-    this.moving = true;
-  };
+          this._bubble();
+      }
 
+      /************************************
+          Helpers
+      ************************************/
 
-  /**
-   * 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;
-            }
+      function extend(a, b) {
+          for (var i in b) {
+              if (b.hasOwnProperty(i)) {
+                  a[i] = b[i];
+              }
           }
-        }
-      }
-      node.dynamicEdgesLength -= correction;
-    }
-  };
-
 
-  /**
-   * 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);
+          if (b.hasOwnProperty("toString")) {
+              a.toString = b.toString;
+          }
 
-    // remove the edge from the global edges object
-    delete this.edges[edge.id];
+          if (b.hasOwnProperty("valueOf")) {
+              a.valueOf = b.valueOf;
+          }
 
-    // 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;
+          return a;
       }
-    }
-  };
 
-  /**
-   * 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
+      function cloneMoment(m) {
+          var result = {}, i;
+          for (i in m) {
+              if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
+                  result[i] = m[i];
+              }
+          }
 
-        edge.originalFromId.push(childNode.id);
-        edge.from = parentNode;
-        edge.fromId = parentNode.id;
+          return result;
       }
 
-      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);
+      function absRound(number) {
+          if (number < 0) {
+              return Math.ceil(number);
+          } else {
+              return Math.floor(number);
+          }
       }
-    }
-  };
-
 
-  /**
-   * 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);
+      // 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;
 
-    // this edge becomes part of the dynamicEdges of the cluster node
-    parentNode.dynamicEdges.push(edge);
-   };
+          while (output.length < targetLength) {
+              output = '0' + output;
+          }
+          return (sign ? (forceSign ? '+' : '') : '-') + output;
+      }
 
+      // helper function for _.addTime and _.subtractTime
+      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 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;
-        }
+      // check if is an array
+      function isArray(input) {
+          return Object.prototype.toString.call(input) === '[object Array]';
+      }
 
-        // append this edge to the list of edges connecting to the childnode
-        childNode.dynamicEdges.push(edge);
+      function isDate(input) {
+          return  Object.prototype.toString.call(input) === '[object Date]' ||
+                  input instanceof Date;
+      }
 
-        // 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;
+      // 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;
       }
-      // remove the entry from the rerouted edges
-      delete parentNode.reroutedEdges[childNode.id];
-    }
-  };
 
-
-  /**
-   * 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) {
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
-        parentNode.dynamicEdges.splice(i,1);
+      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;
 
-  /**
-   * 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];
+          for (prop in inputObject) {
+              if (inputObject.hasOwnProperty(prop)) {
+                  normalizedProp = normalizeUnits(prop);
+                  if (normalizedProp) {
+                      normalizedInput[normalizedProp] = inputObject[prop];
+                  }
+              }
+          }
 
-      // put the edge back in the global edges object
-      this.edges[edge.id] = edge;
+          return normalizedInput;
+      }
 
-      // 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];
+      function makeList(field) {
+          var count, setter;
 
-  };
+          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.fn._lang[field],
+                  results = [];
 
+              if (typeof format === 'number') {
+                  index = format;
+                  format = undefined;
+              }
 
+              getter = function (i) {
+                  var m = moment().utc().set(setter, i);
+                  return method.call(moment.fn._lang, m, format || '');
+              };
 
-  // ------------------- UTILITY FUNCTIONS ---------------------------- //
+              if (index != null) {
+                  return getter(index);
+              }
+              else {
+                  for (i = 0; i < count; i++) {
+                      results.push(getter(i));
+                  }
+                  return results;
+              }
+          };
+      }
 
+      function toInt(argumentForCoercion) {
+          var coercedNumber = +argumentForCoercion,
+              value = 0;
 
-  /**
-   * 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),"]");
-        }
+          if (coercedNumber !== 0 && isFinite(coercedNumber)) {
+              if (coercedNumber >= 0) {
+                  value = Math.floor(coercedNumber);
+              } else {
+                  value = Math.ceil(coercedNumber);
+              }
+          }
+
+          return value;
       }
-    }
 
-    // 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);
-          }
-        }
+      function daysInMonth(year, month) {
+          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
       }
-    }
 
-  //    /* Debug Override */
-  //    for (nodeId in this.nodes) {
-  //      if (this.nodes.hasOwnProperty(nodeId)) {
-  //        node = this.nodes[nodeId];
-  //        node.label = String(node.level);
-  //      }
-  //    }
+      function weeksInYear(year, dow, doy) {
+          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
+      }
 
-  };
+      function daysInYear(year) {
+          return isLeapYear(year) ? 366 : 365;
+      }
 
+      function isLeapYear(year) {
+          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+      }
 
-  /**
-   * 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;
+      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] > 23 ? 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;
 
-    // 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 (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
+                  overflow = DATE;
+              }
+
+              m._pf.overflow = overflow;
+          }
       }
-    }
 
-    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 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;
+              }
           }
-        }
+          return m._isValid;
       }
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      // if a cluster was formed, we increase the clusterSession
-      if (this.nodeIndices.length != amountOfNodes) {
-        this.clusterSession += 1;
+
+      function normalizeLanguage(key) {
+          return key ? key.toLowerCase().replace('_', '-') : key;
       }
-    }
-  };
 
+      // Return a moment from input, that is local/utc/zone equivalent to model.
+      function makeAs(input, model) {
+          return model._isUTC ? moment(input).zone(model._offset || 0) :
+              moment(input).local();
+      }
 
+      /************************************
+          Languages
+      ************************************/
 
-  /**
-   * 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
-      )
-  };
 
+      extend(Language.prototype, {
 
-  /**
-   * 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.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);
-      }
-    }
-  };
+          set : function (config) {
+              var prop, i;
+              for (i in config) {
+                  prop = config[i];
+                  if (typeof prop === 'function') {
+                      this[i] = prop;
+                  } else {
+                      this['_' + i] = prop;
+                  }
+              }
+          },
 
+          _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          months : function (m) {
+              return this._months[m.month()];
+          },
 
-  /**
-   * 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;
+          _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          monthsShort : function (m) {
+              return this._monthsShort[m.month()];
+          },
 
-    for (var i = 0; i < this.nodeIndices.length; i++) {
+          monthsParse : function (monthName) {
+              var i, mom, regex;
 
-      var node = this.nodes[this.nodeIndices[i]];
-      if (node.dynamicEdgesLength > largestHub) {
-        largestHub = node.dynamicEdgesLength;
-      }
-      average += node.dynamicEdgesLength;
-      averageSquared += Math.pow(node.dynamicEdgesLength,2);
-      hubCounter += 1;
-    }
-    average = average / hubCounter;
-    averageSquared = averageSquared / hubCounter;
+              if (!this._monthsParse) {
+                  this._monthsParse = [];
+              }
 
-    var variance = averageSquared - Math.pow(average,2);
+              for (i = 0; i < 12; i++) {
+                  // make the regex if we don't have it already
+                  if (!this._monthsParse[i]) {
+                      mom = moment.utc([2000, i]);
+                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
+                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
+                  }
+                  // test the regex
+                  if (this._monthsParse[i].test(monthName)) {
+                      return i;
+                  }
+              }
+          },
 
-    var standardDeviation = Math.sqrt(variance);
+          _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdays : function (m) {
+              return this._weekdays[m.day()];
+          },
 
-    this.hubThreshold = Math.floor(average + 2*standardDeviation);
+          _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysShort : function (m) {
+              return this._weekdaysShort[m.day()];
+          },
 
-    // always have at least one to cluster
-    if (this.hubThreshold > largestHub) {
-      this.hubThreshold = largestHub;
-    }
+          _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          weekdaysMin : function (m) {
+              return this._weekdaysMin[m.day()];
+          },
 
-  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
-  //  console.log("hubThreshold:",this.hubThreshold);
-  };
+          weekdaysParse : function (weekdayName) {
+              var i, mom, regex;
 
+              if (!this._weekdaysParse) {
+                  this._weekdaysParse = [];
+              }
 
-  /**
-   * 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;
-          }
-        }
-      }
-    }
-  };
+              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;
+                  }
+              }
+          },
 
-  /**
-   * 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 chains/total;
-  };
+          _longDateFormat : {
+              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;
+          },
 
+          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');
+          },
 
-/***/ },
-/* 51 */
-/***/ function(module, exports, __webpack_require__) {
+          _meridiemParse : /[ap]\.?m?\.?/i,
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'pm' : 'PM';
+              } else {
+                  return isLower ? 'am' : 'AM';
+              }
+          },
 
-  var util = __webpack_require__(1);
+          _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) {
+              var output = this._calendar[key];
+              return typeof output === 'function' ? output.apply(mom) : output;
+          },
 
-  /**
-   * 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.
-   */
+          _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);
+          },
+          pastFuture : function (diff, output) {
+              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
+              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+          },
 
-  /**
-   * 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;
-  };
+          ordinal : function (number) {
+              return this._ordinal.replace("%d", number);
+          },
+          _ordinal : "%d",
 
+          preparse : function (string) {
+              return string;
+          },
 
-  /**
-   *  /**
-   * 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);
-    }
-  };
+          postformat : function (string) {
+              return string;
+          },
 
+          week : function (mom) {
+              return weekOfYear(mom, this._week.dow, this._week.doy).week;
+          },
 
-  /**
-   * 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"];
-  };
+          _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.
+          },
 
+          _invalidDate: 'Invalid date',
+          invalidDate: function () {
+              return this._invalidDate;
+          }
+      });
 
-  /**
-   * 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"];
-  };
+      // Loads a language definition into the `languages` cache.  The function
+      // takes a key and optionally values.  If not in the browser and no values
+      // are provided, it will load the language file module.  As a convenience,
+      // this function also returns the language values.
+      function loadLang(key, values) {
+          values.abbr = key;
+          if (!languages[key]) {
+              languages[key] = new Language();
+          }
+          languages[key].set(values);
+          return languages[key];
+      }
 
+      // Remove a language from the `languages` cache. Mostly useful in tests.
+      function unloadLang(key) {
+          delete languages[key];
+      }
 
-  /**
-   * 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"];
-  };
+      // Determines which language definition to use and returns it.
+      //
+      // With no parameters, it will return the global language.  If you
+      // pass in a language key, such as 'en', it will return the
+      // definition for 'en', so long as 'en' has already been loaded using
+      // moment.lang.
+      function getLangDefinition(key) {
+          var i = 0, j, lang, next, split,
+              get = function (k) {
+                  if (!languages[k] && hasModule) {
+                      try {
+                          __webpack_require__(55)("./" + k);
+                      } catch (e) { }
+                  }
+                  return languages[k];
+              };
 
+          if (!key) {
+              return moment.fn._lang;
+          }
 
-  /**
-   * 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());
-  };
+          if (!isArray(key)) {
+              //short-circuit everything else
+              lang = get(key);
+              if (lang) {
+                  return lang;
+              }
+              key = [key];
+          }
+
+          //pick the language 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
+          while (i < key.length) {
+              split = normalizeLanguage(key[i]).split('-');
+              j = split.length;
+              next = normalizeLanguage(key[i + 1]);
+              next = next ? next.split('-') : null;
+              while (j > 0) {
+                  lang = get(split.slice(0, j).join('-'));
+                  if (lang) {
+                      return lang;
+                  }
+                  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 moment.fn._lang;
+      }
 
+      /************************************
+          Formatting
+      ************************************/
 
-  /**
-   * This function returns the currently active sector Id
-   *
-   * @returns {String}
-   * @private
-   */
-  exports._sector = function() {
-    return this.activeSector[this.activeSector.length-1];
-  };
 
+      function removeFormattingTokens(input) {
+          if (input.match(/\[[\s\S]/)) {
+              return input.replace(/^\[|\]$/g, "");
+          }
+          return input.replace(/\\/g, "");
+      }
 
-  /**
-   * 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.');
-    }
-  };
+      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]);
+              }
+          }
+
+          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.lang().invalidDate();
+          }
 
-  /**
-   * 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);
-  };
+          format = expandFormat(format, m.lang());
 
+          if (!formatFunctions[format]) {
+              formatFunctions[format] = makeFormatFunction(format);
+          }
 
-  /**
-   * 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();
-  };
+          return formatFunctions[format](m);
+      }
 
+      function expandFormat(format, lang) {
+          var i = 5;
 
-  /**
-   * 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};
+          function replaceLongDateFormatTokens(input) {
+              return lang.longDateFormat(input) || input;
+          }
 
-    // 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"
+          localFormattingTokens.lastIndex = 0;
+          while (i >= 0 && localFormattingTokens.test(format)) {
+              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
+              localFormattingTokens.lastIndex = 0;
+              i -= 1;
           }
-        },{},{},this.constants);
-    this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
-  };
 
+          return format;
+      }
 
-  /**
-   * 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];
-  };
 
+      /************************************
+          Parsing
+      ************************************/
 
-  /**
-   * 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];
-  };
 
+      // 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 getLangDefinition(config._l)._meridiemParse;
+          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 parseTokenOrdinal;
+          default :
+              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
+              return a;
+          }
+      }
 
-  /**
-   * 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 timezoneMinutesFromString(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]);
 
-    // we have moved the sector data into the frozen set, we now remove it from the active set
-    this._deleteActiveSector(sectorId);
-  };
+          return parts[0] === '+' ? -minutes : minutes;
+      }
 
+      // function to convert string input to date
+      function addTimeToArrayFromToken(token, input, config) {
+          var a, datePartArray = config._a;
 
-  /**
-   * 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];
+          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 = getLangDefinition(config._l).monthsParse(input);
+              // 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, 10));
+              }
+              break;
+          // DAY OF YEAR
+          case 'DDD' : // fall through to DDDD
+          case 'DDDD' :
+              if (input != null) {
+                  config._dayOfYear = toInt(input);
+              }
 
-    // we have moved the sector data into the active set, we now remove it from the frozen stack
-    this._deleteFrozenSector(sectorId);
-  };
+              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._isPm = getLangDefinition(config._l).isPM(input);
+              break;
+          // 24 HOUR
+          case 'H' : // fall through to hh
+          case 'HH' : // fall through to hh
+          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 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 = timezoneMinutesFromString(input);
+              break;
+          // WEEKDAY - human
+          case 'dd':
+          case 'ddd':
+          case 'dddd':
+              a = getLangDefinition(config._l).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);
+          }
+      }
 
+      function dayOfYearFromWeekInfo(config) {
+          var w, weekYear, week, weekday, dow, doy, temp, lang;
 
-  /**
-   * 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];
-      }
-    }
+          w = config._w;
+          if (w.GG != null || w.W != null || w.E != null) {
+              dow = 1;
+              doy = 4;
 
-    // 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];
-      }
-    }
+              // 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 {
+              lang = getLangDefinition(config._l);
+              dow = lang._week.dow;
+              doy = lang._week.doy;
 
-    // merge the nodeIndices
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
-    }
-  };
+              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
+              week = dfl(w.w, 1);
 
+              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);
 
-  /**
-   * 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);
-  };
+          config._a[YEAR] = temp.year;
+          config._dayOfYear = temp.dayOfYear;
+      }
 
+      // 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;
 
-  /**
-   * 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();
+          if (config._d) {
+              return;
+          }
 
-  //    // 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!!");
-  //    }
+          currentDate = currentDateArray(config);
 
-    // 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];
+          //compute day of the year from weeks and weekdays
+          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
+              dayOfYearFromWeekInfo(config);
+          }
 
-    var unqiueIdentifier = util.randomUUID();
+          //if the day of the year is set, figure out what it is
+          if (config._dayOfYear) {
+              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
 
-    // we fully freeze the currently active sector
-    this._freezeSector(sector);
+              if (config._dayOfYear > daysInYear(yearToUse)) {
+                  config._pf._overflowDayOfYear = true;
+              }
 
-    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
-    this._createNewSector(unqiueIdentifier);
+              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
+              config._a[MONTH] = date.getUTCMonth();
+              config._a[DATE] = date.getUTCDate();
+          }
 
-    // we add the active sector to the sectors array to be able to revert these steps later on
-    this._setActiveSector(unqiueIdentifier);
+          // 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 redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
-    this._switchToSector(this._sector());
+          // 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];
+          }
 
-    // finally we add the node we removed from our previous active sector to the new active sector
-    this.nodes[node.id] = node;
-  };
+          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
+          // Apply timezone offset from input. The actual zone can be changed
+          // with parseZone.
+          if (config._tzm != null) {
+              config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
+          }
+      }
 
+      function dateFromObject(config) {
+          var normalizedInput;
 
-  /**
-   * 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();
+          if (config._d) {
+              return;
+          }
 
-    // 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();
+          normalizedInput = normalizeObjectUnits(config._i);
+          config._a = [
+              normalizedInput.year,
+              normalizedInput.month,
+              normalizedInput.day,
+              normalizedInput.hour,
+              normalizedInput.minute,
+              normalizedInput.second,
+              normalizedInput.millisecond
+          ];
 
-        // we collapse the sector back to a single cluster
-        this._collapseThisToSingleCluster();
+          dateFromConfig(config);
+      }
 
-        // we move the remaining nodes, edges and nodeIndices to the previous sector.
-        // This previous sector is the one we will reactivate
-        this._mergeThisWithFrozen(previousSector);
+      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()];
+          }
+      }
 
-        // 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);
+      // date from string and format string
+      function makeDateFromStringAndFormat(config) {
 
-        // we activate the previously active (and currently frozen) sector.
-        this._activateSector(previousSector);
+          if (config._f === moment.ISO_8601) {
+              parseISO(config);
+              return;
+          }
 
-        // we load the references from the newly active sector into the global references
-        this._switchToSector(previousSector);
+          config._a = [];
+          config._pf.empty = true;
 
-        // we forget the previously active sector because we reverted to the one before
-        this._forgetLastSector();
+          // This array is used to make a Date, either with `new Date` or `Date.UTC`
+          var lang = getLangDefinition(config._l),
+              string = '' + config._i,
+              i, parsedInput, tokens, token, skipped,
+              stringLength = string.length,
+              totalParsedInputLength = 0;
 
-        // finally, we update the node index list.
-        this._updateNodeIndexList();
+          tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
 
-        // we refresh the list with calulation nodes and calculation node indices.
-        this._updateCalculationNodes();
-      }
-    }
-  };
+          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);
+          }
 
-  /**
-   * 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) {
-    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);
-          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) {
-            this[runFunction](args[0],args[1]);
+          // handle am pm
+          if (config._isPm && config._a[HOUR] < 12) {
+              config._a[HOUR] += 12;
           }
-          else {
-            this[runFunction](argument);
+          // if is 12 am, change hours to 0
+          if (config._isPm === false && config._a[HOUR] === 12) {
+              config._a[HOUR] = 0;
           }
-        }
-      }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-  };
-
 
-  /**
-   * 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) {
-    if (argument === undefined) {
-      this._switchToSupportSector();
-      this[runFunction]();
-    }
-    else {
-      this._switchToSupportSector();
-      var args = Array.prototype.splice.call(arguments, 1);
-      if (args.length > 1) {
-        this[runFunction](args[0],args[1]);
-      }
-      else {
-        this[runFunction](argument);
+          dateFromConfig(config);
+          checkOverflow(config);
       }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-  };
 
-
-  /**
-   * 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]();
-        }
+      function unescapeFormat(s) {
+          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
+              return p1 || p2 || p3 || p4;
+          });
       }
-    }
-    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);
-          }
-        }
+
+      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
+      function regexpEscape(s) {
+          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
       }
-    }
-    this._loadLatestSector();
-  };
 
+      // date from string and array of format strings
+      function makeDateFromStringAndArray(config) {
+          var tempConfig,
+              bestMoment,
 
-  /**
-   * 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);
-      }
-    }
-  };
+              scoreToBeat,
+              i,
+              currentScore;
 
+          if (config._f.length === 0) {
+              config._pf.invalidFormat = true;
+              config._d = new Date(NaN);
+              return;
+          }
 
-  /**
-   * 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"];
-  };
+          for (i = 0; i < config._f.length; i++) {
+              currentScore = 0;
+              tempConfig = extend({}, config);
+              tempConfig._pf = defaultParsingFlags();
+              tempConfig._f = config._f[i];
+              makeDateFromStringAndFormat(tempConfig);
 
+              if (!isValid(tempConfig)) {
+                  continue;
+              }
 
-  /**
-   * 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 there is any input that was not parsed add a penalty for that format
+              currentScore += tempConfig._pf.charsLeftOver;
 
-          this._switchToSector(sector,sectorType);
+              //or tokens
+              currentScore += tempConfig._pf.unusedTokens.length * 10;
 
-          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.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
-          node.setScale(this.scale);
-          node._drawCircle(ctx);
-        }
-      }
-    }
-  };
+              tempConfig._pf.score = currentScore;
 
-  exports._drawAllSectorNodes = function(ctx) {
-    this._drawSectorNodes(ctx,"frozen");
-    this._drawSectorNodes(ctx,"active");
-    this._loadLatestSector();
-  };
+              if (scoreToBeat == null || currentScore < scoreToBeat) {
+                  scoreToBeat = currentScore;
+                  bestMoment = tempConfig;
+              }
+          }
 
+          extend(config, bestMoment || tempConfig);
+      }
 
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
+      // date from iso format
+      function parseISO(config) {
+          var i, l,
+              string = config._i,
+              match = isoRegex.exec(string);
 
-  var Node = __webpack_require__(42);
+          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;
+          }
+      }
 
-  /**
-   * 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);
-        }
+      // date from iso format or fallback
+      function makeDateFromString(config) {
+          parseISO(config);
+          if (config._isValid === false) {
+              delete config._isValid;
+              moment.createFromInputFallback(config);
+          }
       }
-    }
-  };
 
-  /**
-   * 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;
-  };
+      function makeDateFromInput(config) {
+          var input = config._i,
+              matched = aspNetJsonRegex.exec(input);
 
+          if (input === undefined) {
+              config._d = new Date();
+          } else if (matched) {
+              config._d = new Date(+matched[1]);
+          } else if (typeof input === 'string') {
+              makeDateFromString(config);
+          } else if (isArray(input)) {
+              config._a = input.slice(0);
+              dateFromConfig(config);
+          } else if (isDate(input)) {
+              config._d = new Date(+input);
+          } else if (typeof(input) === 'object') {
+              dateFromObject(config);
+          } else if (typeof(input) === 'number') {
+              // from milliseconds
+              config._d = new Date(input);
+          } else {
+              moment.createFromInputFallback(config);
+          }
+      }
 
-  /**
-   * 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);
+      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);
 
-    return {
-      left:   x,
-      top:    y,
-      right:  x,
-      bottom: y
-    };
-  };
+          //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;
+      }
 
-  /**
-   * 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);
+      function parseWeekday(input, language) {
+          if (typeof input === 'string') {
+              if (!isNaN(input)) {
+                  input = parseInt(input, 10);
+              }
+              else {
+                  input = language.weekdaysParse(input);
+                  if (typeof input !== 'number') {
+                      return null;
+                  }
+              }
+          }
+          return input;
+      }
 
-    // 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;
-    }
-  };
+      /************************************
+          Relative Time
+      ************************************/
 
 
-  /**
-   * 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);
-        }
+      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
+      function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
+          return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
       }
-    }
-  };
-
 
-  /**
-   * 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;
-  };
+      function relativeTime(milliseconds, withoutSuffix, lang) {
+          var seconds = round(Math.abs(milliseconds) / 1000),
+              minutes = round(seconds / 60),
+              hours = round(minutes / 60),
+              days = round(hours / 24),
+              years = round(days / 365),
+              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.dd && ['dd', days] ||
+                  days <= relativeTimeThresholds.dm && ['M'] ||
+                  days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
+                  years === 1 && ['y'] || ['yy', years];
+          args[2] = withoutSuffix;
+          args[3] = milliseconds > 0;
+          args[4] = lang;
+          return substituteTimeAgo.apply({}, args);
+      }
 
-  /**
-   * 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 (overlappingEdges.length > 0) {
-      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
-    }
-    else {
-      return null;
-    }
-  };
+      /************************************
+          Week of Year
+      ************************************/
 
 
-  /**
-   * 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;
-    }
-  };
+      // 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;
 
-  /**
-   * 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;
-    }
-  };
 
+          if (daysToDayOfWeek > end) {
+              daysToDayOfWeek -= 7;
+          }
 
-  /**
-   * 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];
-    }
-  };
+          if (daysToDayOfWeek < end - 7) {
+              daysToDayOfWeek += 7;
+          }
 
-  /**
-   * 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();
+          adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
+          return {
+              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
+              year: adjustedMoment.year()
+          };
       }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        this.selectionObj.edges[edgeId].unselect();
+
+      //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
+          };
       }
-    }
 
-    this.selectionObj = {nodes:{},edges:{}};
+      /************************************
+          Top Level Functions
+      ************************************/
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+      function makeMoment(config) {
+          var input = config._i,
+              format = config._f;
 
-  /**
-   * Unselect all clusters. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectClusters = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
+          if (input === null || (format === undefined && input === '')) {
+              return moment.invalid({nullInput: true});
+          }
 
-    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]);
-        }
-      }
-    }
+          if (typeof input === 'string') {
+              config._i = input = getLangDefinition().preparse(input);
+          }
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+          if (moment.isMoment(input)) {
+              config = cloneMoment(input);
 
+              config._d = new Date(+input._d);
+          } else if (format) {
+              if (isArray(format)) {
+                  makeDateFromStringAndArray(config);
+              } else {
+                  makeDateFromStringAndFormat(config);
+              }
+          } else {
+              makeDateFromInput(config);
+          }
 
-  /**
-   * 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 new Moment(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];
-      }
-    }
-    return null;
-  };
+      moment = function (input, format, lang, strict) {
+          var c;
 
-  /**
-   * 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;
-  };
+          if (typeof(lang) === "boolean") {
+              strict = lang;
+              lang = 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 = lang;
+          c._strict = strict;
+          c._isUTC = false;
+          c._pf = defaultParsingFlags();
 
+          return makeMoment(c);
+      };
 
-  /**
-   * 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;
-  };
+      moment.suppressDeprecationWarnings = false;
 
+      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);
+      });
 
-  /**
-   * 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;
+      // 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;
       }
-    }
-    return count;
-  };
 
-  /**
-   * 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;
-  };
+      moment.min = function () {
+          var args = [].slice.call(arguments, 0);
 
+          return pickBy('isBefore', args);
+      };
 
-  /**
-   * 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;
-  };
+      moment.max = function () {
+          var args = [].slice.call(arguments, 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 pickBy('isAfter', args);
+      };
 
-  /**
-   * 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);
-    }
-  };
+      // creating with utc
+      moment.utc = function (input, format, lang, strict) {
+          var c;
 
+          if (typeof(lang) === "boolean") {
+              strict = lang;
+              lang = 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 = lang;
+          c._i = input;
+          c._f = format;
+          c._strict = strict;
+          c._pf = defaultParsingFlags();
 
-  /**
-   * 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);
-    }
-  };
+          return makeMoment(c).utc();
+      };
+
+      // 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;
 
+          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])
+              };
+          }
 
+          ret = new Duration(duration);
 
-  /**
-   * 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) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    if (highlightEdges === undefined) {
-      highlightEdges = true;
-    }
+          if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
+              ret._lang = input._lang;
+          }
 
-    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
-      this._unselectAll(true);
-    }
+          return ret;
+      };
 
-    if (object.selected == false) {
-      object.select();
-      this._addToSelection(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
-        this._selectConnectedEdges(object);
-      }
-    }
-    else {
-      object.unselect();
-      this._removeFromSelection(object);
-    }
+      // version number
+      moment.version = VERSION;
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+      // default format
+      moment.defaultFormat = isoFormat;
 
+      // constant that refers to the ISO standard
+      moment.ISO_8601 = function () {};
 
-  /**
-   * 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});
-    }
-  };
+      // Plugins that add properties should also add the key here (null value),
+      // so we can properly clone ourselves.
+      moment.momentProperties = momentProperties;
 
-  /**
-   * 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);
-    }
-  };
+      // 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 () {};
+
+      // This function allows you to set a threshold for relative time strings
+      moment.relativeTimeThreshold = function(threshold, limit) {
+        if (relativeTimeThresholds[threshold] === undefined) {
+          return false;
+        }
+        relativeTimeThresholds[threshold] = limit;
+        return true;
+      };
 
+      // This function will load languages and then set the global language.  If
+      // no arguments are passed in, it will simply return the current global
+      // language key.
+      moment.lang = function (key, values) {
+          var r;
+          if (!key) {
+              return moment.fn._lang._abbr;
+          }
+          if (values) {
+              loadLang(normalizeLanguage(key), values);
+          } else if (values === null) {
+              unloadLang(key);
+              key = 'en';
+          } else if (!languages[key]) {
+              getLangDefinition(key);
+          }
+          r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
+          return r._abbr;
+      };
 
-  /**
-   * 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) {
-  };
+      // returns language data
+      moment.langData = function (key) {
+          if (key && key._lang && key._lang._abbr) {
+              key = key._lang._abbr;
+          }
+          return getLangDefinition(key);
+      };
 
+      // compare moment object
+      moment.isMoment = function (obj) {
+          return obj instanceof Moment ||
+              (obj != null &&  obj.hasOwnProperty('_isAMomentObject'));
+      };
 
-  /**
-   * 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();
+      // for typechecking Duration objects
+      moment.isDuration = function (obj) {
+          return obj instanceof Duration;
+      };
+
+      for (i = lists.length - 1; i >= 0; --i) {
+          makeList(lists[i]);
       }
-    }
-    this.emit("click", this.getSelection());
-    this._redraw();
-  };
 
+      moment.normalizeUnits = function (units) {
+          return normalizeUnits(units);
+      };
 
-  /**
-   * 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);
-    }
-    this.emit("doubleClick", this.getSelection());
-  };
+      moment.invalid = function (flags) {
+          var m = moment.utc(NaN);
+          if (flags != null) {
+              extend(m._pf, flags);
+          }
+          else {
+              m._pf.userInvalidated = true;
+          }
 
+          return m;
+      };
 
-  /**
-   * 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();
-  };
+      moment.parseZone = function () {
+          return moment.apply(null, arguments).parseZone();
+      };
 
+      moment.parseTwoDigitYear = function (input) {
+          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+      };
 
-  /**
-   * handle the onRelease event. These functions are here for the navigation controls module.
-   *
-    * @private
-   */
-  exports._handleOnRelease = function(pointer) {
+      /************************************
+          Moment Prototype
+      ************************************/
 
-  };
 
+      extend(moment.fn = Moment.prototype, {
 
+          clone : function () {
+              return moment(this);
+          },
 
-  /**
-   *
-   * 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};
-  };
+          valueOf : function () {
+              return +this._d + ((this._offset || 0) * 60000);
+          },
 
-  /**
-   *
-   * retrieve the currently selected nodes
-   * @return {String[]} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedNodes = function() {
-    var idArray = [];
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        idArray.push(nodeId);
-      }
-    }
-    return idArray
-  };
+          unix : function () {
+              return Math.floor(+this / 1000);
+          },
 
-  /**
-   *
-   * retrieve the currently selected edges
-   * @return {Array} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedEdges = function() {
-    var idArray = [];
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        idArray.push(edgeId);
-      }
-    }
-    return idArray;
-  };
+          toString : function () {
+              return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
+          },
 
+          toDate : function () {
+              return this._offset ? new Date(+this) : this._d;
+          },
 
-  /**
-   * select zero or more nodes
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.setSelection = function(selection) {
-    var i, iMax, id;
+          toISOString : function () {
+              var m = moment(this).utc();
+              if (0 < m.year() && m.year() <= 9999) {
+                  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]');
+              }
+          },
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+          toArray : function () {
+              var m = this;
+              return [
+                  m.year(),
+                  m.month(),
+                  m.date(),
+                  m.hours(),
+                  m.minutes(),
+                  m.seconds(),
+                  m.milliseconds()
+              ];
+          },
 
-    // first unselect any selected node
-    this._unselectAll(true);
+          isValid : function () {
+              return isValid(this);
+          },
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+          isDSTShifted : function () {
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true);
-    }
+              if (this._a) {
+                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
+              }
 
-    console.log("setSelection is deprecated. Please use selectNodes instead.")
+              return false;
+          },
 
-    this.redraw();
-  };
+          parsingFlags : function () {
+              return extend({}, this._pf);
+          },
 
+          invalidAt: function () {
+              return this._pf.overflow;
+          },
 
-  /**
-   * 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;
+          utc : function () {
+              return this.zone(0);
+          },
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+          local : function () {
+              this.zone(0);
+              this._isUTC = false;
+              return this;
+          },
 
-    // first unselect any selected node
-    this._unselectAll(true);
+          format : function (inputString) {
+              var output = formatMoment(this, inputString || moment.defaultFormat);
+              return this.lang().postformat(output);
+          },
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+          add : function (input, val) {
+              var dur;
+              // switch args to support add('s', 1) and add(1, 's')
+              if (typeof input === 'string' && typeof val === 'string') {
+                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
+              } else if (typeof input === 'string') {
+                  dur = moment.duration(+val, input);
+              } else {
+                  dur = moment.duration(input, val);
+              }
+              addOrSubtractDurationFromMoment(this, dur, 1);
+              return this;
+          },
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
+          subtract : function (input, val) {
+              var dur;
+              // switch args to support subtract('s', 1) and subtract(1, 's')
+              if (typeof input === 'string' && typeof val === 'string') {
+                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
+              } else if (typeof input === 'string') {
+                  dur = moment.duration(+val, input);
+              } else {
+                  dur = moment.duration(input, val);
+              }
+              addOrSubtractDurationFromMoment(this, dur, -1);
+              return this;
+          },
 
+          diff : function (input, units, asFloat) {
+              var that = makeAs(input, this),
+                  zoneDiff = (this.zone() - that.zone()) * 6e4,
+                  diff, output;
 
-  /**
-   * 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;
+              units = normalizeUnits(units);
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+              if (units === 'year' || units === 'month') {
+                  // average number of days in the months in the given dates
+                  diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
+                  // difference in months
+                  output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
+                  // adjust by taking difference in days, average number of days
+                  // and dst in the given months.
+                  output += ((this - moment(this).startOf('month')) -
+                          (that - moment(that).startOf('month'))) / diff;
+                  // same as above but with zones, to negate all dst
+                  output -= ((this.zone() - moment(this).startOf('month').zone()) -
+                          (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
+                  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);
+          },
 
-    // first unselect any selected node
-    this._unselectAll(true);
+          from : function (time, withoutSuffix) {
+              return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
+          },
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+          fromNow : function (withoutSuffix) {
+              return this.from(moment(), withoutSuffix);
+          },
 
-      var edge = this.edges[id];
-      if (!edge) {
-        throw new RangeError('Edge with id "' + id + '" not found');
-      }
-      this._selectObject(edge,true,true,highlightEdges);
-    }
-    this.redraw();
-  };
+          calendar : function (time) {
+              // We want to compare the start of today, vs this.
+              // Getting start-of-today depends on whether we're zone'd 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.lang().calendar(format, this));
+          },
 
-  /**
-   * 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];
-        }
-      }
-    }
-  };
+          isLeapYear : function () {
+              return isLeapYear(this.year());
+          },
 
+          isDST : function () {
+              return (this.zone() < this.clone().month(0).zone() ||
+                  this.zone() < this.clone().month(5).zone());
+          },
 
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
+          day : function (input) {
+              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
+              if (input != null) {
+                  input = parseWeekday(input, this.lang());
+                  return this.add({ d : input - day });
+              } else {
+                  return day;
+              }
+          },
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(42);
-  var Edge = __webpack_require__(43);
+          month : makeAccessor('Month', true),
 
-  /**
-   * clears the toolbar div element of children
-   *
-   * @private
-   */
-  exports._clearManipulatorBar = function() {
-    while (this.manipulationDiv.hasChildNodes()) {
-      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-    }
-  };
+          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 */
+              }
 
-  /**
-   * 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];
-      }
-    }
-  };
+              // weeks are a special case
+              if (units === 'week') {
+                  this.weekday(0);
+              } else if (units === 'isoWeek') {
+                  this.isoWeekday(1);
+              }
+
+              // quarters are also special
+              if (units === 'quarter') {
+                  this.month(Math.floor(this.month() / 3) * 3);
+              }
 
-  /**
-   * Enable or disable edit-mode.
-   *
-   * @private
-   */
-  exports._toggleEditMode = function() {
-    this.editMode = !this.editMode;
-    var toolbar = document.getElementById("network-manipulationDiv");
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("network-manipulation-editMode");
-    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()
-  };
+              return this;
+          },
 
-  /**
-   * 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);
-    }
+          endOf: function (units) {
+              units = normalizeUnits(units);
+              return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
+          },
 
-    if (this.edgeBeingEdited !== undefined) {
-      this.edgeBeingEdited._disableControlNodes();
-      this.edgeBeingEdited = undefined;
-      this.selectedControlNode = null;
-      this.controlNodesActive = false;
-    }
+          isAfter: function (input, units) {
+              units = typeof units !== 'undefined' ? units : 'millisecond';
+              return +this.clone().startOf(units) > +moment(input).startOf(units);
+          },
 
-    // restore overloaded functions
-    this._restoreOverloadedFunctions();
+          isBefore: function (input, units) {
+              units = typeof units !== 'undefined' ? units : 'millisecond';
+              return +this.clone().startOf(units) < +moment(input).startOf(units);
+          },
 
-    // resume calculation
-    this.freezeSimulation = false;
+          isSame: function (input, units) {
+              units = units || 'ms';
+              return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
+          },
 
-    // reset global variables
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+          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;
+                   }
+           ),
 
-    if (this.editMode == true) {
-      while (this.manipulationDiv.hasChildNodes()) {
-        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-      }
-      // add the icons to the manipulator div
-      this.manipulationDiv.innerHTML = "" +
-        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
-      }
+          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;
+                  }
+          ),
 
+          // keepTime = true means only change the timezone, without affecting
+          // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
+          // It is possible that 5:31:26 doesn't exist int zone +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.
+          zone : function (input, keepTime) {
+              var offset = this._offset || 0;
+              if (input != null) {
+                  if (typeof input === "string") {
+                      input = timezoneMinutesFromString(input);
+                  }
+                  if (Math.abs(input) < 16) {
+                      input = input * 60;
+                  }
+                  this._offset = input;
+                  this._isUTC = true;
+                  if (offset !== input) {
+                      if (!keepTime || this._changeInProgress) {
+                          addOrSubtractDurationFromMoment(this,
+                                  moment.duration(offset - input, 'm'), 1, false);
+                      } else if (!this._changeInProgress) {
+                          this._changeInProgress = true;
+                          moment.updateOffset(this, true);
+                          this._changeInProgress = null;
+                      }
+                  }
+              } else {
+                  return this._isUTC ? offset : this._d.getTimezoneOffset();
+              }
+              return this;
+          },
 
-      // bind the icons
-      var addNodeButton = document.getElementById("network-manipulate-addNode");
-      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("network-manipulate-editNode");
-        editButton.onclick = this._editNode.bind(this);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("network-manipulate-editEdge");
-        editButton.onclick = this._createEditEdgeToolbar.bind(this);
-      }
-      if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("network-manipulate-delete");
-        deleteButton.onclick = this._deleteSelected.bind(this);
-      }
-      var closeDiv = document.getElementById("network-manipulation-closeDiv");
-      closeDiv.onclick = this._toggleEditMode.bind(this);
+          zoneAbbr : function () {
+              return this._isUTC ? "UTC" : "";
+          },
 
-      this.boundFunction = this._createManipulatorBar.bind(this);
-      this.on('select', this.boundFunction);
-    }
-    else {
-      this.editModeDiv.innerHTML = "" +
-        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("network-manipulate-editModeButton");
-      editModeButton.onclick = this._toggleEditMode.bind(this);
-    }
-  };
+          zoneName : function () {
+              return this._isUTC ? "Coordinated Universal Time" : "";
+          },
 
+          parseZone : function () {
+              if (this._tzm) {
+                  this.zone(this._tzm);
+              } else if (typeof this._i === 'string') {
+                  this.zone(this._i);
+              }
+              return this;
+          },
 
+          hasAlignedHourOffset : function (input) {
+              if (!input) {
+                  input = 0;
+              }
+              else {
+                  input = moment(input).zone();
+              }
 
-  /**
-   * Create the toolbar for adding Nodes
-   *
-   * @private
-   */
-  exports._createAddNodeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+              return (this.zone() - input) % 60 === 0;
+          },
 
-    // create the toolbar contents
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
+          daysInMonth : function () {
+              return daysInMonth(this.year(), this.month());
+          },
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+          dayOfYear : function (input) {
+              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
+              return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
+          },
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._addNode.bind(this);
-    this.on('select', this.boundFunction);
-  };
+          quarter : function (input) {
+              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
+          },
 
+          weekYear : function (input) {
+              var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
+              return input == null ? year : this.add("y", (input - year));
+          },
 
-  /**
-   * create the toolbar to connect nodes
-   *
-   * @private
-   */
-  exports._createAddEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this._unselectAll(true);
-    this.freezeSimulation = true;
+          isoWeekYear : function (input) {
+              var year = weekOfYear(this, 1, 4).year;
+              return input == null ? year : this.add("y", (input - year));
+          },
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+          week : function (input) {
+              var week = this.lang().week(this);
+              return input == null ? week : this.add("d", (input - week) * 7);
+          },
 
-    this._unselectAll();
-    this.forceAppendSelection = false;
-    this.blockConnectingEdgeSelection = true;
+          isoWeek : function (input) {
+              var week = weekOfYear(this, 1, 4).week;
+              return input == null ? week : this.add("d", (input - week) * 7);
+          },
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
+          weekday : function (input) {
+              var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
+              return input == null ? weekday : this.add("d", input - weekday);
+          },
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+          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);
+          },
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._handleConnect.bind(this);
-    this.on('select', this.boundFunction);
+          isoWeeksInYear : function () {
+              return weeksInYear(this.year(), 1, 4);
+          },
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"] = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
-    this._handleTouch = this._handleConnect;
-    this._handleOnRelease = this._finishConnect;
+          weeksInYear : function () {
+              var weekInfo = this._lang._week;
+              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
+          },
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units]();
+          },
 
-  /**
-   * create the toolbar to edit edges
-   *
-   * @private
-   */
-  exports._createEditEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this.controlNodesActive = true;
+          set : function (units, value) {
+              units = normalizeUnits(units);
+              if (typeof this[units] === 'function') {
+                  this[units](value);
+              }
+              return this;
+          },
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+          // If passed a language key, it will set the language for this
+          // instance.  Otherwise, it will return the language configuration
+          // variables for this instance.
+          lang : function (key) {
+              if (key === undefined) {
+                  return this._lang;
+              } else {
+                  this._lang = getLangDefinition(key);
+                  return this;
+              }
+          }
+      });
 
-    this.edgeBeingEdited = this._getSelectedEdge();
-    this.edgeBeingEdited._enableControlNodes();
+      function rawMonthSetter(mom, value) {
+          var dayOfMonth;
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
+          // TODO: Move this out of here!
+          if (typeof value === 'string') {
+              value = mom.lang().monthsParse(value);
+              // TODO: Another silent failure?
+              if (typeof value !== 'number') {
+                  return mom;
+              }
+          }
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+          dayOfMonth = Math.min(mom.date(),
+                  daysInMonth(mom.year(), value));
+          mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
+          return mom;
+      }
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
-    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._handleOnRelease = this._releaseControlNode;
+      function rawGetter(mom, unit) {
+          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
+      }
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+      function rawSetter(mom, unit, value) {
+          if (unit === 'Month') {
+              return rawMonthSetter(mom, value);
+          } else {
+              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
+          }
+      }
 
+      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));
 
+      // 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;
 
-  /**
-   * 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();
-  };
+      /************************************
+          Duration Prototype
+      ************************************/
 
-  /**
-   * 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();
-  };
 
-  exports._releaseControlNode = function(pointer) {
-    var newNode = this._getNodeAt(pointer);
-    if (newNode != null) {
-      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
-        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
-        this.edgeBeingEdited.controlNodes.from.unselect();
-      }
-      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
-        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
-        this.edgeBeingEdited.controlNodes.to.unselect();
-      }
-    }
-    else {
-      this.edgeBeingEdited._restoreControlNodes();
-    }
-    this.freezeSimulation = false;
-    this._redraw();
-  };
+      extend(moment.duration.fn = Duration.prototype, {
 
-  /**
-   * 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("Cannot create edges to a cluster.")
-        }
-        else {
-          this._selectObject(node,false);
-          // create a node the temporary line can look at
-          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetNode'].x = node.x;
-          this.sectors['support']['nodes']['targetNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
-          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
+          _bubble : function () {
+              var milliseconds = this._milliseconds,
+                  days = this._days,
+                  months = this._months,
+                  data = this._data,
+                  seconds, minutes, hours, years;
+
+              // The following code bubbles up values, see the tests for
+              // examples of what that means.
+              data.milliseconds = milliseconds % 1000;
+
+              seconds = absRound(milliseconds / 1000);
+              data.seconds = seconds % 60;
+
+              minutes = absRound(seconds / 60);
+              data.minutes = minutes % 60;
 
-          // create a temporary edge
-          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
-          this.edges['connectionEdge'].from = node;
-          this.edges['connectionEdge'].connected = true;
-          this.edges['connectionEdge'].smooth = true;
-          this.edges['connectionEdge'].selected = true;
-          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
-          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
+              hours = absRound(minutes / 60);
+              data.hours = hours % 24;
 
-          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
-          this._handleOnDrag = function(event) {
-            var pointer = this._getPointer(event.gesture.center);
-            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-          };
+              days += absRound(hours / 24);
+              data.days = days % 30;
 
-          this.moving = true;
-          this.start();
-        }
-      }
-    }
-  };
+              months += absRound(days / 30);
+              data.months = months % 12;
 
-  exports._finishConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 1) {
+              years = absRound(months / 12);
+              data.years = years;
+          },
 
-      // restore the drag function
-      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
-      delete this.cachedFunctions["_handleOnDrag"];
+          weeks : function () {
+              return absRound(this.days() / 7);
+          },
 
-      // remember the edge id
-      var connectFromId = this.edges['connectionEdge'].fromId;
+          valueOf : function () {
+              return this._milliseconds +
+                this._days * 864e5 +
+                (this._months % 12) * 2592e6 +
+                toInt(this._months / 12) * 31536e6;
+          },
 
-      // remove the temporary nodes and edge
-      delete this.edges['connectionEdge'];
-      delete this.sectors['support']['nodes']['targetNode'];
-      delete this.sectors['support']['nodes']['targetViaNode'];
+          humanize : function (withSuffix) {
+              var difference = +this,
+                  output = relativeTime(difference, !withSuffix, this.lang());
 
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert("Cannot create edges to a cluster.")
-        }
-        else {
-          this._createEdge(connectFromId,node.id);
-          this._createManipulatorBar();
-        }
-      }
-      this._unselectAll();
-    }
-  };
+              if (withSuffix) {
+                  output = this.lang().pastFuture(difference, output);
+              }
 
+              return this.lang().postformat(output);
+          },
 
-  /**
-   * 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 {
-          alert(this.constants.labels['addError']);
-          this._createManipulatorBar();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.nodesData.add(defaultData);
-        this._createManipulatorBar();
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+          add : function (input, val) {
+              // supports only 2.0-style add(1, 's') or add(moment)
+              var dur = moment.duration(input, val);
 
+              this._milliseconds += dur._milliseconds;
+              this._days += dur._days;
+              this._months += dur._months;
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.add(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+              this._bubble();
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.update(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+              return this;
+          },
 
-  /**
-   * 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.group,
-        shape: node.shape,
-        color: {
-          background:node.color.background,
-          border:node.color.border,
-          highlight: {
-            background:node.color.highlight.background,
-            border:node.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 {
-        alert(this.constants.labels["editError"]);
-      }
-    }
-    else {
-      alert(this.constants.labels["editBoundError"]);
-    }
-  };
+          subtract : function (input, val) {
+              var dur = moment.duration(input, val);
 
+              this._milliseconds -= dur._milliseconds;
+              this._days -= dur._days;
+              this._months -= dur._months;
 
+              this._bubble();
 
+              return this;
+          },
 
-  /**
-   * 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 {
-            alert(this.constants.labels["deleteError"])
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units.toLowerCase() + 's']();
+          },
+
+          as : function (units) {
+              units = normalizeUnits(units);
+              return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
+          },
+
+          lang : moment.fn.lang,
+
+          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';
+              }
+
+              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' : '');
           }
-        }
-        else {
-          this.edgesData.remove(selectedEdges);
-          this.nodesData.remove(selectedNodes);
-          this._unselectAll();
-          this.moving = true;
-          this.start();
-        }
+      });
+
+      function makeDurationGetter(name) {
+          moment.duration.fn[name] = function () {
+              return this._data[name];
+          };
       }
-      else {
-        alert(this.constants.labels["deleteClusterError"]);
+
+      function makeDurationAsGetter(name, factor) {
+          moment.duration.fn['as' + name] = function () {
+              return +this / factor;
+          };
       }
-    }
-  };
 
+      for (i in unitMillisecondFactors) {
+          if (unitMillisecondFactors.hasOwnProperty(i)) {
+              makeDurationAsGetter(i, unitMillisecondFactors[i]);
+              makeDurationGetter(i.toLowerCase());
+          }
+      }
 
-/***/ },
-/* 54 */
-/***/ function(module, exports, __webpack_require__) {
+      makeDurationAsGetter('Weeks', 6048e5);
+      moment.duration.fn.asMonths = function () {
+          return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
+      };
 
-  exports._cleanNavigation = function() {
-    // clean up previous navigation items
-    var wrapper = document.getElementById('network-navigation_wrapper');
-    if (wrapper != null) {
-      this.containerElement.removeChild(wrapper);
-    }
-    document.onmouseup = null;
-  };
 
-  /**
-   * 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();
+      /************************************
+          Default Lang
+      ************************************/
 
-    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.navigationDivs['wrapper'].id = "network-navigation_wrapper";
-    this.navigationDivs['wrapper'].style.position = "absolute";
-    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
+      // Set default language, other languages will inherit from English.
+      moment.lang('en', {
+          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;
+          }
+      });
 
-    for (var i = 0; i < navigationDivs.length; i++) {
-      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
-      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
-      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
-    }
+      /* EMBED_LANGUAGES */
 
-    document.onmouseup = this._stopMovement.bind(this);
-  };
+      /************************************
+          Exposing Moment
+      ************************************/
 
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._stopMovement = function() {
-    this._xStopMoving();
-    this._yStopMoving();
-    this._stopZoom();
-  };
+      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;
+              }
 
-  /**
-   * stops the actions performed by page up and down etc.
-   *
-   * @param event
-   * @private
-   */
-  exports._preventDefault = function(event) {
-    if (event !== undefined) {
-      if (event.preventDefault) {
-        event.preventDefault();
+              return moment;
+          }.call(exports, __webpack_require__, exports, module)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+          makeGlobal(true);
       } else {
-        event.returnValue = false;
+          makeGlobal();
       }
-    }
-  };
+  }).call(this);
+  
+  /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(130)(module)))
 
+/***/ },
+/* 52 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * 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.
+   * Calculate the forces the nodes apply on each other based on a repulsion field.
+   * This field is linearly approximated.
    *
    * @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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className += " active";
-    }
-  };
+  exports._calculateNodeForces = function () {
+    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['down'].className += " active";
-    }
-  };
+    // approximation constants
+    var a_base = -2 / 3;
+    var b = 4 / 3;
 
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className += " active";
-    }
-  };
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
 
+        dx = node2.x - node1.x;
+        dy = node2.y - node1.y;
+        distance = Math.sqrt(dx * dx + dy * dy);
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['right'].className += " active";
+        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
+        var a = a_base / minimumDistance;
+        if (distance < 2 * minimumDistance) {
+          if (distance < 0.5 * minimumDistance) {
+            repulsingForce = 1.0;
+          }
+          else {
+            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+          }
+
+          // amplify the repulsion for clusters.
+          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
+          repulsingForce = repulsingForce / distance;
+
+          fx = dx * repulsingForce;
+          fy = dy * repulsingForce;
+
+          node1.fx -= fx;
+          node1.fy -= fy;
+          node2.fx += fx;
+          node2.fy += fy;
+        }
+      }
     }
   };
 
 
+/***/ },
+/* 53 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Zoom in, using the same method as the movement.
+   * Calculate the forces the nodes apply on eachother based on a repulsion field.
+   * This field is linearly approximated.
+   *
    * @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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className += " active";
-    }
-  };
+  exports._calculateNodeForces = function () {
+    var dx, dy, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
 
-  /**
-   * Zoom out
-   * @private
-   */
-  exports._zoomOut = function() {
-    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomOut'].className += " active";
-    }
-  };
+    // approximation constants
+    var b = 5;
+    var a_base = 0.5 * -b;
 
 
-  /**
-   * Stop zooming and unhighlight the zoom controls
-   * @private
-   */
-  exports._stopZoom = function() {
-    this.zoomIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
-      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
-    }
-  };
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
+    var a = a_base / minimumDistance;
 
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
 
-  /**
-   * Stop moving in the Y direction and unHighlight the up and down
-   * @private
-   */
-  exports._yStopMoving = function() {
-    this.yIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
-      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
-    }
-  };
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        if (node1.level == node2.level) {
 
+          dx = node2.x - node1.x;
+          dy = node2.y - node1.y;
+          distance = Math.sqrt(dx * dx + dy * dy);
 
-  /**
-   * Stop moving in the X direction and unHighlight left and right.
-   * @private
-   */
-  exports._xStopMoving = function() {
-    this.xIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
-      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
-    }
-  };
 
+          if (distance < 2 * minimumDistance) {
+            repulsingForce = a * distance + b;
+            var c = 0.05;
+            var d = 2 * minimumDistance * 2 * c;
+            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
 
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
+            // normalize force with
+            if (distance == 0) {
+              distance = 0.01;
+            }
+            else {
+              repulsingForce = repulsingForce / distance;
+            }
+            fx = dx * repulsingForce;
+            fy = dy * repulsingForce;
 
-  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;
+            node1.fx -= fx;
+            node1.fy -= fy;
+            node2.fx += fx;
+            node2.fy += fy;
+          }
         }
       }
     }
   };
 
+
   /**
-   * This is the main function to layout the nodes in a hierarchical way.
-   * It checks if the node details are supplied correctly
+   * this function calculates the effects of the springs in the case of unsmooth curves.
    *
    * @private
    */
-  exports._setupHierarchicalLayout = function() {
-    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
-        this.constants.hierarchicalLayout.levelSeparation *= -1;
-      }
-      else {
-        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
-      }
+  exports._calculateHierarchicalSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    var edges = this.edges;
 
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
-        }
-      }
-      // 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;
+    // 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.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-      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;
-          }
-        }
-      }
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
-      // if the user defined some levels but not all, alert and run without hierarchical layout
-      if (undefinedLevel == true && definedLevel == true) {
-        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-        this.zoomExtent(true,this.constants.clustering.enabled);
-        if (!this.constants.clustering.enabled) {
-          this.start();
-        }
-      }
-      else {
-        // setup the system to use hierarchical method.
-        this._changeConstants();
+            if (distance == 0) {
+              distance = 0.01;
+            }
 
-        // define levels if undefined by the users. Based on hubsize
-        if (undefinedLevel == true) {
-          this._determineLevels(hubsize);
-        }
-        // check the distribution of the nodes per level.
-        var distribution = this._getDistribution();
+            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
 
-        // place the nodes on the canvas. This also stablilizes the system.
-        this._placeNodesByHierarchy(distribution);
+            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-        // start the simulation.
-        this.start();
+            fx = dx * springForce;
+            fy = dy * springForce;
+
+            edge.to.fx -= fx;
+            edge.to.fy -= fy;
+            edge.from.fx += fx;
+            edge.from.fy += fy;
+
+
+            var factor = 5;
+            if (distance > edgeLength) {
+              factor = 25;
+            }
+
+            if (edge.from.level > edge.to.level) {
+              edge.to.fx -= factor*fx;
+              edge.to.fy -= factor*fy;
+            }
+            else if (edge.from.level < edge.to.level) {
+              edge.from.fx += factor*fx;
+              edge.from.fy += factor*fy;
+            }
+          }
+        }
       }
     }
   };
 
+/***/ },
+/* 54 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This function places the nodes on the canvas based on the hierarchial distribution.
+   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+   * The Barnes Hut method is used to speed up this N-body simulation.
    *
-   * @param {Object} distribution | obtained by the function this._getDistribution()
    * @private
    */
-  exports._placeNodesByHierarchy = function(distribution) {
-    var nodeId, node;
+  exports._calculateNodeForces = function() {
+    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
+      var node;
+      var nodes = this.calculationNodes;
+      var nodeIndices = this.calculationNodeIndices;
+      var nodeCount = nodeIndices.length;
 
-    // start placing all the level 0 nodes first. Then recursively position their branches.
-    for (nodeId in distribution[0].nodes) {
-      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
-        node = distribution[0].nodes[nodeId];
-        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-          if (node.xFixed) {
-            node.x = distribution[0].minPos;
-            node.xFixed = false;
+      this._formBarnesHutTree(nodes,nodeIndices);
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        else {
-          if (node.yFixed) {
-            node.y = distribution[0].minPos;
-            node.yFixed = false;
+      var barnesHutTree = this.barnesHutTree;
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
+      // place the nodes one by one recursively
+      for (var i = 0; i < nodeCount; i++) {
+        node = nodes[nodeIndices[i]];
+        // starting with root is irrelevant, it never passes the BarnesHut condition
+        this._getForceContribution(barnesHutTree.root.children.NW,node);
+        this._getForceContribution(barnesHutTree.root.children.NE,node);
+        this._getForceContribution(barnesHutTree.root.children.SW,node);
+        this._getForceContribution(barnesHutTree.root.children.SE,node);
       }
     }
-
-    // stabilize the system after positioning. This function calls zoomExtent.
-    this._stabilize();
   };
 
 
   /**
-   * This function get the distribution of levels based on hubsize
+   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+   * If a region contains a single node, we check if it is not itself, then we apply the force.
    *
-   * @returns {Object}
+   * @param parentBranch
+   * @param node
    * @private
    */
-  exports._getDistribution = function() {
-    var distribution = {};
-    var nodeId, node, level;
+  exports._getForceContribution = function(parentBranch,node) {
+    // we get no force contribution from an empty region
+    if (parentBranch.childrenCount > 0) {
+      var dx,dy,distance;
 
-    // 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.hasOwnProperty(node.level)) {
-          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
-        }
-        distribution[node.level].amount += 1;
-        distribution[node.level].nodes[node.id] = node;
-      }
-    }
+      // get the distance from the center of mass to the node.
+      dx = parentBranch.centerOfMass.x - node.x;
+      dy = parentBranch.centerOfMass.y - node.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
 
-    // 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;
+      // BarnesHut condition
+      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
+      // calcSize = 1/s --> d * 1/s > 1/theta = passed
+      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
+        // duplicate code to reduce function calls to speed up program
+        if (distance == 0) {
+          distance = 0.1*Math.random();
+          dx = distance;
         }
+        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+        var fx = dx * gravityForce;
+        var fy = dy * gravityForce;
+        node.fx += fx;
+        node.fy += fy;
       }
-    }
-
-    // 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);
+      else {
+        // Did not pass the condition, go into children if available
+        if (parentBranch.childrenCount == 4) {
+          this._getForceContribution(parentBranch.children.NW,node);
+          this._getForceContribution(parentBranch.children.NE,node);
+          this._getForceContribution(parentBranch.children.SW,node);
+          this._getForceContribution(parentBranch.children.SE,node);
+        }
+        else { // parentBranch must have only one node, if it was empty we wouldnt be here
+          if (parentBranch.children.data.id != node.id) { // if it is not self
+            // duplicate code to reduce function calls to speed up program
+            if (distance == 0) {
+              distance = 0.5*Math.random();
+              dx = distance;
+            }
+            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+            var fx = dx * gravityForce;
+            var fy = dy * gravityForce;
+            node.fx += fx;
+            node.fy += fy;
+          }
+        }
       }
     }
-
-    return distribution;
   };
 
-
   /**
-   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
    *
-   * @param hubsize
+   * @param nodes
+   * @param nodeIndices
    * @private
    */
-  exports._determineLevels = function(hubsize) {
-    var nodeId, node;
+  exports._formBarnesHutTree = function(nodes,nodeIndices) {
+    var node;
+    var nodeCount = nodeIndices.length;
 
-    // determine hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.edges.length == hubsize) {
-          node.level = 0;
-        }
-      }
+    var minX = Number.MAX_VALUE,
+      minY = Number.MAX_VALUE,
+      maxX =-Number.MAX_VALUE,
+      maxY =-Number.MAX_VALUE;
+
+    // get the range of the nodes
+    for (var i = 0; i < nodeCount; i++) {
+      var x = nodes[nodeIndices[i]].x;
+      var y = nodes[nodeIndices[i]].y;
+      if (x < minX) { minX = x; }
+      if (x > maxX) { maxX = x; }
+      if (y < minY) { minY = y; }
+      if (y > maxY) { maxY = y; }
     }
+    // make the range a square
+    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
+    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
 
-    // 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);
-        }
+
+    var minimumTreeSize = 1e-5;
+    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
+    var halfRootSize = 0.5 * rootSize;
+    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+    // construct the barnesHutTree
+    var barnesHutTree = {
+      root:{
+        centerOfMass: {x:0, y:0},
+        mass:0,
+        range: {
+          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
+          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
+        },
+        size: rootSize,
+        calcSize: 1 / rootSize,
+        children: { data:null},
+        maxWidth: 0,
+        level: 0,
+        childrenCount: 4
       }
+    };
+    this._splitBranch(barnesHutTree.root);
+
+    // place the nodes one by one recursively
+    for (i = 0; i < nodeCount; i++) {
+      node = nodes[nodeIndices[i]];
+      this._placeInTree(barnesHutTree.root,node);
     }
+
+    // make global
+    this.barnesHutTree = barnesHutTree
   };
 
 
   /**
-   * 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.
+   * this updates the mass of a branch. this is increased by adding a node.
    *
+   * @param parentBranch
+   * @param node
    * @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();
+  exports._updateBranchMass = function(parentBranch, node) {
+    var totalMass = parentBranch.mass + node.mass;
+    var totalMassInv = 1/totalMass;
+
+    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
+    parentBranch.centerOfMass.x *= totalMassInv;
+
+    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
+    parentBranch.centerOfMass.y *= totalMassInv;
+
+    parentBranch.mass = totalMass;
+    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
+    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+
   };
 
 
   /**
-   * 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.
+   * determine in which branch the node will be placed.
    *
-   * @param edges
-   * @param parentId
-   * @param distribution
-   * @param parentLevel
+   * @param parentBranch
+   * @param node
+   * @param skipMassUpdate
    * @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;
-      }
+  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
+    if (skipMassUpdate != true || skipMassUpdate === undefined) {
+      // update the mass of the branch.
+      this._updateBranchMass(parentBranch,node);
+    }
 
-      // 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;
-        }
+    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+        this._placeInRegion(parentBranch,node,"NW");
       }
-      else {
-        if (childNode.yFixed && childNode.level > parentLevel) {
-          childNode.yFixed = false;
-          childNode.y = distribution[childNode.level].minPos;
-          nodeMoved = true;
-        }
+      else { // in SW
+        this._placeInRegion(parentBranch,node,"SW");
+      }
+    }
+    else { // in NE or SE
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+        this._placeInRegion(parentBranch,node,"NE");
       }
-
-      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);
-        }
+      else { // in SE
+        this._placeInRegion(parentBranch,node,"SE");
       }
     }
   };
 
 
   /**
-   * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
+   * actually place the node in a region (or branch)
    *
-   * @param level
-   * @param edges
-   * @param parentId
+   * @param parentBranch
+   * @param node
+   * @param region
    * @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 (edges.length > 1) {
-          this._setLevel(level+1, childNode.edges, childNode.id);
+  exports._placeInRegion = function(parentBranch,node,region) {
+    switch (parentBranch.children[region].childrenCount) {
+      case 0: // place node here
+        parentBranch.children[region].children.data = node;
+        parentBranch.children[region].childrenCount = 1;
+        this._updateBranchMass(parentBranch.children[region],node);
+        break;
+      case 1: // convert into children
+        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+        // we move one node a pixel and we do not put it in the tree.
+        if (parentBranch.children[region].children.data.x == node.x &&
+            parentBranch.children[region].children.data.y == node.y) {
+          node.x += Math.random();
+          node.y += Math.random();
         }
-      }
+        else {
+          this._splitBranch(parentBranch.children[region]);
+          this._placeInTree(parentBranch.children[region],node);
+        }
+        break;
+      case 4: // place in branch
+        this._placeInTree(parentBranch.children[region],node);
+        break;
     }
   };
 
 
   /**
-   * Unfix nodes
+   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+   * after the split is complete.
    *
+   * @param parentBranch
    * @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;
-      }
+  exports._splitBranch = function(parentBranch) {
+    // if the branch is shaded with a node, replace the node in the new subset.
+    var containedNode = null;
+    if (parentBranch.childrenCount == 1) {
+      containedNode = parentBranch.children.data;
+      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
     }
-  };
+    parentBranch.childrenCount = 4;
+    parentBranch.children.data = null;
+    this._insertRegion(parentBranch,"NW");
+    this._insertRegion(parentBranch,"NE");
+    this._insertRegion(parentBranch,"SW");
+    this._insertRegion(parentBranch,"SE");
 
+    if (containedNode != null) {
+      this._placeInTree(parentBranch,containedNode);
+    }
+  };
 
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Canvas shapes used by Network
+   * This function subdivides the region into four new segments.
+   * Specifically, this inserts a single new segment.
+   * It fills the children section of the parentBranch
+   *
+   * @param parentBranch
+   * @param region
+   * @param parentRange
+   * @private
    */
-  if (typeof CanvasRenderingContext2D !== 'undefined') {
-
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-      this.beginPath();
-      this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
-
-    /**
-     * 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();
-
-      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 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();
-
-      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)
-        );
-      }
-
-      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);
-    };
+  exports._insertRegion = function(parentBranch, region) {
+    var minX,maxX,minY,maxY;
+    var childSize = 0.5 * parentBranch.size;
+    switch (region) {
+      case "NW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "NE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "SW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+      case "SE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+    }
 
-    /**
-     * 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);
+    parentBranch.children[region] = {
+      centerOfMass:{x:0,y:0},
+      mass:0,
+      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
+      size: 0.5 * parentBranch.size,
+      calcSize: 2 * parentBranch.calcSize,
+      children: {data:null},
+      maxWidth: 0,
+      level: parentBranch.level+1,
+      childrenCount: 0
     };
+  };
 
 
+  /**
+   * This function is for debugging purposed, it draws the tree.
+   *
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawTree = function(ctx,color) {
+    if (this.barnesHutTree !== undefined) {
 
-    /**
-     * 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
+      ctx.lineWidth = 1;
 
-      this.beginPath();
-      this.moveTo(xe, ym);
+      this._drawBranch(this.barnesHutTree.root,ctx,color);
+    }
+  };
 
-      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 function is for debugging purposes. It draws the branches recursively.
+   *
+   * @param branch
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawBranch = function(branch,ctx,color) {
+    if (color === undefined) {
+      color = "#FF0000";
+    }
 
-      this.lineTo(xe, ymb);
+    if (branch.childrenCount == 4) {
+      this._drawBranch(branch.children.NW,ctx);
+      this._drawBranch(branch.children.NE,ctx);
+      this._drawBranch(branch.children.SE,ctx);
+      this._drawBranch(branch.children.SW,ctx);
+    }
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.minY);
+    ctx.stroke();
 
-      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.maxY);
+    ctx.stroke();
 
-      this.lineTo(x, ym);
-    };
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.maxY);
+    ctx.stroke();
 
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.minY);
+    ctx.stroke();
 
-    /**
-     * Draw an arrow point (no line)
+    /*
+     if (branch.mass > 0) {
+     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+     ctx.stroke();
+     }
      */
-    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;
-      }
-    };
+/***/ },
+/* 55 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // TODO: add diamond shape
-  }
+  var map = {
+  	"./ar": 58,
+  	"./ar-ma": 56,
+  	"./ar-ma.js": 56,
+  	"./ar-sa": 57,
+  	"./ar-sa.js": 57,
+  	"./ar.js": 58,
+  	"./az": 59,
+  	"./az.js": 59,
+  	"./bg": 60,
+  	"./bg.js": 60,
+  	"./bn": 61,
+  	"./bn.js": 61,
+  	"./br": 62,
+  	"./br.js": 62,
+  	"./bs": 63,
+  	"./bs.js": 63,
+  	"./ca": 64,
+  	"./ca.js": 64,
+  	"./cs": 65,
+  	"./cs.js": 65,
+  	"./cv": 66,
+  	"./cv.js": 66,
+  	"./cy": 67,
+  	"./cy.js": 67,
+  	"./da": 68,
+  	"./da.js": 68,
+  	"./de": 70,
+  	"./de-at": 69,
+  	"./de-at.js": 69,
+  	"./de.js": 70,
+  	"./el": 71,
+  	"./el.js": 71,
+  	"./en-au": 72,
+  	"./en-au.js": 72,
+  	"./en-ca": 73,
+  	"./en-ca.js": 73,
+  	"./en-gb": 74,
+  	"./en-gb.js": 74,
+  	"./eo": 75,
+  	"./eo.js": 75,
+  	"./es": 76,
+  	"./es.js": 76,
+  	"./et": 77,
+  	"./et.js": 77,
+  	"./eu": 78,
+  	"./eu.js": 78,
+  	"./fa": 79,
+  	"./fa.js": 79,
+  	"./fi": 80,
+  	"./fi.js": 80,
+  	"./fo": 81,
+  	"./fo.js": 81,
+  	"./fr": 83,
+  	"./fr-ca": 82,
+  	"./fr-ca.js": 82,
+  	"./fr.js": 83,
+  	"./gl": 84,
+  	"./gl.js": 84,
+  	"./he": 85,
+  	"./he.js": 85,
+  	"./hi": 86,
+  	"./hi.js": 86,
+  	"./hr": 87,
+  	"./hr.js": 87,
+  	"./hu": 88,
+  	"./hu.js": 88,
+  	"./hy-am": 89,
+  	"./hy-am.js": 89,
+  	"./id": 90,
+  	"./id.js": 90,
+  	"./is": 91,
+  	"./is.js": 91,
+  	"./it": 92,
+  	"./it.js": 92,
+  	"./ja": 93,
+  	"./ja.js": 93,
+  	"./ka": 94,
+  	"./ka.js": 94,
+  	"./km": 95,
+  	"./km.js": 95,
+  	"./ko": 96,
+  	"./ko.js": 96,
+  	"./lb": 97,
+  	"./lb.js": 97,
+  	"./lt": 98,
+  	"./lt.js": 98,
+  	"./lv": 99,
+  	"./lv.js": 99,
+  	"./mk": 100,
+  	"./mk.js": 100,
+  	"./ml": 101,
+  	"./ml.js": 101,
+  	"./mr": 102,
+  	"./mr.js": 102,
+  	"./ms-my": 103,
+  	"./ms-my.js": 103,
+  	"./nb": 104,
+  	"./nb.js": 104,
+  	"./ne": 105,
+  	"./ne.js": 105,
+  	"./nl": 106,
+  	"./nl.js": 106,
+  	"./nn": 107,
+  	"./nn.js": 107,
+  	"./pl": 108,
+  	"./pl.js": 108,
+  	"./pt": 110,
+  	"./pt-br": 109,
+  	"./pt-br.js": 109,
+  	"./pt.js": 110,
+  	"./ro": 111,
+  	"./ro.js": 111,
+  	"./ru": 112,
+  	"./ru.js": 112,
+  	"./sk": 113,
+  	"./sk.js": 113,
+  	"./sl": 114,
+  	"./sl.js": 114,
+  	"./sq": 115,
+  	"./sq.js": 115,
+  	"./sr": 117,
+  	"./sr-cyrl": 116,
+  	"./sr-cyrl.js": 116,
+  	"./sr.js": 117,
+  	"./sv": 118,
+  	"./sv.js": 118,
+  	"./ta": 119,
+  	"./ta.js": 119,
+  	"./th": 120,
+  	"./th.js": 120,
+  	"./tl-ph": 121,
+  	"./tl-ph.js": 121,
+  	"./tr": 122,
+  	"./tr.js": 122,
+  	"./tzm": 124,
+  	"./tzm-latn": 123,
+  	"./tzm-latn.js": 123,
+  	"./tzm.js": 124,
+  	"./uk": 125,
+  	"./uk.js": 125,
+  	"./uz": 126,
+  	"./uz.js": 126,
+  	"./vi": 127,
+  	"./vi.js": 127,
+  	"./zh-cn": 128,
+  	"./zh-cn.js": 128,
+  	"./zh-tw": 129,
+  	"./zh-tw.js": 129
+  };
+  function webpackContext(req) {
+  	return __webpack_require__(webpackContextResolve(req));
+  };
+  function webpackContextResolve(req) {
+  	return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
+  };
+  webpackContext.keys = function webpackContextKeys() {
+  	return Object.keys(map);
+  };
+  webpackContext.resolve = webpackContextResolve;
+  module.exports = webpackContext;
 
 
 /***/ },
-/* 57 */
+/* 56 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -30760,7 +30749,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -30812,7 +30801,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 58 */
+/* 57 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -30821,7 +30810,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -30913,111 +30902,111 @@ return /******/ (function(modules) { // webpackBootstrap
   }));
 
 
+/***/ },
+/* 58 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic (ar)
+  // author : Abdel Said : https://github.com/abdelsaid
+  // changes in months, weekdays : Ahmed Elkhatib
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
+
+      return moment.lang('ar', {
+          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
 /***/ },
 /* 59 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic (ar)
-  // author : Abdel Said : https://github.com/abdelsaid
-  // changes in months, weekdays : Ahmed Elkhatib
-
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
-
-      return moment.lang('ar', {
-          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 60 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31026,7 +31015,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31125,7 +31114,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 61 */
+/* 60 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31134,7 +31123,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31217,7 +31206,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 62 */
+/* 61 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31226,7 +31215,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31329,7 +31318,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 63 */
+/* 62 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31338,7 +31327,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31442,7 +31431,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 64 */
+/* 63 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31452,7 +31441,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31587,7 +31576,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 65 */
+/* 64 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31596,7 +31585,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31659,7 +31648,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 66 */
+/* 65 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31668,7 +31657,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31820,7 +31809,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 67 */
+/* 66 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31829,7 +31818,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31885,7 +31874,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 68 */
+/* 67 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31894,7 +31883,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -31968,7 +31957,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 69 */
+/* 68 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -31977,7 +31966,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32030,7 +32019,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 70 */
+/* 69 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32041,7 +32030,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32108,7 +32097,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 71 */
+/* 70 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32118,7 +32107,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32185,7 +32174,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 72 */
+/* 71 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32194,7 +32183,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32281,7 +32270,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 73 */
+/* 72 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32289,7 +32278,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32349,7 +32338,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 74 */
+/* 73 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32358,7 +32347,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32414,7 +32403,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 75 */
+/* 74 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32423,7 +32412,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32483,7 +32472,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 76 */
+/* 75 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32494,7 +32483,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32554,7 +32543,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 77 */
+/* 76 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32563,7 +32552,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32635,7 +32624,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 78 */
+/* 77 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32645,7 +32634,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32717,7 +32706,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 79 */
+/* 78 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32726,7 +32715,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32783,7 +32772,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 80 */
+/* 79 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32792,7 +32781,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32886,7 +32875,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 81 */
+/* 80 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -32895,7 +32884,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -32995,7 +32984,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 82 */
+/* 81 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33004,7 +32993,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33057,7 +33046,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 83 */
+/* 82 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33066,7 +33055,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33117,7 +33106,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 84 */
+/* 83 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33126,7 +33115,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33181,7 +33170,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 85 */
+/* 84 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33190,7 +33179,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33258,7 +33247,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 86 */
+/* 85 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33269,7 +33258,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33341,7 +33330,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 87 */
+/* 86 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33350,7 +33339,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33452,7 +33441,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 88 */
+/* 87 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33463,7 +33452,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33598,7 +33587,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 89 */
+/* 88 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33607,7 +33596,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33709,7 +33698,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 90 */
+/* 89 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33718,7 +33707,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33828,7 +33817,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 91 */
+/* 90 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33838,7 +33827,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -33901,7 +33890,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 92 */
+/* 91 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -33910,7 +33899,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34031,7 +34020,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 93 */
+/* 92 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34041,7 +34030,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34096,7 +34085,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 94 */
+/* 93 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34105,7 +34094,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34160,7 +34149,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 95 */
+/* 94 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34169,7 +34158,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34274,7 +34263,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 96 */
+/* 95 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34283,7 +34272,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34335,7 +34324,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 97 */
+/* 96 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34347,7 +34336,7 @@ return /******/ (function(modules) { // webpackBootstrap
   // - Jeeeyul Lee <jeeeyul@gmail.com>
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34404,7 +34393,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 98 */
+/* 97 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34417,7 +34406,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34570,7 +34559,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 99 */
+/* 98 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34579,7 +34568,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34694,7 +34683,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 100 */
+/* 99 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34703,7 +34692,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34777,7 +34766,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 101 */
+/* 100 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34786,7 +34775,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34869,7 +34858,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 102 */
+/* 101 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34878,7 +34867,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -34939,7 +34928,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 103 */
+/* 102 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -34948,7 +34937,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35049,7 +35038,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 104 */
+/* 103 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35058,7 +35047,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35121,7 +35110,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 105 */
+/* 104 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35131,7 +35120,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35184,7 +35173,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 106 */
+/* 105 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35193,7 +35182,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35295,7 +35284,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 107 */
+/* 106 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35304,7 +35293,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35368,7 +35357,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 108 */
+/* 107 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35377,7 +35366,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35430,7 +35419,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 109 */
+/* 108 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35439,7 +35428,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35534,7 +35523,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 110 */
+/* 109 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35543,7 +35532,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35596,7 +35585,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 111 */
+/* 110 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35605,7 +35594,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35662,7 +35651,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 112 */
+/* 111 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35672,7 +35661,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35740,7 +35729,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 113 */
+/* 112 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35750,7 +35739,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -35912,7 +35901,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 114 */
+/* 113 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -35922,7 +35911,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36074,7 +36063,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 115 */
+/* 114 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36083,7 +36072,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36224,7 +36213,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 116 */
+/* 115 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36235,7 +36224,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36291,7 +36280,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 117 */
+/* 116 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36300,7 +36289,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36403,7 +36392,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 118 */
+/* 117 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36412,7 +36401,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36515,7 +36504,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 119 */
+/* 118 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36524,7 +36513,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36584,7 +36573,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 120 */
+/* 119 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36593,7 +36582,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36702,7 +36691,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 121 */
+/* 120 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36711,7 +36700,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36766,7 +36755,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 122 */
+/* 121 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36775,7 +36764,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36830,7 +36819,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 123 */
+/* 122 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36840,7 +36829,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36929,7 +36918,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 124 */
+/* 123 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36938,7 +36927,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -36990,7 +36979,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 125 */
+/* 124 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -36999,7 +36988,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -37051,7 +37040,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 126 */
+/* 125 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -37061,7 +37050,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -37214,7 +37203,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 127 */
+/* 126 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -37223,7 +37212,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -37275,7 +37264,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 128 */
+/* 127 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -37284,7 +37273,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -37343,7 +37332,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 129 */
+/* 128 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -37353,7 +37342,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -37457,7 +37446,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 130 */
+/* 129 */
 /***/ function(module, exports, __webpack_require__) {
 
   var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
@@ -37466,7 +37455,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   (function (factory) {
       if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
       } else if (typeof exports === 'object') {
           module.exports = factory(require('../moment')); // Node
       } else {
@@ -37546,6 +37535,22 @@ return /******/ (function(modules) { // webpackBootstrap
   }));
 
 
+/***/ },
+/* 130 */
+/***/ function(module, exports, __webpack_require__) {
+
+  module.exports = function(module) {
+  	if(!module.webpackPolyfill) {
+  		module.deprecate = function() {};
+  		module.paths = [];
+  		// module.parent = undefined by default
+  		module.children = [];
+  		module.webpackPolyfill = 1;
+  	}
+  	return module;
+  }
+
+
 /***/ }
 /******/ ])
 })
diff --git a/examples/network/index.html b/examples/network/index.html
index c360c653..91741049 100644
--- a/examples/network/index.html
+++ b/examples/network/index.html
@@ -39,6 +39,7 @@
   <p><a href="25_physics_configuration.html">25_physics_configuration.html</a></p>
   <p><a href="26_staticSmoothCurves.html">26_staticSmoothCurves.html</a></p>
   <p><a href="27_world_cup_network.html">27_world_cup_network.html</a></p>
+  <p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>
diff --git a/lib/network/Edge.js b/lib/network/Edge.js
index fa723608..9c11c94f 100644
--- a/lib/network/Edge.js
+++ b/lib/network/Edge.js
@@ -939,42 +939,22 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
         yVia = via.y;
       }
       var minDistance = 1e9;
-      var i,t,x,y,dx,dy;
+      var distance;
+      var i,t,x,y, lastX, lastY;
       for (i = 0; i < 10; i++) {
         t = 0.1*i;
         x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
         y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
-        dx = Math.abs(x3-x);
-        dy = Math.abs(y3-y);
-        minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
+        if (i > 0) {
+          distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
+          minDistance = distance < minDistance ? distance : minDistance;
+        }
+        lastX = x; lastY = y;
       }
       return minDistance
     }
     else {
-      var px = x2-x1,
-          py = y2-y1,
-          something = px*px + py*py,
-          u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
-
-      if (u > 1) {
-        u = 1;
-      }
-      else if (u < 0) {
-        u = 0;
-      }
-
-      var x = x1 + u * px,
-          y = y1 + u * py,
-          dx = x - x3,
-          dy = y - y3;
-
-      //# Note: If the actual distance does not matter,
-      //# if you only want to compare what this function
-      //# returns to other results of this function, you
-      //# can just return the squared distance instead
-      //# (i.e. remove the sqrt) to gain a little performance
-
-      return Math.sqrt(dx*dx + dy*dy);
+      return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
     }
   }
   else {
@@ -998,7 +978,32 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
   }
 };
 
+Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
+  var px = x2-x1,
+    py = y2-y1,
+    something = px*px + py*py,
+    u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
 
+  if (u > 1) {
+    u = 1;
+  }
+  else if (u < 0) {
+    u = 0;
+  }
+
+  var x = x1 + u * px,
+    y = y1 + u * py,
+    dx = x - x3,
+    dy = y - y3;
+
+  //# Note: If the actual distance does not matter,
+  //# if you only want to compare what this function
+  //# returns to other results of this function, you
+  //# can just return the squared distance instead
+  //# (i.e. remove the sqrt) to gain a little performance
+
+  return Math.sqrt(dx*dx + dy*dy);
+}
 
 /**
  * This allows the zoom level of the network to influence the rendering

From 6a0144c6f1b3c518654c608b7a76d3214f892e3d Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Mon, 14 Jul 2014 17:24:29 +0200
Subject: [PATCH 6/6] fixed support nodes not being cleaned after edges are
 removed. #213

---
 dist/vis.js            | 59871 ++++++++++++++++++++-------------------
 lib/network/Network.js |    13 +-
 2 files changed, 29951 insertions(+), 29933 deletions(-)

diff --git a/dist/vis.js b/dist/vis.js
index cea87062..26a24b4e 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -81,54 +81,54 @@ return /******/ (function(modules) { // webpackBootstrap
 
   // utils
   exports.util = __webpack_require__(1);
-  exports.DOMutil = __webpack_require__(2);
+  exports.DOMutil = __webpack_require__(8);
 
   // data
-  exports.DataSet = __webpack_require__(3);
-  exports.DataView = __webpack_require__(4);
+  exports.DataSet = __webpack_require__(9);
+  exports.DataView = __webpack_require__(10);
 
   // Graph3d
   exports.Graph3d = __webpack_require__(11);
 
   // Timeline
-  exports.Timeline = __webpack_require__(5);
-  exports.Graph2d = __webpack_require__(7);
+  exports.Timeline = __webpack_require__(17);
+  exports.Graph2d = __webpack_require__(31);
   exports.timeline= {
-    DataStep: __webpack_require__(6),
-    Range: __webpack_require__(8),
-    stack: __webpack_require__(9),
-    TimeStep: __webpack_require__(10),
+    DataStep: __webpack_require__(34),
+    Range: __webpack_require__(18),
+    stack: __webpack_require__(26),
+    TimeStep: __webpack_require__(21),
 
     components: {
       items: {
-        Item: __webpack_require__(22),
-        ItemBox: __webpack_require__(23),
-        ItemPoint: __webpack_require__(24),
-        ItemRange: __webpack_require__(25)
+        Item: __webpack_require__(28),
+        ItemBox: __webpack_require__(29),
+        ItemPoint: __webpack_require__(30),
+        ItemRange: __webpack_require__(27)
       },
 
-      Component: __webpack_require__(12),
-      CurrentTime: __webpack_require__(13),
-      CustomTime: __webpack_require__(14),
-      DataAxis: __webpack_require__(15),
-      GraphGroup: __webpack_require__(16),
-      Group: __webpack_require__(17),
-      ItemSet: __webpack_require__(18),
-      Legend: __webpack_require__(19),
-      LineGraph: __webpack_require__(20),
-      TimeAxis: __webpack_require__(21)
+      Component: __webpack_require__(19),
+      CurrentTime: __webpack_require__(22),
+      CustomTime: __webpack_require__(23),
+      DataAxis: __webpack_require__(33),
+      GraphGroup: __webpack_require__(35),
+      Group: __webpack_require__(25),
+      ItemSet: __webpack_require__(24),
+      Legend: __webpack_require__(36),
+      LineGraph: __webpack_require__(32),
+      TimeAxis: __webpack_require__(20)
     }
   };
 
   // Network
-  exports.Network = __webpack_require__(26);
+  exports.Network = __webpack_require__(37);
   exports.network = {
-    Edge: __webpack_require__(27),
-    Groups: __webpack_require__(28),
-    Images: __webpack_require__(29),
-    Node: __webpack_require__(30),
-    Popup: __webpack_require__(31),
-    dotparser: __webpack_require__(32)
+    Edge: __webpack_require__(38),
+    Groups: __webpack_require__(40),
+    Images: __webpack_require__(41),
+    Node: __webpack_require__(39),
+    Popup: __webpack_require__(42),
+    dotparser: __webpack_require__(43)
   };
 
   // Deprecated since v3.0.0
@@ -145,8 +145,8 @@ 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.
-  var Hammer = __webpack_require__(39);
-  var moment = __webpack_require__(38);
+  var Hammer = __webpack_require__(2);
+  var moment = __webpack_require__(4);
 
   /**
    * Test whether given object is a number
@@ -1420,11465 +1420,10688 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 2 */
 /***/ function(module, exports, __webpack_require__) {
 
-  // DOM utility methods
-
-  /**
-   * this prepares the JSON container for allocating SVG elements
-   * @param JSONcontainer
-   * @private
-   */
-  exports.prepareElements = function(JSONcontainer) {
-    // cleanup the redundant svgElements;
-    for (var elementType in JSONcontainer) {
-      if (JSONcontainer.hasOwnProperty(elementType)) {
-        JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
-        JSONcontainer[elementType].used = [];
-      }
+  // 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__(3);
+    // TODO: throw an error when hammerjs is not available?
+  }
+  else {
+    module.exports = function () {
+      throw Error('hammer.js is only available in a browser, not in node.js.');
     }
-  };
+  }
 
-  /**
-   * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
-   * which to remove the redundant elements.
-   *
-   * @param JSONcontainer
-   * @private
-   */
-  exports.cleanupElements = function(JSONcontainer) {
-    // cleanup the redundant svgElements;
-    for (var elementType in JSONcontainer) {
-      if (JSONcontainer.hasOwnProperty(elementType)) {
-        if (JSONcontainer[elementType].redundant) {
-          for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
-            JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
-          }
-          JSONcontainer[elementType].redundant = [];
-        }
-      }
-    }
-  };
 
-  /**
-   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
-   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /*! Hammer.JS - v1.0.5 - 2013-04-07
+   * http://eightmedia.github.com/hammer.js
    *
-   * @param elementType
-   * @param JSONcontainer
-   * @param svgContainer
-   * @returns {*}
-   * @private
-   */
-  exports.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
-    var element;
-    // allocate SVG element, if it doesnt yet exist, create one.
-    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
-      // check if there is an redundant element
-      if (JSONcontainer[elementType].redundant.length > 0) {
-        element = JSONcontainer[elementType].redundant[0];
-        JSONcontainer[elementType].redundant.shift();
-      }
-      else {
-        // create a new element and add it to the SVG
-        element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
-        svgContainer.appendChild(element);
-      }
-    }
-    else {
-      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
-      element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
-      JSONcontainer[elementType] = {used: [], redundant: []};
-      svgContainer.appendChild(element);
-    }
-    JSONcontainer[elementType].used.push(element);
-    return element;
-  };
+   * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
+   * Licensed under the MIT license */
 
+  (function(window, undefined) {
+      'use strict';
 
   /**
-   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
-   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
-   *
-   * @param elementType
-   * @param JSONcontainer
-   * @param DOMContainer
-   * @returns {*}
-   * @private
+   * Hammer
+   * use this to create instances
+   * @param   {HTMLElement}   element
+   * @param   {Object}        options
+   * @returns {Hammer.Instance}
+   * @constructor
    */
-  exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
-    var element;
-    // allocate SVG element, if it doesnt yet exist, create one.
-    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
-      // check if there is an redundant element
-      if (JSONcontainer[elementType].redundant.length > 0) {
-        element = JSONcontainer[elementType].redundant[0];
-        JSONcontainer[elementType].redundant.shift();
-      }
-      else {
-        // create a new element and add it to the SVG
-        element = document.createElement(elementType);
-        DOMContainer.appendChild(element);
+  var Hammer = function(element, options) {
+      return new Hammer.Instance(element, options || {});
+  };
+
+  // default settings
+  Hammer.defaults = {
+      // add styles and attributes to the element to prevent the browser from doing
+      // its native behavior. this doesnt prevent the scrolling, but cancels
+      // the contextmenu, tap highlighting etc
+      // set to false to disable this
+      stop_browser_behavior: {
+  		// this also triggers onselectstart=false for IE
+          userSelect: 'none',
+  		// this makes the element blocking in IE10 >, you could experiment with the value
+  		// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
+          touchAction: 'none',
+  		touchCallout: 'none',
+          contentZooming: 'none',
+          userDrag: 'none',
+          tapHighlightColor: 'rgba(0,0,0,0)'
       }
-    }
-    else {
-      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
-      element = document.createElement(elementType);
-      JSONcontainer[elementType] = {used: [], redundant: []};
-      DOMContainer.appendChild(element);
-    }
-    JSONcontainer[elementType].used.push(element);
-    return element;
+
+      // more settings are defined per gesture at gestures.js
   };
 
+  // detect touchevents
+  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
+  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
 
+  // dont use mouseevents on mobile devices
+  Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+  Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
 
+  // eventtypes per touchevent (start, move, end)
+  // are filled by Hammer.event.determineEventTypes on setup
+  Hammer.EVENT_TYPES = {};
 
-  /**
-   * draw a point object. this is a seperate function because it can also be called by the legend.
-   * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
-   * as well.
-   *
-   * @param x
-   * @param y
-   * @param group
-   * @param JSONcontainer
-   * @param svgContainer
-   * @returns {*}
-   */
-  exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
-    var point;
-    if (group.options.drawPoints.style == 'circle') {
-      point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
-      point.setAttributeNS(null, "cx", x);
-      point.setAttributeNS(null, "cy", y);
-      point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
-      point.setAttributeNS(null, "class", group.className + " point");
-    }
-    else {
-      point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
-      point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
-      point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
-      point.setAttributeNS(null, "width", group.options.drawPoints.size);
-      point.setAttributeNS(null, "height", group.options.drawPoints.size);
-      point.setAttributeNS(null, "class", group.className + " point");
-    }
-    return point;
-  };
+  // direction defines
+  Hammer.DIRECTION_DOWN = 'down';
+  Hammer.DIRECTION_LEFT = 'left';
+  Hammer.DIRECTION_UP = 'up';
+  Hammer.DIRECTION_RIGHT = 'right';
 
-  /**
-   * draw a bar SVG element centered on the X coordinate
-   *
-   * @param x
-   * @param y
-   * @param className
-   */
-  exports.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
-    var rect = exports.getSVGElement('rect',JSONcontainer, svgContainer);
-    rect.setAttributeNS(null, "x", x - 0.5 * width);
-    rect.setAttributeNS(null, "y", y);
-    rect.setAttributeNS(null, "width", width);
-    rect.setAttributeNS(null, "height", height);
-    rect.setAttributeNS(null, "class", className);
-  };
+  // pointer type
+  Hammer.POINTER_MOUSE = 'mouse';
+  Hammer.POINTER_TOUCH = 'touch';
+  Hammer.POINTER_PEN = 'pen';
 
-/***/ },
-/* 3 */
-/***/ function(module, exports, __webpack_require__) {
+  // touch event defines
+  Hammer.EVENT_START = 'start';
+  Hammer.EVENT_MOVE = 'move';
+  Hammer.EVENT_END = 'end';
 
-  var util = __webpack_require__(1);
+  // hammer document where the base events are added at
+  Hammer.DOCUMENT = document;
+
+  // plugins namespace
+  Hammer.plugins = {};
+
+  // if the window events are set...
+  Hammer.READY = false;
 
   /**
-   * DataSet
-   *
-   * Usage:
-   *     var dataSet = new DataSet({
-   *         fieldId: '_id',
-   *         type: {
-   *             // ...
-   *         }
-   *     });
-   *
-   *     dataSet.add(item);
-   *     dataSet.add(data);
-   *     dataSet.update(item);
-   *     dataSet.update(data);
-   *     dataSet.remove(id);
-   *     dataSet.remove(ids);
-   *     var data = dataSet.get();
-   *     var data = dataSet.get(id);
-   *     var data = dataSet.get(ids);
-   *     var data = dataSet.get(ids, options, data);
-   *     dataSet.clear();
-   *
-   * A data set can:
-   * - add/remove/update data
-   * - gives triggers upon changes in the data
-   * - can  import/export data in various data formats
-   *
-   * @param {Array | DataTable} [data]    Optional array with initial data
-   * @param {Object} [options]   Available options:
-   *                             {String} fieldId Field name of the id in the
-   *                                              items, 'id' by default.
-   *                             {Object.<String, String} type
-   *                                              A map with field names as key,
-   *                                              and the field type as value.
-   * @constructor DataSet
+   * setup events to detect gestures on the document
    */
-  // TODO: add a DataSet constructor DataSet(data, options)
-  function DataSet (data, options) {
-    // correctly read optional arguments
-    if (data && !Array.isArray(data) && !util.isDataTable(data)) {
-      options = data;
-      data = null;
-    }
+  function setup() {
+      if(Hammer.READY) {
+          return;
+      }
 
-    this._options = options || {};
-    this._data = {};                                 // map with data indexed by id
-    this._fieldId = this._options.fieldId || 'id';   // name of the field containing id
-    this._type = {};                                 // internal field types (NOTE: this can differ from this._options.type)
+      // find what eventtypes we add listeners to
+      Hammer.event.determineEventTypes();
 
-    // all variants of a Date are internally stored as Date, so we can convert
-    // from everything to everything (also from ISODate to Number for example)
-    if (this._options.type) {
-      for (var field in this._options.type) {
-        if (this._options.type.hasOwnProperty(field)) {
-          var value = this._options.type[field];
-          if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
-            this._type[field] = 'Date';
-          }
-          else {
-            this._type[field] = value;
+      // Register all gestures inside Hammer.gestures
+      for(var name in Hammer.gestures) {
+          if(Hammer.gestures.hasOwnProperty(name)) {
+              Hammer.detection.register(Hammer.gestures[name]);
           }
-        }
       }
-    }
-
-    // TODO: deprecated since version 1.1.1 (or 2.0.0?)
-    if (this._options.convert) {
-      throw new Error('Option "convert" is deprecated. Use "type" instead.');
-    }
 
-    this._subscribers = {};  // event subscribers
+      // Add touch events on the document
+      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
+      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
 
-    // add initial data when provided
-    if (data) {
-      this.add(data);
-    }
+      // Hammer is ready...!
+      Hammer.READY = true;
   }
 
   /**
-   * Subscribe to an event, add an event listener
-   * @param {String} event        Event name. Available events: 'put', 'update',
-   *                              'remove'
-   * @param {function} callback   Callback method. Called with three parameters:
-   *                                  {String} event
-   *                                  {Object | null} params
-   *                                  {String | Number} senderId
+   * create new hammer instance
+   * all methods should return the instance itself, so it is chainable.
+   * @param   {HTMLElement}       element
+   * @param   {Object}            [options={}]
+   * @returns {Hammer.Instance}
+   * @constructor
    */
-  DataSet.prototype.on = function(event, callback) {
-    var subscribers = this._subscribers[event];
-    if (!subscribers) {
-      subscribers = [];
-      this._subscribers[event] = subscribers;
-    }
+  Hammer.Instance = function(element, options) {
+      var self = this;
 
-    subscribers.push({
-      callback: callback
-    });
-  };
+      // setup HammerJS window events and register all gestures
+      // this also sets up the default options
+      setup();
 
-  // TODO: make this function deprecated (replaced with `on` since version 0.5)
-  DataSet.prototype.subscribe = DataSet.prototype.on;
+      this.element = element;
 
-  /**
-   * Unsubscribe from an event, remove an event listener
-   * @param {String} event
-   * @param {function} callback
-   */
-  DataSet.prototype.off = function(event, callback) {
-    var subscribers = this._subscribers[event];
-    if (subscribers) {
-      this._subscribers[event] = subscribers.filter(function (listener) {
-        return (listener.callback != callback);
+      // start/stop detection option
+      this.enabled = true;
+
+      // merge options
+      this.options = Hammer.utils.extend(
+          Hammer.utils.extend({}, Hammer.defaults),
+          options || {});
+
+      // add some css to the element to prevent the browser from doing its native behavoir
+      if(this.options.stop_browser_behavior) {
+          Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
+      }
+
+      // start detection on touchstart
+      Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
+          if(self.enabled) {
+              Hammer.detection.startDetect(self, ev);
+          }
       });
-    }
+
+      // return instance
+      return this;
   };
 
-  // TODO: make this function deprecated (replaced with `on` since version 0.5)
-  DataSet.prototype.unsubscribe = DataSet.prototype.off;
 
-  /**
-   * Trigger an event
-   * @param {String} event
-   * @param {Object | null} params
-   * @param {String} [senderId]       Optional id of the sender.
-   * @private
-   */
-  DataSet.prototype._trigger = function (event, params, senderId) {
-    if (event == '*') {
-      throw new Error('Cannot trigger event *');
-    }
+  Hammer.Instance.prototype = {
+      /**
+       * bind events to the instance
+       * @param   {String}      gesture
+       * @param   {Function}    handler
+       * @returns {Hammer.Instance}
+       */
+      on: function onEvent(gesture, handler){
+          var gestures = gesture.split(' ');
+          for(var t=0; t<gestures.length; t++) {
+              this.element.addEventListener(gestures[t], handler, false);
+          }
+          return this;
+      },
 
-    var subscribers = [];
-    if (event in this._subscribers) {
-      subscribers = subscribers.concat(this._subscribers[event]);
-    }
-    if ('*' in this._subscribers) {
-      subscribers = subscribers.concat(this._subscribers['*']);
-    }
 
-    for (var i = 0; i < subscribers.length; i++) {
-      var subscriber = subscribers[i];
-      if (subscriber.callback) {
-        subscriber.callback(event, params, senderId || null);
+      /**
+       * unbind events to the instance
+       * @param   {String}      gesture
+       * @param   {Function}    handler
+       * @returns {Hammer.Instance}
+       */
+      off: function offEvent(gesture, handler){
+          var gestures = gesture.split(' ');
+          for(var t=0; t<gestures.length; t++) {
+              this.element.removeEventListener(gestures[t], handler, false);
+          }
+          return this;
+      },
+
+
+      /**
+       * trigger gesture event
+       * @param   {String}      gesture
+       * @param   {Object}      eventData
+       * @returns {Hammer.Instance}
+       */
+      trigger: function triggerEvent(gesture, 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(Hammer.utils.hasParent(eventData.target, element)) {
+              element = eventData.target;
+          }
+
+          element.dispatchEvent(event);
+          return this;
+      },
+
+
+      /**
+       * enable of disable hammer.js detection
+       * @param   {Boolean}   state
+       * @returns {Hammer.Instance}
+       */
+      enable: function enable(state) {
+          this.enabled = state;
+          return this;
       }
-    }
   };
 
   /**
-   * Add data.
-   * Adding an item will fail when there already is an item with the same id.
-   * @param {Object | Array | DataTable} data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} addedIds      Array with the ids of the added items
+   * this holds the last move event,
+   * used to fix empty touchend issue
+   * see the onTouch event for an explanation
+   * @type {Object}
    */
-  DataSet.prototype.add = function (data, senderId) {
-    var addedIds = [],
-        id,
-        me = this;
-
-    if (Array.isArray(data)) {
-      // Array
-      for (var i = 0, len = data.length; i < len; i++) {
-        id = me._addItem(data[i]);
-        addedIds.push(id);
-      }
-    }
-    else if (util.isDataTable(data)) {
-      // Google DataTable
-      var columns = this._getColumnNames(data);
-      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-        var item = {};
-        for (var col = 0, cols = columns.length; col < cols; col++) {
-          var field = columns[col];
-          item[field] = data.getValue(row, col);
-        }
+  var last_move_event = null;
 
-        id = me._addItem(item);
-        addedIds.push(id);
-      }
-    }
-    else if (data instanceof Object) {
-      // Single item
-      id = me._addItem(data);
-      addedIds.push(id);
-    }
-    else {
-      throw new Error('Unknown dataType');
-    }
 
-    if (addedIds.length) {
-      this._trigger('add', {items: addedIds}, senderId);
-    }
+  /**
+   * when the mouse is hold down, this is true
+   * @type {Boolean}
+   */
+  var enable_detect = false;
 
-    return addedIds;
-  };
 
   /**
-   * Update existing items. When an item does not exist, it will be created
-   * @param {Object | Array | DataTable} data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} updatedIds     The ids of the added or updated items
+   * when touch events have been fired, this is true
+   * @type {Boolean}
    */
-  DataSet.prototype.update = function (data, senderId) {
-    var addedIds = [],
-        updatedIds = [],
-        me = this,
-        fieldId = me._fieldId;
+  var touch_triggered = false;
 
-    var addOrUpdate = function (item) {
-      var id = item[fieldId];
-      if (me._data[id]) {
-        // update item
-        id = me._updateItem(item);
-        updatedIds.push(id);
-      }
-      else {
-        // add new item
-        id = me._addItem(item);
-        addedIds.push(id);
-      }
-    };
 
-    if (Array.isArray(data)) {
-      // Array
-      for (var i = 0, len = data.length; i < len; i++) {
-        addOrUpdate(data[i]);
-      }
-    }
-    else if (util.isDataTable(data)) {
-      // Google DataTable
-      var columns = this._getColumnNames(data);
-      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-        var item = {};
-        for (var col = 0, cols = columns.length; col < cols; col++) {
-          var field = columns[col];
-          item[field] = data.getValue(row, col);
-        }
+  Hammer.event = {
+      /**
+       * simple addEventListener
+       * @param   {HTMLElement}   element
+       * @param   {String}        type
+       * @param   {Function}      handler
+       */
+      bindDom: function(element, type, handler) {
+          var types = type.split(' ');
+          for(var t=0; t<types.length; t++) {
+              element.addEventListener(types[t], handler, false);
+          }
+      },
 
-        addOrUpdate(item);
-      }
-    }
-    else if (data instanceof Object) {
-      // Single item
-      addOrUpdate(data);
-    }
-    else {
-      throw new Error('Unknown dataType');
-    }
 
-    if (addedIds.length) {
-      this._trigger('add', {items: addedIds}, senderId);
-    }
-    if (updatedIds.length) {
-      this._trigger('update', {items: updatedIds}, senderId);
-    }
+      /**
+       * touch events with mouse fallback
+       * @param   {HTMLElement}   element
+       * @param   {String}        eventType        like Hammer.EVENT_MOVE
+       * @param   {Function}      handler
+       */
+      onTouch: function onTouch(element, eventType, handler) {
+  		var self = this;
 
-    return addedIds.concat(updatedIds);
-  };
+          this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
+              var sourceEventType = ev.type.toLowerCase();
 
-  /**
-   * Get a data item or multiple items.
-   *
-   * Usage:
-   *
-   *     get()
-   *     get(options: Object)
-   *     get(options: Object, data: Array | DataTable)
-   *
-   *     get(id: Number | String)
-   *     get(id: Number | String, options: Object)
-   *     get(id: Number | String, options: Object, data: Array | DataTable)
-   *
-   *     get(ids: Number[] | String[])
-   *     get(ids: Number[] | String[], options: Object)
-   *     get(ids: Number[] | String[], options: Object, data: Array | DataTable)
-   *
-   * Where:
-   *
-   * {Number | String} id         The id of an item
-   * {Number[] | String{}} ids    An array with ids of items
-   * {Object} options             An Object with options. Available options:
-   *                              {String} [returnType] Type of data to be
-   *                                  returned. Can be 'DataTable' or 'Array' (default)
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] field names to be returned
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * {Array | DataTable} [data]   If provided, items will be appended to this
-   *                              array or table. Required in case of Google
-   *                              DataTable.
-   *
-   * @throws Error
-   */
-  DataSet.prototype.get = function (args) {
-    var me = this;
+              // onmouseup, but when touchend has been fired we do nothing.
+              // this is for touchdevices which also fire a mouseup on touchend
+              if(sourceEventType.match(/mouse/) && touch_triggered) {
+                  return;
+              }
 
-    // parse the arguments
-    var id, ids, options, data;
-    var firstType = util.getType(arguments[0]);
-    if (firstType == 'String' || firstType == 'Number') {
-      // get(id [, options] [, data])
-      id = arguments[0];
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else if (firstType == 'Array') {
-      // get(ids [, options] [, data])
-      ids = arguments[0];
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else {
-      // get([, options] [, data])
-      options = arguments[0];
-      data = arguments[1];
-    }
+              // mousebutton must be down or a touch event
+              else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
+                  sourceEventType.match(/pointerdown/) || // pointerevents touch
+                  (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
+              ){
+                  enable_detect = true;
+              }
 
-    // determine the return type
-    var returnType;
-    if (options && options.returnType) {
-      returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
+              // we are in a touch event, set the touch triggered bool to true,
+              // this for the conflicts that may occur on ios and android
+              if(sourceEventType.match(/touch|pointer/)) {
+                  touch_triggered = true;
+              }
 
-      if (data && (returnType != util.getType(data))) {
-        throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
-            'does not correspond with specified options.type (' + options.type + ')');
-      }
-      if (returnType == 'DataTable' && !util.isDataTable(data)) {
-        throw new Error('Parameter "data" must be a DataTable ' +
-            'when options.type is "DataTable"');
-      }
-    }
-    else if (data) {
-      returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
-    }
-    else {
-      returnType = 'Array';
-    }
+              // count the total touches on the screen
+              var count_touches = 0;
 
-    // build options
-    var type = options && options.type || this._options.type;
-    var filter = options && options.filter;
-    var items = [], item, itemId, i, len;
+              // when touch has been triggered in this detection session
+              // and we are now handling a mouse event, we stop that to prevent conflicts
+              if(enable_detect) {
+                  // update pointerevent
+                  if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
+                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+                  }
+                  // touch
+                  else if(sourceEventType.match(/touch/)) {
+                      count_touches = ev.touches.length;
+                  }
+                  // mouse
+                  else if(!touch_triggered) {
+                      count_touches = sourceEventType.match(/up/) ? 0 : 1;
+                  }
 
-    // convert items
-    if (id != undefined) {
-      // return a single item
-      item = me._getItem(id, type);
-      if (filter && !filter(item)) {
-        item = null;
-      }
-    }
-    else if (ids != undefined) {
-      // return a subset of items
-      for (i = 0, len = ids.length; i < len; i++) {
-        item = me._getItem(ids[i], type);
-        if (!filter || filter(item)) {
-          items.push(item);
-        }
-      }
-    }
-    else {
-      // return all items
-      for (itemId in this._data) {
-        if (this._data.hasOwnProperty(itemId)) {
-          item = me._getItem(itemId, type);
-          if (!filter || filter(item)) {
-            items.push(item);
-          }
-        }
-      }
-    }
+                  // if we are in a end event, but when we remove one touch and
+                  // we still have enough, set eventType to move
+                  if(count_touches > 0 && eventType == Hammer.EVENT_END) {
+                      eventType = Hammer.EVENT_MOVE;
+                  }
+                  // no touches, force the end event
+                  else if(!count_touches) {
+                      eventType = Hammer.EVENT_END;
+                  }
 
-    // order the results
-    if (options && options.order && id == undefined) {
-      this._sort(items, options.order);
-    }
+                  // because touchend has no touches, and we often want to use these in our gestures,
+                  // we send the last move event as our eventData in touchend
+                  if(!count_touches && last_move_event !== null) {
+                      ev = last_move_event;
+                  }
+                  // store the last move event
+                  else {
+                      last_move_event = ev;
+                  }
 
-    // filter fields of the items
-    if (options && options.fields) {
-      var fields = options.fields;
-      if (id != undefined) {
-        item = this._filterFields(item, fields);
-      }
-      else {
-        for (i = 0, len = items.length; i < len; i++) {
-          items[i] = this._filterFields(items[i], fields);
-        }
-      }
-    }
+                  // trigger the handler
+                  handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
 
-    // return the results
-    if (returnType == 'DataTable') {
-      var columns = this._getColumnNames(data);
-      if (id != undefined) {
-        // append a single item to the data table
-        me._appendRow(data, columns, item);
-      }
-      else {
-        // copy the items to the provided data table
-        for (i = 0, len = items.length; i < len; i++) {
-          me._appendRow(data, columns, items[i]);
-        }
-      }
-      return data;
-    }
-    else {
-      // return an array
-      if (id != undefined) {
-        // a single item
-        return item;
-      }
-      else {
-        // multiple items
-        if (data) {
-          // copy the items to the provided array
-          for (i = 0, len = items.length; i < len; i++) {
-            data.push(items[i]);
-          }
-          return data;
-        }
-        else {
-          // just return our array
-          return items;
-        }
-      }
-    }
-  };
+                  // remove pointerevent from list
+                  if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
+                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+                  }
+              }
 
-  /**
-   * Get ids of all items or from a filtered set of items.
-   * @param {Object} [options]    An Object with options. Available options:
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Array} ids
-   */
-  DataSet.prototype.getIds = function (options) {
-    var data = this._data,
-        filter = options && options.filter,
-        order = options && options.order,
-        type = options && options.type || this._options.type,
-        i,
-        len,
-        id,
-        item,
-        items,
-        ids = [];
+              //debug(sourceEventType +" "+ eventType);
 
-    if (filter) {
-      // get filtered items
-      if (order) {
-        // create ordered list
-        items = [];
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = this._getItem(id, type);
-            if (filter(item)) {
-              items.push(item);
-            }
-          }
-        }
+              // on the end we reset everything
+              if(!count_touches) {
+                  last_move_event = null;
+                  enable_detect = false;
+                  touch_triggered = false;
+                  Hammer.PointerEvent.reset();
+              }
+          });
+      },
 
-        this._sort(items, order);
 
-        for (i = 0, len = items.length; i < len; i++) {
-          ids[i] = items[i][this._fieldId];
-        }
-      }
-      else {
-        // create unordered list
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = this._getItem(id, type);
-            if (filter(item)) {
-              ids.push(item[this._fieldId]);
-            }
+      /**
+       * we have different events for each device/browser
+       * determine what we need and set them in the Hammer.EVENT_TYPES constant
+       */
+      determineEventTypes: function determineEventTypes() {
+          // determine the eventtype we want to set
+          var types;
+
+          // pointerEvents magic
+          if(Hammer.HAS_POINTEREVENTS) {
+              types = Hammer.PointerEvent.getEvents();
           }
-        }
-      }
-    }
-    else {
-      // get all items
-      if (order) {
-        // create an ordered list
-        items = [];
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            items.push(data[id]);
+          // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
+          else if(Hammer.NO_MOUSEEVENTS) {
+              types = [
+                  'touchstart',
+                  'touchmove',
+                  'touchend touchcancel'];
+          }
+          // for non pointer events browsers and mixed browsers,
+          // like chrome on windows8 touch laptop
+          else {
+              types = [
+                  'touchstart mousedown',
+                  'touchmove mousemove',
+                  'touchend touchcancel mouseup'];
           }
-        }
 
-        this._sort(items, order);
+          Hammer.EVENT_TYPES[Hammer.EVENT_START]  = types[0];
+          Hammer.EVENT_TYPES[Hammer.EVENT_MOVE]   = types[1];
+          Hammer.EVENT_TYPES[Hammer.EVENT_END]    = types[2];
+      },
 
-        for (i = 0, len = items.length; i < len; i++) {
-          ids[i] = items[i][this._fieldId];
-        }
-      }
-      else {
-        // create unordered list
-        for (id in data) {
-          if (data.hasOwnProperty(id)) {
-            item = data[id];
-            ids.push(item[this._fieldId]);
+
+      /**
+       * create touchlist depending on the event
+       * @param   {Object}    ev
+       * @param   {String}    eventType   used by the fakemultitouch plugin
+       */
+      getTouchList: function getTouchList(ev/*, eventType*/) {
+          // get the fake pointerEvent touchlist
+          if(Hammer.HAS_POINTEREVENTS) {
+              return Hammer.PointerEvent.getTouchList();
           }
-        }
-      }
-    }
+          // get the touchlist
+          else if(ev.touches) {
+              return ev.touches;
+          }
+          // make fake touchlist from mouse position
+          else {
+              return [{
+                  identifier: 1,
+                  pageX: ev.pageX,
+                  pageY: ev.pageY,
+                  target: ev.target
+              }];
+          }
+      },
 
-    return ids;
-  };
 
-  /**
-   * Returns the DataSet itself. Is overwritten for example by the DataView,
-   * which returns the DataSet it is connected to instead.
-   */
-  DataSet.prototype.getDataSet = function () {
-    return this;
-  };
+      /**
+       * collect event data for Hammer js
+       * @param   {HTMLElement}   element
+       * @param   {String}        eventType        like Hammer.EVENT_MOVE
+       * @param   {Object}        eventData
+       */
+      collectEventData: function collectEventData(element, eventType, ev) {
+          var touches = this.getTouchList(ev, eventType);
 
-  /**
-   * Execute a callback function for every item in the dataset.
-   * @param {function} callback
-   * @param {Object} [options]    Available options:
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] filter fields
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   */
-  DataSet.prototype.forEach = function (callback, options) {
-    var filter = options && options.filter,
-        type = options && options.type || this._options.type,
-        data = this._data,
-        item,
-        id;
+          // find out pointerType
+          var pointerType = Hammer.POINTER_TOUCH;
+          if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
+              pointerType = Hammer.POINTER_MOUSE;
+          }
 
-    if (options && options.order) {
-      // execute forEach on ordered list
-      var items = this.get(options);
+          return {
+              center      : Hammer.utils.getCenter(touches),
+              timeStamp   : new Date().getTime(),
+              target      : ev.target,
+              touches     : touches,
+              eventType   : eventType,
+              pointerType : pointerType,
+              srcEvent    : ev,
 
-      for (var i = 0, len = items.length; i < len; i++) {
-        item = items[i];
-        id = item[this._fieldId];
-        callback(item, id);
-      }
-    }
-    else {
-      // unordered
-      for (id in data) {
-        if (data.hasOwnProperty(id)) {
-          item = this._getItem(id, type);
-          if (!filter || filter(item)) {
-            callback(item, id);
-          }
-        }
-      }
-    }
-  };
+              /**
+               * prevent the browser default actions
+               * mostly used to disable scrolling of the browser
+               */
+              preventDefault: function() {
+                  if(this.srcEvent.preventManipulation) {
+                      this.srcEvent.preventManipulation();
+                  }
 
-  /**
-   * Map every item in the dataset.
-   * @param {function} callback
-   * @param {Object} [options]    Available options:
-   *                              {Object.<String, String>} [type]
-   *                              {String[]} [fields] filter fields
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Object[]} mappedItems
-   */
-  DataSet.prototype.map = function (callback, options) {
-    var filter = options && options.filter,
-        type = options && options.type || this._options.type,
-        mappedItems = [],
-        data = this._data,
-        item;
-
-    // convert and filter items
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        item = this._getItem(id, type);
-        if (!filter || filter(item)) {
-          mappedItems.push(callback(item, id));
-        }
-      }
-    }
+                  if(this.srcEvent.preventDefault) {
+                      this.srcEvent.preventDefault();
+                  }
+              },
 
-    // order items
-    if (options && options.order) {
-      this._sort(mappedItems, options.order);
-    }
+              /**
+               * stop bubbling the event up to its parents
+               */
+              stopPropagation: function() {
+                  this.srcEvent.stopPropagation();
+              },
 
-    return mappedItems;
+              /**
+               * immediately stop gesture detection
+               * might be useful after a swipe was detected
+               * @return {*}
+               */
+              stopDetect: function() {
+                  return Hammer.detection.stopDetect();
+              }
+          };
+      }
   };
 
-  /**
-   * Filter the fields of an item
-   * @param {Object} item
-   * @param {String[]} fields     Field names
-   * @return {Object} filteredItem
-   * @private
-   */
-  DataSet.prototype._filterFields = function (item, fields) {
-    var filteredItem = {};
+  Hammer.PointerEvent = {
+      /**
+       * holds all pointers
+       * @type {Object}
+       */
+      pointers: {},
 
-    for (var field in item) {
-      if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
-        filteredItem[field] = item[field];
-      }
-    }
+      /**
+       * get a list of pointers
+       * @returns {Array}     touchlist
+       */
+      getTouchList: function() {
+          var self = this;
+          var touchlist = [];
 
-    return filteredItem;
-  };
+          // we can use forEach since pointerEvents only is in IE10
+          Object.keys(self.pointers).sort().forEach(function(id) {
+              touchlist.push(self.pointers[id]);
+          });
+          return touchlist;
+      },
 
-  /**
-   * Sort the provided array with items
-   * @param {Object[]} items
-   * @param {String | function} order      A field name or custom sort function.
-   * @private
-   */
-  DataSet.prototype._sort = function (items, order) {
-    if (util.isString(order)) {
-      // order by provided field name
-      var name = order; // field name
-      items.sort(function (a, b) {
-        var av = a[name];
-        var bv = b[name];
-        return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
-      });
-    }
-    else if (typeof order === 'function') {
-      // order by sort function
-      items.sort(order);
-    }
-    // TODO: extend order by an Object {field:String, direction:String}
-    //       where direction can be 'asc' or 'desc'
-    else {
-      throw new TypeError('Order must be a function or a string');
-    }
-  };
+      /**
+       * update the position of a pointer
+       * @param   {String}   type             Hammer.EVENT_END
+       * @param   {Object}   pointerEvent
+       */
+      updatePointer: function(type, pointerEvent) {
+          if(type == Hammer.EVENT_END) {
+              this.pointers = {};
+          }
+          else {
+              pointerEvent.identifier = pointerEvent.pointerId;
+              this.pointers[pointerEvent.pointerId] = pointerEvent;
+          }
 
-  /**
-   * Remove an object by pointer or by id
-   * @param {String | Number | Object | Array} id Object or id, or an array with
-   *                                              objects or ids to be removed
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} removedIds
-   */
-  DataSet.prototype.remove = function (id, senderId) {
-    var removedIds = [],
-        i, len, removedId;
+          return Object.keys(this.pointers).length;
+      },
 
-    if (Array.isArray(id)) {
-      for (i = 0, len = id.length; i < len; i++) {
-        removedId = this._remove(id[i]);
-        if (removedId != null) {
-          removedIds.push(removedId);
-        }
-      }
-    }
-    else {
-      removedId = this._remove(id);
-      if (removedId != null) {
-        removedIds.push(removedId);
-      }
-    }
+      /**
+       * check if ev matches pointertype
+       * @param   {String}        pointerType     Hammer.POINTER_MOUSE
+       * @param   {PointerEvent}  ev
+       */
+      matchType: function(pointerType, ev) {
+          if(!ev.pointerType) {
+              return false;
+          }
 
-    if (removedIds.length) {
-      this._trigger('remove', {items: removedIds}, senderId);
-    }
+          var types = {};
+          types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
+          types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
+          types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
+          return types[pointerType];
+      },
 
-    return removedIds;
-  };
 
-  /**
-   * Remove an item by its id
-   * @param {Number | String | Object} id   id or item
-   * @returns {Number | String | null} id
-   * @private
-   */
-  DataSet.prototype._remove = function (id) {
-    if (util.isNumber(id) || util.isString(id)) {
-      if (this._data[id]) {
-        delete this._data[id];
-        return id;
-      }
-    }
-    else if (id instanceof Object) {
-      var itemId = id[this._fieldId];
-      if (itemId && this._data[itemId]) {
-        delete this._data[itemId];
-        return itemId;
+      /**
+       * get events
+       */
+      getEvents: function() {
+          return [
+              'pointerdown MSPointerDown',
+              'pointermove MSPointerMove',
+              'pointerup pointercancel MSPointerUp MSPointerCancel'
+          ];
+      },
+
+      /**
+       * reset the list
+       */
+      reset: function() {
+          this.pointers = {};
       }
-    }
-    return null;
   };
 
-  /**
-   * Clear the data
-   * @param {String} [senderId] Optional sender id
-   * @return {Array} removedIds    The ids of all removed items
-   */
-  DataSet.prototype.clear = function (senderId) {
-    var ids = Object.keys(this._data);
 
-    this._data = {};
+  Hammer.utils = {
+      /**
+       * extend method,
+       * also used for cloning when dest is an empty object
+       * @param   {Object}    dest
+       * @param   {Object}    src
+  	 * @parm	{Boolean}	merge		do a merge
+       * @returns {Object}    dest
+       */
+      extend: function extend(dest, src, merge) {
+          for (var key in src) {
+  			if(dest[key] !== undefined && merge) {
+  				continue;
+  			}
+              dest[key] = src[key];
+          }
+          return dest;
+      },
 
-    this._trigger('remove', {items: ids}, senderId);
 
-    return ids;
-  };
+      /**
+       * find if a node is in the given parent
+       * used for event delegation tricks
+       * @param   {HTMLElement}   node
+       * @param   {HTMLElement}   parent
+       * @returns {boolean}       has_parent
+       */
+      hasParent: function(node, parent) {
+          while(node){
+              if(node == parent) {
+                  return true;
+              }
+              node = node.parentNode;
+          }
+          return false;
+      },
 
-  /**
-   * Find the item with maximum value of a specified field
-   * @param {String} field
-   * @return {Object | null} item  Item containing max value, or null if no items
-   */
-  DataSet.prototype.max = function (field) {
-    var data = this._data,
-        max = null,
-        maxField = null;
 
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        var item = data[id];
-        var itemField = item[field];
-        if (itemField != null && (!max || itemField > maxField)) {
-          max = item;
-          maxField = itemField;
-        }
-      }
-    }
+      /**
+       * get the center of all the touches
+       * @param   {Array}     touches
+       * @returns {Object}    center
+       */
+      getCenter: function getCenter(touches) {
+          var valuesX = [], valuesY = [];
 
-    return max;
-  };
+          for(var t= 0,len=touches.length; t<len; t++) {
+              valuesX.push(touches[t].pageX);
+              valuesY.push(touches[t].pageY);
+          }
 
-  /**
-   * Find the item with minimum value of a specified field
-   * @param {String} field
-   * @return {Object | null} item  Item containing max value, or null if no items
-   */
-  DataSet.prototype.min = function (field) {
-    var data = this._data,
-        min = null,
-        minField = null;
+          return {
+              pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
+              pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
+          };
+      },
 
-    for (var id in data) {
-      if (data.hasOwnProperty(id)) {
-        var item = data[id];
-        var itemField = item[field];
-        if (itemField != null && (!min || itemField < minField)) {
-          min = item;
-          minField = itemField;
-        }
-      }
-    }
 
-    return min;
-  };
+      /**
+       * calculate the velocity between two points
+       * @param   {Number}    delta_time
+       * @param   {Number}    delta_x
+       * @param   {Number}    delta_y
+       * @returns {Object}    velocity
+       */
+      getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
+          return {
+              x: Math.abs(delta_x / delta_time) || 0,
+              y: Math.abs(delta_y / delta_time) || 0
+          };
+      },
 
-  /**
-   * Find all distinct values of a specified field
-   * @param {String} field
-   * @return {Array} values  Array containing all distinct values. If data items
-   *                         do not contain the specified field are ignored.
-   *                         The returned array is unordered.
-   */
-  DataSet.prototype.distinct = function (field) {
-    var data = this._data;
-    var values = [];
-    var fieldType = this._options.type && this._options.type[field] || null;
-    var count = 0;
-    var i;
 
-    for (var prop in data) {
-      if (data.hasOwnProperty(prop)) {
-        var item = data[prop];
-        var value = item[field];
-        var exists = false;
-        for (i = 0; i < count; i++) {
-          if (values[i] == value) {
-            exists = true;
-            break;
-          }
-        }
-        if (!exists && (value !== undefined)) {
-          values[count] = value;
-          count++;
-        }
-      }
-    }
+      /**
+       * calculate the angle between two coordinates
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {Number}    angle
+       */
+      getAngle: function getAngle(touch1, touch2) {
+          var y = touch2.pageY - touch1.pageY,
+              x = touch2.pageX - touch1.pageX;
+          return Math.atan2(y, x) * 180 / Math.PI;
+      },
 
-    if (fieldType) {
-      for (i = 0; i < values.length; i++) {
-        values[i] = util.convert(values[i], fieldType);
-      }
-    }
 
-    return values;
-  };
+      /**
+       * angle to direction define
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {String}    direction constant, like Hammer.DIRECTION_LEFT
+       */
+      getDirection: function getDirection(touch1, touch2) {
+          var x = Math.abs(touch1.pageX - touch2.pageX),
+              y = Math.abs(touch1.pageY - touch2.pageY);
 
-  /**
-   * Add a single item. Will fail when an item with the same id already exists.
-   * @param {Object} item
-   * @return {String} id
-   * @private
-   */
-  DataSet.prototype._addItem = function (item) {
-    var id = item[this._fieldId];
+          if(x >= y) {
+              return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+          }
+          else {
+              return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+          }
+      },
 
-    if (id != undefined) {
-      // check whether this id is already taken
-      if (this._data[id]) {
-        // item already exists
-        throw new Error('Cannot add item: item with id ' + id + ' already exists');
-      }
-    }
-    else {
-      // generate an id
-      id = util.randomUUID();
-      item[this._fieldId] = id;
-    }
 
-    var d = {};
-    for (var field in item) {
-      if (item.hasOwnProperty(field)) {
-        var fieldType = this._type[field];  // type may be undefined
-        d[field] = util.convert(item[field], fieldType);
-      }
-    }
-    this._data[id] = d;
+      /**
+       * calculate the distance between two touches
+       * @param   {Touch}     touch1
+       * @param   {Touch}     touch2
+       * @returns {Number}    distance
+       */
+      getDistance: function getDistance(touch1, touch2) {
+          var x = touch2.pageX - touch1.pageX,
+              y = touch2.pageY - touch1.pageY;
+          return Math.sqrt((x*x) + (y*y));
+      },
 
-    return id;
-  };
 
-  /**
-   * Get an item. Fields can be converted to a specific type
-   * @param {String} id
-   * @param {Object.<String, String>} [types]  field types to convert
-   * @return {Object | null} item
-   * @private
-   */
-  DataSet.prototype._getItem = function (id, types) {
-    var field, value;
+      /**
+       * calculate the scale factor between two touchLists (fingers)
+       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+       * @param   {Array}     start
+       * @param   {Array}     end
+       * @returns {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;
+      },
 
-    // get the item from the dataset
-    var raw = this._data[id];
-    if (!raw) {
-      return null;
-    }
 
-    // convert the items field types
-    var converted = {};
-    if (types) {
-      for (field in raw) {
-        if (raw.hasOwnProperty(field)) {
-          value = raw[field];
-          converted[field] = util.convert(value, types[field]);
-        }
-      }
-    }
-    else {
-      // no field types specified, no converting needed
-      for (field in raw) {
-        if (raw.hasOwnProperty(field)) {
-          value = raw[field];
-          converted[field] = value;
-        }
-      }
-    }
-    return converted;
-  };
+      /**
+       * calculate the rotation degrees between two touchLists (fingers)
+       * @param   {Array}     start
+       * @param   {Array}     end
+       * @returns {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;
+      },
 
-  /**
-   * Update a single item: merge with existing item.
-   * Will fail when the item has no id, or when there does not exist an item
-   * with the same id.
-   * @param {Object} item
-   * @return {String} id
-   * @private
-   */
-  DataSet.prototype._updateItem = function (item) {
-    var id = item[this._fieldId];
-    if (id == undefined) {
-      throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
-    }
-    var d = this._data[id];
-    if (!d) {
-      // item doesn't exist
-      throw new Error('Cannot update item: no item with id ' + id + ' found');
-    }
 
-    // merge with current item
-    for (var field in item) {
-      if (item.hasOwnProperty(field)) {
-        var fieldType = this._type[field];  // type may be undefined
-        d[field] = util.convert(item[field], fieldType);
-      }
-    }
-
-    return id;
-  };
-
-  /**
-   * Get an array with the column names of a Google DataTable
-   * @param {DataTable} dataTable
-   * @return {String[]} columnNames
-   * @private
-   */
-  DataSet.prototype._getColumnNames = function (dataTable) {
-    var columns = [];
-    for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
-      columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
-    }
-    return columns;
-  };
-
-  /**
-   * Append an item as a row to the dataTable
-   * @param dataTable
-   * @param columns
-   * @param item
-   * @private
-   */
-  DataSet.prototype._appendRow = function (dataTable, columns, item) {
-    var row = dataTable.addRow();
-
-    for (var col = 0, cols = columns.length; col < cols; col++) {
-      var field = columns[col];
-      dataTable.setValue(row, col, item[field]);
-    }
-  };
+      /**
+       * boolean if the direction is vertical
+       * @param    {String}    direction
+       * @returns  {Boolean}   is_vertical
+       */
+      isVertical: function isVertical(direction) {
+          return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
+      },
 
-  module.exports = DataSet;
 
+      /**
+       * stop browser default behavior with css props
+       * @param   {HtmlElement}   element
+       * @param   {Object}        css_props
+       */
+      stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
+          var prop,
+              vendors = ['webkit','khtml','moz','ms','o',''];
 
-/***/ },
-/* 4 */
-/***/ function(module, exports, __webpack_require__) {
+          if(!css_props || !element.style) {
+              return;
+          }
 
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
+          // with css properties for modern browsers
+          for(var i = 0; i < vendors.length; i++) {
+              for(var p in css_props) {
+                  if(css_props.hasOwnProperty(p)) {
+                      prop = p;
 
-  /**
-   * DataView
-   *
-   * a dataview offers a filtered view on a dataset or an other dataview.
-   *
-   * @param {DataSet | DataView} data
-   * @param {Object} [options]   Available options: see method get
-   *
-   * @constructor DataView
-   */
-  function DataView (data, options) {
-    this._data = null;
-    this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
-    this._options = options || {};
-    this._fieldId = 'id'; // name of the field containing id
-    this._subscribers = {}; // event subscribers
+                      // vender prefix at the property
+                      if(vendors[i]) {
+                          prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
+                      }
 
-    var me = this;
-    this.listener = function () {
-      me._onEvent.apply(me, arguments);
-    };
+                      // set the style
+                      element.style[prop] = css_props[p];
+                  }
+              }
+          }
 
-    this.setData(data);
-  }
+          // also the disable onselectstart
+          if(css_props.userSelect == 'none') {
+              element.onselectstart = function() {
+                  return false;
+              };
+          }
+      }
+  };
 
-  // TODO: implement a function .config() to dynamically update things like configured filter
-  // and trigger changes accordingly
+  Hammer.detection = {
+      // contains all registred Hammer.gestures in the correct order
+      gestures: [],
 
-  /**
-   * Set a data source for the view
-   * @param {DataSet | DataView} data
-   */
-  DataView.prototype.setData = function (data) {
-    var ids, i, len;
+      // data of the current Hammer.gesture detection session
+      current: null,
 
-    if (this._data) {
-      // unsubscribe from current dataset
-      if (this._data.unsubscribe) {
-        this._data.unsubscribe('*', this.listener);
-      }
+      // the previous Hammer.gesture session data
+      // is a full clone of the previous gesture.current object
+      previous: null,
 
-      // trigger a remove of all items in memory
-      ids = [];
-      for (var id in this._ids) {
-        if (this._ids.hasOwnProperty(id)) {
-          ids.push(id);
-        }
-      }
-      this._ids = {};
-      this._trigger('remove', {items: ids});
-    }
+      // when this becomes true, no gestures are fired
+      stopped: false,
 
-    this._data = data;
 
-    if (this._data) {
-      // update fieldId
-      this._fieldId = this._options.fieldId ||
-          (this._data && this._data.options && this._data.options.fieldId) ||
-          'id';
+      /**
+       * start Hammer.gesture detection
+       * @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;
+          }
 
-      // trigger an add of all added items
-      ids = this._data.getIds({filter: this._options && this._options.filter});
-      for (i = 0, len = ids.length; i < len; i++) {
-        id = ids[i];
-        this._ids[id] = true;
-      }
-      this._trigger('add', {items: ids});
+          this.stopped = false;
 
-      // subscribe to new dataset
-      if (this._data.on) {
-        this._data.on('*', this.listener);
-      }
-    }
-  };
+          this.current = {
+              inst        : inst, // reference to HammerInstance we're working for
+              startEvent  : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
+              lastEvent   : false, // last eventData
+              name        : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
+          };
 
-  /**
-   * Get data from the data view
-   *
-   * Usage:
-   *
-   *     get()
-   *     get(options: Object)
-   *     get(options: Object, data: Array | DataTable)
-   *
-   *     get(id: Number)
-   *     get(id: Number, options: Object)
-   *     get(id: Number, options: Object, data: Array | DataTable)
-   *
-   *     get(ids: Number[])
-   *     get(ids: Number[], options: Object)
-   *     get(ids: Number[], options: Object, data: Array | DataTable)
-   *
-   * Where:
-   *
-   * {Number | String} id         The id of an item
-   * {Number[] | String{}} ids    An array with ids of items
-   * {Object} options             An Object with options. Available options:
-   *                              {String} [type] Type of data to be returned. Can
-   *                                              be 'DataTable' or 'Array' (default)
-   *                              {Object.<String, String>} [convert]
-   *                              {String[]} [fields] field names to be returned
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * {Array | DataTable} [data]   If provided, items will be appended to this
-   *                              array or table. Required in case of Google
-   *                              DataTable.
-   * @param args
-   */
-  DataView.prototype.get = function (args) {
-    var me = this;
+          this.detect(eventData);
+      },
 
-    // parse the arguments
-    var ids, options, data;
-    var firstType = util.getType(arguments[0]);
-    if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
-      // get(id(s) [, options] [, data])
-      ids = arguments[0];  // can be a single id or an array with ids
-      options = arguments[1];
-      data = arguments[2];
-    }
-    else {
-      // get([, options] [, data])
-      options = arguments[0];
-      data = arguments[1];
-    }
 
-    // extend the options with the default options and provided options
-    var viewOptions = util.extend({}, this._options, options);
+      /**
+       * Hammer.gesture detection
+       * @param   {Object}    eventData
+       * @param   {Object}    eventData
+       */
+      detect: function detect(eventData) {
+          if(!this.current || this.stopped) {
+              return;
+          }
 
-    // create a combined filter method when needed
-    if (this._options.filter && options && options.filter) {
-      viewOptions.filter = function (item) {
-        return me._options.filter(item) && options.filter(item);
-      }
-    }
+          // extend event data with calculations about scale, distance etc
+          eventData = this.extendEventData(eventData);
 
-    // build up the call to the linked data set
-    var getArguments = [];
-    if (ids != undefined) {
-      getArguments.push(ids);
-    }
-    getArguments.push(viewOptions);
-    getArguments.push(data);
+          // instance options
+          var inst_options = this.current.inst.options;
 
-    return this._data && this._data.get.apply(this._data, getArguments);
-  };
+          // call Hammer.gesture handlers
+          for(var g=0,len=this.gestures.length; g<len; g++) {
+              var gesture = this.gestures[g];
 
-  /**
-   * Get ids of all items or from a filtered set of items.
-   * @param {Object} [options]    An Object with options. Available options:
-   *                              {function} [filter] filter items
-   *                              {String | function} [order] Order the items by
-   *                                  a field name or custom sort function.
-   * @return {Array} ids
-   */
-  DataView.prototype.getIds = function (options) {
-    var ids;
+              // only when the instance options have enabled this gesture
+              if(!this.stopped && inst_options[gesture.name] !== false) {
+                  // if a handler returns false, we stop with the detection
+                  if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
+                      this.stopDetect();
+                      break;
+                  }
+              }
+          }
 
-    if (this._data) {
-      var defaultFilter = this._options.filter;
-      var filter;
+          // store as previous event event
+          if(this.current) {
+              this.current.lastEvent = eventData;
+          }
 
-      if (options && options.filter) {
-        if (defaultFilter) {
-          filter = function (item) {
-            return defaultFilter(item) && options.filter(item);
+          // endevent, but not the last touch, so dont stop
+          if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
+              this.stopDetect();
           }
-        }
-        else {
-          filter = options.filter;
-        }
-      }
-      else {
-        filter = defaultFilter;
-      }
 
-      ids = this._data.getIds({
-        filter: filter,
-        order: options && options.order
-      });
-    }
-    else {
-      ids = [];
-    }
+          return eventData;
+      },
 
-    return ids;
-  };
 
-  /**
-   * Get the DataSet to which this DataView is connected. In case there is a chain
-   * of multiple DataViews, the root DataSet of this chain is returned.
-   * @return {DataSet} dataSet
-   */
-  DataView.prototype.getDataSet = function () {
-    var dataSet = this;
-    while (dataSet instanceof DataView) {
-      dataSet = dataSet._data;
-    }
-    return dataSet || null;
-  };
+      /**
+       * 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
+       */
+      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 = Hammer.utils.extend({}, this.current);
 
-  /**
-   * Event listener. Will propagate all events from the connected data set to
-   * the subscribers of the DataView, but will filter the items and only trigger
-   * when there are changes in the filtered data set.
-   * @param {String} event
-   * @param {Object | null} params
-   * @param {String} senderId
-   * @private
-   */
-  DataView.prototype._onEvent = function (event, params, senderId) {
-    var i, len, id, item,
-        ids = params && params.items,
-        data = this._data,
-        added = [],
-        updated = [],
-        removed = [];
+          // reset the current
+          this.current = null;
 
-    if (ids && data) {
-      switch (event) {
-        case 'add':
-          // filter the ids of the added items
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            item = this.get(id);
-            if (item) {
-              this._ids[id] = true;
-              added.push(id);
-            }
-          }
+          // stopped!
+          this.stopped = true;
+      },
 
-          break;
 
-        case 'update':
-          // determine the event from the views viewpoint: an updated
-          // item can be added, updated, or removed from this view.
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            item = this.get(id);
+      /**
+       * extend eventData for Hammer.gestures
+       * @param   {Object}   ev
+       * @returns {Object}   ev
+       */
+      extendEventData: function extendEventData(ev) {
+          var startEv = this.current.startEvent;
 
-            if (item) {
-              if (this._ids[id]) {
-                updated.push(id);
-              }
-              else {
-                this._ids[id] = true;
-                added.push(id);
-              }
-            }
-            else {
-              if (this._ids[id]) {
-                delete this._ids[id];
-                removed.push(id);
-              }
-              else {
-                // nothing interesting for me :-(
+          // if the touches change, set the new touches over the startEvent touches
+          // this because touchevents don't have all the touches on touchstart, or the
+          // user must place his fingers at the EXACT same time on the screen, which is not realistic
+          // but, sometimes it happens that both fingers are touching at the EXACT same time
+          if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
+              // extend 1 level deep to get the touchlist with the touch objects
+              startEv.touches = [];
+              for(var i=0,len=ev.touches.length; i<len; i++) {
+                  startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
               }
-            }
           }
 
-          break;
+          var delta_time = ev.timeStamp - startEv.timeStamp,
+              delta_x = ev.center.pageX - startEv.center.pageX,
+              delta_y = ev.center.pageY - startEv.center.pageY,
+              velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
 
-        case 'remove':
-          // filter the ids of the removed items
-          for (i = 0, len = ids.length; i < len; i++) {
-            id = ids[i];
-            if (this._ids[id]) {
-              delete this._ids[id];
-              removed.push(id);
-            }
-          }
+          Hammer.utils.extend(ev, {
+              deltaTime   : delta_time,
 
-          break;
-      }
+              deltaX      : delta_x,
+              deltaY      : delta_y,
 
-      if (added.length) {
-        this._trigger('add', {items: added}, senderId);
-      }
-      if (updated.length) {
-        this._trigger('update', {items: updated}, senderId);
-      }
-      if (removed.length) {
-        this._trigger('remove', {items: removed}, senderId);
-      }
-    }
-  };
+              velocityX   : velocity.x,
+              velocityY   : velocity.y,
 
-  // copy subscription functionality from DataSet
-  DataView.prototype.on = DataSet.prototype.on;
-  DataView.prototype.off = DataSet.prototype.off;
-  DataView.prototype._trigger = DataSet.prototype._trigger;
+              distance    : Hammer.utils.getDistance(startEv.center, ev.center),
+              angle       : Hammer.utils.getAngle(startEv.center, ev.center),
+              direction   : Hammer.utils.getDirection(startEv.center, ev.center),
 
-  // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
-  DataView.prototype.subscribe = DataView.prototype.on;
-  DataView.prototype.unsubscribe = DataView.prototype.off;
+              scale       : Hammer.utils.getScale(startEv.touches, ev.touches),
+              rotation    : Hammer.utils.getRotation(startEv.touches, ev.touches),
 
-  module.exports = DataView;
+              startEvent  : startEv
+          });
 
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
+          return ev;
+      },
 
-  var Emitter = __webpack_require__(41);
-  var Hammer = __webpack_require__(49);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Range = __webpack_require__(8);
-  var TimeAxis = __webpack_require__(21);
-  var CurrentTime = __webpack_require__(13);
-  var CustomTime = __webpack_require__(14);
-  var ItemSet = __webpack_require__(18);
 
-  /**
-   * Create a timeline visualization
-   * @param {HTMLElement} container
-   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
-   * @param {Object} [options]  See Timeline.setOptions for the available options.
-   * @constructor
-   */
-  function Timeline (container, items, options) {
-    if (!(this instanceof Timeline)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+      /**
+       * register new gesture
+       * @param   {Object}    gesture object, see gestures.js for documentation
+       * @returns {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 me = this;
-    this.defaultOptions = {
-      start: null,
-      end:   null,
+          // extend Hammer default options with the Hammer.gesture options
+          Hammer.utils.extend(Hammer.defaults, options, true);
 
-      autoResize: true,
+          // set its index
+          gesture.index = gesture.index || 1000;
 
-      orientation: 'bottom',
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
-    };
-    this.options = util.deepExtend({}, this.defaultOptions);
+          // add Hammer.gesture to the list
+          this.gestures.push(gesture);
 
-    // Create the DOM, props, and emitter
-    this._create(container);
+          // 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;
+          });
 
-    // all components listed here will be repainted automatically
-    this.components = [];
-
-    this.body = {
-      dom: this.dom,
-      domProps: this.props,
-      emitter: {
-        on: this.on.bind(this),
-        off: this.off.bind(this),
-        emit: this.emit.bind(this)
-      },
-      util: {
-        snap: null, // will be specified after TimeAxis is created
-        toScreen: me._toScreen.bind(me),
-        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
-        toTime: me._toTime.bind(me),
-        toGlobalTime : me._toGlobalTime.bind(me)
+          return this.gestures;
       }
-    };
+  };
 
-    // range
-    this.range = new Range(this.body);
-    this.components.push(this.range);
-    this.body.range = this.range;
 
-    // time axis
-    this.timeAxis = new TimeAxis(this.body);
-    this.components.push(this.timeAxis);
-    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+  Hammer.gestures = Hammer.gestures || {};
 
-    // current time bar
-    this.currentTime = new CurrentTime(this.body);
-    this.components.push(this.currentTime);
+  /**
+   * Custom gestures
+   * ==============================
+   *
+   * Gesture object
+   * --------------------
+   * The object structure of a gesture:
+   *
+   * { name: 'mygesture',
+   *   index: 1337,
+   *   defaults: {
+   *     mygesture_option: true
+   *   }
+   *   handler: function(type, ev, inst) {
+   *     // trigger gesture event
+   *     inst.trigger(this.name, ev);
+   *   }
+   * }
 
-    // custom time bar
-    // Note: time bar will be attached in this.setOptions when selected
-    this.customTime = new CustomTime(this.body);
-    this.components.push(this.customTime);
+   * @param   {String}    name
+   * this should be the name of the gesture, lowercase
+   * it is also being used to disable/enable the gesture per instance config.
+   *
+   * @param   {Number}    [index=1000]
+   * the index of the gesture, where it is going to be in the stack of gestures detection
+   * like when you build an gesture that depends on the drag gesture, it is a good
+   * idea to place it after the index of the drag gesture.
+   *
+   * @param   {Object}    [defaults={}]
+   * the default settings of the gesture. these are added to the instance settings,
+   * and can be overruled per instance. you can also add the name of the gesture,
+   * but this is also added by default (and set to true).
+   *
+   * @param   {Function}  handler
+   * this handles the gesture detection of your custom gesture and receives the
+   * following arguments:
+   *
+   *      @param  {Object}    eventData
+   *      event data containing the following properties:
+   *          timeStamp   {Number}        time the event occurred
+   *          target      {HTMLElement}   target element
+   *          touches     {Array}         touches (fingers, pointers, mouse) on the screen
+   *          pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
+   *          center      {Object}        center position of the touches. contains pageX and pageY
+   *          deltaTime   {Number}        the total time of the touches in the screen
+   *          deltaX      {Number}        the delta on x axis we haved moved
+   *          deltaY      {Number}        the delta on y axis we haved moved
+   *          velocityX   {Number}        the velocity on the x
+   *          velocityY   {Number}        the velocity on y
+   *          angle       {Number}        the angle we are moving
+   *          direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
+   *          distance    {Number}        the distance we haved moved
+   *          scale       {Number}        scaling of the touches, needs 2 touches
+   *          rotation    {Number}        rotation of the touches, needs 2 touches *
+   *          eventType   {String}        matches Hammer.EVENT_START|MOVE|END
+   *          srcEvent    {Object}        the source event, like TouchStart or MouseDown *
+   *          startEvent  {Object}        contains the same properties as above,
+   *                                      but from the first touch. this is used to calculate
+   *                                      distances, deltaTime, scaling etc
+   *
+   *      @param  {Hammer.Instance}    inst
+   *      the instance we are doing the detection for. you can get the options from
+   *      the inst.options object and trigger the gesture event by calling inst.trigger
+   *
+   *
+   * Handle gestures
+   * --------------------
+   * inside the handler you can get/set Hammer.detection.current. This is the current
+   * detection session. It has the following properties
+   *      @param  {String}    name
+   *      contains the name of the gesture we have detected. it has not a real function,
+   *      only to check in other gestures if something is detected.
+   *      like in the drag gesture we set it to 'drag' and in the swipe gesture we can
+   *      check if the current gesture is 'drag' by accessing Hammer.detection.current.name
+   *
+   *      @readonly
+   *      @param  {Hammer.Instance}    inst
+   *      the instance we do the detection for
+   *
+   *      @readonly
+   *      @param  {Object}    startEvent
+   *      contains the properties of the first gesture detection in this session.
+   *      Used for calculations about timing, distance, etc.
+   *
+   *      @readonly
+   *      @param  {Object}    lastEvent
+   *      contains all the properties of the last gesture detect in this session.
+   *
+   * after the gesture detection session has been completed (user has released the screen)
+   * the Hammer.detection.current object is copied into Hammer.detection.previous,
+   * this is usefull for gestures like doubletap, where you need to know if the
+   * previous gesture was a tap
+   *
+   * options that have been set by the instance can be received by calling inst.options
+   *
+   * You can trigger a gesture event by calling inst.trigger("mygesture", event).
+   * The first param is the name of your gesture, the second the event argument
+   *
+   *
+   * Register gestures
+   * --------------------
+   * When an gesture is added to the Hammer.gestures object, it is auto registered
+   * at the setup of the first Hammer instance. You can also call Hammer.detection.register
+   * manually and pass your gesture object as a param
+   *
+   */
 
-    // item set
-    this.itemSet = new ItemSet(this.body);
-    this.components.push(this.itemSet);
+  /**
+   * Hold
+   * Touch stays at the same place for x time
+   * @events  hold
+   */
+  Hammer.gestures.Hold = {
+      name: 'hold',
+      index: 10,
+      defaults: {
+          hold_timeout	: 500,
+          hold_threshold	: 1
+      },
+      timer: null,
+      handler: function holdGesture(ev, inst) {
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  // clear any running timers
+                  clearTimeout(this.timer);
 
-    this.itemsData = null;      // DataSet
-    this.groupsData = null;     // DataSet
+                  // set the gesture so we can check in the timeout if it still is
+                  Hammer.detection.current.name = this.name;
 
-    // apply options
-    if (options) {
-      this.setOptions(options);
-    }
+                  // set timer and if after the timeout it still is hold,
+                  // we trigger the hold event
+                  this.timer = setTimeout(function() {
+                      if(Hammer.detection.current.name == 'hold') {
+                          inst.trigger('hold', ev);
+                      }
+                  }, inst.options.hold_timeout);
+                  break;
 
-    // create itemset
-    if (items) {
-      this.setItems(items);
-    }
-    else {
-      this.redraw();
-    }
-  }
+              // when you move or end we clear the timer
+              case Hammer.EVENT_MOVE:
+                  if(ev.distance > inst.options.hold_threshold) {
+                      clearTimeout(this.timer);
+                  }
+                  break;
+
+              case Hammer.EVENT_END:
+                  clearTimeout(this.timer);
+                  break;
+          }
+      }
+  };
 
-  // turn Timeline into an event emitter
-  Emitter(Timeline.prototype);
 
   /**
-   * Create the main DOM for the Timeline: a root panel containing left, right,
-   * top, bottom, content, and background panel.
-   * @param {Element} container  The container element where the Timeline will
-   *                             be attached.
-   * @private
+   * Tap/DoubleTap
+   * Quick touch at a place or double at the same place
+   * @events  tap, doubletap
    */
-  Timeline.prototype._create = function (container) {
-    this.dom = {};
+  Hammer.gestures.Tap = {
+      name: 'tap',
+      index: 100,
+      defaults: {
+          tap_max_touchtime	: 250,
+          tap_max_distance	: 10,
+  		tap_always			: true,
+          doubletap_distance	: 20,
+          doubletap_interval	: 300
+      },
+      handler: function tapGesture(ev, inst) {
+          if(ev.eventType == Hammer.EVENT_END) {
+              // previous gesture, for the double tap since these are two different gesture detections
+              var prev = Hammer.detection.previous,
+  				did_doubletap = false;
 
-    this.dom.root                 = document.createElement('div');
-    this.dom.background           = document.createElement('div');
-    this.dom.backgroundVertical   = document.createElement('div');
-    this.dom.backgroundHorizontal = document.createElement('div');
-    this.dom.centerContainer      = document.createElement('div');
-    this.dom.leftContainer        = document.createElement('div');
-    this.dom.rightContainer       = document.createElement('div');
-    this.dom.center               = document.createElement('div');
-    this.dom.left                 = document.createElement('div');
-    this.dom.right                = document.createElement('div');
-    this.dom.top                  = document.createElement('div');
-    this.dom.bottom               = document.createElement('div');
-    this.dom.shadowTop            = document.createElement('div');
-    this.dom.shadowBottom         = document.createElement('div');
-    this.dom.shadowTopLeft        = document.createElement('div');
-    this.dom.shadowBottomLeft     = document.createElement('div');
-    this.dom.shadowTopRight       = document.createElement('div');
-    this.dom.shadowBottomRight    = document.createElement('div');
+              // when the touchtime is higher then the max touch time
+              // or when the moving distance is too much
+              if(ev.deltaTime > inst.options.tap_max_touchtime ||
+                  ev.distance > inst.options.tap_max_distance) {
+                  return;
+              }
 
-    this.dom.background.className           = 'vispanel background';
-    this.dom.backgroundVertical.className   = 'vispanel background vertical';
-    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-    this.dom.centerContainer.className      = 'vispanel center';
-    this.dom.leftContainer.className        = 'vispanel left';
-    this.dom.rightContainer.className       = 'vispanel right';
-    this.dom.top.className                  = 'vispanel top';
-    this.dom.bottom.className               = 'vispanel bottom';
-    this.dom.left.className                 = 'content';
-    this.dom.center.className               = 'content';
-    this.dom.right.className                = 'content';
-    this.dom.shadowTop.className            = 'shadow top';
-    this.dom.shadowBottom.className         = 'shadow bottom';
-    this.dom.shadowTopLeft.className        = 'shadow top';
-    this.dom.shadowBottomLeft.className     = 'shadow bottom';
-    this.dom.shadowTopRight.className       = 'shadow top';
-    this.dom.shadowBottomRight.className    = 'shadow bottom';
+              // check if double tap
+              if(prev && prev.name == 'tap' &&
+                  (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
+                  ev.distance < inst.options.doubletap_distance) {
+  				inst.trigger('doubletap', ev);
+  				did_doubletap = true;
+              }
 
-    this.dom.root.appendChild(this.dom.background);
-    this.dom.root.appendChild(this.dom.backgroundVertical);
-    this.dom.root.appendChild(this.dom.backgroundHorizontal);
-    this.dom.root.appendChild(this.dom.centerContainer);
-    this.dom.root.appendChild(this.dom.leftContainer);
-    this.dom.root.appendChild(this.dom.rightContainer);
-    this.dom.root.appendChild(this.dom.top);
-    this.dom.root.appendChild(this.dom.bottom);
+  			// do a single tap
+  			if(!did_doubletap || inst.options.tap_always) {
+  				Hammer.detection.current.name = 'tap';
+  				inst.trigger(Hammer.detection.current.name, ev);
+  			}
+          }
+      }
+  };
 
-    this.dom.centerContainer.appendChild(this.dom.center);
-    this.dom.leftContainer.appendChild(this.dom.left);
-    this.dom.rightContainer.appendChild(this.dom.right);
 
-    this.dom.centerContainer.appendChild(this.dom.shadowTop);
-    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
-    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
-    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
-    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
-    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+  /**
+   * Swipe
+   * triggers swipe events when the end velocity is above the threshold
+   * @events  swipe, swipeleft, swiperight, swipeup, swipedown
+   */
+  Hammer.gestures.Swipe = {
+      name: 'swipe',
+      index: 40,
+      defaults: {
+          // set 0 for unlimited, but this can conflict with transform
+          swipe_max_touches  : 1,
+          swipe_velocity     : 0.7
+      },
+      handler: function swipeGesture(ev, inst) {
+          if(ev.eventType == Hammer.EVENT_END) {
+              // max touches
+              if(inst.options.swipe_max_touches > 0 &&
+                  ev.touches.length > inst.options.swipe_max_touches) {
+                  return;
+              }
 
-    this.on('rangechange', this.redraw.bind(this));
-    this.on('change', this.redraw.bind(this));
-    this.on('touch', this._onTouch.bind(this));
-    this.on('pinch', this._onPinch.bind(this));
-    this.on('dragstart', this._onDragStart.bind(this));
-    this.on('drag', this._onDrag.bind(this));
+              // when the distance we moved is too small we skip this gesture
+              // or we can be already in dragging
+              if(ev.velocityX > inst.options.swipe_velocity ||
+                  ev.velocityY > inst.options.swipe_velocity) {
+                  // trigger swipe events
+                  inst.trigger(this.name, ev);
+                  inst.trigger(this.name + ev.direction, ev);
+              }
+          }
+      }
+  };
 
-    // create event listeners for all interesting events, these events will be
-    // emitted via emitter
-    this.hammer = Hammer(this.dom.root, {
-      prevent_default: true
-    });
-    this.listeners = {};
 
-    var me = this;
-    var events = [
-      'touch', 'pinch',
-      'tap', 'doubletap', 'hold',
-      'dragstart', 'drag', 'dragend',
-      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
-    ];
-    events.forEach(function (event) {
-      var listener = function () {
-        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-        me.emit.apply(me, args);
-      };
-      me.hammer.on(event, listener);
-      me.listeners[event] = listener;
-    });
+  /**
+   * Drag
+   * Move with x fingers (default 1) around on the page. Blocking the scrolling when
+   * moving left and right is a good practice. When all the drag events are blocking
+   * you disable scrolling on that area.
+   * @events  drag, drapleft, dragright, dragup, dragdown
+   */
+  Hammer.gestures.Drag = {
+      name: 'drag',
+      index: 50,
+      defaults: {
+          drag_min_distance : 10,
+          // set 0 for unlimited, but this can conflict with transform
+          drag_max_touches  : 1,
+          // 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
+          drag_block_horizontal   : false,
+          drag_block_vertical     : false,
+          // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
+          // It disallows vertical directions if the initial direction was horizontal, and vice versa.
+          drag_lock_to_axis       : false,
+          // drag lock only kicks in when distance > drag_lock_min_distance
+          // This way, locking occurs only when the distance has become large enough to reliably determine the direction
+          drag_lock_min_distance : 25
+      },
+      triggered: false,
+      handler: function dragGesture(ev, inst) {
+          // current gesture isnt drag, but dragged is true
+          // this means an other gesture is busy. now call dragend
+          if(Hammer.detection.current.name != this.name && this.triggered) {
+              inst.trigger(this.name +'end', ev);
+              this.triggered = false;
+              return;
+          }
 
-    // size properties of each of the panels
-    this.props = {
-      root: {},
-      background: {},
-      centerContainer: {},
-      leftContainer: {},
-      rightContainer: {},
-      center: {},
-      left: {},
-      right: {},
-      top: {},
-      bottom: {},
-      border: {},
-      scrollTop: 0,
-      scrollTopMin: 0
-    };
-    this.touch = {}; // store state information needed for touch events
+          // max touches
+          if(inst.options.drag_max_touches > 0 &&
+              ev.touches.length > inst.options.drag_max_touches) {
+              return;
+          }
 
-    // attach the root panel to the provided container
-    if (!container) throw new Error('No container provided');
-    container.appendChild(this.dom.root);
-  };
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  this.triggered = false;
+                  break;
 
-  /**
-   * Destroy the Timeline, clean up all DOM elements and event listeners.
-   */
-  Timeline.prototype.destroy = function () {
-    // unbind datasets
-    this.clear();
+              case Hammer.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.drag_min_distance &&
+                      Hammer.detection.current.name != this.name) {
+                      return;
+                  }
 
-    // remove all event listeners
-    this.off();
+                  // we are dragging!
+                  Hammer.detection.current.name = this.name;
 
-    // stop checking for changed size
-    this._stopAutoResize();
+                  // lock drag to axis?
+                  if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
+                      ev.drag_locked_to_axis = true;
+                  }
+                  var last_direction = Hammer.detection.current.lastEvent.direction;
+                  if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
+                      // keep direction on the axis that the drag gesture started on
+                      if(Hammer.utils.isVertical(last_direction)) {
+                          ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+                      }
+                      else {
+                          ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+                      }
+                  }
 
-    // remove from DOM
-    if (this.dom.root.parentNode) {
-      this.dom.root.parentNode.removeChild(this.dom.root);
-    }
-    this.dom = null;
+                  // first time, trigger dragstart event
+                  if(!this.triggered) {
+                      inst.trigger(this.name +'start', ev);
+                      this.triggered = true;
+                  }
 
-    // cleanup hammer touch events
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
-      }
-    }
-    this.listeners = null;
-    this.hammer = null;
+                  // trigger normal event
+                  inst.trigger(this.name, ev);
 
-    // give all components the opportunity to cleanup
-    this.components.forEach(function (component) {
-      component.destroy();
-    });
+                  // direction event, like dragdown
+                  inst.trigger(this.name + ev.direction, ev);
 
-    this.body = null;
+                  // block the browser events
+                  if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
+                      (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
+                      ev.preventDefault();
+                  }
+                  break;
+
+              case Hammer.EVENT_END:
+                  // trigger dragend
+                  if(this.triggered) {
+                      inst.trigger(this.name +'end', ev);
+                  }
+
+                  this.triggered = false;
+                  break;
+          }
+      }
   };
 
+
   /**
-   * Set options. Options will be passed to all components loaded in the Timeline.
-   * @param {Object} [options]
-   *                           {String} orientation
-   *                              Vertical orientation for the Timeline,
-   *                              can be 'bottom' (default) or 'top'.
-   *                           {String | Number} width
-   *                              Width for the timeline, a number in pixels or
-   *                              a css string like '1000px' or '75%'. '100%' by default.
-   *                           {String | Number} height
-   *                              Fixed height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'. If undefined,
-   *                              The Timeline will automatically size such that
-   *                              its contents fit.
-   *                           {String | Number} minHeight
-   *                              Minimum height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {String | Number} maxHeight
-   *                              Maximum height for the Timeline, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {Number | Date | String} start
-   *                              Start date for the visible window
-   *                           {Number | Date | String} end
-   *                              End date for the visible window
+   * Transform
+   * User want to scale or rotate with 2 fingers
+   * @events  transform, pinch, pinchin, pinchout, rotate
    */
-  Timeline.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the known options
-      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
-      util.selectiveExtend(fields, this.options, options);
-
-      // enable/disable autoResize
-      this._initAutoResize();
-    }
-
-    // propagate options to all components
-    this.components.forEach(function (component) {
-      component.setOptions(options);
-    });
+  Hammer.gestures.Transform = {
+      name: 'transform',
+      index: 45,
+      defaults: {
+          // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
+          transform_min_scale     : 0.01,
+          // rotation in degrees
+          transform_min_rotation  : 1,
+          // prevent default browser behavior when two touches are on the screen
+          // but it makes the element a blocking element
+          // when you are using the transform gesture, it is a good practice to set this true
+          transform_always_block  : false
+      },
+      triggered: false,
+      handler: function transformGesture(ev, inst) {
+          // current gesture isnt drag, but dragged is true
+          // this means an other gesture is busy. now call dragend
+          if(Hammer.detection.current.name != this.name && this.triggered) {
+              inst.trigger(this.name +'end', ev);
+              this.triggered = false;
+              return;
+          }
 
-    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
-    if (options && options.order) {
-      throw new Error('Option order is deprecated. There is no replacement for this feature.');
-    }
+          // atleast multitouch
+          if(ev.touches.length < 2) {
+              return;
+          }
 
-    // redraw everything
-    this.redraw();
-  };
+          // prevent default when two fingers are on the screen
+          if(inst.options.transform_always_block) {
+              ev.preventDefault();
+          }
 
-  /**
-   * Set a custom time bar
-   * @param {Date} time
-   */
-  Timeline.prototype.setCustomTime = function (time) {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+          switch(ev.eventType) {
+              case Hammer.EVENT_START:
+                  this.triggered = false;
+                  break;
 
-    this.customTime.setCustomTime(time);
-  };
+              case Hammer.EVENT_MOVE:
+                  var scale_threshold = Math.abs(1-ev.scale);
+                  var rotation_threshold = Math.abs(ev.rotation);
 
-  /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
-   */
-  Timeline.prototype.getCustomTime = function() {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+                  // when the distance we moved is too small we skip this gesture
+                  // or we can be already in dragging
+                  if(scale_threshold < inst.options.transform_min_scale &&
+                      rotation_threshold < inst.options.transform_min_rotation) {
+                      return;
+                  }
 
-    return this.customTime.getCustomTime();
-  };
+                  // we are transforming!
+                  Hammer.detection.current.name = this.name;
 
-  /**
-   * Set items
-   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
-   */
-  Timeline.prototype.setItems = function(items) {
-    var initialLoad = (this.itemsData == null);
+                  // first time, trigger dragstart event
+                  if(!this.triggered) {
+                      inst.trigger(this.name +'start', ev);
+                      this.triggered = true;
+                  }
 
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!items) {
-      newDataSet = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      newDataSet = items;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(items, {
-        type: {
-          start: 'Date',
-          end: 'Date'
-        }
-      });
-    }
+                  inst.trigger(this.name, ev); // basic transform event
 
-    // set items
-    this.itemsData = newDataSet;
-    this.itemSet && this.itemSet.setItems(newDataSet);
+                  // trigger rotate event
+                  if(rotation_threshold > inst.options.transform_min_rotation) {
+                      inst.trigger('rotate', ev);
+                  }
 
-    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
-      this.fit();
+                  // trigger pinch event
+                  if(scale_threshold > inst.options.transform_min_scale) {
+                      inst.trigger('pinch', ev);
+                      inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
+                  }
+                  break;
 
-      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
-      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+              case Hammer.EVENT_END:
+                  // trigger dragend
+                  if(this.triggered) {
+                      inst.trigger(this.name +'end', ev);
+                  }
 
-      this.setWindow(start, end);
-    }
+                  this.triggered = false;
+                  break;
+          }
+      }
   };
 
-  /**
-   * Set groups
-   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
-   */
-  Timeline.prototype.setGroups = function(groups) {
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!groups) {
-      newDataSet = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      newDataSet = groups;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(groups);
-    }
-
-    this.groupsData = newDataSet;
-    this.itemSet.setGroups(newDataSet);
-  };
 
   /**
-   * Clear the Timeline. By Default, items, groups and options are cleared.
-   * Example usage:
-   *
-   *     timeline.clear();                // clear items, groups, and options
-   *     timeline.clear({options: true}); // clear options only
-   *
-   * @param {Object} [what]      Optionally specify what to clear. By default:
-   *                             {items: true, groups: true, options: true}
+   * Touch
+   * Called as first, tells the user has touched the screen
+   * @events  touch
    */
-  Timeline.prototype.clear = function(what) {
-    // clear items
-    if (!what || what.items) {
-      this.setItems(null);
-    }
+  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
+          prevent_default: false,
 
-    // clear groups
-    if (!what || what.groups) {
-      this.setGroups(null);
-    }
+          // disable mouse events, so only touch (or pen!) input triggers events
+          prevent_mouseevents: false
+      },
+      handler: function touchGesture(ev, inst) {
+          if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
+              ev.stopDetect();
+              return;
+          }
 
-    // clear options of timeline and of each of the components
-    if (!what || what.options) {
-      this.components.forEach(function (component) {
-        component.setOptions(component.defaultOptions);
-      });
+          if(inst.options.prevent_default) {
+              ev.preventDefault();
+          }
 
-      this.setOptions(this.defaultOptions); // this will also do a redraw
-    }
+          if(ev.eventType ==  Hammer.EVENT_START) {
+              inst.trigger(this.name, ev);
+          }
+      }
   };
 
+
   /**
-   * Set Timeline window such that it fits all items
+   * Release
+   * Called as last, tells the user has released the screen
+   * @events  release
    */
-  Timeline.prototype.fit = function() {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
-
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
+  Hammer.gestures.Release = {
+      name: 'release',
+      index: Infinity,
+      handler: function releaseGesture(ev, inst) {
+          if(ev.eventType ==  Hammer.EVENT_END) {
+              inst.trigger(this.name, ev);
+          }
       }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
-
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
-    }
-
-    this.range.setRange(start, end);
   };
 
-  /**
-   * Get the data range of the item set.
-   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
-   *                                          When no minimum is found, min==null
-   *                                          When no maximum is found, max==null
-   */
-  Timeline.prototype.getItemRange = function() {
-    // calculate min from start filed
-    var dataset = this.itemsData.getDataSet(),
-        min = null,
-        max = null;
-
-    if (dataset) {
-      // calculate the minimum value of the field 'start'
-      var minItem = dataset.min('start');
-      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-      // Note: we convert first to Date and then to number because else
-      // a conversion from ISODate to Number will fail
+  // node export
+  if(typeof module === 'object' && typeof module.exports === 'object'){
+      module.exports = Hammer;
+  }
+  // just window export
+  else {
+      window.Hammer = Hammer;
 
-      // calculate maximum value of fields 'start' and 'end'
-      var maxStartItem = dataset.max('start');
-      if (maxStartItem) {
-        max = util.convert(maxStartItem.start, 'Date').valueOf();
-      }
-      var maxEndItem = dataset.max('end');
-      if (maxEndItem) {
-        if (max == null) {
-          max = util.convert(maxEndItem.end, 'Date').valueOf();
-        }
-        else {
-          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
-        }
+      // requireJS module definition
+      if(typeof window.define === 'function' && window.define.amd) {
+          window.define('hammer', [], function() {
+              return Hammer;
+          });
       }
-    }
+  }
+  })(this);
 
-    return {
-      min: (min != null) ? new Date(min) : null,
-      max: (max != null) ? new Date(max) : null
-    };
-  };
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {Array} [ids] An array with zero or more id's of the items to be
-   *                      selected. If ids is an empty array, all items will be
-   *                      unselected.
-   */
-  Timeline.prototype.setSelection = function(ids) {
-    this.itemSet && this.itemSet.setSelection(ids);
-  };
+  // 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__(5);
 
-  /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
-   */
-  Timeline.prototype.getSelection = function() {
-    return this.itemSet && this.itemSet.getSelection() || [];
-  };
 
-  /**
-   * Set the visible window. Both parameters are optional, you can change only
-   * start or only end. Syntax:
-   *
-   *     TimeLine.setWindow(start, end)
-   *     TimeLine.setWindow(range)
-   *
-   * Where start and end can be a Date, number, or string, and range is an
-   * object with properties start and end.
-   *
-   * @param {Date | Number | String | Object} [start] Start date of visible window
-   * @param {Date | Number | String} [end]   End date of visible window
-   */
-  Timeline.prototype.setWindow = function(start, end) {
-    if (arguments.length == 1) {
-      var range = arguments[0];
-      this.range.setRange(range.start, range.end);
-    }
-    else {
-      this.range.setRange(start, end);
-    }
-  };
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Get the visible window
-   * @return {{start: Date, end: Date}}   Visible range
-   */
-  Timeline.prototype.getWindow = function() {
-    var range = this.range.getRange();
-    return {
-      start: new Date(range.start),
-      end: new Date(range.end)
-    };
-  };
+  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
+  //! version : 2.7.0
+  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+  //! license : MIT
+  //! momentjs.com
 
-  /**
-   * Force a redraw of the Timeline. Can be useful to manually redraw when
-   * option autoResize=false
-   */
-  Timeline.prototype.redraw = function() {
-    var resized = false,
-        options = this.options,
-        props = this.props,
-        dom = this.dom;
+  (function (undefined) {
 
-    if (!dom) return; // when destroyed
+      /************************************
+          Constants
+      ************************************/
 
-    // update class names
-    dom.root.className = 'vis timeline root ' + options.orientation;
+      var moment,
+          VERSION = "2.7.0",
+          // the global-scope this is NOT the global object in Node.js
+          globalScope = typeof global !== 'undefined' ? global : this,
+          oldGlobalMoment,
+          round = Math.round,
+          i,
 
-    // update root width and height options
-    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
-    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
-    dom.root.style.width = util.option.asSize(options.width, '');
+          YEAR = 0,
+          MONTH = 1,
+          DATE = 2,
+          HOUR = 3,
+          MINUTE = 4,
+          SECOND = 5,
+          MILLISECOND = 6,
 
-    // calculate border widths
-    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
-    props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
-    props.border.bottom = props.border.top;
-    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+          // internal storage for language config files
+          languages = {},
 
-    // calculate the heights. If any of the side panels is empty, we set the height to
-    // minus the border width, such that the border will be invisible
-    props.center.height = dom.center.offsetHeight;
-    props.left.height   = dom.left.offsetHeight;
-    props.right.height  = dom.right.offsetHeight;
-    props.top.height    = dom.top.clientHeight    || -props.border.top;
-    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
+          // moment internal properties
+          momentProperties = {
+              _isAMomentObject: null,
+              _i : null,
+              _f : null,
+              _l : null,
+              _strict : null,
+              _tzm : null,
+              _isUTC : null,
+              _offset : null,  // optional. Combine with _isUTC
+              _pf : null,
+              _lang : null  // optional
+          },
 
-    // TODO: compensate borders when any of the panels is empty.
+          // check for nodeJS
+          hasModule = (typeof module !== 'undefined' && module.exports),
 
-    // apply auto height
-    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
-    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
-    var autoHeight = props.top.height + contentHeight + props.bottom.height +
-        borderRootHeight + props.border.top + props.border.bottom;
-    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
+          // ASP.NET json date format regex
+          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
+          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
 
-    // calculate heights of the content panels
-    props.root.height = dom.root.offsetHeight;
-    props.background.height = props.root.height - borderRootHeight;
-    var containerHeight = props.root.height - props.top.height - props.bottom.height -
-        borderRootHeight;
-    props.centerContainer.height  = containerHeight;
-    props.leftContainer.height    = containerHeight;
-    props.rightContainer.height   = props.leftContainer.height;
+          // 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)$/,
 
-    // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
-    props.background.width = props.root.width - borderRootWidth;
-    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
-    props.leftContainer.width = props.left.width;
-    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
-    props.rightContainer.width = props.right.width;
-    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-    props.center.width          = centerWidth;
-    props.centerContainer.width = centerWidth;
-    props.top.width             = centerWidth;
-    props.bottom.width          = centerWidth;
+          // 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|zz?|ZZ?|.)/g,
+          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
 
-    // resize the panels
-    dom.background.style.height           = props.background.height + 'px';
-    dom.backgroundVertical.style.height   = props.background.height + 'px';
-    dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
-    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+          // 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)
+          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
+          parseTokenOrdinal = /\d{1,2}/,
 
-    dom.background.style.width            = props.background.width + 'px';
-    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-    dom.centerContainer.style.width       = props.center.width + 'px';
-    dom.top.style.width                   = props.top.width + 'px';
-    dom.bottom.style.width                = props.bottom.width + 'px';
+          //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
 
-    // reposition the panels
-    dom.background.style.left           = '0';
-    dom.background.style.top            = '0';
-    dom.backgroundVertical.style.left   = props.left.width + 'px';
-    dom.backgroundVertical.style.top    = '0';
-    dom.backgroundHorizontal.style.left = '0';
-    dom.backgroundHorizontal.style.top  = props.top.height + 'px';
-    dom.centerContainer.style.left      = props.left.width + 'px';
-    dom.centerContainer.style.top       = props.top.height + 'px';
-    dom.leftContainer.style.left        = '0';
-    dom.leftContainer.style.top         = props.top.height + 'px';
-    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-    dom.rightContainer.style.top        = props.top.height + 'px';
-    dom.top.style.left                  = props.left.width + 'px';
-    dom.top.style.top                   = '0';
-    dom.bottom.style.left               = props.left.width + 'px';
-    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
-
-    // update the scrollTop, feasible range for the offset can be changed
-    // when the height of the Timeline or of the contents of the center changed
-    this._updateScrollTop();
+          // 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)?)?$/,
 
-    // reposition the scrollable contents
-    var offset = this.props.scrollTop;
-    if (options.orientation == 'bottom') {
-      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-          this.props.border.top - this.props.border.bottom, 0);
-    }
-    dom.center.style.left = '0';
-    dom.center.style.top  = offset + 'px';
-    dom.left.style.left   = '0';
-    dom.left.style.top    = offset + 'px';
-    dom.right.style.left  = '0';
-    dom.right.style.top   = offset + 'px';
+          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
 
-    // show shadows when vertical scrolling is available
-    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
-    dom.shadowTop.style.visibility          = visibilityTop;
-    dom.shadowBottom.style.visibility       = visibilityBottom;
-    dom.shadowTopLeft.style.visibility      = visibilityTop;
-    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
-    dom.shadowTopRight.style.visibility     = visibilityTop;
-    dom.shadowBottomRight.style.visibility  = visibilityBottom;
+          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}/]
+          ],
 
-    // redraw all components
-    this.components.forEach(function (component) {
-      resized = component.redraw() || resized;
-    });
-    if (resized) {
-      // keep repainting until all sizes are settled
-      this.redraw();
-    }
-  };
+          // 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/]
+          ],
 
-  // TODO: deprecated since version 1.1.0, remove some day
-  Timeline.prototype.repaint = function () {
-      throw new Error('Function repaint is deprecated. Use redraw instead.');
-  };
+          // timezone chunker "+10:00" > ["10", "00"] or "-1530" > ["-15", "30"]
+          parseTimezoneChunker = /([\+\-]|\d\d)/gi,
 
-  /**
-   * Convert a position on screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toTime = function(x) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+          // 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
+          },
 
+          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'
+          },
 
-  /**
-   * Convert a position on the global screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toGlobalTime = function(x) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+          camelFunctions = {
+              dayofyear : 'dayOfYear',
+              isoweekday : 'isoWeekday',
+              isoweek : 'isoWeek',
+              weekyear : 'weekYear',
+              isoweekyear : 'isoWeekYear'
+          },
 
-  /**
-   * Convert a datetime (Date object) into a position on the screen
-   * @param {Date}   time A date
-   * @return {int}   x    The position on the screen in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toScreen = function(time) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          // format function strings
+          formatFunctions = {},
 
+          // default relative time thresholds
+          relativeTimeThresholds = {
+            s: 45,   //seconds to minutes
+            m: 45,   //minutes to hours
+            h: 22,   //hours to days
+            dd: 25,  //days to month (month == 1)
+            dm: 45,  //days to months (months > 1)
+            dy: 345  //days to year
+          },
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Timeline.prototype._toGlobalScreen = function(time) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          // tokens to ordinalize and pad
+          ordinalizeTokens = 'DDD w W M D d'.split(' '),
+          paddedTokens = 'M D H h m s w W'.split(' '),
 
+          formatTokenFunctions = {
+              M    : function () {
+                  return this.month() + 1;
+              },
+              MMM  : function (format) {
+                  return this.lang().monthsShort(this, format);
+              },
+              MMMM : function (format) {
+                  return this.lang().months(this, format);
+              },
+              D    : function () {
+                  return this.date();
+              },
+              DDD  : function () {
+                  return this.dayOfYear();
+              },
+              d    : function () {
+                  return this.day();
+              },
+              dd   : function (format) {
+                  return this.lang().weekdaysMin(this, format);
+              },
+              ddd  : function (format) {
+                  return this.lang().weekdaysShort(this, format);
+              },
+              dddd : function (format) {
+                  return this.lang().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.lang().meridiem(this.hours(), this.minutes(), true);
+              },
+              A    : function () {
+                  return this.lang().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.zone(),
+                      b = "+";
+                  if (a < 0) {
+                      a = -a;
+                      b = "-";
+                  }
+                  return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
+              },
+              ZZ   : function () {
+                  var a = -this.zone(),
+                      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.unix();
+              },
+              Q : function () {
+                  return this.quarter();
+              }
+          },
 
-  /**
-   * Initialize watching when option autoResize is true
-   * @private
-   */
-  Timeline.prototype._initAutoResize = function () {
-    if (this.options.autoResize == true) {
-      this._startAutoResize();
-    }
-    else {
-      this._stopAutoResize();
-    }
-  };
+          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
 
-  /**
-   * Watch for changes in the size of the container. On resize, the Panel will
-   * automatically redraw itself.
-   * @private
-   */
-  Timeline.prototype._startAutoResize = function () {
-    var me = this;
+      // 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");
+          }
+      }
 
-    this._stopAutoResize();
+      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._onResize = function() {
-      if (me.options.autoResize != true) {
-        // stop watching when the option autoResize is changed to false
-        me._stopAutoResize();
-        return;
+      function deprecate(msg, fn) {
+          var firstTime = true;
+          function printMsg() {
+              if (moment.suppressDeprecationWarnings === false &&
+                      typeof console !== 'undefined' && console.warn) {
+                  console.warn("Deprecation warning: " + msg);
+              }
+          }
+          return extend(function () {
+              if (firstTime) {
+                  printMsg();
+                  firstTime = false;
+              }
+              return fn.apply(this, arguments);
+          }, fn);
       }
 
-      if (me.dom.root) {
-        // check whether the frame is resized
-        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
-            (me.dom.root.clientHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.clientWidth;
-          me.props.lastHeight = me.dom.root.clientHeight;
+      function padToken(func, count) {
+          return function (a) {
+              return leftZeroFill(func.call(this, a), count);
+          };
+      }
+      function ordinalizeToken(func, period) {
+          return function (a) {
+              return this.lang().ordinal(func.call(this, a), period);
+          };
+      }
 
-          me.emit('change');
-        }
+      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);
 
-    // add event listener to window resize
-    util.addEventListener(window, 'resize', this._onResize);
 
-    this.watchTimer = setInterval(this._onResize, 1000);
-  };
+      /************************************
+          Constructors
+      ************************************/
 
-  /**
-   * Stop watching for a resize of the frame.
-   * @private
-   */
-  Timeline.prototype._stopAutoResize = function () {
-    if (this.watchTimer) {
-      clearInterval(this.watchTimer);
-      this.watchTimer = undefined;
-    }
+      function Language() {
 
-    // remove event listener on window.resize
-    util.removeEventListener(window, 'resize', this._onResize);
-    this._onResize = null;
-  };
+      }
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onTouch = function (event) {
-    this.touch.allowDragging = true;
-  };
+      // Moment prototype object
+      function Moment(config) {
+          checkOverflow(config);
+          extend(this, config);
+      }
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onPinch = function (event) {
-    this.touch.allowDragging = 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;
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onDragStart = function (event) {
-    this.touch.initialScrollTop = this.props.scrollTop;
-  };
+          // 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;
 
-  /**
-   * Move the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Timeline.prototype._onDrag = function (event) {
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.touch.allowDragging) return;
+          this._data = {};
 
-    var delta = event.gesture.deltaY;
+          this._bubble();
+      }
 
-    var oldScrollTop = this._getScrollTop();
-    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+      /************************************
+          Helpers
+      ************************************/
 
-    if (newScrollTop != oldScrollTop) {
-      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
-    }
-  };
 
-  /**
-   * Apply a scrollTop
-   * @param {Number} scrollTop
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Timeline.prototype._setScrollTop = function (scrollTop) {
-    this.props.scrollTop = scrollTop;
-    this._updateScrollTop();
-    return this.props.scrollTop;
-  };
+      function extend(a, b) {
+          for (var i in b) {
+              if (b.hasOwnProperty(i)) {
+                  a[i] = b[i];
+              }
+          }
 
-  /**
-   * Update the current scrollTop when the height of  the containers has been changed
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Timeline.prototype._updateScrollTop = function () {
-    // recalculate the scrollTopMin
-    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
-    if (scrollTopMin != this.props.scrollTopMin) {
-      // in case of bottom orientation, change the scrollTop such that the contents
-      // do not move relative to the time axis at the bottom
-      if (this.options.orientation == 'bottom') {
-        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
-      }
-      this.props.scrollTopMin = scrollTopMin;
-    }
+          if (b.hasOwnProperty("toString")) {
+              a.toString = b.toString;
+          }
 
-    // limit the scrollTop to the feasible scroll range
-    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
-    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
+          if (b.hasOwnProperty("valueOf")) {
+              a.valueOf = b.valueOf;
+          }
 
-    return this.props.scrollTop;
-  };
+          return a;
+      }
 
-  /**
-   * Get the current scrollTop
-   * @returns {number} scrollTop
-   * @private
-   */
-  Timeline.prototype._getScrollTop = function () {
-    return this.props.scrollTop;
-  };
+      function cloneMoment(m) {
+          var result = {}, i;
+          for (i in m) {
+              if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
+                  result[i] = m[i];
+              }
+          }
 
-  module.exports = Timeline;
+          return result;
+      }
 
+      function absRound(number) {
+          if (number < 0) {
+              return Math.ceil(number);
+          } else {
+              return Math.floor(number);
+          }
+      }
 
-/***/ },
-/* 6 */
-/***/ function(module, exports, __webpack_require__) {
+      // 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;
 
-  /**
-   * @constructor  DataStep
-   * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
-   * end data point. The class itself determines the best scale (step size) based on the
-   * provided start Date, end Date, and minimumStep.
-   *
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   *
-   * Alternatively, you can set a scale by hand.
-   * After creation, you can initialize the class by executing first(). Then you
-   * can iterate from the start date to the end date via next(). You can check if
-   * the end date is reached with the function hasNext(). After each step, you can
-   * retrieve the current date via getCurrent().
-   * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
-   * days, to years.
-   *
-   * Version: 1.2
-   *
-   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
-   *                               or new Date(2010, 9, 21, 23, 45, 00)
-   * @param {Date} [end]           The end date
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
-    // variables
-    this.current = 0;
+          while (output.length < targetLength) {
+              output = '0' + output;
+          }
+          return (sign ? (forceSign ? '+' : '') : '-') + output;
+      }
 
-    this.autoScale = true;
-    this.stepIndex = 0;
-    this.step = 1;
-    this.scale = 1;
+      // helper function for _.addTime and _.subtractTime
+      function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) {
+          var milliseconds = duration._milliseconds,
+              days = duration._days,
+              months = duration._months;
+          updateOffset = updateOffset == null ? true : updateOffset;
 
-    this.marginStart;
-    this.marginEnd;
+          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.majorSteps = [1,     2,    5,  10];
-    this.minorSteps = [0.25,  0.5,  1,  2];
+      // check if is an array
+      function isArray(input) {
+          return Object.prototype.toString.call(input) === '[object Array]';
+      }
 
-    this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
-  }
+      function isDate(input) {
+          return  Object.prototype.toString.call(input) === '[object Date]' ||
+                  input instanceof Date;
+      }
 
+      // 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;
+      }
 
+      function normalizeUnits(units) {
+          if (units) {
+              var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
+              units = unitAliases[units] || camelFunctions[lowered] || lowered;
+          }
+          return units;
+      }
 
-  /**
-   * Set a new range
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   * @param {Number} [start]      The start date and time.
-   * @param {Number} [end]        The end date and time.
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
-    this._start = start;
-    this._end = end;
+      function normalizeObjectUnits(inputObject) {
+          var normalizedInput = {},
+              normalizedProp,
+              prop;
 
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
-    }
-    this.setFirst();
-  };
+          for (prop in inputObject) {
+              if (inputObject.hasOwnProperty(prop)) {
+                  normalizedProp = normalizeUnits(prop);
+                  if (normalizedProp) {
+                      normalizedInput[normalizedProp] = inputObject[prop];
+                  }
+              }
+          }
 
-  /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
-   */
-  DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
-    // round to floor
-    var size = this._end - this._start;
-    var safeSize = size * 1.1;
-    var minimumStepValue = minimumStep * (safeSize / containerHeight);
-    var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
+          return normalizedInput;
+      }
 
-    var minorStepIdx = -1;
-    var magnitudefactor = Math.pow(10,orderOfMagnitude);
+      function makeList(field) {
+          var count, setter;
 
-    var start = 0;
-    if (orderOfMagnitude < 0) {
-      start = orderOfMagnitude;
-    }
+          if (field.indexOf('week') === 0) {
+              count = 7;
+              setter = 'day';
+          }
+          else if (field.indexOf('month') === 0) {
+              count = 12;
+              setter = 'month';
+          }
+          else {
+              return;
+          }
 
-    var solutionFound = false;
-    for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
-      magnitudefactor = Math.pow(10,i);
-      for (var j = 0; j < this.minorSteps.length; j++) {
-        var stepSize = magnitudefactor * this.minorSteps[j];
-        if (stepSize >= minimumStepValue) {
-          solutionFound = true;
-          minorStepIdx = j;
-          break;
-        }
-      }
-      if (solutionFound == true) {
-        break;
-      }
-    }
-    this.stepIndex = minorStepIdx;
-    this.scale = magnitudefactor;
-    this.step = magnitudefactor * this.minorSteps[minorStepIdx];
-  };
+          moment[field] = function (format, index) {
+              var i, getter,
+                  method = moment.fn._lang[field],
+                  results = [];
 
+              if (typeof format === 'number') {
+                  index = format;
+                  format = undefined;
+              }
 
-  /**
-   * Set the range iterator to the start date.
-   */
-  DataStep.prototype.first = function() {
-    this.setFirst();
-  };
+              getter = function (i) {
+                  var m = moment().utc().set(setter, i);
+                  return method.call(moment.fn._lang, m, format || '');
+              };
 
-  /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
-   */
-  DataStep.prototype.setFirst = function() {
-    var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
-    var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
+              if (index != null) {
+                  return getter(index);
+              }
+              else {
+                  for (i = 0; i < count; i++) {
+                      results.push(getter(i));
+                  }
+                  return results;
+              }
+          };
+      }
 
-    this.marginEnd = this.roundToMinor(niceEnd);
-    this.marginStart = this.roundToMinor(niceStart);
-    this.marginRange = this.marginEnd - this.marginStart;
+      function toInt(argumentForCoercion) {
+          var coercedNumber = +argumentForCoercion,
+              value = 0;
 
-    this.current = this.marginEnd;
+          if (coercedNumber !== 0 && isFinite(coercedNumber)) {
+              if (coercedNumber >= 0) {
+                  value = Math.floor(coercedNumber);
+              } else {
+                  value = Math.ceil(coercedNumber);
+              }
+          }
 
-  };
+          return value;
+      }
 
-  DataStep.prototype.roundToMinor = function(value) {
-    var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
-    if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
-      return rounded + (this.scale * this.minorSteps[this.stepIndex]);
-    }
-    else {
-      return rounded;
-    }
-  }
+      function daysInMonth(year, month) {
+          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+      }
 
+      function weeksInYear(year, dow, doy) {
+          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
+      }
 
-  /**
-   * Check if the there is a next step
-   * @return {boolean}  true if the current date has not passed the end date
-   */
-  DataStep.prototype.hasNext = function () {
-    return (this.current >= this.marginStart);
-  };
+      function daysInYear(year) {
+          return isLeapYear(year) ? 366 : 365;
+      }
 
-  /**
-   * Do the next step
-   */
-  DataStep.prototype.next = function() {
-    var prev = this.current;
-    this.current -= this.step;
+      function isLeapYear(year) {
+          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+      }
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current == prev) {
-      this.current = this._end;
-    }
-  };
+      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] > 23 ? 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;
 
-  /**
-   * Do the next step
-   */
-  DataStep.prototype.previous = function() {
-    this.current += this.step;
-    this.marginEnd += this.step;
-    this.marginRange = this.marginEnd - this.marginStart;
-  };
+              if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
+                  overflow = DATE;
+              }
 
+              m._pf.overflow = overflow;
+          }
+      }
 
+      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;
 
-  /**
-   * Get the current datetime
-   * @return {String}  current The current date
-   */
-  DataStep.prototype.getCurrent = function() {
-    var toPrecision = '' + Number(this.current).toPrecision(5);
-    for (var i = toPrecision.length-1; i > 0; i--) {
-      if (toPrecision[i] == "0") {
-        toPrecision = toPrecision.slice(0,i);
+              if (m._strict) {
+                  m._isValid = m._isValid &&
+                      m._pf.charsLeftOver === 0 &&
+                      m._pf.unusedTokens.length === 0;
+              }
+          }
+          return m._isValid;
       }
-      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
-        toPrecision = toPrecision.slice(0,i);
-        break;
+
+      function normalizeLanguage(key) {
+          return key ? key.toLowerCase().replace('_', '-') : key;
       }
-      else{
-        break;
+
+      // Return a moment from input, that is local/utc/zone equivalent to model.
+      function makeAs(input, model) {
+          return model._isUTC ? moment(input).zone(model._offset || 0) :
+              moment(input).local();
       }
-    }
 
-    return toPrecision;
-  };
+      /************************************
+          Languages
+      ************************************/
 
 
+      extend(Language.prototype, {
 
-  /**
-   * 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
-   */
-  DataStep.prototype.snap = function(date) {
+          set : function (config) {
+              var prop, i;
+              for (i in config) {
+                  prop = config[i];
+                  if (typeof prop === 'function') {
+                      this[i] = prop;
+                  } else {
+                      this['_' + i] = prop;
+                  }
+              }
+          },
 
-  };
+          _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          months : function (m) {
+              return this._months[m.month()];
+          },
 
-  /**
-   * Check if the current value is a major value (for example when the step
-   * is DAY, a major value is each first day of the MONTH)
-   * @return {boolean} true if current date is major, else false.
-   */
-  DataStep.prototype.isMajor = function() {
-    return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
-  };
+          _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          monthsShort : function (m) {
+              return this._monthsShort[m.month()];
+          },
 
-  module.exports = DataStep;
+          monthsParse : function (monthName) {
+              var i, mom, regex;
 
+              if (!this._monthsParse) {
+                  this._monthsParse = [];
+              }
 
-/***/ },
-/* 7 */
-/***/ function(module, exports, __webpack_require__) {
+              for (i = 0; i < 12; i++) {
+                  // make the regex if we don't have it already
+                  if (!this._monthsParse[i]) {
+                      mom = moment.utc([2000, i]);
+                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
+                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
+                  }
+                  // test the regex
+                  if (this._monthsParse[i].test(monthName)) {
+                      return i;
+                  }
+              }
+          },
 
-  var Emitter = __webpack_require__(41);
-  var Hammer = __webpack_require__(49);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Range = __webpack_require__(8);
-  var TimeAxis = __webpack_require__(21);
-  var CurrentTime = __webpack_require__(13);
-  var CustomTime = __webpack_require__(14);
-  var LineGraph = __webpack_require__(20);
+          _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdays : function (m) {
+              return this._weekdays[m.day()];
+          },
 
-  /**
-   * Create a timeline visualization
-   * @param {HTMLElement} container
-   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
-   * @param {Object} [options]  See Graph2d.setOptions for the available options.
-   * @constructor
-   */
-  function Graph2d (container, items, options, groups) {
-    var me = this;
-    this.defaultOptions = {
-      start: null,
-      end:   null,
+          _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysShort : function (m) {
+              return this._weekdaysShort[m.day()];
+          },
 
-      autoResize: true,
+          _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          weekdaysMin : function (m) {
+              return this._weekdaysMin[m.day()];
+          },
 
-      orientation: 'bottom',
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
-    };
-    this.options = util.deepExtend({}, this.defaultOptions);
+          weekdaysParse : function (weekdayName) {
+              var i, mom, regex;
 
-    // Create the DOM, props, and emitter
-    this._create(container);
+              if (!this._weekdaysParse) {
+                  this._weekdaysParse = [];
+              }
 
-    // all components listed here will be repainted automatically
-    this.components = [];
+              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;
+                  }
+              }
+          },
 
-    this.body = {
-      dom: this.dom,
-      domProps: this.props,
-      emitter: {
-        on: this.on.bind(this),
-        off: this.off.bind(this),
-        emit: this.emit.bind(this)
-      },
-      util: {
-        snap: null, // will be specified after TimeAxis is created
-        toScreen: me._toScreen.bind(me),
-        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
-        toTime: me._toTime.bind(me),
-        toGlobalTime : me._toGlobalTime.bind(me)
-      }
-    };
-
-    // range
-    this.range = new Range(this.body);
-    this.components.push(this.range);
-    this.body.range = this.range;
-
-    // time axis
-    this.timeAxis = new TimeAxis(this.body);
-    this.components.push(this.timeAxis);
-    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
-
-    // current time bar
-    this.currentTime = new CurrentTime(this.body);
-    this.components.push(this.currentTime);
-
-    // custom time bar
-    // Note: time bar will be attached in this.setOptions when selected
-    this.customTime = new CustomTime(this.body);
-    this.components.push(this.customTime);
-
-    // item set
-    this.linegraph = new LineGraph(this.body);
-    this.components.push(this.linegraph);
-
-    this.itemsData = null;      // DataSet
-    this.groupsData = null;     // DataSet
-
-    // apply options
-    if (options) {
-      this.setOptions(options);
-    }
+          _longDateFormat : {
+              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;
+          },
 
-    // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
-    if (groups) {
-      this.setGroups(groups);
-    }
+          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');
+          },
 
-    // create itemset
-    if (items) {
-      this.setItems(items);
-    }
-    else {
-      this.redraw();
-    }
-  }
+          _meridiemParse : /[ap]\.?m?\.?/i,
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'pm' : 'PM';
+              } else {
+                  return isLower ? 'am' : 'AM';
+              }
+          },
 
-  // turn Graph2d into an event emitter
-  Emitter(Graph2d.prototype);
+          _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) {
+              var output = this._calendar[key];
+              return typeof output === 'function' ? output.apply(mom) : output;
+          },
 
-  /**
-   * Create the main DOM for the Graph2d: a root panel containing left, right,
-   * top, bottom, content, and background panel.
-   * @param {Element} container  The container element where the Graph2d will
-   *                             be attached.
-   * @private
-   */
-  Graph2d.prototype._create = function (container) {
-    this.dom = {};
+          _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);
+          },
+          pastFuture : function (diff, output) {
+              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
+              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+          },
 
-    this.dom.root                 = document.createElement('div');
-    this.dom.background           = document.createElement('div');
-    this.dom.backgroundVertical   = document.createElement('div');
-    this.dom.backgroundHorizontalContainer = document.createElement('div');
-    this.dom.centerContainer      = document.createElement('div');
-    this.dom.leftContainer        = document.createElement('div');
-    this.dom.rightContainer       = document.createElement('div');
-    this.dom.backgroundHorizontal = document.createElement('div');
-    this.dom.center               = document.createElement('div');
-    this.dom.left                 = document.createElement('div');
-    this.dom.right                = document.createElement('div');
-    this.dom.top                  = document.createElement('div');
-    this.dom.bottom               = document.createElement('div');
-    this.dom.shadowTop            = document.createElement('div');
-    this.dom.shadowBottom         = document.createElement('div');
-    this.dom.shadowTopLeft        = document.createElement('div');
-    this.dom.shadowBottomLeft     = document.createElement('div');
-    this.dom.shadowTopRight       = document.createElement('div');
-    this.dom.shadowBottomRight    = document.createElement('div');
+          ordinal : function (number) {
+              return this._ordinal.replace("%d", number);
+          },
+          _ordinal : "%d",
 
-    this.dom.background.className           = 'vispanel background';
-    this.dom.backgroundVertical.className   = 'vispanel background vertical';
-    this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
-    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-    this.dom.centerContainer.className      = 'vispanel center';
-    this.dom.leftContainer.className        = 'vispanel left';
-    this.dom.rightContainer.className       = 'vispanel right';
-    this.dom.top.className                  = 'vispanel top';
-    this.dom.bottom.className               = 'vispanel bottom';
-    this.dom.left.className                 = 'content';
-    this.dom.center.className               = 'content';
-    this.dom.right.className                = 'content';
-    this.dom.shadowTop.className            = 'shadow top';
-    this.dom.shadowBottom.className         = 'shadow bottom';
-    this.dom.shadowTopLeft.className        = 'shadow top';
-    this.dom.shadowBottomLeft.className     = 'shadow bottom';
-    this.dom.shadowTopRight.className       = 'shadow top';
-    this.dom.shadowBottomRight.className    = 'shadow bottom';
+          preparse : function (string) {
+              return string;
+          },
 
-    this.dom.root.appendChild(this.dom.background);
-    this.dom.root.appendChild(this.dom.backgroundVertical);
-    this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
-    this.dom.root.appendChild(this.dom.centerContainer);
-    this.dom.root.appendChild(this.dom.leftContainer);
-    this.dom.root.appendChild(this.dom.rightContainer);
-    this.dom.root.appendChild(this.dom.top);
-    this.dom.root.appendChild(this.dom.bottom);
+          postformat : function (string) {
+              return string;
+          },
 
-    this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
-    this.dom.centerContainer.appendChild(this.dom.center);
-    this.dom.leftContainer.appendChild(this.dom.left);
-    this.dom.rightContainer.appendChild(this.dom.right);
+          week : function (mom) {
+              return weekOfYear(mom, this._week.dow, this._week.doy).week;
+          },
 
-    this.dom.centerContainer.appendChild(this.dom.shadowTop);
-    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
-    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
-    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
-    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
-    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
+          _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.on('rangechange', this.redraw.bind(this));
-    this.on('change', this.redraw.bind(this));
-    this.on('touch', this._onTouch.bind(this));
-    this.on('pinch', this._onPinch.bind(this));
-    this.on('dragstart', this._onDragStart.bind(this));
-    this.on('drag', this._onDrag.bind(this));
+          _invalidDate: 'Invalid date',
+          invalidDate: function () {
+              return this._invalidDate;
+          }
+      });
 
-    // create event listeners for all interesting events, these events will be
-    // emitted via emitter
-    this.hammer = Hammer(this.dom.root, {
-      prevent_default: true
-    });
-    this.listeners = {};
+      // Loads a language definition into the `languages` cache.  The function
+      // takes a key and optionally values.  If not in the browser and no values
+      // are provided, it will load the language file module.  As a convenience,
+      // this function also returns the language values.
+      function loadLang(key, values) {
+          values.abbr = key;
+          if (!languages[key]) {
+              languages[key] = new Language();
+          }
+          languages[key].set(values);
+          return languages[key];
+      }
 
-    var me = this;
-    var events = [
-      'touch', 'pinch',
-      'tap', 'doubletap', 'hold',
-      'dragstart', 'drag', 'dragend',
-      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
-    ];
-    events.forEach(function (event) {
-      var listener = function () {
-        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
-        me.emit.apply(me, args);
-      };
-      me.hammer.on(event, listener);
-      me.listeners[event] = listener;
-    });
+      // Remove a language from the `languages` cache. Mostly useful in tests.
+      function unloadLang(key) {
+          delete languages[key];
+      }
 
-    // size properties of each of the panels
-    this.props = {
-      root: {},
-      background: {},
-      centerContainer: {},
-      leftContainer: {},
-      rightContainer: {},
-      center: {},
-      left: {},
-      right: {},
-      top: {},
-      bottom: {},
-      border: {},
-      scrollTop: 0,
-      scrollTopMin: 0
-    };
-    this.touch = {}; // store state information needed for touch events
+      // Determines which language definition to use and returns it.
+      //
+      // With no parameters, it will return the global language.  If you
+      // pass in a language key, such as 'en', it will return the
+      // definition for 'en', so long as 'en' has already been loaded using
+      // moment.lang.
+      function getLangDefinition(key) {
+          var i = 0, j, lang, next, split,
+              get = function (k) {
+                  if (!languages[k] && hasModule) {
+                      try {
+                          __webpack_require__(6)("./" + k);
+                      } catch (e) { }
+                  }
+                  return languages[k];
+              };
 
-    // attach the root panel to the provided container
-    if (!container) throw new Error('No container provided');
-    container.appendChild(this.dom.root);
-  };
+          if (!key) {
+              return moment.fn._lang;
+          }
 
-  /**
-   * Destroy the Graph2d, clean up all DOM elements and event listeners.
-   */
-  Graph2d.prototype.destroy = function () {
-    // unbind datasets
-    this.clear();
+          if (!isArray(key)) {
+              //short-circuit everything else
+              lang = get(key);
+              if (lang) {
+                  return lang;
+              }
+              key = [key];
+          }
 
-    // remove all event listeners
-    this.off();
+          //pick the language 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
+          while (i < key.length) {
+              split = normalizeLanguage(key[i]).split('-');
+              j = split.length;
+              next = normalizeLanguage(key[i + 1]);
+              next = next ? next.split('-') : null;
+              while (j > 0) {
+                  lang = get(split.slice(0, j).join('-'));
+                  if (lang) {
+                      return lang;
+                  }
+                  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 moment.fn._lang;
+      }
 
-    // stop checking for changed size
-    this._stopAutoResize();
+      /************************************
+          Formatting
+      ************************************/
 
-    // remove from DOM
-    if (this.dom.root.parentNode) {
-      this.dom.root.parentNode.removeChild(this.dom.root);
-    }
-    this.dom = null;
 
-    // cleanup hammer touch events
-    for (var event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
+      function removeFormattingTokens(input) {
+          if (input.match(/\[[\s\S]/)) {
+              return input.replace(/^\[|\]$/g, "");
+          }
+          return input.replace(/\\/g, "");
       }
-    }
-    this.listeners = null;
-    this.hammer = null;
-
-    // give all components the opportunity to cleanup
-    this.components.forEach(function (component) {
-      component.destroy();
-    });
-
-    this.body = null;
-  };
 
-  /**
-   * Set options. Options will be passed to all components loaded in the Graph2d.
-   * @param {Object} [options]
-   *                           {String} orientation
-   *                              Vertical orientation for the Graph2d,
-   *                              can be 'bottom' (default) or 'top'.
-   *                           {String | Number} width
-   *                              Width for the timeline, a number in pixels or
-   *                              a css string like '1000px' or '75%'. '100%' by default.
-   *                           {String | Number} height
-   *                              Fixed height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'. If undefined,
-   *                              The Graph2d will automatically size such that
-   *                              its contents fit.
-   *                           {String | Number} minHeight
-   *                              Minimum height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {String | Number} maxHeight
-   *                              Maximum height for the Graph2d, a number in pixels or
-   *                              a css string like '400px' or '75%'.
-   *                           {Number | Date | String} start
-   *                              Start date for the visible window
-   *                           {Number | Date | String} end
-   *                              End date for the visible window
-   */
-  Graph2d.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the known options
-      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
-      util.selectiveExtend(fields, this.options, options);
+      function makeFormatFunction(format) {
+          var array = format.match(formattingTokens), i, length;
 
-      // enable/disable autoResize
-      this._initAutoResize();
-    }
+          for (i = 0, length = array.length; i < length; i++) {
+              if (formatTokenFunctions[array[i]]) {
+                  array[i] = formatTokenFunctions[array[i]];
+              } else {
+                  array[i] = removeFormattingTokens(array[i]);
+              }
+          }
 
-    // propagate options to all components
-    this.components.forEach(function (component) {
-      component.setOptions(options);
-    });
+          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;
+          };
+      }
 
-    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
-    if (options && options.order) {
-      throw new Error('Option order is deprecated. There is no replacement for this feature.');
-    }
+      // format date using native date object
+      function formatMoment(m, format) {
 
-    // redraw everything
-    this.redraw();
-  };
+          if (!m.isValid()) {
+              return m.lang().invalidDate();
+          }
 
-  /**
-   * Set a custom time bar
-   * @param {Date} time
-   */
-  Graph2d.prototype.setCustomTime = function (time) {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+          format = expandFormat(format, m.lang());
 
-    this.customTime.setCustomTime(time);
-  };
+          if (!formatFunctions[format]) {
+              formatFunctions[format] = makeFormatFunction(format);
+          }
 
-  /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
-   */
-  Graph2d.prototype.getCustomTime = function() {
-    if (!this.customTime) {
-      throw new Error('Cannot get custom time: Custom time bar is not enabled');
-    }
+          return formatFunctions[format](m);
+      }
 
-    return this.customTime.getCustomTime();
-  };
+      function expandFormat(format, lang) {
+          var i = 5;
 
-  /**
-   * Set items
-   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
-   */
-  Graph2d.prototype.setItems = function(items) {
-    var initialLoad = (this.itemsData == null);
+          function replaceLongDateFormatTokens(input) {
+              return lang.longDateFormat(input) || input;
+          }
 
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!items) {
-      newDataSet = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      newDataSet = items;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(items, {
-        type: {
-          start: 'Date',
-          end: 'Date'
-        }
-      });
-    }
+          localFormattingTokens.lastIndex = 0;
+          while (i >= 0 && localFormattingTokens.test(format)) {
+              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
+              localFormattingTokens.lastIndex = 0;
+              i -= 1;
+          }
 
-    // set items
-    this.itemsData = newDataSet;
-    this.linegraph && this.linegraph.setItems(newDataSet);
+          return format;
+      }
 
-    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
-      this.fit();
 
-      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
-      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+      /************************************
+          Parsing
+      ************************************/
 
-      this.setWindow(start, end);
-    }
-  };
 
-  /**
-   * Set groups
-   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
-   */
-  Graph2d.prototype.setGroups = function(groups) {
-    // convert to type DataSet when needed
-    var newDataSet;
-    if (!groups) {
-      newDataSet = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      newDataSet = groups;
-    }
-    else {
-      // turn an array into a dataset
-      newDataSet = new DataSet(groups);
-    }
-
-    this.groupsData = newDataSet;
-    this.linegraph.setGroups(newDataSet);
-  };
-
-  /**
-   * Clear the Graph2d. By Default, items, groups and options are cleared.
-   * Example usage:
-   *
-   *     timeline.clear();                // clear items, groups, and options
-   *     timeline.clear({options: true}); // clear options only
-   *
-   * @param {Object} [what]      Optionally specify what to clear. By default:
-   *                             {items: true, groups: true, options: true}
-   */
-  Graph2d.prototype.clear = function(what) {
-    // clear items
-    if (!what || what.items) {
-      this.setItems(null);
-    }
+      // 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 getLangDefinition(config._l)._meridiemParse;
+          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 parseTokenOrdinal;
+          default :
+              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
+              return a;
+          }
+      }
 
-    // clear groups
-    if (!what || what.groups) {
-      this.setGroups(null);
-    }
+      function timezoneMinutesFromString(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]);
 
-    // clear options of timeline and of each of the components
-    if (!what || what.options) {
-      this.components.forEach(function (component) {
-        component.setOptions(component.defaultOptions);
-      });
+          return parts[0] === '+' ? -minutes : minutes;
+      }
 
-      this.setOptions(this.defaultOptions); // this will also do a redraw
-    }
-  };
+      // function to convert string input to date
+      function addTimeToArrayFromToken(token, input, config) {
+          var a, datePartArray = config._a;
 
-  /**
-   * Set Graph2d window such that it fits all items
-   */
-  Graph2d.prototype.fit = function() {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
+          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 = getLangDefinition(config._l).monthsParse(input);
+              // 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, 10));
+              }
+              break;
+          // DAY OF YEAR
+          case 'DDD' : // fall through to DDDD
+          case 'DDDD' :
+              if (input != null) {
+                  config._dayOfYear = toInt(input);
+              }
 
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
+              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._isPm = getLangDefinition(config._l).isPM(input);
+              break;
+          // 24 HOUR
+          case 'H' : // fall through to hh
+          case 'HH' : // fall through to hh
+          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 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 = timezoneMinutesFromString(input);
+              break;
+          // WEEKDAY - human
+          case 'dd':
+          case 'ddd':
+          case 'dddd':
+              a = getLangDefinition(config._l).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);
+          }
       }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
 
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
-    }
+      function dayOfYearFromWeekInfo(config) {
+          var w, weekYear, week, weekday, dow, doy, temp, lang;
 
-    this.range.setRange(start, end);
-  };
+          w = config._w;
+          if (w.GG != null || w.W != null || w.E != null) {
+              dow = 1;
+              doy = 4;
 
-  /**
-   * Get the data range of the item set.
-   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
-   *                                          When no minimum is found, min==null
-   *                                          When no maximum is found, max==null
-   */
-  Graph2d.prototype.getItemRange = function() {
-    // calculate min from start filed
-    var itemsData = this.itemsData,
-      min = null,
-      max = null;
+              // 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 {
+              lang = getLangDefinition(config._l);
+              dow = lang._week.dow;
+              doy = lang._week.doy;
 
-    if (itemsData) {
-      // calculate the minimum value of the field 'start'
-      var minItem = itemsData.min('start');
-      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-      // Note: we convert first to Date and then to number because else
-      // a conversion from ISODate to Number will fail
+              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
+              week = dfl(w.w, 1);
 
-      // calculate maximum value of fields 'start' and 'end'
-      var maxStartItem = itemsData.max('start');
-      if (maxStartItem) {
-        max = util.convert(maxStartItem.start, 'Date').valueOf();
-      }
-      var maxEndItem = itemsData.max('end');
-      if (maxEndItem) {
-        if (max == null) {
-          max = util.convert(maxEndItem.end, 'Date').valueOf();
-        }
-        else {
-          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
-        }
+              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);
+
+          config._a[YEAR] = temp.year;
+          config._dayOfYear = temp.dayOfYear;
       }
-    }
 
-    return {
-      min: (min != null) ? new Date(min) : null,
-      max: (max != null) ? new Date(max) : null
-    };
-  };
+      // 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;
 
-  /**
-   * Set the visible window. Both parameters are optional, you can change only
-   * start or only end. Syntax:
-   *
-   *     TimeLine.setWindow(start, end)
-   *     TimeLine.setWindow(range)
-   *
-   * Where start and end can be a Date, number, or string, and range is an
-   * object with properties start and end.
-   *
-   * @param {Date | Number | String | Object} [start] Start date of visible window
-   * @param {Date | Number | String} [end]   End date of visible window
-   */
-  Graph2d.prototype.setWindow = function(start, end) {
-    if (arguments.length == 1) {
-      var range = arguments[0];
-      this.range.setRange(range.start, range.end);
-    }
-    else {
-      this.range.setRange(start, end);
-    }
-  };
+          if (config._d) {
+              return;
+          }
 
-  /**
-   * Get the visible window
-   * @return {{start: Date, end: Date}}   Visible range
-   */
-  Graph2d.prototype.getWindow = function() {
-    var range = this.range.getRange();
-    return {
-      start: new Date(range.start),
-      end: new Date(range.end)
-    };
-  };
+          currentDate = currentDateArray(config);
 
-  /**
-   * Force a redraw of the Graph2d. Can be useful to manually redraw when
-   * option autoResize=false
-   */
-  Graph2d.prototype.redraw = function() {
-    var resized = false,
-      options = this.options,
-      props = this.props,
-      dom = this.dom;
+          //compute day of the year from weeks and weekdays
+          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
+              dayOfYearFromWeekInfo(config);
+          }
 
-    if (!dom) return; // when destroyed
+          //if the day of the year is set, figure out what it is
+          if (config._dayOfYear) {
+              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
 
-    // update class names
-    dom.root.className = 'vis timeline root ' + options.orientation;
+              if (config._dayOfYear > daysInYear(yearToUse)) {
+                  config._pf._overflowDayOfYear = true;
+              }
 
-    // update root width and height options
-    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
-    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
-    dom.root.style.width = util.option.asSize(options.width, '');
+              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
+              config._a[MONTH] = date.getUTCMonth();
+              config._a[DATE] = date.getUTCDate();
+          }
 
-    // calculate border widths
-    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
-    props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
-    props.border.bottom = props.border.top;
-    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+          // 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];
+          }
 
-    // calculate the heights. If any of the side panels is empty, we set the height to
-    // minus the border width, such that the border will be invisible
-    props.center.height = dom.center.offsetHeight;
-    props.left.height   = dom.left.offsetHeight;
-    props.right.height  = dom.right.offsetHeight;
-    props.top.height    = dom.top.clientHeight    || -props.border.top;
-    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
+          // 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];
+          }
 
-    // TODO: compensate borders when any of the panels is empty.
+          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
+          // Apply timezone offset from input. The actual zone can be changed
+          // with parseZone.
+          if (config._tzm != null) {
+              config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
+          }
+      }
 
-    // apply auto height
-    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
-    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
-    var autoHeight = props.top.height + contentHeight + props.bottom.height +
-      borderRootHeight + props.border.top + props.border.bottom;
-    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
+      function dateFromObject(config) {
+          var normalizedInput;
 
-    // calculate heights of the content panels
-    props.root.height = dom.root.offsetHeight;
-    props.background.height = props.root.height - borderRootHeight;
-    var containerHeight = props.root.height - props.top.height - props.bottom.height -
-      borderRootHeight;
-    props.centerContainer.height  = containerHeight;
-    props.leftContainer.height    = containerHeight;
-    props.rightContainer.height   = props.leftContainer.height;
+          if (config._d) {
+              return;
+          }
 
-    // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
-    props.background.width = props.root.width - borderRootWidth;
-    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
-    props.leftContainer.width = props.left.width;
-    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
-    props.rightContainer.width = props.right.width;
-    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-    props.center.width          = centerWidth;
-    props.centerContainer.width = centerWidth;
-    props.top.width             = centerWidth;
-    props.bottom.width          = centerWidth;
+          normalizedInput = normalizeObjectUnits(config._i);
+          config._a = [
+              normalizedInput.year,
+              normalizedInput.month,
+              normalizedInput.day,
+              normalizedInput.hour,
+              normalizedInput.minute,
+              normalizedInput.second,
+              normalizedInput.millisecond
+          ];
 
-    // resize the panels
-    dom.background.style.height           = props.background.height + 'px';
-    dom.backgroundVertical.style.height   = props.background.height + 'px';
-    dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
-    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+          dateFromConfig(config);
+      }
 
-    dom.background.style.width            = props.background.width + 'px';
-    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-    dom.backgroundHorizontalContainer.style.width  = props.background.width + 'px';
-    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-    dom.centerContainer.style.width       = props.center.width + 'px';
-    dom.top.style.width                   = props.top.width + 'px';
-    dom.bottom.style.width                = props.bottom.width + 'px';
-
-    // reposition the panels
-    dom.background.style.left           = '0';
-    dom.background.style.top            = '0';
-    dom.backgroundVertical.style.left   = props.left.width + 'px';
-    dom.backgroundVertical.style.top    = '0';
-    dom.backgroundHorizontalContainer.style.left = '0';
-    dom.backgroundHorizontalContainer.style.top  = props.top.height + 'px';
-    dom.centerContainer.style.left      = props.left.width + 'px';
-    dom.centerContainer.style.top       = props.top.height + 'px';
-    dom.leftContainer.style.left        = '0';
-    dom.leftContainer.style.top         = props.top.height + 'px';
-    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-    dom.rightContainer.style.top        = props.top.height + 'px';
-    dom.top.style.left                  = props.left.width + 'px';
-    dom.top.style.top                   = '0';
-    dom.bottom.style.left               = props.left.width + 'px';
-    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
-
-    // update the scrollTop, feasible range for the offset can be changed
-    // when the height of the Graph2d or of the contents of the center changed
-    this._updateScrollTop();
-
-    // reposition the scrollable contents
-    var offset = this.props.scrollTop;
-    if (options.orientation == 'bottom') {
-      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-          this.props.border.top - this.props.border.bottom, 0);
-    }
-    dom.center.style.left = '0';
-    dom.center.style.top  = offset + 'px';
-    dom.backgroundHorizontal.style.left = '0';
-    dom.backgroundHorizontal.style.top  = offset + 'px';
-    dom.left.style.left   = '0';
-    dom.left.style.top    = offset + 'px';
-    dom.right.style.left  = '0';
-    dom.right.style.top   = offset + 'px';
-
-    // show shadows when vertical scrolling is available
-    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
-    dom.shadowTop.style.visibility          = visibilityTop;
-    dom.shadowBottom.style.visibility       = visibilityBottom;
-    dom.shadowTopLeft.style.visibility      = visibilityTop;
-    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
-    dom.shadowTopRight.style.visibility     = visibilityTop;
-    dom.shadowBottomRight.style.visibility  = visibilityBottom;
-
-    // redraw all components
-    this.components.forEach(function (component) {
-      resized = component.redraw() || resized;
-    });
-    if (resized) {
-      // keep redrawing until all sizes are settled
-      this.redraw();
-    }
-  };
+      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()];
+          }
+      }
 
-  /**
-   * Convert a position on screen (pixels) to a datetime
-   * @param {int}     x    Position on the screen in pixels
-   * @return {Date}   time The datetime the corresponds with given position x
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toTime = function(x) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+      // date from string and format string
+      function makeDateFromStringAndFormat(config) {
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toGlobalTime = function(x) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return new Date(x / conversion.scale + conversion.offset);
-  };
+          if (config._f === moment.ISO_8601) {
+              parseISO(config);
+              return;
+          }
 
-  /**
-   * Convert a datetime (Date object) into a position on the screen
-   * @param {Date}   time A date
-   * @return {int}   x    The position on the screen in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toScreen = function(time) {
-    var conversion = this.range.conversion(this.props.center.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          config._a = [];
+          config._pf.empty = true;
 
+          // This array is used to make a Date, either with `new Date` or `Date.UTC`
+          var lang = getLangDefinition(config._l),
+              string = '' + config._i,
+              i, parsedInput, tokens, token, skipped,
+              stringLength = string.length,
+              totalParsedInputLength = 0;
 
-  /**
-   * Convert a datetime (Date object) into a position on the root
-   * This is used to get the pixel density estimate for the screen, not the center panel
-   * @param {Date}   time A date
-   * @return {int}   x    The position on root in pixels which corresponds
-   *                      with the given date.
-   * @private
-   */
-  // TODO: move this function to Range
-  Graph2d.prototype._toGlobalScreen = function(time) {
-    var conversion = this.range.conversion(this.props.root.width);
-    return (time.valueOf() - conversion.offset) * conversion.scale;
-  };
+          tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
 
-  /**
-   * Initialize watching when option autoResize is true
-   * @private
-   */
-  Graph2d.prototype._initAutoResize = function () {
-    if (this.options.autoResize == true) {
-      this._startAutoResize();
-    }
-    else {
-      this._stopAutoResize();
-    }
-  };
+          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);
+              }
+          }
 
-  /**
-   * Watch for changes in the size of the container. On resize, the Panel will
-   * automatically redraw itself.
-   * @private
-   */
-  Graph2d.prototype._startAutoResize = function () {
-    var me = this;
+          // add remaining unparsed input length to the string
+          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
+          if (string.length > 0) {
+              config._pf.unusedInput.push(string);
+          }
 
-    this._stopAutoResize();
+          // handle am pm
+          if (config._isPm && config._a[HOUR] < 12) {
+              config._a[HOUR] += 12;
+          }
+          // if is 12 am, change hours to 0
+          if (config._isPm === false && config._a[HOUR] === 12) {
+              config._a[HOUR] = 0;
+          }
 
-    this._onResize = function() {
-      if (me.options.autoResize != true) {
-        // stop watching when the option autoResize is changed to false
-        me._stopAutoResize();
-        return;
+          dateFromConfig(config);
+          checkOverflow(config);
       }
 
-      if (me.dom.root) {
-        // check whether the frame is resized
-        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
-          (me.dom.root.clientHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.clientWidth;
-          me.props.lastHeight = me.dom.root.clientHeight;
+      function unescapeFormat(s) {
+          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
+              return p1 || p2 || p3 || p4;
+          });
+      }
 
-          me.emit('change');
-        }
+      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
+      function regexpEscape(s) {
+          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
       }
-    };
 
-    // add event listener to window resize
-    util.addEventListener(window, 'resize', this._onResize);
+      // date from string and array of format strings
+      function makeDateFromStringAndArray(config) {
+          var tempConfig,
+              bestMoment,
 
-    this.watchTimer = setInterval(this._onResize, 1000);
-  };
+              scoreToBeat,
+              i,
+              currentScore;
 
-  /**
-   * Stop watching for a resize of the frame.
-   * @private
-   */
-  Graph2d.prototype._stopAutoResize = function () {
-    if (this.watchTimer) {
-      clearInterval(this.watchTimer);
-      this.watchTimer = undefined;
-    }
+          if (config._f.length === 0) {
+              config._pf.invalidFormat = true;
+              config._d = new Date(NaN);
+              return;
+          }
 
-    // remove event listener on window.resize
-    util.removeEventListener(window, 'resize', this._onResize);
-    this._onResize = null;
-  };
+          for (i = 0; i < config._f.length; i++) {
+              currentScore = 0;
+              tempConfig = extend({}, config);
+              tempConfig._pf = defaultParsingFlags();
+              tempConfig._f = config._f[i];
+              makeDateFromStringAndFormat(tempConfig);
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onTouch = function (event) {
-    this.touch.allowDragging = true;
-  };
+              if (!isValid(tempConfig)) {
+                  continue;
+              }
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onPinch = function (event) {
-    this.touch.allowDragging = false;
-  };
+              // if there is any input that was not parsed add a penalty for that format
+              currentScore += tempConfig._pf.charsLeftOver;
 
-  /**
-   * Start moving the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onDragStart = function (event) {
-    this.touch.initialScrollTop = this.props.scrollTop;
-  };
+              //or tokens
+              currentScore += tempConfig._pf.unusedTokens.length * 10;
 
-  /**
-   * Move the timeline vertically
-   * @param {Event} event
-   * @private
-   */
-  Graph2d.prototype._onDrag = function (event) {
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.touch.allowDragging) return;
+              tempConfig._pf.score = currentScore;
 
-    var delta = event.gesture.deltaY;
+              if (scoreToBeat == null || currentScore < scoreToBeat) {
+                  scoreToBeat = currentScore;
+                  bestMoment = tempConfig;
+              }
+          }
 
-    var oldScrollTop = this._getScrollTop();
-    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+          extend(config, bestMoment || tempConfig);
+      }
 
-    if (newScrollTop != oldScrollTop) {
-      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
-    }
-  };
+      // date from iso format
+      function parseISO(config) {
+          var i, l,
+              string = config._i,
+              match = isoRegex.exec(string);
 
-  /**
-   * Apply a scrollTop
-   * @param {Number} scrollTop
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Graph2d.prototype._setScrollTop = function (scrollTop) {
-    this.props.scrollTop = scrollTop;
-    this._updateScrollTop();
-    return this.props.scrollTop;
-  };
+          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;
+          }
+      }
 
-  /**
-   * Update the current scrollTop when the height of  the containers has been changed
-   * @returns {Number} scrollTop  Returns the applied scrollTop
-   * @private
-   */
-  Graph2d.prototype._updateScrollTop = function () {
-    // recalculate the scrollTopMin
-    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
-    if (scrollTopMin != this.props.scrollTopMin) {
-      // in case of bottom orientation, change the scrollTop such that the contents
-      // do not move relative to the time axis at the bottom
-      if (this.options.orientation == 'bottom') {
-        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+      // date from iso format or fallback
+      function makeDateFromString(config) {
+          parseISO(config);
+          if (config._isValid === false) {
+              delete config._isValid;
+              moment.createFromInputFallback(config);
+          }
       }
-      this.props.scrollTopMin = scrollTopMin;
-    }
 
-    // limit the scrollTop to the feasible scroll range
-    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
-    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
+      function makeDateFromInput(config) {
+          var input = config._i,
+              matched = aspNetJsonRegex.exec(input);
 
-    return this.props.scrollTop;
-  };
+          if (input === undefined) {
+              config._d = new Date();
+          } else if (matched) {
+              config._d = new Date(+matched[1]);
+          } else if (typeof input === 'string') {
+              makeDateFromString(config);
+          } else if (isArray(input)) {
+              config._a = input.slice(0);
+              dateFromConfig(config);
+          } else if (isDate(input)) {
+              config._d = new Date(+input);
+          } else if (typeof(input) === 'object') {
+              dateFromObject(config);
+          } else if (typeof(input) === 'number') {
+              // from milliseconds
+              config._d = new Date(input);
+          } else {
+              moment.createFromInputFallback(config);
+          }
+      }
 
-  /**
-   * Get the current scrollTop
-   * @returns {number} scrollTop
-   * @private
-   */
-  Graph2d.prototype._getScrollTop = function () {
-    return this.props.scrollTop;
-  };
+      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);
 
-  module.exports = Graph2d;
+          //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;
+      }
 
-/***/ },
-/* 8 */
-/***/ function(module, exports, __webpack_require__) {
+      function parseWeekday(input, language) {
+          if (typeof input === 'string') {
+              if (!isNaN(input)) {
+                  input = parseInt(input, 10);
+              }
+              else {
+                  input = language.weekdaysParse(input);
+                  if (typeof input !== 'number') {
+                      return null;
+                  }
+              }
+          }
+          return input;
+      }
 
-  var util = __webpack_require__(1);
-  var moment = __webpack_require__(38);
-  var Component = __webpack_require__(12);
+      /************************************
+          Relative Time
+      ************************************/
 
-  /**
-   * @constructor Range
-   * A Range controls a numeric range with a start and end value.
-   * The Range adjusts the range based on mouse events or programmatic changes,
-   * and triggers events when the range is changing or has been changed.
-   * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
-   * @param {Object} [options]    See description at Range.setOptions
-   */
-  function Range(body, options) {
-    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
-    this.start = now.clone().add('days', -3).valueOf(); // Number
-    this.end = now.clone().add('days', 4).valueOf();   // Number
 
-    this.body = body;
+      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
+      function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
+          return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+      }
 
-    // default options
-    this.defaultOptions = {
-      start: null,
-      end: null,
-      direction: 'horizontal', // 'horizontal' or 'vertical'
-      moveable: true,
-      zoomable: true,
-      min: null,
-      max: null,
-      zoomMin: 10,                                // milliseconds
-      zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000  // milliseconds
-    };
-    this.options = util.extend({}, this.defaultOptions);
+      function relativeTime(milliseconds, withoutSuffix, lang) {
+          var seconds = round(Math.abs(milliseconds) / 1000),
+              minutes = round(seconds / 60),
+              hours = round(minutes / 60),
+              days = round(hours / 24),
+              years = round(days / 365),
+              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.dd && ['dd', days] ||
+                  days <= relativeTimeThresholds.dm && ['M'] ||
+                  days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
+                  years === 1 && ['y'] || ['yy', years];
+          args[2] = withoutSuffix;
+          args[3] = milliseconds > 0;
+          args[4] = lang;
+          return substituteTimeAgo.apply({}, args);
+      }
 
-    this.props = {
-      touch: {}
-    };
 
-    // drag listeners for dragging
-    this.body.emitter.on('dragstart', this._onDragStart.bind(this));
-    this.body.emitter.on('drag',      this._onDrag.bind(this));
-    this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
+      /************************************
+          Week of Year
+      ************************************/
 
-    // ignore dragging when holding
-    this.body.emitter.on('hold', this._onHold.bind(this));
 
-    // mouse wheel for zooming
-    this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));
-    this.body.emitter.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
-
-    // pinch to zoom
-    this.body.emitter.on('touch', this._onTouch.bind(this));
-    this.body.emitter.on('pinch', this._onPinch.bind(this));
+      // 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;
 
-    this.setOptions(options);
-  }
 
-  Range.prototype = new Component();
+          if (daysToDayOfWeek > end) {
+              daysToDayOfWeek -= 7;
+          }
 
-  /**
-   * Set options for the range controller
-   * @param {Object} options      Available options:
-   *                              {Number | Date | String} start  Start date for the range
-   *                              {Number | Date | String} end    End date for the range
-   *                              {Number} min    Minimum value for start
-   *                              {Number} max    Maximum value for end
-   *                              {Number} zoomMin    Set a minimum value for
-   *                                                  (end - start).
-   *                              {Number} zoomMax    Set a maximum value for
-   *                                                  (end - start).
-   *                              {Boolean} moveable Enable moving of the range
-   *                                                 by dragging. True by default
-   *                              {Boolean} zoomable Enable zooming of the range
-   *                                                 by pinching/scrolling. True by default
-   */
-  Range.prototype.setOptions = function (options) {
-    if (options) {
-      // copy the options that we know
-      var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
-      util.selectiveExtend(fields, this.options, options);
+          if (daysToDayOfWeek < end - 7) {
+              daysToDayOfWeek += 7;
+          }
 
-      if ('start' in options || 'end' in options) {
-        // apply a new range. both start and end are optional
-        this.setRange(options.start, options.end);
+          adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
+          return {
+              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
+              year: adjustedMoment.year()
+          };
       }
-    }
-  };
 
-  /**
-   * Test whether direction has a valid value
-   * @param {String} direction    'horizontal' or 'vertical'
-   */
-  function validateDirection (direction) {
-    if (direction != 'horizontal' && direction != 'vertical') {
-      throw new TypeError('Unknown direction "' + direction + '". ' +
-          'Choose "horizontal" or "vertical".');
-    }
-  }
+      //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;
 
-  /**
-   * Set a new start and end range
-   * @param {Number} [start]
-   * @param {Number} [end]
-   */
-  Range.prototype.setRange = function(start, end) {
-    var changed = this._applyRange(start, end);
-    if (changed) {
-      var params = {
-        start: new Date(this.start),
-        end: new Date(this.end)
-      };
-      this.body.emitter.emit('rangechange', params);
-      this.body.emitter.emit('rangechanged', params);
-    }
-  };
+          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;
 
-  /**
-   * Set a new start and end range. This method is the same as setRange, but
-   * does not trigger a range change and range changed event, and it returns
-   * true when the range is changed
-   * @param {Number} [start]
-   * @param {Number} [end]
-   * @return {Boolean} changed
-   * @private
-   */
-  Range.prototype._applyRange = function(start, end) {
-    var newStart = (start != null) ? util.convert(start, 'Date').valueOf() : this.start,
-        newEnd   = (end != null)   ? util.convert(end, 'Date').valueOf()   : this.end,
-        max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
-        min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
-        diff;
+          return {
+              year: dayOfYear > 0 ? year : year - 1,
+              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
+          };
+      }
 
-    // check for valid number
-    if (isNaN(newStart) || newStart === null) {
-      throw new Error('Invalid start "' + start + '"');
-    }
-    if (isNaN(newEnd) || newEnd === null) {
-      throw new Error('Invalid end "' + end + '"');
-    }
+      /************************************
+          Top Level Functions
+      ************************************/
 
-    // prevent start < end
-    if (newEnd < newStart) {
-      newEnd = newStart;
-    }
+      function makeMoment(config) {
+          var input = config._i,
+              format = config._f;
 
-    // prevent start < min
-    if (min !== null) {
-      if (newStart < min) {
-        diff = (min - newStart);
-        newStart += diff;
-        newEnd += diff;
+          if (input === null || (format === undefined && input === '')) {
+              return moment.invalid({nullInput: true});
+          }
 
-        // prevent end > max
-        if (max != null) {
-          if (newEnd > max) {
-            newEnd = max;
+          if (typeof input === 'string') {
+              config._i = input = getLangDefinition().preparse(input);
           }
-        }
-      }
-    }
 
-    // prevent end > max
-    if (max !== null) {
-      if (newEnd > max) {
-        diff = (newEnd - max);
-        newStart -= diff;
-        newEnd -= diff;
+          if (moment.isMoment(input)) {
+              config = cloneMoment(input);
 
-        // prevent start < min
-        if (min != null) {
-          if (newStart < min) {
-            newStart = min;
+              config._d = new Date(+input._d);
+          } else if (format) {
+              if (isArray(format)) {
+                  makeDateFromStringAndArray(config);
+              } else {
+                  makeDateFromStringAndFormat(config);
+              }
+          } else {
+              makeDateFromInput(config);
           }
-        }
-      }
-    }
-
-    // prevent (end-start) < zoomMin
-    if (this.options.zoomMin !== null) {
-      var zoomMin = parseFloat(this.options.zoomMin);
-      if (zoomMin < 0) {
-        zoomMin = 0;
-      }
-      if ((newEnd - newStart) < zoomMin) {
-        if ((this.end - this.start) === zoomMin) {
-          // ignore this action, we are already zoomed to the minimum
-          newStart = this.start;
-          newEnd = this.end;
-        }
-        else {
-          // zoom to the minimum
-          diff = (zoomMin - (newEnd - newStart));
-          newStart -= diff / 2;
-          newEnd += diff / 2;
-        }
-      }
-    }
 
-    // prevent (end-start) > zoomMax
-    if (this.options.zoomMax !== null) {
-      var zoomMax = parseFloat(this.options.zoomMax);
-      if (zoomMax < 0) {
-        zoomMax = 0;
-      }
-      if ((newEnd - newStart) > zoomMax) {
-        if ((this.end - this.start) === zoomMax) {
-          // ignore this action, we are already zoomed to the maximum
-          newStart = this.start;
-          newEnd = this.end;
-        }
-        else {
-          // zoom to the maximum
-          diff = ((newEnd - newStart) - zoomMax);
-          newStart += diff / 2;
-          newEnd -= diff / 2;
-        }
+          return new Moment(config);
       }
-    }
 
-    var changed = (this.start != newStart || this.end != newEnd);
+      moment = function (input, format, lang, strict) {
+          var c;
 
-    this.start = newStart;
-    this.end = newEnd;
+          if (typeof(lang) === "boolean") {
+              strict = lang;
+              lang = 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 = lang;
+          c._strict = strict;
+          c._isUTC = false;
+          c._pf = defaultParsingFlags();
 
-    return changed;
-  };
+          return makeMoment(c);
+      };
 
-  /**
-   * Retrieve the current range.
-   * @return {Object} An object with start and end properties
-   */
-  Range.prototype.getRange = function() {
-    return {
-      start: this.start,
-      end: this.end
-    };
-  };
+      moment.suppressDeprecationWarnings = false;
 
-  /**
-   * Calculate the conversion offset and scale for current range, based on
-   * the provided width
-   * @param {Number} width
-   * @returns {{offset: number, scale: number}} conversion
-   */
-  Range.prototype.conversion = function (width) {
-    return Range.conversion(this.start, this.end, width);
-  };
+      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);
+      });
 
-  /**
-   * Static method to calculate the conversion offset and scale for a range,
-   * based on the provided start, end, and width
-   * @param {Number} start
-   * @param {Number} end
-   * @param {Number} width
-   * @returns {{offset: number, scale: number}} conversion
-   */
-  Range.conversion = function (start, end, width) {
-    if (width != 0 && (end - start != 0)) {
-      return {
-        offset: start,
-        scale: width / (end - start)
+      // 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;
       }
-    }
-    else {
-      return {
-        offset: 0,
-        scale: 1
-      };
-    }
-  };
 
-  /**
-   * Start dragging horizontally or vertically
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onDragStart = function(event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
+      moment.min = function () {
+          var args = [].slice.call(arguments, 0);
 
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
+          return pickBy('isBefore', args);
+      };
 
-    this.props.touch.start = this.start;
-    this.props.touch.end = this.end;
+      moment.max = function () {
+          var args = [].slice.call(arguments, 0);
 
-    if (this.body.dom.root) {
-      this.body.dom.root.style.cursor = 'move';
-    }
-  };
+          return pickBy('isAfter', args);
+      };
 
-  /**
-   * Perform dragging operation
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onDrag = function (event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
-    var direction = this.options.direction;
-    validateDirection(direction);
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
-    var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
-        interval = (this.props.touch.end - this.props.touch.start),
-        width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
-        diffRange = -delta / width * interval;
-    this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
-    this.body.emitter.emit('rangechange', {
-      start: new Date(this.start),
-      end:   new Date(this.end)
-    });
-  };
+      // creating with utc
+      moment.utc = function (input, format, lang, strict) {
+          var c;
 
-  /**
-   * Stop dragging operation
-   * @param {event} event
-   * @private
-   */
-  Range.prototype._onDragEnd = function (event) {
-    // only allow dragging when configured as movable
-    if (!this.options.moveable) return;
+          if (typeof(lang) === "boolean") {
+              strict = lang;
+              lang = 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 = lang;
+          c._i = input;
+          c._f = format;
+          c._strict = strict;
+          c._pf = defaultParsingFlags();
 
-    // refuse to drag when we where pinching to prevent the timeline make a jump
-    // when releasing the fingers in opposite order from the touch screen
-    if (!this.props.touch.allowDragging) return;
+          return makeMoment(c).utc();
+      };
 
-    if (this.body.dom.root) {
-      this.body.dom.root.style.cursor = 'auto';
-    }
+      // creating with unix timestamp (in seconds)
+      moment.unix = function (input) {
+          return moment(input * 1000);
+      };
 
-    // fire a rangechanged event
-    this.body.emitter.emit('rangechanged', {
-      start: new Date(this.start),
-      end:   new Date(this.end)
-    });
-  };
+      // duration
+      moment.duration = function (input, key) {
+          var duration = input,
+              // matching against regexp is expensive, do it on demand
+              match = null,
+              sign,
+              ret,
+              parseIso;
 
-  /**
-   * Event handler for mouse wheel event, used to zoom
-   * Code from http://adomas.org/javascript-mouse-wheel/
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onMouseWheel = function(event) {
-    // only allow zooming when configured as zoomable and moveable
-    if (!(this.options.zoomable && this.options.moveable)) return;
+          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])
+              };
+          }
 
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta / 120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail / 3;
-    }
+          ret = new Duration(duration);
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-      // perform the zoom action. Delta is normally 1 or -1
+          if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
+              ret._lang = input._lang;
+          }
 
-      // adjust a negative delta such that zooming in with delta 0.1
-      // equals zooming out with a delta -0.1
-      var scale;
-      if (delta < 0) {
-        scale = 1 - (delta / 5);
-      }
-      else {
-        scale = 1 / (1 + (delta / 5)) ;
-      }
+          return ret;
+      };
 
-      // calculate center, the date to zoom around
-      var gesture = util.fakeGesture(this, event),
-          pointer = getPointer(gesture.center, this.body.dom.center),
-          pointerDate = this._pointerToDate(pointer);
+      // version number
+      moment.version = VERSION;
 
-      this.zoom(scale, pointerDate);
-    }
+      // default format
+      moment.defaultFormat = isoFormat;
 
-    // Prevent default actions caused by mouse wheel
-    // (else the page and timeline both zoom and scroll)
-    event.preventDefault();
-  };
+      // constant that refers to the ISO standard
+      moment.ISO_8601 = function () {};
 
-  /**
-   * Start of a touch gesture
-   * @private
-   */
-  Range.prototype._onTouch = function (event) {
-    this.props.touch.start = this.start;
-    this.props.touch.end = this.end;
-    this.props.touch.allowDragging = true;
-    this.props.touch.center = null;
-  };
+      // Plugins that add properties should also add the key here (null value),
+      // so we can properly clone ourselves.
+      moment.momentProperties = momentProperties;
 
-  /**
-   * On start of a hold gesture
-   * @private
-   */
-  Range.prototype._onHold = function () {
-    this.props.touch.allowDragging = false;
-  };
-
-  /**
-   * Handle pinch event
-   * @param {Event} event
-   * @private
-   */
-  Range.prototype._onPinch = function (event) {
-    // only allow zooming when configured as zoomable and moveable
-    if (!(this.options.zoomable && this.options.moveable)) return;
-
-    this.props.touch.allowDragging = false;
-
-    if (event.gesture.touches.length > 1) {
-      if (!this.props.touch.center) {
-        this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
-      }
+      // 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 () {};
 
-      var scale = 1 / event.gesture.scale,
-          initDate = this._pointerToDate(this.props.touch.center);
+      // This function allows you to set a threshold for relative time strings
+      moment.relativeTimeThreshold = function(threshold, limit) {
+        if (relativeTimeThresholds[threshold] === undefined) {
+          return false;
+        }
+        relativeTimeThresholds[threshold] = limit;
+        return true;
+      };
 
-      // calculate new start and end
-      var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
-      var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
+      // This function will load languages and then set the global language.  If
+      // no arguments are passed in, it will simply return the current global
+      // language key.
+      moment.lang = function (key, values) {
+          var r;
+          if (!key) {
+              return moment.fn._lang._abbr;
+          }
+          if (values) {
+              loadLang(normalizeLanguage(key), values);
+          } else if (values === null) {
+              unloadLang(key);
+              key = 'en';
+          } else if (!languages[key]) {
+              getLangDefinition(key);
+          }
+          r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
+          return r._abbr;
+      };
 
-      // apply new range
-      this.setRange(newStart, newEnd);
-    }
-  };
+      // returns language data
+      moment.langData = function (key) {
+          if (key && key._lang && key._lang._abbr) {
+              key = key._lang._abbr;
+          }
+          return getLangDefinition(key);
+      };
 
-  /**
-   * Helper function to calculate the center date for zooming
-   * @param {{x: Number, y: Number}} pointer
-   * @return {number} date
-   * @private
-   */
-  Range.prototype._pointerToDate = function (pointer) {
-    var conversion;
-    var direction = this.options.direction;
+      // compare moment object
+      moment.isMoment = function (obj) {
+          return obj instanceof Moment ||
+              (obj != null &&  obj.hasOwnProperty('_isAMomentObject'));
+      };
 
-    validateDirection(direction);
+      // for typechecking Duration objects
+      moment.isDuration = function (obj) {
+          return obj instanceof Duration;
+      };
 
-    if (direction == 'horizontal') {
-      var width = this.body.domProps.center.width;
-      conversion = this.conversion(width);
-      return pointer.x / conversion.scale + conversion.offset;
-    }
-    else {
-      var height = this.body.domProps.center.height;
-      conversion = this.conversion(height);
-      return pointer.y / conversion.scale + conversion.offset;
-    }
-  };
+      for (i = lists.length - 1; i >= 0; --i) {
+          makeList(lists[i]);
+      }
 
-  /**
-   * Get the pointer location relative to the location of the dom element
-   * @param {{pageX: Number, pageY: Number}} touch
-   * @param {Element} element   HTML DOM element
-   * @return {{x: Number, y: Number}} pointer
-   * @private
-   */
-  function getPointer (touch, element) {
-    return {
-      x: touch.pageX - util.getAbsoluteLeft(element),
-      y: touch.pageY - util.getAbsoluteTop(element)
-    };
-  }
+      moment.normalizeUnits = function (units) {
+          return normalizeUnits(units);
+      };
 
-  /**
-   * Zoom the range the given scale in or out. Start and end date will
-   * be adjusted, and the timeline will be redrawn. You can optionally give a
-   * date around which to zoom.
-   * For example, try scale = 0.9 or 1.1
-   * @param {Number} scale      Scaling factor. Values above 1 will zoom out,
-   *                            values below 1 will zoom in.
-   * @param {Number} [center]   Value representing a date around which will
-   *                            be zoomed.
-   */
-  Range.prototype.zoom = function(scale, center) {
-    // if centerDate is not provided, take it half between start Date and end Date
-    if (center == null) {
-      center = (this.start + this.end) / 2;
-    }
+      moment.invalid = function (flags) {
+          var m = moment.utc(NaN);
+          if (flags != null) {
+              extend(m._pf, flags);
+          }
+          else {
+              m._pf.userInvalidated = true;
+          }
 
-    // calculate new start and end
-    var newStart = center + (this.start - center) * scale;
-    var newEnd = center + (this.end - center) * scale;
+          return m;
+      };
 
-    this.setRange(newStart, newEnd);
-  };
+      moment.parseZone = function () {
+          return moment.apply(null, arguments).parseZone();
+      };
 
-  /**
-   * Move the range with a given delta to the left or right. Start and end
-   * value will be adjusted. For example, try delta = 0.1 or -0.1
-   * @param {Number}  delta     Moving amount. Positive value will move right,
-   *                            negative value will move left
-   */
-  Range.prototype.move = function(delta) {
-    // zoom start Date and end Date relative to the centerDate
-    var diff = (this.end - this.start);
+      moment.parseTwoDigitYear = function (input) {
+          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+      };
 
-    // apply new values
-    var newStart = this.start + diff * delta;
-    var newEnd = this.end + diff * delta;
+      /************************************
+          Moment Prototype
+      ************************************/
 
-    // TODO: reckon with min and max range
 
-    this.start = newStart;
-    this.end = newEnd;
-  };
+      extend(moment.fn = Moment.prototype, {
 
-  /**
-   * Move the range to a new center point
-   * @param {Number} moveTo      New center point of the range
-   */
-  Range.prototype.moveTo = function(moveTo) {
-    var center = (this.start + this.end) / 2;
+          clone : function () {
+              return moment(this);
+          },
 
-    var diff = center - moveTo;
+          valueOf : function () {
+              return +this._d + ((this._offset || 0) * 60000);
+          },
 
-    // calculate new start and end
-    var newStart = this.start - diff;
-    var newEnd = this.end - diff;
+          unix : function () {
+              return Math.floor(+this / 1000);
+          },
 
-    this.setRange(newStart, newEnd);
-  };
+          toString : function () {
+              return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
+          },
 
-  module.exports = Range;
+          toDate : function () {
+              return this._offset ? new Date(+this) : this._d;
+          },
 
+          toISOString : function () {
+              var m = moment(this).utc();
+              if (0 < m.year() && m.year() <= 9999) {
+                  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]');
+              }
+          },
 
-/***/ },
-/* 9 */
-/***/ function(module, exports, __webpack_require__) {
+          toArray : function () {
+              var m = this;
+              return [
+                  m.year(),
+                  m.month(),
+                  m.date(),
+                  m.hours(),
+                  m.minutes(),
+                  m.seconds(),
+                  m.milliseconds()
+              ];
+          },
 
-  // Utility functions for ordering and stacking of items
-  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
+          isValid : function () {
+              return isValid(this);
+          },
 
-  /**
-   * Order items by their start data
-   * @param {Item[]} items
-   */
-  exports.orderByStart = function(items) {
-    items.sort(function (a, b) {
-      return a.data.start - b.data.start;
-    });
-  };
+          isDSTShifted : function () {
 
-  /**
-   * Order items by their end date. If they have no end date, their start date
-   * is used.
-   * @param {Item[]} items
-   */
-  exports.orderByEnd = function(items) {
-    items.sort(function (a, b) {
-      var aTime = ('end' in a.data) ? a.data.end : a.data.start,
-          bTime = ('end' in b.data) ? b.data.end : b.data.start;
+              if (this._a) {
+                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
+              }
 
-      return aTime - bTime;
-    });
-  };
+              return false;
+          },
 
-  /**
-   * Adjust vertical positions of the items such that they don't overlap each
-   * other.
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: number, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   * @param {boolean} [force=false]
-   *            If true, all items will be repositioned. If false (default), only
-   *            items having a top===null will be re-stacked
-   */
-  exports.stack = function(items, margin, force) {
-    var i, iMax;
+          parsingFlags : function () {
+              return extend({}, this._pf);
+          },
 
-    if (force) {
-      // reset top position of all items
-      for (i = 0, iMax = items.length; i < iMax; i++) {
-        items[i].top = null;
-      }
-    }
+          invalidAt: function () {
+              return this._pf.overflow;
+          },
 
-    // calculate new, non-overlapping positions
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      var item = items[i];
-      if (item.top === null) {
-        // initialize top position
-        item.top = margin.axis;
+          utc : function () {
+              return this.zone(0);
+          },
 
-        do {
-          // TODO: optimize checking for overlap. when there is a gap without items,
-          //       you only need to check for items from the next item on, not from zero
-          var collidingItem = null;
-          for (var j = 0, jj = items.length; j < jj; j++) {
-            var other = items[j];
-            if (other.top !== null && other !== item && exports.collision(item, other, margin.item)) {
-              collidingItem = other;
-              break;
-            }
-          }
+          local : function () {
+              this.zone(0);
+              this._isUTC = false;
+              return this;
+          },
 
-          if (collidingItem != null) {
-            // There is a collision. Reposition the items above the colliding element
-            item.top = collidingItem.top + collidingItem.height + margin.item;
-          }
-        } while (collidingItem);
-      }
-    }
-  };
+          format : function (inputString) {
+              var output = formatMoment(this, inputString || moment.defaultFormat);
+              return this.lang().postformat(output);
+          },
 
-  /**
-   * Adjust vertical positions of the items without stacking them
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: number, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   */
-  exports.nostack = function(items, margin) {
-    var i, iMax;
+          add : function (input, val) {
+              var dur;
+              // switch args to support add('s', 1) and add(1, 's')
+              if (typeof input === 'string' && typeof val === 'string') {
+                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
+              } else if (typeof input === 'string') {
+                  dur = moment.duration(+val, input);
+              } else {
+                  dur = moment.duration(input, val);
+              }
+              addOrSubtractDurationFromMoment(this, dur, 1);
+              return this;
+          },
 
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].top = margin.axis;
-    }
-  };
+          subtract : function (input, val) {
+              var dur;
+              // switch args to support subtract('s', 1) and subtract(1, 's')
+              if (typeof input === 'string' && typeof val === 'string') {
+                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
+              } else if (typeof input === 'string') {
+                  dur = moment.duration(+val, input);
+              } else {
+                  dur = moment.duration(input, val);
+              }
+              addOrSubtractDurationFromMoment(this, dur, -1);
+              return this;
+          },
 
-  /**
-   * Test if the two provided items collide
-   * The items must have parameters left, width, top, and height.
-   * @param {Item} a          The first item
-   * @param {Item} b          The second item
-   * @param {Number} margin   A minimum required margin.
-   *                          If margin is provided, the two items will be
-   *                          marked colliding when they overlap or
-   *                          when the margin between the two is smaller than
-   *                          the requested margin.
-   * @return {boolean}        true if a and b collide, else false
-   */
-  exports.collision = function(a, b, margin) {
-    return ((a.left - margin + EPSILON)       < (b.left + b.width) &&
-        (a.left + a.width + margin - EPSILON) > b.left &&
-        (a.top - margin + EPSILON)            < (b.top + b.height) &&
-        (a.top + a.height + margin - EPSILON) > b.top);
-  };
+          diff : function (input, units, asFloat) {
+              var that = makeAs(input, this),
+                  zoneDiff = (this.zone() - that.zone()) * 6e4,
+                  diff, output;
 
+              units = normalizeUnits(units);
 
-/***/ },
-/* 10 */
-/***/ function(module, exports, __webpack_require__) {
+              if (units === 'year' || units === 'month') {
+                  // average number of days in the months in the given dates
+                  diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
+                  // difference in months
+                  output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
+                  // adjust by taking difference in days, average number of days
+                  // and dst in the given months.
+                  output += ((this - moment(this).startOf('month')) -
+                          (that - moment(that).startOf('month'))) / diff;
+                  // same as above but with zones, to negate all dst
+                  output -= ((this.zone() - moment(this).startOf('month').zone()) -
+                          (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
+                  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);
+          },
 
-  var moment = __webpack_require__(38);
+          from : function (time, withoutSuffix) {
+              return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
+          },
 
-  /**
-   * @constructor  TimeStep
-   * The class TimeStep is an iterator for dates. You provide a start date and an
-   * end date. The class itself determines the best scale (step size) based on the
-   * provided start Date, end Date, and minimumStep.
-   *
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   *
-   * Alternatively, you can set a scale by hand.
-   * After creation, you can initialize the class by executing first(). Then you
-   * can iterate from the start date to the end date via next(). You can check if
-   * the end date is reached with the function hasNext(). After each step, you can
-   * retrieve the current date via getCurrent().
-   * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
-   * days, to years.
-   *
-   * Version: 1.2
-   *
-   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
-   *                               or new Date(2010, 9, 21, 23, 45, 00)
-   * @param {Date} [end]           The end date
-   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  function TimeStep(start, end, minimumStep) {
-    // variables
-    this.current = new Date();
-    this._start = new Date();
-    this._end = new Date();
+          fromNow : function (withoutSuffix) {
+              return this.from(moment(), withoutSuffix);
+          },
 
-    this.autoScale  = true;
-    this.scale = TimeStep.SCALE.DAY;
-    this.step = 1;
+          calendar : function (time) {
+              // We want to compare the start of today, vs this.
+              // Getting start-of-today depends on whether we're zone'd 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.lang().calendar(format, this));
+          },
 
-    // initialize the range
-    this.setRange(start, end, minimumStep);
-  }
+          isLeapYear : function () {
+              return isLeapYear(this.year());
+          },
 
-  /// enum scale
-  TimeStep.SCALE = {
-    MILLISECOND: 1,
-    SECOND: 2,
-    MINUTE: 3,
-    HOUR: 4,
-    DAY: 5,
-    WEEKDAY: 6,
-    MONTH: 7,
-    YEAR: 8
-  };
+          isDST : function () {
+              return (this.zone() < this.clone().month(0).zone() ||
+                  this.zone() < this.clone().month(5).zone());
+          },
 
+          day : function (input) {
+              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
+              if (input != null) {
+                  input = parseWeekday(input, this.lang());
+                  return this.add({ d : input - day });
+              } else {
+                  return day;
+              }
+          },
 
-  /**
-   * Set a new range
-   * If minimumStep is provided, the step size is chosen as close as possible
-   * to the minimumStep but larger than minimumStep. If minimumStep is not
-   * provided, the scale is set to 1 DAY.
-   * The minimumStep should correspond with the onscreen size of about 6 characters
-   * @param {Date} [start]      The start date and time.
-   * @param {Date} [end]        The end date and time.
-   * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
-   */
-  TimeStep.prototype.setRange = function(start, end, minimumStep) {
-    if (!(start instanceof Date) || !(end instanceof Date)) {
-      throw  "No legal start or end date in method setRange";
-    }
+          month : makeAccessor('Month', true),
 
-    this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
-    this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
+          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 */
+              }
 
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep);
-    }
-  };
+              // weeks are a special case
+              if (units === 'week') {
+                  this.weekday(0);
+              } else if (units === 'isoWeek') {
+                  this.isoWeekday(1);
+              }
 
-  /**
-   * Set the range iterator to the start date.
-   */
-  TimeStep.prototype.first = function() {
-    this.current = new Date(this._start.valueOf());
-    this.roundToMinor();
-  };
+              // quarters are also special
+              if (units === 'quarter') {
+                  this.month(Math.floor(this.month() / 3) * 3);
+              }
 
-  /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
-   */
-  TimeStep.prototype.roundToMinor = function() {
-    // round to floor
-    // IMPORTANT: we have no breaks in this switch! (this is no bug)
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.scale) {
-      case TimeStep.SCALE.YEAR:
-        this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
-        this.current.setMonth(0);
-      case TimeStep.SCALE.MONTH:        this.current.setDate(1);
-      case TimeStep.SCALE.DAY:          // intentional fall through
-      case TimeStep.SCALE.WEEKDAY:      this.current.setHours(0);
-      case TimeStep.SCALE.HOUR:         this.current.setMinutes(0);
-      case TimeStep.SCALE.MINUTE:       this.current.setSeconds(0);
-      case TimeStep.SCALE.SECOND:       this.current.setMilliseconds(0);
-      //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
-    }
+              return this;
+          },
 
-    if (this.step != 1) {
-      // round down to the first minor value that is a multiple of the current step size
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step);  break;
-        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
-        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
-        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step);  break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
-        default: break;
-      }
-    }
-  };
+          endOf: function (units) {
+              units = normalizeUnits(units);
+              return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
+          },
 
-  /**
-   * Check if the there is a next step
-   * @return {boolean}  true if the current date has not passed the end date
-   */
-  TimeStep.prototype.hasNext = function () {
-    return (this.current.valueOf() <= this._end.valueOf());
-  };
+          isAfter: function (input, units) {
+              units = typeof units !== 'undefined' ? units : 'millisecond';
+              return +this.clone().startOf(units) > +moment(input).startOf(units);
+          },
 
-  /**
-   * Do the next step
-   */
-  TimeStep.prototype.next = function() {
-    var prev = this.current.valueOf();
+          isBefore: function (input, units) {
+              units = typeof units !== 'undefined' ? units : 'millisecond';
+              return +this.clone().startOf(units) < +moment(input).startOf(units);
+          },
 
-    // Two cases, needed to prevent issues with switching daylight savings
-    // (end of March and end of October)
-    if (this.current.getMonth() < 6)   {
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:
+          isSame: function (input, units) {
+              units = units || 'ms';
+              return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
+          },
 
-          this.current = new Date(this.current.valueOf() + this.step); break;
-        case TimeStep.SCALE.SECOND:       this.current = new Date(this.current.valueOf() + this.step * 1000); break;
-        case TimeStep.SCALE.MINUTE:       this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
-        case TimeStep.SCALE.HOUR:
-          this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
-          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
-          var h = this.current.getHours();
-          this.current.setHours(h - (h % this.step));
-          break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
-        default:                      break;
-      }
-    }
-    else {
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  this.current = new Date(this.current.valueOf() + this.step); break;
-        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() + this.step); break;
-        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() + this.step); break;
-        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() + this.step); break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
-        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
-        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
-        default:                      break;
-      }
-    }
+          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;
+                   }
+           ),
 
-    if (this.step != 1) {
-      // round down to the correct major value
-      switch (this.scale) {
-        case TimeStep.SCALE.MILLISECOND:  if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0);  break;
-        case TimeStep.SCALE.SECOND:       if(this.current.getSeconds() < this.step) this.current.setSeconds(0);  break;
-        case TimeStep.SCALE.MINUTE:       if(this.current.getMinutes() < this.step) this.current.setMinutes(0);  break;
-        case TimeStep.SCALE.HOUR:         if(this.current.getHours() < this.step) this.current.setHours(0);  break;
-        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
-        case TimeStep.SCALE.DAY:          if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
-        case TimeStep.SCALE.MONTH:        if(this.current.getMonth() < this.step) this.current.setMonth(0);  break;
-        case TimeStep.SCALE.YEAR:         break; // nothing to do for year
-        default:                break;
-      }
-    }
+          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;
+                  }
+          ),
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current.valueOf() == prev) {
-      this.current = new Date(this._end.valueOf());
-    }
-  };
+          // keepTime = true means only change the timezone, without affecting
+          // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
+          // It is possible that 5:31:26 doesn't exist int zone +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.
+          zone : function (input, keepTime) {
+              var offset = this._offset || 0;
+              if (input != null) {
+                  if (typeof input === "string") {
+                      input = timezoneMinutesFromString(input);
+                  }
+                  if (Math.abs(input) < 16) {
+                      input = input * 60;
+                  }
+                  this._offset = input;
+                  this._isUTC = true;
+                  if (offset !== input) {
+                      if (!keepTime || this._changeInProgress) {
+                          addOrSubtractDurationFromMoment(this,
+                                  moment.duration(offset - input, 'm'), 1, false);
+                      } else if (!this._changeInProgress) {
+                          this._changeInProgress = true;
+                          moment.updateOffset(this, true);
+                          this._changeInProgress = null;
+                      }
+                  }
+              } else {
+                  return this._isUTC ? offset : this._d.getTimezoneOffset();
+              }
+              return this;
+          },
 
+          zoneAbbr : function () {
+              return this._isUTC ? "UTC" : "";
+          },
 
-  /**
-   * Get the current datetime
-   * @return {Date}  current The current date
-   */
-  TimeStep.prototype.getCurrent = function() {
-    return this.current;
-  };
+          zoneName : function () {
+              return this._isUTC ? "Coordinated Universal Time" : "";
+          },
 
-  /**
-   * Set a custom scale. Autoscaling will be disabled.
-   * For example setScale(SCALE.MINUTES, 5) will result
-   * in minor steps of 5 minutes, and major steps of an hour.
-   *
-   * @param {TimeStep.SCALE} newScale
-   *                               A scale. Choose from SCALE.MILLISECOND,
-   *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
-   *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
-   *                               SCALE.YEAR.
-   * @param {Number}     newStep   A step size, by default 1. Choose for
-   *                               example 1, 2, 5, or 10.
-   */
-  TimeStep.prototype.setScale = function(newScale, newStep) {
-    this.scale = newScale;
+          parseZone : function () {
+              if (this._tzm) {
+                  this.zone(this._tzm);
+              } else if (typeof this._i === 'string') {
+                  this.zone(this._i);
+              }
+              return this;
+          },
 
-    if (newStep > 0) {
-      this.step = newStep;
-    }
+          hasAlignedHourOffset : function (input) {
+              if (!input) {
+                  input = 0;
+              }
+              else {
+                  input = moment(input).zone();
+              }
 
-    this.autoScale = false;
-  };
+              return (this.zone() - input) % 60 === 0;
+          },
 
-  /**
-   * Enable or disable autoscaling
-   * @param {boolean} enable  If true, autoascaling is set true
-   */
-  TimeStep.prototype.setAutoScale = function (enable) {
-    this.autoScale = enable;
-  };
+          daysInMonth : function () {
+              return daysInMonth(this.year(), this.month());
+          },
 
+          dayOfYear : function (input) {
+              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
+              return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
+          },
 
-  /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
-   */
-  TimeStep.prototype.setMinimumStep = function(minimumStep) {
-    if (minimumStep == undefined) {
-      return;
-    }
+          quarter : function (input) {
+              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
+          },
 
-    var stepYear       = (1000 * 60 * 60 * 24 * 30 * 12);
-    var stepMonth      = (1000 * 60 * 60 * 24 * 30);
-    var stepDay        = (1000 * 60 * 60 * 24);
-    var stepHour       = (1000 * 60 * 60);
-    var stepMinute     = (1000 * 60);
-    var stepSecond     = (1000);
-    var stepMillisecond= (1);
+          weekYear : function (input) {
+              var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
+              return input == null ? year : this.add("y", (input - year));
+          },
 
-    // find the smallest step that is larger than the provided minimumStep
-    if (stepYear*1000 > minimumStep)        {this.scale = TimeStep.SCALE.YEAR;        this.step = 1000;}
-    if (stepYear*500 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 500;}
-    if (stepYear*100 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 100;}
-    if (stepYear*50 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 50;}
-    if (stepYear*10 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 10;}
-    if (stepYear*5 > minimumStep)           {this.scale = TimeStep.SCALE.YEAR;        this.step = 5;}
-    if (stepYear > minimumStep)             {this.scale = TimeStep.SCALE.YEAR;        this.step = 1;}
-    if (stepMonth*3 > minimumStep)          {this.scale = TimeStep.SCALE.MONTH;       this.step = 3;}
-    if (stepMonth > minimumStep)            {this.scale = TimeStep.SCALE.MONTH;       this.step = 1;}
-    if (stepDay*5 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 5;}
-    if (stepDay*2 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 2;}
-    if (stepDay > minimumStep)              {this.scale = TimeStep.SCALE.DAY;         this.step = 1;}
-    if (stepDay/2 > minimumStep)            {this.scale = TimeStep.SCALE.WEEKDAY;     this.step = 1;}
-    if (stepHour*4 > minimumStep)           {this.scale = TimeStep.SCALE.HOUR;        this.step = 4;}
-    if (stepHour > minimumStep)             {this.scale = TimeStep.SCALE.HOUR;        this.step = 1;}
-    if (stepMinute*15 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 15;}
-    if (stepMinute*10 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 10;}
-    if (stepMinute*5 > minimumStep)         {this.scale = TimeStep.SCALE.MINUTE;      this.step = 5;}
-    if (stepMinute > minimumStep)           {this.scale = TimeStep.SCALE.MINUTE;      this.step = 1;}
-    if (stepSecond*15 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 15;}
-    if (stepSecond*10 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 10;}
-    if (stepSecond*5 > minimumStep)         {this.scale = TimeStep.SCALE.SECOND;      this.step = 5;}
-    if (stepSecond > minimumStep)           {this.scale = TimeStep.SCALE.SECOND;      this.step = 1;}
-    if (stepMillisecond*200 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
-    if (stepMillisecond*100 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
-    if (stepMillisecond*50 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
-    if (stepMillisecond*10 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
-    if (stepMillisecond*5 > minimumStep)    {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
-    if (stepMillisecond > minimumStep)      {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
-  };
+          isoWeekYear : function (input) {
+              var year = weekOfYear(this, 1, 4).year;
+              return input == null ? year : this.add("y", (input - year));
+          },
 
-  /**
-   * 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
-   */
-  TimeStep.prototype.snap = function(date) {
-    var clone = new Date(date.valueOf());
+          week : function (input) {
+              var week = this.lang().week(this);
+              return input == null ? week : this.add("d", (input - week) * 7);
+          },
 
-    if (this.scale == TimeStep.SCALE.YEAR) {
-      var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
-      clone.setFullYear(Math.round(year / this.step) * this.step);
-      clone.setMonth(0);
-      clone.setDate(0);
-      clone.setHours(0);
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.MONTH) {
-      if (clone.getDate() > 15) {
-        clone.setDate(1);
-        clone.setMonth(clone.getMonth() + 1);
-        // important: first set Date to 1, after that change the month.
-      }
-      else {
-        clone.setDate(1);
-      }
+          isoWeek : function (input) {
+              var week = weekOfYear(this, 1, 4).week;
+              return input == null ? week : this.add("d", (input - week) * 7);
+          },
 
-      clone.setHours(0);
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.DAY) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 5:
-        case 2:
-          clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
-        default:
-          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
-      }
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.WEEKDAY) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 5:
-        case 2:
-          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
-        default:
-          clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
-      }
-      clone.setMinutes(0);
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.HOUR) {
-      switch (this.step) {
-        case 4:
-          clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
-        default:
-          clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
-      }
-      clone.setSeconds(0);
-      clone.setMilliseconds(0);
-    } else if (this.scale == TimeStep.SCALE.MINUTE) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 15:
-        case 10:
-          clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
-          clone.setSeconds(0);
-          break;
-        case 5:
-          clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
-        default:
-          clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
-      }
-      clone.setMilliseconds(0);
-    }
-    else if (this.scale == TimeStep.SCALE.SECOND) {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (this.step) {
-        case 15:
-        case 10:
-          clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
-          clone.setMilliseconds(0);
-          break;
-        case 5:
-          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
-        default:
-          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
-      }
-    }
-    else if (this.scale == TimeStep.SCALE.MILLISECOND) {
-      var step = this.step > 5 ? this.step / 2 : 1;
-      clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
-    }
-    
-    return clone;
-  };
+          weekday : function (input) {
+              var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
+              return input == null ? weekday : this.add("d", input - weekday);
+          },
 
-  /**
-   * Check if the current value is a major value (for example when the step
-   * is DAY, a major value is each first day of the MONTH)
-   * @return {boolean} true if current date is major, else false.
-   */
-  TimeStep.prototype.isMajor = function() {
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:
-        return (this.current.getMilliseconds() == 0);
-      case TimeStep.SCALE.SECOND:
-        return (this.current.getSeconds() == 0);
-      case TimeStep.SCALE.MINUTE:
-        return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
-      // Note: this is no bug. Major label is equal for both minute and hour scale
-      case TimeStep.SCALE.HOUR:
-        return (this.current.getHours() == 0);
-      case TimeStep.SCALE.WEEKDAY: // intentional fall through
-      case TimeStep.SCALE.DAY:
-        return (this.current.getDate() == 1);
-      case TimeStep.SCALE.MONTH:
-        return (this.current.getMonth() == 0);
-      case TimeStep.SCALE.YEAR:
-        return false;
-      default:
-        return false;
-    }
-  };
+          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);
+          },
 
+          isoWeeksInYear : function () {
+              return weeksInYear(this.year(), 1, 4);
+          },
 
-  /**
-   * Returns formatted text for the minor axislabel, depending on the current
-   * date and the scale. For example when scale is MINUTE, the current time is
-   * formatted as "hh:mm".
-   * @param {Date} [date] custom date. if not provided, current date is taken
-   */
-  TimeStep.prototype.getLabelMinor = function(date) {
-    if (date == undefined) {
-      date = this.current;
-    }
+          weeksInYear : function () {
+              var weekInfo = this._lang._week;
+              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
+          },
 
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:  return moment(date).format('SSS');
-      case TimeStep.SCALE.SECOND:       return moment(date).format('s');
-      case TimeStep.SCALE.MINUTE:       return moment(date).format('HH:mm');
-      case TimeStep.SCALE.HOUR:         return moment(date).format('HH:mm');
-      case TimeStep.SCALE.WEEKDAY:      return moment(date).format('ddd D');
-      case TimeStep.SCALE.DAY:          return moment(date).format('D');
-      case TimeStep.SCALE.MONTH:        return moment(date).format('MMM');
-      case TimeStep.SCALE.YEAR:         return moment(date).format('YYYY');
-      default:                          return '';
-    }
-  };
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units]();
+          },
 
+          set : function (units, value) {
+              units = normalizeUnits(units);
+              if (typeof this[units] === 'function') {
+                  this[units](value);
+              }
+              return this;
+          },
 
-  /**
-   * Returns formatted text for the major axis label, depending on the current
-   * date and the scale. For example when scale is MINUTE, the major scale is
-   * hours, and the hour will be formatted as "hh".
-   * @param {Date} [date] custom date. if not provided, current date is taken
-   */
-  TimeStep.prototype.getLabelMajor = function(date) {
-    if (date == undefined) {
-      date = this.current;
-    }
+          // If passed a language key, it will set the language for this
+          // instance.  Otherwise, it will return the language configuration
+          // variables for this instance.
+          lang : function (key) {
+              if (key === undefined) {
+                  return this._lang;
+              } else {
+                  this._lang = getLangDefinition(key);
+                  return this;
+              }
+          }
+      });
 
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.scale) {
-      case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
-      case TimeStep.SCALE.SECOND:     return moment(date).format('D MMMM HH:mm');
-      case TimeStep.SCALE.MINUTE:
-      case TimeStep.SCALE.HOUR:       return moment(date).format('ddd D MMMM');
-      case TimeStep.SCALE.WEEKDAY:
-      case TimeStep.SCALE.DAY:        return moment(date).format('MMMM YYYY');
-      case TimeStep.SCALE.MONTH:      return moment(date).format('YYYY');
-      case TimeStep.SCALE.YEAR:       return '';
-      default:                        return '';
-    }
-  };
+      function rawMonthSetter(mom, value) {
+          var dayOfMonth;
 
-  module.exports = TimeStep;
+          // TODO: Move this out of here!
+          if (typeof value === 'string') {
+              value = mom.lang().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;
+      }
 
-/***/ },
-/* 11 */
-/***/ function(module, exports, __webpack_require__) {
+      function rawGetter(mom, unit) {
+          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
+      }
 
-  var Emitter = __webpack_require__(41);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Point3d = __webpack_require__(33);
-  var Point2d = __webpack_require__(34);
-  var Filter = __webpack_require__(35);
-  var StepNumber = __webpack_require__(36);
+      function rawSetter(mom, unit, value) {
+          if (unit === 'Month') {
+              return rawMonthSetter(mom, value);
+          } else {
+              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
+          }
+      }
 
-  /**
-   * @constructor Graph3d
-   * Graph3d displays data in 3d.
-   *
-   * Graph3d is developed in javascript as a Google Visualization Chart.
-   *
-   * @param {Element} container   The DOM element in which the Graph3d will
-   *                              be created. Normally a div element.
-   * @param {DataSet | DataView | Array} [data]
-   * @param {Object} [options]
-   */
-  function Graph3d(container, data, options) {
-    if (!(this instanceof Graph3d)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+      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);
+              }
+          };
+      }
 
-    // create variables and set default values
-    this.containerElement = container;
-    this.width = '400px';
-    this.height = '400px';
-    this.margin = 10; // px
-    this.defaultXCenter = '55%';
-    this.defaultYCenter = '50%';
+      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.xLabel = 'x';
-    this.yLabel = 'y';
-    this.zLabel = 'z';
-    this.filterLabel = 'time';
-    this.legendLabel = 'value';
+      // 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;
 
-    this.style = Graph3d.STYLE.DOT;
-    this.showPerspective = true;
-    this.showGrid = true;
-    this.keepAspectRatio = true;
-    this.showShadow = false;
-    this.showGrayBottom = false; // TODO: this does not work correctly
-    this.showTooltip = false;
-    this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube'
+      // add aliased format methods
+      moment.fn.toJSON = moment.fn.toISOString;
 
-    this.animationInterval = 1000; // milliseconds
-    this.animationPreload = false;
+      /************************************
+          Duration Prototype
+      ************************************/
 
-    this.camera = new Graph3d.Camera();
-    this.eye = new Point3d(0, 0, -1);  // TODO: set eye.z about 3/4 of the width of the window?
 
-    this.dataTable = null;  // The original data table
-    this.dataPoints = null; // The table with point objects
+      extend(moment.duration.fn = Duration.prototype, {
 
-    // the column indexes
-    this.colX = undefined;
-    this.colY = undefined;
-    this.colZ = undefined;
-    this.colValue = undefined;
-    this.colFilter = undefined;
+          _bubble : function () {
+              var milliseconds = this._milliseconds,
+                  days = this._days,
+                  months = this._months,
+                  data = this._data,
+                  seconds, minutes, hours, years;
 
-    this.xMin = 0;
-    this.xStep = undefined; // auto by default
-    this.xMax = 1;
-    this.yMin = 0;
-    this.yStep = undefined; // auto by default
-    this.yMax = 1;
-    this.zMin = 0;
-    this.zStep = undefined; // auto by default
-    this.zMax = 1;
-    this.valueMin = 0;
-    this.valueMax = 1;
-    this.xBarWidth = 1;
-    this.yBarWidth = 1;
-    // TODO: customize axis range
+              // The following code bubbles up values, see the tests for
+              // examples of what that means.
+              data.milliseconds = milliseconds % 1000;
 
-    // constants
-    this.colorAxis = '#4D4D4D';
-    this.colorGrid = '#D3D3D3';
-    this.colorDot = '#7DC1FF';
-    this.colorDotBorder = '#3267D2';
+              seconds = absRound(milliseconds / 1000);
+              data.seconds = seconds % 60;
 
-    // create a frame and canvas
-    this.create();
+              minutes = absRound(seconds / 60);
+              data.minutes = minutes % 60;
 
-    // apply options (also when undefined)
-    this.setOptions(options);
+              hours = absRound(minutes / 60);
+              data.hours = hours % 24;
 
-    // apply data
-    if (data) {
-      this.setData(data);
-    }
-  }
+              days += absRound(hours / 24);
+              data.days = days % 30;
 
-  // Extend Graph3d with an Emitter mixin
-  Emitter(Graph3d.prototype);
+              months += absRound(days / 30);
+              data.months = months % 12;
 
-  /**
-   * @class Camera
-   * The camera is mounted on a (virtual) camera arm. The camera arm can rotate
-   * The camera is always looking in the direction of the origin of the arm.
-   * This way, the camera always rotates around one fixed point, the location
-   * of the camera arm.
-   *
-   * Documentation:
-   *   http://en.wikipedia.org/wiki/3D_projection
-   */
-  Graph3d.Camera = function () {
-    this.armLocation = new Point3d();
-    this.armRotation = {};
-    this.armRotation.horizontal = 0;
-    this.armRotation.vertical = 0;
-    this.armLength = 1.7;
+              years = absRound(months / 12);
+              data.years = years;
+          },
 
-    this.cameraLocation = new Point3d();
-    this.cameraRotation =  new Point3d(0.5*Math.PI, 0, 0);
+          weeks : function () {
+              return absRound(this.days() / 7);
+          },
 
-    this.calculateCameraOrientation();
-  };
+          valueOf : function () {
+              return this._milliseconds +
+                this._days * 864e5 +
+                (this._months % 12) * 2592e6 +
+                toInt(this._months / 12) * 31536e6;
+          },
 
-  /**
-   * Set the location (origin) of the arm
-   * @param {Number} x  Normalized value of x
-   * @param {Number} y  Normalized value of y
-   * @param {Number} z  Normalized value of z
-   */
-  Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
-    this.armLocation.x = x;
-    this.armLocation.y = y;
-    this.armLocation.z = z;
+          humanize : function (withSuffix) {
+              var difference = +this,
+                  output = relativeTime(difference, !withSuffix, this.lang());
 
-    this.calculateCameraOrientation();
-  };
+              if (withSuffix) {
+                  output = this.lang().pastFuture(difference, output);
+              }
 
-  /**
-   * Set the rotation of the camera arm
-   * @param {Number} horizontal   The horizontal rotation, between 0 and 2*PI.
-   *                Optional, can be left undefined.
-   * @param {Number} vertical   The vertical rotation, between 0 and 0.5*PI
-   *                if vertical=0.5*PI, the graph is shown from the
-   *                top. Optional, can be left undefined.
-   */
-  Graph3d.Camera.prototype.setArmRotation = function(horizontal, vertical) {
-    if (horizontal !== undefined) {
-      this.armRotation.horizontal = horizontal;
-    }
+              return this.lang().postformat(output);
+          },
 
-    if (vertical !== undefined) {
-      this.armRotation.vertical = vertical;
-      if (this.armRotation.vertical < 0) this.armRotation.vertical = 0;
-      if (this.armRotation.vertical > 0.5*Math.PI) this.armRotation.vertical = 0.5*Math.PI;
-    }
+          add : function (input, val) {
+              // supports only 2.0-style add(1, 's') or add(moment)
+              var dur = moment.duration(input, val);
 
-    if (horizontal !== undefined || vertical !== undefined) {
-      this.calculateCameraOrientation();
-    }
-  };
+              this._milliseconds += dur._milliseconds;
+              this._days += dur._days;
+              this._months += dur._months;
 
-  /**
-   * Retrieve the current arm rotation
-   * @return {object}   An object with parameters horizontal and vertical
-   */
-  Graph3d.Camera.prototype.getArmRotation = function() {
-    var rot = {};
-    rot.horizontal = this.armRotation.horizontal;
-    rot.vertical = this.armRotation.vertical;
+              this._bubble();
 
-    return rot;
-  };
+              return this;
+          },
 
-  /**
-   * Set the (normalized) length of the camera arm.
-   * @param {Number} length A length between 0.71 and 5.0
-   */
-  Graph3d.Camera.prototype.setArmLength = function(length) {
-    if (length === undefined)
-      return;
+          subtract : function (input, val) {
+              var dur = moment.duration(input, val);
 
-    this.armLength = length;
+              this._milliseconds -= dur._milliseconds;
+              this._days -= dur._days;
+              this._months -= dur._months;
 
-    // Radius must be larger than the corner of the graph,
-    // which has a distance of sqrt(0.5^2+0.5^2) = 0.71 from the center of the
-    // graph
-    if (this.armLength < 0.71) this.armLength = 0.71;
-    if (this.armLength > 5.0) this.armLength = 5.0;
+              this._bubble();
 
-    this.calculateCameraOrientation();
-  };
+              return this;
+          },
 
-  /**
-   * Retrieve the arm length
-   * @return {Number} length
-   */
-  Graph3d.Camera.prototype.getArmLength = function() {
-    return this.armLength;
-  };
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units.toLowerCase() + 's']();
+          },
 
-  /**
-   * Retrieve the camera location
-   * @return {Point3d} cameraLocation
-   */
-  Graph3d.Camera.prototype.getCameraLocation = function() {
-    return this.cameraLocation;
-  };
+          as : function (units) {
+              units = normalizeUnits(units);
+              return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
+          },
 
-  /**
-   * Retrieve the camera rotation
-   * @return {Point3d} cameraRotation
-   */
-  Graph3d.Camera.prototype.getCameraRotation = function() {
-    return this.cameraRotation;
-  };
+          lang : moment.fn.lang,
 
-  /**
-   * Calculate the location and rotation of the camera based on the
-   * position and orientation of the camera arm
-   */
-  Graph3d.Camera.prototype.calculateCameraOrientation = function() {
-    // calculate location of the camera
-    this.cameraLocation.x = this.armLocation.x - this.armLength * Math.sin(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
-    this.cameraLocation.y = this.armLocation.y - this.armLength * Math.cos(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
-    this.cameraLocation.z = this.armLocation.z + this.armLength * Math.sin(this.armRotation.vertical);
+          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);
 
-    // calculate rotation of the camera
-    this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical;
-    this.cameraRotation.y = 0;
-    this.cameraRotation.z = -this.armRotation.horizontal;
-  };
+              if (!this.asSeconds()) {
+                  // this is the same as C#'s (Noda) and python (isodate)...
+                  // but not other JS (goog.date)
+                  return 'P0D';
+              }
 
-  /**
-   * Calculate the scaling values, dependent on the range in x, y, and z direction
-   */
-  Graph3d.prototype._setScale = function() {
-    this.scale = new Point3d(1 / (this.xMax - this.xMin),
-      1 / (this.yMax - this.yMin),
-      1 / (this.zMax - this.zMin));
+              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' : '');
+          }
+      });
 
-    // keep aspect ration between x and y scale if desired
-    if (this.keepAspectRatio) {
-      if (this.scale.x < this.scale.y) {
-        //noinspection JSSuspiciousNameCombination
-        this.scale.y = this.scale.x;
-      }
-      else {
-        //noinspection JSSuspiciousNameCombination
-        this.scale.x = this.scale.y;
+      function makeDurationGetter(name) {
+          moment.duration.fn[name] = function () {
+              return this._data[name];
+          };
       }
-    }
 
-    // scale the vertical axis
-    this.scale.z *= this.verticalRatio;
-    // TODO: can this be automated? verticalRatio?
+      function makeDurationAsGetter(name, factor) {
+          moment.duration.fn['as' + name] = function () {
+              return +this / factor;
+          };
+      }
 
-    // determine scale for (optional) value
-    this.scale.value = 1 / (this.valueMax - this.valueMin);
+      for (i in unitMillisecondFactors) {
+          if (unitMillisecondFactors.hasOwnProperty(i)) {
+              makeDurationAsGetter(i, unitMillisecondFactors[i]);
+              makeDurationGetter(i.toLowerCase());
+          }
+      }
 
-    // position the camera arm
-    var xCenter = (this.xMax + this.xMin) / 2 * this.scale.x;
-    var yCenter = (this.yMax + this.yMin) / 2 * this.scale.y;
-    var zCenter = (this.zMax + this.zMin) / 2 * this.scale.z;
-    this.camera.setArmLocation(xCenter, yCenter, zCenter);
-  };
+      makeDurationAsGetter('Weeks', 6048e5);
+      moment.duration.fn.asMonths = function () {
+          return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
+      };
 
 
-  /**
-   * Convert a 3D location to a 2D location on screen
-   * http://en.wikipedia.org/wiki/3D_projection
-   * @param {Point3d} point3d   A 3D point with parameters x, y, z
-   * @return {Point2d} point2d  A 2D point with parameters x, y
-   */
-  Graph3d.prototype._convert3Dto2D = function(point3d) {
-    var translation = this._convertPointToTranslation(point3d);
-    return this._convertTranslationToScreen(translation);
-  };
+      /************************************
+          Default Lang
+      ************************************/
 
-  /**
-   * Convert a 3D location its translation seen from the camera
-   * http://en.wikipedia.org/wiki/3D_projection
-   * @param {Point3d} point3d    A 3D point with parameters x, y, z
-   * @return {Point3d} translation A 3D point with parameters x, y, z This is
-   *                   the translation of the point, seen from the
-   *                   camera
-   */
-  Graph3d.prototype._convertPointToTranslation = function(point3d) {
-    var ax = point3d.x * this.scale.x,
-      ay = point3d.y * this.scale.y,
-      az = point3d.z * this.scale.z,
 
-      cx = this.camera.getCameraLocation().x,
-      cy = this.camera.getCameraLocation().y,
-      cz = this.camera.getCameraLocation().z,
+      // Set default language, other languages will inherit from English.
+      moment.lang('en', {
+          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;
+          }
+      });
 
-    // calculate angles
-      sinTx = Math.sin(this.camera.getCameraRotation().x),
-      cosTx = Math.cos(this.camera.getCameraRotation().x),
-      sinTy = Math.sin(this.camera.getCameraRotation().y),
-      cosTy = Math.cos(this.camera.getCameraRotation().y),
-      sinTz = Math.sin(this.camera.getCameraRotation().z),
-      cosTz = Math.cos(this.camera.getCameraRotation().z),
+      /* EMBED_LANGUAGES */
 
-    // calculate translation
-      dx = cosTy * (sinTz * (ay - cy) + cosTz * (ax - cx)) - sinTy * (az - cz),
-      dy = sinTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) + cosTx * (cosTz * (ay - cy) - sinTz * (ax-cx)),
-      dz = cosTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) - sinTx * (cosTz * (ay - cy) - sinTz * (ax-cx));
+      /************************************
+          Exposing Moment
+      ************************************/
 
-    return new Point3d(dx, dy, dz);
-  };
+      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;
+          }
+      }
 
-  /**
-   * Convert a translation point to a point on the screen
-   * @param {Point3d} translation   A 3D point with parameters x, y, z This is
-   *                    the translation of the point, seen from the
-   *                    camera
-   * @return {Point2d} point2d    A 2D point with parameters x, y
-   */
-  Graph3d.prototype._convertTranslationToScreen = function(translation) {
-    var ex = this.eye.x,
-      ey = this.eye.y,
-      ez = this.eye.z,
-      dx = translation.x,
-      dy = translation.y,
-      dz = translation.z;
+      // 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;
+              }
 
-    // calculate position on screen from translation
-    var bx;
-    var by;
-    if (this.showPerspective) {
-      bx = (dx - ex) * (ez / dz);
-      by = (dy - ey) * (ez / dz);
-    }
-    else {
-      bx = dx * -(ez / this.camera.getArmLength());
-      by = dy * -(ez / this.camera.getArmLength());
-    }
+              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__(7)(module)))
 
-    // shift and scale the point to the center of the screen
-    // use the width of the graph to scale both horizontally and vertically.
-    return new Point2d(
-      this.xcenter + bx * this.frame.canvas.clientWidth,
-      this.ycenter - by * this.frame.canvas.clientWidth);
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var map = {
+  	"./ar": 46,
+  	"./ar-ma": 44,
+  	"./ar-ma.js": 44,
+  	"./ar-sa": 45,
+  	"./ar-sa.js": 45,
+  	"./ar.js": 46,
+  	"./az": 47,
+  	"./az.js": 47,
+  	"./bg": 48,
+  	"./bg.js": 48,
+  	"./bn": 49,
+  	"./bn.js": 49,
+  	"./br": 50,
+  	"./br.js": 50,
+  	"./bs": 51,
+  	"./bs.js": 51,
+  	"./ca": 52,
+  	"./ca.js": 52,
+  	"./cs": 53,
+  	"./cs.js": 53,
+  	"./cv": 54,
+  	"./cv.js": 54,
+  	"./cy": 55,
+  	"./cy.js": 55,
+  	"./da": 56,
+  	"./da.js": 56,
+  	"./de": 58,
+  	"./de-at": 57,
+  	"./de-at.js": 57,
+  	"./de.js": 58,
+  	"./el": 59,
+  	"./el.js": 59,
+  	"./en-au": 60,
+  	"./en-au.js": 60,
+  	"./en-ca": 61,
+  	"./en-ca.js": 61,
+  	"./en-gb": 62,
+  	"./en-gb.js": 62,
+  	"./eo": 63,
+  	"./eo.js": 63,
+  	"./es": 64,
+  	"./es.js": 64,
+  	"./et": 65,
+  	"./et.js": 65,
+  	"./eu": 66,
+  	"./eu.js": 66,
+  	"./fa": 67,
+  	"./fa.js": 67,
+  	"./fi": 68,
+  	"./fi.js": 68,
+  	"./fo": 69,
+  	"./fo.js": 69,
+  	"./fr": 71,
+  	"./fr-ca": 70,
+  	"./fr-ca.js": 70,
+  	"./fr.js": 71,
+  	"./gl": 72,
+  	"./gl.js": 72,
+  	"./he": 73,
+  	"./he.js": 73,
+  	"./hi": 74,
+  	"./hi.js": 74,
+  	"./hr": 75,
+  	"./hr.js": 75,
+  	"./hu": 76,
+  	"./hu.js": 76,
+  	"./hy-am": 77,
+  	"./hy-am.js": 77,
+  	"./id": 78,
+  	"./id.js": 78,
+  	"./is": 79,
+  	"./is.js": 79,
+  	"./it": 80,
+  	"./it.js": 80,
+  	"./ja": 81,
+  	"./ja.js": 81,
+  	"./ka": 82,
+  	"./ka.js": 82,
+  	"./km": 83,
+  	"./km.js": 83,
+  	"./ko": 84,
+  	"./ko.js": 84,
+  	"./lb": 85,
+  	"./lb.js": 85,
+  	"./lt": 86,
+  	"./lt.js": 86,
+  	"./lv": 87,
+  	"./lv.js": 87,
+  	"./mk": 88,
+  	"./mk.js": 88,
+  	"./ml": 89,
+  	"./ml.js": 89,
+  	"./mr": 90,
+  	"./mr.js": 90,
+  	"./ms-my": 91,
+  	"./ms-my.js": 91,
+  	"./nb": 92,
+  	"./nb.js": 92,
+  	"./ne": 93,
+  	"./ne.js": 93,
+  	"./nl": 94,
+  	"./nl.js": 94,
+  	"./nn": 95,
+  	"./nn.js": 95,
+  	"./pl": 96,
+  	"./pl.js": 96,
+  	"./pt": 98,
+  	"./pt-br": 97,
+  	"./pt-br.js": 97,
+  	"./pt.js": 98,
+  	"./ro": 99,
+  	"./ro.js": 99,
+  	"./ru": 100,
+  	"./ru.js": 100,
+  	"./sk": 101,
+  	"./sk.js": 101,
+  	"./sl": 102,
+  	"./sl.js": 102,
+  	"./sq": 103,
+  	"./sq.js": 103,
+  	"./sr": 105,
+  	"./sr-cyrl": 104,
+  	"./sr-cyrl.js": 104,
+  	"./sr.js": 105,
+  	"./sv": 106,
+  	"./sv.js": 106,
+  	"./ta": 107,
+  	"./ta.js": 107,
+  	"./th": 108,
+  	"./th.js": 108,
+  	"./tl-ph": 109,
+  	"./tl-ph.js": 109,
+  	"./tr": 110,
+  	"./tr.js": 110,
+  	"./tzm": 112,
+  	"./tzm-latn": 111,
+  	"./tzm-latn.js": 111,
+  	"./tzm.js": 112,
+  	"./uk": 113,
+  	"./uk.js": 113,
+  	"./uz": 114,
+  	"./uz.js": 114,
+  	"./vi": 115,
+  	"./vi.js": 115,
+  	"./zh-cn": 116,
+  	"./zh-cn.js": 116,
+  	"./zh-tw": 117,
+  	"./zh-tw.js": 117
+  };
+  function webpackContext(req) {
+  	return __webpack_require__(webpackContextResolve(req));
+  };
+  function webpackContextResolve(req) {
+  	return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
+  };
+  webpackContext.keys = function webpackContextKeys() {
+  	return Object.keys(map);
   };
+  webpackContext.resolve = webpackContextResolve;
+  module.exports = webpackContext;
 
-  /**
-   * Set the background styling for the graph
-   * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
-   */
-  Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
-    var fill = 'white';
-    var stroke = 'gray';
-    var strokeWidth = 1;
 
-    if (typeof(backgroundColor) === 'string') {
-      fill = backgroundColor;
-      stroke = 'none';
-      strokeWidth = 0;
-    }
-    else if (typeof(backgroundColor) === 'object') {
-      if (backgroundColor.fill !== undefined)    fill = backgroundColor.fill;
-      if (backgroundColor.stroke !== undefined)    stroke = backgroundColor.stroke;
-      if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth;
-    }
-    else if  (backgroundColor === undefined) {
-      // use use defaults
-    }
-    else {
-      throw 'Unsupported type of backgroundColor';
-    }
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this.frame.style.backgroundColor = fill;
-    this.frame.style.borderColor = stroke;
-    this.frame.style.borderWidth = strokeWidth + 'px';
-    this.frame.style.borderStyle = 'solid';
-  };
+  module.exports = function(module) {
+  	if(!module.webpackPolyfill) {
+  		module.deprecate = function() {};
+  		module.paths = [];
+  		// module.parent = undefined by default
+  		module.children = [];
+  		module.webpackPolyfill = 1;
+  	}
+  	return module;
+  }
 
 
-  /// enumerate the available styles
-  Graph3d.STYLE = {
-    BAR: 0,
-    BARCOLOR: 1,
-    BARSIZE: 2,
-    DOT : 3,
-    DOTLINE : 4,
-    DOTCOLOR: 5,
-    DOTSIZE: 6,
-    GRID : 7,
-    LINE: 8,
-    SURFACE : 9
-  };
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // DOM utility methods
 
   /**
-   * Retrieve the style index from given styleName
-   * @param {string} styleName  Style name such as 'dot', 'grid', 'dot-line'
-   * @return {Number} styleNumber Enumeration value representing the style, or -1
-   *                when not found
+   * this prepares the JSON container for allocating SVG elements
+   * @param JSONcontainer
+   * @private
    */
-  Graph3d.prototype._getStyleNumber = function(styleName) {
-    switch (styleName) {
-      case 'dot':     return Graph3d.STYLE.DOT;
-      case 'dot-line':  return Graph3d.STYLE.DOTLINE;
-      case 'dot-color':   return Graph3d.STYLE.DOTCOLOR;
-      case 'dot-size':  return Graph3d.STYLE.DOTSIZE;
-      case 'line':    return Graph3d.STYLE.LINE;
-      case 'grid':    return Graph3d.STYLE.GRID;
-      case 'surface':   return Graph3d.STYLE.SURFACE;
-      case 'bar':     return Graph3d.STYLE.BAR;
-      case 'bar-color':   return Graph3d.STYLE.BARCOLOR;
-      case 'bar-size':  return Graph3d.STYLE.BARSIZE;
+  exports.prepareElements = function(JSONcontainer) {
+    // cleanup the redundant svgElements;
+    for (var elementType in JSONcontainer) {
+      if (JSONcontainer.hasOwnProperty(elementType)) {
+        JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
+        JSONcontainer[elementType].used = [];
+      }
     }
-
-    return -1;
   };
 
   /**
-   * Determine the indexes of the data columns, based on the given style and data
-   * @param {DataSet} data
-   * @param {Number}  style
+   * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
+   * which to remove the redundant elements.
+   *
+   * @param JSONcontainer
+   * @private
    */
-  Graph3d.prototype._determineColumnIndexes = function(data, style) {
-    if (this.style === Graph3d.STYLE.DOT ||
-      this.style === Graph3d.STYLE.DOTLINE ||
-      this.style === Graph3d.STYLE.LINE ||
-      this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE ||
-      this.style === Graph3d.STYLE.BAR) {
-      // 3 columns expected, and optionally a 4th with filter values
-      this.colX = 0;
-      this.colY = 1;
-      this.colZ = 2;
-      this.colValue = undefined;
-
-      if (data.getNumberOfColumns() > 3) {
-        this.colFilter = 3;
+  exports.cleanupElements = function(JSONcontainer) {
+    // cleanup the redundant svgElements;
+    for (var elementType in JSONcontainer) {
+      if (JSONcontainer.hasOwnProperty(elementType)) {
+        if (JSONcontainer[elementType].redundant) {
+          for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
+            JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
+          }
+          JSONcontainer[elementType].redundant = [];
+        }
       }
     }
-    else if (this.style === Graph3d.STYLE.DOTCOLOR ||
-      this.style === Graph3d.STYLE.DOTSIZE ||
-      this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      // 4 columns expected, and optionally a 5th with filter values
-      this.colX = 0;
-      this.colY = 1;
-      this.colZ = 2;
-      this.colValue = 3;
+  };
 
-      if (data.getNumberOfColumns() > 4) {
-        this.colFilter = 4;
+  /**
+   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
+   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+   *
+   * @param elementType
+   * @param JSONcontainer
+   * @param svgContainer
+   * @returns {*}
+   * @private
+   */
+  exports.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
+    var element;
+    // allocate SVG element, if it doesnt yet exist, create one.
+    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
+      // check if there is an redundant element
+      if (JSONcontainer[elementType].redundant.length > 0) {
+        element = JSONcontainer[elementType].redundant[0];
+        JSONcontainer[elementType].redundant.shift();
+      }
+      else {
+        // create a new element and add it to the SVG
+        element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
+        svgContainer.appendChild(element);
       }
     }
     else {
-      throw 'Unknown style "' + this.style + '"';
+      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
+      element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
+      JSONcontainer[elementType] = {used: [], redundant: []};
+      svgContainer.appendChild(element);
     }
+    JSONcontainer[elementType].used.push(element);
+    return element;
   };
 
-  Graph3d.prototype.getNumberOfRows = function(data) {
-    return data.length;
-  }
-
 
-  Graph3d.prototype.getNumberOfColumns = function(data) {
-    var counter = 0;
-    for (var column in data[0]) {
-      if (data[0].hasOwnProperty(column)) {
-        counter++;
+  /**
+   * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
+   * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
+   *
+   * @param elementType
+   * @param JSONcontainer
+   * @param DOMContainer
+   * @returns {*}
+   * @private
+   */
+  exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
+    var element;
+    // allocate SVG element, if it doesnt yet exist, create one.
+    if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
+      // check if there is an redundant element
+      if (JSONcontainer[elementType].redundant.length > 0) {
+        element = JSONcontainer[elementType].redundant[0];
+        JSONcontainer[elementType].redundant.shift();
+      }
+      else {
+        // create a new element and add it to the SVG
+        element = document.createElement(elementType);
+        DOMContainer.appendChild(element);
       }
     }
-    return counter;
-  }
+    else {
+      // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
+      element = document.createElement(elementType);
+      JSONcontainer[elementType] = {used: [], redundant: []};
+      DOMContainer.appendChild(element);
+    }
+    JSONcontainer[elementType].used.push(element);
+    return element;
+  };
 
 
-  Graph3d.prototype.getDistinctValues = function(data, column) {
-    var distinctValues = [];
-    for (var i = 0; i < data.length; i++) {
-      if (distinctValues.indexOf(data[i][column]) == -1) {
-        distinctValues.push(data[i][column]);
-      }
-    }
-    return distinctValues;
-  }
 
 
-  Graph3d.prototype.getColumnRange = function(data,column) {
-    var minMax = {min:data[0][column],max:data[0][column]};
-    for (var i = 0; i < data.length; i++) {
-      if (minMax.min > data[i][column]) { minMax.min = data[i][column]; }
-      if (minMax.max < data[i][column]) { minMax.max = data[i][column]; }
+  /**
+   * draw a point object. this is a seperate function because it can also be called by the legend.
+   * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
+   * as well.
+   *
+   * @param x
+   * @param y
+   * @param group
+   * @param JSONcontainer
+   * @param svgContainer
+   * @returns {*}
+   */
+  exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
+    var point;
+    if (group.options.drawPoints.style == 'circle') {
+      point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
+      point.setAttributeNS(null, "cx", x);
+      point.setAttributeNS(null, "cy", y);
+      point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
+      point.setAttributeNS(null, "class", group.className + " point");
     }
-    return minMax;
+    else {
+      point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
+      point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
+      point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
+      point.setAttributeNS(null, "width", group.options.drawPoints.size);
+      point.setAttributeNS(null, "height", group.options.drawPoints.size);
+      point.setAttributeNS(null, "class", group.className + " point");
+    }
+    return point;
   };
 
   /**
-   * Initialize the data from the data table. Calculate minimum and maximum values
-   * and column index values
-   * @param {Array | DataSet | DataView} rawData   The data containing the items for the Graph.
-   * @param {Number}     style   Style Number
+   * draw a bar SVG element centered on the X coordinate
+   *
+   * @param x
+   * @param y
+   * @param className
    */
-  Graph3d.prototype._dataInitialize = function (rawData, style) {
-    var me = this;
+  exports.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
+    var rect = exports.getSVGElement('rect',JSONcontainer, svgContainer);
+    rect.setAttributeNS(null, "x", x - 0.5 * width);
+    rect.setAttributeNS(null, "y", y);
+    rect.setAttributeNS(null, "width", width);
+    rect.setAttributeNS(null, "height", height);
+    rect.setAttributeNS(null, "class", className);
+  };
 
-    // unsubscribe from the dataTable
-    if (this.dataSet) {
-      this.dataSet.off('*', this._onChange);
-    }
+/***/ },
+/* 9 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (rawData === undefined)
-      return;
+  var util = __webpack_require__(1);
 
-    if (Array.isArray(rawData)) {
-      rawData = new DataSet(rawData);
+  /**
+   * DataSet
+   *
+   * Usage:
+   *     var dataSet = new DataSet({
+   *         fieldId: '_id',
+   *         type: {
+   *             // ...
+   *         }
+   *     });
+   *
+   *     dataSet.add(item);
+   *     dataSet.add(data);
+   *     dataSet.update(item);
+   *     dataSet.update(data);
+   *     dataSet.remove(id);
+   *     dataSet.remove(ids);
+   *     var data = dataSet.get();
+   *     var data = dataSet.get(id);
+   *     var data = dataSet.get(ids);
+   *     var data = dataSet.get(ids, options, data);
+   *     dataSet.clear();
+   *
+   * A data set can:
+   * - add/remove/update data
+   * - gives triggers upon changes in the data
+   * - can  import/export data in various data formats
+   *
+   * @param {Array | DataTable} [data]    Optional array with initial data
+   * @param {Object} [options]   Available options:
+   *                             {String} fieldId Field name of the id in the
+   *                                              items, 'id' by default.
+   *                             {Object.<String, String} type
+   *                                              A map with field names as key,
+   *                                              and the field type as value.
+   * @constructor DataSet
+   */
+  // TODO: add a DataSet constructor DataSet(data, options)
+  function DataSet (data, options) {
+    // correctly read optional arguments
+    if (data && !Array.isArray(data) && !util.isDataTable(data)) {
+      options = data;
+      data = null;
     }
 
-    var data;
-    if (rawData instanceof DataSet || rawData instanceof DataView) {
-      data = rawData.get();
+    this._options = options || {};
+    this._data = {};                                 // map with data indexed by id
+    this._fieldId = this._options.fieldId || 'id';   // name of the field containing id
+    this._type = {};                                 // internal field types (NOTE: this can differ from this._options.type)
+
+    // all variants of a Date are internally stored as Date, so we can convert
+    // from everything to everything (also from ISODate to Number for example)
+    if (this._options.type) {
+      for (var field in this._options.type) {
+        if (this._options.type.hasOwnProperty(field)) {
+          var value = this._options.type[field];
+          if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
+            this._type[field] = 'Date';
+          }
+          else {
+            this._type[field] = value;
+          }
+        }
+      }
     }
-    else {
-      throw new Error('Array, DataSet, or DataView expected');
+
+    // TODO: deprecated since version 1.1.1 (or 2.0.0?)
+    if (this._options.convert) {
+      throw new Error('Option "convert" is deprecated. Use "type" instead.');
     }
 
-    if (data.length == 0)
-      return;
+    this._subscribers = {};  // event subscribers
 
-    this.dataSet = rawData;
-    this.dataTable = data;
+    // add initial data when provided
+    if (data) {
+      this.add(data);
+    }
+  }
 
-    // subscribe to changes in the dataset
-    this._onChange = function () {
-      me.setData(me.dataSet);
-    };
-    this.dataSet.on('*', this._onChange);
+  /**
+   * Subscribe to an event, add an event listener
+   * @param {String} event        Event name. Available events: 'put', 'update',
+   *                              'remove'
+   * @param {function} callback   Callback method. Called with three parameters:
+   *                                  {String} event
+   *                                  {Object | null} params
+   *                                  {String | Number} senderId
+   */
+  DataSet.prototype.on = function(event, callback) {
+    var subscribers = this._subscribers[event];
+    if (!subscribers) {
+      subscribers = [];
+      this._subscribers[event] = subscribers;
+    }
 
-    // _determineColumnIndexes
-    // getNumberOfRows (points)
-    // getNumberOfColumns (x,y,z,v,t,t1,t2...)
-    // getDistinctValues (unique values?)
-    // getColumnRange
+    subscribers.push({
+      callback: callback
+    });
+  };
 
-    // determine the location of x,y,z,value,filter columns
-    this.colX = 'x';
-    this.colY = 'y';
-    this.colZ = 'z';
-    this.colValue = 'style';
-    this.colFilter = 'filter';
+  // TODO: make this function deprecated (replaced with `on` since version 0.5)
+  DataSet.prototype.subscribe = DataSet.prototype.on;
 
+  /**
+   * Unsubscribe from an event, remove an event listener
+   * @param {String} event
+   * @param {function} callback
+   */
+  DataSet.prototype.off = function(event, callback) {
+    var subscribers = this._subscribers[event];
+    if (subscribers) {
+      this._subscribers[event] = subscribers.filter(function (listener) {
+        return (listener.callback != callback);
+      });
+    }
+  };
 
+  // TODO: make this function deprecated (replaced with `on` since version 0.5)
+  DataSet.prototype.unsubscribe = DataSet.prototype.off;
 
-    // check if a filter column is provided
-    if (data[0].hasOwnProperty('filter')) {
-      if (this.dataFilter === undefined) {
-        this.dataFilter = new Filter(rawData, this.colFilter, this);
-        this.dataFilter.setOnLoadCallback(function() {me.redraw();});
-      }
+  /**
+   * Trigger an event
+   * @param {String} event
+   * @param {Object | null} params
+   * @param {String} [senderId]       Optional id of the sender.
+   * @private
+   */
+  DataSet.prototype._trigger = function (event, params, senderId) {
+    if (event == '*') {
+      throw new Error('Cannot trigger event *');
     }
 
+    var subscribers = [];
+    if (event in this._subscribers) {
+      subscribers = subscribers.concat(this._subscribers[event]);
+    }
+    if ('*' in this._subscribers) {
+      subscribers = subscribers.concat(this._subscribers['*']);
+    }
 
-    var withBars = this.style == Graph3d.STYLE.BAR ||
-      this.style == Graph3d.STYLE.BARCOLOR ||
-      this.style == Graph3d.STYLE.BARSIZE;
-
-    // determine barWidth from data
-    if (withBars) {
-      if (this.defaultXBarWidth !== undefined) {
-        this.xBarWidth = this.defaultXBarWidth;
-      }
-      else {
-        var dataX = this.getDistinctValues(data,this.colX);
-        this.xBarWidth = (dataX[1] - dataX[0]) || 1;
+    for (var i = 0; i < subscribers.length; i++) {
+      var subscriber = subscribers[i];
+      if (subscriber.callback) {
+        subscriber.callback(event, params, senderId || null);
       }
+    }
+  };
 
-      if (this.defaultYBarWidth !== undefined) {
-        this.yBarWidth = this.defaultYBarWidth;
-      }
-      else {
-        var dataY = this.getDistinctValues(data,this.colY);
-        this.yBarWidth = (dataY[1] - dataY[0]) || 1;
+  /**
+   * Add data.
+   * Adding an item will fail when there already is an item with the same id.
+   * @param {Object | Array | DataTable} data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} addedIds      Array with the ids of the added items
+   */
+  DataSet.prototype.add = function (data, senderId) {
+    var addedIds = [],
+        id,
+        me = this;
+
+    if (Array.isArray(data)) {
+      // Array
+      for (var i = 0, len = data.length; i < len; i++) {
+        id = me._addItem(data[i]);
+        addedIds.push(id);
       }
     }
+    else if (util.isDataTable(data)) {
+      // Google DataTable
+      var columns = this._getColumnNames(data);
+      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+        var item = {};
+        for (var col = 0, cols = columns.length; col < cols; col++) {
+          var field = columns[col];
+          item[field] = data.getValue(row, col);
+        }
 
-    // calculate minimums and maximums
-    var xRange = this.getColumnRange(data,this.colX);
-    if (withBars) {
-      xRange.min -= this.xBarWidth / 2;
-      xRange.max += this.xBarWidth / 2;
+        id = me._addItem(item);
+        addedIds.push(id);
+      }
     }
-    this.xMin = (this.defaultXMin !== undefined) ? this.defaultXMin : xRange.min;
-    this.xMax = (this.defaultXMax !== undefined) ? this.defaultXMax : xRange.max;
-    if (this.xMax <= this.xMin) this.xMax = this.xMin + 1;
-    this.xStep = (this.defaultXStep !== undefined) ? this.defaultXStep : (this.xMax-this.xMin)/5;
-
-    var yRange = this.getColumnRange(data,this.colY);
-    if (withBars) {
-      yRange.min -= this.yBarWidth / 2;
-      yRange.max += this.yBarWidth / 2;
+    else if (data instanceof Object) {
+      // Single item
+      id = me._addItem(data);
+      addedIds.push(id);
+    }
+    else {
+      throw new Error('Unknown dataType');
     }
-    this.yMin = (this.defaultYMin !== undefined) ? this.defaultYMin : yRange.min;
-    this.yMax = (this.defaultYMax !== undefined) ? this.defaultYMax : yRange.max;
-    if (this.yMax <= this.yMin) this.yMax = this.yMin + 1;
-    this.yStep = (this.defaultYStep !== undefined) ? this.defaultYStep : (this.yMax-this.yMin)/5;
-
-    var zRange = this.getColumnRange(data,this.colZ);
-    this.zMin = (this.defaultZMin !== undefined) ? this.defaultZMin : zRange.min;
-    this.zMax = (this.defaultZMax !== undefined) ? this.defaultZMax : zRange.max;
-    if (this.zMax <= this.zMin) this.zMax = this.zMin + 1;
-    this.zStep = (this.defaultZStep !== undefined) ? this.defaultZStep : (this.zMax-this.zMin)/5;
 
-    if (this.colValue !== undefined) {
-      var valueRange = this.getColumnRange(data,this.colValue);
-      this.valueMin = (this.defaultValueMin !== undefined) ? this.defaultValueMin : valueRange.min;
-      this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max;
-      if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1;
+    if (addedIds.length) {
+      this._trigger('add', {items: addedIds}, senderId);
     }
 
-    // set the scale dependent on the ranges.
-    this._setScale();
+    return addedIds;
   };
 
-
-
   /**
-   * Filter the data based on the current filter
-   * @param {Array} data
-   * @return {Array} dataPoints   Array with point objects which can be drawn on screen
+   * Update existing items. When an item does not exist, it will be created
+   * @param {Object | Array | DataTable} data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} updatedIds     The ids of the added or updated items
    */
-  Graph3d.prototype._getDataPoints = function (data) {
-    // TODO: store the created matrix dataPoints in the filters instead of reloading each time
-    var x, y, i, z, obj, point;
-
-    var dataPoints = [];
-
-    if (this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE) {
-      // copy all values from the google data table to a matrix
-      // the provided values are supposed to form a grid of (x,y) positions
-
-      // create two lists with all present x and y values
-      var dataX = [];
-      var dataY = [];
-      for (i = 0; i < this.getNumberOfRows(data); i++) {
-        x = data[i][this.colX] || 0;
-        y = data[i][this.colY] || 0;
+  DataSet.prototype.update = function (data, senderId) {
+    var addedIds = [],
+        updatedIds = [],
+        me = this,
+        fieldId = me._fieldId;
 
-        if (dataX.indexOf(x) === -1) {
-          dataX.push(x);
-        }
-        if (dataY.indexOf(y) === -1) {
-          dataY.push(y);
-        }
+    var addOrUpdate = function (item) {
+      var id = item[fieldId];
+      if (me._data[id]) {
+        // update item
+        id = me._updateItem(item);
+        updatedIds.push(id);
+      }
+      else {
+        // add new item
+        id = me._addItem(item);
+        addedIds.push(id);
       }
+    };
 
-      function sortNumber(a, b) {
-        return a - b;
+    if (Array.isArray(data)) {
+      // Array
+      for (var i = 0, len = data.length; i < len; i++) {
+        addOrUpdate(data[i]);
       }
-      dataX.sort(sortNumber);
-      dataY.sort(sortNumber);
+    }
+    else if (util.isDataTable(data)) {
+      // Google DataTable
+      var columns = this._getColumnNames(data);
+      for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+        var item = {};
+        for (var col = 0, cols = columns.length; col < cols; col++) {
+          var field = columns[col];
+          item[field] = data.getValue(row, col);
+        }
 
-      // create a grid, a 2d matrix, with all values.
-      var dataMatrix = [];   // temporary data matrix
-      for (i = 0; i < data.length; i++) {
-        x = data[i][this.colX] || 0;
-        y = data[i][this.colY] || 0;
-        z = data[i][this.colZ] || 0;
+        addOrUpdate(item);
+      }
+    }
+    else if (data instanceof Object) {
+      // Single item
+      addOrUpdate(data);
+    }
+    else {
+      throw new Error('Unknown dataType');
+    }
 
-        var xIndex = dataX.indexOf(x);  // TODO: implement Array().indexOf() for Internet Explorer
-        var yIndex = dataY.indexOf(y);
+    if (addedIds.length) {
+      this._trigger('add', {items: addedIds}, senderId);
+    }
+    if (updatedIds.length) {
+      this._trigger('update', {items: updatedIds}, senderId);
+    }
 
-        if (dataMatrix[xIndex] === undefined) {
-          dataMatrix[xIndex] = [];
-        }
+    return addedIds.concat(updatedIds);
+  };
 
-        var point3d = new Point3d();
-        point3d.x = x;
-        point3d.y = y;
-        point3d.z = z;
+  /**
+   * Get a data item or multiple items.
+   *
+   * Usage:
+   *
+   *     get()
+   *     get(options: Object)
+   *     get(options: Object, data: Array | DataTable)
+   *
+   *     get(id: Number | String)
+   *     get(id: Number | String, options: Object)
+   *     get(id: Number | String, options: Object, data: Array | DataTable)
+   *
+   *     get(ids: Number[] | String[])
+   *     get(ids: Number[] | String[], options: Object)
+   *     get(ids: Number[] | String[], options: Object, data: Array | DataTable)
+   *
+   * Where:
+   *
+   * {Number | String} id         The id of an item
+   * {Number[] | String{}} ids    An array with ids of items
+   * {Object} options             An Object with options. Available options:
+   *                              {String} [returnType] Type of data to be
+   *                                  returned. Can be 'DataTable' or 'Array' (default)
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] field names to be returned
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * {Array | DataTable} [data]   If provided, items will be appended to this
+   *                              array or table. Required in case of Google
+   *                              DataTable.
+   *
+   * @throws Error
+   */
+  DataSet.prototype.get = function (args) {
+    var me = this;
 
-        obj = {};
-        obj.point = point3d;
-        obj.trans = undefined;
-        obj.screen = undefined;
-        obj.bottom = new Point3d(x, y, this.zMin);
+    // parse the arguments
+    var id, ids, options, data;
+    var firstType = util.getType(arguments[0]);
+    if (firstType == 'String' || firstType == 'Number') {
+      // get(id [, options] [, data])
+      id = arguments[0];
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else if (firstType == 'Array') {
+      // get(ids [, options] [, data])
+      ids = arguments[0];
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else {
+      // get([, options] [, data])
+      options = arguments[0];
+      data = arguments[1];
+    }
 
-        dataMatrix[xIndex][yIndex] = obj;
+    // determine the return type
+    var returnType;
+    if (options && options.returnType) {
+      returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
 
-        dataPoints.push(obj);
+      if (data && (returnType != util.getType(data))) {
+        throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
+            'does not correspond with specified options.type (' + options.type + ')');
+      }
+      if (returnType == 'DataTable' && !util.isDataTable(data)) {
+        throw new Error('Parameter "data" must be a DataTable ' +
+            'when options.type is "DataTable"');
       }
+    }
+    else if (data) {
+      returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+    }
+    else {
+      returnType = 'Array';
+    }
 
-      // fill in the pointers to the neighbors.
-      for (x = 0; x < dataMatrix.length; x++) {
-        for (y = 0; y < dataMatrix[x].length; y++) {
-          if (dataMatrix[x][y]) {
-            dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
-            dataMatrix[x][y].pointTop   = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
-            dataMatrix[x][y].pointCross =
-              (x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
-                dataMatrix[x+1][y+1] :
-                undefined;
-          }
+    // build options
+    var type = options && options.type || this._options.type;
+    var filter = options && options.filter;
+    var items = [], item, itemId, i, len;
+
+    // convert items
+    if (id != undefined) {
+      // return a single item
+      item = me._getItem(id, type);
+      if (filter && !filter(item)) {
+        item = null;
+      }
+    }
+    else if (ids != undefined) {
+      // return a subset of items
+      for (i = 0, len = ids.length; i < len; i++) {
+        item = me._getItem(ids[i], type);
+        if (!filter || filter(item)) {
+          items.push(item);
         }
       }
     }
-    else {  // 'dot', 'dot-line', etc.
-      // copy all values from the google data table to a list with Point3d objects
-      for (i = 0; i < data.length; i++) {
-        point = new Point3d();
-        point.x = data[i][this.colX] || 0;
-        point.y = data[i][this.colY] || 0;
-        point.z = data[i][this.colZ] || 0;
-
-        if (this.colValue !== undefined) {
-          point.value = data[i][this.colValue] || 0;
+    else {
+      // return all items
+      for (itemId in this._data) {
+        if (this._data.hasOwnProperty(itemId)) {
+          item = me._getItem(itemId, type);
+          if (!filter || filter(item)) {
+            items.push(item);
+          }
         }
+      }
+    }
 
-        obj = {};
-        obj.point = point;
-        obj.bottom = new Point3d(point.x, point.y, this.zMin);
-        obj.trans = undefined;
-        obj.screen = undefined;
+    // order the results
+    if (options && options.order && id == undefined) {
+      this._sort(items, options.order);
+    }
 
-        dataPoints.push(obj);
+    // filter fields of the items
+    if (options && options.fields) {
+      var fields = options.fields;
+      if (id != undefined) {
+        item = this._filterFields(item, fields);
+      }
+      else {
+        for (i = 0, len = items.length; i < len; i++) {
+          items[i] = this._filterFields(items[i], fields);
+        }
       }
     }
 
-    return dataPoints;
+    // return the results
+    if (returnType == 'DataTable') {
+      var columns = this._getColumnNames(data);
+      if (id != undefined) {
+        // append a single item to the data table
+        me._appendRow(data, columns, item);
+      }
+      else {
+        // copy the items to the provided data table
+        for (i = 0, len = items.length; i < len; i++) {
+          me._appendRow(data, columns, items[i]);
+        }
+      }
+      return data;
+    }
+    else {
+      // return an array
+      if (id != undefined) {
+        // a single item
+        return item;
+      }
+      else {
+        // multiple items
+        if (data) {
+          // copy the items to the provided array
+          for (i = 0, len = items.length; i < len; i++) {
+            data.push(items[i]);
+          }
+          return data;
+        }
+        else {
+          // just return our array
+          return items;
+        }
+      }
+    }
   };
 
   /**
-   * Create the main frame for the Graph3d.
-   * This function is executed once when a Graph3d object is created. The frame
-   * contains a canvas, and this canvas contains all objects like the axis and
-   * nodes.
+   * Get ids of all items or from a filtered set of items.
+   * @param {Object} [options]    An Object with options. Available options:
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Array} ids
    */
-  Graph3d.prototype.create = function () {
-    // remove all elements from the container element.
-    while (this.containerElement.hasChildNodes()) {
-      this.containerElement.removeChild(this.containerElement.firstChild);
-    }
+  DataSet.prototype.getIds = function (options) {
+    var data = this._data,
+        filter = options && options.filter,
+        order = options && options.order,
+        type = options && options.type || this._options.type,
+        i,
+        len,
+        id,
+        item,
+        items,
+        ids = [];
 
-    this.frame = document.createElement('div');
-    this.frame.style.position = 'relative';
-    this.frame.style.overflow = 'hidden';
+    if (filter) {
+      // get filtered items
+      if (order) {
+        // create ordered list
+        items = [];
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = this._getItem(id, type);
+            if (filter(item)) {
+              items.push(item);
+            }
+          }
+        }
 
-    // create the graph canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( 'canvas' );
-    this.frame.canvas.style.position = 'relative';
-    this.frame.appendChild(this.frame.canvas);
-    //if (!this.frame.canvas.getContext) {
-    {
-      var noCanvas = document.createElement( 'DIV' );
-      noCanvas.style.color = 'red';
-      noCanvas.style.fontWeight =  'bold' ;
-      noCanvas.style.padding =  '10px';
-      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
-      this.frame.canvas.appendChild(noCanvas);
-    }
+        this._sort(items, order);
 
-    this.frame.filter = document.createElement( 'div' );
-    this.frame.filter.style.position = 'absolute';
-    this.frame.filter.style.bottom = '0px';
-    this.frame.filter.style.left = '0px';
-    this.frame.filter.style.width = '100%';
-    this.frame.appendChild(this.frame.filter);
+        for (i = 0, len = items.length; i < len; i++) {
+          ids[i] = items[i][this._fieldId];
+        }
+      }
+      else {
+        // create unordered list
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = this._getItem(id, type);
+            if (filter(item)) {
+              ids.push(item[this._fieldId]);
+            }
+          }
+        }
+      }
+    }
+    else {
+      // get all items
+      if (order) {
+        // create an ordered list
+        items = [];
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            items.push(data[id]);
+          }
+        }
 
-    // add event listeners to handle moving and zooming the contents
-    var me = this;
-    var onmousedown = function (event) {me._onMouseDown(event);};
-    var ontouchstart = function (event) {me._onTouchStart(event);};
-    var onmousewheel = function (event) {me._onWheel(event);};
-    var ontooltip = function (event) {me._onTooltip(event);};
-    // TODO: these events are never cleaned up... can give a 'memory leakage'
+        this._sort(items, order);
 
-    G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
-    G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
-    G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
-    G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
-    G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
+        for (i = 0, len = items.length; i < len; i++) {
+          ids[i] = items[i][this._fieldId];
+        }
+      }
+      else {
+        // create unordered list
+        for (id in data) {
+          if (data.hasOwnProperty(id)) {
+            item = data[id];
+            ids.push(item[this._fieldId]);
+          }
+        }
+      }
+    }
 
-    // add the new graph to the container element
-    this.containerElement.appendChild(this.frame);
+    return ids;
   };
 
-
   /**
-   * Set a new size for the graph
-   * @param {string} width   Width in pixels or percentage (for example '800px'
-   *             or '50%')
-   * @param {string} height  Height in pixels or percentage  (for example '400px'
-   *             or '30%')
+   * Returns the DataSet itself. Is overwritten for example by the DataView,
+   * which returns the DataSet it is connected to instead.
    */
-  Graph3d.prototype.setSize = function(width, height) {
-    this.frame.style.width = width;
-    this.frame.style.height = height;
-
-    this._resizeCanvas();
+  DataSet.prototype.getDataSet = function () {
+    return this;
   };
 
   /**
-   * Resize the canvas to the current size of the frame
+   * Execute a callback function for every item in the dataset.
+   * @param {function} callback
+   * @param {Object} [options]    Available options:
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] filter fields
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
    */
-  Graph3d.prototype._resizeCanvas = function() {
-    this.frame.canvas.style.width = '100%';
-    this.frame.canvas.style.height = '100%';
+  DataSet.prototype.forEach = function (callback, options) {
+    var filter = options && options.filter,
+        type = options && options.type || this._options.type,
+        data = this._data,
+        item,
+        id;
 
-    this.frame.canvas.width = this.frame.canvas.clientWidth;
-    this.frame.canvas.height = this.frame.canvas.clientHeight;
+    if (options && options.order) {
+      // execute forEach on ordered list
+      var items = this.get(options);
 
-    // adjust with for margin
-    this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px';
+      for (var i = 0, len = items.length; i < len; i++) {
+        item = items[i];
+        id = item[this._fieldId];
+        callback(item, id);
+      }
+    }
+    else {
+      // unordered
+      for (id in data) {
+        if (data.hasOwnProperty(id)) {
+          item = this._getItem(id, type);
+          if (!filter || filter(item)) {
+            callback(item, id);
+          }
+        }
+      }
+    }
   };
 
   /**
-   * Start animation
+   * Map every item in the dataset.
+   * @param {function} callback
+   * @param {Object} [options]    Available options:
+   *                              {Object.<String, String>} [type]
+   *                              {String[]} [fields] filter fields
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Object[]} mappedItems
    */
-  Graph3d.prototype.animationStart = function() {
-    if (!this.frame.filter || !this.frame.filter.slider)
-      throw 'No animation available';
+  DataSet.prototype.map = function (callback, options) {
+    var filter = options && options.filter,
+        type = options && options.type || this._options.type,
+        mappedItems = [],
+        data = this._data,
+        item;
 
-    this.frame.filter.slider.play();
-  };
+    // convert and filter items
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        item = this._getItem(id, type);
+        if (!filter || filter(item)) {
+          mappedItems.push(callback(item, id));
+        }
+      }
+    }
+
+    // order items
+    if (options && options.order) {
+      this._sort(mappedItems, options.order);
+    }
 
+    return mappedItems;
+  };
 
   /**
-   * Stop animation
+   * Filter the fields of an item
+   * @param {Object} item
+   * @param {String[]} fields     Field names
+   * @return {Object} filteredItem
+   * @private
    */
-  Graph3d.prototype.animationStop = function() {
-    if (!this.frame.filter || !this.frame.filter.slider) return;
+  DataSet.prototype._filterFields = function (item, fields) {
+    var filteredItem = {};
 
-    this.frame.filter.slider.stop();
-  };
+    for (var field in item) {
+      if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
+        filteredItem[field] = item[field];
+      }
+    }
 
+    return filteredItem;
+  };
 
   /**
-   * Resize the center position based on the current values in this.defaultXCenter
-   * and this.defaultYCenter (which are strings with a percentage or a value
-   * in pixels). The center positions are the variables this.xCenter
-   * and this.yCenter
+   * Sort the provided array with items
+   * @param {Object[]} items
+   * @param {String | function} order      A field name or custom sort function.
+   * @private
    */
-  Graph3d.prototype._resizeCenter = function() {
-    // calculate the horizontal center position
-    if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') {
-      this.xcenter =
-        parseFloat(this.defaultXCenter) / 100 *
-          this.frame.canvas.clientWidth;
-    }
-    else {
-      this.xcenter = parseFloat(this.defaultXCenter); // supposed to be in px
+  DataSet.prototype._sort = function (items, order) {
+    if (util.isString(order)) {
+      // order by provided field name
+      var name = order; // field name
+      items.sort(function (a, b) {
+        var av = a[name];
+        var bv = b[name];
+        return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
+      });
     }
-
-    // calculate the vertical center position
-    if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') {
-      this.ycenter =
-        parseFloat(this.defaultYCenter) / 100 *
-          (this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
+    else if (typeof order === 'function') {
+      // order by sort function
+      items.sort(order);
     }
+    // TODO: extend order by an Object {field:String, direction:String}
+    //       where direction can be 'asc' or 'desc'
     else {
-      this.ycenter = parseFloat(this.defaultYCenter); // supposed to be in px
+      throw new TypeError('Order must be a function or a string');
     }
   };
 
   /**
-   * Set the rotation and distance of the camera
-   * @param {Object} pos   An object with the camera position. The object
-   *             contains three parameters:
-   *             - horizontal {Number}
-   *             The horizontal rotation, between 0 and 2*PI.
-   *             Optional, can be left undefined.
-   *             - vertical {Number}
-   *             The vertical rotation, between 0 and 0.5*PI
-   *             if vertical=0.5*PI, the graph is shown from the
-   *             top. Optional, can be left undefined.
-   *             - distance {Number}
-   *             The (normalized) distance of the camera to the
-   *             center of the graph, a value between 0.71 and 5.0.
-   *             Optional, can be left undefined.
+   * Remove an object by pointer or by id
+   * @param {String | Number | Object | Array} id Object or id, or an array with
+   *                                              objects or ids to be removed
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} removedIds
    */
-  Graph3d.prototype.setCameraPosition = function(pos) {
-    if (pos === undefined) {
-      return;
-    }
+  DataSet.prototype.remove = function (id, senderId) {
+    var removedIds = [],
+        i, len, removedId;
 
-    if (pos.horizontal !== undefined && pos.vertical !== undefined) {
-      this.camera.setArmRotation(pos.horizontal, pos.vertical);
+    if (Array.isArray(id)) {
+      for (i = 0, len = id.length; i < len; i++) {
+        removedId = this._remove(id[i]);
+        if (removedId != null) {
+          removedIds.push(removedId);
+        }
+      }
+    }
+    else {
+      removedId = this._remove(id);
+      if (removedId != null) {
+        removedIds.push(removedId);
+      }
     }
 
-    if (pos.distance !== undefined) {
-      this.camera.setArmLength(pos.distance);
+    if (removedIds.length) {
+      this._trigger('remove', {items: removedIds}, senderId);
     }
 
-    this.redraw();
+    return removedIds;
   };
 
-
   /**
-   * Retrieve the current camera rotation
-   * @return {object}   An object with parameters horizontal, vertical, and
-   *          distance
+   * Remove an item by its id
+   * @param {Number | String | Object} id   id or item
+   * @returns {Number | String | null} id
+   * @private
    */
-  Graph3d.prototype.getCameraPosition = function() {
-    var pos = this.camera.getArmRotation();
-    pos.distance = this.camera.getArmLength();
-    return pos;
+  DataSet.prototype._remove = function (id) {
+    if (util.isNumber(id) || util.isString(id)) {
+      if (this._data[id]) {
+        delete this._data[id];
+        return id;
+      }
+    }
+    else if (id instanceof Object) {
+      var itemId = id[this._fieldId];
+      if (itemId && this._data[itemId]) {
+        delete this._data[itemId];
+        return itemId;
+      }
+    }
+    return null;
   };
 
   /**
-   * Load data into the 3D Graph
+   * Clear the data
+   * @param {String} [senderId] Optional sender id
+   * @return {Array} removedIds    The ids of all removed items
    */
-  Graph3d.prototype._readData = function(data) {
-    // read the data
-    this._dataInitialize(data, this.style);
+  DataSet.prototype.clear = function (senderId) {
+    var ids = Object.keys(this._data);
 
+    this._data = {};
 
-    if (this.dataFilter) {
-      // apply filtering
-      this.dataPoints = this.dataFilter._getDataPoints();
-    }
-    else {
-      // no filtering. load all data
-      this.dataPoints = this._getDataPoints(this.dataTable);
-    }
+    this._trigger('remove', {items: ids}, senderId);
 
-    // draw the filter
-    this._redrawFilter();
+    return ids;
   };
 
   /**
-   * Replace the dataset of the Graph3d
-   * @param {Array | DataSet | DataView} data
+   * Find the item with maximum value of a specified field
+   * @param {String} field
+   * @return {Object | null} item  Item containing max value, or null if no items
    */
-  Graph3d.prototype.setData = function (data) {
-    this._readData(data);
-    this.redraw();
+  DataSet.prototype.max = function (field) {
+    var data = this._data,
+        max = null,
+        maxField = null;
 
-    // start animation when option is true
-    if (this.animationAutoStart && this.dataFilter) {
-      this.animationStart();
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        var item = data[id];
+        var itemField = item[field];
+        if (itemField != null && (!max || itemField > maxField)) {
+          max = item;
+          maxField = itemField;
+        }
+      }
     }
+
+    return max;
   };
 
   /**
-   * Update the options. Options will be merged with current options
-   * @param {Object} options
+   * Find the item with minimum value of a specified field
+   * @param {String} field
+   * @return {Object | null} item  Item containing max value, or null if no items
    */
-  Graph3d.prototype.setOptions = function (options) {
-    var cameraPosition = undefined;
-
-    this.animationStop();
+  DataSet.prototype.min = function (field) {
+    var data = this._data,
+        min = null,
+        minField = null;
 
-    if (options !== undefined) {
-      // retrieve parameter values
-      if (options.width !== undefined)       this.width = options.width;
-      if (options.height !== undefined)      this.height = options.height;
+    for (var id in data) {
+      if (data.hasOwnProperty(id)) {
+        var item = data[id];
+        var itemField = item[field];
+        if (itemField != null && (!min || itemField < minField)) {
+          min = item;
+          minField = itemField;
+        }
+      }
+    }
 
-      if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
-      if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
+    return min;
+  };
 
-      if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
-      if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
-      if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
-      if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
-      if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
+  /**
+   * Find all distinct values of a specified field
+   * @param {String} field
+   * @return {Array} values  Array containing all distinct values. If data items
+   *                         do not contain the specified field are ignored.
+   *                         The returned array is unordered.
+   */
+  DataSet.prototype.distinct = function (field) {
+    var data = this._data;
+    var values = [];
+    var fieldType = this._options.type && this._options.type[field] || null;
+    var count = 0;
+    var i;
 
-      if (options.style !== undefined) {
-        var styleNumber = this._getStyleNumber(options.style);
-        if (styleNumber !== -1) {
-          this.style = styleNumber;
+    for (var prop in data) {
+      if (data.hasOwnProperty(prop)) {
+        var item = data[prop];
+        var value = item[field];
+        var exists = false;
+        for (i = 0; i < count; i++) {
+          if (values[i] == value) {
+            exists = true;
+            break;
+          }
+        }
+        if (!exists && (value !== undefined)) {
+          values[count] = value;
+          count++;
         }
       }
-      if (options.showGrid !== undefined)      this.showGrid = options.showGrid;
-      if (options.showPerspective !== undefined)   this.showPerspective = options.showPerspective;
-      if (options.showShadow !== undefined)    this.showShadow = options.showShadow;
-      if (options.tooltip !== undefined)       this.showTooltip = options.tooltip;
-      if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
-      if (options.keepAspectRatio !== undefined)   this.keepAspectRatio = options.keepAspectRatio;
-      if (options.verticalRatio !== undefined)   this.verticalRatio = options.verticalRatio;
-
-      if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
-      if (options.animationPreload !== undefined)  this.animationPreload = options.animationPreload;
-      if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
+    }
 
-      if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
-      if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
+    if (fieldType) {
+      for (i = 0; i < values.length; i++) {
+        values[i] = util.convert(values[i], fieldType);
+      }
+    }
 
-      if (options.xMin !== undefined) this.defaultXMin = options.xMin;
-      if (options.xStep !== undefined) this.defaultXStep = options.xStep;
-      if (options.xMax !== undefined) this.defaultXMax = options.xMax;
-      if (options.yMin !== undefined) this.defaultYMin = options.yMin;
-      if (options.yStep !== undefined) this.defaultYStep = options.yStep;
-      if (options.yMax !== undefined) this.defaultYMax = options.yMax;
-      if (options.zMin !== undefined) this.defaultZMin = options.zMin;
-      if (options.zStep !== undefined) this.defaultZStep = options.zStep;
-      if (options.zMax !== undefined) this.defaultZMax = options.zMax;
-      if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
-      if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
+    return values;
+  };
 
-      if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
+  /**
+   * Add a single item. Will fail when an item with the same id already exists.
+   * @param {Object} item
+   * @return {String} id
+   * @private
+   */
+  DataSet.prototype._addItem = function (item) {
+    var id = item[this._fieldId];
 
-      if (cameraPosition !== undefined) {
-        this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
-        this.camera.setArmLength(cameraPosition.distance);
+    if (id != undefined) {
+      // check whether this id is already taken
+      if (this._data[id]) {
+        // item already exists
+        throw new Error('Cannot add item: item with id ' + id + ' already exists');
       }
-      else {
-        this.camera.setArmRotation(1.0, 0.5);
-        this.camera.setArmLength(1.7);
+    }
+    else {
+      // generate an id
+      id = util.randomUUID();
+      item[this._fieldId] = id;
+    }
+
+    var d = {};
+    for (var field in item) {
+      if (item.hasOwnProperty(field)) {
+        var fieldType = this._type[field];  // type may be undefined
+        d[field] = util.convert(item[field], fieldType);
       }
     }
+    this._data[id] = d;
 
-    this._setBackgroundColor(options && options.backgroundColor);
+    return id;
+  };
 
-    this.setSize(this.width, this.height);
+  /**
+   * Get an item. Fields can be converted to a specific type
+   * @param {String} id
+   * @param {Object.<String, String>} [types]  field types to convert
+   * @return {Object | null} item
+   * @private
+   */
+  DataSet.prototype._getItem = function (id, types) {
+    var field, value;
 
-    // re-load the data
-    if (this.dataTable) {
-      this.setData(this.dataTable);
+    // get the item from the dataset
+    var raw = this._data[id];
+    if (!raw) {
+      return null;
     }
 
-    // start animation when option is true
-    if (this.animationAutoStart && this.dataFilter) {
-      this.animationStart();
+    // convert the items field types
+    var converted = {};
+    if (types) {
+      for (field in raw) {
+        if (raw.hasOwnProperty(field)) {
+          value = raw[field];
+          converted[field] = util.convert(value, types[field]);
+        }
+      }
+    }
+    else {
+      // no field types specified, no converting needed
+      for (field in raw) {
+        if (raw.hasOwnProperty(field)) {
+          value = raw[field];
+          converted[field] = value;
+        }
+      }
     }
+    return converted;
   };
 
   /**
-   * Redraw the Graph.
+   * Update a single item: merge with existing item.
+   * Will fail when the item has no id, or when there does not exist an item
+   * with the same id.
+   * @param {Object} item
+   * @return {String} id
+   * @private
    */
-  Graph3d.prototype.redraw = function() {
-    if (this.dataPoints === undefined) {
-      throw 'Error: graph data not initialized';
-    }
-
-    this._resizeCanvas();
-    this._resizeCenter();
-    this._redrawSlider();
-    this._redrawClear();
-    this._redrawAxis();
-
-    if (this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE) {
-      this._redrawDataGrid();
-    }
-    else if (this.style === Graph3d.STYLE.LINE) {
-      this._redrawDataLine();
+  DataSet.prototype._updateItem = function (item) {
+    var id = item[this._fieldId];
+    if (id == undefined) {
+      throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
     }
-    else if (this.style === Graph3d.STYLE.BAR ||
-      this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      this._redrawDataBar();
+    var d = this._data[id];
+    if (!d) {
+      // item doesn't exist
+      throw new Error('Cannot update item: no item with id ' + id + ' found');
     }
-    else {
-      // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
-      this._redrawDataDot();
+
+    // merge with current item
+    for (var field in item) {
+      if (item.hasOwnProperty(field)) {
+        var fieldType = this._type[field];  // type may be undefined
+        d[field] = util.convert(item[field], fieldType);
+      }
     }
 
-    this._redrawInfo();
-    this._redrawLegend();
+    return id;
   };
 
   /**
-   * Clear the canvas before redrawing
+   * Get an array with the column names of a Google DataTable
+   * @param {DataTable} dataTable
+   * @return {String[]} columnNames
+   * @private
    */
-  Graph3d.prototype._redrawClear = function() {
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  DataSet.prototype._getColumnNames = function (dataTable) {
+    var columns = [];
+    for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
+      columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
+    }
+    return columns;
   };
 
-
   /**
-   * Redraw the legend showing the colors
+   * Append an item as a row to the dataTable
+   * @param dataTable
+   * @param columns
+   * @param item
+   * @private
    */
-  Graph3d.prototype._redrawLegend = function() {
-    var y;
+  DataSet.prototype._appendRow = function (dataTable, columns, item) {
+    var row = dataTable.addRow();
 
-    if (this.style === Graph3d.STYLE.DOTCOLOR ||
-      this.style === Graph3d.STYLE.DOTSIZE) {
+    for (var col = 0, cols = columns.length; col < cols; col++) {
+      var field = columns[col];
+      dataTable.setValue(row, col, item[field]);
+    }
+  };
 
-      var dotSize = this.frame.clientWidth * 0.02;
+  module.exports = DataSet;
 
-      var widthMin, widthMax;
-      if (this.style === Graph3d.STYLE.DOTSIZE) {
-        widthMin = dotSize / 2; // px
-        widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
-      }
-      else {
-        widthMin = 20; // px
-        widthMax = 20; // px
-      }
 
-      var height = Math.max(this.frame.clientHeight * 0.25, 100);
-      var top = this.margin;
-      var right = this.frame.clientWidth - this.margin;
-      var left = right - widthMax;
-      var bottom = top + height;
-    }
+/***/ },
+/* 10 */
+/***/ function(module, exports, __webpack_require__) {
 
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-    ctx.lineWidth = 1;
-    ctx.font = '14px arial'; // TODO: put in options
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
 
-    if (this.style === Graph3d.STYLE.DOTCOLOR) {
-      // draw the color bar
-      var ymin = 0;
-      var ymax = height; // Todo: make height customizable
-      for (y = ymin; y < ymax; y++) {
-        var f = (y - ymin) / (ymax - ymin);
+  /**
+   * DataView
+   *
+   * a dataview offers a filtered view on a dataset or an other dataview.
+   *
+   * @param {DataSet | DataView} data
+   * @param {Object} [options]   Available options: see method get
+   *
+   * @constructor DataView
+   */
+  function DataView (data, options) {
+    this._data = null;
+    this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
+    this._options = options || {};
+    this._fieldId = 'id'; // name of the field containing id
+    this._subscribers = {}; // event subscribers
 
-        //var width = (dotSize / 2 + (1-f) * dotSize * 2); // Todo: put this in one function
-        var hue = f * 240;
-        var color = this._hsv2rgb(hue, 1, 1);
+    var me = this;
+    this.listener = function () {
+      me._onEvent.apply(me, arguments);
+    };
 
-        ctx.strokeStyle = color;
-        ctx.beginPath();
-        ctx.moveTo(left, top + y);
-        ctx.lineTo(right, top + y);
-        ctx.stroke();
-      }
+    this.setData(data);
+  }
 
-      ctx.strokeStyle =  this.colorAxis;
-      ctx.strokeRect(left, top, widthMax, height);
-    }
+  // TODO: implement a function .config() to dynamically update things like configured filter
+  // and trigger changes accordingly
 
-    if (this.style === Graph3d.STYLE.DOTSIZE) {
-      // draw border around color bar
-      ctx.strokeStyle =  this.colorAxis;
-      ctx.fillStyle =  this.colorDot;
-      ctx.beginPath();
-      ctx.moveTo(left, top);
-      ctx.lineTo(right, top);
-      ctx.lineTo(right - widthMax + widthMin, bottom);
-      ctx.lineTo(left, bottom);
-      ctx.closePath();
-      ctx.fill();
-      ctx.stroke();
-    }
+  /**
+   * Set a data source for the view
+   * @param {DataSet | DataView} data
+   */
+  DataView.prototype.setData = function (data) {
+    var ids, i, len;
 
-    if (this.style === Graph3d.STYLE.DOTCOLOR ||
-      this.style === Graph3d.STYLE.DOTSIZE) {
-      // print values along the color bar
-      var gridLineLen = 5; // px
-      var step = new StepNumber(this.valueMin, this.valueMax, (this.valueMax-this.valueMin)/5, true);
-      step.start();
-      if (step.getCurrent() < this.valueMin) {
-        step.next();
+    if (this._data) {
+      // unsubscribe from current dataset
+      if (this._data.unsubscribe) {
+        this._data.unsubscribe('*', this.listener);
       }
-      while (!step.end()) {
-        y = bottom - (step.getCurrent() - this.valueMin) / (this.valueMax - this.valueMin) * height;
 
-        ctx.beginPath();
-        ctx.moveTo(left - gridLineLen, y);
-        ctx.lineTo(left, y);
-        ctx.stroke();
+      // trigger a remove of all items in memory
+      ids = [];
+      for (var id in this._ids) {
+        if (this._ids.hasOwnProperty(id)) {
+          ids.push(id);
+        }
+      }
+      this._ids = {};
+      this._trigger('remove', {items: ids});
+    }
 
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-        ctx.fillStyle = this.colorAxis;
-        ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
+    this._data = data;
 
-        step.next();
+    if (this._data) {
+      // update fieldId
+      this._fieldId = this._options.fieldId ||
+          (this._data && this._data.options && this._data.options.fieldId) ||
+          'id';
+
+      // trigger an add of all added items
+      ids = this._data.getIds({filter: this._options && this._options.filter});
+      for (i = 0, len = ids.length; i < len; i++) {
+        id = ids[i];
+        this._ids[id] = true;
       }
+      this._trigger('add', {items: ids});
 
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'top';
-      var label = this.legendLabel;
-      ctx.fillText(label, right, bottom + this.margin);
+      // subscribe to new dataset
+      if (this._data.on) {
+        this._data.on('*', this.listener);
+      }
     }
   };
 
   /**
-   * Redraw the filter
+   * Get data from the data view
+   *
+   * Usage:
+   *
+   *     get()
+   *     get(options: Object)
+   *     get(options: Object, data: Array | DataTable)
+   *
+   *     get(id: Number)
+   *     get(id: Number, options: Object)
+   *     get(id: Number, options: Object, data: Array | DataTable)
+   *
+   *     get(ids: Number[])
+   *     get(ids: Number[], options: Object)
+   *     get(ids: Number[], options: Object, data: Array | DataTable)
+   *
+   * Where:
+   *
+   * {Number | String} id         The id of an item
+   * {Number[] | String{}} ids    An array with ids of items
+   * {Object} options             An Object with options. Available options:
+   *                              {String} [type] Type of data to be returned. Can
+   *                                              be 'DataTable' or 'Array' (default)
+   *                              {Object.<String, String>} [convert]
+   *                              {String[]} [fields] field names to be returned
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * {Array | DataTable} [data]   If provided, items will be appended to this
+   *                              array or table. Required in case of Google
+   *                              DataTable.
+   * @param args
    */
-  Graph3d.prototype._redrawFilter = function() {
-    this.frame.filter.innerHTML = '';
+  DataView.prototype.get = function (args) {
+    var me = this;
 
-    if (this.dataFilter) {
-      var options = {
-        'visible': this.showAnimationControls
-      };
-      var slider = new Slider(this.frame.filter, options);
-      this.frame.filter.slider = slider;
+    // parse the arguments
+    var ids, options, data;
+    var firstType = util.getType(arguments[0]);
+    if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
+      // get(id(s) [, options] [, data])
+      ids = arguments[0];  // can be a single id or an array with ids
+      options = arguments[1];
+      data = arguments[2];
+    }
+    else {
+      // get([, options] [, data])
+      options = arguments[0];
+      data = arguments[1];
+    }
 
-      // TODO: css here is not nice here...
-      this.frame.filter.style.padding = '10px';
-      //this.frame.filter.style.backgroundColor = '#EFEFEF';
+    // extend the options with the default options and provided options
+    var viewOptions = util.extend({}, this._options, options);
 
-      slider.setValues(this.dataFilter.values);
-      slider.setPlayInterval(this.animationInterval);
+    // create a combined filter method when needed
+    if (this._options.filter && options && options.filter) {
+      viewOptions.filter = function (item) {
+        return me._options.filter(item) && options.filter(item);
+      }
+    }
 
-      // create an event handler
-      var me = this;
-      var onchange = function () {
-        var index = slider.getIndex();
+    // build up the call to the linked data set
+    var getArguments = [];
+    if (ids != undefined) {
+      getArguments.push(ids);
+    }
+    getArguments.push(viewOptions);
+    getArguments.push(data);
 
-        me.dataFilter.selectValue(index);
-        me.dataPoints = me.dataFilter._getDataPoints();
+    return this._data && this._data.get.apply(this._data, getArguments);
+  };
 
-        me.redraw();
-      };
-      slider.setOnChangeCallback(onchange);
+  /**
+   * Get ids of all items or from a filtered set of items.
+   * @param {Object} [options]    An Object with options. Available options:
+   *                              {function} [filter] filter items
+   *                              {String | function} [order] Order the items by
+   *                                  a field name or custom sort function.
+   * @return {Array} ids
+   */
+  DataView.prototype.getIds = function (options) {
+    var ids;
+
+    if (this._data) {
+      var defaultFilter = this._options.filter;
+      var filter;
+
+      if (options && options.filter) {
+        if (defaultFilter) {
+          filter = function (item) {
+            return defaultFilter(item) && options.filter(item);
+          }
+        }
+        else {
+          filter = options.filter;
+        }
+      }
+      else {
+        filter = defaultFilter;
+      }
+
+      ids = this._data.getIds({
+        filter: filter,
+        order: options && options.order
+      });
     }
     else {
-      this.frame.filter.slider = undefined;
+      ids = [];
     }
+
+    return ids;
   };
 
   /**
-   * Redraw the slider
+   * Get the DataSet to which this DataView is connected. In case there is a chain
+   * of multiple DataViews, the root DataSet of this chain is returned.
+   * @return {DataSet} dataSet
    */
-  Graph3d.prototype._redrawSlider = function() {
-    if ( this.frame.filter.slider !== undefined) {
-      this.frame.filter.slider.redraw();
+  DataView.prototype.getDataSet = function () {
+    var dataSet = this;
+    while (dataSet instanceof DataView) {
+      dataSet = dataSet._data;
     }
+    return dataSet || null;
   };
 
-
   /**
-   * Redraw common information
+   * Event listener. Will propagate all events from the connected data set to
+   * the subscribers of the DataView, but will filter the items and only trigger
+   * when there are changes in the filtered data set.
+   * @param {String} event
+   * @param {Object | null} params
+   * @param {String} senderId
+   * @private
    */
-  Graph3d.prototype._redrawInfo = function() {
-    if (this.dataFilter) {
-      var canvas = this.frame.canvas;
-      var ctx = canvas.getContext('2d');
-
-      ctx.font = '14px arial'; // TODO: put in options
-      ctx.lineStyle = 'gray';
-      ctx.fillStyle = 'gray';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'top';
-
-      var x = this.margin;
-      var y = this.margin;
-      ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y);
-    }
-  };
+  DataView.prototype._onEvent = function (event, params, senderId) {
+    var i, len, id, item,
+        ids = params && params.items,
+        data = this._data,
+        added = [],
+        updated = [],
+        removed = [];
 
+    if (ids && data) {
+      switch (event) {
+        case 'add':
+          // filter the ids of the added items
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            item = this.get(id);
+            if (item) {
+              this._ids[id] = true;
+              added.push(id);
+            }
+          }
 
-  /**
-   * Redraw the axis
-   */
-  Graph3d.prototype._redrawAxis = function() {
-    var canvas = this.frame.canvas,
-      ctx = canvas.getContext('2d'),
-      from, to, step, prettyStep,
-      text, xText, yText, zText,
-      offset, xOffset, yOffset,
-      xMin2d, xMax2d;
+          break;
 
-    // TODO: get the actual rendered style of the containerElement
-    //ctx.font = this.containerElement.style.font;
-    ctx.font = 24 / this.camera.getArmLength() + 'px arial';
+        case 'update':
+          // determine the event from the views viewpoint: an updated
+          // item can be added, updated, or removed from this view.
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            item = this.get(id);
 
-    // calculate the length for the short grid lines
-    var gridLenX = 0.025 / this.scale.x;
-    var gridLenY = 0.025 / this.scale.y;
-    var textMargin = 5 / this.camera.getArmLength(); // px
-    var armAngle = this.camera.getArmRotation().horizontal;
+            if (item) {
+              if (this._ids[id]) {
+                updated.push(id);
+              }
+              else {
+                this._ids[id] = true;
+                added.push(id);
+              }
+            }
+            else {
+              if (this._ids[id]) {
+                delete this._ids[id];
+                removed.push(id);
+              }
+              else {
+                // nothing interesting for me :-(
+              }
+            }
+          }
 
-    // draw x-grid lines
-    ctx.lineWidth = 1;
-    prettyStep = (this.defaultXStep === undefined);
-    step = new StepNumber(this.xMin, this.xMax, this.xStep, prettyStep);
-    step.start();
-    if (step.getCurrent() < this.xMin) {
-      step.next();
-    }
-    while (!step.end()) {
-      var x = step.getCurrent();
+          break;
 
-      if (this.showGrid) {
-        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
-        to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-        ctx.strokeStyle = this.colorGrid;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
-      }
-      else {
-        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
-        to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
+        case 'remove':
+          // filter the ids of the removed items
+          for (i = 0, len = ids.length; i < len; i++) {
+            id = ids[i];
+            if (this._ids[id]) {
+              delete this._ids[id];
+              removed.push(id);
+            }
+          }
 
-        from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
-        to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
+          break;
       }
 
-      yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
-      text = this._convert3Dto2D(new Point3d(x, yText, this.zMin));
-      if (Math.cos(armAngle * 2) > 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-        text.y += textMargin;
+      if (added.length) {
+        this._trigger('add', {items: added}, senderId);
       }
-      else if (Math.sin(armAngle * 2) < 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
+      if (updated.length) {
+        this._trigger('update', {items: updated}, senderId);
       }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
+      if (removed.length) {
+        this._trigger('remove', {items: removed}, senderId);
       }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
-
-      step.next();
     }
+  };
 
-    // draw y-grid lines
-    ctx.lineWidth = 1;
-    prettyStep = (this.defaultYStep === undefined);
-    step = new StepNumber(this.yMin, this.yMax, this.yStep, prettyStep);
-    step.start();
-    if (step.getCurrent() < this.yMin) {
-      step.next();
-    }
-    while (!step.end()) {
-      if (this.showGrid) {
-        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
-        to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorGrid;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
-      }
-      else {
-        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
-        to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
+  // copy subscription functionality from DataSet
+  DataView.prototype.on = DataSet.prototype.on;
+  DataView.prototype.off = DataSet.prototype.off;
+  DataView.prototype._trigger = DataSet.prototype._trigger;
 
-        from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
-        to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
-        ctx.strokeStyle = this.colorAxis;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(to.x, to.y);
-        ctx.stroke();
-      }
+  // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
+  DataView.prototype.subscribe = DataView.prototype.on;
+  DataView.prototype.unsubscribe = DataView.prototype.off;
 
-      xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
-      text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin));
-      if (Math.cos(armAngle * 2) < 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-        text.y += textMargin;
-      }
-      else if (Math.sin(armAngle * 2) > 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-      }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-      }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
+  module.exports = DataView;
 
-      step.next();
-    }
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // draw z-grid lines and axis
-    ctx.lineWidth = 1;
-    prettyStep = (this.defaultZStep === undefined);
-    step = new StepNumber(this.zMin, this.zMax, this.zStep, prettyStep);
-    step.start();
-    if (step.getCurrent() < this.zMin) {
-      step.next();
-    }
-    xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
-    yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
-    while (!step.end()) {
-      // TODO: make z-grid lines really 3d?
-      from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
-      ctx.strokeStyle = this.colorAxis;
-      ctx.beginPath();
-      ctx.moveTo(from.x, from.y);
-      ctx.lineTo(from.x - textMargin, from.y);
-      ctx.stroke();
+  var Emitter = __webpack_require__(12);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Point3d = __webpack_require__(13);
+  var Point2d = __webpack_require__(14);
+  var Filter = __webpack_require__(15);
+  var StepNumber = __webpack_require__(16);
 
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y);
-
-      step.next();
+  /**
+   * @constructor Graph3d
+   * Graph3d displays data in 3d.
+   *
+   * Graph3d is developed in javascript as a Google Visualization Chart.
+   *
+   * @param {Element} container   The DOM element in which the Graph3d will
+   *                              be created. Normally a div element.
+   * @param {DataSet | DataView | Array} [data]
+   * @param {Object} [options]
+   */
+  function Graph3d(container, data, options) {
+    if (!(this instanceof Graph3d)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
     }
-    ctx.lineWidth = 1;
-    from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-    to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.stroke();
 
-    // draw x-axis
-    ctx.lineWidth = 1;
-    // line at yMin
-    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
-    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(xMin2d.x, xMin2d.y);
-    ctx.lineTo(xMax2d.x, xMax2d.y);
-    ctx.stroke();
-    // line at ymax
-    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(xMin2d.x, xMin2d.y);
-    ctx.lineTo(xMax2d.x, xMax2d.y);
-    ctx.stroke();
+    // create variables and set default values
+    this.containerElement = container;
+    this.width = '400px';
+    this.height = '400px';
+    this.margin = 10; // px
+    this.defaultXCenter = '55%';
+    this.defaultYCenter = '50%';
 
-    // draw y-axis
-    ctx.lineWidth = 1;
-    // line at xMin
-    from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
-    to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.stroke();
-    // line at xMax
-    from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
-    to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
-    ctx.strokeStyle = this.colorAxis;
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.stroke();
+    this.xLabel = 'x';
+    this.yLabel = 'y';
+    this.zLabel = 'z';
+    this.filterLabel = 'time';
+    this.legendLabel = 'value';
 
-    // draw x-label
-    var xLabel = this.xLabel;
-    if (xLabel.length > 0) {
-      yOffset = 0.1 / this.scale.y;
-      xText = (this.xMin + this.xMax) / 2;
-      yText = (Math.cos(armAngle) > 0) ? this.yMin - yOffset: this.yMax + yOffset;
-      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-      if (Math.cos(armAngle * 2) > 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-      }
-      else if (Math.sin(armAngle * 2) < 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-      }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-      }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(xLabel, text.x, text.y);
-    }
+    this.style = Graph3d.STYLE.DOT;
+    this.showPerspective = true;
+    this.showGrid = true;
+    this.keepAspectRatio = true;
+    this.showShadow = false;
+    this.showGrayBottom = false; // TODO: this does not work correctly
+    this.showTooltip = false;
+    this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube'
 
-    // draw y-label
-    var yLabel = this.yLabel;
-    if (yLabel.length > 0) {
-      xOffset = 0.1 / this.scale.x;
-      xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
-      yText = (this.yMin + this.yMax) / 2;
-      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-      if (Math.cos(armAngle * 2) < 0) {
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-      }
-      else if (Math.sin(armAngle * 2) > 0){
-        ctx.textAlign = 'right';
-        ctx.textBaseline = 'middle';
-      }
-      else {
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-      }
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(yLabel, text.x, text.y);
-    }
+    this.animationInterval = 1000; // milliseconds
+    this.animationPreload = false;
 
-    // draw z-label
-    var zLabel = this.zLabel;
-    if (zLabel.length > 0) {
-      offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
-      xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
-      yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
-      zText = (this.zMin + this.zMax) / 2;
-      text = this._convert3Dto2D(new Point3d(xText, yText, zText));
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = this.colorAxis;
-      ctx.fillText(zLabel, text.x - offset, text.y);
+    this.camera = new Graph3d.Camera();
+    this.eye = new Point3d(0, 0, -1);  // TODO: set eye.z about 3/4 of the width of the window?
+
+    this.dataTable = null;  // The original data table
+    this.dataPoints = null; // The table with point objects
+
+    // the column indexes
+    this.colX = undefined;
+    this.colY = undefined;
+    this.colZ = undefined;
+    this.colValue = undefined;
+    this.colFilter = undefined;
+
+    this.xMin = 0;
+    this.xStep = undefined; // auto by default
+    this.xMax = 1;
+    this.yMin = 0;
+    this.yStep = undefined; // auto by default
+    this.yMax = 1;
+    this.zMin = 0;
+    this.zStep = undefined; // auto by default
+    this.zMax = 1;
+    this.valueMin = 0;
+    this.valueMax = 1;
+    this.xBarWidth = 1;
+    this.yBarWidth = 1;
+    // TODO: customize axis range
+
+    // constants
+    this.colorAxis = '#4D4D4D';
+    this.colorGrid = '#D3D3D3';
+    this.colorDot = '#7DC1FF';
+    this.colorDotBorder = '#3267D2';
+
+    // create a frame and canvas
+    this.create();
+
+    // apply options (also when undefined)
+    this.setOptions(options);
+
+    // apply data
+    if (data) {
+      this.setData(data);
     }
+  }
+
+  // Extend Graph3d with an Emitter mixin
+  Emitter(Graph3d.prototype);
+
+  /**
+   * @class Camera
+   * The camera is mounted on a (virtual) camera arm. The camera arm can rotate
+   * The camera is always looking in the direction of the origin of the arm.
+   * This way, the camera always rotates around one fixed point, the location
+   * of the camera arm.
+   *
+   * Documentation:
+   *   http://en.wikipedia.org/wiki/3D_projection
+   */
+  Graph3d.Camera = function () {
+    this.armLocation = new Point3d();
+    this.armRotation = {};
+    this.armRotation.horizontal = 0;
+    this.armRotation.vertical = 0;
+    this.armLength = 1.7;
+
+    this.cameraLocation = new Point3d();
+    this.cameraRotation =  new Point3d(0.5*Math.PI, 0, 0);
+
+    this.calculateCameraOrientation();
   };
 
   /**
-   * Calculate the color based on the given value.
-   * @param {Number} H   Hue, a value be between 0 and 360
-   * @param {Number} S   Saturation, a value between 0 and 1
-   * @param {Number} V   Value, a value between 0 and 1
+   * Set the location (origin) of the arm
+   * @param {Number} x  Normalized value of x
+   * @param {Number} y  Normalized value of y
+   * @param {Number} z  Normalized value of z
    */
-  Graph3d.prototype._hsv2rgb = function(H, S, V) {
-    var R, G, B, C, Hi, X;
+  Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
+    this.armLocation.x = x;
+    this.armLocation.y = y;
+    this.armLocation.z = z;
 
-    C = V * S;
-    Hi = Math.floor(H/60);  // hi = 0,1,2,3,4,5
-    X = C * (1 - Math.abs(((H/60) % 2) - 1));
+    this.calculateCameraOrientation();
+  };
 
-    switch (Hi) {
-      case 0: R = C; G = X; B = 0; break;
-      case 1: R = X; G = C; B = 0; break;
-      case 2: R = 0; G = C; B = X; break;
-      case 3: R = 0; G = X; B = C; break;
-      case 4: R = X; G = 0; B = C; break;
-      case 5: R = C; G = 0; B = X; break;
+  /**
+   * Set the rotation of the camera arm
+   * @param {Number} horizontal   The horizontal rotation, between 0 and 2*PI.
+   *                Optional, can be left undefined.
+   * @param {Number} vertical   The vertical rotation, between 0 and 0.5*PI
+   *                if vertical=0.5*PI, the graph is shown from the
+   *                top. Optional, can be left undefined.
+   */
+  Graph3d.Camera.prototype.setArmRotation = function(horizontal, vertical) {
+    if (horizontal !== undefined) {
+      this.armRotation.horizontal = horizontal;
+    }
 
-      default: R = 0; G = 0; B = 0; break;
+    if (vertical !== undefined) {
+      this.armRotation.vertical = vertical;
+      if (this.armRotation.vertical < 0) this.armRotation.vertical = 0;
+      if (this.armRotation.vertical > 0.5*Math.PI) this.armRotation.vertical = 0.5*Math.PI;
     }
 
-    return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')';
+    if (horizontal !== undefined || vertical !== undefined) {
+      this.calculateCameraOrientation();
+    }
   };
 
-
   /**
-   * Draw all datapoints as a grid
-   * This function can be used when the style is 'grid'
+   * Retrieve the current arm rotation
+   * @return {object}   An object with parameters horizontal and vertical
    */
-  Graph3d.prototype._redrawDataGrid = function() {
-    var canvas = this.frame.canvas,
-      ctx = canvas.getContext('2d'),
-      point, right, top, cross,
-      i,
-      topSideVisible, fillStyle, strokeStyle, lineWidth,
-      h, s, v, zAvg;
-
+  Graph3d.Camera.prototype.getArmRotation = function() {
+    var rot = {};
+    rot.horizontal = this.armRotation.horizontal;
+    rot.vertical = this.armRotation.vertical;
 
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return; // TODO: throw exception?
+    return rot;
+  };
 
-    // calculate the translations and screen position of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
+  /**
+   * Set the (normalized) length of the camera arm.
+   * @param {Number} length A length between 0.71 and 5.0
+   */
+  Graph3d.Camera.prototype.setArmLength = function(length) {
+    if (length === undefined)
+      return;
 
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+    this.armLength = length;
 
-      // calculate the translation of the point at the bottom (needed for sorting)
-      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
-      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
-    }
+    // Radius must be larger than the corner of the graph,
+    // which has a distance of sqrt(0.5^2+0.5^2) = 0.71 from the center of the
+    // graph
+    if (this.armLength < 0.71) this.armLength = 0.71;
+    if (this.armLength > 5.0) this.armLength = 5.0;
 
-    // sort the points on depth of their (x,y) position (not on z)
-    var sortDepth = function (a, b) {
-      return b.dist - a.dist;
-    };
-    this.dataPoints.sort(sortDepth);
+    this.calculateCameraOrientation();
+  };
 
-    if (this.style === Graph3d.STYLE.SURFACE) {
-      for (i = 0; i < this.dataPoints.length; i++) {
-        point = this.dataPoints[i];
-        right = this.dataPoints[i].pointRight;
-        top   = this.dataPoints[i].pointTop;
-        cross = this.dataPoints[i].pointCross;
+  /**
+   * Retrieve the arm length
+   * @return {Number} length
+   */
+  Graph3d.Camera.prototype.getArmLength = function() {
+    return this.armLength;
+  };
 
-        if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {
+  /**
+   * Retrieve the camera location
+   * @return {Point3d} cameraLocation
+   */
+  Graph3d.Camera.prototype.getCameraLocation = function() {
+    return this.cameraLocation;
+  };
 
-          if (this.showGrayBottom || this.showShadow) {
-            // calculate the cross product of the two vectors from center
-            // to left and right, in order to know whether we are looking at the
-            // bottom or at the top side. We can also use the cross product
-            // for calculating light intensity
-            var aDiff = Point3d.subtract(cross.trans, point.trans);
-            var bDiff = Point3d.subtract(top.trans, right.trans);
-            var crossproduct = Point3d.crossProduct(aDiff, bDiff);
-            var len = crossproduct.length();
-            // FIXME: there is a bug with determining the surface side (shadow or colored)
+  /**
+   * Retrieve the camera rotation
+   * @return {Point3d} cameraRotation
+   */
+  Graph3d.Camera.prototype.getCameraRotation = function() {
+    return this.cameraRotation;
+  };
 
-            topSideVisible = (crossproduct.z > 0);
-          }
-          else {
-            topSideVisible = true;
-          }
+  /**
+   * Calculate the location and rotation of the camera based on the
+   * position and orientation of the camera arm
+   */
+  Graph3d.Camera.prototype.calculateCameraOrientation = function() {
+    // calculate location of the camera
+    this.cameraLocation.x = this.armLocation.x - this.armLength * Math.sin(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
+    this.cameraLocation.y = this.armLocation.y - this.armLength * Math.cos(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
+    this.cameraLocation.z = this.armLocation.z + this.armLength * Math.sin(this.armRotation.vertical);
 
-          if (topSideVisible) {
-            // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-            zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
-            h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-            s = 1; // saturation
+    // calculate rotation of the camera
+    this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical;
+    this.cameraRotation.y = 0;
+    this.cameraRotation.z = -this.armRotation.horizontal;
+  };
 
-            if (this.showShadow) {
-              v = Math.min(1 + (crossproduct.x / len) / 2, 1);  // value. TODO: scale
-              fillStyle = this._hsv2rgb(h, s, v);
-              strokeStyle = fillStyle;
-            }
-            else  {
-              v = 1;
-              fillStyle = this._hsv2rgb(h, s, v);
-              strokeStyle = this.colorAxis;
-            }
-          }
-          else {
-            fillStyle = 'gray';
-            strokeStyle = this.colorAxis;
-          }
-          lineWidth = 0.5;
+  /**
+   * Calculate the scaling values, dependent on the range in x, y, and z direction
+   */
+  Graph3d.prototype._setScale = function() {
+    this.scale = new Point3d(1 / (this.xMax - this.xMin),
+      1 / (this.yMax - this.yMin),
+      1 / (this.zMax - this.zMin));
 
-          ctx.lineWidth = lineWidth;
-          ctx.fillStyle = fillStyle;
-          ctx.strokeStyle = strokeStyle;
-          ctx.beginPath();
-          ctx.moveTo(point.screen.x, point.screen.y);
-          ctx.lineTo(right.screen.x, right.screen.y);
-          ctx.lineTo(cross.screen.x, cross.screen.y);
-          ctx.lineTo(top.screen.x, top.screen.y);
-          ctx.closePath();
-          ctx.fill();
-          ctx.stroke();
-        }
+    // keep aspect ration between x and y scale if desired
+    if (this.keepAspectRatio) {
+      if (this.scale.x < this.scale.y) {
+        //noinspection JSSuspiciousNameCombination
+        this.scale.y = this.scale.x;
+      }
+      else {
+        //noinspection JSSuspiciousNameCombination
+        this.scale.x = this.scale.y;
       }
     }
-    else { // grid style
-      for (i = 0; i < this.dataPoints.length; i++) {
-        point = this.dataPoints[i];
-        right = this.dataPoints[i].pointRight;
-        top   = this.dataPoints[i].pointTop;
-
-        if (point !== undefined) {
-          if (this.showPerspective) {
-            lineWidth = 2 / -point.trans.z;
-          }
-          else {
-            lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
-          }
-        }
-
-        if (point !== undefined && right !== undefined) {
-          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-          zAvg = (point.point.z + right.point.z) / 2;
-          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-          ctx.lineWidth = lineWidth;
-          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-          ctx.beginPath();
-          ctx.moveTo(point.screen.x, point.screen.y);
-          ctx.lineTo(right.screen.x, right.screen.y);
-          ctx.stroke();
-        }
+    // scale the vertical axis
+    this.scale.z *= this.verticalRatio;
+    // TODO: can this be automated? verticalRatio?
 
-        if (point !== undefined && top !== undefined) {
-          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-          zAvg = (point.point.z + top.point.z) / 2;
-          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+    // determine scale for (optional) value
+    this.scale.value = 1 / (this.valueMax - this.valueMin);
 
-          ctx.lineWidth = lineWidth;
-          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-          ctx.beginPath();
-          ctx.moveTo(point.screen.x, point.screen.y);
-          ctx.lineTo(top.screen.x, top.screen.y);
-          ctx.stroke();
-        }
-      }
-    }
+    // position the camera arm
+    var xCenter = (this.xMax + this.xMin) / 2 * this.scale.x;
+    var yCenter = (this.yMax + this.yMin) / 2 * this.scale.y;
+    var zCenter = (this.zMax + this.zMin) / 2 * this.scale.z;
+    this.camera.setArmLocation(xCenter, yCenter, zCenter);
   };
 
 
   /**
-   * Draw all datapoints as dots.
-   * This function can be used when the style is 'dot' or 'dot-line'
+   * Convert a 3D location to a 2D location on screen
+   * http://en.wikipedia.org/wiki/3D_projection
+   * @param {Point3d} point3d   A 3D point with parameters x, y, z
+   * @return {Point2d} point2d  A 2D point with parameters x, y
    */
-  Graph3d.prototype._redrawDataDot = function() {
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-    var i;
+  Graph3d.prototype._convert3Dto2D = function(point3d) {
+    var translation = this._convertPointToTranslation(point3d);
+    return this._convertTranslationToScreen(translation);
+  };
 
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return;  // TODO: throw exception?
+  /**
+   * Convert a 3D location its translation seen from the camera
+   * http://en.wikipedia.org/wiki/3D_projection
+   * @param {Point3d} point3d    A 3D point with parameters x, y, z
+   * @return {Point3d} translation A 3D point with parameters x, y, z This is
+   *                   the translation of the point, seen from the
+   *                   camera
+   */
+  Graph3d.prototype._convertPointToTranslation = function(point3d) {
+    var ax = point3d.x * this.scale.x,
+      ay = point3d.y * this.scale.y,
+      az = point3d.z * this.scale.z,
 
-    // calculate the translations of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+      cx = this.camera.getCameraLocation().x,
+      cy = this.camera.getCameraLocation().y,
+      cz = this.camera.getCameraLocation().z,
 
-      // calculate the distance from the point at the bottom to the camera
-      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
-      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
-    }
+    // calculate angles
+      sinTx = Math.sin(this.camera.getCameraRotation().x),
+      cosTx = Math.cos(this.camera.getCameraRotation().x),
+      sinTy = Math.sin(this.camera.getCameraRotation().y),
+      cosTy = Math.cos(this.camera.getCameraRotation().y),
+      sinTz = Math.sin(this.camera.getCameraRotation().z),
+      cosTz = Math.cos(this.camera.getCameraRotation().z),
 
-    // order the translated points by depth
-    var sortDepth = function (a, b) {
-      return b.dist - a.dist;
-    };
-    this.dataPoints.sort(sortDepth);
-
-    // draw the datapoints as colored circles
-    var dotSize = this.frame.clientWidth * 0.02;  // px
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var point = this.dataPoints[i];
-
-      if (this.style === Graph3d.STYLE.DOTLINE) {
-        // draw a vertical line from the bottom to the graph value
-        //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
-        var from = this._convert3Dto2D(point.bottom);
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = this.colorGrid;
-        ctx.beginPath();
-        ctx.moveTo(from.x, from.y);
-        ctx.lineTo(point.screen.x, point.screen.y);
-        ctx.stroke();
-      }
-
-      // calculate radius for the circle
-      var size;
-      if (this.style === Graph3d.STYLE.DOTSIZE) {
-        size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
-      }
-      else {
-        size = dotSize;
-      }
+    // calculate translation
+      dx = cosTy * (sinTz * (ay - cy) + cosTz * (ax - cx)) - sinTy * (az - cz),
+      dy = sinTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) + cosTx * (cosTz * (ay - cy) - sinTz * (ax-cx)),
+      dz = cosTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) - sinTx * (cosTz * (ay - cy) - sinTz * (ax-cx));
 
-      var radius;
-      if (this.showPerspective) {
-        radius = size / -point.trans.z;
-      }
-      else {
-        radius = size * -(this.eye.z / this.camera.getArmLength());
-      }
-      if (radius < 0) {
-        radius = 0;
-      }
+    return new Point3d(dx, dy, dz);
+  };
 
-      var hue, color, borderColor;
-      if (this.style === Graph3d.STYLE.DOTCOLOR ) {
-        // calculate the color based on the value
-        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
-      else if (this.style === Graph3d.STYLE.DOTSIZE) {
-        color = this.colorDot;
-        borderColor = this.colorDotBorder;
-      }
-      else {
-        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
+  /**
+   * Convert a translation point to a point on the screen
+   * @param {Point3d} translation   A 3D point with parameters x, y, z This is
+   *                    the translation of the point, seen from the
+   *                    camera
+   * @return {Point2d} point2d    A 2D point with parameters x, y
+   */
+  Graph3d.prototype._convertTranslationToScreen = function(translation) {
+    var ex = this.eye.x,
+      ey = this.eye.y,
+      ez = this.eye.z,
+      dx = translation.x,
+      dy = translation.y,
+      dz = translation.z;
 
-      // draw the circle
-      ctx.lineWidth = 1.0;
-      ctx.strokeStyle = borderColor;
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
-      ctx.fill();
-      ctx.stroke();
+    // calculate position on screen from translation
+    var bx;
+    var by;
+    if (this.showPerspective) {
+      bx = (dx - ex) * (ez / dz);
+      by = (dy - ey) * (ez / dz);
+    }
+    else {
+      bx = dx * -(ez / this.camera.getArmLength());
+      by = dy * -(ez / this.camera.getArmLength());
     }
+
+    // shift and scale the point to the center of the screen
+    // use the width of the graph to scale both horizontally and vertically.
+    return new Point2d(
+      this.xcenter + bx * this.frame.canvas.clientWidth,
+      this.ycenter - by * this.frame.canvas.clientWidth);
   };
 
   /**
-   * Draw all datapoints as bars.
-   * This function can be used when the style is 'bar', 'bar-color', or 'bar-size'
+   * Set the background styling for the graph
+   * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
    */
-  Graph3d.prototype._redrawDataBar = function() {
-    var canvas = this.frame.canvas;
-    var ctx = canvas.getContext('2d');
-    var i, j, surface, corners;
-
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return;  // TODO: throw exception?
-
-    // calculate the translations of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+  Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
+    var fill = 'white';
+    var stroke = 'gray';
+    var strokeWidth = 1;
 
-      // calculate the distance from the point at the bottom to the camera
-      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
-      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    if (typeof(backgroundColor) === 'string') {
+      fill = backgroundColor;
+      stroke = 'none';
+      strokeWidth = 0;
+    }
+    else if (typeof(backgroundColor) === 'object') {
+      if (backgroundColor.fill !== undefined)    fill = backgroundColor.fill;
+      if (backgroundColor.stroke !== undefined)    stroke = backgroundColor.stroke;
+      if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth;
+    }
+    else if  (backgroundColor === undefined) {
+      // use use defaults
+    }
+    else {
+      throw 'Unsupported type of backgroundColor';
     }
 
-    // order the translated points by depth
-    var sortDepth = function (a, b) {
-      return b.dist - a.dist;
-    };
-    this.dataPoints.sort(sortDepth);
-
-    // draw the datapoints as bars
-    var xWidth = this.xBarWidth / 2;
-    var yWidth = this.yBarWidth / 2;
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var point = this.dataPoints[i];
+    this.frame.style.backgroundColor = fill;
+    this.frame.style.borderColor = stroke;
+    this.frame.style.borderWidth = strokeWidth + 'px';
+    this.frame.style.borderStyle = 'solid';
+  };
 
-      // determine color
-      var hue, color, borderColor;
-      if (this.style === Graph3d.STYLE.BARCOLOR ) {
-        // calculate the color based on the value
-        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
-      else if (this.style === Graph3d.STYLE.BARSIZE) {
-        color = this.colorDot;
-        borderColor = this.colorDotBorder;
-      }
-      else {
-        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-        color = this._hsv2rgb(hue, 1, 1);
-        borderColor = this._hsv2rgb(hue, 1, 0.8);
-      }
 
-      // calculate size for the bar
-      if (this.style === Graph3d.STYLE.BARSIZE) {
-        xWidth = (this.xBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
-        yWidth = (this.yBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
-      }
+  /// enumerate the available styles
+  Graph3d.STYLE = {
+    BAR: 0,
+    BARCOLOR: 1,
+    BARSIZE: 2,
+    DOT : 3,
+    DOTLINE : 4,
+    DOTCOLOR: 5,
+    DOTSIZE: 6,
+    GRID : 7,
+    LINE: 8,
+    SURFACE : 9
+  };
 
-      // calculate all corner points
-      var me = this;
-      var point3d = point.point;
-      var top = [
-        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
-        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
-      ];
-      var bottom = [
-        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, this.zMin)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, this.zMin)},
-        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, this.zMin)},
-        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, this.zMin)}
-      ];
+  /**
+   * Retrieve the style index from given styleName
+   * @param {string} styleName  Style name such as 'dot', 'grid', 'dot-line'
+   * @return {Number} styleNumber Enumeration value representing the style, or -1
+   *                when not found
+   */
+  Graph3d.prototype._getStyleNumber = function(styleName) {
+    switch (styleName) {
+      case 'dot':     return Graph3d.STYLE.DOT;
+      case 'dot-line':  return Graph3d.STYLE.DOTLINE;
+      case 'dot-color':   return Graph3d.STYLE.DOTCOLOR;
+      case 'dot-size':  return Graph3d.STYLE.DOTSIZE;
+      case 'line':    return Graph3d.STYLE.LINE;
+      case 'grid':    return Graph3d.STYLE.GRID;
+      case 'surface':   return Graph3d.STYLE.SURFACE;
+      case 'bar':     return Graph3d.STYLE.BAR;
+      case 'bar-color':   return Graph3d.STYLE.BARCOLOR;
+      case 'bar-size':  return Graph3d.STYLE.BARSIZE;
+    }
 
-      // calculate screen location of the points
-      top.forEach(function (obj) {
-        obj.screen = me._convert3Dto2D(obj.point);
-      });
-      bottom.forEach(function (obj) {
-        obj.screen = me._convert3Dto2D(obj.point);
-      });
+    return -1;
+  };
 
-      // create five sides, calculate both corner points and center points
-      var surfaces = [
-        {corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
-        {corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
-        {corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
-        {corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
-        {corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
-      ];
-      point.surfaces = surfaces;
+  /**
+   * Determine the indexes of the data columns, based on the given style and data
+   * @param {DataSet} data
+   * @param {Number}  style
+   */
+  Graph3d.prototype._determineColumnIndexes = function(data, style) {
+    if (this.style === Graph3d.STYLE.DOT ||
+      this.style === Graph3d.STYLE.DOTLINE ||
+      this.style === Graph3d.STYLE.LINE ||
+      this.style === Graph3d.STYLE.GRID ||
+      this.style === Graph3d.STYLE.SURFACE ||
+      this.style === Graph3d.STYLE.BAR) {
+      // 3 columns expected, and optionally a 4th with filter values
+      this.colX = 0;
+      this.colY = 1;
+      this.colZ = 2;
+      this.colValue = undefined;
 
-      // calculate the distance of each of the surface centers to the camera
-      for (j = 0; j < surfaces.length; j++) {
-        surface = surfaces[j];
-        var transCenter = this._convertPointToTranslation(surface.center);
-        surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
-        // TODO: this dept calculation doesn't work 100% of the cases due to perspective,
-        //     but the current solution is fast/simple and works in 99.9% of all cases
-        //     the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
+      if (data.getNumberOfColumns() > 3) {
+        this.colFilter = 3;
       }
+    }
+    else if (this.style === Graph3d.STYLE.DOTCOLOR ||
+      this.style === Graph3d.STYLE.DOTSIZE ||
+      this.style === Graph3d.STYLE.BARCOLOR ||
+      this.style === Graph3d.STYLE.BARSIZE) {
+      // 4 columns expected, and optionally a 5th with filter values
+      this.colX = 0;
+      this.colY = 1;
+      this.colZ = 2;
+      this.colValue = 3;
 
-      // order the surfaces by their (translated) depth
-      surfaces.sort(function (a, b) {
-        var diff = b.dist - a.dist;
-        if (diff) return diff;
-
-        // if equal depth, sort the top surface last
-        if (a.corners === top) return 1;
-        if (b.corners === top) return -1;
-
-        // both are equal
-        return 0;
-      });
-
-      // draw the ordered surfaces
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = borderColor;
-      ctx.fillStyle = color;
-      // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
-      for (j = 2; j < surfaces.length; j++) {
-        surface = surfaces[j];
-        corners = surface.corners;
-        ctx.beginPath();
-        ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
-        ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
-        ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
-        ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
-        ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
-        ctx.fill();
-        ctx.stroke();
+      if (data.getNumberOfColumns() > 4) {
+        this.colFilter = 4;
       }
     }
+    else {
+      throw 'Unknown style "' + this.style + '"';
+    }
   };
 
+  Graph3d.prototype.getNumberOfRows = function(data) {
+    return data.length;
+  }
 
-  /**
-   * Draw a line through all datapoints.
-   * This function can be used when the style is 'line'
-   */
-  Graph3d.prototype._redrawDataLine = function() {
-    var canvas = this.frame.canvas,
-      ctx = canvas.getContext('2d'),
-      point, i;
-
-    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-      return;  // TODO: throw exception?
-
-    // calculate the translations of all points
-    for (i = 0; i < this.dataPoints.length; i++) {
-      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
-      var screen = this._convertTranslationToScreen(trans);
 
-      this.dataPoints[i].trans = trans;
-      this.dataPoints[i].screen = screen;
+  Graph3d.prototype.getNumberOfColumns = function(data) {
+    var counter = 0;
+    for (var column in data[0]) {
+      if (data[0].hasOwnProperty(column)) {
+        counter++;
+      }
     }
+    return counter;
+  }
 
-    // start the line
-    if (this.dataPoints.length > 0) {
-      point = this.dataPoints[0];
 
-      ctx.lineWidth = 1;    // TODO: make customizable
-      ctx.strokeStyle = 'blue'; // TODO: make customizable
-      ctx.beginPath();
-      ctx.moveTo(point.screen.x, point.screen.y);
+  Graph3d.prototype.getDistinctValues = function(data, column) {
+    var distinctValues = [];
+    for (var i = 0; i < data.length; i++) {
+      if (distinctValues.indexOf(data[i][column]) == -1) {
+        distinctValues.push(data[i][column]);
+      }
     }
+    return distinctValues;
+  }
 
-    // draw the datapoints as colored circles
-    for (i = 1; i < this.dataPoints.length; i++) {
-      point = this.dataPoints[i];
-      ctx.lineTo(point.screen.x, point.screen.y);
-    }
 
-    // finish the line
-    if (this.dataPoints.length > 0) {
-      ctx.stroke();
+  Graph3d.prototype.getColumnRange = function(data,column) {
+    var minMax = {min:data[0][column],max:data[0][column]};
+    for (var i = 0; i < data.length; i++) {
+      if (minMax.min > data[i][column]) { minMax.min = data[i][column]; }
+      if (minMax.max < data[i][column]) { minMax.max = data[i][column]; }
     }
+    return minMax;
   };
 
   /**
-   * Start a moving operation inside the provided parent element
-   * @param {Event}     event     The event that occurred (required for
-   *                  retrieving the  mouse position)
+   * Initialize the data from the data table. Calculate minimum and maximum values
+   * and column index values
+   * @param {Array | DataSet | DataView} rawData   The data containing the items for the Graph.
+   * @param {Number}     style   Style Number
    */
-  Graph3d.prototype._onMouseDown = function(event) {
-    event = event || window.event;
+  Graph3d.prototype._dataInitialize = function (rawData, style) {
+    var me = this;
 
-    // check if mouse is still down (may be up when focus is lost for example
-    // in an iframe)
-    if (this.leftButtonDown) {
-      this._onMouseUp(event);
+    // unsubscribe from the dataTable
+    if (this.dataSet) {
+      this.dataSet.off('*', this._onChange);
     }
 
-    // only react on left mouse button down
-    this.leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
-    if (!this.leftButtonDown && !this.touchDown) return;
-
-    // get mouse position (different code for IE and all other browsers)
-    this.startMouseX = getMouseX(event);
-    this.startMouseY = getMouseY(event);
+    if (rawData === undefined)
+      return;
 
-    this.startStart = new Date(this.start);
-    this.startEnd = new Date(this.end);
-    this.startArmRotation = this.camera.getArmRotation();
+    if (Array.isArray(rawData)) {
+      rawData = new DataSet(rawData);
+    }
 
-    this.frame.style.cursor = 'move';
+    var data;
+    if (rawData instanceof DataSet || rawData instanceof DataView) {
+      data = rawData.get();
+    }
+    else {
+      throw new Error('Array, DataSet, or DataView expected');
+    }
 
-    // add event listeners to handle moving the contents
-    // we store the function onmousemove and onmouseup in the graph, so we can
-    // remove the eventlisteners lateron in the function mouseUp()
-    var me = this;
-    this.onmousemove = function (event) {me._onMouseMove(event);};
-    this.onmouseup   = function (event) {me._onMouseUp(event);};
-    G3DaddEventListener(document, 'mousemove', me.onmousemove);
-    G3DaddEventListener(document, 'mouseup', me.onmouseup);
-    G3DpreventDefault(event);
-  };
+    if (data.length == 0)
+      return;
 
+    this.dataSet = rawData;
+    this.dataTable = data;
 
-  /**
-   * Perform moving operating.
-   * This function activated from within the funcion Graph.mouseDown().
-   * @param {Event}   event  Well, eehh, the event
-   */
-  Graph3d.prototype._onMouseMove = function (event) {
-    event = event || window.event;
+    // subscribe to changes in the dataset
+    this._onChange = function () {
+      me.setData(me.dataSet);
+    };
+    this.dataSet.on('*', this._onChange);
 
-    // calculate change in mouse position
-    var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
-    var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
+    // _determineColumnIndexes
+    // getNumberOfRows (points)
+    // getNumberOfColumns (x,y,z,v,t,t1,t2...)
+    // getDistinctValues (unique values?)
+    // getColumnRange
 
-    var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
-    var verticalNew = this.startArmRotation.vertical + diffY / 200;
+    // determine the location of x,y,z,value,filter columns
+    this.colX = 'x';
+    this.colY = 'y';
+    this.colZ = 'z';
+    this.colValue = 'style';
+    this.colFilter = 'filter';
 
-    var snapAngle = 4; // degrees
-    var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
 
-    // snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
-    // the -0.001 is to take care that the vertical axis is always drawn at the left front corner
-    if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
-      horizontalNew = Math.round((horizontalNew / Math.PI)) * Math.PI - 0.001;
-    }
-    if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
-      horizontalNew = (Math.round((horizontalNew/ Math.PI - 0.5)) + 0.5) * Math.PI - 0.001;
-    }
 
-    // snap vertically to nice angles
-    if (Math.abs(Math.sin(verticalNew)) < snapValue) {
-      verticalNew = Math.round((verticalNew / Math.PI)) * Math.PI;
-    }
-    if (Math.abs(Math.cos(verticalNew)) < snapValue) {
-      verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
+    // check if a filter column is provided
+    if (data[0].hasOwnProperty('filter')) {
+      if (this.dataFilter === undefined) {
+        this.dataFilter = new Filter(rawData, this.colFilter, this);
+        this.dataFilter.setOnLoadCallback(function() {me.redraw();});
+      }
     }
 
-    this.camera.setArmRotation(horizontalNew, verticalNew);
-    this.redraw();
 
-    // fire a cameraPositionChange event
-    var parameters = this.getCameraPosition();
-    this.emit('cameraPositionChange', parameters);
+    var withBars = this.style == Graph3d.STYLE.BAR ||
+      this.style == Graph3d.STYLE.BARCOLOR ||
+      this.style == Graph3d.STYLE.BARSIZE;
 
-    G3DpreventDefault(event);
-  };
+    // determine barWidth from data
+    if (withBars) {
+      if (this.defaultXBarWidth !== undefined) {
+        this.xBarWidth = this.defaultXBarWidth;
+      }
+      else {
+        var dataX = this.getDistinctValues(data,this.colX);
+        this.xBarWidth = (dataX[1] - dataX[0]) || 1;
+      }
 
+      if (this.defaultYBarWidth !== undefined) {
+        this.yBarWidth = this.defaultYBarWidth;
+      }
+      else {
+        var dataY = this.getDistinctValues(data,this.colY);
+        this.yBarWidth = (dataY[1] - dataY[0]) || 1;
+      }
+    }
 
-  /**
-   * Stop moving operating.
-   * This function activated from within the funcion Graph.mouseDown().
-   * @param {event}  event   The event
-   */
-  Graph3d.prototype._onMouseUp = function (event) {
-    this.frame.style.cursor = 'auto';
-    this.leftButtonDown = false;
-
-    // remove event listeners here
-    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-    G3DremoveEventListener(document, 'mouseup',   this.onmouseup);
-    G3DpreventDefault(event);
-  };
-
-  /**
-   * After having moved the mouse, a tooltip should pop up when the mouse is resting on a data point
-   * @param {Event}  event   A mouse move event
-   */
-  Graph3d.prototype._onTooltip = function (event) {
-    var delay = 300; // ms
-    var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
-    var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
-
-    if (!this.showTooltip) {
-      return;
+    // calculate minimums and maximums
+    var xRange = this.getColumnRange(data,this.colX);
+    if (withBars) {
+      xRange.min -= this.xBarWidth / 2;
+      xRange.max += this.xBarWidth / 2;
     }
+    this.xMin = (this.defaultXMin !== undefined) ? this.defaultXMin : xRange.min;
+    this.xMax = (this.defaultXMax !== undefined) ? this.defaultXMax : xRange.max;
+    if (this.xMax <= this.xMin) this.xMax = this.xMin + 1;
+    this.xStep = (this.defaultXStep !== undefined) ? this.defaultXStep : (this.xMax-this.xMin)/5;
 
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
+    var yRange = this.getColumnRange(data,this.colY);
+    if (withBars) {
+      yRange.min -= this.yBarWidth / 2;
+      yRange.max += this.yBarWidth / 2;
     }
+    this.yMin = (this.defaultYMin !== undefined) ? this.defaultYMin : yRange.min;
+    this.yMax = (this.defaultYMax !== undefined) ? this.defaultYMax : yRange.max;
+    if (this.yMax <= this.yMin) this.yMax = this.yMin + 1;
+    this.yStep = (this.defaultYStep !== undefined) ? this.defaultYStep : (this.yMax-this.yMin)/5;
 
-    // (delayed) display of a tooltip only if no mouse button is down
-    if (this.leftButtonDown) {
-      this._hideTooltip();
-      return;
-    }
+    var zRange = this.getColumnRange(data,this.colZ);
+    this.zMin = (this.defaultZMin !== undefined) ? this.defaultZMin : zRange.min;
+    this.zMax = (this.defaultZMax !== undefined) ? this.defaultZMax : zRange.max;
+    if (this.zMax <= this.zMin) this.zMax = this.zMin + 1;
+    this.zStep = (this.defaultZStep !== undefined) ? this.defaultZStep : (this.zMax-this.zMin)/5;
 
-    if (this.tooltip && this.tooltip.dataPoint) {
-      // tooltip is currently visible
-      var dataPoint = this._dataPointFromXY(mouseX, mouseY);
-      if (dataPoint !== this.tooltip.dataPoint) {
-        // datapoint changed
-        if (dataPoint) {
-          this._showTooltip(dataPoint);
-        }
-        else {
-          this._hideTooltip();
-        }
-      }
+    if (this.colValue !== undefined) {
+      var valueRange = this.getColumnRange(data,this.colValue);
+      this.valueMin = (this.defaultValueMin !== undefined) ? this.defaultValueMin : valueRange.min;
+      this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max;
+      if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1;
     }
-    else {
-      // tooltip is currently not visible
-      var me = this;
-      this.tooltipTimeout = setTimeout(function () {
-        me.tooltipTimeout = null;
 
-        // show a tooltip if we have a data point
-        var dataPoint = me._dataPointFromXY(mouseX, mouseY);
-        if (dataPoint) {
-          me._showTooltip(dataPoint);
-        }
-      }, delay);
-    }
+    // set the scale dependent on the ranges.
+    this._setScale();
   };
 
-  /**
-   * Event handler for touchstart event on mobile devices
-   */
-  Graph3d.prototype._onTouchStart = function(event) {
-    this.touchDown = true;
-
-    var me = this;
-    this.ontouchmove = function (event) {me._onTouchMove(event);};
-    this.ontouchend  = function (event) {me._onTouchEnd(event);};
-    G3DaddEventListener(document, 'touchmove', me.ontouchmove);
-    G3DaddEventListener(document, 'touchend', me.ontouchend);
-
-    this._onMouseDown(event);
-  };
 
-  /**
-   * Event handler for touchmove event on mobile devices
-   */
-  Graph3d.prototype._onTouchMove = function(event) {
-    this._onMouseMove(event);
-  };
 
   /**
-   * Event handler for touchend event on mobile devices
+   * Filter the data based on the current filter
+   * @param {Array} data
+   * @return {Array} dataPoints   Array with point objects which can be drawn on screen
    */
-  Graph3d.prototype._onTouchEnd = function(event) {
-    this.touchDown = false;
-
-    G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
-    G3DremoveEventListener(document, 'touchend',   this.ontouchend);
-
-    this._onMouseUp(event);
-  };
-
+  Graph3d.prototype._getDataPoints = function (data) {
+    // TODO: store the created matrix dataPoints in the filters instead of reloading each time
+    var x, y, i, z, obj, point;
 
-  /**
-   * Event handler for mouse wheel event, used to zoom the graph
-   * Code from http://adomas.org/javascript-mouse-wheel/
-   * @param {event}  event   The event
-   */
-  Graph3d.prototype._onWheel = function(event) {
-    if (!event) /* For IE. */
-      event = window.event;
+    var dataPoints = [];
 
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta/120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail/3;
-    }
+    if (this.style === Graph3d.STYLE.GRID ||
+      this.style === Graph3d.STYLE.SURFACE) {
+      // copy all values from the google data table to a matrix
+      // the provided values are supposed to form a grid of (x,y) positions
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-      var oldLength = this.camera.getArmLength();
-      var newLength = oldLength * (1 - delta / 10);
+      // create two lists with all present x and y values
+      var dataX = [];
+      var dataY = [];
+      for (i = 0; i < this.getNumberOfRows(data); i++) {
+        x = data[i][this.colX] || 0;
+        y = data[i][this.colY] || 0;
 
-      this.camera.setArmLength(newLength);
-      this.redraw();
+        if (dataX.indexOf(x) === -1) {
+          dataX.push(x);
+        }
+        if (dataY.indexOf(y) === -1) {
+          dataY.push(y);
+        }
+      }
 
-      this._hideTooltip();
-    }
+      function sortNumber(a, b) {
+        return a - b;
+      }
+      dataX.sort(sortNumber);
+      dataY.sort(sortNumber);
 
-    // fire a cameraPositionChange event
-    var parameters = this.getCameraPosition();
-    this.emit('cameraPositionChange', parameters);
+      // create a grid, a 2d matrix, with all values.
+      var dataMatrix = [];   // temporary data matrix
+      for (i = 0; i < data.length; i++) {
+        x = data[i][this.colX] || 0;
+        y = data[i][this.colY] || 0;
+        z = data[i][this.colZ] || 0;
 
-    // Prevent default actions caused by mouse wheel.
-    // That might be ugly, but we handle scrolls somehow
-    // anyway, so don't bother here..
-    G3DpreventDefault(event);
-  };
+        var xIndex = dataX.indexOf(x);  // TODO: implement Array().indexOf() for Internet Explorer
+        var yIndex = dataY.indexOf(y);
 
-  /**
-   * Test whether a point lies inside given 2D triangle
-   * @param {Point2d} point
-   * @param {Point2d[]} triangle
-   * @return {boolean} Returns true if given point lies inside or on the edge of the triangle
-   * @private
-   */
-  Graph3d.prototype._insideTriangle = function (point, triangle) {
-    var a = triangle[0],
-      b = triangle[1],
-      c = triangle[2];
+        if (dataMatrix[xIndex] === undefined) {
+          dataMatrix[xIndex] = [];
+        }
 
-    function sign (x) {
-      return x > 0 ? 1 : x < 0 ? -1 : 0;
-    }
+        var point3d = new Point3d();
+        point3d.x = x;
+        point3d.y = y;
+        point3d.z = z;
 
-    var as = sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
-    var bs = sign((c.x - b.x) * (point.y - b.y) - (c.y - b.y) * (point.x - b.x));
-    var cs = sign((a.x - c.x) * (point.y - c.y) - (a.y - c.y) * (point.x - c.x));
+        obj = {};
+        obj.point = point3d;
+        obj.trans = undefined;
+        obj.screen = undefined;
+        obj.bottom = new Point3d(x, y, this.zMin);
 
-    // each of the three signs must be either equal to each other or zero
-    return (as == 0 || bs == 0 || as == bs) &&
-      (bs == 0 || cs == 0 || bs == cs) &&
-      (as == 0 || cs == 0 || as == cs);
-  };
+        dataMatrix[xIndex][yIndex] = obj;
 
-  /**
-   * Find a data point close to given screen position (x, y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Object | null} The closest data point or null if not close to any data point
-   * @private
-   */
-  Graph3d.prototype._dataPointFromXY = function (x, y) {
-    var i,
-      distMax = 100, // px
-      dataPoint = null,
-      closestDataPoint = null,
-      closestDist = null,
-      center = new Point2d(x, y);
+        dataPoints.push(obj);
+      }
 
-    if (this.style === Graph3d.STYLE.BAR ||
-      this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      // the data points are ordered from far away to closest
-      for (i = this.dataPoints.length - 1; i >= 0; i--) {
-        dataPoint = this.dataPoints[i];
-        var surfaces  = dataPoint.surfaces;
-        if (surfaces) {
-          for (var s = surfaces.length - 1; s >= 0; s--) {
-            // split each surface in two triangles, and see if the center point is inside one of these
-            var surface = surfaces[s];
-            var corners = surface.corners;
-            var triangle1 = [corners[0].screen, corners[1].screen, corners[2].screen];
-            var triangle2 = [corners[2].screen, corners[3].screen, corners[0].screen];
-            if (this._insideTriangle(center, triangle1) ||
-              this._insideTriangle(center, triangle2)) {
-              // return immediately at the first hit
-              return dataPoint;
-            }
+      // fill in the pointers to the neighbors.
+      for (x = 0; x < dataMatrix.length; x++) {
+        for (y = 0; y < dataMatrix[x].length; y++) {
+          if (dataMatrix[x][y]) {
+            dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
+            dataMatrix[x][y].pointTop   = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
+            dataMatrix[x][y].pointCross =
+              (x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
+                dataMatrix[x+1][y+1] :
+                undefined;
           }
         }
       }
     }
-    else {
-      // find the closest data point, using distance to the center of the point on 2d screen
-      for (i = 0; i < this.dataPoints.length; i++) {
-        dataPoint = this.dataPoints[i];
-        var point = dataPoint.screen;
-        if (point) {
-          var distX = Math.abs(x - point.x);
-          var distY = Math.abs(y - point.y);
-          var dist  = Math.sqrt(distX * distX + distY * distY);
+    else {  // 'dot', 'dot-line', etc.
+      // copy all values from the google data table to a list with Point3d objects
+      for (i = 0; i < data.length; i++) {
+        point = new Point3d();
+        point.x = data[i][this.colX] || 0;
+        point.y = data[i][this.colY] || 0;
+        point.z = data[i][this.colZ] || 0;
 
-          if ((closestDist === null || dist < closestDist) && dist < distMax) {
-            closestDist = dist;
-            closestDataPoint = dataPoint;
-          }
+        if (this.colValue !== undefined) {
+          point.value = data[i][this.colValue] || 0;
         }
+
+        obj = {};
+        obj.point = point;
+        obj.bottom = new Point3d(point.x, point.y, this.zMin);
+        obj.trans = undefined;
+        obj.screen = undefined;
+
+        dataPoints.push(obj);
       }
     }
 
-
-    return closestDataPoint;
+    return dataPoints;
   };
 
   /**
-   * Display a tooltip for given data point
-   * @param {Object} dataPoint
-   * @private
+   * Create the main frame for the Graph3d.
+   * This function is executed once when a Graph3d object is created. The frame
+   * contains a canvas, and this canvas contains all objects like the axis and
+   * nodes.
    */
-  Graph3d.prototype._showTooltip = function (dataPoint) {
-    var content, line, dot;
-
-    if (!this.tooltip) {
-      content = document.createElement('div');
-      content.style.position = 'absolute';
-      content.style.padding = '10px';
-      content.style.border = '1px solid #4d4d4d';
-      content.style.color = '#1a1a1a';
-      content.style.background = 'rgba(255,255,255,0.7)';
-      content.style.borderRadius = '2px';
-      content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
-
-      line = document.createElement('div');
-      line.style.position = 'absolute';
-      line.style.height = '40px';
-      line.style.width = '0';
-      line.style.borderLeft = '1px solid #4d4d4d';
-
-      dot = document.createElement('div');
-      dot.style.position = 'absolute';
-      dot.style.height = '0';
-      dot.style.width = '0';
-      dot.style.border = '5px solid #4d4d4d';
-      dot.style.borderRadius = '5px';
-
-      this.tooltip = {
-        dataPoint: null,
-        dom: {
-          content: content,
-          line: line,
-          dot: dot
-        }
-      };
-    }
-    else {
-      content = this.tooltip.dom.content;
-      line  = this.tooltip.dom.line;
-      dot   = this.tooltip.dom.dot;
+  Graph3d.prototype.create = function () {
+    // remove all elements from the container element.
+    while (this.containerElement.hasChildNodes()) {
+      this.containerElement.removeChild(this.containerElement.firstChild);
     }
 
-    this._hideTooltip();
+    this.frame = document.createElement('div');
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
-    this.tooltip.dataPoint = dataPoint;
-    if (typeof this.showTooltip === 'function') {
-      content.innerHTML = this.showTooltip(dataPoint.point);
-    }
-    else {
-      content.innerHTML = '<table>' +
-        '<tr><td>x:</td><td>' + dataPoint.point.x + '</td></tr>' +
-        '<tr><td>y:</td><td>' + dataPoint.point.y + '</td></tr>' +
-        '<tr><td>z:</td><td>' + dataPoint.point.z + '</td></tr>' +
-        '</table>';
+    // create the graph canvas (HTML canvas element)
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
+    this.frame.appendChild(this.frame.canvas);
+    //if (!this.frame.canvas.getContext) {
+    {
+      var noCanvas = document.createElement( 'DIV' );
+      noCanvas.style.color = 'red';
+      noCanvas.style.fontWeight =  'bold' ;
+      noCanvas.style.padding =  '10px';
+      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
+      this.frame.canvas.appendChild(noCanvas);
     }
 
-    content.style.left  = '0';
-    content.style.top   = '0';
-    this.frame.appendChild(content);
-    this.frame.appendChild(line);
-    this.frame.appendChild(dot);
-
-    // calculate sizes
-    var contentWidth  = content.offsetWidth;
-    var contentHeight   = content.offsetHeight;
-    var lineHeight    = line.offsetHeight;
-    var dotWidth    = dot.offsetWidth;
-    var dotHeight     = dot.offsetHeight;
-
-    var left = dataPoint.screen.x - contentWidth / 2;
-    left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
+    this.frame.filter = document.createElement( 'div' );
+    this.frame.filter.style.position = 'absolute';
+    this.frame.filter.style.bottom = '0px';
+    this.frame.filter.style.left = '0px';
+    this.frame.filter.style.width = '100%';
+    this.frame.appendChild(this.frame.filter);
 
-    line.style.left   = dataPoint.screen.x + 'px';
-    line.style.top    = (dataPoint.screen.y - lineHeight) + 'px';
-    content.style.left  = left + 'px';
-    content.style.top   = (dataPoint.screen.y - lineHeight - contentHeight) + 'px';
-    dot.style.left    = (dataPoint.screen.x - dotWidth / 2) + 'px';
-    dot.style.top     = (dataPoint.screen.y - dotHeight / 2) + 'px';
-  };
+    // add event listeners to handle moving and zooming the contents
+    var me = this;
+    var onmousedown = function (event) {me._onMouseDown(event);};
+    var ontouchstart = function (event) {me._onTouchStart(event);};
+    var onmousewheel = function (event) {me._onWheel(event);};
+    var ontooltip = function (event) {me._onTooltip(event);};
+    // TODO: these events are never cleaned up... can give a 'memory leakage'
 
-  /**
-   * Hide the tooltip when displayed
-   * @private
-   */
-  Graph3d.prototype._hideTooltip = function () {
-    if (this.tooltip) {
-      this.tooltip.dataPoint = null;
+    G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
+    G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
+    G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
+    G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
+    G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
 
-      for (var prop in this.tooltip.dom) {
-        if (this.tooltip.dom.hasOwnProperty(prop)) {
-          var elem = this.tooltip.dom[prop];
-          if (elem && elem.parentNode) {
-            elem.parentNode.removeChild(elem);
-          }
-        }
-      }
-    }
+    // add the new graph to the container element
+    this.containerElement.appendChild(this.frame);
   };
 
 
   /**
-   * Add and event listener. Works for all browsers
-   * @param {Element}   element  An html element
-   * @param {string}    action   The action, for example 'click',
-   *                 without the prefix 'on'
-   * @param {function}  listener   The callback function to be executed
-   * @param {boolean}   useCapture
+   * Set a new size for the graph
+   * @param {string} width   Width in pixels or percentage (for example '800px'
+   *             or '50%')
+   * @param {string} height  Height in pixels or percentage  (for example '400px'
+   *             or '30%')
    */
-  G3DaddEventListener = function(element, action, listener, useCapture) {
-    if (element.addEventListener) {
-      if (useCapture === undefined)
-        useCapture = false;
-
-      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
-        action = 'DOMMouseScroll';  // For Firefox
-      }
+  Graph3d.prototype.setSize = function(width, height) {
+    this.frame.style.width = width;
+    this.frame.style.height = height;
 
-      element.addEventListener(action, listener, useCapture);
-    } else {
-      element.attachEvent('on' + action, listener);  // IE browsers
-    }
+    this._resizeCanvas();
   };
 
   /**
-   * Remove an event listener from an element
-   * @param {Element}    element   An html dom element
-   * @param {string}     action  The name of the event, for example 'mousedown'
-   * @param {function}   listener  The listener function
-   * @param {boolean}    useCapture
+   * Resize the canvas to the current size of the frame
    */
-  G3DremoveEventListener = function(element, action, listener, useCapture) {
-    if (element.removeEventListener) {
-      // non-IE browsers
-      if (useCapture === undefined)
-        useCapture = false;
+  Graph3d.prototype._resizeCanvas = function() {
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
-      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
-        action = 'DOMMouseScroll';  // For Firefox
-      }
+    this.frame.canvas.width = this.frame.canvas.clientWidth;
+    this.frame.canvas.height = this.frame.canvas.clientHeight;
 
-      element.removeEventListener(action, listener, useCapture);
-    } else {
-      // IE browsers
-      element.detachEvent('on' + action, listener);
-    }
+    // adjust with for margin
+    this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px';
   };
 
   /**
-   * Stop event propagation
+   * Start animation
    */
-  G3DstopPropagation = function(event) {
-    if (!event)
-      event = window.event;
+  Graph3d.prototype.animationStart = function() {
+    if (!this.frame.filter || !this.frame.filter.slider)
+      throw 'No animation available';
 
-    if (event.stopPropagation) {
-      event.stopPropagation();  // non-IE browsers
-    }
-    else {
-      event.cancelBubble = true;  // IE browsers
-    }
+    this.frame.filter.slider.play();
   };
 
 
   /**
-   * Cancels the event if it is cancelable, without stopping further propagation of the event.
+   * Stop animation
    */
-  G3DpreventDefault = function (event) {
-    if (!event)
-      event = window.event;
+  Graph3d.prototype.animationStop = function() {
+    if (!this.frame.filter || !this.frame.filter.slider) return;
 
-    if (event.preventDefault) {
-      event.preventDefault();  // non-IE browsers
-    }
-    else {
-      event.returnValue = false;  // IE browsers
-    }
+    this.frame.filter.slider.stop();
   };
 
+
   /**
-   * @constructor Slider
-   *
-   * An html slider control with start/stop/prev/next buttons
-   * @param {Element} container  The element where the slider will be created
-   * @param {Object} options   Available options:
-   *                 {boolean} visible   If true (default) the
-   *                           slider is visible.
+   * Resize the center position based on the current values in this.defaultXCenter
+   * and this.defaultYCenter (which are strings with a percentage or a value
+   * in pixels). The center positions are the variables this.xCenter
+   * and this.yCenter
    */
-  function Slider(container, options) {
-    if (container === undefined) {
-      throw 'Error: No container element defined';
+  Graph3d.prototype._resizeCenter = function() {
+    // calculate the horizontal center position
+    if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') {
+      this.xcenter =
+        parseFloat(this.defaultXCenter) / 100 *
+          this.frame.canvas.clientWidth;
     }
-    this.container = container;
-    this.visible = (options && options.visible != undefined) ? options.visible : true;
-
-    if (this.visible) {
-      this.frame = document.createElement('DIV');
-      //this.frame.style.backgroundColor = '#E5E5E5';
-      this.frame.style.width = '100%';
-      this.frame.style.position = 'relative';
-      this.container.appendChild(this.frame);
-
-      this.frame.prev = document.createElement('INPUT');
-      this.frame.prev.type = 'BUTTON';
-      this.frame.prev.value = 'Prev';
-      this.frame.appendChild(this.frame.prev);
-
-      this.frame.play = document.createElement('INPUT');
-      this.frame.play.type = 'BUTTON';
-      this.frame.play.value = 'Play';
-      this.frame.appendChild(this.frame.play);
-
-      this.frame.next = document.createElement('INPUT');
-      this.frame.next.type = 'BUTTON';
-      this.frame.next.value = 'Next';
-      this.frame.appendChild(this.frame.next);
-
-      this.frame.bar = document.createElement('INPUT');
-      this.frame.bar.type = 'BUTTON';
-      this.frame.bar.style.position = 'absolute';
-      this.frame.bar.style.border = '1px solid red';
-      this.frame.bar.style.width = '100px';
-      this.frame.bar.style.height = '6px';
-      this.frame.bar.style.borderRadius = '2px';
-      this.frame.bar.style.MozBorderRadius = '2px';
-      this.frame.bar.style.border = '1px solid #7F7F7F';
-      this.frame.bar.style.backgroundColor = '#E5E5E5';
-      this.frame.appendChild(this.frame.bar);
-
-      this.frame.slide = document.createElement('INPUT');
-      this.frame.slide.type = 'BUTTON';
-      this.frame.slide.style.margin = '0px';
-      this.frame.slide.value = ' ';
-      this.frame.slide.style.position = 'relative';
-      this.frame.slide.style.left = '-100px';
-      this.frame.appendChild(this.frame.slide);
-
-      // create events
-      var me = this;
-      this.frame.slide.onmousedown = function (event) {me._onMouseDown(event);};
-      this.frame.prev.onclick = function (event) {me.prev(event);};
-      this.frame.play.onclick = function (event) {me.togglePlay(event);};
-      this.frame.next.onclick = function (event) {me.next(event);};
+    else {
+      this.xcenter = parseFloat(this.defaultXCenter); // supposed to be in px
     }
 
-    this.onChangeCallback = undefined;
-
-    this.values = [];
-    this.index = undefined;
-
-    this.playTimeout = undefined;
-    this.playInterval = 1000; // milliseconds
-    this.playLoop = true;
-  }
-
-  /**
-   * Select the previous index
-   */
-  Slider.prototype.prev = function() {
-    var index = this.getIndex();
-    if (index > 0) {
-      index--;
-      this.setIndex(index);
+    // calculate the vertical center position
+    if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') {
+      this.ycenter =
+        parseFloat(this.defaultYCenter) / 100 *
+          (this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
     }
-  };
-
-  /**
-   * Select the next index
-   */
-  Slider.prototype.next = function() {
-    var index = this.getIndex();
-    if (index < this.values.length - 1) {
-      index++;
-      this.setIndex(index);
+    else {
+      this.ycenter = parseFloat(this.defaultYCenter); // supposed to be in px
     }
   };
 
   /**
-   * Select the next index
+   * Set the rotation and distance of the camera
+   * @param {Object} pos   An object with the camera position. The object
+   *             contains three parameters:
+   *             - horizontal {Number}
+   *             The horizontal rotation, between 0 and 2*PI.
+   *             Optional, can be left undefined.
+   *             - vertical {Number}
+   *             The vertical rotation, between 0 and 0.5*PI
+   *             if vertical=0.5*PI, the graph is shown from the
+   *             top. Optional, can be left undefined.
+   *             - distance {Number}
+   *             The (normalized) distance of the camera to the
+   *             center of the graph, a value between 0.71 and 5.0.
+   *             Optional, can be left undefined.
    */
-  Slider.prototype.playNext = function() {
-    var start = new Date();
-
-    var index = this.getIndex();
-    if (index < this.values.length - 1) {
-      index++;
-      this.setIndex(index);
-    }
-    else if (this.playLoop) {
-      // jump to the start
-      index = 0;
-      this.setIndex(index);
+  Graph3d.prototype.setCameraPosition = function(pos) {
+    if (pos === undefined) {
+      return;
     }
 
-    var end = new Date();
-    var diff = (end - start);
+    if (pos.horizontal !== undefined && pos.vertical !== undefined) {
+      this.camera.setArmRotation(pos.horizontal, pos.vertical);
+    }
 
-    // calculate how much time it to to set the index and to execute the callback
-    // function.
-    var interval = Math.max(this.playInterval - diff, 0);
-    // document.title = diff // TODO: cleanup
+    if (pos.distance !== undefined) {
+      this.camera.setArmLength(pos.distance);
+    }
 
-    var me = this;
-    this.playTimeout = setTimeout(function() {me.playNext();}, interval);
+    this.redraw();
   };
 
+
   /**
-   * Toggle start or stop playing
+   * Retrieve the current camera rotation
+   * @return {object}   An object with parameters horizontal, vertical, and
+   *          distance
    */
-  Slider.prototype.togglePlay = function() {
-    if (this.playTimeout === undefined) {
-      this.play();
-    } else {
-      this.stop();
-    }
+  Graph3d.prototype.getCameraPosition = function() {
+    var pos = this.camera.getArmRotation();
+    pos.distance = this.camera.getArmLength();
+    return pos;
   };
 
   /**
-   * Start playing
+   * Load data into the 3D Graph
    */
-  Slider.prototype.play = function() {
-    // Test whether already playing
-    if (this.playTimeout) return;
+  Graph3d.prototype._readData = function(data) {
+    // read the data
+    this._dataInitialize(data, this.style);
 
-    this.playNext();
 
-    if (this.frame) {
-      this.frame.play.value = 'Stop';
+    if (this.dataFilter) {
+      // apply filtering
+      this.dataPoints = this.dataFilter._getDataPoints();
+    }
+    else {
+      // no filtering. load all data
+      this.dataPoints = this._getDataPoints(this.dataTable);
     }
+
+    // draw the filter
+    this._redrawFilter();
   };
 
   /**
-   * Stop playing
+   * Replace the dataset of the Graph3d
+   * @param {Array | DataSet | DataView} data
    */
-  Slider.prototype.stop = function() {
-    clearInterval(this.playTimeout);
-    this.playTimeout = undefined;
+  Graph3d.prototype.setData = function (data) {
+    this._readData(data);
+    this.redraw();
 
-    if (this.frame) {
-      this.frame.play.value = 'Play';
+    // start animation when option is true
+    if (this.animationAutoStart && this.dataFilter) {
+      this.animationStart();
     }
   };
 
   /**
-   * Set a callback function which will be triggered when the value of the
-   * slider bar has changed.
+   * Update the options. Options will be merged with current options
+   * @param {Object} options
    */
-  Slider.prototype.setOnChangeCallback = function(callback) {
-    this.onChangeCallback = callback;
-  };
+  Graph3d.prototype.setOptions = function (options) {
+    var cameraPosition = undefined;
 
-  /**
-   * Set the interval for playing the list
-   * @param {Number} interval   The interval in milliseconds
-   */
-  Slider.prototype.setPlayInterval = function(interval) {
-    this.playInterval = interval;
-  };
+    this.animationStop();
 
-  /**
-   * Retrieve the current play interval
-   * @return {Number} interval   The interval in milliseconds
-   */
-  Slider.prototype.getPlayInterval = function(interval) {
-    return this.playInterval;
-  };
+    if (options !== undefined) {
+      // retrieve parameter values
+      if (options.width !== undefined)       this.width = options.width;
+      if (options.height !== undefined)      this.height = options.height;
 
-  /**
-   * Set looping on or off
-   * @pararm {boolean} doLoop  If true, the slider will jump to the start when
-   *               the end is passed, and will jump to the end
-   *               when the start is passed.
-   */
-  Slider.prototype.setPlayLoop = function(doLoop) {
-    this.playLoop = doLoop;
-  };
+      if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
+      if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
 
+      if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
+      if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
+      if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
+      if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
+      if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
 
-  /**
-   * Execute the onchange callback function
-   */
-  Slider.prototype.onChange = function() {
-    if (this.onChangeCallback !== undefined) {
-      this.onChangeCallback();
-    }
-  };
+      if (options.style !== undefined) {
+        var styleNumber = this._getStyleNumber(options.style);
+        if (styleNumber !== -1) {
+          this.style = styleNumber;
+        }
+      }
+      if (options.showGrid !== undefined)      this.showGrid = options.showGrid;
+      if (options.showPerspective !== undefined)   this.showPerspective = options.showPerspective;
+      if (options.showShadow !== undefined)    this.showShadow = options.showShadow;
+      if (options.tooltip !== undefined)       this.showTooltip = options.tooltip;
+      if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
+      if (options.keepAspectRatio !== undefined)   this.keepAspectRatio = options.keepAspectRatio;
+      if (options.verticalRatio !== undefined)   this.verticalRatio = options.verticalRatio;
 
-  /**
-   * redraw the slider on the correct place
-   */
-  Slider.prototype.redraw = function() {
-    if (this.frame) {
-      // resize the bar
-      this.frame.bar.style.top = (this.frame.clientHeight/2 -
-        this.frame.bar.offsetHeight/2) + 'px';
-      this.frame.bar.style.width = (this.frame.clientWidth -
-        this.frame.prev.clientWidth -
-        this.frame.play.clientWidth -
-        this.frame.next.clientWidth - 30)  + 'px';
+      if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
+      if (options.animationPreload !== undefined)  this.animationPreload = options.animationPreload;
+      if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
 
-      // position the slider button
-      var left = this.indexToLeft(this.index);
-      this.frame.slide.style.left = (left) + 'px';
+      if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
+      if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
+
+      if (options.xMin !== undefined) this.defaultXMin = options.xMin;
+      if (options.xStep !== undefined) this.defaultXStep = options.xStep;
+      if (options.xMax !== undefined) this.defaultXMax = options.xMax;
+      if (options.yMin !== undefined) this.defaultYMin = options.yMin;
+      if (options.yStep !== undefined) this.defaultYStep = options.yStep;
+      if (options.yMax !== undefined) this.defaultYMax = options.yMax;
+      if (options.zMin !== undefined) this.defaultZMin = options.zMin;
+      if (options.zStep !== undefined) this.defaultZStep = options.zStep;
+      if (options.zMax !== undefined) this.defaultZMax = options.zMax;
+      if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
+      if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
+
+      if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
+
+      if (cameraPosition !== undefined) {
+        this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
+        this.camera.setArmLength(cameraPosition.distance);
+      }
+      else {
+        this.camera.setArmRotation(1.0, 0.5);
+        this.camera.setArmLength(1.7);
+      }
     }
-  };
 
+    this._setBackgroundColor(options && options.backgroundColor);
 
-  /**
-   * Set the list with values for the slider
-   * @param {Array} values   A javascript array with values (any type)
-   */
-  Slider.prototype.setValues = function(values) {
-    this.values = values;
+    this.setSize(this.width, this.height);
 
-    if (this.values.length > 0)
-      this.setIndex(0);
-    else
-      this.index = undefined;
+    // re-load the data
+    if (this.dataTable) {
+      this.setData(this.dataTable);
+    }
+
+    // start animation when option is true
+    if (this.animationAutoStart && this.dataFilter) {
+      this.animationStart();
+    }
   };
 
   /**
-   * Select a value by its index
-   * @param {Number} index
+   * Redraw the Graph.
    */
-  Slider.prototype.setIndex = function(index) {
-    if (index < this.values.length) {
-      this.index = index;
+  Graph3d.prototype.redraw = function() {
+    if (this.dataPoints === undefined) {
+      throw 'Error: graph data not initialized';
+    }
 
-      this.redraw();
-      this.onChange();
+    this._resizeCanvas();
+    this._resizeCenter();
+    this._redrawSlider();
+    this._redrawClear();
+    this._redrawAxis();
+
+    if (this.style === Graph3d.STYLE.GRID ||
+      this.style === Graph3d.STYLE.SURFACE) {
+      this._redrawDataGrid();
+    }
+    else if (this.style === Graph3d.STYLE.LINE) {
+      this._redrawDataLine();
+    }
+    else if (this.style === Graph3d.STYLE.BAR ||
+      this.style === Graph3d.STYLE.BARCOLOR ||
+      this.style === Graph3d.STYLE.BARSIZE) {
+      this._redrawDataBar();
     }
     else {
-      throw 'Error: index out of range';
+      // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
+      this._redrawDataDot();
     }
+
+    this._redrawInfo();
+    this._redrawLegend();
   };
 
   /**
-   * retrieve the index of the currently selected vaue
-   * @return {Number} index
+   * Clear the canvas before redrawing
    */
-  Slider.prototype.getIndex = function() {
-    return this.index;
+  Graph3d.prototype._redrawClear = function() {
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
   };
 
 
   /**
-   * retrieve the currently selected value
-   * @return {*} value
+   * Redraw the legend showing the colors
    */
-  Slider.prototype.get = function() {
-    return this.values[this.index];
-  };
-
-
-  Slider.prototype._onMouseDown = function(event) {
-    // only react on left mouse button down
-    var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
-    if (!leftButtonDown) return;
-
-    this.startClientX = event.clientX;
-    this.startSlideX = parseFloat(this.frame.slide.style.left);
+  Graph3d.prototype._redrawLegend = function() {
+    var y;
 
-    this.frame.style.cursor = 'move';
+    if (this.style === Graph3d.STYLE.DOTCOLOR ||
+      this.style === Graph3d.STYLE.DOTSIZE) {
 
-    // add event listeners to handle moving the contents
-    // we store the function onmousemove and onmouseup in the graph, so we can
-    // remove the eventlisteners lateron in the function mouseUp()
-    var me = this;
-    this.onmousemove = function (event) {me._onMouseMove(event);};
-    this.onmouseup   = function (event) {me._onMouseUp(event);};
-    G3DaddEventListener(document, 'mousemove', this.onmousemove);
-    G3DaddEventListener(document, 'mouseup',   this.onmouseup);
-    G3DpreventDefault(event);
-  };
+      var dotSize = this.frame.clientWidth * 0.02;
 
+      var widthMin, widthMax;
+      if (this.style === Graph3d.STYLE.DOTSIZE) {
+        widthMin = dotSize / 2; // px
+        widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
+      }
+      else {
+        widthMin = 20; // px
+        widthMax = 20; // px
+      }
 
-  Slider.prototype.leftToIndex = function (left) {
-    var width = parseFloat(this.frame.bar.style.width) -
-      this.frame.slide.clientWidth - 10;
-    var x = left - 3;
+      var height = Math.max(this.frame.clientHeight * 0.25, 100);
+      var top = this.margin;
+      var right = this.frame.clientWidth - this.margin;
+      var left = right - widthMax;
+      var bottom = top + height;
+    }
 
-    var index = Math.round(x / width * (this.values.length-1));
-    if (index < 0) index = 0;
-    if (index > this.values.length-1) index = this.values.length-1;
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = 1;
+    ctx.font = '14px arial'; // TODO: put in options
 
-    return index;
-  };
+    if (this.style === Graph3d.STYLE.DOTCOLOR) {
+      // draw the color bar
+      var ymin = 0;
+      var ymax = height; // Todo: make height customizable
+      for (y = ymin; y < ymax; y++) {
+        var f = (y - ymin) / (ymax - ymin);
 
-  Slider.prototype.indexToLeft = function (index) {
-    var width = parseFloat(this.frame.bar.style.width) -
-      this.frame.slide.clientWidth - 10;
+        //var width = (dotSize / 2 + (1-f) * dotSize * 2); // Todo: put this in one function
+        var hue = f * 240;
+        var color = this._hsv2rgb(hue, 1, 1);
 
-    var x = index / (this.values.length-1) * width;
-    var left = x + 3;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(left, top + y);
+        ctx.lineTo(right, top + y);
+        ctx.stroke();
+      }
 
-    return left;
-  };
+      ctx.strokeStyle =  this.colorAxis;
+      ctx.strokeRect(left, top, widthMax, height);
+    }
 
+    if (this.style === Graph3d.STYLE.DOTSIZE) {
+      // draw border around color bar
+      ctx.strokeStyle =  this.colorAxis;
+      ctx.fillStyle =  this.colorDot;
+      ctx.beginPath();
+      ctx.moveTo(left, top);
+      ctx.lineTo(right, top);
+      ctx.lineTo(right - widthMax + widthMin, bottom);
+      ctx.lineTo(left, bottom);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+    }
 
+    if (this.style === Graph3d.STYLE.DOTCOLOR ||
+      this.style === Graph3d.STYLE.DOTSIZE) {
+      // print values along the color bar
+      var gridLineLen = 5; // px
+      var step = new StepNumber(this.valueMin, this.valueMax, (this.valueMax-this.valueMin)/5, true);
+      step.start();
+      if (step.getCurrent() < this.valueMin) {
+        step.next();
+      }
+      while (!step.end()) {
+        y = bottom - (step.getCurrent() - this.valueMin) / (this.valueMax - this.valueMin) * height;
 
-  Slider.prototype._onMouseMove = function (event) {
-    var diff = event.clientX - this.startClientX;
-    var x = this.startSlideX + diff;
+        ctx.beginPath();
+        ctx.moveTo(left - gridLineLen, y);
+        ctx.lineTo(left, y);
+        ctx.stroke();
 
-    var index = this.leftToIndex(x);
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = this.colorAxis;
+        ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
 
-    this.setIndex(index);
+        step.next();
+      }
 
-    G3DpreventDefault();
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'top';
+      var label = this.legendLabel;
+      ctx.fillText(label, right, bottom + this.margin);
+    }
   };
 
+  /**
+   * Redraw the filter
+   */
+  Graph3d.prototype._redrawFilter = function() {
+    this.frame.filter.innerHTML = '';
 
-  Slider.prototype._onMouseUp = function (event) {
-    this.frame.style.cursor = 'auto';
-
-    // remove event listeners
-    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-    G3DremoveEventListener(document, 'mouseup', this.onmouseup);
-
-    G3DpreventDefault();
-  };
-
+    if (this.dataFilter) {
+      var options = {
+        'visible': this.showAnimationControls
+      };
+      var slider = new Slider(this.frame.filter, options);
+      this.frame.filter.slider = slider;
 
+      // TODO: css here is not nice here...
+      this.frame.filter.style.padding = '10px';
+      //this.frame.filter.style.backgroundColor = '#EFEFEF';
 
-  /**--------------------------------------------------------------------------**/
+      slider.setValues(this.dataFilter.values);
+      slider.setPlayInterval(this.animationInterval);
 
+      // create an event handler
+      var me = this;
+      var onchange = function () {
+        var index = slider.getIndex();
 
+        me.dataFilter.selectValue(index);
+        me.dataPoints = me.dataFilter._getDataPoints();
 
-  /**
-   * Retrieve the absolute left value of a DOM element
-   * @param {Element} elem  A dom element, for example a div
-   * @return {Number} left    The absolute left position of this element
-   *                in the browser page.
-   */
-  getAbsoluteLeft = function(elem) {
-    var left = 0;
-    while( elem !== null ) {
-      left += elem.offsetLeft;
-      left -= elem.scrollLeft;
-      elem = elem.offsetParent;
+        me.redraw();
+      };
+      slider.setOnChangeCallback(onchange);
+    }
+    else {
+      this.frame.filter.slider = undefined;
     }
-    return left;
   };
 
   /**
-   * Retrieve the absolute top value of a DOM element
-   * @param {Element} elem  A dom element, for example a div
-   * @return {Number} top     The absolute top position of this element
-   *                in the browser page.
+   * Redraw the slider
    */
-  getAbsoluteTop = function(elem) {
-    var top = 0;
-    while( elem !== null ) {
-      top += elem.offsetTop;
-      top -= elem.scrollTop;
-      elem = elem.offsetParent;
+  Graph3d.prototype._redrawSlider = function() {
+    if ( this.frame.filter.slider !== undefined) {
+      this.frame.filter.slider.redraw();
     }
-    return top;
   };
 
-  /**
-   * Get the horizontal mouse position from a mouse event
-   * @param {Event} event
-   * @return {Number} mouse x
-   */
-  getMouseX = function(event) {
-    if ('clientX' in event) return event.clientX;
-    return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
-  };
 
   /**
-   * Get the vertical mouse position from a mouse event
-   * @param {Event} event
-   * @return {Number} mouse y
+   * Redraw common information
    */
-  getMouseY = function(event) {
-    if ('clientY' in event) return event.clientY;
-    return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
-  };
-
-  module.exports = Graph3d;
-
-
-/***/ },
-/* 12 */
-/***/ function(module, exports, __webpack_require__) {
+  Graph3d.prototype._redrawInfo = function() {
+    if (this.dataFilter) {
+      var canvas = this.frame.canvas;
+      var ctx = canvas.getContext('2d');
 
-  /**
-   * Prototype for visual components
-   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
-   * @param {Object} [options]
-   */
-  function Component (body, options) {
-    this.options = null;
-    this.props = null;
-  }
+      ctx.font = '14px arial'; // TODO: put in options
+      ctx.lineStyle = 'gray';
+      ctx.fillStyle = 'gray';
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
 
-  /**
-   * Set options for the component. The new options will be merged into the
-   * current options.
-   * @param {Object} options
-   */
-  Component.prototype.setOptions = function(options) {
-    if (options) {
-      util.extend(this.options, options);
+      var x = this.margin;
+      var y = this.margin;
+      ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y);
     }
   };
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  Component.prototype.redraw = function() {
-    // should be implemented by the component
-    return false;
-  };
 
   /**
-   * Destroy the component. Cleanup DOM and event listeners
+   * Redraw the axis
    */
-  Component.prototype.destroy = function() {
-    // should be implemented by the component
-  };
+  Graph3d.prototype._redrawAxis = function() {
+    var canvas = this.frame.canvas,
+      ctx = canvas.getContext('2d'),
+      from, to, step, prettyStep,
+      text, xText, yText, zText,
+      offset, xOffset, yOffset,
+      xMin2d, xMax2d;
 
-  /**
-   * Test whether the component is resized since the last time _isResized() was
-   * called.
-   * @return {Boolean} Returns true if the component is resized
-   * @protected
-   */
-  Component.prototype._isResized = function() {
-    var resized = (this.props._previousWidth !== this.props.width ||
-        this.props._previousHeight !== this.props.height);
+    // TODO: get the actual rendered style of the containerElement
+    //ctx.font = this.containerElement.style.font;
+    ctx.font = 24 / this.camera.getArmLength() + 'px arial';
 
-    this.props._previousWidth = this.props.width;
-    this.props._previousHeight = this.props.height;
+    // calculate the length for the short grid lines
+    var gridLenX = 0.025 / this.scale.x;
+    var gridLenY = 0.025 / this.scale.y;
+    var textMargin = 5 / this.camera.getArmLength(); // px
+    var armAngle = this.camera.getArmRotation().horizontal;
 
-    return resized;
-  };
+    // draw x-grid lines
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultXStep === undefined);
+    step = new StepNumber(this.xMin, this.xMax, this.xStep, prettyStep);
+    step.start();
+    if (step.getCurrent() < this.xMin) {
+      step.next();
+    }
+    while (!step.end()) {
+      var x = step.getCurrent();
 
-  module.exports = Component;
+      if (this.showGrid) {
+        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
+        to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
+        ctx.strokeStyle = this.colorGrid;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
+      else {
+        from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
+        to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
 
+        from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
+        to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
 
-/***/ },
-/* 13 */
-/***/ function(module, exports, __webpack_require__) {
+      yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
+      text = this._convert3Dto2D(new Point3d(x, yText, this.zMin));
+      if (Math.cos(armAngle * 2) > 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        text.y += textMargin;
+      }
+      else if (Math.sin(armAngle * 2) < 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+      }
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
 
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(12);
+      step.next();
+    }
 
-  /**
-   * A current time bar
-   * @param {{range: Range, dom: Object, domProps: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCurrentTime]
-   * @constructor CurrentTime
-   * @extends Component
-   */
-  function CurrentTime (body, options) {
-    this.body = body;
+    // draw y-grid lines
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultYStep === undefined);
+    step = new StepNumber(this.yMin, this.yMax, this.yStep, prettyStep);
+    step.start();
+    if (step.getCurrent() < this.yMin) {
+      step.next();
+    }
+    while (!step.end()) {
+      if (this.showGrid) {
+        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
+        to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
+        ctx.strokeStyle = this.colorGrid;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
+      else {
+        from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
+        to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
 
-    // default options
-    this.defaultOptions = {
-      showCurrentTime: true
-    };
-    this.options = util.extend({}, this.defaultOptions);
+        from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
+        to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
+        ctx.strokeStyle = this.colorAxis;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+      }
 
-    this._create();
+      xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
+      text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin));
+      if (Math.cos(armAngle * 2) < 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        text.y += textMargin;
+      }
+      else if (Math.sin(armAngle * 2) > 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+      }
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText('  ' + step.getCurrent() + '  ', text.x, text.y);
 
-    this.setOptions(options);
-  }
+      step.next();
+    }
 
-  CurrentTime.prototype = new Component();
+    // draw z-grid lines and axis
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultZStep === undefined);
+    step = new StepNumber(this.zMin, this.zMax, this.zStep, prettyStep);
+    step.start();
+    if (step.getCurrent() < this.zMin) {
+      step.next();
+    }
+    xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
+    yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
+    while (!step.end()) {
+      // TODO: make z-grid lines really 3d?
+      from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
+      ctx.strokeStyle = this.colorAxis;
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(from.x - textMargin, from.y);
+      ctx.stroke();
 
-  /**
-   * Create the HTML DOM for the current time bar
-   * @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%';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y);
 
-    this.bar = bar;
-  };
+      step.next();
+    }
+    ctx.lineWidth = 1;
+    from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
+    to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
 
-  /**
-   * Destroy the CurrentTime bar
-   */
-  CurrentTime.prototype.destroy = function () {
-    this.options.showCurrentTime = false;
-    this.redraw(); // will remove the bar from the DOM and stop refreshing
+    // draw x-axis
+    ctx.lineWidth = 1;
+    // line at yMin
+    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
+    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(xMin2d.x, xMin2d.y);
+    ctx.lineTo(xMax2d.x, xMax2d.y);
+    ctx.stroke();
+    // line at ymax
+    xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
+    xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(xMin2d.x, xMin2d.y);
+    ctx.lineTo(xMax2d.x, xMax2d.y);
+    ctx.stroke();
 
-    this.body = null;
-  };
+    // draw y-axis
+    ctx.lineWidth = 1;
+    // line at xMin
+    from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
+    to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
+    // line at xMax
+    from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
+    to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
+    ctx.strokeStyle = this.colorAxis;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
 
-  /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCurrentTime]
-   */
-  CurrentTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCurrentTime'], this.options, options);
+    // draw x-label
+    var xLabel = this.xLabel;
+    if (xLabel.length > 0) {
+      yOffset = 0.1 / this.scale.y;
+      xText = (this.xMin + this.xMax) / 2;
+      yText = (Math.cos(armAngle) > 0) ? this.yMin - yOffset: this.yMax + yOffset;
+      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
+      if (Math.cos(armAngle * 2) > 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+      }
+      else if (Math.sin(armAngle * 2) < 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+      }
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(xLabel, text.x, text.y);
     }
-  };
-
-  /**
-   * 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();
+    // draw y-label
+    var yLabel = this.yLabel;
+    if (yLabel.length > 0) {
+      xOffset = 0.1 / this.scale.x;
+      xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
+      yText = (this.yMin + this.yMax) / 2;
+      text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
+      if (Math.cos(armAngle * 2) < 0) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
       }
-
-      var now = new Date();
-      var x = this.body.util.toScreen(now);
-
-      this.bar.style.left = x + 'px';
-      this.bar.title = 'Current time: ' + now;
-    }
-    else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
+      else if (Math.sin(armAngle * 2) > 0){
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
       }
-      this.stop();
+      else {
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+      }
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(yLabel, text.x, text.y);
     }
 
-    return false;
+    // draw z-label
+    var zLabel = this.zLabel;
+    if (zLabel.length > 0) {
+      offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
+      xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
+      yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
+      zText = (this.zMin + this.zMax) / 2;
+      text = this._convert3Dto2D(new Point3d(xText, yText, zText));
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = this.colorAxis;
+      ctx.fillText(zLabel, text.x - offset, text.y);
+    }
   };
 
   /**
-   * Start auto refreshing the current time bar
+   * Calculate the color based on the given value.
+   * @param {Number} H   Hue, a value be between 0 and 360
+   * @param {Number} S   Saturation, a value between 0 and 1
+   * @param {Number} V   Value, a value between 0 and 1
    */
-  CurrentTime.prototype.start = function() {
-    var me = this;
-
-    function update () {
-      me.stop();
+  Graph3d.prototype._hsv2rgb = function(H, S, V) {
+    var R, G, B, C, Hi, X;
 
-      // 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;
+    C = V * S;
+    Hi = Math.floor(H/60);  // hi = 0,1,2,3,4,5
+    X = C * (1 - Math.abs(((H/60) % 2) - 1));
 
-      me.redraw();
+    switch (Hi) {
+      case 0: R = C; G = X; B = 0; break;
+      case 1: R = X; G = C; B = 0; break;
+      case 2: R = 0; G = C; B = X; break;
+      case 3: R = 0; G = X; B = C; break;
+      case 4: R = X; G = 0; B = C; break;
+      case 5: R = C; G = 0; B = X; break;
 
-      // start a timer to adjust for the new time
-      me.currentTimeTimer = setTimeout(update, interval);
+      default: R = 0; G = 0; B = 0; break;
     }
 
-    update();
+    return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')';
   };
 
+
   /**
-   * Stop auto refreshing the current time bar
+   * Draw all datapoints as a grid
+   * This function can be used when the style is 'grid'
    */
-  CurrentTime.prototype.stop = function() {
-    if (this.currentTimeTimer !== undefined) {
-      clearTimeout(this.currentTimeTimer);
-      delete this.currentTimeTimer;
-    }
-  };
-
-  module.exports = CurrentTime;
-
-
-/***/ },
-/* 14 */
-/***/ function(module, exports, __webpack_require__) {
+  Graph3d.prototype._redrawDataGrid = function() {
+    var canvas = this.frame.canvas,
+      ctx = canvas.getContext('2d'),
+      point, right, top, cross,
+      i,
+      topSideVisible, fillStyle, strokeStyle, lineWidth,
+      h, s, v, zAvg;
 
-  var Hammer = __webpack_require__(49);
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(12);
 
-  /**
-   * A custom time bar
-   * @param {{range: Range, dom: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCustomTime]
-   * @constructor CustomTime
-   * @extends Component
-   */
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return; // TODO: throw exception?
 
-  function CustomTime (body, options) {
-    this.body = body;
+    // calculate the translations and screen position of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
 
-    // default options
-    this.defaultOptions = {
-      showCustomTime: false
-    };
-    this.options = util.extend({}, this.defaultOptions);
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
 
-    this.customTime = new Date();
-    this.eventParams = {}; // stores state parameters while dragging the bar
+      // calculate the translation of the point at the bottom (needed for sorting)
+      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
+      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    }
 
-    // create the DOM
-    this._create();
+    // sort the points on depth of their (x,y) position (not on z)
+    var sortDepth = function (a, b) {
+      return b.dist - a.dist;
+    };
+    this.dataPoints.sort(sortDepth);
 
-    this.setOptions(options);
-  }
+    if (this.style === Graph3d.STYLE.SURFACE) {
+      for (i = 0; i < this.dataPoints.length; i++) {
+        point = this.dataPoints[i];
+        right = this.dataPoints[i].pointRight;
+        top   = this.dataPoints[i].pointTop;
+        cross = this.dataPoints[i].pointCross;
 
-  CustomTime.prototype = new Component();
+        if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {
 
-  /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCustomTime]
-   */
-  CustomTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCustomTime'], this.options, options);
-    }
-  };
+          if (this.showGrayBottom || this.showShadow) {
+            // calculate the cross product of the two vectors from center
+            // to left and right, in order to know whether we are looking at the
+            // bottom or at the top side. We can also use the cross product
+            // for calculating light intensity
+            var aDiff = Point3d.subtract(cross.trans, point.trans);
+            var bDiff = Point3d.subtract(top.trans, right.trans);
+            var crossproduct = Point3d.crossProduct(aDiff, bDiff);
+            var len = crossproduct.length();
+            // FIXME: there is a bug with determining the surface side (shadow or colored)
 
-  /**
-   * Create the DOM for the custom time
-   * @private
-   */
-  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;
+            topSideVisible = (crossproduct.z > 0);
+          }
+          else {
+            topSideVisible = true;
+          }
 
-    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 (topSideVisible) {
+            // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+            zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
+            h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+            s = 1; // saturation
 
-    // 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.showShadow) {
+              v = Math.min(1 + (crossproduct.x / len) / 2, 1);  // value. TODO: scale
+              fillStyle = this._hsv2rgb(h, s, v);
+              strokeStyle = fillStyle;
+            }
+            else  {
+              v = 1;
+              fillStyle = this._hsv2rgb(h, s, v);
+              strokeStyle = this.colorAxis;
+            }
+          }
+          else {
+            fillStyle = 'gray';
+            strokeStyle = this.colorAxis;
+          }
+          lineWidth = 0.5;
 
-  /**
-   * Destroy the CustomTime bar
-   */
-  CustomTime.prototype.destroy = function () {
-    this.options.showCustomTime = false;
-    this.redraw(); // will remove the bar from the DOM
+          ctx.lineWidth = lineWidth;
+          ctx.fillStyle = fillStyle;
+          ctx.strokeStyle = strokeStyle;
+          ctx.beginPath();
+          ctx.moveTo(point.screen.x, point.screen.y);
+          ctx.lineTo(right.screen.x, right.screen.y);
+          ctx.lineTo(cross.screen.x, cross.screen.y);
+          ctx.lineTo(top.screen.x, top.screen.y);
+          ctx.closePath();
+          ctx.fill();
+          ctx.stroke();
+        }
+      }
+    }
+    else { // grid style
+      for (i = 0; i < this.dataPoints.length; i++) {
+        point = this.dataPoints[i];
+        right = this.dataPoints[i].pointRight;
+        top   = this.dataPoints[i].pointTop;
 
-    this.hammer.enable(false);
-    this.hammer = null;
+        if (point !== undefined) {
+          if (this.showPerspective) {
+            lineWidth = 2 / -point.trans.z;
+          }
+          else {
+            lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
+          }
+        }
 
-    this.body = null;
-  };
+        if (point !== undefined && right !== undefined) {
+          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+          zAvg = (point.point.z + right.point.z) / 2;
+          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-  /**
-   * 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);
+          ctx.lineWidth = lineWidth;
+          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
+          ctx.beginPath();
+          ctx.moveTo(point.screen.x, point.screen.y);
+          ctx.lineTo(right.screen.x, right.screen.y);
+          ctx.stroke();
         }
-        parent.appendChild(this.bar);
-      }
 
-      var x = this.body.util.toScreen(this.customTime);
+        if (point !== undefined && top !== undefined) {
+          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+          zAvg = (point.point.z + top.point.z) / 2;
+          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
 
-      this.bar.style.left = x + 'px';
-      this.bar.title = 'Time: ' + this.customTime;
-    }
-    else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
+          ctx.lineWidth = lineWidth;
+          ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
+          ctx.beginPath();
+          ctx.moveTo(point.screen.x, point.screen.y);
+          ctx.lineTo(top.screen.x, top.screen.y);
+          ctx.stroke();
+        }
       }
     }
-
-    return false;
   };
 
-  /**
-   * Set custom time.
-   * @param {Date} time
-   */
-  CustomTime.prototype.setCustomTime = function(time) {
-    this.customTime = new Date(time.valueOf());
-    this.redraw();
-  };
 
   /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
+   * Draw all datapoints as dots.
+   * This function can be used when the style is 'dot' or 'dot-line'
    */
-  CustomTime.prototype.getCustomTime = function() {
-    return new Date(this.customTime.valueOf());
-  };
+  Graph3d.prototype._redrawDataDot = function() {
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+    var i;
 
-  /**
-   * Start moving horizontally
-   * @param {Event} event
-   * @private
-   */
-  CustomTime.prototype._onDragStart = function(event) {
-    this.eventParams.dragging = true;
-    this.eventParams.customTime = this.customTime;
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return;  // TODO: throw exception?
 
-    event.stopPropagation();
-    event.preventDefault();
-  };
+    // calculate the translations of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
 
-  /**
-   * Perform moving operating.
-   * @param {Event} event
-   * @private
-   */
-  CustomTime.prototype._onDrag = function (event) {
-    if (!this.eventParams.dragging) return;
+      // calculate the distance from the point at the bottom to the camera
+      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
+      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    }
 
-    var deltaX = event.gesture.deltaX,
-        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
-        time = this.body.util.toTime(x);
+    // order the translated points by depth
+    var sortDepth = function (a, b) {
+      return b.dist - a.dist;
+    };
+    this.dataPoints.sort(sortDepth);
 
-    this.setCustomTime(time);
+    // draw the datapoints as colored circles
+    var dotSize = this.frame.clientWidth * 0.02;  // px
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var point = this.dataPoints[i];
 
-    // fire a timechange event
-    this.body.emitter.emit('timechange', {
-      time: new Date(this.customTime.valueOf())
-    });
+      if (this.style === Graph3d.STYLE.DOTLINE) {
+        // draw a vertical line from the bottom to the graph value
+        //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
+        var from = this._convert3Dto2D(point.bottom);
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = this.colorGrid;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(point.screen.x, point.screen.y);
+        ctx.stroke();
+      }
 
-    event.stopPropagation();
-    event.preventDefault();
-  };
+      // calculate radius for the circle
+      var size;
+      if (this.style === Graph3d.STYLE.DOTSIZE) {
+        size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
+      }
+      else {
+        size = dotSize;
+      }
 
-  /**
-   * Stop moving operating.
-   * @param {event} event
-   * @private
-   */
-  CustomTime.prototype._onDragEnd = function (event) {
-    if (!this.eventParams.dragging) return;
+      var radius;
+      if (this.showPerspective) {
+        radius = size / -point.trans.z;
+      }
+      else {
+        radius = size * -(this.eye.z / this.camera.getArmLength());
+      }
+      if (radius < 0) {
+        radius = 0;
+      }
 
-    // fire a timechanged event
-    this.body.emitter.emit('timechanged', {
-      time: new Date(this.customTime.valueOf())
-    });
+      var hue, color, borderColor;
+      if (this.style === Graph3d.STYLE.DOTCOLOR ) {
+        // calculate the color based on the value
+        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
+      else if (this.style === Graph3d.STYLE.DOTSIZE) {
+        color = this.colorDot;
+        borderColor = this.colorDotBorder;
+      }
+      else {
+        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
 
-    event.stopPropagation();
-    event.preventDefault();
+      // draw the circle
+      ctx.lineWidth = 1.0;
+      ctx.strokeStyle = borderColor;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
+      ctx.fill();
+      ctx.stroke();
+    }
   };
 
-  module.exports = CustomTime;
-
-
-/***/ },
-/* 15 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Component = __webpack_require__(12);
-  var DataStep = __webpack_require__(6);
-
   /**
-   * A horizontal time axis
-   * @param {Object} [options]        See DataAxis.setOptions for the available
-   *                                  options.
-   * @constructor DataAxis
-   * @extends Component
-   * @param body
+   * Draw all datapoints as bars.
+   * This function can be used when the style is 'bar', 'bar-color', or 'bar-size'
    */
-  function DataAxis (body, options, svg) {
-    this.id = util.randomUUID();
-    this.body = body;
+  Graph3d.prototype._redrawDataBar = function() {
+    var canvas = this.frame.canvas;
+    var ctx = canvas.getContext('2d');
+    var i, j, surface, corners;
 
-    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
-    };
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return;  // TODO: throw exception?
 
-    this.linegraphSVG = svg;
-    this.props = {};
-    this.DOMelements = { // dynamic elements
-      lines: {},
-      labels: {}
-    };
+    // calculate the translations of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
 
-    this.dom = {};
+      // calculate the distance from the point at the bottom to the camera
+      var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
+      this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
+    }
 
-    this.range = {start:0, end:0};
+    // order the translated points by depth
+    var sortDepth = function (a, b) {
+      return b.dist - a.dist;
+    };
+    this.dataPoints.sort(sortDepth);
 
-    this.options = util.extend({}, this.defaultOptions);
-    this.conversionFactor = 1;
+    // draw the datapoints as bars
+    var xWidth = this.xBarWidth / 2;
+    var yWidth = this.yBarWidth / 2;
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var point = this.dataPoints[i];
 
-    this.setOptions(options);
-    this.width = Number(('' + this.options.width).replace("px",""));
-    this.minWidth = this.width;
-    this.height = this.linegraphSVG.offsetHeight;
+      // determine color
+      var hue, color, borderColor;
+      if (this.style === Graph3d.STYLE.BARCOLOR ) {
+        // calculate the color based on the value
+        hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
+      else if (this.style === Graph3d.STYLE.BARSIZE) {
+        color = this.colorDot;
+        borderColor = this.colorDotBorder;
+      }
+      else {
+        // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+        hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+        color = this._hsv2rgb(hue, 1, 1);
+        borderColor = this._hsv2rgb(hue, 1, 0.8);
+      }
 
-    this.stepPixels = 25;
-    this.stepPixelsForced = 25;
-    this.lineOffset = 0;
-    this.master = true;
-    this.svgElements = {};
+      // calculate size for the bar
+      if (this.style === Graph3d.STYLE.BARSIZE) {
+        xWidth = (this.xBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
+        yWidth = (this.yBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
+      }
 
+      // calculate all corner points
+      var me = this;
+      var point3d = point.point;
+      var top = [
+        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
+        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
+      ];
+      var bottom = [
+        {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, this.zMin)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, this.zMin)},
+        {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, this.zMin)},
+        {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, this.zMin)}
+      ];
 
-    this.groups = {};
-    this.amountOfGroups = 0;
+      // calculate screen location of the points
+      top.forEach(function (obj) {
+        obj.screen = me._convert3Dto2D(obj.point);
+      });
+      bottom.forEach(function (obj) {
+        obj.screen = me._convert3Dto2D(obj.point);
+      });
 
-    // create the HTML DOM
-    this._create();
-  }
+      // create five sides, calculate both corner points and center points
+      var surfaces = [
+        {corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
+        {corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
+        {corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
+        {corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
+        {corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
+      ];
+      point.surfaces = surfaces;
 
-  DataAxis.prototype = new Component();
+      // calculate the distance of each of the surface centers to the camera
+      for (j = 0; j < surfaces.length; j++) {
+        surface = surfaces[j];
+        var transCenter = this._convertPointToTranslation(surface.center);
+        surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
+        // TODO: this dept calculation doesn't work 100% of the cases due to perspective,
+        //     but the current solution is fast/simple and works in 99.9% of all cases
+        //     the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
+      }
 
+      // order the surfaces by their (translated) depth
+      surfaces.sort(function (a, b) {
+        var diff = b.dist - a.dist;
+        if (diff) return diff;
 
+        // if equal depth, sort the top surface last
+        if (a.corners === top) return 1;
+        if (b.corners === top) return -1;
 
-  DataAxis.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
-    }
-    this.amountOfGroups += 1;
-  };
+        // both are equal
+        return 0;
+      });
 
-  DataAxis.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
-  };
-
-  DataAxis.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
-    }
-  };
-
-
-  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'];
-      util.selectiveExtend(fields, this.options, options);
-
-      this.minWidth = Number(('' + this.options.width).replace("px",""));
-
-      if (redraw == true && this.dom.frame) {
-        this.hide();
-        this.show();
+      // draw the ordered surfaces
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = borderColor;
+      ctx.fillStyle = color;
+      // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
+      for (j = 2; j < surfaces.length; j++) {
+        surface = surfaces[j];
+        corners = surface.corners;
+        ctx.beginPath();
+        ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
+        ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
+        ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
+        ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
+        ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
+        ctx.fill();
+        ctx.stroke();
       }
     }
   };
 
 
   /**
-   * Create the HTML DOM for the DataAxis
+   * Draw a line through all datapoints.
+   * This function can be used when the style is 'line'
    */
-  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;
-
-    this.dom.lineContainer = document.createElement('div');
-    this.dom.lineContainer.style.width = '100%';
-    this.dom.lineContainer.style.height = this.height;
-
-    // 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);
+  Graph3d.prototype._redrawDataLine = function() {
+    var canvas = this.frame.canvas,
+      ctx = canvas.getContext('2d'),
+      point, i;
 
-    var x;
-    var iconWidth = this.options.iconWidth;
-    var iconHeight = 15;
-    var iconOffset = 4;
-    var y = iconOffset + 0.5 * iconHeight;
+    if (this.dataPoints === undefined || this.dataPoints.length <= 0)
+      return;  // TODO: throw exception?
 
-    if (this.options.orientation == 'left') {
-      x = iconOffset;
-    }
-    else {
-      x = this.width - iconWidth - iconOffset;
-    }
+    // calculate the translations of all points
+    for (i = 0; i < this.dataPoints.length; i++) {
+      var trans = this._convertPointToTranslation(this.dataPoints[i].point);
+      var screen = this._convertTranslationToScreen(trans);
 
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-        y += iconHeight + iconOffset;
-      }
+      this.dataPoints[i].trans = trans;
+      this.dataPoints[i].screen = screen;
     }
 
-    DOMutil.cleanupElements(this.svgElements);
-  };
-
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.show = function() {
-    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);
-      }
-    }
+    // start the line
+    if (this.dataPoints.length > 0) {
+      point = this.dataPoints[0];
 
-    if (!this.dom.lineContainer.parentNode) {
-      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
+      ctx.lineWidth = 1;    // TODO: make customizable
+      ctx.strokeStyle = 'blue'; // TODO: make customizable
+      ctx.beginPath();
+      ctx.moveTo(point.screen.x, point.screen.y);
     }
-  };
 
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.hide = function() {
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    // draw the datapoints as colored circles
+    for (i = 1; i < this.dataPoints.length; i++) {
+      point = this.dataPoints[i];
+      ctx.lineTo(point.screen.x, point.screen.y);
     }
 
-    if (this.dom.lineContainer.parentNode) {
-      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
+    // finish the line
+    if (this.dataPoints.length > 0) {
+      ctx.stroke();
     }
   };
 
   /**
-   * Set a range (start and end)
-   * @param end
-   * @param start
-   * @param end
+   * Start a moving operation inside the provided parent element
+   * @param {Event}     event     The event that occurred (required for
+   *                  retrieving the  mouse position)
    */
-  DataAxis.prototype.setRange = function (start, end) {
-    this.range.start = start;
-    this.range.end = end;
-  };
+  Graph3d.prototype._onMouseDown = function(event) {
+    event = event || window.event;
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  DataAxis.prototype.redraw = function () {
-    var changeCalled = false;
-    if (this.amountOfGroups == 0) {
-      this.hide();
+    // check if mouse is still down (may be up when focus is lost for example
+    // in an iframe)
+    if (this.leftButtonDown) {
+      this._onMouseUp(event);
     }
-    else {
-      this.show();
-      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
-      // 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;
 
-      var props = this.props;
-      var frame = this.dom.frame;
-
-      // update classname
-      frame.className = 'dataaxis';
-
-      // calculate character width and height
-      this._calculateCharSize();
+    // only react on left mouse button down
+    this.leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
+    if (!this.leftButtonDown && !this.touchDown) return;
 
-      var orientation = this.options.orientation;
-      var showMinorLabels = this.options.showMinorLabels;
-      var showMajorLabels = this.options.showMajorLabels;
+    // get mouse position (different code for IE and all other browsers)
+    this.startMouseX = getMouseX(event);
+    this.startMouseY = getMouseY(event);
 
-      // determine the width and height of the elemens for the axis
-      props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
-      props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+    this.startStart = new Date(this.start);
+    this.startEnd = new Date(this.end);
+    this.startArmRotation = this.camera.getArmRotation();
 
-      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;
+    this.frame.style.cursor = 'move';
 
-      //  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";
-      }
-      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";
-      }
-      changeCalled = this._redrawLabels();
-      if (this.options.icons == true) {
-        this._redrawGroupIcons();
-      }
-    }
-    return changeCalled;
+    // add event listeners to handle moving the contents
+    // we store the function onmousemove and onmouseup in the graph, so we can
+    // remove the eventlisteners lateron in the function mouseUp()
+    var me = this;
+    this.onmousemove = function (event) {me._onMouseMove(event);};
+    this.onmouseup   = function (event) {me._onMouseUp(event);};
+    G3DaddEventListener(document, 'mousemove', me.onmousemove);
+    G3DaddEventListener(document, 'mouseup', me.onmouseup);
+    G3DpreventDefault(event);
   };
 
+
   /**
-   * Repaint major and minor text labels and vertical grid lines
-   * @private
+   * Perform moving operating.
+   * This function activated from within the funcion Graph.mouseDown().
+   * @param {Event}   event  Well, eehh, the event
    */
-  DataAxis.prototype._redrawLabels = function () {
-    DOMutil.prepareElements(this.DOMelements);
-
-    var orientation = this.options['orientation'];
+  Graph3d.prototype._onMouseMove = function (event) {
+    event = event || window.event;
 
-    // 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.step = step;
-    step.first();
+    // calculate change in mouse position
+    var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
+    var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
 
-    // get the distance in pixels for a step
-    var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
-    this.stepPixels = stepPixels;
+    var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
+    var verticalNew = this.startArmRotation.vertical + diffY / 200;
 
-    var amountOfSteps = this.height / stepPixels;
-    var stepDifference = 0;
+    var snapAngle = 4; // degrees
+    var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
 
-    if (this.master == false) {
-      stepPixels = this.stepPixelsForced;
-      stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
-      for (var i = 0; i < 0.5 * stepDifference; i++) {
-        step.previous();
-      }
-      amountOfSteps = this.height / stepPixels;
+    // snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
+    // the -0.001 is to take care that the vertical axis is always drawn at the left front corner
+    if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
+      horizontalNew = Math.round((horizontalNew / Math.PI)) * Math.PI - 0.001;
+    }
+    if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
+      horizontalNew = (Math.round((horizontalNew/ Math.PI - 0.5)) + 0.5) * Math.PI - 0.001;
     }
 
+    // snap vertically to nice angles
+    if (Math.abs(Math.sin(verticalNew)) < snapValue) {
+      verticalNew = Math.round((verticalNew / Math.PI)) * Math.PI;
+    }
+    if (Math.abs(Math.cos(verticalNew)) < snapValue) {
+      verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
+    }
 
-    this.valueAtZero = step.marginEnd;
-    var marginStartPos = 0;
+    this.camera.setArmRotation(horizontalNew, verticalNew);
+    this.redraw();
 
-    // do not draw the first label
-    var max = 1;
-    step.next();
+    // fire a cameraPositionChange event
+    var parameters = this.getCameraPosition();
+    this.emit('cameraPositionChange', parameters);
 
-    this.maxLabelSize = 0;
-    var y = 0;
-    while (max < Math.round(amountOfSteps)) {
+    G3DpreventDefault(event);
+  };
 
-      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(), orientation, 'yAxis minor', this.props.minorCharHeight);
-      }
+  /**
+   * Stop moving operating.
+   * This function activated from within the funcion Graph.mouseDown().
+   * @param {event}  event   The event
+   */
+  Graph3d.prototype._onMouseUp = function (event) {
+    this.frame.style.cursor = 'auto';
+    this.leftButtonDown = false;
 
-      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
-          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
+    // remove event listeners here
+    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
+    G3DremoveEventListener(document, 'mouseup',   this.onmouseup);
+    G3DpreventDefault(event);
+  };
 
-        if (y >= 0) {
-          this._redrawLabel(y - 2, step.getCurrent(), 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);
-      }
+  /**
+   * After having moved the mouse, a tooltip should pop up when the mouse is resting on a data point
+   * @param {Event}  event   A mouse move event
+   */
+  Graph3d.prototype._onTooltip = function (event) {
+    var delay = 300; // ms
+    var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
+    var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
 
-      step.next();
-      max++;
+    if (!this.showTooltip) {
+      return;
     }
 
-    this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
+    if (this.tooltipTimeout) {
+      clearTimeout(this.tooltipTimeout);
+    }
 
-    var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
-    // this will resize the yAxis to accomodate 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);
-      this.redraw();
-      return true;
+    // (delayed) display of a tooltip only if no mouse button is down
+    if (this.leftButtonDown) {
+      this._hideTooltip();
+      return;
     }
-    // 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);
-      this.redraw();
-      return true;
+
+    if (this.tooltip && this.tooltip.dataPoint) {
+      // tooltip is currently visible
+      var dataPoint = this._dataPointFromXY(mouseX, mouseY);
+      if (dataPoint !== this.tooltip.dataPoint) {
+        // datapoint changed
+        if (dataPoint) {
+          this._showTooltip(dataPoint);
+        }
+        else {
+          this._hideTooltip();
+        }
+      }
     }
     else {
-      DOMutil.cleanupElements(this.DOMelements);
-      return false;
+      // tooltip is currently not visible
+      var me = this;
+      this.tooltipTimeout = setTimeout(function () {
+        me.tooltipTimeout = null;
+
+        // show a tooltip if we have a data point
+        var dataPoint = me._dataPointFromXY(mouseX, mouseY);
+        if (dataPoint) {
+          me._showTooltip(dataPoint);
+        }
+      }, delay);
     }
   };
 
   /**
-   * Create a label for the axis at position x
-   * @private
-   * @param y
-   * @param text
-   * @param orientation
-   * @param className
-   * @param characterHeight
+   * Event handler for touchstart event on mobile devices
    */
-  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
-    // reuse redundant label
-    var label = DOMutil.getDOMElement('div',this.DOMelements, 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';
+  Graph3d.prototype._onTouchStart = function(event) {
+    this.touchDown = true;
 
-    text += '';
+    var me = this;
+    this.ontouchmove = function (event) {me._onTouchMove(event);};
+    this.ontouchend  = function (event) {me._onTouchEnd(event);};
+    G3DaddEventListener(document, 'touchmove', me.ontouchmove);
+    G3DaddEventListener(document, 'touchend', me.ontouchend);
 
-    var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
-    if (this.maxLabelSize < text.length * largestWidth) {
-      this.maxLabelSize = text.length * largestWidth;
-    }
+    this._onMouseDown(event);
   };
 
   /**
-   * Create a minor line for the axis at position y
-   * @param y
-   * @param orientation
-   * @param className
-   * @param offset
-   * @param width
+   * Event handler for touchmove event on mobile devices
    */
-  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
-    if (this.master == true) {
-      var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
-      line.className = className;
-      line.innerHTML = '';
-
-      if (orientation == 'left') {
-        line.style.left = (this.width - offset) + 'px';
-      }
-      else {
-        line.style.right = (this.width - offset) + 'px';
-      }
-
-      line.style.width = width + 'px';
-      line.style.top = y + 'px';
-    }
+  Graph3d.prototype._onTouchMove = function(event) {
+    this._onMouseMove(event);
   };
 
+  /**
+   * Event handler for touchend event on mobile devices
+   */
+  Graph3d.prototype._onTouchEnd = function(event) {
+    this.touchDown = false;
+
+    G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
+    G3DremoveEventListener(document, 'touchend',   this.ontouchend);
 
-  DataAxis.prototype.convertValue = function (value) {
-    var invertedValue = this.valueAtZero - value;
-    var convertedValue = invertedValue * this.conversionFactor;
-    return convertedValue; // the -2 is to compensate for the borders
+    this._onMouseUp(event);
   };
 
 
   /**
-   * 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
+   * Event handler for mouse wheel event, used to zoom the graph
+   * Code from http://adomas.org/javascript-mouse-wheel/
+   * @param {event}  event   The event
    */
-  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;
+  Graph3d.prototype._onWheel = function(event) {
+    if (!event) /* For IE. */
+      event = window.event;
 
-      this.dom.frame.removeChild(measureCharMinor);
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail/3;
     }
 
-    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);
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+      var oldLength = this.camera.getArmLength();
+      var newLength = oldLength * (1 - delta / 10);
 
-      this.props.majorCharHeight = measureCharMajor.clientHeight;
-      this.props.majorCharWidth = measureCharMajor.clientWidth;
+      this.camera.setArmLength(newLength);
+      this.redraw();
 
-      this.dom.frame.removeChild(measureCharMajor);
+      this._hideTooltip();
     }
+
+    // fire a cameraPositionChange event
+    var parameters = this.getCameraPosition();
+    this.emit('cameraPositionChange', parameters);
+
+    // Prevent default actions caused by mouse wheel.
+    // That might be ugly, but we handle scrolls somehow
+    // anyway, so don't bother here..
+    G3DpreventDefault(event);
   };
 
   /**
-   * 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
+   * Test whether a point lies inside given 2D triangle
+   * @param {Point2d} point
+   * @param {Point2d[]} triangle
+   * @return {boolean} Returns true if given point lies inside or on the edge of the triangle
+   * @private
    */
-  DataAxis.prototype.snap = function(date) {
-    return this.step.snap(date);
-  };
-
-  module.exports = DataAxis;
+  Graph3d.prototype._insideTriangle = function (point, triangle) {
+    var a = triangle[0],
+      b = triangle[1],
+      c = triangle[2];
 
+    function sign (x) {
+      return x > 0 ? 1 : x < 0 ? -1 : 0;
+    }
 
-/***/ },
-/* 16 */
-/***/ function(module, exports, __webpack_require__) {
+    var as = sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
+    var bs = sign((c.x - b.x) * (point.y - b.y) - (c.y - b.y) * (point.x - b.x));
+    var cs = sign((a.x - c.x) * (point.y - c.y) - (a.y - c.y) * (point.x - c.x));
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
+    // each of the three signs must be either equal to each other or zero
+    return (as == 0 || bs == 0 || as == bs) &&
+      (bs == 0 || cs == 0 || bs == cs) &&
+      (as == 0 || cs == 0 || as == cs);
+  };
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * Find a data point close to given screen position (x, y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Object | null} The closest data point or null if not close to any data point
+   * @private
    */
-  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 = [];
-  }
+  Graph3d.prototype._dataPointFromXY = function (x, y) {
+    var i,
+      distMax = 100, // px
+      dataPoint = null,
+      closestDataPoint = null,
+      closestDist = null,
+      center = new Point2d(x, y);
 
-  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;})
+    if (this.style === Graph3d.STYLE.BAR ||
+      this.style === Graph3d.STYLE.BARCOLOR ||
+      this.style === Graph3d.STYLE.BARSIZE) {
+      // the data points are ordered from far away to closest
+      for (i = this.dataPoints.length - 1; i >= 0; i--) {
+        dataPoint = this.dataPoints[i];
+        var surfaces  = dataPoint.surfaces;
+        if (surfaces) {
+          for (var s = surfaces.length - 1; s >= 0; s--) {
+            // split each surface in two triangles, and see if the center point is inside one of these
+            var surface = surfaces[s];
+            var corners = surface.corners;
+            var triangle1 = [corners[0].screen, corners[1].screen, corners[2].screen];
+            var triangle2 = [corners[2].screen, corners[3].screen, corners[0].screen];
+            if (this._insideTriangle(center, triangle1) ||
+              this._insideTriangle(center, triangle2)) {
+              // return immediately at the first hit
+              return dataPoint;
+            }
+          }
+        }
       }
     }
     else {
-      this.itemsData = [];
-    }
-  };
-
-  GraphGroup.prototype.setZeroPosition = function(pos) {
-    this.zeroPosition = pos;
-  };
-
-  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');
+      // find the closest data point, using distance to the center of the point on 2d screen
+      for (i = 0; i < this.dataPoints.length; i++) {
+        dataPoint = this.dataPoints[i];
+        var point = dataPoint.screen;
+        if (point) {
+          var distX = Math.abs(x - point.x);
+          var distY = Math.abs(y - point.y);
+          var dist  = Math.sqrt(distX * distX + distY * distY);
 
-      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 ((closestDist === null || dist < closestDist) && dist < distMax) {
+            closestDist = dist;
+            closestDataPoint = dataPoint;
           }
         }
       }
     }
-  };
 
-  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.setOptions(group.options);
+
+    return closestDataPoint;
   };
 
-  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
-    var fillHeight = iconHeight * 0.5;
-    var path, fillPath;
+  /**
+   * Display a tooltip for given data point
+   * @param {Object} dataPoint
+   * @private
+   */
+  Graph3d.prototype._showTooltip = function (dataPoint) {
+    var content, line, dot;
 
-    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.tooltip) {
+      content = document.createElement('div');
+      content.style.position = 'absolute';
+      content.style.padding = '10px';
+      content.style.border = '1px solid #4d4d4d';
+      content.style.color = '#1a1a1a';
+      content.style.background = 'rgba(255,255,255,0.7)';
+      content.style.borderRadius = '2px';
+      content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
 
-    if (this.options.style == 'line') {
-      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-      path.setAttributeNS(null, "class", this.className);
-      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");
-      }
+      line = document.createElement('div');
+      line.style.position = 'absolute';
+      line.style.height = '40px';
+      line.style.width = '0';
+      line.style.borderLeft = '1px solid #4d4d4d';
 
-      if (this.options.drawPoints.enabled == true) {
-        DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
-      }
+      dot = document.createElement('div');
+      dot.style.position = 'absolute';
+      dot.style.height = '0';
+      dot.style.width = '0';
+      dot.style.border = '5px solid #4d4d4d';
+      dot.style.borderRadius = '5px';
+
+      this.tooltip = {
+        dataPoint: null,
+        dom: {
+          content: content,
+          line: line,
+          dot: dot
+        }
+      };
     }
     else {
-      var barWidth = Math.round(0.3 * iconWidth);
-      var bar1Height = Math.round(0.4 * iconHeight);
-      var bar2Height = Math.round(0.75 * iconHeight);
+      content = this.tooltip.dom.content;
+      line  = this.tooltip.dom.line;
+      dot   = this.tooltip.dom.dot;
+    }
 
-      var offset = Math.round((iconWidth - (2 * barWidth))/3);
+    this._hideTooltip();
 
-      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);
+    this.tooltip.dataPoint = dataPoint;
+    if (typeof this.showTooltip === 'function') {
+      content.innerHTML = this.showTooltip(dataPoint.point);
+    }
+    else {
+      content.innerHTML = '<table>' +
+        '<tr><td>x:</td><td>' + dataPoint.point.x + '</td></tr>' +
+        '<tr><td>y:</td><td>' + dataPoint.point.y + '</td></tr>' +
+        '<tr><td>z:</td><td>' + dataPoint.point.z + '</td></tr>' +
+        '</table>';
     }
-  };
 
-  module.exports = GraphGroup;
+    content.style.left  = '0';
+    content.style.top   = '0';
+    this.frame.appendChild(content);
+    this.frame.appendChild(line);
+    this.frame.appendChild(dot);
 
+    // calculate sizes
+    var contentWidth  = content.offsetWidth;
+    var contentHeight   = content.offsetHeight;
+    var lineHeight    = line.offsetHeight;
+    var dotWidth    = dot.offsetWidth;
+    var dotHeight     = dot.offsetHeight;
 
-/***/ },
-/* 17 */
-/***/ function(module, exports, __webpack_require__) {
+    var left = dataPoint.screen.x - contentWidth / 2;
+    left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
 
-  var util = __webpack_require__(1);
-  var stack = __webpack_require__(9);
-  var ItemRange = __webpack_require__(25);
+    line.style.left   = dataPoint.screen.x + 'px';
+    line.style.top    = (dataPoint.screen.y - lineHeight) + 'px';
+    content.style.left  = left + 'px';
+    content.style.top   = (dataPoint.screen.y - lineHeight - contentHeight) + 'px';
+    dot.style.left    = (dataPoint.screen.x - dotWidth / 2) + 'px';
+    dot.style.top     = (dataPoint.screen.y - dotHeight / 2) + 'px';
+  };
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * Hide the tooltip when displayed
+   * @private
    */
-  function Group (groupId, data, itemSet) {
-    this.groupId = groupId;
-
-    this.itemSet = itemSet;
+  Graph3d.prototype._hideTooltip = function () {
+    if (this.tooltip) {
+      this.tooltip.dataPoint = null;
 
-    this.dom = {};
-    this.props = {
-      label: {
-        width: 0,
-        height: 0
+      for (var prop in this.tooltip.dom) {
+        if (this.tooltip.dom.hasOwnProperty(prop)) {
+          var elem = this.tooltip.dom[prop];
+          if (elem && elem.parentNode) {
+            elem.parentNode.removeChild(elem);
+          }
+        }
       }
-    };
-    this.className = null;
-
-    this.items = {};        // items filtered by groupId of this group
-    this.visibleItems = []; // items currently visible in window
-    this.orderedItems = {   // items sorted by start and by end
-      byStart: [],
-      byEnd: []
-    };
-
-    this._create();
+    }
+  };
 
-    this.setData(data);
-  }
 
   /**
-   * Create DOM elements for the group
-   * @private
+   * Add and event listener. Works for all browsers
+   * @param {Element}   element  An html element
+   * @param {string}    action   The action, for example 'click',
+   *                 without the prefix 'on'
+   * @param {function}  listener   The callback function to be executed
+   * @param {boolean}   useCapture
    */
-  Group.prototype._create = function() {
-    var label = document.createElement('div');
-    label.className = 'vlabel';
-    this.dom.label = label;
+  G3DaddEventListener = function(element, action, listener, useCapture) {
+    if (element.addEventListener) {
+      if (useCapture === undefined)
+        useCapture = false;
 
-    var inner = document.createElement('div');
-    inner.className = 'inner';
-    label.appendChild(inner);
-    this.dom.inner = inner;
+      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
+        action = 'DOMMouseScroll';  // For Firefox
+      }
 
-    var foreground = document.createElement('div');
-    foreground.className = 'group';
-    foreground['timeline-group'] = this;
-    this.dom.foreground = foreground;
+      element.addEventListener(action, listener, useCapture);
+    } else {
+      element.attachEvent('on' + action, listener);  // IE browsers
+    }
+  };
 
-    this.dom.background = document.createElement('div');
-    this.dom.background.className = 'group';
+  /**
+   * Remove an event listener from an element
+   * @param {Element}    element   An html dom element
+   * @param {string}     action  The name of the event, for example 'mousedown'
+   * @param {function}   listener  The listener function
+   * @param {boolean}    useCapture
+   */
+  G3DremoveEventListener = function(element, action, listener, useCapture) {
+    if (element.removeEventListener) {
+      // non-IE browsers
+      if (useCapture === undefined)
+        useCapture = false;
 
-    this.dom.axis = document.createElement('div');
-    this.dom.axis.className = 'group';
+      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
+        action = 'DOMMouseScroll';  // For Firefox
+      }
 
-    // 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';
-    this.dom.marker.innerHTML = '?';
-    this.dom.background.appendChild(this.dom.marker);
+      element.removeEventListener(action, listener, useCapture);
+    } else {
+      // IE browsers
+      element.detachEvent('on' + action, listener);
+    }
   };
 
   /**
-   * Set the group data for this group
-   * @param {Object} data   Group data, can contain properties content and className
+   * Stop event propagation
    */
-  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) {
-      this.dom.inner.innerHTML = content;
+  G3DstopPropagation = function(event) {
+    if (!event)
+      event = window.event;
+
+    if (event.stopPropagation) {
+      event.stopPropagation();  // non-IE browsers
     }
     else {
-      this.dom.inner.innerHTML = this.groupId;
+      event.cancelBubble = true;  // IE browsers
     }
+  };
 
-    // update title
-    this.dom.label.title = data && data.title || '';
 
-    if (!this.dom.inner.firstChild) {
-      util.addClassName(this.dom.inner, 'hidden');
+  /**
+   * Cancels the event if it is cancelable, without stopping further propagation of the event.
+   */
+  G3DpreventDefault = function (event) {
+    if (!event)
+      event = window.event;
+
+    if (event.preventDefault) {
+      event.preventDefault();  // non-IE browsers
     }
     else {
-      util.removeClassName(this.dom.inner, 'hidden');
-    }
-
-    // update className
-    var className = data && data.className || null;
-    if (className != this.className) {
-      if (this.className) {
-        util.removeClassName(this.dom.label, className);
-        util.removeClassName(this.dom.foreground, className);
-        util.removeClassName(this.dom.background, className);
-        util.removeClassName(this.dom.axis, 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);
+      event.returnValue = false;  // IE browsers
     }
   };
 
   /**
-   * Get the width of the group label
-   * @return {number} width
+   * @constructor Slider
+   *
+   * An html slider control with start/stop/prev/next buttons
+   * @param {Element} container  The element where the slider will be created
+   * @param {Object} options   Available options:
+   *                 {boolean} visible   If true (default) the
+   *                           slider is visible.
    */
-  Group.prototype.getLabelWidth = function() {
-    return this.props.label.width;
-  };
+  function Slider(container, options) {
+    if (container === undefined) {
+      throw 'Error: No container element defined';
+    }
+    this.container = container;
+    this.visible = (options && options.visible != undefined) ? options.visible : true;
 
+    if (this.visible) {
+      this.frame = document.createElement('DIV');
+      //this.frame.style.backgroundColor = '#E5E5E5';
+      this.frame.style.width = '100%';
+      this.frame.style.position = 'relative';
+      this.container.appendChild(this.frame);
 
-  /**
-   * Repaint this group
-   * @param {{start: number, end: number}} range
-   * @param {{item: number, axis: number}} margin
-   * @param {boolean} [restack=false]  Force restacking of all items
-   * @return {boolean} Returns true if the group is resized
-   */
-  Group.prototype.redraw = function(range, margin, restack) {
-    var resized = false;
+      this.frame.prev = document.createElement('INPUT');
+      this.frame.prev.type = 'BUTTON';
+      this.frame.prev.value = 'Prev';
+      this.frame.appendChild(this.frame.prev);
 
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+      this.frame.play = document.createElement('INPUT');
+      this.frame.play.type = 'BUTTON';
+      this.frame.play.value = 'Play';
+      this.frame.appendChild(this.frame.play);
 
-    // 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;
+      this.frame.next = document.createElement('INPUT');
+      this.frame.next.type = 'BUTTON';
+      this.frame.next.value = 'Next';
+      this.frame.appendChild(this.frame.next);
 
-      util.forEach(this.items, function (item) {
-        item.dirty = true;
-        if (item.displayed) item.redraw();
-      });
+      this.frame.bar = document.createElement('INPUT');
+      this.frame.bar.type = 'BUTTON';
+      this.frame.bar.style.position = 'absolute';
+      this.frame.bar.style.border = '1px solid red';
+      this.frame.bar.style.width = '100px';
+      this.frame.bar.style.height = '6px';
+      this.frame.bar.style.borderRadius = '2px';
+      this.frame.bar.style.MozBorderRadius = '2px';
+      this.frame.bar.style.border = '1px solid #7F7F7F';
+      this.frame.bar.style.backgroundColor = '#E5E5E5';
+      this.frame.appendChild(this.frame.bar);
 
-      restack = true;
-    }
+      this.frame.slide = document.createElement('INPUT');
+      this.frame.slide.type = 'BUTTON';
+      this.frame.slide.style.margin = '0px';
+      this.frame.slide.value = ' ';
+      this.frame.slide.style.position = 'relative';
+      this.frame.slide.style.left = '-100px';
+      this.frame.appendChild(this.frame.slide);
 
-    // 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);
+      // create events
+      var me = this;
+      this.frame.slide.onmousedown = function (event) {me._onMouseDown(event);};
+      this.frame.prev.onclick = function (event) {me.prev(event);};
+      this.frame.play.onclick = function (event) {me.togglePlay(event);};
+      this.frame.next.onclick = function (event) {me.next(event);};
     }
 
-    // recalculate the height of the group
-    var height;
-    var visibleItems = this.visibleItems;
-    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 (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 / 2;
-    }
-    else {
-      height = margin.axis + margin.item;
-    }
-    height = Math.max(height, this.props.label.height);
-
-    // 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.onChangeCallback = undefined;
 
-    // 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;
+    this.values = [];
+    this.index = undefined;
 
-    // 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.playTimeout = undefined;
+    this.playInterval = 1000; // milliseconds
+    this.playLoop = true;
+  }
 
-    // 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();
+  /**
+   * Select the previous index
+   */
+  Slider.prototype.prev = function() {
+    var index = this.getIndex();
+    if (index > 0) {
+      index--;
+      this.setIndex(index);
     }
-
-    return resized;
   };
 
   /**
-   * Show this group: attach to the DOM
+   * Select the next index
    */
-  Group.prototype.show = function() {
-    if (!this.dom.label.parentNode) {
-      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+  Slider.prototype.next = function() {
+    var index = this.getIndex();
+    if (index < this.values.length - 1) {
+      index++;
+      this.setIndex(index);
     }
+  };
 
-    if (!this.dom.foreground.parentNode) {
-      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
-    }
+  /**
+   * Select the next index
+   */
+  Slider.prototype.playNext = function() {
+    var start = new Date();
 
-    if (!this.dom.background.parentNode) {
-      this.itemSet.dom.background.appendChild(this.dom.background);
+    var index = this.getIndex();
+    if (index < this.values.length - 1) {
+      index++;
+      this.setIndex(index);
     }
-
-    if (!this.dom.axis.parentNode) {
-      this.itemSet.dom.axis.appendChild(this.dom.axis);
+    else if (this.playLoop) {
+      // jump to the start
+      index = 0;
+      this.setIndex(index);
     }
+
+    var end = new Date();
+    var diff = (end - start);
+
+    // calculate how much time it to to set the index and to execute the callback
+    // function.
+    var interval = Math.max(this.playInterval - diff, 0);
+    // document.title = diff // TODO: cleanup
+
+    var me = this;
+    this.playTimeout = setTimeout(function() {me.playNext();}, interval);
   };
 
   /**
-   * Hide this group: remove from the DOM
+   * Toggle start or stop playing
    */
-  Group.prototype.hide = function() {
-    var label = this.dom.label;
-    if (label.parentNode) {
-      label.parentNode.removeChild(label);
+  Slider.prototype.togglePlay = function() {
+    if (this.playTimeout === undefined) {
+      this.play();
+    } else {
+      this.stop();
     }
+  };
 
-    var foreground = this.dom.foreground;
-    if (foreground.parentNode) {
-      foreground.parentNode.removeChild(foreground);
-    }
+  /**
+   * Start playing
+   */
+  Slider.prototype.play = function() {
+    // Test whether already playing
+    if (this.playTimeout) return;
 
-    var background = this.dom.background;
-    if (background.parentNode) {
-      background.parentNode.removeChild(background);
-    }
+    this.playNext();
 
-    var axis = this.dom.axis;
-    if (axis.parentNode) {
-      axis.parentNode.removeChild(axis);
+    if (this.frame) {
+      this.frame.play.value = 'Stop';
     }
   };
 
   /**
-   * Add an item to the group
-   * @param {Item} item
+   * Stop playing
    */
-  Group.prototype.add = function(item) {
-    this.items[item.id] = item;
-    item.setParent(this);
+  Slider.prototype.stop = function() {
+    clearInterval(this.playTimeout);
+    this.playTimeout = undefined;
 
-    if (item instanceof ItemRange && 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);
+    if (this.frame) {
+      this.frame.play.value = 'Play';
     }
   };
 
   /**
-   * Remove an item from the group
-   * @param {Item} item
+   * Set a callback function which will be triggered when the value of the
+   * slider bar has changed.
    */
-  Group.prototype.remove = function(item) {
-    delete this.items[item.id];
-    item.setParent(this.itemSet);
-
-    // remove from visible items
-    var index = this.visibleItems.indexOf(item);
-    if (index != -1) this.visibleItems.splice(index, 1);
-
-    // TODO: also remove from ordered items?
+  Slider.prototype.setOnChangeCallback = function(callback) {
+    this.onChangeCallback = callback;
   };
 
   /**
-   * Remove an item from the corresponding DataSet
-   * @param {Item} item
+   * Set the interval for playing the list
+   * @param {Number} interval   The interval in milliseconds
    */
-  Group.prototype.removeFromDataSet = function(item) {
-    this.itemSet.removeItem(item.id);
+  Slider.prototype.setPlayInterval = function(interval) {
+    this.playInterval = interval;
   };
 
   /**
-   * Reorder the items
+   * Retrieve the current play interval
+   * @return {Number} interval   The interval in milliseconds
    */
-  Group.prototype.order = function() {
-    var array = util.toArray(this.items);
-    this.orderedItems.byStart = array;
-    this.orderedItems.byEnd = this._constructByEndArray(array);
-
-    stack.orderByStart(this.orderedItems.byStart);
-    stack.orderByEnd(this.orderedItems.byEnd);
+  Slider.prototype.getPlayInterval = function(interval) {
+    return this.playInterval;
   };
 
   /**
-   * Create an array containing all items being a range (having an end date)
-   * @param {Item[]} array
-   * @returns {ItemRange[]}
-   * @private
+   * Set looping on or off
+   * @pararm {boolean} doLoop  If true, the slider will jump to the start when
+   *               the end is passed, and will jump to the end
+   *               when the start is passed.
    */
-  Group.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+  Slider.prototype.setPlayLoop = function(doLoop) {
+    this.playLoop = doLoop;
+  };
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof ItemRange) {
-        endArray.push(array[i]);
-      }
+
+  /**
+   * Execute the onchange callback function
+   */
+  Slider.prototype.onChange = function() {
+    if (this.onChangeCallback !== undefined) {
+      this.onChangeCallback();
     }
-    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.
-   * @private
+   * redraw the slider on the correct place
    */
-  Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
-    var initialPosByStart,
-        newVisibleItems = [],
-        i;
-
-    // first check if the items that were in view previously are still in view.
-    // this handles the case for the ItemRange that is both before and after the current one.
-    if (visibleItems.length > 0) {
-      for (i = 0; i < visibleItems.length; i++) {
-        this._checkIfVisible(visibleItems[i], newVisibleItems, range);
-      }
-    }
+  Slider.prototype.redraw = function() {
+    if (this.frame) {
+      // resize the bar
+      this.frame.bar.style.top = (this.frame.clientHeight/2 -
+        this.frame.bar.offsetHeight/2) + 'px';
+      this.frame.bar.style.width = (this.frame.clientWidth -
+        this.frame.prev.clientWidth -
+        this.frame.play.clientWidth -
+        this.frame.next.clientWidth - 30)  + 'px';
 
-    // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
-    if (newVisibleItems.length == 0) {
-      initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
-    }
-    else {
-      initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
+      // position the slider button
+      var left = this.indexToLeft(this.index);
+      this.frame.slide.style.left = (left) + 'px';
     }
+  };
 
-    // use visible search to find a visible ItemRange (only based on endTime)
-    var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
-
-    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
-    if (initialPosByStart != -1) {
-      for (i = initialPosByStart; i >= 0; i--) {
-        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
-      }
-      for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
-        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
-      }
-    }
 
-    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
-    if (initialPosByEnd != -1) {
-      for (i = initialPosByEnd; i >= 0; i--) {
-        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
-      }
-      for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
-        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
-      }
-    }
+  /**
+   * Set the list with values for the slider
+   * @param {Array} values   A javascript array with values (any type)
+   */
+  Slider.prototype.setValues = function(values) {
+    this.values = values;
 
-    return newVisibleItems;
+    if (this.values.length > 0)
+      this.setIndex(0);
+    else
+      this.index = undefined;
   };
 
-
-
   /**
-   * this function checks if an item is invisible. If it is NOT we make it visible
-   * and add it to the global visible items. If it is, return true.
-   *
-   * @param {Item} item
-   * @param {Item[]} visibleItems
-   * @param {{start:number, end:number}} range
-   * @returns {boolean}
-   * @private
+   * Select a value by its index
+   * @param {Number} index
    */
-  Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
-    if (item.isVisible(range)) {
-      if (!item.displayed) item.show();
-      item.repositionX();
-      if (visibleItems.indexOf(item) == -1) {
-        visibleItems.push(item);
-      }
-      return false;
+  Slider.prototype.setIndex = function(index) {
+    if (index < this.values.length) {
+      this.index = index;
+
+      this.redraw();
+      this.onChange();
     }
     else {
-      if (item.displayed) item.hide();
-      return true;
+      throw 'Error: index out of range';
     }
   };
 
   /**
-   * 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
+   * retrieve the index of the currently selected vaue
+   * @return {Number} index
    */
-  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();
-    }
+  Slider.prototype.getIndex = function() {
+    return this.index;
   };
 
-  module.exports = Group;
 
+  /**
+   * retrieve the currently selected value
+   * @return {*} value
+   */
+  Slider.prototype.get = function() {
+    return this.values[this.index];
+  };
 
-/***/ },
-/* 18 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var Hammer = __webpack_require__(49);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Component = __webpack_require__(12);
-  var Group = __webpack_require__(17);
-  var ItemBox = __webpack_require__(23);
-  var ItemPoint = __webpack_require__(24);
-  var ItemRange = __webpack_require__(25);
+  Slider.prototype._onMouseDown = function(event) {
+    // only react on left mouse button down
+    var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
+    if (!leftButtonDown) return;
 
+    this.startClientX = event.clientX;
+    this.startSlideX = parseFloat(this.frame.slide.style.left);
 
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+    this.frame.style.cursor = 'move';
 
-  /**
-   * 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
-   */
-  function ItemSet(body, options) {
-    this.body = body;
+    // add event listeners to handle moving the contents
+    // we store the function onmousemove and onmouseup in the graph, so we can
+    // remove the eventlisteners lateron in the function mouseUp()
+    var me = this;
+    this.onmousemove = function (event) {me._onMouseMove(event);};
+    this.onmouseup   = function (event) {me._onMouseUp(event);};
+    G3DaddEventListener(document, 'mousemove', this.onmousemove);
+    G3DaddEventListener(document, 'mouseup',   this.onmouseup);
+    G3DpreventDefault(event);
+  };
 
-    this.defaultOptions = {
-      type: null,  // 'box', 'point', 'range'
-      orientation: 'bottom',  // 'top' or 'bottom'
-      align: 'center', // alignment of box items
-      stack: true,
-      groupOrder: null,
 
-      selectable: true,
-      editable: {
-        updateTime: false,
-        updateGroup: false,
-        add: false,
-        remove: false
-      },
+  Slider.prototype.leftToIndex = function (left) {
+    var width = parseFloat(this.frame.bar.style.width) -
+      this.frame.slide.clientWidth - 10;
+    var x = left - 3;
 
-      onAdd: function (item, callback) {
-        callback(item);
-      },
-      onUpdate: function (item, callback) {
-        callback(item);
-      },
-      onMove: function (item, callback) {
-        callback(item);
-      },
-      onRemove: function (item, callback) {
-        callback(item);
-      },
+    var index = Math.round(x / width * (this.values.length-1));
+    if (index < 0) index = 0;
+    if (index > this.values.length-1) index = this.values.length-1;
 
-      margin: {
-        item: 10,
-        axis: 20
-      },
-      padding: 5
-    };
+    return index;
+  };
 
-    // options is shared by this ItemSet and all its items
-    this.options = util.extend({}, this.defaultOptions);
+  Slider.prototype.indexToLeft = function (index) {
+    var width = parseFloat(this.frame.bar.style.width) -
+      this.frame.slide.clientWidth - 10;
 
-    // options for getting items from the DataSet with the correct type
-    this.itemOptions = {
-      type: {start: 'Date', end: 'Date'}
-    };
+    var x = index / (this.values.length-1) * width;
+    var left = x + 3;
 
-    this.conversion = {
-      toScreen: body.util.toScreen,
-      toTime: body.util.toTime
-    };
-    this.dom = {};
-    this.props = {};
-    this.hammer = null;
+    return left;
+  };
 
-    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);
-      }
-    };
 
-    // 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);
-      }
-    };
+  Slider.prototype._onMouseMove = function (event) {
+    var diff = event.clientX - this.startClientX;
+    var x = this.startSlideX + diff;
 
-    this.items = {};      // object with an Item for every data item
-    this.groups = {};     // Group object for every group
-    this.groupIds = [];
+    var index = this.leftToIndex(x);
 
-    this.selection = [];  // list with the ids of all selected nodes
-    this.stackDirty = true; // if true, all items will be restacked on next redraw
+    this.setIndex(index);
 
-    this.touchParams = {}; // stores properties while dragging
-    // create the HTML DOM
+    G3DpreventDefault();
+  };
 
-    this._create();
 
-    this.setOptions(options);
-  }
+  Slider.prototype._onMouseUp = function (event) {
+    this.frame.style.cursor = 'auto';
 
-  ItemSet.prototype = new Component();
+    // remove event listeners
+    G3DremoveEventListener(document, 'mousemove', this.onmousemove);
+    G3DremoveEventListener(document, 'mouseup', this.onmouseup);
 
-  // available item types will be registered here
-  ItemSet.types = {
-    box: ItemBox,
-    range: ItemRange,
-    point: ItemPoint
+    G3DpreventDefault();
   };
 
-  /**
-   * Create the HTML DOM for the ItemSet
-   */
-  ItemSet.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'itemset';
-    frame['timeline-itemset'] = this;
-    this.dom.frame = frame;
-
-    // create background panel
-    var background = document.createElement('div');
-    background.className = 'background';
-    frame.appendChild(background);
-    this.dom.background = background;
-
-    // create foreground panel
-    var foreground = document.createElement('div');
-    foreground.className = 'foreground';
-    frame.appendChild(foreground);
-    this.dom.foreground = foreground;
 
-    // create axis panel
-    var axis = document.createElement('div');
-    axis.className = 'axis';
-    this.dom.axis = axis;
 
-    // create labelset
-    var labelSet = document.createElement('div');
-    labelSet.className = 'labelset';
-    this.dom.labelSet = labelSet;
+  /**--------------------------------------------------------------------------**/
 
-    // create ungrouped Group
-    this._updateUngrouped();
 
-    // 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, {
-      prevent_default: true
-    });
 
-    // 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));
-
-    // single select (or unselect) when tapping an item
-    this.hammer.on('tap',  this._onSelectItem.bind(this));
-
-    // multi select when holding mouse/touch, or on ctrl+click
-    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
-
-    // add item on doubletap
-    this.hammer.on('doubletap', this._onAddItem.bind(this));
-
-    // attach to the DOM
-    this.show();
+  /**
+   * Retrieve the absolute left value of a DOM element
+   * @param {Element} elem  A dom element, for example a div
+   * @return {Number} left    The absolute left position of this element
+   *                in the browser page.
+   */
+  getAbsoluteLeft = function(elem) {
+    var left = 0;
+    while( elem !== null ) {
+      left += elem.offsetLeft;
+      left -= elem.scrollLeft;
+      elem = elem.offsetParent;
+    }
+    return left;
   };
 
   /**
-   * 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', or 'range'. The default
-   *                              Style can be overwritten by individual items.
-   *                           {String} align
-   *                              Alignment for the items, only applicable for
-   *                              ItemBox. 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
-   *                              Margin between items in pixels. 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.
+   * Retrieve the absolute top value of a DOM element
+   * @param {Element} elem  A dom element, for example a div
+   * @return {Number} top     The absolute top position of this element
+   *                in the browser page.
    */
-  ItemSet.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
-      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 = options.margin;
-        }
-        else if (typeof options.margin === 'object'){
-          util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
-        }
-      }
-
-      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);
-        }
-      }
-
-      // callback functions
-      var addCallback = (function (name) {
-        if (name in options) {
-          var fn = options[name];
-          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'].forEach(addCallback);
-
-      // force the itemSet to refresh: options like orientation and margins may be changed
-      this.markDirty();
+  getAbsoluteTop = function(elem) {
+    var top = 0;
+    while( elem !== null ) {
+      top += elem.offsetTop;
+      top -= elem.scrollTop;
+      elem = elem.offsetParent;
     }
+    return top;
   };
 
   /**
-   * Mark the ItemSet dirty so it will refresh everything with next redraw
+   * Get the horizontal mouse position from a mouse event
+   * @param {Event} event
+   * @return {Number} mouse x
    */
-  ItemSet.prototype.markDirty = function() {
-    this.groupIds = [];
-    this.stackDirty = true;
+  getMouseX = function(event) {
+    if ('clientX' in event) return event.clientX;
+    return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
   };
 
   /**
-   * Destroy the ItemSet
+   * Get the vertical mouse position from a mouse event
+   * @param {Event} event
+   * @return {Number} mouse y
    */
-  ItemSet.prototype.destroy = function() {
-    this.hide();
-    this.setItems(null);
-    this.setGroups(null);
+  getMouseY = function(event) {
+    if ('clientY' in event) return event.clientY;
+    return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
+  };
 
-    this.hammer = null;
+  module.exports = Graph3d;
 
-    this.body = null;
-    this.conversion = null;
-  };
 
+/***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
+
+  
   /**
-   * Hide the component from the DOM
+   * Expose `Emitter`.
    */
-  ItemSet.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);
-    }
-  };
+  module.exports = Emitter;
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Initialize a new `Emitter`.
+   *
+   * @api public
    */
-  ItemSet.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);
-    }
 
-    // show labelset containing labels
-    if (!this.dom.labelSet.parentNode) {
-      this.body.dom.left.appendChild(this.dom.labelSet);
-    }
+  function Emitter(obj) {
+    if (obj) return mixin(obj);
   };
 
   /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {Array} [ids] An array with zero or more id's of the items to be
-   *                      selected. If ids is an empty array, all items will be
-   *                      unselected.
+   * Mixin the emitter properties.
+   *
+   * @param {Object} obj
+   * @return {Object}
+   * @api private
    */
-  ItemSet.prototype.setSelection = function(ids) {
-    var i, ii, id, item;
-
-    if (ids) {
-      if (!Array.isArray(ids)) {
-        throw new TypeError('Array expected');
-      }
-
-      // 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();
-        }
-      }
+  function mixin(obj) {
+    for (var key in Emitter.prototype) {
+      obj[key] = Emitter.prototype[key];
     }
-  };
+    return obj;
+  }
 
   /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
+   * Listen on the given `event` with `fn`.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  ItemSet.prototype.getSelection = function() {
-    return this.selection.concat([]);
+
+  Emitter.prototype.on =
+  Emitter.prototype.addEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
+    (this._callbacks[event] = this._callbacks[event] || [])
+      .push(fn);
+    return this;
   };
 
   /**
-   * Deselect a selected item
-   * @param {String | Number} id
-   * @private
+   * Adds an `event` listener that will be invoked a single
+   * time then automatically removed.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  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;
-      }
+
+  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;
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * Remove the given callback for `event` or all
+   * registered callbacks.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
    */
-  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;
 
-    // update class name
-    frame.className = 'itemset' + (editable ? ' editable' : '');
+  Emitter.prototype.off =
+  Emitter.prototype.removeListener =
+  Emitter.prototype.removeAllListeners =
+  Emitter.prototype.removeEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
 
-    // reorder the groups (if needed)
-    resized = this._orderGroups() || resized;
+    // all
+    if (0 == arguments.length) {
+      this._callbacks = {};
+      return this;
+    }
 
-    // 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;
+    // specific event
+    var callbacks = this._callbacks[event];
+    if (!callbacks) return this;
 
-    // redraw all groups
-    var restack = this.stackDirty,
-        firstGroup = this._firstGroup(),
-        firstMargin = {
-          item: margin.item,
-          axis: margin.axis
-        },
-        nonFirstMargin = {
-          item: margin.item,
-          axis: margin.item / 2
-        },
-        height = 0,
-        minHeight = margin.axis + margin.item;
-    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;
+    // remove all handlers
+    if (1 == arguments.length) {
+      delete this._callbacks[event];
+      return this;
+    }
 
-    // update frame height
-    frame.style.height  = asSize(height);
+    // 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;
+  };
 
-    // calculate actual size and position
-    this.props.top = frame.offsetTop;
-    this.props.left = frame.offsetLeft;
-    this.props.width = frame.offsetWidth;
-    this.props.height = height;
+  /**
+   * Emit `event` with the given args.
+   *
+   * @param {String} event
+   * @param {Mixed} ...
+   * @return {Emitter}
+   */
 
-    // 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 = this.body.domProps.border.left + 'px';
+  Emitter.prototype.emit = function(event){
+    this._callbacks = this._callbacks || {};
+    var args = [].slice.call(arguments, 1)
+      , callbacks = this._callbacks[event];
 
-    // check if this component is resized
-    resized = this._isResized() || resized;
+    if (callbacks) {
+      callbacks = callbacks.slice(0);
+      for (var i = 0, len = callbacks.length; i < len; ++i) {
+        callbacks[i].apply(this, args);
+      }
+    }
 
-    return resized;
+    return this;
   };
 
   /**
-   * Get the first group, aligned with the axis
-   * @return {Group | null} firstGroup
-   * @private
+   * Return array of callbacks for `event`.
+   *
+   * @param {String} event
+   * @return {Array}
+   * @api public
    */
-  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;
+  Emitter.prototype.listeners = function(event){
+    this._callbacks = this._callbacks || {};
+    return this._callbacks[event] || [];
   };
 
   /**
-   * Create or delete the group holding all ungrouped items. This group is used when
-   * there are no groups specified.
-   * @protected
+   * Check if this emitter has `event` handlers.
+   *
+   * @param {String} event
+   * @return {Boolean}
+   * @api public
    */
-  ItemSet.prototype._updateUngrouped = function() {
-    var ungrouped = this.groups[UNGROUPED];
 
-    if (this.groupsData) {
-      // remove the group holding all ungrouped items
-      if (ungrouped) {
-        ungrouped.hide();
-        delete this.groups[UNGROUPED];
-      }
-    }
-    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;
+  Emitter.prototype.hasListeners = function(event){
+    return !! this.listeners(event).length;
+  };
 
-        for (var itemId in this.items) {
-          if (this.items.hasOwnProperty(itemId)) {
-            ungrouped.add(this.items[itemId]);
-          }
-        }
 
-        ungrouped.show();
-      }
-    }
+/***/ },
+/* 13 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * @prototype Point3d
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {Number} [z]
+   */
+  function Point3d(x, y, z) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
+    this.z = z !== undefined ? z : 0;
   };
 
   /**
-   * Get the element for the labelset
-   * @return {HTMLElement} labelSet
+   * Subtract the two provided points, returns a-b
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} a-b
    */
-  ItemSet.prototype.getLabelSet = function() {
-    return this.dom.labelSet;
+  Point3d.subtract = function(a, b) {
+    var sub = new Point3d();
+    sub.x = a.x - b.x;
+    sub.y = a.y - b.y;
+    sub.z = a.z - b.z;
+    return sub;
   };
 
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Add the two provided points, returns a+b
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} a+b
    */
-  ItemSet.prototype.setItems = function(items) {
-    var me = this,
-        ids,
-        oldItemsData = this.itemsData;
+  Point3d.add = function(a, b) {
+    var sum = new Point3d();
+    sum.x = a.x + b.x;
+    sum.y = a.y + b.y;
+    sum.z = a.z + b.z;
+    return sum;
+  };
 
-    // 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');
-    }
+  /**
+   * Calculate the average of two 3d points
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} The average, (a+b)/2
+   */
+  Point3d.avg = function(a, b) {
+    return new Point3d(
+            (a.x + b.x) / 2,
+            (a.y + b.y) / 2,
+            (a.z + b.z) / 2
+    );
+  };
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
+  /**
+   * Calculate the cross product of the two provided points, returns axb
+   * Documentation: http://en.wikipedia.org/wiki/Cross_product
+   * @param {Point3d} a
+   * @param {Point3d} b
+   * @return {Point3d} cross product axb
+   */
+  Point3d.crossProduct = function(a, b) {
+    var crossproduct = new Point3d();
 
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
-    }
+    crossproduct.x = a.y * b.z - a.z * b.y;
+    crossproduct.y = a.z * b.x - a.x * b.z;
+    crossproduct.z = a.x * b.y - a.y * b.x;
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+    return crossproduct;
+  };
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
 
-      // update the group holding all ungrouped items
-      this._updateUngrouped();
-    }
+  /**
+   * Rtrieve the length of the vector (or the distance from this point to the origin
+   * @return {Number}  length
+   */
+  Point3d.prototype.length = function() {
+    return Math.sqrt(
+            this.x * this.x +
+            this.y * this.y +
+            this.z * this.z
+    );
   };
 
+  module.exports = Point3d;
+
+
+/***/ },
+/* 14 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Get the current items
-   * @returns {vis.DataSet | null}
+   * @prototype Point2d
+   * @param {Number} [x]
+   * @param {Number} [y]
    */
-  ItemSet.prototype.getItems = function() {
-    return this.itemsData;
+  Point2d = function (x, y) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
   };
 
+  module.exports = Point2d;
+
+
+/***/ },
+/* 15 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var DataView = __webpack_require__(10);
+
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * @class Filter
+   *
+   * @param {DataSet} data The google data table
+   * @param {Number}  column             The index of the column to be filtered
+   * @param {Graph} graph           The graph
    */
-  ItemSet.prototype.setGroups = function(groups) {
-    var me = this,
-        ids;
-
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  function Filter (data, column, graph) {
+    this.data = data;
+    this.column = column;
+    this.graph = graph; // the parent graph
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
-    }
+    this.index = undefined;
+    this.value = undefined;
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
-    }
-    else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
-    }
+    // read all distinct values and select the first one
+    this.values = graph.getDistinctValues(data.get(), this.column);
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
+    // sort both numeric and string values correctly
+    this.values.sort(function (a, b) {
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
 
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
+    if (this.values.length > 0) {
+      this.selectValue(0);
     }
 
-    // update the group holding all ungrouped items
-    this._updateUngrouped();
+    // create an array with the filtered datapoints. this will be loaded afterwards
+    this.dataPoints = [];
 
-    // update the order of all items in each group
-    this._order();
+    this.loaded = false;
+    this.onLoadCallback = undefined;
 
-    this.body.emitter.emit('change');
+    if (graph.animationPreload) {
+      this.loaded = false;
+      this.loadInBackground();
+    }
+    else {
+      this.loaded = true;
+    }
   };
 
+
   /**
-   * Get the current groups
-   * @returns {vis.DataSet | null} groups
+   * Return the label
+   * @return {string} label
    */
-  ItemSet.prototype.getGroups = function() {
-    return this.groupsData;
+  Filter.prototype.isLoaded = function() {
+    return this.loaded;
   };
 
+
   /**
-   * Remove an item by its id
-   * @param {String | Number} id
+   * Return the loaded progress
+   * @return {Number} percentage between 0 and 100
    */
-  ItemSet.prototype.removeItem = function(id) {
-    var item = this.itemsData.get(id),
-        dataset = this.itemsData.getDataSet();
+  Filter.prototype.getLoadedProgress = function() {
+    var len = this.values.length;
 
-    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);
-        }
-      });
+    var i = 0;
+    while (this.dataPoints[i]) {
+      i++;
     }
+
+    return Math.round(i / len * 100);
   };
 
+
   /**
-   * Handle updated items
-   * @param {Number[]} ids
-   * @protected
+   * Return the label
+   * @return {string} label
    */
-  ItemSet.prototype._onUpdate = function(ids) {
-    var me = this;
-
-    ids.forEach(function (id) {
-      var itemData = me.itemsData.get(id, me.itemOptions),
-          item = me.items[id],
-          type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
-
-      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);
-        }
-      }
-
-      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 + '"');
-        }
-      }
-    });
-
-    this._order();
-    this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
+  Filter.prototype.getLabel = function() {
+    return this.graph.filterLabel;
   };
 
+
   /**
-   * Handle added items
-   * @param {Number[]} ids
-   * @protected
+   * Return the columnIndex of the filter
+   * @return {Number} columnIndex
    */
-  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
+  Filter.prototype.getColumn = function() {
+    return this.column;
+  };
 
   /**
-   * Handle removed items
-   * @param {Number[]} ids
-   * @protected
+   * Return the currently selected value. Returns undefined if there is no selection
+   * @return {*} value
    */
-  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);
-      }
-    });
+  Filter.prototype.getSelectedValue = function() {
+    if (this.index === undefined)
+      return undefined;
 
-    if (count) {
-      // update order
-      this._order();
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
-    }
+    return this.values[this.index];
   };
 
   /**
-   * Update the order of item in all groups
-   * @private
+   * Retrieve all values of the filter
+   * @return {Array} values
    */
-  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();
-    });
+  Filter.prototype.getValues = function() {
+    return this.values;
   };
 
   /**
-   * Handle updated groups
-   * @param {Number[]} ids
-   * @private
+   * Retrieve one value of the filter
+   * @param {Number}  index
+   * @return {*} value
    */
-  ItemSet.prototype._onUpdateGroups = function(ids) {
-    this._onAddGroups(ids);
+  Filter.prototype.getValue = function(index) {
+    if (index >= this.values.length)
+      throw 'Error: index out of range';
+
+    return this.values[index];
   };
 
+
   /**
-   * Handle changed groups
-   * @param {Number[]} ids
-   * @private
+   * Retrieve the (filtered) dataPoints for the currently selected filter index
+   * @param {Number} [index] (optional)
+   * @return {Array} dataPoints
    */
-  ItemSet.prototype._onAddGroups = function(ids) {
-    var me = this;
+  Filter.prototype._getDataPoints = function(index) {
+    if (index === undefined)
+      index = this.index;
 
-    ids.forEach(function (id) {
-      var groupData = me.groupsData.get(id);
-      var group = me.groups[id];
+    if (index === undefined)
+      return [];
 
-      if (!group) {
-        // check for reserved ids
-        if (id == UNGROUPED) {
-          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
-        }
+    var dataPoints;
+    if (this.dataPoints[index]) {
+      dataPoints = this.dataPoints[index];
+    }
+    else {
+      var f = {};
+      f.column = this.column;
+      f.value = this.values[index];
 
-        var groupOptions = Object.create(me.options);
-        util.extend(groupOptions, {
-          height: null
-        });
+      var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
+      dataPoints = this.graph._getDataPoints(dataView);
 
-        group = new Group(id, groupData, me);
-        me.groups[id] = group;
+      this.dataPoints[index] = dataPoints;
+    }
 
-        // 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);
-            }
-          }
-        }
+    return dataPoints;
+  };
 
-        group.order();
-        group.show();
-      }
-      else {
-        // update group
-        group.setData(groupData);
-      }
-    });
 
-    this.body.emitter.emit('change');
-  };
 
   /**
-   * Handle removed groups
-   * @param {Number[]} ids
-   * @private
+   * Set a callback function when the filter is fully loaded.
    */
-  ItemSet.prototype._onRemoveGroups = function(ids) {
-    var groups = this.groups;
-    ids.forEach(function (id) {
-      var group = groups[id];
+  Filter.prototype.setOnLoadCallback = function(callback) {
+    this.onLoadCallback = callback;
+  };
 
-      if (group) {
-        group.hide();
-        delete groups[id];
-      }
-    });
 
-    this.markDirty();
+  /**
+   * Add a value to the list with available values for this filter
+   * No double entries will be created.
+   * @param {Number} index
+   */
+  Filter.prototype.selectValue = function(index) {
+    if (index >= this.values.length)
+      throw 'Error: index out of range';
 
-    this.body.emitter.emit('change');
+    this.index = index;
+    this.value = this.values[index];
   };
 
   /**
-   * Reorder the groups if needed
-   * @return {boolean} changed
-   * @private
+   * Load all filtered rows in the background one by one
+   * Start this method without providing an index!
    */
-  ItemSet.prototype._orderGroups = function () {
-    if (this.groupsData) {
-      // reorder the groups
-      var groupIds = this.groupsData.getIds({
-        order: this.options.groupOrder
-      });
+  Filter.prototype.loadInBackground = function(index) {
+    if (index === undefined)
+      index = 0;
 
-      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();
-        });
+    var frame = this.graph.frame;
 
-        // show the groups again, attach them to the DOM in correct order
-        groupIds.forEach(function (groupId) {
-          groups[groupId].show();
-        });
+    if (index < this.values.length) {
+      var dataPointsTemp = this._getDataPoints(index);
+      //this.graph.redrawInfo(); // TODO: not neat
 
-        this.groupIds = groupIds;
+      // create a progress box
+      if (frame.progress === undefined) {
+        frame.progress = document.createElement('DIV');
+        frame.progress.style.position = 'absolute';
+        frame.progress.style.color = 'gray';
+        frame.appendChild(frame.progress);
       }
+      var progress = this.getLoadedProgress();
+      frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
+      // TODO: this is no nice solution...
+      frame.progress.style.bottom = 60 + 'px'; // TODO: use height of slider
+      frame.progress.style.left = 10 + 'px';
 
-      return changed;
+      var me = this;
+      setTimeout(function() {me.loadInBackground(index+1);}, 10);
+      this.loaded = false;
     }
     else {
-      return false;
+      this.loaded = true;
+
+      // remove the progress box
+      if (frame.progress !== undefined) {
+        frame.removeChild(frame.progress);
+        frame.progress = undefined;
+      }
+
+      if (this.onLoadCallback)
+        this.onLoadCallback();
     }
   };
 
+  module.exports = Filter;
+
+
+/***/ },
+/* 16 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Add a new item
-   * @param {Item} item
-   * @private
+   * @prototype StepNumber
+   * The class StepNumber is an iterator for Numbers. You provide a start and end
+   * value, and a best step size. StepNumber itself rounds to fixed values and
+   * a finds the step that best fits the provided step.
+   *
+   * If prettyStep is true, the step size is chosen as close as possible to the
+   * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
+   *
+   * Example usage:
+   *   var step = new StepNumber(0, 10, 2.5, true);
+   *   step.start();
+   *   while (!step.end()) {
+   *   alert(step.getCurrent());
+   *   step.next();
+   *   }
+   *
+   * Version: 1.0
+   *
+   * @param {Number} start     The start value
+   * @param {Number} end     The end value
+   * @param {Number} step    Optional. Step size. Must be a positive value.
+   * @param {boolean} prettyStep Optional. If true, the step size is rounded
+   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
    */
-  ItemSet.prototype._addItem = function(item) {
-    this.items[item.id] = item;
+  function StepNumber(start, end, step, prettyStep) {
+    // set default values
+    this._start = 0;
+    this._end = 0;
+    this._step = 1;
+    this.prettyStep = true;
+    this.precision = 5;
 
-    // add to group
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.add(item);
+    this._current = 0;
+    this.setRange(start, end, step, prettyStep);
   };
 
   /**
-   * Update an existing item
-   * @param {Item} item
-   * @param {Object} itemData
-   * @private
+   * Set a new range: start, end and step.
+   *
+   * @param {Number} start     The start value
+   * @param {Number} end     The end value
+   * @param {Number} step    Optional. Step size. Must be a positive value.
+   * @param {boolean} prettyStep Optional. If true, the step size is rounded
+   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
    */
-  ItemSet.prototype._updateItem = function(item, itemData) {
-    var oldGroupId = item.data.group;
+  StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
+    this._start = start ? start : 0;
+    this._end = end ? end : 0;
 
-    item.data = itemData;
-    if (item.displayed) {
-      item.redraw();
-    }
+    this.setStep(step, prettyStep);
+  };
 
-    // update group
-    if (oldGroupId != item.data.group) {
-      var oldGroup = this.groups[oldGroupId];
-      if (oldGroup) oldGroup.remove(item);
+  /**
+   * Set a new step size
+   * @param {Number} step    New step size. Must be a positive value
+   * @param {boolean} prettyStep Optional. If true, the provided step is rounded
+   *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   */
+  StepNumber.prototype.setStep = function(step, prettyStep) {
+    if (step === undefined || step <= 0)
+      return;
 
-      var groupId = this.groupsData ? item.data.group : UNGROUPED;
-      var group = this.groups[groupId];
-      if (group) group.add(item);
-    }
+    if (prettyStep !== undefined)
+      this.prettyStep = prettyStep;
+
+    if (this.prettyStep === true)
+      this._step = StepNumber.calculatePrettyStep(step);
+    else
+      this._step = step;
   };
 
   /**
-   * 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
+   * Calculate a nice step size, closest to the desired step size.
+   * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
+   * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
+   * @param {Number}  step  Desired step size
+   * @return {Number}     Nice step size
    */
-  ItemSet.prototype._removeItem = function(item) {
-    // remove from DOM
-    item.hide();
+  StepNumber.calculatePrettyStep = function (step) {
+    var log10 = function (x) {return Math.log(x) / Math.LN10;};
 
-    // remove from items
-    delete this.items[item.id];
+    // try three steps (multiple of 1, 2, or 5
+    var step1 = Math.pow(10, Math.round(log10(step))),
+        step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
+        step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
 
-    // remove from selection
-    var index = this.selection.indexOf(item.id);
-    if (index != -1) this.selection.splice(index, 1);
+    // choose the best step (closest to minimum step)
+    var prettyStep = step1;
+    if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
+    if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
 
-    // remove from group
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.remove(item);
+    // for safety
+    if (prettyStep <= 0) {
+      prettyStep = 1;
+    }
+
+    return prettyStep;
   };
 
   /**
-   * Create an array containing all items being a range (having an end date)
-   * @param array
-   * @returns {Array}
-   * @private
+   * returns the current value of the step
+   * @return {Number} current value
    */
-  ItemSet.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+  StepNumber.prototype.getCurrent = function () {
+    return parseFloat(this._current.toPrecision(this.precision));
+  };
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof ItemRange) {
-        endArray.push(array[i]);
-      }
-    }
-    return endArray;
+  /**
+   * returns the current step size
+   * @return {Number} current step size
+   */
+  StepNumber.prototype.getStep = function () {
+    return this._step;
   };
 
   /**
-   * 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
+   * Set the current value to the largest value smaller than start, which
+   * is a multiple of the step size
    */
-  ItemSet.prototype._onTouch = function (event) {
-    // store the touched item, used in _onDragStart
-    this.touchParams.item = ItemSet.itemFromTarget(event);
+  StepNumber.prototype.start = function() {
+    this._current = this._start - this._start % this._step;
   };
 
   /**
-   * Start dragging the selected events
-   * @param {Event} event
-   * @private
+   * Do a step, add the step size to the current value
    */
-  ItemSet.prototype._onDragStart = function (event) {
-    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
-      return;
-    }
+  StepNumber.prototype.next = function () {
+    this._current += this._step;
+  };
 
-    var item = this.touchParams.item || null,
-        me = this,
-        props;
+  /**
+   * Returns true whether the end is reached
+   * @return {boolean}  True if the current value has passed the end value.
+   */
+  StepNumber.prototype.end = function () {
+    return (this._current > this._end);
+  };
 
-    if (item && item.selected) {
-      var dragLeftItem = event.target.dragLeftItem;
-      var dragRightItem = event.target.dragRightItem;
+  module.exports = StepNumber;
 
-      if (dragLeftItem) {
-        props = {
-          item: dragLeftItem
-        };
 
-        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;
-        }
+/***/ },
+/* 17 */
+/***/ function(module, exports, __webpack_require__) {
 
-        this.touchParams.itemProps = [props];
-      }
-      else if (dragRightItem) {
-        props = {
-          item: dragRightItem
-        };
+  var Emitter = __webpack_require__(12);
+  var Hammer = __webpack_require__(3);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Range = __webpack_require__(18);
+  var TimeAxis = __webpack_require__(20);
+  var CurrentTime = __webpack_require__(22);
+  var CustomTime = __webpack_require__(23);
+  var ItemSet = __webpack_require__(24);
 
-        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;
-        }
+  /**
+   * Create a timeline visualization
+   * @param {HTMLElement} container
+   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
+   * @param {Object} [options]  See Timeline.setOptions for the available options.
+   * @constructor
+   */
+  function Timeline (container, items, options) {
+    if (!(this instanceof Timeline)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
+    }
 
-        this.touchParams.itemProps = [props];
-      }
-      else {
-        this.touchParams.itemProps = this.getSelection().map(function (id) {
-          var item = me.items[id];
-          var props = {
-            item: item
-          };
+    var me = this;
+    this.defaultOptions = {
+      start: null,
+      end:   null,
 
-          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;
-          }
+      autoResize: true,
 
-          return props;
-        });
-      }
+      orientation: 'bottom',
+      width: null,
+      height: null,
+      maxHeight: null,
+      minHeight: null
+    };
+    this.options = util.deepExtend({}, this.defaultOptions);
 
-      event.stopPropagation();
-    }
-  };
+    // Create the DOM, props, and emitter
+    this._create(container);
 
-  /**
-   * Drag selected items
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onDrag = function (event) {
-    if (this.touchParams.itemProps) {
-      var range = this.body.range,
-          snap = this.body.util.snap || null,
-          deltaX = event.gesture.deltaX,
-          scale = (this.props.width / (range.end - range.start)),
-          offset = deltaX / scale;
+    // all components listed here will be repainted automatically
+    this.components = [];
 
-      // move
-      this.touchParams.itemProps.forEach(function (props) {
-        if ('start' in props) {
-          var start = new Date(props.start + offset);
-          props.item.data.start = snap ? snap(start) : start;
-        }
+    this.body = {
+      dom: this.dom,
+      domProps: this.props,
+      emitter: {
+        on: this.on.bind(this),
+        off: this.off.bind(this),
+        emit: this.emit.bind(this)
+      },
+      util: {
+        snap: null, // will be specified after TimeAxis is created
+        toScreen: me._toScreen.bind(me),
+        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+        toTime: me._toTime.bind(me),
+        toGlobalTime : me._toGlobalTime.bind(me)
+      }
+    };
 
-        if ('end' in props) {
-          var end = new Date(props.end + offset);
-          props.item.data.end = snap ? snap(end) : end;
-        }
+    // range
+    this.range = new Range(this.body);
+    this.components.push(this.range);
+    this.body.range = this.range;
 
-        if ('group' in props) {
-          // drag from one group to another
-          var group = ItemSet.groupFromTarget(event);
-          if (group && group.groupId != props.item.data.group) {
-            var oldGroup = props.item.parent;
-            oldGroup.remove(props.item);
-            oldGroup.order();
-            group.add(props.item);
-            group.order();
+    // time axis
+    this.timeAxis = new TimeAxis(this.body);
+    this.components.push(this.timeAxis);
+    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
 
-            props.item.data.group = group.groupId;
-          }
-        }
-      });
+    // current time bar
+    this.currentTime = new CurrentTime(this.body);
+    this.components.push(this.currentTime);
 
-      // TODO: implement onMoving handler
+    // custom time bar
+    // Note: time bar will be attached in this.setOptions when selected
+    this.customTime = new CustomTime(this.body);
+    this.components.push(this.customTime);
 
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
+    // item set
+    this.itemSet = new ItemSet(this.body);
+    this.components.push(this.itemSet);
 
-      event.stopPropagation();
+    this.itemsData = null;      // DataSet
+    this.groupsData = null;     // DataSet
+
+    // apply options
+    if (options) {
+      this.setOptions(options);
     }
-  };
+
+    // create itemset
+    if (items) {
+      this.setItems(items);
+    }
+    else {
+      this.redraw();
+    }
+  }
+
+  // turn Timeline into an event emitter
+  Emitter(Timeline.prototype);
 
   /**
-   * End of dragging selected items
-   * @param {Event} event
+   * Create the main DOM for the Timeline: a root panel containing left, right,
+   * top, bottom, content, and background panel.
+   * @param {Element} container  The container element where the Timeline will
+   *                             be attached.
    * @private
    */
-  ItemSet.prototype._onDragEnd = function (event) {
-    if (this.touchParams.itemProps) {
-      // prepare a change set for the changed items
-      var changes = [],
-          me = this,
-          dataset = this.itemsData.getDataSet();
+  Timeline.prototype._create = function (container) {
+    this.dom = {};
 
-      this.touchParams.itemProps.forEach(function (props) {
-        var id = props.item.id,
-            itemData = me.itemsData.get(id, me.itemOptions);
+    this.dom.root                 = document.createElement('div');
+    this.dom.background           = document.createElement('div');
+    this.dom.backgroundVertical   = document.createElement('div');
+    this.dom.backgroundHorizontal = document.createElement('div');
+    this.dom.centerContainer      = document.createElement('div');
+    this.dom.leftContainer        = document.createElement('div');
+    this.dom.rightContainer       = document.createElement('div');
+    this.dom.center               = document.createElement('div');
+    this.dom.left                 = document.createElement('div');
+    this.dom.right                = document.createElement('div');
+    this.dom.top                  = document.createElement('div');
+    this.dom.bottom               = document.createElement('div');
+    this.dom.shadowTop            = document.createElement('div');
+    this.dom.shadowBottom         = document.createElement('div');
+    this.dom.shadowTopLeft        = document.createElement('div');
+    this.dom.shadowBottomLeft     = document.createElement('div');
+    this.dom.shadowTopRight       = document.createElement('div');
+    this.dom.shadowBottomRight    = document.createElement('div');
 
-        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.dom.background.className           = 'vispanel background';
+    this.dom.backgroundVertical.className   = 'vispanel background vertical';
+    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
+    this.dom.centerContainer.className      = 'vispanel center';
+    this.dom.leftContainer.className        = 'vispanel left';
+    this.dom.rightContainer.className       = 'vispanel right';
+    this.dom.top.className                  = 'vispanel top';
+    this.dom.bottom.className               = 'vispanel bottom';
+    this.dom.left.className                 = 'content';
+    this.dom.center.className               = 'content';
+    this.dom.right.className                = 'content';
+    this.dom.shadowTop.className            = 'shadow top';
+    this.dom.shadowBottom.className         = 'shadow bottom';
+    this.dom.shadowTopLeft.className        = 'shadow top';
+    this.dom.shadowBottomLeft.className     = 'shadow bottom';
+    this.dom.shadowTopRight.className       = 'shadow top';
+    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-        // 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
-              if ('start' in props) props.item.data.start = props.start;
-              if ('end' in props)   props.item.data.end   = props.end;
+    this.dom.root.appendChild(this.dom.background);
+    this.dom.root.appendChild(this.dom.backgroundVertical);
+    this.dom.root.appendChild(this.dom.backgroundHorizontal);
+    this.dom.root.appendChild(this.dom.centerContainer);
+    this.dom.root.appendChild(this.dom.leftContainer);
+    this.dom.root.appendChild(this.dom.rightContainer);
+    this.dom.root.appendChild(this.dom.top);
+    this.dom.root.appendChild(this.dom.bottom);
 
-              me.stackDirty = true; // force re-stacking of all items next redraw
-              me.body.emitter.emit('change');
-            }
-          });
-        }
-      });
-      this.touchParams.itemProps = null;
+    this.dom.centerContainer.appendChild(this.dom.center);
+    this.dom.leftContainer.appendChild(this.dom.left);
+    this.dom.rightContainer.appendChild(this.dom.right);
 
-      // apply the changes to the data (if there are changes)
-      if (changes.length) {
-        dataset.update(changes);
-      }
+    this.dom.centerContainer.appendChild(this.dom.shadowTop);
+    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
+    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
+    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
+    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
+    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-      event.stopPropagation();
-    }
+    this.on('rangechange', this.redraw.bind(this));
+    this.on('change', this.redraw.bind(this));
+    this.on('touch', this._onTouch.bind(this));
+    this.on('pinch', this._onPinch.bind(this));
+    this.on('dragstart', this._onDragStart.bind(this));
+    this.on('drag', this._onDrag.bind(this));
+
+    // create event listeners for all interesting events, these events will be
+    // emitted via emitter
+    this.hammer = Hammer(this.dom.root, {
+      prevent_default: true
+    });
+    this.listeners = {};
+
+    var me = this;
+    var events = [
+      'touch', 'pinch',
+      'tap', 'doubletap', 'hold',
+      'dragstart', 'drag', 'dragend',
+      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    ];
+    events.forEach(function (event) {
+      var listener = function () {
+        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
+        me.emit.apply(me, args);
+      };
+      me.hammer.on(event, listener);
+      me.listeners[event] = listener;
+    });
+
+    // size properties of each of the panels
+    this.props = {
+      root: {},
+      background: {},
+      centerContainer: {},
+      leftContainer: {},
+      rightContainer: {},
+      center: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {},
+      border: {},
+      scrollTop: 0,
+      scrollTopMin: 0
+    };
+    this.touch = {}; // store state information needed for touch events
+
+    // attach the root panel to the provided container
+    if (!container) throw new Error('No container provided');
+    container.appendChild(this.dom.root);
   };
 
   /**
-   * Handle selecting/deselecting an item when tapping it
-   * @param {Event} event
-   * @private
+   * Destroy the Timeline, clean up all DOM elements and event listeners.
    */
-  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;
-    }
+  Timeline.prototype.destroy = function () {
+    // unbind datasets
+    this.clear();
 
-    var oldSelection = this.getSelection();
+    // remove all event listeners
+    this.off();
 
-    var item = ItemSet.itemFromTarget(event);
-    var selection = item ? [item.id] : [];
-    this.setSelection(selection);
+    // stop checking for changed size
+    this._stopAutoResize();
 
-    var newSelection = this.getSelection();
+    // remove from DOM
+    if (this.dom.root.parentNode) {
+      this.dom.root.parentNode.removeChild(this.dom.root);
+    }
+    this.dom = null;
 
-    // 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: this.getSelection()
-      });
+    // cleanup hammer touch events
+    for (var event in this.listeners) {
+      if (this.listeners.hasOwnProperty(event)) {
+        delete this.listeners[event];
+      }
     }
+    this.listeners = null;
+    this.hammer = null;
 
-    event.stopPropagation();
+    // give all components the opportunity to cleanup
+    this.components.forEach(function (component) {
+      component.destroy();
+    });
+
+    this.body = null;
   };
 
   /**
-   * Handle creation and updates of an item on double tap
-   * @param event
-   * @private
-   */
-  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
+   * Set options. Options will be passed to all components loaded in the Timeline.
+   * @param {Object} [options]
+   *                           {String} orientation
+   *                              Vertical orientation for the Timeline,
+   *                              can be 'bottom' (default) or 'top'.
+   *                           {String | Number} width
+   *                              Width for the timeline, a number in pixels or
+   *                              a css string like '1000px' or '75%'. '100%' by default.
+   *                           {String | Number} height
+   *                              Fixed height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'. If undefined,
+   *                              The Timeline will automatically size such that
+   *                              its contents fit.
+   *                           {String | Number} minHeight
+   *                              Minimum height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {String | Number} maxHeight
+   *                              Maximum height for the Timeline, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {Number | Date | String} start
+   *                              Start date for the visible window
+   *                           {Number | Date | String} end
+   *                              End date for the visible window
+   */
+  Timeline.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the known options
+      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
+      util.selectiveExtend(fields, 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.update(itemData);
-        }
-      });
+      // enable/disable autoResize
+      this._initAutoResize();
     }
-    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();
-
-      var group = ItemSet.groupFromTarget(event);
-      if (group) {
-        newItem.group = group.groupId;
-      }
+    // propagate options to all components
+    this.components.forEach(function (component) {
+      component.setOptions(options);
+    });
 
-      // execute async handler to customize (or cancel) adding an item
-      this.options.onAdd(newItem, function (item) {
-        if (item) {
-          me.itemsData.add(newItem);
-          // TODO: need to trigger a redraw?
-        }
-      });
+    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+    if (options && options.order) {
+      throw new Error('Option order is deprecated. There is no replacement for this feature.');
     }
-  };
-
-  /**
-   * Handle selecting/deselecting multiple items when holding an item
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onMultiSelectItem = function (event) {
-    if (!this.options.selectable) return;
-
-    var selection,
-        item = ItemSet.itemFromTarget(event);
-
-    if (item) {
-      // multi select items
-      selection = this.getSelection(); // 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);
-      }
-      this.setSelection(selection);
-
-      this.body.emitter.emit('select', {
-        items: this.getSelection()
-      });
 
-      event.stopPropagation();
-    }
+    // redraw everything
+    this.redraw();
   };
 
   /**
-   * 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
+   * Set a custom time bar
+   * @param {Date} time
    */
-  ItemSet.itemFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-item')) {
-        return target['timeline-item'];
-      }
-      target = target.parentNode;
+  Timeline.prototype.setCustomTime = function (time) {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
     }
 
-    return null;
+    this.customTime.setCustomTime(time);
   };
 
   /**
-   * 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
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  ItemSet.groupFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-group')) {
-        return target['timeline-group'];
-      }
-      target = target.parentNode;
+  Timeline.prototype.getCustomTime = function() {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
     }
 
-    return null;
+    return this.customTime.getCustomTime();
   };
 
   /**
-   * 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
+   * Set items
+   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
    */
-  ItemSet.itemSetFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-itemset')) {
-        return target['timeline-itemset'];
-      }
-      target = target.parentNode;
-    }
+  Timeline.prototype.setItems = function(items) {
+    var initialLoad = (this.itemsData == null);
 
-    return null;
-  };
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!items) {
+      newDataSet = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      newDataSet = items;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(items, {
+        type: {
+          start: 'Date',
+          end: 'Date'
+        }
+      });
+    }
 
-  module.exports = ItemSet;
+    // set items
+    this.itemsData = newDataSet;
+    this.itemSet && this.itemSet.setItems(newDataSet);
 
+    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
+      this.fit();
 
-/***/ },
-/* 19 */
-/***/ function(module, exports, __webpack_require__) {
+      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
+      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Component = __webpack_require__(12);
+      this.setWindow(start, end);
+    }
+  };
 
   /**
-   * Legend for Graph2d
+   * Set groups
+   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
    */
-  function Legend(body, options, side) {
-    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
-      }
+  Timeline.prototype.setGroups = function(groups) {
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!groups) {
+      newDataSet = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      newDataSet = groups;
+    }
+    else {
+      // turn an array into a dataset
+      newDataSet = new DataSet(groups);
     }
-    this.side = side;
-    this.options = util.extend({},this.defaultOptions);
-
-    this.svgElements = {};
-    this.dom = {};
-    this.groups = {};
-    this.amountOfGroups = 0;
-    this._create();
-
-    this.setOptions(options);
-  }
 
-  Legend.prototype = new Component();
+    this.groupsData = newDataSet;
+    this.itemSet.setGroups(newDataSet);
+  };
 
+  /**
+   * Clear the Timeline. By Default, items, groups and options are cleared.
+   * Example usage:
+   *
+   *     timeline.clear();                // clear items, groups, and options
+   *     timeline.clear({options: true}); // clear options only
+   *
+   * @param {Object} [what]      Optionally specify what to clear. By default:
+   *                             {items: true, groups: true, options: true}
+   */
+  Timeline.prototype.clear = function(what) {
+    // clear items
+    if (!what || what.items) {
+      this.setItems(null);
+    }
 
-  Legend.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
+    // clear groups
+    if (!what || what.groups) {
+      this.setGroups(null);
     }
-    this.amountOfGroups += 1;
-  };
 
-  Legend.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
-  };
+    // clear options of timeline and of each of the components
+    if (!what || what.options) {
+      this.components.forEach(function (component) {
+        component.setOptions(component.defaultOptions);
+      });
 
-  Legend.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
+      this.setOptions(this.defaultOptions); // this will also do a redraw
     }
   };
 
-  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";
+  /**
+   * Set Timeline window such that it fits all items
+   */
+  Timeline.prototype.fit = function() {
+    // apply the data range as range
+    var dataRange = this.getItemRange();
 
-    this.dom.textArea = document.createElement('div');
-    this.dom.textArea.className = 'legendText';
-    this.dom.textArea.style.position = "relative";
-    this.dom.textArea.style.top = "0px";
+    // add 5% space on both sides
+    var start = dataRange.min;
+    var end = dataRange.max;
+    if (start != null && end != null) {
+      var interval = (end.valueOf() - start.valueOf());
+      if (interval <= 0) {
+        // prevent an empty interval
+        interval = 24 * 60 * 60 * 1000; // 1 day
+      }
+      start = new Date(start.valueOf() - interval * 0.05);
+      end = new Date(end.valueOf() + interval * 0.05);
+    }
 
-    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';
+    // skip range set if there is no start and end date
+    if (start === null && end === null) {
+      return;
+    }
 
-    this.dom.frame.appendChild(this.svg);
-    this.dom.frame.appendChild(this.dom.textArea);
+    this.range.setRange(start, end);
   };
 
   /**
-   * Hide the component from the DOM
+   * Get the data range of the item set.
+   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
+   *                                          When no minimum is found, min==null
+   *                                          When no maximum is found, max==null
    */
-  Legend.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+  Timeline.prototype.getItemRange = function() {
+    // calculate min from start filed
+    var dataset = this.itemsData.getDataSet(),
+        min = null,
+        max = null;
+
+    if (dataset) {
+      // calculate the minimum value of the field 'start'
+      var minItem = dataset.min('start');
+      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
+      // Note: we convert first to Date and then to number because else
+      // a conversion from ISODate to Number will fail
+
+      // calculate maximum value of fields 'start' and 'end'
+      var maxStartItem = dataset.max('start');
+      if (maxStartItem) {
+        max = util.convert(maxStartItem.start, 'Date').valueOf();
+      }
+      var maxEndItem = dataset.max('end');
+      if (maxEndItem) {
+        if (max == null) {
+          max = util.convert(maxEndItem.end, 'Date').valueOf();
+        }
+        else {
+          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+        }
+      }
     }
+
+    return {
+      min: (min != null) ? new Date(min) : null,
+      max: (max != null) ? new Date(max) : null
+    };
   };
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {Array} [ids] An array with zero or more id's of the items to be
+   *                      selected. If ids is an empty array, all items will be
+   *                      unselected.
    */
-  Legend.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  Timeline.prototype.setSelection = function(ids) {
+    this.itemSet && this.itemSet.setSelection(ids);
   };
 
-  Legend.prototype.setOptions = function(options) {
-    var fields = ['enabled','orientation','icons','left','right'];
-    util.selectiveDeepExtend(fields, this.options, options);
+  /**
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
+   */
+  Timeline.prototype.getSelection = function() {
+    return this.itemSet && this.itemSet.getSelection() || [];
   };
 
-  Legend.prototype.redraw = function() {
-    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
-      this.hide();
+  /**
+   * Set the visible window. Both parameters are optional, you can change only
+   * start or only end. Syntax:
+   *
+   *     TimeLine.setWindow(start, end)
+   *     TimeLine.setWindow(range)
+   *
+   * Where start and end can be a Date, number, or string, and range is an
+   * object with properties start and end.
+   *
+   * @param {Date | Number | String | Object} [start] Start date of visible window
+   * @param {Date | Number | String} [end]   End date of visible window
+   */
+  Timeline.prototype.setWindow = function(start, end) {
+    if (arguments.length == 1) {
+      var range = arguments[0];
+      this.range.setRange(range.start, range.end);
     }
     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 (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 {
-        this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
-        this.dom.frame.style.top = '';
-      }
-
-      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();
-      }
-
-      var content = '';
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          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';
+      this.range.setRange(start, 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;
-
-      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
-
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-          y += iconHeight + this.options.iconSpacing;
-        }
-      }
-
-      DOMutil.cleanupElements(this.svgElements);
-    }
+  /**
+   * Get the visible window
+   * @return {{start: Date, end: Date}}   Visible range
+   */
+  Timeline.prototype.getWindow = function() {
+    var range = this.range.getRange();
+    return {
+      start: new Date(range.start),
+      end: new Date(range.end)
+    };
   };
 
-  module.exports = Legend;
+  /**
+   * Force a redraw of the Timeline. Can be useful to manually redraw when
+   * option autoResize=false
+   */
+  Timeline.prototype.redraw = function() {
+    var resized = false,
+        options = this.options,
+        props = this.props,
+        dom = this.dom;
 
+    if (!dom) return; // when destroyed
 
-/***/ },
-/* 20 */
-/***/ function(module, exports, __webpack_require__) {
+    // update class names
+    dom.root.className = 'vis timeline root ' + options.orientation;
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Component = __webpack_require__(12);
-  var DataAxis = __webpack_require__(15);
-  var GraphGroup = __webpack_require__(16);
-  var Legend = __webpack_require__(19);
+    // update root width and height options
+    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
+    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
+    dom.root.style.width = util.option.asSize(options.width, '');
 
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+    // calculate border widths
+    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
+    props.border.right  = props.border.left;
+    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.bottom = props.border.top;
+    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
-  /**
-   * 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;
+    // calculate the heights. If any of the side panels is empty, we set the height to
+    // minus the border width, such that the border will be invisible
+    props.center.height = dom.center.offsetHeight;
+    props.left.height   = dom.left.offsetHeight;
+    props.right.height  = dom.right.offsetHeight;
+    props.top.height    = dom.top.clientHeight    || -props.border.top;
+    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
 
-    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,
-        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
-      },
-      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
-        }
-      }
-    };
+    // TODO: compensate borders when any of the panels is empty.
 
-    // 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 = {};
+    // apply auto height
+    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
+    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
+    var autoHeight = props.top.height + contentHeight + props.bottom.height +
+        borderRootHeight + props.border.top + props.border.bottom;
+    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
-    var me = this;
-    this.itemsData = null;    // DataSet
-    this.groupsData = null;   // DataSet
+    // calculate heights of the content panels
+    props.root.height = dom.root.offsetHeight;
+    props.background.height = props.root.height - borderRootHeight;
+    var containerHeight = props.root.height - props.top.height - props.bottom.height -
+        borderRootHeight;
+    props.centerContainer.height  = containerHeight;
+    props.leftContainer.height    = containerHeight;
+    props.rightContainer.height   = props.leftContainer.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 the widths of the panels
+    props.root.width = dom.root.offsetWidth;
+    props.background.width = props.root.width - borderRootWidth;
+    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
+    props.leftContainer.width = props.left.width;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    props.rightContainer.width = props.right.width;
+    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
+    props.center.width          = centerWidth;
+    props.centerContainer.width = centerWidth;
+    props.top.width             = centerWidth;
+    props.bottom.width          = centerWidth;
 
-    // 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);
-      }
-    };
+    // resize the panels
+    dom.background.style.height           = props.background.height + 'px';
+    dom.backgroundVertical.style.height   = props.background.height + 'px';
+    dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
+    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
 
-    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
+    dom.background.style.width            = props.background.width + 'px';
+    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+    dom.centerContainer.style.width       = props.center.width + 'px';
+    dom.top.style.width                   = props.top.width + 'px';
+    dom.bottom.style.width                = props.bottom.width + 'px';
 
-    this.svgElements = {};
-    this.setOptions(options);
-    this.groupsUsingDefaultStyles = [0];
+    // reposition the panels
+    dom.background.style.left           = '0';
+    dom.background.style.top            = '0';
+    dom.backgroundVertical.style.left   = props.left.width + 'px';
+    dom.backgroundVertical.style.top    = '0';
+    dom.backgroundHorizontal.style.left = '0';
+    dom.backgroundHorizontal.style.top  = props.top.height + 'px';
+    dom.centerContainer.style.left      = props.left.width + 'px';
+    dom.centerContainer.style.top       = props.top.height + 'px';
+    dom.leftContainer.style.left        = '0';
+    dom.leftContainer.style.top         = props.top.height + 'px';
+    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+    dom.rightContainer.style.top        = props.top.height + 'px';
+    dom.top.style.left                  = props.left.width + 'px';
+    dom.top.style.top                   = '0';
+    dom.bottom.style.left               = props.left.width + 'px';
+    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
 
-    this.body.emitter.on("rangechange",function() {
-        if (me.lastStart != 0) {
-          var offset = me.body.range.start - me.lastStart;
-          var range = me.body.range.end - me.body.range.start;
-          if (me.width != 0) {
-            var rangePerPixelInv = me.width/range;
-            var xOffset = offset * rangePerPixelInv;
-            me.svg.style.left = (-me.width - xOffset) + "px";
-          }
-        }
-      });
-    this.body.emitter.on("rangechanged", function() {
-      me.lastStart = me.body.range.start;
-      me.svg.style.left = util.option.asSize(-me.width);
-      me._updateGraph.apply(me);
+    // update the scrollTop, feasible range for the offset can be changed
+    // when the height of the Timeline or of the contents of the center changed
+    this._updateScrollTop();
+
+    // reposition the scrollable contents
+    var offset = this.props.scrollTop;
+    if (options.orientation == 'bottom') {
+      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
+          this.props.border.top - this.props.border.bottom, 0);
+    }
+    dom.center.style.left = '0';
+    dom.center.style.top  = offset + 'px';
+    dom.left.style.left   = '0';
+    dom.left.style.top    = offset + 'px';
+    dom.right.style.left  = '0';
+    dom.right.style.top   = offset + 'px';
+
+    // show shadows when vertical scrolling is available
+    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
+    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+    dom.shadowTop.style.visibility          = visibilityTop;
+    dom.shadowBottom.style.visibility       = visibilityBottom;
+    dom.shadowTopLeft.style.visibility      = visibilityTop;
+    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
+    dom.shadowTopRight.style.visibility     = visibilityTop;
+    dom.shadowBottomRight.style.visibility  = visibilityBottom;
+
+    // redraw all components
+    this.components.forEach(function (component) {
+      resized = component.redraw() || resized;
     });
+    if (resized) {
+      // keep repainting until all sizes are settled
+      this.redraw();
+    }
+  };
 
-    // create the HTML DOM
-    this._create();
-    this.body.emitter.emit("change");
-  }
+  // TODO: deprecated since version 1.1.0, remove some day
+  Timeline.prototype.repaint = function () {
+      throw new Error('Function repaint is deprecated. Use redraw instead.');
+  };
+
+  /**
+   * Convert a position on screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toTime = function(x) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return new Date(x / conversion.scale + conversion.offset);
+  };
 
-  LineGraph.prototype = new Component();
 
   /**
-   * Create the HTML DOM for the ItemSet
+   * Convert a position on the global screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
    */
-  LineGraph.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'LineGraph';
-    this.dom.frame = frame;
+  // TODO: move this function to Range
+  Timeline.prototype._toGlobalTime = function(x) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return new Date(x / conversion.scale + conversion.offset);
+  };
 
-    // 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);
+  /**
+   * Convert a datetime (Date object) into a position on the screen
+   * @param {Date}   time A date
+   * @return {int}   x    The position on the screen in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toScreen = function(time) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-    // data axis
-    this.options.dataAxis.orientation = 'left';
-    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
 
-    this.options.dataAxis.orientation = 'right';
-    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
-    delete this.options.dataAxis.orientation;
+  /**
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
+   */
+  // TODO: move this function to Range
+  Timeline.prototype._toGlobalScreen = function(time) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
+  };
 
-    // legends
-    this.legendLeft = new Legend(this.body, this.options.legend, 'left');
-    this.legendRight = new Legend(this.body, this.options.legend, 'right');
 
-    this.show();
+  /**
+   * Initialize watching when option autoResize is true
+   * @private
+   */
+  Timeline.prototype._initAutoResize = function () {
+    if (this.options.autoResize == true) {
+      this._startAutoResize();
+    }
+    else {
+      this._stopAutoResize();
+    }
   };
 
   /**
-   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
-   * @param options
+   * Watch for changes in the size of the container. On resize, the Panel will
+   * automatically redraw itself.
+   * @private
    */
-  LineGraph.prototype.setOptions = function(options) {
-    if (options) {
-      var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
-      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');
+  Timeline.prototype._startAutoResize = function () {
+    var me = this;
 
-      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;
-            }
-          }
-        }
-      }
+    this._stopAutoResize();
 
-      if (this.yAxisLeft) {
-        if (options.dataAxis !== undefined) {
-          this.yAxisLeft.setOptions(this.options.dataAxis);
-          this.yAxisRight.setOptions(this.options.dataAxis);
-        }
+    this._onResize = function() {
+      if (me.options.autoResize != true) {
+        // stop watching when the option autoResize is changed to false
+        me._stopAutoResize();
+        return;
       }
 
-      if (this.legendLeft) {
-        if (options.legend !== undefined) {
-          this.legendLeft.setOptions(this.options.legend);
-          this.legendRight.setOptions(this.options.legend);
+      if (me.dom.root) {
+        // check whether the frame is resized
+        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+            (me.dom.root.clientHeight != me.props.lastHeight)) {
+          me.props.lastWidth = me.dom.root.clientWidth;
+          me.props.lastHeight = me.dom.root.clientHeight;
+
+          me.emit('change');
         }
       }
+    };
 
-      if (this.groups.hasOwnProperty(UNGROUPED)) {
-        this.groups[UNGROUPED].setOptions(options);
-      }
-    }
-    if (this.dom.frame) {
-      this._updateGraph();
-    }
+    // add event listener to window resize
+    util.addEventListener(window, 'resize', this._onResize);
+
+    this.watchTimer = setInterval(this._onResize, 1000);
   };
 
   /**
-   * Hide the component from the DOM
+   * Stop watching for a resize of the frame.
+   * @private
    */
-  LineGraph.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
+  Timeline.prototype._stopAutoResize = function () {
+    if (this.watchTimer) {
+      clearInterval(this.watchTimer);
+      this.watchTimer = undefined;
     }
+
+    // remove event listener on window.resize
+    util.removeEventListener(window, 'resize', this._onResize);
+    this._onResize = null;
   };
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  Timeline.prototype._onTouch = function (event) {
+    this.touch.allowDragging = true;
   };
 
-
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype.setItems = function(items) {
-    var me = this,
-      ids,
-      oldItemsData = this.itemsData;
+  Timeline.prototype._onPinch = function (event) {
+    this.touch.allowDragging = false;
+  };
 
-    // 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');
-    }
+  /**
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onDragStart = function (event) {
+    this.touch.initialScrollTop = this.props.scrollTop;
+  };
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
+  /**
+   * Move the timeline vertically
+   * @param {Event} event
+   * @private
+   */
+  Timeline.prototype._onDrag = function (event) {
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.touch.allowDragging) return;
 
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
-    }
+    var delta = event.gesture.deltaY;
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+    var oldScrollTop = this._getScrollTop();
+    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
+    if (newScrollTop != oldScrollTop) {
+      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
     }
-    this._updateUngrouped();
-    this._updateGraph();
-    this.redraw();
   };
 
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * Apply a scrollTop
+   * @param {Number} scrollTop
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
    */
-  LineGraph.prototype.setGroups = function(groups) {
-    var me = this,
-      ids;
-
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  Timeline.prototype._setScrollTop = function (scrollTop) {
+    this.props.scrollTop = scrollTop;
+    this._updateScrollTop();
+    return this.props.scrollTop;
+  };
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
+  /**
+   * Update the current scrollTop when the height of  the containers has been changed
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
+   */
+  Timeline.prototype._updateScrollTop = function () {
+    // recalculate the scrollTopMin
+    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
+    if (scrollTopMin != this.props.scrollTopMin) {
+      // in case of bottom orientation, change the scrollTop such that the contents
+      // do not move relative to the time axis at the bottom
+      if (this.options.orientation == 'bottom') {
+        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
+      }
+      this.props.scrollTopMin = scrollTopMin;
     }
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
-    }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
-    }
-    else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
-    }
+    // limit the scrollTop to the feasible scroll range
+    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
+    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
+    return this.props.scrollTop;
+  };
 
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
-    }
-    this._onUpdate();
+  /**
+   * Get the current scrollTop
+   * @returns {number} scrollTop
+   * @private
+   */
+  Timeline.prototype._getScrollTop = function () {
+    return this.props.scrollTop;
   };
 
+  module.exports = Timeline;
 
 
-  LineGraph.prototype._onUpdate = function(ids) {
-    this._updateUngrouped();
-    this._updateAllGroupData();
-    this._updateGraph();
-    this.redraw();
-  };
-  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]);
-    }
+/***/ },
+/* 18 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this._updateGraph();
-    this.redraw();
-  };
-  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
+  var util = __webpack_require__(1);
+  var moment = __webpack_require__(4);
+  var Component = __webpack_require__(19);
 
-  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]];
+  /**
+   * @constructor Range
+   * A Range controls a numeric range with a start and end value.
+   * The Range adjusts the range based on mouse events or programmatic changes,
+   * and triggers events when the range is changing or has been changed.
+   * @param {{dom: Object, domProps: Object, emitter: Emitter}} body
+   * @param {Object} [options]    See description at Range.setOptions
+   */
+  function Range(body, options) {
+    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
+    this.start = now.clone().add('days', -3).valueOf(); // Number
+    this.end = now.clone().add('days', 4).valueOf();   // Number
+
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      start: null,
+      end: null,
+      direction: 'horizontal', // 'horizontal' or 'vertical'
+      moveable: true,
+      zoomable: true,
+      min: null,
+      max: null,
+      zoomMin: 10,                                // milliseconds
+      zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000  // milliseconds
+    };
+    this.options = util.extend({}, this.defaultOptions);
+
+    this.props = {
+      touch: {}
+    };
+
+    // drag listeners for dragging
+    this.body.emitter.on('dragstart', this._onDragStart.bind(this));
+    this.body.emitter.on('drag',      this._onDrag.bind(this));
+    this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
+
+    // ignore dragging when holding
+    this.body.emitter.on('hold', this._onHold.bind(this));
+
+    // mouse wheel for zooming
+    this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));
+    this.body.emitter.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
+
+    // pinch to zoom
+    this.body.emitter.on('touch', this._onTouch.bind(this));
+    this.body.emitter.on('pinch', this._onPinch.bind(this));
+
+    this.setOptions(options);
+  }
+
+  Range.prototype = new Component();
+
+  /**
+   * Set options for the range controller
+   * @param {Object} options      Available options:
+   *                              {Number | Date | String} start  Start date for the range
+   *                              {Number | Date | String} end    End date for the range
+   *                              {Number} min    Minimum value for start
+   *                              {Number} max    Maximum value for end
+   *                              {Number} zoomMin    Set a minimum value for
+   *                                                  (end - start).
+   *                              {Number} zoomMax    Set a maximum value for
+   *                                                  (end - start).
+   *                              {Boolean} moveable Enable moving of the range
+   *                                                 by dragging. True by default
+   *                              {Boolean} zoomable Enable zooming of the range
+   *                                                 by pinching/scrolling. True by default
+   */
+  Range.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the options that we know
+      var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
+      util.selectiveExtend(fields, this.options, options);
+
+      if ('start' in options || 'end' in options) {
+        // apply a new range. both start and end are optional
+        this.setRange(options.start, options.end);
       }
     }
-    this._updateUngrouped();
-    this._updateGraph();
-    this.redraw();
   };
 
   /**
-   * update a group object
-   *
-   * @param group
-   * @param groupId
+   * Test whether direction has a valid value
+   * @param {String} direction    'horizontal' or 'vertical'
+   */
+  function validateDirection (direction) {
+    if (direction != 'horizontal' && direction != 'vertical') {
+      throw new TypeError('Unknown direction "' + direction + '". ' +
+          'Choose "horizontal" or "vertical".');
+    }
+  }
+
+  /**
+   * Set a new start and end range
+   * @param {Number} [start]
+   * @param {Number} [end]
+   */
+  Range.prototype.setRange = function(start, end) {
+    var changed = this._applyRange(start, end);
+    if (changed) {
+      var params = {
+        start: new Date(this.start),
+        end: new Date(this.end)
+      };
+      this.body.emitter.emit('rangechange', params);
+      this.body.emitter.emit('rangechanged', params);
+    }
+  };
+
+  /**
+   * Set a new start and end range. This method is the same as setRange, but
+   * does not trigger a range change and range changed event, and it returns
+   * true when the range is changed
+   * @param {Number} [start]
+   * @param {Number} [end]
+   * @return {Boolean} changed
    * @private
    */
-  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]);
-      }
+  Range.prototype._applyRange = function(start, end) {
+    var newStart = (start != null) ? util.convert(start, 'Date').valueOf() : this.start,
+        newEnd   = (end != null)   ? util.convert(end, 'Date').valueOf()   : this.end,
+        max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
+        min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
+        diff;
+
+    // check for valid number
+    if (isNaN(newStart) || newStart === null) {
+      throw new Error('Invalid start "' + start + '"');
     }
-    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]);
+    if (isNaN(newEnd) || newEnd === null) {
+      throw new Error('Invalid end "' + end + '"');
+    }
+
+    // prevent start < end
+    if (newEnd < newStart) {
+      newEnd = newStart;
+    }
+
+    // prevent start < min
+    if (min !== null) {
+      if (newStart < min) {
+        diff = (min - newStart);
+        newStart += diff;
+        newEnd += diff;
+
+        // prevent end > max
+        if (max != null) {
+          if (newEnd > max) {
+            newEnd = max;
+          }
+        }
       }
     }
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-  };
 
-  LineGraph.prototype._updateAllGroupData = function () {
-    if (this.itemsData != null) {
-      // ~450 ms @ 500k
+    // prevent end > max
+    if (max !== null) {
+      if (newEnd > max) {
+        diff = (newEnd - max);
+        newStart -= diff;
+        newEnd -= diff;
 
-      var groupsContent = {};
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupsContent[groupId] = [];
+        // prevent start < min
+        if (min != null) {
+          if (newStart < min) {
+            newStart = min;
+          }
         }
       }
-      for (var itemId in this.itemsData._data) {
-        if (this.itemsData._data.hasOwnProperty(itemId)) {
-          var item = this.itemsData._data[itemId];
-          item.x = util.convert(item.x,"Date");
-          groupsContent[item.group].push(item);
+    }
+
+    // prevent (end-start) < zoomMin
+    if (this.options.zoomMin !== null) {
+      var zoomMin = parseFloat(this.options.zoomMin);
+      if (zoomMin < 0) {
+        zoomMin = 0;
+      }
+      if ((newEnd - newStart) < zoomMin) {
+        if ((this.end - this.start) === zoomMin) {
+          // ignore this action, we are already zoomed to the minimum
+          newStart = this.start;
+          newEnd = this.end;
+        }
+        else {
+          // zoom to the minimum
+          diff = (zoomMin - (newEnd - newStart));
+          newStart -= diff / 2;
+          newEnd += diff / 2;
         }
       }
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].setItems(groupsContent[groupId]);
+    }
+
+    // prevent (end-start) > zoomMax
+    if (this.options.zoomMax !== null) {
+      var zoomMax = parseFloat(this.options.zoomMax);
+      if (zoomMax < 0) {
+        zoomMax = 0;
+      }
+      if ((newEnd - newStart) > zoomMax) {
+        if ((this.end - this.start) === zoomMax) {
+          // ignore this action, we are already zoomed to the maximum
+          newStart = this.start;
+          newEnd = this.end;
+        }
+        else {
+          // zoom to the maximum
+          diff = ((newEnd - newStart) - zoomMax);
+          newStart += diff / 2;
+          newEnd -= diff / 2;
         }
       }
-  //    // ~4500ms @ 500k
-  //    for (var groupId in this.groups) {
-  //      if (this.groups.hasOwnProperty(groupId)) {
-  //        this.groups[groupId].setItems(this.itemsData.get({filter:
-  //            function (item) {
-  //              return (item.group == groupId);
-  //            }, type:{x:"Date"}}
-  //        ));
-  //      }
-  //    }
     }
+
+    var changed = (this.start != newStart || this.end != newEnd);
+
+    this.start = newStart;
+    this.end = newEnd;
+
+    return changed;
   };
 
   /**
-   * 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
+   * Retrieve the current range.
+   * @return {Object} An object with start and end properties
    */
-  LineGraph.prototype._updateUngrouped = function() {
-    if (this.itemsData != null) {
-  //    var t0 = new Date();
-      var group = {id: UNGROUPED, content: this.options.defaultGroup};
-      this._updateGroup(group, UNGROUPED);
-      var ungroupedCounter = 0;
-      if (this.itemsData) {
-        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;
-            }
-          }
-        }
-      }
+  Range.prototype.getRange = function() {
+    return {
+      start: this.start,
+      end: this.end
+    };
+  };
 
-      // much much slower
-  //    var datapoints = this.itemsData.get({
-  //      filter: function (item) {return item.group === undefined;},
-  //      showInternalIds:true
-  //    });
-  //    if (datapoints.length > 0) {
-  //      var updateQuery = [];
-  //      for (var i = 0; i < datapoints.length; i++) {
-  //        updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
-  //      }
-  //      this.itemsData.update(updateQuery, true);
-  //    }
-  //    var t1 = new Date();
-  //    var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
-      if (ungroupedCounter == 0) {
-        delete this.groups[UNGROUPED];
-        this.legendLeft.removeGroup(UNGROUPED);
-        this.legendRight.removeGroup(UNGROUPED);
-        this.yAxisLeft.removeGroup(UNGROUPED);
-        this.yAxisRight.removeGroup(UNGROUPED);
+  /**
+   * Calculate the conversion offset and scale for current range, based on
+   * the provided width
+   * @param {Number} width
+   * @returns {{offset: number, scale: number}} conversion
+   */
+  Range.prototype.conversion = function (width) {
+    return Range.conversion(this.start, this.end, width);
+  };
+
+  /**
+   * Static method to calculate the conversion offset and scale for a range,
+   * based on the provided start, end, and width
+   * @param {Number} start
+   * @param {Number} end
+   * @param {Number} width
+   * @returns {{offset: number, scale: number}} conversion
+   */
+  Range.conversion = function (start, end, width) {
+    if (width != 0 && (end - start != 0)) {
+      return {
+        offset: start,
+        scale: width / (end - start)
       }
-  //    console.log("getting amount ungrouped",new Date() - t1);
-  //    console.log("putting in ungrouped",new Date() - t0);
     }
     else {
-      delete this.groups[UNGROUPED];
-      this.legendLeft.removeGroup(UNGROUPED);
-      this.legendRight.removeGroup(UNGROUPED);
-      this.yAxisLeft.removeGroup(UNGROUPED);
-      this.yAxisRight.removeGroup(UNGROUPED);
+      return {
+        offset: 0,
+        scale: 1
+      };
     }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
   };
 
-
   /**
-   * Redraw the component, mandatory function
-   * @return {boolean} Returns true if the component is resized
+   * Start dragging horizontally or vertically
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype.redraw = function() {
-    var resized = false;
+  Range.prototype._onDragStart = function(event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
 
-    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
-    if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
-      resized = true;
-    }
-    // check if this component is resized
-    resized = this._isResized() || resized;
-    // 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.width != this.lastWidth);
-    this.lastVisibleInterval = visibleInterval;
-    this.lastWidth = this.width;
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
 
-    // calculate actual size and position
-    this.width = this.dom.frame.offsetWidth;
+    this.props.touch.start = this.start;
+    this.props.touch.end = this.end;
 
-    // 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.width);
-      this.svg.style.left = util.option.asSize(-this.width);
-    }
-    if (zoomed == true) {
-      this._updateGraph();
+    if (this.body.dom.root) {
+      this.body.dom.root.style.cursor = 'move';
     }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-
-    return resized;
   };
 
   /**
-   * Update and redraw the graph.
-   *
+   * Perform dragging operation
+   * @param {Event} event
+   * @private
    */
-  LineGraph.prototype._updateGraph = function () {
-    // reset the svg elements
-    DOMutil.prepareElements(this.svgElements);
-  //        // very slow...
-  //        groupData = group.itemsData.get({filter:
-  //          function (item) {
-  //            return (item.x > minDate && item.x < maxDate);
-  //          }}
-  //        );
+  Range.prototype._onDrag = function (event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
+    var direction = this.options.direction;
+    validateDirection(direction);
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
+    var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
+        interval = (this.props.touch.end - this.props.touch.start),
+        width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
+        diffRange = -delta / width * interval;
+    this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
+    this.body.emitter.emit('rangechange', {
+      start: new Date(this.start),
+      end:   new Date(this.end)
+    });
+  };
 
+  /**
+   * Stop dragging operation
+   * @param {event} event
+   * @private
+   */
+  Range.prototype._onDragEnd = function (event) {
+    // only allow dragging when configured as movable
+    if (!this.options.moveable) return;
 
-    if (this.width != 0 && this.itemsData != null) {
-      var group, groupData, preprocessedGroup, i;
-      var preprocessedGroupData = [];
-      var processedGroupData = [];
-      var groupRanges = [];
-      var changeCalled = false;
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.props.touch.allowDragging) return;
 
-      // getting group Ids
-      var groupIds = [];
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupIds.push(groupId);
-        }
-      }
+    if (this.body.dom.root) {
+      this.body.dom.root.style.cursor = 'auto';
+    }
 
-      // 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);
+    // fire a rangechanged event
+    this.body.emitter.emit('rangechanged', {
+      start: new Date(this.start),
+      end:   new Date(this.end)
+    });
+  };
 
-      // 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.
-      if (groupIds.length > 0) {
-        for (i = 0; i < groupIds.length; i++) {
-          group = this.groups[groupIds[i]];
-          groupData = [];
-          // optimization for sorted data
-          if (group.options.sort == true) {
-            var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
-
-            for (var j = guess; j < group.itemsData.length; j++) {
-              var item = group.itemsData[j];
-              if (item !== undefined) {
-                if (item.x > maxDate) {
-                 groupData.push(item);
-                 break;
-                }
-                else {
-                  groupData.push(item);
-                }
-              }
-            }
-          }
-          else {
-            for (var j = 0; j < group.itemsData.length; j++) {
-              var item = group.itemsData[j];
-              if (item !== undefined) {
-                if (item.x > minDate && item.x < maxDate) {
-                  groupData.push(item);
-                }
-              }
-            }
-          }
-          // preprocess, split into ranges and data
-          preprocessedGroup = this._preprocessData(groupData, group);
-          groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
-          preprocessedGroupData.push(preprocessedGroup.data);
-        }
+  /**
+   * Event handler for mouse wheel event, used to zoom
+   * Code from http://adomas.org/javascript-mouse-wheel/
+   * @param {Event} event
+   * @private
+   */
+  Range.prototype._onMouseWheel = function(event) {
+    // only allow zooming when configured as zoomable and moveable
+    if (!(this.options.zoomable && this.options.moveable)) return;
 
-        // 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);
-        if (changeCalled == true) {
-          DOMutil.cleanupElements(this.svgElements);
-          this.body.emitter.emit("change");
-          return;
-        }
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta / 120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail / 3;
+    }
 
-        // 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.push(this._convertYvalues(preprocessedGroupData[i],group))
-        }
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+      // perform the zoom action. Delta is normally 1 or -1
 
-        // draw the groups
-        for (i = 0; i < groupIds.length; i++) {
-          group = this.groups[groupIds[i]];
-          if (group.options.style == 'line') {
-            this._drawLineGraph(processedGroupData[i], group);
-          }
-          else {
-            this._drawBarGraph (processedGroupData[i], group);
-          }
-        }
+      // adjust a negative delta such that zooming in with delta 0.1
+      // equals zooming out with a delta -0.1
+      var scale;
+      if (delta < 0) {
+        scale = 1 - (delta / 5);
+      }
+      else {
+        scale = 1 / (1 + (delta / 5)) ;
       }
+
+      // calculate center, the date to zoom around
+      var gesture = util.fakeGesture(this, event),
+          pointer = getPointer(gesture.center, this.body.dom.center),
+          pointerDate = this._pointerToDate(pointer);
+
+      this.zoom(scale, pointerDate);
     }
 
-    // cleanup unused svg elements
-    DOMutil.cleanupElements(this.svgElements);
+    // Prevent default actions caused by mouse wheel
+    // (else the page and timeline both zoom and scroll)
+    event.preventDefault();
   };
 
   /**
-   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
-   * @param {array} groupIds
+   * Start of a touch gesture
    * @private
    */
-  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
-    var changeCalled = false;
-    var yAxisLeftUsed = false;
-    var yAxisRightUsed = false;
-    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
-    var orientation = 'left';
+  Range.prototype._onTouch = function (event) {
+    this.props.touch.start = this.start;
+    this.props.touch.end = this.end;
+    this.props.touch.allowDragging = true;
+    this.props.touch.center = null;
+  };
 
-    // if groups are present
-    if (groupIds.length > 0) {
-      for (var i = 0; i < groupIds.length; i++) {
-        orientation = 'left';
-        var group = this.groups[groupIds[i]];
-        if (group.options.yAxisOrientation == 'right') {
-          orientation = 'right';
-        }
+  /**
+   * On start of a hold gesture
+   * @private
+   */
+  Range.prototype._onHold = function () {
+    this.props.touch.allowDragging = false;
+  };
 
-        minVal = groupRanges[i].min;
-        maxVal = groupRanges[i].max;
+  /**
+   * Handle pinch event
+   * @param {Event} event
+   * @private
+   */
+  Range.prototype._onPinch = function (event) {
+    // only allow zooming when configured as zoomable and moveable
+    if (!(this.options.zoomable && this.options.moveable)) return;
 
-        if (orientation == 'left') {
-          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;
-        }
-      }
-      if (yAxisLeftUsed == true) {
-        this.yAxisLeft.setRange(minLeft, maxLeft);
-      }
-      if (yAxisRightUsed == true) {
-        this.yAxisRight.setRange(minRight, maxRight);
-      }
-    }
+    this.props.touch.allowDragging = false;
 
-    changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
-    changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
+    if (event.gesture.touches.length > 1) {
+      if (!this.props.touch.center) {
+        this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
+      }
 
-    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
-      this.yAxisLeft.drawIcons = true;
-      this.yAxisRight.drawIcons = true;
-    }
-    else {
-      this.yAxisLeft.drawIcons = false;
-      this.yAxisRight.drawIcons = false;
-    }
+      var scale = 1 / event.gesture.scale,
+          initDate = this._pointerToDate(this.props.touch.center);
 
-    this.yAxisRight.master = !yAxisLeftUsed;
+      // calculate new start and end
+      var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
+      var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
 
-    if (this.yAxisRight.master == false) {
-      if (yAxisRightUsed == true) {
-        this.yAxisLeft.lineOffset = this.yAxisRight.width;
-      }
-      changeCalled = this.yAxisLeft.redraw() || changeCalled;
-      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
-      changeCalled = this.yAxisRight.redraw() || changeCalled;
-    }
-    else {
-      changeCalled = this.yAxisRight.redraw() || changeCalled;
+      // apply new range
+      this.setRange(newStart, newEnd);
     }
-    return changeCalled;
   };
 
   /**
-   * 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}
+   * Helper function to calculate the center date for zooming
+   * @param {{x: Number, y: Number}} pointer
+   * @return {number} date
    * @private
-   * @param axis
    */
-  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
-    var changed = false;
-    if (axisUsed == false) {
-      if (axis.dom.frame.parentNode) {
-        axis.hide();
-        changed = true;
-      }
+  Range.prototype._pointerToDate = function (pointer) {
+    var conversion;
+    var direction = this.options.direction;
+
+    validateDirection(direction);
+
+    if (direction == 'horizontal') {
+      var width = this.body.domProps.center.width;
+      conversion = this.conversion(width);
+      return pointer.x / conversion.scale + conversion.offset;
     }
     else {
-      if (!axis.dom.frame.parentNode) {
-        axis.show();
-        changed = true;
-      }
+      var height = this.body.domProps.center.height;
+      conversion = this.conversion(height);
+      return pointer.y / conversion.scale + conversion.offset;
     }
-    return changed;
   };
 
-
   /**
-   * draw a bar graph
-   * @param datapoints
-   * @param group
+   * Get the pointer location relative to the location of the dom element
+   * @param {{pageX: Number, pageY: Number}} touch
+   * @param {Element} element   HTML DOM element
+   * @return {{x: Number, y: Number}} pointer
+   * @private
    */
-  LineGraph.prototype._drawBarGraph = function (dataset, group) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var coreDistance;
-        var minWidth = 0.1 * group.options.barChart.width;
-        var offset = 0;
-        var width = group.options.barChart.width;
-
-        if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
-        else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
+  function getPointer (touch, element) {
+    return {
+      x: touch.pageX - util.getAbsoluteLeft(element),
+      y: touch.pageY - util.getAbsoluteTop(element)
+    };
+  }
 
-        for (var i = 0; i < dataset.length; i++) {
-          // dynammically downscale the width so there is no overlap up to 1/10th the original width
-          if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
-          if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
-          if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
+  /**
+   * Zoom the range the given scale in or out. Start and end date will
+   * be adjusted, and the timeline will be redrawn. You can optionally give a
+   * date around which to zoom.
+   * For example, try scale = 0.9 or 1.1
+   * @param {Number} scale      Scaling factor. Values above 1 will zoom out,
+   *                            values below 1 will zoom in.
+   * @param {Number} [center]   Value representing a date around which will
+   *                            be zoomed.
+   */
+  Range.prototype.zoom = function(scale, center) {
+    // if centerDate is not provided, take it half between start Date and end Date
+    if (center == null) {
+      center = (this.start + this.end) / 2;
+    }
 
-          DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
-        }
+    // calculate new start and end
+    var newStart = center + (this.start - center) * scale;
+    var newEnd = center + (this.end - center) * scale;
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
-        }
-      }
-    }
+    this.setRange(newStart, newEnd);
   };
 
-
   /**
-   * draw a line graph
-   *
-   * @param datapoints
-   * @param group
+   * Move the range with a given delta to the left or right. Start and end
+   * value will be adjusted. For example, try delta = 0.1 or -0.1
+   * @param {Number}  delta     Moving amount. Positive value will move right,
+   *                            negative value will move left
    */
-  LineGraph.prototype._drawLineGraph = function (dataset, group) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var path, d;
-        var svgHeight = Number(this.svg.style.height.replace("px",""));
-        path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
-        path.setAttributeNS(null, "class", group.className);
+  Range.prototype.move = function(delta) {
+    // zoom start Date and end Date relative to the centerDate
+    var diff = (this.end - this.start);
 
-        // construct path from dataset
-        if (group.options.catmullRom.enabled == true) {
-          d = this._catmullRom(dataset, group);
-        }
-        else {
-          d = this._linear(dataset);
-        }
+    // apply new values
+    var newStart = this.start + diff * delta;
+    var newEnd = this.end + diff * delta;
 
-        // append with points for fill and finalize the path
-        if (group.options.shaded.enabled == true) {
-          var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.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");
-          fillPath.setAttributeNS(null, "d", dFill);
-        }
-        // copy properties to path for drawing.
-        path.setAttributeNS(null, "d", "M" + d);
+    // TODO: reckon with min and max range
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          this._drawPoints(dataset, group, this.svgElements, this.svg);
-        }
-      }
-    }
+    this.start = newStart;
+    this.end = newEnd;
   };
 
   /**
-   * draw the data points
-   *
-   * @param dataset
-   * @param JSONcontainer
-   * @param svg
-   * @param group
+   * Move the range to a new center point
+   * @param {Number} moveTo      New center point of the range
    */
-  LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
-    if (offset === undefined) {offset = 0;}
-    for (var i = 0; i < dataset.length; i++) {
-      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
-    }
-  };
-
-
+  Range.prototype.moveTo = function(moveTo) {
+    var center = (this.start + this.end) / 2;
 
-  /**
-   * 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._preprocessData = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var toScreen = this.body.util.toScreen;
+    var diff = center - moveTo;
 
-    var increment = 1;
-    var amountOfPoints = datapoints.length;
+    // calculate new start and end
+    var newStart = this.start - diff;
+    var newEnd = this.end - diff;
 
-    var yMin = datapoints[0].y;
-    var yMax = datapoints[0].y;
+    this.setRange(newStart, newEnd);
+  };
 
-    // 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.
-    if (group.options.sampling == true) {
-      var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
-      var pointsPerPixel = amountOfPoints/xDistance;
-      increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
-    }
+  module.exports = Range;
 
-    for (var i = 0; i < amountOfPoints; i += increment) {
-      xValue = toScreen(datapoints[i].x) + this.width - 1;
-      yValue = datapoints[i].y;
-      extractedData.push({x: xValue, y: yValue});
-      yMin = yMin > yValue ? yValue : yMin;
-      yMax = yMax < yValue ? yValue : yMax;
-    }
 
-    // extractedData.sort(function (a,b) {return a.x - b.x;});
-    return {min: yMin, max: yMax, data: extractedData};
-  };
+/***/ },
+/* 19 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
-   * util function toScreen to get the x coordinate from the timestamp.
-   *
-   * @param datapoints
-   * @param options
-   * @returns {Array}
-   * @private
+   * Prototype for visual components
+   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
+   * @param {Object} [options]
    */
-  LineGraph.prototype._convertYvalues = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var axis = this.yAxisLeft;
-    var svgHeight = Number(this.svg.style.height.replace("px",""));
-
-    if (group.options.yAxisOrientation == 'right') {
-      axis = this.yAxisRight;
-    }
+  function Component (body, options) {
+    this.options = null;
+    this.props = null;
+  }
 
-    for (var i = 0; i < datapoints.length; i++) {
-      xValue = datapoints[i].x;
-      yValue = Math.round(axis.convertValue(datapoints[i].y));
-      extractedData.push({x: xValue, y: yValue});
+  /**
+   * Set options for the component. The new options will be merged into the
+   * current options.
+   * @param {Object} options
+   */
+  Component.prototype.setOptions = function(options) {
+    if (options) {
+      util.extend(this.options, options);
     }
+  };
 
-    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
-
-    // extractedData.sort(function (a,b) {return a.x - b.x;});
-    return extractedData;
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  Component.prototype.redraw = function() {
+    // should be implemented by the component
+    return false;
   };
 
+  /**
+   * Destroy the component. Cleanup DOM and event listeners
+   */
+  Component.prototype.destroy = function() {
+    // should be implemented by the component
+  };
 
   /**
-   * 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
+   * Test whether the component is resized since the last time _isResized() was
+   * called.
+   * @return {Boolean} Returns true if the component is resized
+   * @protected
    */
-  LineGraph.prototype._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++) {
+  Component.prototype._isResized = function() {
+    var resized = (this.props._previousWidth !== this.props.width ||
+        this.props._previousHeight !== this.props.height);
 
-      p0 = (i == 0) ? data[0] : data[i-1];
-      p1 = data[i];
-      p2 = data[i+1];
-      p3 = (i + 2 < length) ? data[i+2] : p2;
+    this.props._previousWidth = this.props.width;
+    this.props._previousHeight = this.props.height;
 
+    return resized;
+  };
 
-      // 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
+  module.exports = Component;
 
-      //    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 + " ";
-    }
+/***/ },
+/* 20 */
+/***/ function(module, exports, __webpack_require__) {
 
-    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
-   * @returns {string}
-   * @private
-   */
-  LineGraph.prototype._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          ]
-
-        // [   0             1            0          0          ]
-        // [   -d2pow2a/N    A/N          d1pow2a/N  0          ]
-        // [   0             d3pow2a/M    B/M        -d2pow2a/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
-   */
-  LineGraph.prototype._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 = LineGraph;
-
-
-/***/ },
-/* 21 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(12);
-  var TimeStep = __webpack_require__(10);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(19);
+  var TimeStep = __webpack_require__(21);
 
   /**
    * A horizontal time axis
@@ -13274,16848 +12497,20221 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 22 */
+/* 21 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Hammer = __webpack_require__(49);
+  var moment = __webpack_require__(4);
 
   /**
-   * @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
+   * @constructor  TimeStep
+   * The class TimeStep is an iterator for dates. You provide a start date and an
+   * end date. The class itself determines the best scale (step size) based on the
+   * provided start Date, end Date, and minimumStep.
+   *
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   *
+   * Alternatively, you can set a scale by hand.
+   * After creation, you can initialize the class by executing first(). Then you
+   * can iterate from the start date to the end date via next(). You can check if
+   * the end date is reached with the function hasNext(). After each step, you can
+   * retrieve the current date via getCurrent().
+   * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
+   * days, to years.
+   *
+   * Version: 1.2
+   *
+   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
+   *                               or new Date(2010, 9, 21, 23, 45, 00)
+   * @param {Date} [end]           The end date
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  function Item (data, conversion, options) {
-    this.id = null;
-    this.parent = null;
-    this.data = data;
-    this.dom = null;
-    this.conversion = conversion || {};
-    this.options = options || {};
+  function TimeStep(start, end, minimumStep) {
+    // variables
+    this.current = new Date();
+    this._start = new Date();
+    this._end = new Date();
 
-    this.selected = false;
-    this.displayed = false;
-    this.dirty = true;
+    this.autoScale  = true;
+    this.scale = TimeStep.SCALE.DAY;
+    this.step = 1;
 
-    this.top = null;
-    this.left = null;
-    this.width = null;
-    this.height = null;
+    // initialize the range
+    this.setRange(start, end, minimumStep);
   }
 
-  /**
-   * Select current item
-   */
-  Item.prototype.select = function() {
-    this.selected = true;
-    if (this.displayed) this.redraw();
+  /// enum scale
+  TimeStep.SCALE = {
+    MILLISECOND: 1,
+    SECOND: 2,
+    MINUTE: 3,
+    HOUR: 4,
+    DAY: 5,
+    WEEKDAY: 6,
+    MONTH: 7,
+    YEAR: 8
   };
 
-  /**
-   * Unselect current item
-   */
-  Item.prototype.unselect = function() {
-    this.selected = false;
-    if (this.displayed) this.redraw();
-  };
 
   /**
-   * Set a parent for the item
-   * @param {ItemSet | Group} parent
+   * Set a new range
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   * @param {Date} [start]      The start date and time.
+   * @param {Date} [end]        The end date and time.
+   * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  Item.prototype.setParent = function(parent) {
-    if (this.displayed) {
-      this.hide();
-      this.parent = parent;
-      if (this.parent) {
-        this.show();
-      }
-    }
-    else {
-      this.parent = parent;
+  TimeStep.prototype.setRange = function(start, end, minimumStep) {
+    if (!(start instanceof Date) || !(end instanceof Date)) {
+      throw  "No legal start or end date in method setRange";
     }
-  };
 
-  /**
-   * 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._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
+    this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
 
-  /**
-   * Show the Item in the DOM (when not already visible)
-   * @return {Boolean} changed
-   */
-  Item.prototype.show = function() {
-    return false;
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep);
+    }
   };
 
   /**
-   * Hide the Item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Set the range iterator to the start date.
    */
-  Item.prototype.hide = function() {
-    return false;
+  TimeStep.prototype.first = function() {
+    this.current = new Date(this._start.valueOf());
+    this.roundToMinor();
   };
 
   /**
-   * Repaint the item
+   * Round the current date to the first minor date value
+   * This must be executed once when the current date is set to start Date
    */
-  Item.prototype.redraw = function() {
-    // should be implemented by the item
-  };
+  TimeStep.prototype.roundToMinor = function() {
+    // round to floor
+    // IMPORTANT: we have no breaks in this switch! (this is no bug)
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.scale) {
+      case TimeStep.SCALE.YEAR:
+        this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
+        this.current.setMonth(0);
+      case TimeStep.SCALE.MONTH:        this.current.setDate(1);
+      case TimeStep.SCALE.DAY:          // intentional fall through
+      case TimeStep.SCALE.WEEKDAY:      this.current.setHours(0);
+      case TimeStep.SCALE.HOUR:         this.current.setMinutes(0);
+      case TimeStep.SCALE.MINUTE:       this.current.setSeconds(0);
+      case TimeStep.SCALE.SECOND:       this.current.setMilliseconds(0);
+      //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
+    }
 
-  /**
-   * Reposition the Item horizontally
-   */
-  Item.prototype.repositionX = function() {
-    // should be implemented by the item
+    if (this.step != 1) {
+      // round down to the first minor value that is a multiple of the current step size
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step);  break;
+        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
+        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
+        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step);  break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
+        default: break;
+      }
+    }
   };
 
   /**
-   * Reposition the Item vertically
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
    */
-  Item.prototype.repositionY = function() {
-    // should be implemented by the item
+  TimeStep.prototype.hasNext = function () {
+    return (this.current.valueOf() <= this._end.valueOf());
   };
 
   /**
-   * Repaint a delete button on the top right of the item when the item is selected
-   * @param {HTMLElement} anchor
-   * @protected
+   * Do the next step
    */
-  Item.prototype._repaintDeleteButton = function (anchor) {
-    if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
-      // create and show button
-      var me = this;
-
-      var deleteButton = document.createElement('div');
-      deleteButton.className = 'delete';
-      deleteButton.title = 'Delete this item';
+  TimeStep.prototype.next = function() {
+    var prev = this.current.valueOf();
 
-      Hammer(deleteButton, {
-        preventDefault: true
-      }).on('tap', function (event) {
-        me.parent.removeFromDataSet(me);
-        event.stopPropagation();
-      });
+    // Two cases, needed to prevent issues with switching daylight savings
+    // (end of March and end of October)
+    if (this.current.getMonth() < 6)   {
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:
 
-      anchor.appendChild(deleteButton);
-      this.dom.deleteButton = deleteButton;
+          this.current = new Date(this.current.valueOf() + this.step); break;
+        case TimeStep.SCALE.SECOND:       this.current = new Date(this.current.valueOf() + this.step * 1000); break;
+        case TimeStep.SCALE.MINUTE:       this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
+        case TimeStep.SCALE.HOUR:
+          this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
+          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
+          var h = this.current.getHours();
+          this.current.setHours(h - (h % this.step));
+          break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
+        default:                      break;
+      }
     }
-    else if (!this.selected && this.dom.deleteButton) {
-      // remove button
-      if (this.dom.deleteButton.parentNode) {
-        this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
+    else {
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  this.current = new Date(this.current.valueOf() + this.step); break;
+        case TimeStep.SCALE.SECOND:       this.current.setSeconds(this.current.getSeconds() + this.step); break;
+        case TimeStep.SCALE.MINUTE:       this.current.setMinutes(this.current.getMinutes() + this.step); break;
+        case TimeStep.SCALE.HOUR:         this.current.setHours(this.current.getHours() + this.step); break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          this.current.setDate(this.current.getDate() + this.step); break;
+        case TimeStep.SCALE.MONTH:        this.current.setMonth(this.current.getMonth() + this.step); break;
+        case TimeStep.SCALE.YEAR:         this.current.setFullYear(this.current.getFullYear() + this.step); break;
+        default:                      break;
       }
-      this.dom.deleteButton = null;
     }
-  };
 
-  module.exports = Item;
+    if (this.step != 1) {
+      // round down to the correct major value
+      switch (this.scale) {
+        case TimeStep.SCALE.MILLISECOND:  if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0);  break;
+        case TimeStep.SCALE.SECOND:       if(this.current.getSeconds() < this.step) this.current.setSeconds(0);  break;
+        case TimeStep.SCALE.MINUTE:       if(this.current.getMinutes() < this.step) this.current.setMinutes(0);  break;
+        case TimeStep.SCALE.HOUR:         if(this.current.getHours() < this.step) this.current.setHours(0);  break;
+        case TimeStep.SCALE.WEEKDAY:      // intentional fall through
+        case TimeStep.SCALE.DAY:          if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
+        case TimeStep.SCALE.MONTH:        if(this.current.getMonth() < this.step) this.current.setMonth(0);  break;
+        case TimeStep.SCALE.YEAR:         break; // nothing to do for year
+        default:                break;
+      }
+    }
 
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current.valueOf() == prev) {
+      this.current = new Date(this._end.valueOf());
+    }
+  };
 
-/***/ },
-/* 23 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var Item = __webpack_require__(22);
+  /**
+   * Get the current datetime
+   * @return {Date}  current The current date
+   */
+  TimeStep.prototype.getCurrent = function() {
+    return this.current;
+  };
 
   /**
-   * @constructor ItemBox
-   * @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 custom scale. Autoscaling will be disabled.
+   * For example setScale(SCALE.MINUTES, 5) will result
+   * in minor steps of 5 minutes, and major steps of an hour.
+   *
+   * @param {TimeStep.SCALE} newScale
+   *                               A scale. Choose from SCALE.MILLISECOND,
+   *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
+   *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
+   *                               SCALE.YEAR.
+   * @param {Number}     newStep   A step size, by default 1. Choose for
+   *                               example 1, 2, 5, or 10.
    */
-  function ItemBox (data, conversion, options) {
-    this.props = {
-      dot: {
-        width: 0,
-        height: 0
-      },
-      line: {
-        width: 0,
-        height: 0
-      }
-    };
+  TimeStep.prototype.setScale = function(newScale, newStep) {
+    this.scale = newScale;
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
-      }
+    if (newStep > 0) {
+      this.step = newStep;
     }
 
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemBox.prototype = new Item (null, null, null);
+    this.autoScale = false;
+  };
 
   /**
-   * 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
+   * Enable or disable autoscaling
+   * @param {boolean} enable  If true, autoascaling is set true
    */
-  ItemBox.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);
+  TimeStep.prototype.setAutoScale = function (enable) {
+    this.autoScale = enable;
   };
 
+
   /**
-   * Repaint the item
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
    */
-  ItemBox.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-      // create main box
-      dom.box = document.createElement('DIV');
+  TimeStep.prototype.setMinimumStep = function(minimumStep) {
+    if (minimumStep == undefined) {
+      return;
+    }
 
-      // contents box (inside the background box). used for making margins
-      dom.content = document.createElement('DIV');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+    var stepYear       = (1000 * 60 * 60 * 24 * 30 * 12);
+    var stepMonth      = (1000 * 60 * 60 * 24 * 30);
+    var stepDay        = (1000 * 60 * 60 * 24);
+    var stepHour       = (1000 * 60 * 60);
+    var stepMinute     = (1000 * 60);
+    var stepSecond     = (1000);
+    var stepMillisecond= (1);
 
-      // line to axis
-      dom.line = document.createElement('DIV');
-      dom.line.className = 'line';
+    // find the smallest step that is larger than the provided minimumStep
+    if (stepYear*1000 > minimumStep)        {this.scale = TimeStep.SCALE.YEAR;        this.step = 1000;}
+    if (stepYear*500 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 500;}
+    if (stepYear*100 > minimumStep)         {this.scale = TimeStep.SCALE.YEAR;        this.step = 100;}
+    if (stepYear*50 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 50;}
+    if (stepYear*10 > minimumStep)          {this.scale = TimeStep.SCALE.YEAR;        this.step = 10;}
+    if (stepYear*5 > minimumStep)           {this.scale = TimeStep.SCALE.YEAR;        this.step = 5;}
+    if (stepYear > minimumStep)             {this.scale = TimeStep.SCALE.YEAR;        this.step = 1;}
+    if (stepMonth*3 > minimumStep)          {this.scale = TimeStep.SCALE.MONTH;       this.step = 3;}
+    if (stepMonth > minimumStep)            {this.scale = TimeStep.SCALE.MONTH;       this.step = 1;}
+    if (stepDay*5 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 5;}
+    if (stepDay*2 > minimumStep)            {this.scale = TimeStep.SCALE.DAY;         this.step = 2;}
+    if (stepDay > minimumStep)              {this.scale = TimeStep.SCALE.DAY;         this.step = 1;}
+    if (stepDay/2 > minimumStep)            {this.scale = TimeStep.SCALE.WEEKDAY;     this.step = 1;}
+    if (stepHour*4 > minimumStep)           {this.scale = TimeStep.SCALE.HOUR;        this.step = 4;}
+    if (stepHour > minimumStep)             {this.scale = TimeStep.SCALE.HOUR;        this.step = 1;}
+    if (stepMinute*15 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 15;}
+    if (stepMinute*10 > minimumStep)        {this.scale = TimeStep.SCALE.MINUTE;      this.step = 10;}
+    if (stepMinute*5 > minimumStep)         {this.scale = TimeStep.SCALE.MINUTE;      this.step = 5;}
+    if (stepMinute > minimumStep)           {this.scale = TimeStep.SCALE.MINUTE;      this.step = 1;}
+    if (stepSecond*15 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 15;}
+    if (stepSecond*10 > minimumStep)        {this.scale = TimeStep.SCALE.SECOND;      this.step = 10;}
+    if (stepSecond*5 > minimumStep)         {this.scale = TimeStep.SCALE.SECOND;      this.step = 5;}
+    if (stepSecond > minimumStep)           {this.scale = TimeStep.SCALE.SECOND;      this.step = 1;}
+    if (stepMillisecond*200 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
+    if (stepMillisecond*100 > minimumStep)  {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
+    if (stepMillisecond*50 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
+    if (stepMillisecond*10 > minimumStep)   {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
+    if (stepMillisecond*5 > minimumStep)    {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
+    if (stepMillisecond > minimumStep)      {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
+  };
 
-      // dot on axis
-      dom.dot = document.createElement('DIV');
-      dom.dot.className = 'dot';
+  /**
+   * 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
+   */
+  TimeStep.prototype.snap = function(date) {
+    var clone = new Date(date.valueOf());
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
+    if (this.scale == TimeStep.SCALE.YEAR) {
+      var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
+      clone.setFullYear(Math.round(year / this.step) * this.step);
+      clone.setMonth(0);
+      clone.setDate(0);
+      clone.setHours(0);
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(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 time axis: 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 time axis: 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 time axis: parent has no axis container element');
-      axis.appendChild(dom.dot);
-    }
-    this.displayed = true;
-
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
+    else if (this.scale == TimeStep.SCALE.MONTH) {
+      if (clone.getDate() > 15) {
+        clone.setDate(1);
+        clone.setMonth(clone.getMonth() + 1);
+        // important: first set Date to 1, after that change the month.
       }
       else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        clone.setDate(1);
       }
 
-      this.dirty = true;
+      clone.setHours(0);
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    // update title
-    if (this.data.title != this.title) {
-      dom.box.title = this.data.title;
-      this.title = this.data.title;
+    else if (this.scale == TimeStep.SCALE.DAY) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 5:
+        case 2:
+          clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
+        default:
+          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+      }
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = 'item box' + className;
-      dom.line.className = 'item line' + className;
-      dom.dot.className  = 'item dot' + className;
-
-      this.dirty = true;
+    else if (this.scale == TimeStep.SCALE.WEEKDAY) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 5:
+        case 2:
+          clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+        default:
+          clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
+      }
+      clone.setMinutes(0);
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
     }
-
-    // recalculate size
-    if (this.dirty) {
-      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;
+    else if (this.scale == TimeStep.SCALE.HOUR) {
+      switch (this.step) {
+        case 4:
+          clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
+        default:
+          clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
+      }
+      clone.setSeconds(0);
+      clone.setMilliseconds(0);
+    } else if (this.scale == TimeStep.SCALE.MINUTE) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 15:
+        case 10:
+          clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
+          clone.setSeconds(0);
+          break;
+        case 5:
+          clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
+        default:
+          clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
+      }
+      clone.setMilliseconds(0);
     }
-
-    this._repaintDeleteButton(dom.box);
-  };
-
-  /**
-   * Show the item in the DOM (when not already displayed). The items DOM will
-   * be created when needed.
-   */
-  ItemBox.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+    else if (this.scale == TimeStep.SCALE.SECOND) {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (this.step) {
+        case 15:
+        case 10:
+          clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
+          clone.setMilliseconds(0);
+          break;
+        case 5:
+          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
+        default:
+          clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
+      }
+    }
+    else if (this.scale == TimeStep.SCALE.MILLISECOND) {
+      var step = this.step > 5 ? this.step / 2 : 1;
+      clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
     }
+    
+    return clone;
   };
 
   /**
-   * Hide the item from the DOM (when visible)
+   * Check if the current value is a major value (for example when the step
+   * is DAY, a major value is each first day of the MONTH)
+   * @return {boolean} true if current date is major, else false.
    */
-  ItemBox.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.top = null;
-      this.left = null;
-
-      this.displayed = false;
+  TimeStep.prototype.isMajor = function() {
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:
+        return (this.current.getMilliseconds() == 0);
+      case TimeStep.SCALE.SECOND:
+        return (this.current.getSeconds() == 0);
+      case TimeStep.SCALE.MINUTE:
+        return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
+      // Note: this is no bug. Major label is equal for both minute and hour scale
+      case TimeStep.SCALE.HOUR:
+        return (this.current.getHours() == 0);
+      case TimeStep.SCALE.WEEKDAY: // intentional fall through
+      case TimeStep.SCALE.DAY:
+        return (this.current.getDate() == 1);
+      case TimeStep.SCALE.MONTH:
+        return (this.current.getMonth() == 0);
+      case TimeStep.SCALE.YEAR:
+        return false;
+      default:
+        return false;
     }
   };
 
+
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Returns formatted text for the minor axislabel, depending on the current
+   * date and the scale. For example when scale is MINUTE, the current time is
+   * formatted as "hh:mm".
+   * @param {Date} [date] custom date. if not provided, current date is taken
    */
-  ItemBox.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start),
-        align = this.options.align,
-        left,
-        box = this.dom.box,
-        line = this.dom.line,
-        dot = this.dom.dot;
-
-    // calculate left position of the box
-    if (align == 'right') {
-      this.left = start - this.width;
-    }
-    else if (align == 'left') {
-      this.left = start;
-    }
-    else {
-      // default or 'center'
-      this.left = start - this.width / 2;
+  TimeStep.prototype.getLabelMinor = function(date) {
+    if (date == undefined) {
+      date = this.current;
     }
 
-    // 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';
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:  return moment(date).format('SSS');
+      case TimeStep.SCALE.SECOND:       return moment(date).format('s');
+      case TimeStep.SCALE.MINUTE:       return moment(date).format('HH:mm');
+      case TimeStep.SCALE.HOUR:         return moment(date).format('HH:mm');
+      case TimeStep.SCALE.WEEKDAY:      return moment(date).format('ddd D');
+      case TimeStep.SCALE.DAY:          return moment(date).format('D');
+      case TimeStep.SCALE.MONTH:        return moment(date).format('MMM');
+      case TimeStep.SCALE.YEAR:         return moment(date).format('YYYY');
+      default:                          return '';
+    }
   };
 
+
   /**
-   * Reposition the item vertically
-   * @Override
+   * Returns formatted text for the major axis label, depending on the current
+   * date and the scale. For example when scale is MINUTE, the major scale is
+   * hours, and the hour will be formatted as "hh".
+   * @param {Date} [date] custom date. if not provided, current date is taken
    */
-  ItemBox.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box,
-        line = this.dom.line,
-        dot = this.dom.dot;
-
-    if (orientation == 'top') {
-      box.style.top     = (this.top || 0) + 'px';
-
-      line.style.top    = '0';
-      line.style.height = (this.parent.top + this.top + 1) + 'px';
-      line.style.bottom = '';
+  TimeStep.prototype.getLabelMajor = function(date) {
+    if (date == undefined) {
+      date = this.current;
     }
-    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';
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.scale) {
+      case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
+      case TimeStep.SCALE.SECOND:     return moment(date).format('D MMMM HH:mm');
+      case TimeStep.SCALE.MINUTE:
+      case TimeStep.SCALE.HOUR:       return moment(date).format('ddd D MMMM');
+      case TimeStep.SCALE.WEEKDAY:
+      case TimeStep.SCALE.DAY:        return moment(date).format('MMMM YYYY');
+      case TimeStep.SCALE.MONTH:      return moment(date).format('YYYY');
+      case TimeStep.SCALE.YEAR:       return '';
+      default:                        return '';
     }
-
-    dot.style.top = (-this.props.dot.height / 2) + 'px';
   };
 
-  module.exports = ItemBox;
+  module.exports = TimeStep;
 
 
 /***/ },
-/* 24 */
+/* 22 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Item = __webpack_require__(22);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(19);
 
   /**
-   * @constructor ItemPoint
-   * @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 current time bar
+   * @param {{range: Range, dom: Object, domProps: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCurrentTime]
+   * @constructor CurrentTime
+   * @extends Component
    */
-  function ItemPoint (data, conversion, options) {
-    this.props = {
-      dot: {
-        top: 0,
-        width: 0,
-        height: 0
-      },
-      content: {
-        height: 0,
-        marginLeft: 0
-      }
+  function CurrentTime (body, options) {
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      showCurrentTime: true
     };
+    this.options = util.extend({}, this.defaultOptions);
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
-      }
-    }
+    this._create();
 
-    Item.call(this, data, conversion, options);
+    this.setOptions(options);
   }
 
-  ItemPoint.prototype = new Item (null, null, null);
+  CurrentTime.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
+   * Create the HTML DOM for the current time bar
+   * @private
    */
-  ItemPoint.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);
+  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;
   };
 
   /**
-   * Repaint the item
+   * Destroy the CurrentTime bar
    */
-  ItemPoint.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);
+  CurrentTime.prototype.destroy = function () {
+    this.options.showCurrentTime = false;
+    this.redraw(); // will remove the bar from the DOM and stop refreshing
 
-      // dot at start
-      dom.dot = document.createElement('div');
-      dom.point.appendChild(dom.dot);
+    this.body = null;
+  };
 
-      // attach this item as attribute
-      dom.point['timeline-item'] = this;
+  /**
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCurrentTime]
+   */
+  CurrentTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCurrentTime'], this.options, options);
     }
+  };
 
-    // 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 time axis: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.point);
-    }
-    this.displayed = true;
+  /**
+   * 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);
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        this.start();
       }
 
-      this.dirty = true;
-    }
+      var now = new Date();
+      var x = this.body.util.toScreen(now);
 
-    // update title
-    if (this.data.title != this.title) {
-      dom.point.title = this.data.title;
-      this.title = this.data.title;
+      this.bar.style.left = x + 'px';
+      this.bar.title = 'Current time: ' + now;
+    }
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
+      this.stop();
     }
 
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.point.className  = 'item point' + className;
-      dom.dot.className  = 'item dot' + className;
+    return false;
+  };
 
-      this.dirty = true;
-    }
+  /**
+   * Start auto refreshing the current time bar
+   */
+  CurrentTime.prototype.start = function() {
+    var me = this;
 
-    // recalculate size
-    if (this.dirty) {
-      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;
+    function update () {
+      me.stop();
 
-      // resize contents
-      dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
-      //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
+      // 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;
 
-      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
-      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+      me.redraw();
 
-      this.dirty = false;
+      // start a timer to adjust for the new time
+      me.currentTimeTimer = setTimeout(update, interval);
     }
 
-    this._repaintDeleteButton(dom.point);
+    update();
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Stop auto refreshing the current time bar
    */
-  ItemPoint.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  CurrentTime.prototype.stop = function() {
+    if (this.currentTimeTimer !== undefined) {
+      clearTimeout(this.currentTimeTimer);
+      delete this.currentTimeTimer;
     }
   };
 
-  /**
-   * Hide the item from the DOM (when visible)
-   */
-  ItemPoint.prototype.hide = function() {
-    if (this.displayed) {
-      if (this.dom.point.parentNode) {
-        this.dom.point.parentNode.removeChild(this.dom.point);
-      }
+  module.exports = CurrentTime;
 
-      this.top = null;
-      this.left = null;
 
-      this.displayed = false;
-    }
-  };
+/***/ },
+/* 23 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(3);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(19);
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * A custom time bar
+   * @param {{range: Range, dom: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCustomTime]
+   * @constructor CustomTime
+   * @extends Component
    */
-  ItemPoint.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start);
 
-    this.left = start - this.props.dot.width;
+  function CustomTime (body, options) {
+    this.body = body;
 
-    // reposition point
-    this.dom.point.style.left = this.left + 'px';
-  };
-
-  /**
-   * Reposition the item vertically
-   * @Override
-   */
-  ItemPoint.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        point = this.dom.point;
-
-    if (orientation == 'top') {
-      point.style.top = this.top + 'px';
-    }
-    else {
-      point.style.top = (this.parent.height - this.top - this.height) + 'px';
-    }
-  };
+    // default options
+    this.defaultOptions = {
+      showCustomTime: false
+    };
+    this.options = util.extend({}, this.defaultOptions);
 
-  module.exports = ItemPoint;
+    this.customTime = new Date();
+    this.eventParams = {}; // stores state parameters while dragging the bar
 
+    // create the DOM
+    this._create();
 
-/***/ },
-/* 25 */
-/***/ function(module, exports, __webpack_require__) {
+    this.setOptions(options);
+  }
 
-  var Hammer = __webpack_require__(49);
-  var Item = __webpack_require__(22);
+  CustomTime.prototype = new Component();
 
   /**
-   * @constructor ItemRange
-   * @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
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCustomTime]
    */
-  function ItemRange (data, conversion, options) {
-    this.props = {
-      content: {
-        width: 0
-      }
-    };
-    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);
-      }
+  CustomTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCustomTime'], this.options, options);
     }
-
-    Item.call(this, data, conversion, options);
-  }
-
-  ItemRange.prototype = new Item (null, null, null);
-
-  ItemRange.prototype.baseClassName = 'item range';
+  };
 
   /**
-   * 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
+   * Create the DOM for the custom time
+   * @private
    */
-  ItemRange.prototype.isVisible = function(range) {
-    // determine visibility
-    return (this.data.start < range.end) && (this.data.end > range.start);
+  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;
+
+    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);
+
+    // 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));
   };
 
   /**
-   * Repaint the item
+   * Destroy the CustomTime bar
    */
-  ItemRange.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-        // background box
-      dom.box = document.createElement('div');
-      // className is updated in redraw()
-
-      // contents box
-      dom.content = document.createElement('div');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+  CustomTime.prototype.destroy = function () {
+    this.options.showCustomTime = false;
+    this.redraw(); // will remove the bar from the DOM
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
-    }
+    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 foreground = this.parent.dom.foreground;
-      if (!foreground) {
-        throw new Error('Cannot redraw time axis: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.box);
-    }
-    this.displayed = true;
+    this.body = null;
+  };
 
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+  /**
+   * 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);
       }
 
-      this.dirty = true;
-    }
-
-    // update title
-    if (this.data.title != this.title) {
-      dom.box.title = this.data.title;
-      this.title = this.data.title;
-    }
-
-    // update class
-    var className = (this.data.className ? (' ' + this.data.className) : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.box.className = this.baseClassName + className;
+      var x = this.body.util.toScreen(this.customTime);
 
-      this.dirty = true;
+      this.bar.style.left = x + 'px';
+      this.bar.title = 'Time: ' + this.customTime;
     }
-
-    // recalculate size
-    if (this.dirty) {
-      // determine from css whether this box has overflow
-      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
-
-      this.props.content.width = this.dom.content.offsetWidth;
-      this.height = this.dom.box.offsetHeight;
-
-      this.dirty = false;
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
     }
 
-    this._repaintDeleteButton(dom.box);
-    this._repaintDragLeft();
-    this._repaintDragRight();
+    return false;
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Set custom time.
+   * @param {Date} time
    */
-  ItemRange.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
-    }
+  CustomTime.prototype.setCustomTime = function(time) {
+    this.customTime = new Date(time.valueOf());
+    this.redraw();
   };
 
   /**
-   * Hide the item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  ItemRange.prototype.hide = function() {
-    if (this.displayed) {
-      var box = this.dom.box;
-
-      if (box.parentNode) {
-        box.parentNode.removeChild(box);
-      }
-
-      this.top = null;
-      this.left = null;
-
-      this.displayed = false;
-    }
+  CustomTime.prototype.getCustomTime = function() {
+    return new Date(this.customTime.valueOf());
   };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Start moving horizontally
+   * @param {Event} event
+   * @private
    */
-  // TODO: delete the old function
-  ItemRange.prototype.repositionX = function() {
-    var props = this.props,
-        parentWidth = this.parent.width,
-        start = this.conversion.toScreen(this.data.start),
-        end = this.conversion.toScreen(this.data.end),
-        padding = this.options.padding,
-        contentLeft;
-
-    // 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);
-
-    if (this.overflow) {
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      contentLeft = Math.max(-start, 0);
-
-      this.left = start;
-      this.width = boxWidth + this.props.content.width;
-      // Note: The calculation of width is an optimistic calculation, giving
-      //       a width which will not change when moving the Timeline
-      //       So no restacking needed, which is nicer for the eye;
-    }
-    else { // no overflow
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      if (start < 0) {
-        contentLeft = Math.min(-start,
-            (end - start - props.content.width - 2 * padding));
-        // TODO: remove the need for options.padding. it's terrible.
-      }
-      else {
-        contentLeft = 0;
-      }
-
-      this.left = start;
-      this.width = boxWidth;
-    }
+  CustomTime.prototype._onDragStart = function(event) {
+    this.eventParams.dragging = true;
+    this.eventParams.customTime = this.customTime;
 
-    this.dom.box.style.left = this.left + 'px';
-    this.dom.box.style.width = boxWidth + 'px';
-    this.dom.content.style.left = contentLeft + 'px';
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /**
-   * Reposition the item vertically
-   * @Override
+   * Perform moving operating.
+   * @param {Event} event
+   * @private
    */
-  ItemRange.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box;
+  CustomTime.prototype._onDrag = function (event) {
+    if (!this.eventParams.dragging) return;
 
-    if (orientation == 'top') {
-      box.style.top = this.top + 'px';
-    }
-    else {
-      box.style.top = (this.parent.height - this.top - this.height) + 'px';
-    }
-  };
+    var deltaX = event.gesture.deltaX,
+        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
+        time = this.body.util.toTime(x);
 
-  /**
-   * Repaint a drag area on the left side of the range when the range is selected
-   * @protected
-   */
-  ItemRange.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;
+    this.setCustomTime(time);
 
-      // TODO: this should be redundant?
-      Hammer(dragLeft, {
-        preventDefault: true
-      }).on('drag', function () {
-            //console.log('drag left')
-          });
+    // fire a timechange event
+    this.body.emitter.emit('timechange', {
+      time: new Date(this.customTime.valueOf())
+    });
 
-      this.dom.box.appendChild(dragLeft);
-      this.dom.dragLeft = dragLeft;
-    }
-    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;
-    }
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /**
-   * Repaint a drag area on the right side of the range when the range is selected
-   * @protected
+   * Stop moving operating.
+   * @param {event} event
+   * @private
    */
-  ItemRange.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;
+  CustomTime.prototype._onDragEnd = function (event) {
+    if (!this.eventParams.dragging) return;
 
-      // TODO: this should be redundant?
-      Hammer(dragRight, {
-        preventDefault: true
-      }).on('drag', function () {
-        //console.log('drag right')
-      });
+    // fire a timechanged event
+    this.body.emitter.emit('timechanged', {
+      time: new Date(this.customTime.valueOf())
+    });
 
-      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;
-    }
+    event.stopPropagation();
+    event.preventDefault();
   };
 
-  module.exports = ItemRange;
+  module.exports = CustomTime;
 
 
 /***/ },
-/* 26 */
+/* 24 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Emitter = __webpack_require__(41);
-  var Hammer = __webpack_require__(49);
-  var mousetrap = __webpack_require__(42);
+  var Hammer = __webpack_require__(3);
   var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var dotparser = __webpack_require__(32);
-  var Groups = __webpack_require__(28);
-  var Images = __webpack_require__(29);
-  var Node = __webpack_require__(30);
-  var Edge = __webpack_require__(27);
-  var Popup = __webpack_require__(31);
-  var MixinLoader = __webpack_require__(40);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Component = __webpack_require__(19);
+  var Group = __webpack_require__(25);
+  var ItemBox = __webpack_require__(29);
+  var ItemPoint = __webpack_require__(30);
+  var ItemRange = __webpack_require__(27);
 
-  // Load custom shapes into CanvasRenderingContext2D
-  __webpack_require__(37);
+
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
   /**
-   * @constructor Network
-   * Create a network visualization, displaying nodes and edges.
-   *
-   * @param {Element} container   The DOM element in which the Network will
-   *                                  be created. Normally a div element.
-   * @param {Object} data         An object containing parameters
-   *                              {Array} nodes
-   *                              {Array} edges
-   * @param {Object} options      Options
+   * 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
    */
-  function Network (container, data, options) {
-    if (!(this instanceof Network)) {
-      throw new SyntaxError('Constructor must be called with the new operator');
-    }
+  function ItemSet(body, options) {
+    this.body = body;
 
-    this._initializeMixinLoaders();
+    this.defaultOptions = {
+      type: null,  // 'box', 'point', 'range'
+      orientation: 'bottom',  // 'top' or 'bottom'
+      align: 'center', // alignment of box items
+      stack: true,
+      groupOrder: null,
 
-    // create variables and set default values
-    this.containerElement = container;
-    this.width = '100%';
-    this.height = '100%';
+      selectable: true,
+      editable: {
+        updateTime: false,
+        updateGroup: false,
+        add: false,
+        remove: false
+      },
 
-    // render and calculation settings
-    this.renderRefreshRate = 60;                         // hz (fps)
-    this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
-    this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
-    this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
-    this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
+      onAdd: function (item, callback) {
+        callback(item);
+      },
+      onUpdate: function (item, callback) {
+        callback(item);
+      },
+      onMove: function (item, callback) {
+        callback(item);
+      },
+      onRemove: function (item, callback) {
+        callback(item);
+      },
 
-    this.stabilize = true;  // stabilize before displaying the network
-    this.selectable = true;
-    this.initializing = true;
+      margin: {
+        item: 10,
+        axis: 20
+      },
+      padding: 5
+    };
 
-    // these functions are triggered when the dataset is edited
-    this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
+    // options is shared by this ItemSet and all its items
+    this.options = util.extend({}, this.defaultOptions);
 
+    // options for getting items from the DataSet with the correct type
+    this.itemOptions = {
+      type: {start: 'Date', end: 'Date'}
+    };
 
-    // set constant values
-    this.constants = {
-      nodes: {
-        radiusMin: 10,
-        radiusMax: 30,
-        radius: 10,
-        shape: 'ellipse',
-        image: undefined,
-        widthMin: 16, // px
-        widthMax: 64, // px
-        fixed: false,
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        level: -1,
-        color: {
-            border: '#2B7CE9',
-            background: '#97C2FC',
-          highlight: {
-            border: '#2B7CE9',
-            background: '#D2E5FF'
-          },
-          hover: {
-            border: '#2B7CE9',
-            background: '#D2E5FF'
-          }
-        },
-        borderColor: '#2B7CE9',
-        backgroundColor: '#97C2FC',
-        highlightColor: '#D2E5FF',
-        group: undefined
+    this.conversion = {
+      toScreen: body.util.toScreen,
+      toTime: body.util.toTime
+    };
+    this.dom = {};
+    this.props = {};
+    this.hammer = null;
+
+    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);
       },
-      edges: {
-        widthMin: 1,
-        widthMax: 15,
-        width: 1,
-        widthSelectionMultiplier: 2,
-        hoverWidth: 1.5,
-        style: 'line',
-        color: {
-          color:'#848484',
-          highlight:'#848484',
-          hover: '#848484'
-        },
-        fontColor: '#343434',
-        fontSize: 14, // px
-        fontFace: 'arial',
-        fontFill: 'white',
-        arrowScaleFactor: 1,
-        dash: {
-          length: 10,
-          gap: 5,
-          altLength: undefined
-        },
-        inheritColor: "from" // to, from, false, true (== from)
-      },
-      configurePhysics:false,
-      physics: {
-        barnesHut: {
-          enabled: true,
-          theta: 1 / 0.6, // inverted to save time during calculation
-          gravitationalConstant: -2000,
-          centralGravity: 0.3,
-          springLength: 95,
-          springConstant: 0.04,
-          damping: 0.09
-        },
-        repulsion: {
-          centralGravity: 0.1,
-          springLength: 200,
-          springConstant: 0.05,
-          nodeDistance: 100,
-          damping: 0.09
-        },
-        hierarchicalRepulsion: {
-          enabled: false,
-          centralGravity: 0.5,
-          springLength: 150,
-          springConstant: 0.01,
-          nodeDistance: 60,
-          damping: 0.09
-        },
-        damping: null,
-        centralGravity: null,
-        springLength: null,
-        springConstant: null
-      },
-      clustering: {                   // Per Node in Cluster = PNiC
-        enabled: false,               // (Boolean)             | global on/off switch for clustering.
-        initialMaxNodes: 100,         // (# nodes)             | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
-        clusterThreshold:500,         // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
-        reduceToNodes:300,            // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
-        chainThreshold: 0.4,          // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
-        clusterEdgeThreshold: 20,     // (px)                  | edge length threshold. if smaller, this node is clustered.
-        sectorThreshold: 100,         // (# nodes in cluster)  | cluster size threshold. If larger, expanding in own sector.
-        screenSizeThreshold: 0.2,     // (% of canvas)         | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
-        fontSizeMultiplier: 4.0,      // (px PNiC)             | how much the cluster font size grows per node in cluster (in px).
-        maxFontSize: 1000,
-        forceAmplification: 0.1,      // (multiplier PNiC)     | factor of increase fo the repulsion force of a cluster (per node in cluster).
-        distanceAmplification: 0.1,   // (multiplier PNiC)     | factor how much the repulsion distance of a cluster increases (per node in cluster).
-        edgeGrowth: 20,               // (px PNiC)             | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
-        nodeScaling: {width:  1,      // (px PNiC)             | growth of the width  per node in cluster.
-                      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
-      },
-      navigation: {
-        enabled: false
-      },
-      keyboard: {
-        enabled: false,
-        speed: {x: 10, y: 10, zoom: 0.02}
-      },
-      dataManipulation: {
-        enabled: false,
-        initiallyVisible: false
-      },
-      hierarchicalLayout: {
-        enabled:false,
-        levelSeparation: 150,
-        nodeSpacing: 100,
-        direction: "UD"   // UD, DU, LR, RL
-      },
-      freezeForStabilization: false,
-      smoothCurves: {
-        enabled: true,
-        dynamic: true,
-        type: "continuous",
-        roundness: 0.5
+      'update': function (event, params, senderId) {
+        me._onUpdate(params.items);
       },
-      dynamicSmoothCurves: true,
-      maxVelocity:  30,
-      minVelocity:  0.1,   // px/s
-      stabilizationIterations: 1000,  // maximum number of iteration to stabilize
-      labels:{
-        add:"Add Node",
-        edit:"Edit",
-        link:"Add Link",
-        del:"Delete selected",
-        editNode:"Edit Node",
-        editEdge:"Edit Edge",
-        back:"Back",
-        addDescription:"Click in an empty space to place a new node.",
-        linkDescription:"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.",
-        addError:"The function for add does not support two arguments (data,callback).",
-        linkError:"The function for connect does not support two arguments (data,callback).",
-        editError:"The function for edit does not support two arguments (data, callback).",
-        editBoundError:"No edit function has been bound to this button.",
-        deleteError:"The function for delete does not support two arguments (data, callback).",
-        deleteClusterError:"Clusters cannot be deleted."
+      'remove': function (event, params, senderId) {
+        me._onRemove(params.items);
+      }
+    };
+
+    // listeners for the DataSet of the groups
+    this.groupListeners = {
+      'add': function (event, params, senderId) {
+        me._onAddGroups(params.items);
       },
-      tooltip: {
-        delay: 300,
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        color: {
-          border: '#666',
-          background: '#FFFFC6'
-        }
+      'update': function (event, params, senderId) {
+        me._onUpdateGroups(params.items);
       },
-      dragNetwork: true,
-      dragNodes: true,
-      zoomable: true,
-      hover: false,
-      hideEdgesOnDrag: false,
-      hideNodesOnDrag: false
+      'remove': function (event, params, senderId) {
+        me._onRemoveGroups(params.items);
+      }
     };
-    this.hoverObj = {nodes:{},edges:{}};
-    this.controlNodesActive = false;
 
-    // Node variables
-    var network = this;
-    this.groups = new Groups(); // object with groups
-    this.images = new Images(); // object with images
-    this.images.setOnloadCallback(function () {
-      network._redraw();
-    });
+    this.items = {};      // object with an Item for every data item
+    this.groups = {};     // Group object for every group
+    this.groupIds = [];
 
-    // keyboard navigation variables
-    this.xIncrement = 0;
-    this.yIncrement = 0;
-    this.zoomIncrement = 0;
+    this.selection = [];  // list with the ids of all selected nodes
+    this.stackDirty = true; // if true, all items will be restacked on next redraw
+
+    this.touchParams = {}; // stores properties while dragging
+    // create the HTML DOM
 
-    // loading all the mixins:
-    // load the force calculation functions, grouped under the physics system.
-    this._loadPhysicsSystem();
-    // create a frame and canvas
     this._create();
-    // load the sector system.    (mandatory, fully integrated with Network)
-    this._loadSectorSystem();
-    // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
-    this._loadClusterSystem();
-    // load the selection system. (mandatory, required by Network)
-    this._loadSelectionSystem();
-    // load the selection system. (mandatory, required by Network)
-    this._loadHierarchySystem();
 
-    // apply options
-    this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
-    this._setScale(1);
     this.setOptions(options);
+  }
 
-    // other vars
-    this.freezeSimulation = false;// freeze the simulation
-    this.cachedFunctions = {};
+  ItemSet.prototype = new Component();
 
-    // containers for nodes and edges
-    this.calculationNodes = {};
-    this.calculationNodeIndices = [];
-    this.nodeIndices = [];        // array with all the indices of the nodes. Used to speed up forces calculation
-    this.nodes = {};              // object with Node objects
-    this.edges = {};              // object with Edge objects
+  // available item types will be registered here
+  ItemSet.types = {
+    box: ItemBox,
+    range: ItemRange,
+    point: ItemPoint
+  };
 
-    // position and scale variables and objects
-    this.canvasTopLeft     = {"x": 0,"y": 0};   // coordinates of the top left of the canvas.     they will be set during _redraw.
-    this.canvasBottomRight = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
-    this.pointerPosition = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
-    this.areaCenter = {};               // object with x and y elements used for determining the center of the zoom action
-    this.scale = 1;                     // defining the global scale variable in the constructor
-    this.previousScale = this.scale;    // this is used to check if the zoom operation is zooming in or out
+  /**
+   * Create the HTML DOM for the ItemSet
+   */
+  ItemSet.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'itemset';
+    frame['timeline-itemset'] = this;
+    this.dom.frame = frame;
 
-    // datasets or dataviews
-    this.nodesData = null;      // A DataSet or DataView
-    this.edgesData = null;      // A DataSet or DataView
+    // create background panel
+    var background = document.createElement('div');
+    background.className = 'background';
+    frame.appendChild(background);
+    this.dom.background = background;
 
-    // create event listeners used to subscribe on the DataSets of the nodes and edges
-    this.nodesListeners = {
-      'add': function (event, params) {
-        network._addNodes(params.items);
-        network.start();
-      },
-      'update': function (event, params) {
-        network._updateNodes(params.items);
-        network.start();
-      },
-      'remove': function (event, params) {
-        network._removeNodes(params.items);
-        network.start();
-      }
-    };
-    this.edgesListeners = {
-      'add': function (event, params) {
-        network._addEdges(params.items);
-        network.start();
-      },
-      'update': function (event, params) {
-        network._updateEdges(params.items);
-        network.start();
-      },
-      'remove': function (event, params) {
-        network._removeEdges(params.items);
-        network.start();
-      }
-    };
+    // create foreground panel
+    var foreground = document.createElement('div');
+    foreground.className = 'foreground';
+    frame.appendChild(foreground);
+    this.dom.foreground = foreground;
 
-    // properties for the animation
-    this.moving = true;
-    this.timer = undefined; // Scheduling function. Is definded in this.start();
+    // create axis panel
+    var axis = document.createElement('div');
+    axis.className = 'axis';
+    this.dom.axis = axis;
 
-    // load data (the disable start variable will be the same as the enabled clustering)
-    this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
+    // create labelset
+    var labelSet = document.createElement('div');
+    labelSet.className = 'labelset';
+    this.dom.labelSet = labelSet;
 
-    // hierarchical layout
-    this.initializing = false;
-    if (this.constants.hierarchicalLayout.enabled == true) {
-      this._setupHierarchicalLayout();
-    }
-    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.stabilize == false) {
-        this.zoomExtent(true,this.constants.clustering.enabled);
-      }
-    }
+    // create ungrouped Group
+    this._updateUngrouped();
 
-    // if clustering is disabled, the simulation will have started in the setData function
-    if (this.constants.clustering.enabled) {
-      this.startWithClustering();
-    }
-  }
+    // 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, {
+      prevent_default: true
+    });
 
-  // Extend Network with an Emitter mixin
-  Emitter(Network.prototype);
+    // 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));
 
-  /**
-   * Get the script path where the vis.js library is located
-   *
-   * @returns {string | null} path   Path or null when not found. Path does not
-   *                                 end with a slash.
-   * @private
-   */
-  Network.prototype._getScriptPath = function() {
-    var scripts = document.getElementsByTagName( 'script' );
+    // single select (or unselect) when tapping an item
+    this.hammer.on('tap',  this._onSelectItem.bind(this));
 
-    // find script named vis.js or vis.min.js
-    for (var i = 0; i < scripts.length; i++) {
-      var src = scripts[i].src;
-      var match = src && /\/?vis(.min)?\.js$/.exec(src);
-      if (match) {
-        // return path without the script name
-        return src.substring(0, src.length - match[0].length);
-      }
-    }
+    // multi select when holding mouse/touch, or on ctrl+click
+    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
 
-    return null;
-  };
+    // add item on doubletap
+    this.hammer.on('doubletap', this._onAddItem.bind(this));
 
+    // attach to the DOM
+    this.show();
+  };
 
   /**
-   * Find the center position of the network
-   * @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', or 'range'. The default
+   *                              Style can be overwritten by individual items.
+   *                           {String} align
+   *                              Alignment for the items, only applicable for
+   *                              ItemBox. 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
+   *                              Margin between items in pixels. 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.
    */
-  Network.prototype._getRange = function() {
-    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.x)) {minX = node.x;}
-        if (maxX < (node.x)) {maxX = node.x;}
-        if (minY > (node.y)) {minY = node.y;}
-        if (maxY < (node.y)) {maxY = node.y;}
+  ItemSet.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
+      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 = options.margin;
+        }
+        else if (typeof options.margin === 'object'){
+          util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
+        }
       }
+
+      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);
+        }
+      }
+
+      // callback functions
+      var addCallback = (function (name) {
+        if (name in options) {
+          var fn = options[name];
+          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'].forEach(addCallback);
+
+      // force the itemSet to refresh: options like orientation and margins may be changed
+      this.markDirty();
     }
-    if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
-      minY = 0, maxY = 0, minX = 0, maxX = 0;
-    }
-    return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
   };
 
-
   /**
-   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
-   * @returns {{x: number, y: number}}
-   * @private
+   * Mark the ItemSet dirty so it will refresh everything with next redraw
    */
-  Network.prototype._findCenter = function(range) {
-    return {x: (0.5 * (range.maxX + range.minX)),
-            y: (0.5 * (range.maxY + range.minY))};
+  ItemSet.prototype.markDirty = function() {
+    this.groupIds = [];
+    this.stackDirty = true;
   };
 
-
   /**
-   * center the network
-   *
-   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+   * Destroy the ItemSet
    */
-  Network.prototype._centerNetwork = function(range) {
-    var center = this._findCenter(range);
+  ItemSet.prototype.destroy = function() {
+    this.hide();
+    this.setItems(null);
+    this.setGroups(null);
 
-    center.x *= this.scale;
-    center.y *= this.scale;
-    center.x -= 0.5 * this.frame.canvas.clientWidth;
-    center.y -= 0.5 * this.frame.canvas.clientHeight;
+    this.hammer = null;
 
-    this._setTranslation(-center.x,-center.y); // set at 0,0
+    this.body = null;
+    this.conversion = null;
   };
 
-
   /**
-   * This function zooms out to fit all data on screen based on amount of nodes
-   *
-   * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
-   * @param {Boolean} [disableStart] | If true, start is not called.
+   * Hide the component from the DOM
    */
-  Network.prototype.zoomExtent = function(initialZoom, disableStart) {
-    if (initialZoom === undefined) {
-      initialZoom = false;
+  ItemSet.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
-    if (disableStart === undefined) {
-      disableStart = false;
+
+    // remove the axis with dots
+    if (this.dom.axis.parentNode) {
+      this.dom.axis.parentNode.removeChild(this.dom.axis);
     }
 
-    var range = this._getRange();
-    var zoomLevel;
+    // remove the labelset containing all group labels
+    if (this.dom.labelSet.parentNode) {
+      this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
+    }
+  };
 
-    if (initialZoom == true) {
-      var numberOfNodes = this.nodeIndices.length;
-      if (this.constants.smoothCurves == true) {
-        if (this.constants.clustering.enabled == true &&
-          numberOfNodes >= this.constants.clustering.initialMaxNodes) {
-          zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-        else {
-          zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-      }
-      else {
-        if (this.constants.clustering.enabled == true &&
-            numberOfNodes >= this.constants.clustering.initialMaxNodes) {
-          zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-        else {
-          zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
-        }
-      }
-
-      // correct for larger canvasses.
-      var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
-      zoomLevel *= factor;
+  /**
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
+   */
+  ItemSet.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
     }
-    else {
-      var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
-      var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
-
-      var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
-      var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
 
-      zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
+    // show axis with dots
+    if (!this.dom.axis.parentNode) {
+      this.body.dom.backgroundVertical.appendChild(this.dom.axis);
     }
 
-    if (zoomLevel > 1.0) {
-      zoomLevel = 1.0;
+    // show labelset containing labels
+    if (!this.dom.labelSet.parentNode) {
+      this.body.dom.left.appendChild(this.dom.labelSet);
     }
+  };
+
+  /**
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {Array} [ids] An array with zero or more id's of the items to be
+   *                      selected. If ids is an empty array, all items will be
+   *                      unselected.
+   */
+  ItemSet.prototype.setSelection = function(ids) {
+    var i, ii, id, item;
 
+    if (ids) {
+      if (!Array.isArray(ids)) {
+        throw new TypeError('Array expected');
+      }
 
-    this._setScale(zoomLevel);
-    this._centerNetwork(range);
-    if (disableStart == false) {
-      this.moving = true;
-      this.start();
+      // 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();
+        }
+      }
     }
   };
 
+  /**
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
+   */
+  ItemSet.prototype.getSelection = function() {
+    return this.selection.concat([]);
+  };
 
   /**
-   * Update the this.nodeIndices with the most recent node index list
+   * Deselect a selected item
+   * @param {String | Number} id
    * @private
    */
-  Network.prototype._updateNodeIndexList = function() {
-    this._clearNodeIndexList();
-    for (var idx in this.nodes) {
-      if (this.nodes.hasOwnProperty(idx)) {
-        this.nodeIndices.push(idx);
+  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;
       }
     }
   };
 
+  /**
+   * 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;
+
+    // update class name
+    frame.className = 'itemset' + (editable ? ' editable' : '');
+
+    // reorder the groups (if needed)
+    resized = this._orderGroups() || resized;
+
+    // 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;
+
+    // redraw all groups
+    var restack = this.stackDirty,
+        firstGroup = this._firstGroup(),
+        firstMargin = {
+          item: margin.item,
+          axis: margin.axis
+        },
+        nonFirstMargin = {
+          item: margin.item,
+          axis: margin.item / 2
+        },
+        height = 0,
+        minHeight = margin.axis + margin.item;
+    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;
+
+    // update frame height
+    frame.style.height  = asSize(height);
+
+    // calculate actual size and position
+    this.props.top = frame.offsetTop;
+    this.props.left = frame.offsetLeft;
+    this.props.width = frame.offsetWidth;
+    this.props.height = height;
+
+    // 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 = this.body.domProps.border.left + 'px';
+
+    // check if this component is resized
+    resized = this._isResized() || resized;
+
+    return resized;
+  };
+
+  /**
+   * Get the first group, aligned with the axis
+   * @return {Group | null} firstGroup
+   * @private
+   */
+  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 nodes and edges, and optionally options as well.
-   *
-   * @param {Object} data              Object containing parameters:
-   *                                   {Array | DataSet | DataView} [nodes] Array with nodes
-   *                                   {Array | DataSet | DataView} [edges] Array with edges
-   *                                   {String} [dot] String containing data in DOT format
-   *                                   {Options} [options] Object with options
-   * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
+   * Create or delete the group holding all ungrouped items. This group is used when
+   * there are no groups specified.
+   * @protected
    */
-  Network.prototype.setData = function(data, disableStart) {
-    if (disableStart === undefined) {
-      disableStart = false;
-    }
+  ItemSet.prototype._updateUngrouped = function() {
+    var ungrouped = this.groups[UNGROUPED];
 
-    if (data && data.dot && (data.nodes || data.edges)) {
-      throw new SyntaxError('Data must contain either parameter "dot" or ' +
-          ' parameter pair "nodes" and "edges", but not both.');
+    if (this.groupsData) {
+      // remove the group holding all ungrouped items
+      if (ungrouped) {
+        ungrouped.hide();
+        delete this.groups[UNGROUPED];
+      }
     }
+    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;
 
-    // set options
-    this.setOptions(data && data.options);
+        for (var itemId in this.items) {
+          if (this.items.hasOwnProperty(itemId)) {
+            ungrouped.add(this.items[itemId]);
+          }
+        }
 
-    // set all data
-    if (data && data.dot) {
-      // parse DOT file
-      if(data && data.dot) {
-        var dotData = dotparser.DOTToGraph(data.dot);
-        this.setData(dotData);
-        return;
+        ungrouped.show();
       }
     }
+  };
+
+  /**
+   * Get the element for the labelset
+   * @return {HTMLElement} labelSet
+   */
+  ItemSet.prototype.getLabelSet = function() {
+    return this.dom.labelSet;
+  };
+
+  /**
+   * Set items
+   * @param {vis.DataSet | null} items
+   */
+  ItemSet.prototype.setItems = function(items) {
+    var me = this,
+        ids,
+        oldItemsData = this.itemsData;
+
+    // replace the dataset
+    if (!items) {
+      this.itemsData = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      this.itemsData = items;
+    }
     else {
-      this._setNodes(data && data.nodes);
-      this._setEdges(data && data.edges);
+      throw new TypeError('Data must be an instance of DataSet or DataView');
     }
 
-    this._putDataInSector();
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-    if (!disableStart) {
-      // find a stable position or start animating to a stable position
-      if (this.stabilize) {
-        var me = this;
-        setTimeout(function() {me._stabilize(); me.start();},0)
-      }
-      else {
-        this.start();
-      }
+      // 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);
+      });
+
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
+
+      // update the group holding all ungrouped items
+      this._updateUngrouped();
     }
   };
 
   /**
-   * Set options
-   * @param {Object} options
-   * @param {Boolean} [initializeView] | set zoom and translation to default.
+   * Get the current items
+   * @returns {vis.DataSet | null}
    */
-  Network.prototype.setOptions = function (options) {
-    if (options) {
-      var prop;
-      // retrieve parameter values
-      if (options.width !== undefined)           {this.width = options.width;}
-      if (options.height !== undefined)          {this.height = options.height;}
-      if (options.stabilize !== undefined)       {this.stabilize = options.stabilize;}
-      if (options.selectable !== undefined)      {this.selectable = options.selectable;}
-      if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
-      if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
-      if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
-      if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
-      if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
-      if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
-      if (options.hover !== undefined)           {this.constants.hover = options.hover;}
-      if (options.hideEdgesOnDrag !== undefined) {this.constants.hideEdgesOnDrag = options.hideEdgesOnDrag;}
-      if (options.hideNodesOnDrag !== undefined) {this.constants.hideNodesOnDrag = options.hideNodesOnDrag;}
+  ItemSet.prototype.getItems = function() {
+    return this.itemsData;
+  };
 
-      // TODO: deprecated since version 3.0.0. Cleanup some day
-      if (options.dragGraph !== undefined) {
-        throw new Error('Option dragGraph is renamed to dragNetwork');
-      }
+  /**
+   * Set groups
+   * @param {vis.DataSet} groups
+   */
+  ItemSet.prototype.setGroups = function(groups) {
+    var me = this,
+        ids;
 
-      if (options.labels !== undefined)  {
-        for (prop in options.labels) {
-          if (options.labels.hasOwnProperty(prop)) {
-            this.constants.labels[prop] = options.labels[prop];
-          }
-        }
-      }
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
 
-      if (options.onAdd) {
-          this.triggerFunctions.add = options.onAdd;
-        }
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
+    }
 
-      if (options.onEdit) {
-        this.triggerFunctions.edit = options.onEdit;
-      }
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
+    }
+    else {
+      throw new TypeError('Data must be an instance of DataSet or DataView');
+    }
 
-      if (options.onEditEdge) {
-        this.triggerFunctions.editEdge = options.onEditEdge;
-      }
+    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 (options.onConnect) {
-        this.triggerFunctions.connect = options.onConnect;
-      }
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
+    }
 
-      if (options.onDelete) {
-        this.triggerFunctions.del = options.onDelete;
-      }
+    // update the group holding all ungrouped items
+    this._updateUngrouped();
 
-      if (options.physics) {
-        if (options.physics.barnesHut) {
-          this.constants.physics.barnesHut.enabled = true;
-          for (prop in options.physics.barnesHut) {
-            if (options.physics.barnesHut.hasOwnProperty(prop)) {
-              this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
-            }
-          }
-        }
+    // update the order of all items in each group
+    this._order();
 
-        if (options.physics.repulsion) {
-          this.constants.physics.barnesHut.enabled = false;
-          for (prop in options.physics.repulsion) {
-            if (options.physics.repulsion.hasOwnProperty(prop)) {
-              this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
-            }
-          }
-        }
+    this.body.emitter.emit('change');
+  };
 
-        if (options.physics.hierarchicalRepulsion) {
-          this.constants.hierarchicalLayout.enabled = true;
-          this.constants.physics.hierarchicalRepulsion.enabled = true;
-          this.constants.physics.barnesHut.enabled = false;
-          for (prop in options.physics.hierarchicalRepulsion) {
-            if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
-              this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
-            }
-          }
+  /**
+   * 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
+   */
+  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);
         }
-      }
+      });
+    }
+  };
 
-      if (options.smoothCurves !== undefined) {
-        if (typeof options.smoothCurves == 'boolean') {
-          this.constants.smoothCurves.enabled = options.smoothCurves;
+  /**
+   * Handle updated items
+   * @param {Number[]} ids
+   * @protected
+   */
+  ItemSet.prototype._onUpdate = function(ids) {
+    var me = this;
+
+    ids.forEach(function (id) {
+      var itemData = me.itemsData.get(id, me.itemOptions),
+          item = me.items[id],
+          type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
+
+      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 {
-          this.constants.smoothCurves.enabled = true;
-          for (prop in options.smoothCurves) {
-            if (options.smoothCurves.hasOwnProperty(prop)) {
-              this.constants.smoothCurves[prop] = options.smoothCurves[prop];
-            }
-          }
+          me._updateItem(item, itemData);
         }
       }
 
-      if (options.hierarchicalLayout) {
-        this.constants.hierarchicalLayout.enabled = true;
-        for (prop in options.hierarchicalLayout) {
-          if (options.hierarchicalLayout.hasOwnProperty(prop)) {
-            this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
-          }
+      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 (options.hierarchicalLayout !== undefined)  {
-        this.constants.hierarchicalLayout.enabled = false;
-      }
-
-      if (options.clustering) {
-        this.constants.clustering.enabled = true;
-        for (prop in options.clustering) {
-          if (options.clustering.hasOwnProperty(prop)) {
-            this.constants.clustering[prop] = options.clustering[prop];
-          }
+        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 if (options.clustering !== undefined)  {
-        this.constants.clustering.enabled = false;
-      }
-
-      if (options.navigation) {
-        this.constants.navigation.enabled = true;
-        for (prop in options.navigation) {
-          if (options.navigation.hasOwnProperty(prop)) {
-            this.constants.navigation[prop] = options.navigation[prop];
-          }
+        else {
+          throw new TypeError('Unknown item type "' + type + '"');
         }
       }
-      else if (options.navigation !== undefined) {
-        this.constants.navigation.enabled = false;
-      }
+    });
 
-      if (options.keyboard) {
-        this.constants.keyboard.enabled = true;
-        for (prop in options.keyboard) {
-          if (options.keyboard.hasOwnProperty(prop)) {
-            this.constants.keyboard[prop] = options.keyboard[prop];
-          }
-        }
-      }
-      else if (options.keyboard !== undefined)  {
-        this.constants.keyboard.enabled = false;
-      }
+    this._order();
+    this.stackDirty = true; // force re-stacking of all items next redraw
+    this.body.emitter.emit('change');
+  };
 
-      if (options.dataManipulation) {
-        this.constants.dataManipulation.enabled = true;
-        for (prop in options.dataManipulation) {
-          if (options.dataManipulation.hasOwnProperty(prop)) {
-            this.constants.dataManipulation[prop] = options.dataManipulation[prop];
-          }
-        }
-        this.editMode = this.constants.dataManipulation.initiallyVisible;
-      }
-      else if (options.dataManipulation !== undefined)  {
-        this.constants.dataManipulation.enabled = false;
+  /**
+   * Handle added items
+   * @param {Number[]} ids
+   * @protected
+   */
+  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
+
+  /**
+   * Handle removed items
+   * @param {Number[]} ids
+   * @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);
       }
+    });
 
-      // TODO: work out these options and document them
-      if (options.edges) {
-        for (prop in options.edges) {
-          if (options.edges.hasOwnProperty(prop)) {
-            if (typeof options.edges[prop] != "object") {
-              this.constants.edges[prop] = options.edges[prop];
-            }
-          }
-        }
+    if (count) {
+      // update order
+      this._order();
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
+    }
+  };
 
-        if (options.edges.color !== undefined) {
-          if (util.isString(options.edges.color)) {
-            this.constants.edges.color = {};
-            this.constants.edges.color.color = options.edges.color;
-            this.constants.edges.color.highlight = options.edges.color;
-            this.constants.edges.color.hover = options.edges.color;
-          }
-          else {
-            if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
-            if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
-            if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
-          }
-        }
+  /**
+   * 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();
+    });
+  };
 
-        if (!options.edges.fontColor) {
-          if (options.edges.color !== undefined) {
-            if (util.isString(options.edges.color))           {this.constants.edges.fontColor = options.edges.color;}
-            else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.color;}
-          }
-        }
+  /**
+   * Handle updated groups
+   * @param {Number[]} ids
+   * @private
+   */
+  ItemSet.prototype._onUpdateGroups = function(ids) {
+    this._onAddGroups(ids);
+  };
 
-        // Added to support dashed lines
-        // David Jordan
-        // 2012-08-08
-        if (options.edges.dash) {
-          if (options.edges.dash.length !== undefined) {
-            this.constants.edges.dash.length = options.edges.dash.length;
-          }
-          if (options.edges.dash.gap !== undefined) {
-            this.constants.edges.dash.gap = options.edges.dash.gap;
-          }
-          if (options.edges.dash.altLength !== undefined) {
-            this.constants.edges.dash.altLength = options.edges.dash.altLength;
-          }
-        }
-      }
+  /**
+   * Handle changed groups
+   * @param {Number[]} ids
+   * @private
+   */
+  ItemSet.prototype._onAddGroups = function(ids) {
+    var me = this;
 
-      if (options.nodes) {
-        for (prop in options.nodes) {
-          if (options.nodes.hasOwnProperty(prop)) {
-            this.constants.nodes[prop] = options.nodes[prop];
-          }
-        }
+    ids.forEach(function (id) {
+      var groupData = me.groupsData.get(id);
+      var group = me.groups[id];
 
-        if (options.nodes.color) {
-          this.constants.nodes.color = util.parseColor(options.nodes.color);
+      if (!group) {
+        // check for reserved ids
+        if (id == UNGROUPED) {
+          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
         }
 
-        /*
-         if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
-         if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
-         */
-      }
-      if (options.groups) {
-        for (var groupname in options.groups) {
-          if (options.groups.hasOwnProperty(groupname)) {
-            var group = options.groups[groupname];
-            this.groups.add(groupname, group);
-          }
-        }
-      }
+        var groupOptions = Object.create(me.options);
+        util.extend(groupOptions, {
+          height: null
+        });
 
-      if (options.tooltip) {
-        for (prop in options.tooltip) {
-          if (options.tooltip.hasOwnProperty(prop)) {
-            this.constants.tooltip[prop] = options.tooltip[prop];
+        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);
+            }
           }
         }
-        if (options.tooltip.color) {
-          this.constants.tooltip.color = util.parseColor(options.tooltip.color);
-        }
-      }
-    }
-
-
-    // (Re)loading the mixins that can be enabled or disabled in the options.
-    // load the force calculation functions, grouped under the physics system.
-    this._loadPhysicsSystem();
-    // load the navigation system.
-    this._loadNavigationControls();
-    // load the data manipulation system
-    this._loadManipulationSystem();
-    // configure the smooth curves
-    this._configureSmoothCurves();
 
+        group.order();
+        group.show();
+      }
+      else {
+        // update group
+        group.setData(groupData);
+      }
+    });
 
-    // bind keys. If disabled, this will not do anything;
-    this._createKeyBinds();
-    this.setSize(this.width, this.height);
-    this.moving = true;
-    this.start();
-
+    this.body.emitter.emit('change');
   };
 
   /**
-   * Create the main frame for the Network.
-   * This function is executed once when a Network object is created. The frame
-   * contains a canvas, and this canvas contains all objects like the axis and
-   * nodes.
+   * Handle removed groups
+   * @param {Number[]} ids
    * @private
    */
-  Network.prototype._create = function () {
-    // remove all elements from the container element.
-    while (this.containerElement.hasChildNodes()) {
-      this.containerElement.removeChild(this.containerElement.firstChild);
-    }
-
-    this.frame = document.createElement('div');
-    this.frame.className = 'network-frame';
-    this.frame.style.position = 'relative';
-    this.frame.style.overflow = 'hidden';
-
-    // create the network canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( 'canvas' );
-    this.frame.canvas.style.position = 'relative';
-    this.frame.appendChild(this.frame.canvas);
-    if (!this.frame.canvas.getContext) {
-      var noCanvas = document.createElement( 'DIV' );
-      noCanvas.style.color = 'red';
-      noCanvas.style.fontWeight =  'bold' ;
-      noCanvas.style.padding =  '10px';
-      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
-      this.frame.canvas.appendChild(noCanvas);
-    }
+  ItemSet.prototype._onRemoveGroups = function(ids) {
+    var groups = this.groups;
+    ids.forEach(function (id) {
+      var group = groups[id];
 
-    var me = this;
-    this.drag = {};
-    this.pinch = {};
-    this.hammer = Hammer(this.frame.canvas, {
-      prevent_default: true
+      if (group) {
+        group.hide();
+        delete groups[id];
+      }
     });
-    this.hammer.on('tap',       me._onTap.bind(me) );
-    this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
-    this.hammer.on('hold',      me._onHold.bind(me) );
-    this.hammer.on('pinch',     me._onPinch.bind(me) );
-    this.hammer.on('touch',     me._onTouch.bind(me) );
-    this.hammer.on('dragstart', me._onDragStart.bind(me) );
-    this.hammer.on('drag',      me._onDrag.bind(me) );
-    this.hammer.on('dragend',   me._onDragEnd.bind(me) );
-    this.hammer.on('release',   me._onRelease.bind(me) );
-    this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
-    this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
-    this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
 
-    // add the frame to the container element
-    this.containerElement.appendChild(this.frame);
+    this.markDirty();
 
+    this.body.emitter.emit('change');
   };
 
-
   /**
-   * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
+   * Reorder the groups if needed
+   * @return {boolean} changed
    * @private
    */
-  Network.prototype._createKeyBinds = function() {
-    var me = this;
-    this.mousetrap = mousetrap;
+  ItemSet.prototype._orderGroups = function () {
+    if (this.groupsData) {
+      // reorder the groups
+      var groupIds = this.groupsData.getIds({
+        order: this.options.groupOrder
+      });
 
-    this.mousetrap.reset();
+      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.constants.keyboard.enabled == true) {
-      this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
-      this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
-      this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
-      this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
-      this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
-      this.mousetrap.bind("=",    this._zoomIn.bind(me),    "keydown");
-      this.mousetrap.bind("=",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("-",    this._zoomOut.bind(me),   "keydown");
-      this.mousetrap.bind("-",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("[",    this._zoomIn.bind(me),    "keydown");
-      this.mousetrap.bind("[",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("]",    this._zoomOut.bind(me),   "keydown");
-      this.mousetrap.bind("]",    this._stopZoom.bind(me),    "keyup");
-      this.mousetrap.bind("pageup",this._zoomIn.bind(me),   "keydown");
-      this.mousetrap.bind("pageup",this._stopZoom.bind(me),   "keyup");
-      this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
-      this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
-    }
+        // show the groups again, attach them to the DOM in correct order
+        groupIds.forEach(function (groupId) {
+          groups[groupId].show();
+        });
 
-    if (this.constants.dataManipulation.enabled == true) {
-      this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
-      this.mousetrap.bind("del",this._deleteSelected.bind(me));
+        this.groupIds = groupIds;
+      }
+
+      return changed;
+    }
+    else {
+      return false;
     }
   };
 
   /**
-   * Get the pointer location from a touch location
-   * @param {{pageX: Number, pageY: Number}} touch
-   * @return {{x: Number, y: Number}} pointer
+   * Add a new item
+   * @param {Item} item
    * @private
    */
-  Network.prototype._getPointer = function (touch) {
-    return {
-      x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
-      y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
-    };
+  ItemSet.prototype._addItem = function(item) {
+    this.items[item.id] = item;
+
+    // add to group
+    var groupId = this.groupsData ? item.data.group : UNGROUPED;
+    var group = this.groups[groupId];
+    if (group) group.add(item);
   };
 
   /**
-   * On start of a touch gesture, store the pointer
-   * @param event
+   * Update an existing item
+   * @param {Item} item
+   * @param {Object} itemData
    * @private
    */
-  Network.prototype._onTouch = function (event) {
-    this.drag.pointer = this._getPointer(event.gesture.center);
-    this.drag.pinched = false;
-    this.pinch.scale = this._getScale();
+  ItemSet.prototype._updateItem = function(item, itemData) {
+    var oldGroupId = item.data.group;
 
-    this._handleTouch(this.drag.pointer);
-  };
+    item.data = itemData;
+    if (item.displayed) {
+      item.redraw();
+    }
 
-  /**
-   * handle drag start event
-   * @private
-   */
-  Network.prototype._onDragStart = function () {
-    this._handleDragStart();
-  };
+    // update group
+    if (oldGroupId != item.data.group) {
+      var oldGroup = this.groups[oldGroupId];
+      if (oldGroup) oldGroup.remove(item);
 
+      var groupId = this.groupsData ? item.data.group : UNGROUPED;
+      var group = this.groups[groupId];
+      if (group) group.add(item);
+    }
+  };
 
   /**
-   * This function is called by _onDragStart.
-   * It is separated out because we can then overload it for the datamanipulation system.
-   *
+   * 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
    */
-  Network.prototype._handleDragStart = function() {
-    var drag = this.drag;
-    var node = this._getNodeAt(drag.pointer);
-    // note: drag.pointer is set in _onTouch to get the initial touch location
-
-    drag.dragging = true;
-    drag.selection = [];
-    drag.translation = this._getTranslation();
-    drag.nodeId = null;
+  ItemSet.prototype._removeItem = function(item) {
+    // remove from DOM
+    item.hide();
 
-    if (node != null) {
-      drag.nodeId = node.id;
-      // select the clicked node if not yet selected
-      if (!node.isSelected()) {
-        this._selectObject(node,false);
-      }
+    // remove from items
+    delete this.items[item.id];
 
-      // create an array with the selected nodes and their original location and status
-      for (var objectId in this.selectionObj.nodes) {
-        if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
-          var object = this.selectionObj.nodes[objectId];
-          var s = {
-            id: object.id,
-            node: object,
+    // remove from selection
+    var index = this.selection.indexOf(item.id);
+    if (index != -1) this.selection.splice(index, 1);
 
-            // store original x, y, xFixed and yFixed, make the node temporarily Fixed
-            x: object.x,
-            y: object.y,
-            xFixed: object.xFixed,
-            yFixed: object.yFixed
-          };
+    // remove from group
+    var groupId = this.groupsData ? item.data.group : UNGROUPED;
+    var group = this.groups[groupId];
+    if (group) group.remove(item);
+  };
 
-          object.xFixed = true;
-          object.yFixed = true;
+  /**
+   * 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 = [];
 
-          drag.selection.push(s);
-        }
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] instanceof ItemRange) {
+        endArray.push(array[i]);
       }
     }
+    return endArray;
   };
 
-
   /**
-   * handle drag event
+   * 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
    */
-  Network.prototype._onDrag = function (event) {
-    this._handleOnDrag(event)
+  ItemSet.prototype._onTouch = function (event) {
+    // store the touched item, used in _onDragStart
+    this.touchParams.item = ItemSet.itemFromTarget(event);
   };
 
-
   /**
-   * This function is called by _onDrag.
-   * It is separated out because we can then overload it for the datamanipulation system.
-   *
+   * Start dragging the selected events
+   * @param {Event} event
    * @private
    */
-  Network.prototype._handleOnDrag = function(event) {
-    if (this.drag.pinched) {
+  ItemSet.prototype._onDragStart = function (event) {
+    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
       return;
     }
 
-    var pointer = this._getPointer(event.gesture.center);
+    var item = this.touchParams.item || null,
+        me = this,
+        props;
 
-    var me = this,
-      drag = this.drag,
-      selection = drag.selection;
-    if (selection && selection.length && this.constants.dragNodes == true) {
-      // calculate delta's and new location
-      var deltaX = pointer.x - drag.pointer.x,
-        deltaY = pointer.y - drag.pointer.y;
+    if (item && item.selected) {
+      var dragLeftItem = event.target.dragLeftItem;
+      var dragRightItem = event.target.dragRightItem;
 
-      // update position of all selected nodes
-      selection.forEach(function (s) {
-        var node = s.node;
+      if (dragLeftItem) {
+        props = {
+          item: dragLeftItem
+        };
 
-        if (!s.xFixed) {
-          node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
+        if (me.options.editable.updateTime) {
+          props.start = item.data.start.valueOf();
         }
-
-        if (!s.yFixed) {
-          node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
+        if (me.options.editable.updateGroup) {
+          if ('group' in item.data) props.group = item.data.group;
         }
-      });
 
-      // start _animationStep if not yet running
-      if (!this.moving) {
-        this.moving = true;
-        this.start();
+        this.touchParams.itemProps = [props];
       }
-    }
-    else {
-      if (this.constants.dragNetwork == true) {
-        // move the network
-        var diffX = pointer.x - this.drag.pointer.x;
-        var diffY = pointer.y - this.drag.pointer.y;
+      else if (dragRightItem) {
+        props = {
+          item: dragRightItem
+        };
 
-        this._setTranslation(
-          this.drag.translation.x + diffX,
-          this.drag.translation.y + diffY
-        );
-        this._redraw();
-  //      this.moving = true;
-  //      this.start();
+        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
+          };
 
-  /**
-   * handle drag start event
-   * @private
-   */
-  Network.prototype._onDragEnd = function () {
-    this.drag.dragging = false;
-    var selection = this.drag.selection;
-    if (selection) {
-      selection.forEach(function (s) {
-        // restore original xFixed and yFixed
-        s.node.xFixed = s.xFixed;
-        s.node.yFixed = s.yFixed;
-      });
+          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 props;
+        });
+      }
+
+      event.stopPropagation();
     }
-    this._redraw();
   };
 
   /**
-   * handle tap/click event: select/unselect a node
+   * Drag selected items
+   * @param {Event} event
    * @private
    */
-  Network.prototype._onTap = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this.pointerPosition = pointer;
-    this._handleTap(pointer);
-
-  };
+  ItemSet.prototype._onDrag = function (event) {
+    if (this.touchParams.itemProps) {
+      var range = this.body.range,
+          snap = this.body.util.snap || null,
+          deltaX = event.gesture.deltaX,
+          scale = (this.props.width / (range.end - range.start)),
+          offset = deltaX / scale;
 
+      // move
+      this.touchParams.itemProps.forEach(function (props) {
+        if ('start' in props) {
+          var start = new Date(props.start + offset);
+          props.item.data.start = snap ? snap(start) : start;
+        }
 
-  /**
-   * handle doubletap event
-   * @private
-   */
-  Network.prototype._onDoubleTap = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this._handleDoubleTap(pointer);
-  };
+        if ('end' in props) {
+          var end = new Date(props.end + offset);
+          props.item.data.end = snap ? snap(end) : end;
+        }
 
+        if ('group' in props) {
+          // drag from one group to another
+          var group = ItemSet.groupFromTarget(event);
+          if (group && group.groupId != props.item.data.group) {
+            var oldGroup = props.item.parent;
+            oldGroup.remove(props.item);
+            oldGroup.order();
+            group.add(props.item);
+            group.order();
 
-  /**
-   * handle long tap event: multi select nodes
-   * @private
-   */
-  Network.prototype._onHold = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this.pointerPosition = pointer;
-    this._handleOnHold(pointer);
-  };
+            props.item.data.group = group.groupId;
+          }
+        }
+      });
 
-  /**
-   * handle the release of the screen
-   *
-   * @private
-   */
-  Network.prototype._onRelease = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
-    this._handleOnRelease(pointer);
-  };
+      // TODO: implement onMoving handler
 
-  /**
-   * Handle pinch event
-   * @param event
-   * @private
-   */
-  Network.prototype._onPinch = function (event) {
-    var pointer = this._getPointer(event.gesture.center);
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
 
-    this.drag.pinched = true;
-    if (!('scale' in this.pinch)) {
-      this.pinch.scale = 1;
+      event.stopPropagation();
     }
-
-    // TODO: enabled moving while pinching?
-    var scale = this.pinch.scale * event.gesture.scale;
-    this._zoom(scale, pointer)
   };
 
   /**
-   * Zoom the network in or out
-   * @param {Number} scale a number around 1, and between 0.01 and 10
-   * @param {{x: Number, y: Number}} pointer    Position on screen
-   * @return {Number} appliedScale    scale is limited within the boundaries
+   * End of dragging selected items
+   * @param {Event} event
    * @private
    */
-  Network.prototype._zoom = function(scale, pointer) {
-    if (this.constants.zoomable == true) {
-      var scaleOld = this._getScale();
-      if (scale < 0.00001) {
-        scale = 0.00001;
-      }
-      if (scale > 10) {
-        scale = 10;
-      }
-    // + this.frame.canvas.clientHeight / 2
-      var translation = this._getTranslation();
+  ItemSet.prototype._onDragEnd = function (event) {
+    if (this.touchParams.itemProps) {
+      // prepare a change set for the changed items
+      var changes = [],
+          me = this,
+          dataset = this.itemsData.getDataSet();
 
-      var scaleFrac = scale / scaleOld;
-      var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
-      var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
+      this.touchParams.itemProps.forEach(function (props) {
+        var id = props.item.id,
+            itemData = me.itemsData.get(id, me.itemOptions);
 
-      this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
-                         "y" : this._YconvertDOMtoCanvas(pointer.y)};
+        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._setScale(scale);
-      this._setTranslation(tx, ty);
-      this.updateClustersDefault();
-      this._redraw();
+        // 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
+              if ('start' in props) props.item.data.start = props.start;
+              if ('end' in props)   props.item.data.end   = props.end;
 
-      if (scaleOld < scale) {
-        this.emit("zoom", {direction:"+"});
-      }
-      else {
-        this.emit("zoom", {direction:"-"});
+              me.stackDirty = true; // force re-stacking of all items next redraw
+              me.body.emitter.emit('change');
+            }
+          });
+        }
+      });
+      this.touchParams.itemProps = null;
+
+      // apply the changes to the data (if there are changes)
+      if (changes.length) {
+        dataset.update(changes);
       }
 
-      return scale;
+      event.stopPropagation();
     }
   };
 
-
   /**
-   * Event handler for mouse wheel event, used to zoom the timeline
-   * See http://adomas.org/javascript-mouse-wheel/
-   *     https://github.com/EightMedia/hammer.js/issues/256
-   * @param {MouseEvent}  event
+   * Handle selecting/deselecting an item when tapping it
+   * @param {Event} event
    * @private
    */
-  Network.prototype._onMouseWheel = function(event) {
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta/120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail/3;
+  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;
     }
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
+    var oldSelection = this.getSelection();
 
-      // calculate the new scale
-      var scale = this._getScale();
-      var zoom = delta / 10;
-      if (delta < 0) {
-        zoom = zoom / (1 - zoom);
-      }
-      scale *= (1 + zoom);
+    var item = ItemSet.itemFromTarget(event);
+    var selection = item ? [item.id] : [];
+    this.setSelection(selection);
 
-      // calculate the pointer location
-      var gesture = util.fakeGesture(this, event);
-      var pointer = this._getPointer(gesture.center);
+    var newSelection = this.getSelection();
 
-      // apply the new scale
-      this._zoom(scale, pointer);
+    // 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: this.getSelection()
+      });
     }
 
-    // Prevent default actions caused by mouse wheel.
-    event.preventDefault();
+    event.stopPropagation();
   };
 
-
   /**
-   * Mouse move handler for checking whether the title moves over a node with a title.
-   * @param  {Event} event
+   * Handle creation and updates of an item on double tap
+   * @param event
    * @private
    */
-  Network.prototype._onMouseMoveTitle = function (event) {
-    var gesture = util.fakeGesture(this, event);
-    var pointer = this._getPointer(gesture.center);
-
-    // check if the previously selected node is still selected
-    if (this.popupObj) {
-      this._checkHidePopup(pointer);
-    }
+  ItemSet.prototype._onAddItem = function (event) {
+    if (!this.options.selectable) return;
+    if (!this.options.editable.add) return;
 
-    // start a timeout that will check if the mouse is positioned above
-    // an element
-    var me = this;
-    var checkShow = function() {
-      me._checkShowPopup(pointer);
-    };
-    if (this.popupTimer) {
-      clearInterval(this.popupTimer); // stop any running calculationTimer
-    }
-    if (!this.drag.dragging) {
-      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
-    }
+    var me = this,
+        snap = this.body.util.snap || null,
+        item = ItemSet.itemFromTarget(event);
 
+    if (item) {
+      // update item
 
-    /**
-     * Adding hover highlights
-     */
-    if (this.constants.hover == true) {
-      // removing all hover highlights
-      for (var edgeId in this.hoverObj.edges) {
-        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
-          this.hoverObj.edges[edgeId].hover = false;
-          delete this.hoverObj.edges[edgeId];
+      // 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.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'
+      };
 
-      // adding hover highlights
-      var obj = this._getNodeAt(pointer);
-      if (obj == null) {
-        obj = this._getEdgeAt(pointer);
+      // 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;
       }
-      if (obj != null) {
-        this._hoverObject(obj);
+
+      newItem[this.itemsData.fieldId] = util.randomUUID();
+
+      var group = ItemSet.groupFromTarget(event);
+      if (group) {
+        newItem.group = group.groupId;
       }
 
-      // removing all node hover highlights except for the selected one.
-      for (var nodeId in this.hoverObj.nodes) {
-        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
-            this._blurObject(this.hoverObj.nodes[nodeId]);
-            delete this.hoverObj.nodes[nodeId];
-          }
+      // execute async handler to customize (or cancel) adding an item
+      this.options.onAdd(newItem, function (item) {
+        if (item) {
+          me.itemsData.add(newItem);
+          // TODO: need to trigger a redraw?
         }
-      }
-      this.redraw();
+      });
     }
   };
 
   /**
-   * Check if there is an element on the given position in the network
-   * (a node or edge). If so, and if this element has a title,
-   * show a popup window with its title.
-   *
-   * @param {{x:Number, y:Number}} pointer
+   * Handle selecting/deselecting multiple items when holding an item
+   * @param {Event} event
    * @private
    */
-  Network.prototype._checkShowPopup = function (pointer) {
-    var obj = {
-      left:   this._XconvertDOMtoCanvas(pointer.x),
-      top:    this._YconvertDOMtoCanvas(pointer.y),
-      right:  this._XconvertDOMtoCanvas(pointer.x),
-      bottom: this._YconvertDOMtoCanvas(pointer.y)
-    };
+  ItemSet.prototype._onMultiSelectItem = function (event) {
+    if (!this.options.selectable) return;
 
-    var id;
-    var lastPopupNode = this.popupObj;
+    var selection,
+        item = ItemSet.itemFromTarget(event);
 
-    if (this.popupObj == undefined) {
-      // search the nodes for overlap, select the top one in case of multiple nodes
-      var nodes = this.nodes;
-      for (id in nodes) {
-        if (nodes.hasOwnProperty(id)) {
-          var node = nodes[id];
-          if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
-            this.popupObj = node;
-            break;
-          }
-        }
+    if (item) {
+      // multi select items
+      selection = this.getSelection(); // current selection
+      var index = selection.indexOf(item.id);
+      if (index == -1) {
+        // item is not yet selected -> select it
+        selection.push(item.id);
       }
-    }
-
-    if (this.popupObj === undefined) {
-      // search the edges for overlap
-      var edges = this.edges;
-      for (id in edges) {
-        if (edges.hasOwnProperty(id)) {
-          var edge = edges[id];
-          if (edge.connected && (edge.getTitle() !== undefined) &&
-              edge.isOverlappingWith(obj)) {
-            this.popupObj = edge;
-            break;
-          }
-        }
+      else {
+        // item is already selected -> deselect it
+        selection.splice(index, 1);
       }
-    }
+      this.setSelection(selection);
 
-    if (this.popupObj) {
-      // show popup message window
-      if (this.popupObj != lastPopupNode) {
-        var me = this;
-        if (!me.popup) {
-          me.popup = new Popup(me.frame, me.constants.tooltip);
-        }
+      this.body.emitter.emit('select', {
+        items: this.getSelection()
+      });
 
-        // adjust a small offset such that the mouse cursor is located in the
-        // bottom left location of the popup, and you can easily move over the
-        // popup area
-        me.popup.setPosition(pointer.x - 3, pointer.y - 3);
-        me.popup.setText(me.popupObj.getTitle());
-        me.popup.show();
-      }
-    }
-    else {
-      if (this.popup) {
-        this.popup.hide();
-      }
+      event.stopPropagation();
     }
   };
 
-
   /**
-   * Check if the popup must be hided, which is the case when the mouse is no
-   * longer hovering on the object
-   * @param {{x:Number, y:Number}} pointer
-   * @private
+   * 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
    */
-  Network.prototype._checkHidePopup = function (pointer) {
-    if (!this.popupObj || !this._getNodeAt(pointer) ) {
-      this.popupObj = undefined;
-      if (this.popup) {
-        this.popup.hide();
+  ItemSet.itemFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-item')) {
+        return target['timeline-item'];
       }
+      target = target.parentNode;
     }
-  };
 
+    return null;
+  };
 
   /**
-   * Set a new size for the network
-   * @param {string} width   Width in pixels or percentage (for example '800px'
-   *                         or '50%')
-   * @param {string} height  Height in pixels or percentage  (for example '400px'
-   *                         or '30%')
+   * 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
    */
-  Network.prototype.setSize = function(width, height) {
-    this.frame.style.width = width;
-    this.frame.style.height = height;
-
-    this.frame.canvas.style.width = '100%';
-    this.frame.canvas.style.height = '100%';
-
-    this.frame.canvas.width = this.frame.canvas.clientWidth;
-    this.frame.canvas.height = this.frame.canvas.clientHeight;
-
-    if (this.manipulationDiv !== undefined) {
-      this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
-    }
-    if (this.navigationDivs !== undefined) {
-      if (this.navigationDivs['wrapper'] !== undefined) {
-        this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-        this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+  ItemSet.groupFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-group')) {
+        return target['timeline-group'];
       }
+      target = target.parentNode;
     }
 
-    this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
+    return null;
   };
 
   /**
-   * Set a data set with nodes for the network
-   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
-   * @private
+   * 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
    */
-  Network.prototype._setNodes = function(nodes) {
-    var oldNodesData = this.nodesData;
-
-    if (nodes instanceof DataSet || nodes instanceof DataView) {
-      this.nodesData = nodes;
-    }
-    else if (nodes instanceof Array) {
-      this.nodesData = new DataSet();
-      this.nodesData.add(nodes);
-    }
-    else if (!nodes) {
-      this.nodesData = new DataSet();
-    }
-    else {
-      throw new TypeError('Array or DataSet expected');
+  ItemSet.itemSetFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-itemset')) {
+        return target['timeline-itemset'];
+      }
+      target = target.parentNode;
     }
 
-    if (oldNodesData) {
-      // unsubscribe from old dataset
-      util.forEach(this.nodesListeners, function (callback, event) {
-        oldNodesData.off(event, callback);
-      });
-    }
+    return null;
+  };
 
-    // remove drawn nodes
-    this.nodes = {};
+  module.exports = ItemSet;
 
-    if (this.nodesData) {
-      // subscribe to new dataset
-      var me = this;
-      util.forEach(this.nodesListeners, function (callback, event) {
-        me.nodesData.on(event, callback);
-      });
 
-      // draw all new nodes
-      var ids = this.nodesData.getIds();
-      this._addNodes(ids);
-    }
-    this._updateSelection();
-  };
+/***/ },
+/* 25 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var stack = __webpack_require__(26);
+  var ItemRange = __webpack_require__(27);
 
   /**
-   * Add nodes
-   * @param {Number[] | String[]} ids
-   * @private
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  Network.prototype._addNodes = function(ids) {
-    var id;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      id = ids[i];
-      var data = this.nodesData.get(id);
-      var node = new Node(data, this.images, this.groups, this.constants);
-      this.nodes[id] = node; // note: this may replace an existing node
+  function Group (groupId, data, itemSet) {
+    this.groupId = groupId;
 
-      if ((node.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
-        var radius = 10 * 0.1*ids.length;
-        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.itemSet = itemSet;
+
+    this.dom = {};
+    this.props = {
+      label: {
+        width: 0,
+        height: 0
       }
-      this.moving = true;
-    }
-    this._updateNodeIndexList();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateCalculationNodes();
-    this._reconnectEdges();
-    this._updateValueRange(this.nodes);
-    this.updateLabels();
-  };
+    };
+    this.className = null;
+
+    this.items = {};        // items filtered by groupId of this group
+    this.visibleItems = []; // items currently visible in window
+    this.orderedItems = {   // items sorted by start and by end
+      byStart: [],
+      byEnd: []
+    };
+
+    this._create();
+
+    this.setData(data);
+  }
 
   /**
-   * Update existing nodes, or create them when not yet existing
-   * @param {Number[] | String[]} ids
+   * Create DOM elements for the group
    * @private
    */
-  Network.prototype._updateNodes = function(ids) {
-    var nodes = this.nodes,
-        nodesData = this.nodesData;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      var node = nodes[id];
-      var data = nodesData.get(id);
-      if (node) {
-        // update node
-        node.setProperties(data, this.constants);
-      }
-      else {
-        // create node
-        node = new Node(properties, this.images, this.groups, this.constants);
-        nodes[id] = node;
-      }
-    }
-    this.moving = true;
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
-    }
-    this._updateNodeIndexList();
-    this._reconnectEdges();
-    this._updateValueRange(nodes);
+  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';
+
+    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';
+    this.dom.marker.innerHTML = '?';
+    this.dom.background.appendChild(this.dom.marker);
   };
 
   /**
-   * Remove existing nodes. If nodes do not exist, the method will just ignore it.
-   * @param {Number[] | String[]} ids
-   * @private
+   * Set the group data for this group
+   * @param {Object} data   Group data, can contain properties content and className
    */
-  Network.prototype._removeNodes = function(ids) {
-    var nodes = this.nodes;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      delete nodes[id];
+  Group.prototype.setData = function(data) {
+    // update contents
+    var content = data && data.content;
+    if (content instanceof Element) {
+      this.dom.inner.appendChild(content);
     }
-    this._updateNodeIndexList();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    else if (content != undefined) {
+      this.dom.inner.innerHTML = content;
+    }
+    else {
+      this.dom.inner.innerHTML = this.groupId;
+    }
+
+    // update title
+    this.dom.label.title = data && data.title || '';
+
+    if (!this.dom.inner.firstChild) {
+      util.addClassName(this.dom.inner, 'hidden');
+    }
+    else {
+      util.removeClassName(this.dom.inner, 'hidden');
+    }
+
+    // update className
+    var className = data && data.className || null;
+    if (className != this.className) {
+      if (this.className) {
+        util.removeClassName(this.dom.label, className);
+        util.removeClassName(this.dom.foreground, className);
+        util.removeClassName(this.dom.background, className);
+        util.removeClassName(this.dom.axis, 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._updateCalculationNodes();
-    this._reconnectEdges();
-    this._updateSelection();
-    this._updateValueRange(nodes);
   };
 
   /**
-   * Load edges by reading the data table
-   * @param {Array | DataSet | DataView} edges    The data containing the edges.
-   * @private
-   * @private
+   * Get the width of the group label
+   * @return {number} width
    */
-  Network.prototype._setEdges = function(edges) {
-    var oldEdgesData = this.edgesData;
+  Group.prototype.getLabelWidth = function() {
+    return this.props.label.width;
+  };
 
-    if (edges instanceof DataSet || edges instanceof DataView) {
-      this.edgesData = edges;
-    }
-    else if (edges instanceof Array) {
-      this.edgesData = new DataSet();
-      this.edgesData.add(edges);
+
+  /**
+   * Repaint this group
+   * @param {{start: number, end: number}} range
+   * @param {{item: number, axis: number}} margin
+   * @param {boolean} [restack=false]  Force restacking of all items
+   * @return {boolean} Returns true if the group is resized
+   */
+  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;
+
+      util.forEach(this.items, function (item) {
+        item.dirty = true;
+        if (item.displayed) item.redraw();
+      });
+
+      restack = true;
     }
-    else if (!edges) {
-      this.edgesData = new DataSet();
+
+    // reposition visible items vertically
+    if (this.itemSet.options.stack) { // TODO: ugly way to access options...
+      stack.stack(this.visibleItems, margin, restack);
     }
-    else {
-      throw new TypeError('Array or DataSet expected');
+    else { // no stacking
+      stack.nostack(this.visibleItems, margin);
     }
 
-    if (oldEdgesData) {
-      // unsubscribe from old dataset
-      util.forEach(this.edgesListeners, function (callback, event) {
-        oldEdgesData.off(event, callback);
+    // recalculate the height of the group
+    var height;
+    var visibleItems = this.visibleItems;
+    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 (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 / 2;
     }
+    else {
+      height = margin.axis + margin.item;
+    }
+    height = Math.max(height, this.props.label.height);
 
-    // remove drawn edges
-    this.edges = {};
+    // 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;
 
-    if (this.edgesData) {
-      // subscribe to new dataset
-      var me = this;
-      util.forEach(this.edgesListeners, function (callback, event) {
-        me.edgesData.on(event, callback);
-      });
+    // 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;
 
-      // draw all new nodes
-      var ids = this.edgesData.getIds();
-      this._addEdges(ids);
+    // apply new height
+    this.dom.background.style.height  = height + 'px';
+    this.dom.foreground.style.height  = height + 'px';
+    this.dom.label.style.height = height + 'px';
+
+    // 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();
     }
 
-    this._reconnectEdges();
+    return resized;
   };
 
   /**
-   * Add edges
-   * @param {Number[] | String[]} ids
-   * @private
+   * Show this group: attach to the DOM
    */
-  Network.prototype._addEdges = function (ids) {
-    var edges = this.edges,
-        edgesData = this.edgesData;
-
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
+  Group.prototype.show = function() {
+    if (!this.dom.label.parentNode) {
+      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+    }
 
-      var oldEdge = edges[id];
-      if (oldEdge) {
-        oldEdge.disconnect();
-      }
+    if (!this.dom.foreground.parentNode) {
+      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
+    }
 
-      var data = edgesData.get(id, {"showInternalIds" : true});
-      edges[id] = new Edge(data, this, this.constants);
+    if (!this.dom.background.parentNode) {
+      this.itemSet.dom.background.appendChild(this.dom.background);
     }
 
-    this.moving = true;
-    this._updateValueRange(edges);
-    this._createBezierNodes();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    if (!this.dom.axis.parentNode) {
+      this.itemSet.dom.axis.appendChild(this.dom.axis);
     }
-    this._updateCalculationNodes();
   };
 
   /**
-   * Update existing edges, or create them when not yet existing
-   * @param {Number[] | String[]} ids
-   * @private
+   * Hide this group: remove from the DOM
    */
-  Network.prototype._updateEdges = function (ids) {
-    var edges = this.edges,
-        edgesData = this.edgesData;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-
-      var data = edgesData.get(id);
-      var edge = edges[id];
-      if (edge) {
-        // update edge
-        edge.disconnect();
-        edge.setProperties(data, this.constants);
-        edge.connect();
-      }
-      else {
-        // create edge
-        edge = new Edge(data, this, this.constants);
-        this.edges[id] = edge;
-      }
+  Group.prototype.hide = function() {
+    var label = this.dom.label;
+    if (label.parentNode) {
+      label.parentNode.removeChild(label);
     }
 
-    this._createBezierNodes();
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    var foreground = this.dom.foreground;
+    if (foreground.parentNode) {
+      foreground.parentNode.removeChild(foreground);
     }
-    this.moving = true;
-    this._updateValueRange(edges);
-  };
 
-  /**
-   * Remove existing edges. Non existing ids will be ignored
-   * @param {Number[] | String[]} ids
-   * @private
-   */
-  Network.prototype._removeEdges = function (ids) {
-    var edges = this.edges;
-    for (var i = 0, len = ids.length; i < len; i++) {
-      var id = ids[i];
-      var edge = edges[id];
-      if (edge) {
-        if (edge.via != null) {
-          delete this.sectors['support']['nodes'][edge.via.id];
-        }
-        edge.disconnect();
-        delete edges[id];
-      }
+    var background = this.dom.background;
+    if (background.parentNode) {
+      background.parentNode.removeChild(background);
     }
 
-    this.moving = true;
-    this._updateValueRange(edges);
-    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
-      this._resetLevels();
-      this._setupHierarchicalLayout();
+    var axis = this.dom.axis;
+    if (axis.parentNode) {
+      axis.parentNode.removeChild(axis);
     }
-    this._updateCalculationNodes();
   };
 
   /**
-   * Reconnect all edges
-   * @private
+   * Add an item to the group
+   * @param {Item} item
    */
-  Network.prototype._reconnectEdges = function() {
-    var id,
-        nodes = this.nodes,
-        edges = this.edges;
-    for (id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        nodes[id].edges = [];
-      }
-    }
+  Group.prototype.add = function(item) {
+    this.items[item.id] = item;
+    item.setParent(this);
 
-    for (id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        var edge = edges[id];
-        edge.from = null;
-        edge.to = null;
-        edge.connect();
-      }
+    if (item instanceof ItemRange && 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);
     }
   };
 
   /**
-   * Update the values of all object in the given array according to the current
-   * value range of the objects in the array.
-   * @param {Object} obj    An object containing a set of Edges or Nodes
-   *                        The objects must have a method getValue() and
-   *                        setValueRange(min, max).
-   * @private
+   * Remove an item from the group
+   * @param {Item} item
    */
-  Network.prototype._updateValueRange = function(obj) {
-    var id;
+  Group.prototype.remove = function(item) {
+    delete this.items[item.id];
+    item.setParent(this.itemSet);
 
-    // determine the range of the objects
-    var valueMin = undefined;
-    var valueMax = undefined;
-    for (id in obj) {
-      if (obj.hasOwnProperty(id)) {
-        var value = obj[id].getValue();
-        if (value !== undefined) {
-          valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
-          valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
-        }
-      }
-    }
+    // remove from visible items
+    var index = this.visibleItems.indexOf(item);
+    if (index != -1) this.visibleItems.splice(index, 1);
 
-    // adjust the range of all objects
-    if (valueMin !== undefined && valueMax !== undefined) {
-      for (id in obj) {
-        if (obj.hasOwnProperty(id)) {
-          obj[id].setValueRange(valueMin, valueMax);
-        }
-      }
-    }
+    // TODO: also remove from ordered items?
   };
 
   /**
-   * Redraw the network with the current data
-   * chart will be resized too.
+   * Remove an item from the corresponding DataSet
+   * @param {Item} item
    */
-  Network.prototype.redraw = function() {
-    this.setSize(this.width, this.height);
-    this._redraw();
+  Group.prototype.removeFromDataSet = function(item) {
+    this.itemSet.removeItem(item.id);
   };
 
   /**
-   * Redraw the network with the current data
-   * @private
+   * Reorder the items
    */
-  Network.prototype._redraw = function() {
-    var ctx = this.frame.canvas.getContext('2d');
-    // clear the canvas
-    var w = this.frame.canvas.width;
-    var h = this.frame.canvas.height;
-    ctx.clearRect(0, 0, w, h);
-
-    // set scaling and translation
-    ctx.save();
-    ctx.translate(this.translation.x, this.translation.y);
-    ctx.scale(this.scale, this.scale);
-
-    this.canvasTopLeft = {
-      "x": this._XconvertDOMtoCanvas(0),
-      "y": this._YconvertDOMtoCanvas(0)
-    };
-    this.canvasBottomRight = {
-      "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
-      "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
-    };
-
-
-    this._doInAllSectors("_drawAllSectorNodes",ctx);
-    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
-      this._doInAllSectors("_drawEdges",ctx);
-    }
-
-    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
-      this._doInAllSectors("_drawNodes",ctx,false);
-    }
-
-    if (this.controlNodesActive == true) {
-      this._doInAllSectors("_drawControlNodes",ctx);
-    }
-
-  //  this._doInSupportSector("_drawNodes",ctx,true);
-  //  this._drawTree(ctx,"#F00F0F");
+  Group.prototype.order = function() {
+    var array = util.toArray(this.items);
+    this.orderedItems.byStart = array;
+    this.orderedItems.byEnd = this._constructByEndArray(array);
 
-    // restore original scaling and translation
-    ctx.restore();
+    stack.orderByStart(this.orderedItems.byStart);
+    stack.orderByEnd(this.orderedItems.byEnd);
   };
 
   /**
-   * Set the translation of the network
-   * @param {Number} offsetX    Horizontal offset
-   * @param {Number} offsetY    Vertical offset
+   * Create an array containing all items being a range (having an end date)
+   * @param {Item[]} array
+   * @returns {ItemRange[]}
    * @private
    */
-  Network.prototype._setTranslation = function(offsetX, offsetY) {
-    if (this.translation === undefined) {
-      this.translation = {
-        x: 0,
-        y: 0
-      };
-    }
+  Group.prototype._constructByEndArray = function(array) {
+    var endArray = [];
 
-    if (offsetX !== undefined) {
-      this.translation.x = offsetX;
-    }
-    if (offsetY !== undefined) {
-      this.translation.y = offsetY;
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] instanceof ItemRange) {
+        endArray.push(array[i]);
+      }
     }
-
-    this.emit('viewChanged');
+    return endArray;
   };
 
   /**
-   * Get the translation of the network
-   * @return {Object} translation    An object with parameters x and y, both a number
+   * 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
    */
-  Network.prototype._getTranslation = function() {
-    return {
-      x: this.translation.x,
-      y: this.translation.y
-    };
-  };
+  Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
+    var initialPosByStart,
+        newVisibleItems = [],
+        i;
 
-  /**
-   * Scale the network
-   * @param {Number} scale   Scaling factor 1.0 is unscaled
-   * @private
-   */
-  Network.prototype._setScale = function(scale) {
-    this.scale = scale;
-  };
+    // first check if the items that were in view previously are still in view.
+    // this handles the case for the ItemRange that is both before and after the current one.
+    if (visibleItems.length > 0) {
+      for (i = 0; i < visibleItems.length; i++) {
+        this._checkIfVisible(visibleItems[i], newVisibleItems, range);
+      }
+    }
 
-  /**
-   * Get the current scale of  the network
-   * @return {Number} scale   Scaling factor 1.0 is unscaled
-   * @private
-   */
-  Network.prototype._getScale = function() {
-    return this.scale;
-  };
+    // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
+    if (newVisibleItems.length == 0) {
+      initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
+    }
+    else {
+      initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
+    }
 
-  /**
-   * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
-   * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
-   * @param {number} x
-   * @returns {number}
-   * @private
-   */
-  Network.prototype._XconvertDOMtoCanvas = function(x) {
-    return (x - this.translation.x) / this.scale;
-  };
+    // use visible search to find a visible ItemRange (only based on endTime)
+    var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
 
-  /**
-   * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
-   * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
-   * @param {number} x
-   * @returns {number}
-   * @private
-   */
-  Network.prototype._XconvertCanvasToDOM = function(x) {
-    return x * this.scale + this.translation.x;
+    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+    if (initialPosByStart != -1) {
+      for (i = initialPosByStart; i >= 0; i--) {
+        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      }
+      for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
+        if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
+      }
+    }
+
+    // if we found a initial ID to use, trace it up and down until we meet an invisible item.
+    if (initialPosByEnd != -1) {
+      for (i = initialPosByEnd; i >= 0; i--) {
+        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+      }
+      for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
+        if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
+      }
+    }
+
+    return newVisibleItems;
   };
 
+
+
   /**
-   * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
-   * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
-   * @param {number} y
-   * @returns {number}
+   * this function checks if an item is invisible. If it is NOT we make it visible
+   * and add it to the global visible items. If it is, return true.
+   *
+   * @param {Item} item
+   * @param {Item[]} visibleItems
+   * @param {{start:number, end:number}} range
+   * @returns {boolean}
    * @private
    */
-  Network.prototype._YconvertDOMtoCanvas = function(y) {
-    return (y - this.translation.y) / this.scale;
+  Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
+    if (item.isVisible(range)) {
+      if (!item.displayed) item.show();
+      item.repositionX();
+      if (visibleItems.indexOf(item) == -1) {
+        visibleItems.push(item);
+      }
+      return false;
+    }
+    else {
+      if (item.displayed) item.hide();
+      return true;
+    }
   };
 
   /**
-   * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
-   * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
-   * @param {number} y
-   * @returns {number}
+   * 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
    */
-  Network.prototype._YconvertCanvasToDOM = function(y) {
-    return y * this.scale + this.translation.y ;
+  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();
+    }
   };
 
+  module.exports = Group;
+
+
+/***/ },
+/* 26 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // Utility functions for ordering and stacking of items
+  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
 
   /**
-   *
-   * @param {object} pos   = {x: number, y: number}
-   * @returns {{x: number, y: number}}
-   * @constructor
+   * Order items by their start data
+   * @param {Item[]} items
    */
-  Network.prototype.canvasToDOM = function(pos) {
-    return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
-  }
+  exports.orderByStart = function(items) {
+    items.sort(function (a, b) {
+      return a.data.start - b.data.start;
+    });
+  };
 
   /**
-   *
-   * @param {object} pos   = {x: number, y: number}
-   * @returns {{x: number, y: number}}
-   * @constructor
+   * Order items by their end date. If they have no end date, their start date
+   * is used.
+   * @param {Item[]} items
    */
-  Network.prototype.DOMtoCanvas = function(pos) {
-    return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
-  }
+  exports.orderByEnd = function(items) {
+    items.sort(function (a, b) {
+      var aTime = ('end' in a.data) ? a.data.end : a.data.start,
+          bTime = ('end' in b.data) ? b.data.end : b.data.start;
+
+      return aTime - bTime;
+    });
+  };
 
   /**
-   * Redraw all nodes
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Boolean} [alwaysShow]
-   * @private
+   * Adjust vertical positions of the items such that they don't overlap each
+   * other.
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: number, axis: number}} margin
+   *            Margins between items and between items and the axis.
+   * @param {boolean} [force=false]
+   *            If true, all items will be repositioned. If false (default), only
+   *            items having a top===null will be re-stacked
    */
-  Network.prototype._drawNodes = function(ctx,alwaysShow) {
-    if (alwaysShow === undefined) {
-      alwaysShow = false;
+  exports.stack = function(items, margin, force) {
+    var i, iMax;
+
+    if (force) {
+      // reset top position of all items
+      for (i = 0, iMax = items.length; i < iMax; i++) {
+        items[i].top = null;
+      }
     }
 
-    // first draw the unselected nodes
-    var nodes = this.nodes;
-    var selected = [];
+    // calculate new, non-overlapping positions
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      var item = items[i];
+      if (item.top === null) {
+        // initialize top position
+        item.top = margin.axis;
 
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
-        if (nodes[id].isSelected()) {
-          selected.push(id);
-        }
-        else {
-          if (nodes[id].inArea() || alwaysShow) {
-            nodes[id].draw(ctx);
+        do {
+          // TODO: optimize checking for overlap. when there is a gap without items,
+          //       you only need to check for items from the next item on, not from zero
+          var collidingItem = null;
+          for (var j = 0, jj = items.length; j < jj; j++) {
+            var other = items[j];
+            if (other.top !== null && other !== item && exports.collision(item, other, margin.item)) {
+              collidingItem = other;
+              break;
+            }
           }
-        }
-      }
-    }
 
-    // draw the selected nodes on top
-    for (var s = 0, sMax = selected.length; s < sMax; s++) {
-      if (nodes[selected[s]].inArea() || alwaysShow) {
-        nodes[selected[s]].draw(ctx);
+          if (collidingItem != null) {
+            // There is a collision. Reposition the items above the colliding element
+            item.top = collidingItem.top + collidingItem.height + margin.item;
+          }
+        } while (collidingItem);
       }
     }
   };
 
   /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
+   * Adjust vertical positions of the items without stacking them
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: number, axis: number}} margin
+   *            Margins between items and between items and the axis.
    */
-  Network.prototype._drawEdges = function(ctx) {
-    var edges = this.edges;
-    for (var id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        var edge = edges[id];
-        edge.setScale(this.scale);
-        if (edge.connected) {
-          edges[id].draw(ctx);
-        }
-      }
+  exports.nostack = function(items, margin) {
+    var i, iMax;
+
+    // reset top position of all items
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      items[i].top = margin.axis;
     }
   };
 
   /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
+   * Test if the two provided items collide
+   * The items must have parameters left, width, top, and height.
+   * @param {Item} a          The first item
+   * @param {Item} b          The second item
+   * @param {Number} margin   A minimum required margin.
+   *                          If margin is provided, the two items will be
+   *                          marked colliding when they overlap or
+   *                          when the margin between the two is smaller than
+   *                          the requested margin.
+   * @return {boolean}        true if a and b collide, else false
    */
-  Network.prototype._drawControlNodes = function(ctx) {
-    var edges = this.edges;
-    for (var id in edges) {
-      if (edges.hasOwnProperty(id)) {
-        edges[id]._drawControlNodes(ctx);
-      }
-    }
+  exports.collision = function(a, b, margin) {
+    return ((a.left - margin + EPSILON)       < (b.left + b.width) &&
+        (a.left + a.width + margin - EPSILON) > b.left &&
+        (a.top - margin + EPSILON)            < (b.top + b.height) &&
+        (a.top + a.height + margin - EPSILON) > b.top);
   };
 
-  /**
-   * Find a stable position for all nodes
-   * @private
-   */
-  Network.prototype._stabilize = function() {
-    if (this.constants.freezeForStabilization == true) {
-      this._freezeDefinedNodes();
-    }
 
-    // find stable position
-    var count = 0;
-    while (this.moving && count < this.constants.stabilizationIterations) {
-      this._physicsTick();
-      count++;
-    }
-    this.zoomExtent(false,true);
-    if (this.constants.freezeForStabilization == true) {
-      this._restoreFrozenNodes();
-    }
-    this.emit("stabilized",{iterations:count});
-  };
+/***/ },
+/* 27 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(3);
+  var Item = __webpack_require__(28);
 
   /**
-   * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
-   * because only the supportnodes for the smoothCurves have to settle.
-   *
-   * @private
+   * @constructor ItemRange
+   * @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
    */
-  Network.prototype._freezeDefinedNodes = function() {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        if (nodes[id].x != null && nodes[id].y != null) {
-          nodes[id].fixedData.x = nodes[id].xFixed;
-          nodes[id].fixedData.y = nodes[id].yFixed;
-          nodes[id].xFixed = true;
-          nodes[id].yFixed = true;
-        }
+  function ItemRange (data, conversion, options) {
+    this.props = {
+      content: {
+        width: 0
       }
-    }
-  };
+    };
+    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
 
-  /**
-   * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
-   *
-   * @private
-   */
-  Network.prototype._restoreFrozenNodes = function() {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id)) {
-        if (nodes[id].fixedData.x != null) {
-          nodes[id].xFixed = nodes[id].fixedData.x;
-          nodes[id].yFixed = nodes[id].fixedData.y;
-        }
+    // 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);
       }
     }
-  };
 
+    Item.call(this, data, conversion, options);
+  }
+
+  ItemRange.prototype = new Item (null, null, null);
+
+  ItemRange.prototype.baseClassName = 'item range';
 
   /**
-   * Check if any of the nodes is still moving
-   * @param {number} vmin   the minimum velocity considered as 'moving'
-   * @return {boolean}      true if moving, false if non of the nodes is moving
-   * @private
+   * 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
    */
-  Network.prototype._isMoving = function(vmin) {
-    var nodes = this.nodes;
-    for (var id in nodes) {
-      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
-        return true;
-      }
-    }
-    return false;
+  ItemRange.prototype.isVisible = function(range) {
+    // determine visibility
+    return (this.data.start < range.end) && (this.data.end > range.start);
   };
 
-
   /**
-   * /**
-   * Perform one discrete step for all nodes
-   *
-   * @private
+   * Repaint the item
    */
-  Network.prototype._discreteStepNodes = function() {
-    var interval = this.physicsDiscreteStepsize;
-    var nodes = this.nodes;
-    var nodeId;
-    var nodesPresent = false;
+  ItemRange.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    if (this.constants.maxVelocity > 0) {
-      for (nodeId in nodes) {
-        if (nodes.hasOwnProperty(nodeId)) {
-          nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
-          nodesPresent = true;
-        }
-      }
+        // background box
+      dom.box = document.createElement('div');
+      // className is updated in redraw()
+
+      // 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;
     }
-    else {
-      for (nodeId in nodes) {
-        if (nodes.hasOwnProperty(nodeId)) {
-          nodes[nodeId].discreteStep(interval);
-          nodesPresent = 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 time axis: parent has no foreground container element');
       }
+      foreground.appendChild(dom.box);
     }
+    this.displayed = true;
 
-    if (nodesPresent == true) {
-      var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
-      if (vminCorrected > 0.5*this.constants.maxVelocity) {
-        this.moving = true;
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
       }
       else {
-        this.moving = this._isMoving(vminCorrected) || this.constants.configurePhysics;
+        throw new Error('Property "content" missing in item ' + this.data.id);
       }
-    }
-  };
 
-  /**
-   * A single simulation step (or "tick") in the physics simulation
-   *
-   * @private
-   */
-  Network.prototype._physicsTick = function() {
-    if (!this.freezeSimulation) {
-      if (this.moving) {
-        this._doInAllActiveSectors("_initializeForceCalculation");
-        this._doInAllActiveSectors("_discreteStepNodes");
-        if (this.constants.smoothCurves) {
-          this._doInSupportSector("_discreteStepNodes");
-        }
-        this._findCenter(this._getRange())
-      }
+      this.dirty = true;
     }
-  };
 
+    // update title
+    if (this.data.title != this.title) {
+      dom.box.title = this.data.title;
+      this.title = this.data.title;
+    }
 
-  /**
-   * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
-   * It reschedules itself at the beginning of the function
-   *
-   * @private
-   */
-  Network.prototype._animationStep = function() {
-    // reset the timer so a new scheduled animation step can be set
-    this.timer = undefined;
-    // handle the keyboad movement
-    this._handleNavigation();
+    // update class
+    var className = (this.data.className ? (' ' + this.data.className) : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.box.className = this.baseClassName + className;
 
-    // this schedules a new animation step
-    this.start();
+      this.dirty = true;
+    }
 
-    // start the physics simulation
-    var calculationTime = Date.now();
-    var maxSteps = 1;
-    this._physicsTick();
-    var timeRequired = Date.now() - calculationTime;
-    while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
-      this._physicsTick();
-      timeRequired = Date.now() - calculationTime;
-      maxSteps++;
+    // recalculate size
+    if (this.dirty) {
+      // determine from css whether this box has overflow
+      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+
+      this.props.content.width = this.dom.content.offsetWidth;
+      this.height = this.dom.box.offsetHeight;
+
+      this.dirty = false;
     }
 
-    // start the rendering process
-    var renderTime = Date.now();
-    this._redraw();
-    this.renderTime = Date.now() - renderTime;
+    this._repaintDeleteButton(dom.box);
+    this._repaintDragLeft();
+    this._repaintDragRight();
+  };
 
+  /**
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
+   */
+  ItemRange.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
+    }
   };
 
-  if (typeof window !== 'undefined') {
-    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-  }
+  /**
+   * Hide the item from the DOM (when visible)
+   * @return {Boolean} changed
+   */
+  ItemRange.prototype.hide = function() {
+    if (this.displayed) {
+      var box = this.dom.box;
+
+      if (box.parentNode) {
+        box.parentNode.removeChild(box);
+      }
+
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
+    }
+  };
 
   /**
-   * Schedule a animation step with the refreshrate interval.
+   * Reposition the item horizontally
+   * @Override
    */
-  Network.prototype.start = function() {
-    if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
-      if (!this.timer) {
-        var ua = navigator.userAgent.toLowerCase();
+  // TODO: delete the old function
+  ItemRange.prototype.repositionX = function() {
+    var props = this.props,
+        parentWidth = this.parent.width,
+        start = this.conversion.toScreen(this.data.start),
+        end = this.conversion.toScreen(this.data.end),
+        padding = this.options.padding,
+        contentLeft;
 
-        var requiresTimeout = false;
-        if (ua.indexOf('msie 9.0') != -1) { // IE 9
-          requiresTimeout = true;
-        }
-        else if (ua.indexOf('safari') != -1) {  // safari
-          if (ua.indexOf('chrome') <= -1) {
-            requiresTimeout = true;
-          }
-        }
+    // 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);
 
-        if (requiresTimeout == true) {
-          this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
-        }
-        else{
-          this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
-        }
+    if (this.overflow) {
+      // when range exceeds left of the window, position the contents at the left of the visible area
+      contentLeft = Math.max(-start, 0);
+
+      this.left = start;
+      this.width = boxWidth + this.props.content.width;
+      // Note: The calculation of width is an optimistic calculation, giving
+      //       a width which will not change when moving the Timeline
+      //       So no restacking needed, which is nicer for the eye;
+    }
+    else { // no overflow
+      // when range exceeds left of the window, position the contents at the left of the visible area
+      if (start < 0) {
+        contentLeft = Math.min(-start,
+            (end - start - props.content.width - 2 * padding));
+        // TODO: remove the need for options.padding. it's terrible.
       }
+      else {
+        contentLeft = 0;
+      }
+
+      this.left = start;
+      this.width = boxWidth;
+    }
+
+    this.dom.box.style.left = this.left + 'px';
+    this.dom.box.style.width = boxWidth + 'px';
+    this.dom.content.style.left = contentLeft + 'px';
+  };
+
+  /**
+   * Reposition the item vertically
+   * @Override
+   */
+  ItemRange.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box;
+
+    if (orientation == 'top') {
+      box.style.top = this.top + 'px';
     }
     else {
-      this._redraw();
+      box.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
   };
 
-
   /**
-   * Move the network according to the keyboard presses.
-   *
-   * @private
+   * Repaint a drag area on the left side of the range when the range is selected
+   * @protected
    */
-  Network.prototype._handleNavigation = function() {
-    if (this.xIncrement != 0 || this.yIncrement != 0) {
-      var translation = this._getTranslation();
-      this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
+  ItemRange.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;
+
+      // 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;
     }
-    if (this.zoomIncrement != 0) {
-      var center = {
-        x: this.frame.canvas.clientWidth / 2,
-        y: this.frame.canvas.clientHeight / 2
-      };
-      this._zoom(this.scale*(1 + this.zoomIncrement), center);
+    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;
     }
   };
 
-
   /**
-   *  Freeze the _animationStep
+   * Repaint a drag area on the right side of the range when the range is selected
+   * @protected
    */
-  Network.prototype.toggleFreeze = function() {
-    if (this.freezeSimulation == false) {
-      this.freezeSimulation = true;
+  ItemRange.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 {
-      this.freezeSimulation = false;
-      this.start();
+    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;
     }
   };
 
+  module.exports = ItemRange;
+
+
+/***/ },
+/* 28 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(3);
 
   /**
-   * This function cleans the support nodes if they are not needed and adds them when they are.
-   *
-   * @param {boolean} [disableStart]
-   * @private
+   * @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
    */
-  Network.prototype._configureSmoothCurves = function(disableStart) {
-    if (disableStart === undefined) {
-      disableStart = true;
-    }
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this._createBezierNodes();
-    }
-    else {
-      // delete the support nodes
-      this.sectors['support']['nodes'] = {};
-      for (var edgeId in this.edges) {
-        if (this.edges.hasOwnProperty(edgeId)) {
-          this.edges[edgeId].smooth = false;
-          this.edges[edgeId].via = null;
-        }
+  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;
+  }
+
+  /**
+   * Select current item
+   */
+  Item.prototype.select = function() {
+    this.selected = true;
+    if (this.displayed) this.redraw();
+  };
+
+  /**
+   * Unselect current item
+   */
+  Item.prototype.unselect = function() {
+    this.selected = false;
+    if (this.displayed) this.redraw();
+  };
+
+  /**
+   * 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();
       }
     }
-    this._updateCalculationNodes();
-    if (!disableStart) {
-      this.moving = true;
-      this.start();
+    else {
+      this.parent = parent;
     }
   };
 
+  /**
+   * 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;
+  };
 
   /**
-   * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
-   * are used for the force calculation.
-   *
-   * @private
+   * Show the Item in the DOM (when not already visible)
+   * @return {Boolean} changed
    */
-  Network.prototype._createBezierNodes = function() {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      for (var edgeId in this.edges) {
-        if (this.edges.hasOwnProperty(edgeId)) {
-          var edge = this.edges[edgeId];
-          if (edge.via == null) {
-            edge.smooth = true;
-            var nodeId = "edgeId:".concat(edge.id);
-            this.sectors['support']['nodes'][nodeId] = new Node(
-                    {id:nodeId,
-                      mass:1,
-                      shape:'circle',
-                      image:"",
-                      internalMultiplier:1
-                    },{},{},this.constants);
-            edge.via = this.sectors['support']['nodes'][nodeId];
-            edge.via.parentEdgeId = edge.id;
-            edge.positionBezierNode();
-          }
-        }
-      }
-    }
+  Item.prototype.show = function() {
+    return false;
   };
 
   /**
-   * load the functions that load the mixins into the prototype.
-   *
-   * @private
+   * Hide the Item from the DOM (when visible)
+   * @return {Boolean} changed
    */
-  Network.prototype._initializeMixinLoaders = function () {
-    for (var mixin in MixinLoader) {
-      if (MixinLoader.hasOwnProperty(mixin)) {
-        Network.prototype[mixin] = MixinLoader[mixin];
-      }
-    }
+  Item.prototype.hide = function() {
+    return false;
   };
 
   /**
-   * Load the XY positions of the nodes into the dataset.
+   * Repaint the item
    */
-  Network.prototype.storePosition = function() {
-    var dataArray = [];
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var node = this.nodes[nodeId];
-        var allowedToMoveX = !this.nodes.xFixed;
-        var allowedToMoveY = !this.nodes.yFixed;
-        if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
-          dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
-        }
-      }
-    }
-    this.nodesData.update(dataArray);
+  Item.prototype.redraw = function() {
+    // should be implemented by the item
   };
 
+  /**
+   * Reposition the Item horizontally
+   */
+  Item.prototype.repositionX = function() {
+    // should be implemented by the item
+  };
 
   /**
-   * Center a node in view.
-   *
-   * @param {Number} nodeId
-   * @param {Number} [zoomLevel]
+   * Reposition the Item vertically
    */
-  Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
-    if (this.nodes.hasOwnProperty(nodeId)) {
-      if (zoomLevel === undefined) {
-        zoomLevel = this._getScale();
-      }
-      var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
+  Item.prototype.repositionY = function() {
+    // should be implemented by the item
+  };
 
-      var requiredScale = zoomLevel;
-      this._setScale(requiredScale);
+  /**
+   * 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;
 
-      var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
-      var translation = this._getTranslation();
+      var deleteButton = document.createElement('div');
+      deleteButton.className = 'delete';
+      deleteButton.title = 'Delete this item';
 
-      var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
-                                y:canvasCenter.y - nodePosition.y};
+      Hammer(deleteButton, {
+        preventDefault: true
+      }).on('tap', function (event) {
+        me.parent.removeFromDataSet(me);
+        event.stopPropagation();
+      });
 
-      this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
-                           translation.y + requiredScale * distanceFromCenter.y);
-      this.redraw();
+      anchor.appendChild(deleteButton);
+      this.dom.deleteButton = deleteButton;
     }
-    else {
-      console.log("This nodeId cannot be found.")
+    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;
     }
   };
 
-  module.exports = Network;
+  module.exports = Item;
 
 
 /***/ },
-/* 27 */
+/* 29 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(30);
+  var Item = __webpack_require__(28);
 
   /**
-   * @class Edge
-   *
-   * A edge connects two nodes
-   * @param {Object} properties     Object with properties. Must contain
-   *                                At least properties from and to.
-   *                                Available properties: from (number),
-   *                                to (number), label (string, color (string),
-   *                                width (number), style (string),
-   *                                length (number), title (string)
-   * @param {Network} network       A Network object, used to find and edge to
-   *                                nodes.
-   * @param {Object} constants      An object with default values for
-   *                                example for the color
+   * @constructor ItemBox
+   * @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 Edge (properties, network, constants) {
-    if (!network) {
-      throw "No network provided";
-    }
-    this.network = network;
+  function ItemBox (data, conversion, options) {
+    this.props = {
+      dot: {
+        width: 0,
+        height: 0
+      },
+      line: {
+        width: 0,
+        height: 0
+      }
+    };
 
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data);
+      }
+    }
 
-    // initialize variables
-    this.id     = undefined;
-    this.fromId = undefined;
-    this.toId   = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
-    this.widthSelected = this.width * this.widthSelectionMultiplier;
-    this.hoverWidth = constants.edges.hoverWidth;
-    this.value  = undefined;
-    this.length = constants.physics.springLength;
-    this.customLength = false;
-    this.selected = false;
-    this.hover = false;
-    this.smoothCurves = constants.smoothCurves;
-    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
-    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
-    this.inheritColor = constants.edges.inheritColor;
+    Item.call(this, data, conversion, options);
+  }
 
-    this.from = null;   // a node
-    this.to = null;     // a node
-    this.via = null;    // a temp node
+  ItemBox.prototype = new Item (null, null, null);
 
-    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
-    // by storing the original information we can revert to the original connection when the cluser is opened.
-    this.originalFromId = [];
-    this.originalToId = [];
+  /**
+   * 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
+   */
+  ItemBox.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.connected = false;
+  /**
+   * Repaint the item
+   */
+  ItemBox.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
+      // create main box
+      dom.box = document.createElement('DIV');
 
-    this.color       = {color:constants.edges.color.color,
-                        highlight:constants.edges.color.highlight,
-                        hover:constants.edges.color.hover};
-    this.widthFixed  = false;
-    this.lengthFixed = false;
+      // 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.setProperties(properties, constants);
+      // line to axis
+      dom.line = document.createElement('DIV');
+      dom.line.className = 'line';
 
-    this.controlNodesEnabled = false;
-    this.controlNodes = {from:null, to:null, positions:{}};
-    this.connectedNode = null;
-  }
+      // dot on axis
+      dom.dot = document.createElement('DIV');
+      dom.dot.className = 'dot';
 
-  /**
-   * Set or overwrite properties for the edge
-   * @param {Object} properties  an object with properties
-   * @param {Object} constants   and object with default, global properties
-   */
-  Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
     }
 
-    if (properties.from !== undefined)           {this.fromId = properties.from;}
-    if (properties.to !== undefined)             {this.toId = properties.to;}
+    // 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 time axis: 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 time axis: 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 time axis: parent has no axis container element');
+      axis.appendChild(dom.dot);
+    }
+    this.displayed = true;
 
-    if (properties.id !== undefined)             {this.id = properties.id;}
-    if (properties.style !== undefined)          {this.style = properties.style;}
-    if (properties.label !== undefined)          {this.label = properties.label;}
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
+      }
+      else {
+        throw new Error('Property "content" missing in item ' + this.data.id);
+      }
 
-    if (this.label) {
-      this.fontSize = constants.edges.fontSize;
-      this.fontFace = constants.edges.fontFace;
-      this.fontColor = constants.edges.fontColor;
-      this.fontFill = constants.edges.fontFill;
+      this.dirty = true;
+    }
 
-      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
-      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
-      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
-      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    // update title
+    if (this.data.title != this.title) {
+      dom.box.title = this.data.title;
+      this.title = this.data.title;
     }
 
-    if (properties.title !== undefined)        {this.title = properties.title;}
-    if (properties.width !== undefined)        {this.width = properties.width;}
-    if (properties.widthSelectionMultiplier !== undefined)
-                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
-    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
-    if (properties.value !== undefined)        {this.value = properties.value;}
-    if (properties.length !== undefined)       {this.length = properties.length;
-                                                this.customLength = true;}
+    // update class
+    var className = (this.data.className? ' ' + this.data.className : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.box.className = 'item box' + className;
+      dom.line.className = 'item line' + className;
+      dom.dot.className  = 'item dot' + className;
 
-    // scale the arrow
-    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
+      this.dirty = true;
+    }
 
-    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
+    // recalculate size
+    if (this.dirty) {
+      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;
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dash) {
-      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
-      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
-      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
+      this.dirty = false;
     }
 
-    if (properties.color !== undefined) {
-      if (util.isString(properties.color)) {
-        this.color.color = properties.color;
-        this.color.highlight = properties.color;
-      }
-      else {
-        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
-        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
-        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
-      }
+    this._repaintDeleteButton(dom.box);
+  };
+
+  /**
+   * Show the item in the DOM (when not already displayed). The items DOM will
+   * be created when needed.
+   */
+  ItemBox.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
+  };
 
-    // A node is connected when it has a from and to node.
-    this.connect();
+  /**
+   * Hide the item from the DOM (when visible)
+   */
+  ItemBox.prototype.hide = function() {
+    if (this.displayed) {
+      var dom = this.dom;
 
-    this.widthFixed = this.widthFixed || (properties.width !== undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
+      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.widthSelected = this.width * this.widthSelectionMultiplier;
+      this.top = null;
+      this.left = null;
 
-    // set draw method based on style
-    switch (this.style) {
-      case 'line':          this.draw = this._drawLine; break;
-      case 'arrow':         this.draw = this._drawArrow; break;
-      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
-      case 'dash-line':     this.draw = this._drawDashLine; break;
-      default:              this.draw = this._drawLine; break;
+      this.displayed = false;
     }
   };
 
   /**
-   * Connect an edge to its nodes
+   * Reposition the item horizontally
+   * @Override
    */
-  Edge.prototype.connect = function () {
-    this.disconnect();
-
-    this.from = this.network.nodes[this.fromId] || null;
-    this.to = this.network.nodes[this.toId] || null;
-    this.connected = (this.from && this.to);
+  ItemBox.prototype.repositionX = function() {
+    var start = this.conversion.toScreen(this.data.start),
+        align = this.options.align,
+        left,
+        box = this.dom.box,
+        line = this.dom.line,
+        dot = this.dom.dot;
 
-    if (this.connected) {
-      this.from.attachEdge(this);
-      this.to.attachEdge(this);
+    // calculate left position of the box
+    if (align == 'right') {
+      this.left = start - this.width;
+    }
+    else if (align == 'left') {
+      this.left = start;
     }
     else {
-      if (this.from) {
-        this.from.detachEdge(this);
-      }
-      if (this.to) {
-        this.to.detachEdge(this);
-      }
+      // default or 'center'
+      this.left = start - this.width / 2;
     }
+
+    // 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';
   };
 
   /**
-   * Disconnect an edge from its nodes
+   * Reposition the item vertically
+   * @Override
    */
-  Edge.prototype.disconnect = function () {
-    if (this.from) {
-      this.from.detachEdge(this);
-      this.from = null;
+  ItemBox.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box,
+        line = this.dom.line,
+        dot = this.dom.dot;
+
+    if (orientation == 'top') {
+      box.style.top     = (this.top || 0) + 'px';
+
+      line.style.top    = '0';
+      line.style.height = (this.parent.top + this.top + 1) + 'px';
+      line.style.bottom = '';
     }
-    if (this.to) {
-      this.to.detachEdge(this);
-      this.to = null;
+    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';
     }
 
-    this.connected = false;
+    dot.style.top = (-this.props.dot.height / 2) + 'px';
   };
 
-  /**
-   * get the title of this edge.
-   * @return {string} title    The title of the edge, or undefined when no title
-   *                           has been set.
-   */
-  Edge.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
-  };
+  module.exports = ItemBox;
 
 
-  /**
-   * Retrieve the value of the edge. Can be undefined
-   * @return {Number} value
-   */
-  Edge.prototype.getValue = function() {
-    return this.value;
-  };
+/***/ },
+/* 30 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Item = __webpack_require__(28);
 
   /**
-   * Adjust the value range of the edge. The edge will adjust it's width
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
+   * @constructor ItemPoint
+   * @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
    */
-  Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-      var scale = (this.widthMax - this.widthMin) / (max - min);
-      this.width = (this.value - min) * scale + this.widthMin;
+  function ItemPoint (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);
+      }
     }
-  };
+
+    Item.call(this, data, conversion, options);
+  }
+
+  ItemPoint.prototype = new Item (null, null, null);
 
   /**
-   * Redraw a edge
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * 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
    */
-  Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
+  ItemPoint.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);
   };
 
   /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top
-   * @return {boolean}     True if location is located on the edge
+   * Repaint the item
    */
-  Edge.prototype.isOverlappingWith = function(obj) {
-    if (this.connected) {
-      var distMax = 10;
-      var xFrom = this.from.x;
-      var yFrom = this.from.y;
-      var xTo = this.to.x;
-      var yTo = this.to.y;
-      var xObj = obj.left;
-      var yObj = obj.top;
+  ItemPoint.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+      // background box
+      dom.point = document.createElement('div');
+      // className is updated in redraw()
 
-      return (dist < distMax);
-    }
-    else {
-      return false
+      // 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;
     }
-  };
 
-  Edge.prototype._getColor = function() {
-    var colorObj = this.color;
-    if (this.inheritColor == "to") {
-      colorObj = {
-        highlight: this.to.color.highlight.border,
-        hover: this.to.color.hover.border,
-        color: this.to.color.border
-      };
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
     }
-    else if (this.inheritColor == "from" || this.inheritColor == true) {
-      colorObj = {
-        highlight: this.from.color.highlight.border,
-        hover: this.from.color.hover.border,
-        color: this.from.color.border
-      };
+    if (!dom.point.parentNode) {
+      var foreground = this.parent.dom.foreground;
+      if (!foreground) {
+        throw new Error('Cannot redraw time axis: parent has no foreground container element');
+      }
+      foreground.appendChild(dom.point);
     }
+    this.displayed = true;
 
-    if (this.selected == true)   {return colorObj.highlight;}
-    else if (this.hover == true) {return colorObj.hover;}
-    else                         {return colorObj.color;}
-  }
+    // update contents
+    if (this.data.content != this.content) {
+      this.content = this.data.content;
+      if (this.content instanceof Element) {
+        dom.content.innerHTML = '';
+        dom.content.appendChild(this.content);
+      }
+      else if (this.data.content != undefined) {
+        dom.content.innerHTML = this.content;
+      }
+      else {
+        throw new Error('Property "content" missing in item ' + this.data.id);
+      }
 
+      this.dirty = true;
+    }
 
-  /**
-   * Redraw a edge as a line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this._getColor();
-    ctx.lineWidth   = this._getLineWidth();
+    // update title
+    if (this.data.title != this.title) {
+      dom.point.title = this.data.title;
+      this.title = this.data.title;
+    }
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
+    // update class
+    var className = (this.data.className? ' ' + this.data.className : '') +
+        (this.selected ? ' selected' : '');
+    if (this.className != className) {
+      this.className = className;
+      dom.point.className  = 'item point' + className;
+      dom.dot.className  = 'item dot' + className;
 
-      // draw label
-      var point;
-      if (this.label) {
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
-        }
-        this._label(ctx, this.label, point.x, point.y);
-      }
+      this.dirty = true;
     }
-    else {
-      var x, y;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
-      }
-      this._circle(ctx, x, y, radius);
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      this._label(ctx, this.label, point.x, point.y);
+
+    // recalculate size
+    if (this.dirty) {
+      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
+
+      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
+      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+
+      this.dirty = false;
     }
+
+    this._repaintDeleteButton(dom.point);
   };
 
   /**
-   * Get the line width of the edge. Depends on width and whether one of the
-   * connected nodes is selected.
-   * @return {Number} width
-   * @private
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  Edge.prototype._getLineWidth = function() {
-    if (this.selected == true) {
-      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
-    }
-    else {
-      if (this.hover == true) {
-        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
-      }
-      else {
-        return this.width*this.networkScaleInv;
-      }
+  ItemPoint.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
   };
 
-  Edge.prototype._getViaCoordinates = function () {
-    var xVia = null;
-    var yVia = null;
-    var factor = this.smoothCurves.roundness;
-    var type = this.smoothCurves.type;
-    if (factor == 0) {
-      return {x:null,y:null};
-    }
-
-    var dx = Math.abs(this.from.x - this.to.x);
-    var dy = Math.abs(this.from.y - this.to.y);
-    if (type == 'discrete' || type == 'diagonalCross') {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-          }
-        }
-        if (type == "discrete") {
-          xVia = dx < factor * dy ? this.from.x : xVia;
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-          else if (this.from.x > this.to.x) {
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-          }
-        }
-        if (type == "discrete") {
-          yVia = dy < factor * dx ? this.from.y : yVia;
-        }
-      }
-    }
-    else if (type == "straightCross") {
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        xVia = this.from.x;
-        yVia = this.to.y
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        xVia = this.to.x;
-        yVia = this.from.y;
-      }
-    }
-    else if (type == 'horizontal') {
-      xVia = this.to.x;
-      yVia = this.from.y;
-    }
-    else if (type == 'vertical') {
-      xVia = this.from.x;
-      yVia = this.to.y;
-    }
-    else { // continuous
-      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(1)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(2)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y - factor * dy;
-            xVia = this.to.x > xVia ? this.to.x :xVia;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(3)
-            xVia = this.from.x + factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x < xVia ? this.to.x : xVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(4, this.from.x, this.to.x)
-            xVia = this.from.x - factor * dy;
-            yVia = this.from.y + factor * dy;
-            xVia = this.to.x > xVia ? this.to.x : xVia;
-          }
-        }
-      }
-      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-        if (this.from.y > this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(5)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(6)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y - factor * dx;
-            yVia = this.to.y > yVia ? this.to.y : yVia;
-          }
-        }
-        else if (this.from.y < this.to.y) {
-          if (this.from.x < this.to.x) {
-  //          console.log(7)
-            xVia = this.from.x + factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-          else if (this.from.x > this.to.x) {
-  //          console.log(8)
-            xVia = this.from.x - factor * dx;
-            yVia = this.from.y + factor * dx;
-            yVia = this.to.y < yVia ? this.to.y : yVia;
-          }
-        }
-      }
-    }
-
-
-    return {x:xVia, y:yVia};
-  }
-
   /**
-   * Draw a line between two nodes
-   * @param {CanvasRenderingContext2D} ctx
-   * @private
+   * Hide the item from the DOM (when visible)
    */
-  Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    if (this.smoothCurves.enabled == true) {
-      if (this.smoothCurves.dynamic == false) {
-        var via = this._getViaCoordinates();
-        if (via.x == null) {
-          ctx.lineTo(this.to.x, this.to.y);
-          ctx.stroke();
-          return null;
-        }
-        else {
-  //        this.via.x = via.x;
-  //        this.via.y = via.y;
-          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
-          ctx.stroke();
-          return via;
-        }
-      }
-      else {
-        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
-        ctx.stroke();
-        return this.via;
+  ItemPoint.prototype.hide = function() {
+    if (this.displayed) {
+      if (this.dom.point.parentNode) {
+        this.dom.point.parentNode.removeChild(this.dom.point);
       }
-    }
-    else {
-      ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return null;
+
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
     }
   };
 
   /**
-   * Draw a line from a node to itself, a circle
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @private
+   * Reposition the item horizontally
+   * @Override
    */
-  Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
+  ItemPoint.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';
   };
 
   /**
-   * Draw label with white background and with the middle at (x, y)
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {Number} x
-   * @param {Number} y
-   * @private
+   * Reposition the item vertically
+   * @Override
    */
-  Edge.prototype._label = function (ctx, text, x, y) {
-    if (text) {
-      // TODO: cache the calculated size
-      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-          this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontFill;
-      var width = ctx.measureText(text).width;
-      var height = this.fontSize;
-      var left = x - width / 2;
-      var top = y - height / 2;
-
-      ctx.fillRect(left, top, width, height);
+  ItemPoint.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        point = this.dom.point;
 
-      // draw text
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = "left";
-      ctx.textBaseline = "top";
-      ctx.fillText(text, left, top);
+    if (orientation == 'top') {
+      point.style.top = this.top + 'px';
+    }
+    else {
+      point.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
   };
 
-  /**
-   * Redraw a edge as a dashed line
-   * Draw this edge in the given canvas
-   * @author David Jordan
-   * @date 2012-08-08
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;}
+  module.exports = ItemPoint;
 
-    ctx.lineWidth = this._getLineWidth();
 
-    var via = null;
-    // only firefox and chrome support this method, else we use the legacy one.
-    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
-      // configure the dash pattern
-      var pattern = [0];
-      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
-        pattern = [this.dash.length,this.dash.gap];
-      }
-      else {
-        pattern = [5,5];
-      }
+/***/ },
+/* 31 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // set dash settings for chrome or firefox
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash(pattern);
-        ctx.lineDashOffset = 0;
+  var Emitter = __webpack_require__(12);
+  var Hammer = __webpack_require__(3);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Range = __webpack_require__(18);
+  var TimeAxis = __webpack_require__(20);
+  var CurrentTime = __webpack_require__(22);
+  var CustomTime = __webpack_require__(23);
+  var LineGraph = __webpack_require__(32);
 
-      } else { //Firefox
-        ctx.mozDash = pattern;
-        ctx.mozDashOffset = 0;
-      }
+  /**
+   * Create a timeline visualization
+   * @param {HTMLElement} container
+   * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
+   * @param {Object} [options]  See Graph2d.setOptions for the available options.
+   * @constructor
+   */
+  function Graph2d (container, items, options, groups) {
+    var me = this;
+    this.defaultOptions = {
+      start: null,
+      end:   null,
 
-      // draw the line
-      via = this._line(ctx);
+      autoResize: true,
 
-      // restore the dash settings.
-      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
-        ctx.setLineDash([0]);
-        ctx.lineDashOffset = 0;
+      orientation: 'bottom',
+      width: null,
+      height: null,
+      maxHeight: null,
+      minHeight: null
+    };
+    this.options = util.deepExtend({}, this.defaultOptions);
 
-      } else { //Firefox
-        ctx.mozDash = [0];
-        ctx.mozDashOffset = 0;
-      }
-    }
-    else { // unsupporting smooth lines
-      // draw dashed line
-      ctx.beginPath();
-      ctx.lineCap = 'round';
-      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
-      }
-      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
-      {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
-            [this.dash.length,this.dash.gap]);
-      }
-      else //If all else fails draw a line
-      {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
-      }
-      ctx.stroke();
-    }
+    // Create the DOM, props, and emitter
+    this._create(container);
 
-    // draw label
-    if (this.label) {
-      var point;
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
+    // all components listed here will be repainted automatically
+    this.components = [];
+
+    this.body = {
+      dom: this.dom,
+      domProps: this.props,
+      emitter: {
+        on: this.on.bind(this),
+        off: this.off.bind(this),
+        emit: this.emit.bind(this)
+      },
+      util: {
+        snap: null, // will be specified after TimeAxis is created
+        toScreen: me._toScreen.bind(me),
+        toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
+        toTime: me._toTime.bind(me),
+        toGlobalTime : me._toGlobalTime.bind(me)
       }
-      this._label(ctx, this.label, point.x, point.y);
-    }
-  };
+    };
 
-  /**
-   * Get a point on a line
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnLine = function (percentage) {
-    return {
-      x: (1 - percentage) * this.from.x + percentage * this.to.x,
-      y: (1 - percentage) * this.from.y + percentage * this.to.y
-    }
-  };
+    // range
+    this.range = new Range(this.body);
+    this.components.push(this.range);
+    this.body.range = this.range;
 
-  /**
-   * Get a point on a circle
-   * @param {Number} x
-   * @param {Number} y
-   * @param {Number} radius
-   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
-   * @return {Object} point
-   * @private
-   */
-  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-      x: x + radius * Math.cos(angle),
-      y: y - radius * Math.sin(angle)
-    }
-  };
+    // time axis
+    this.timeAxis = new TimeAxis(this.body);
+    this.components.push(this.timeAxis);
+    this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
 
-  /**
-   * Redraw a edge as a line with an arrow halfway the line
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  Edge.prototype._drawArrowCenter = function(ctx) {
-    var point;
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-    ctx.lineWidth = this._getLineWidth();
+    // current time bar
+    this.currentTime = new CurrentTime(this.body);
+    this.components.push(this.currentTime);
 
-    if (this.from != this.to) {
-      // draw line
-      var via = this._line(ctx);
+    // custom time bar
+    // Note: time bar will be attached in this.setOptions when selected
+    this.customTime = new CustomTime(this.body);
+    this.components.push(this.customTime);
 
-      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      // draw an arrow halfway the line
-      if (this.smoothCurves.enabled == true && via != null) {
-        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-        point = {x:midpointX, y:midpointY};
-      }
-      else {
-        point = this._pointOnLine(0.5);
-      }
+    // item set
+    this.linegraph = new LineGraph(this.body);
+    this.components.push(this.linegraph);
 
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
+    this.itemsData = null;      // DataSet
+    this.groupsData = null;     // DataSet
 
-      // draw label
-      if (this.label) {
-        this._label(ctx, this.label, point.x, point.y);
-      }
+    // apply options
+    if (options) {
+      this.setOptions(options);
     }
-    else {
-      // draw circle
-      var x, y;
-      var radius = 0.25 * Math.max(100,this.length);
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-      }
-      this._circle(ctx, x, y, radius);
-
-      // draw all arrows
-      var angle = 0.2 * Math.PI;
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      point = this._pointOnCircle(x, y, radius, 0.5);
-      ctx.arrow(point.x, point.y, angle, length);
-      ctx.fill();
-      ctx.stroke();
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
+    // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
+    if (groups) {
+      this.setGroups(groups);
     }
-  };
 
+    // create itemset
+    if (items) {
+      this.setItems(items);
+    }
+    else {
+      this.redraw();
+    }
+  }
 
+  // turn Graph2d into an event emitter
+  Emitter(Graph2d.prototype);
 
   /**
-   * Redraw a edge as a line with an arrow
-   * Draw this edge in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
+   * Create the main DOM for the Graph2d: a root panel containing left, right,
+   * top, bottom, content, and background panel.
+   * @param {Element} container  The container element where the Graph2d will
+   *                             be attached.
    * @private
    */
-  Edge.prototype._drawArrow = function(ctx) {
-    // set style
-    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
-    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
-
-    ctx.lineWidth = this._getLineWidth();
+  Graph2d.prototype._create = function (container) {
+    this.dom = {};
 
-    var angle, length;
-    //draw a line
-    if (this.from != this.to) {
-      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-      var dx = (this.to.x - this.from.x);
-      var dy = (this.to.y - this.from.y);
-      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    this.dom.root                 = document.createElement('div');
+    this.dom.background           = document.createElement('div');
+    this.dom.backgroundVertical   = document.createElement('div');
+    this.dom.backgroundHorizontalContainer = document.createElement('div');
+    this.dom.centerContainer      = document.createElement('div');
+    this.dom.leftContainer        = document.createElement('div');
+    this.dom.rightContainer       = document.createElement('div');
+    this.dom.backgroundHorizontal = document.createElement('div');
+    this.dom.center               = document.createElement('div');
+    this.dom.left                 = document.createElement('div');
+    this.dom.right                = document.createElement('div');
+    this.dom.top                  = document.createElement('div');
+    this.dom.bottom               = document.createElement('div');
+    this.dom.shadowTop            = document.createElement('div');
+    this.dom.shadowBottom         = document.createElement('div');
+    this.dom.shadowTopLeft        = document.createElement('div');
+    this.dom.shadowBottomLeft     = document.createElement('div');
+    this.dom.shadowTopRight       = document.createElement('div');
+    this.dom.shadowBottomRight    = document.createElement('div');
 
-      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+    this.dom.background.className           = 'vispanel background';
+    this.dom.backgroundVertical.className   = 'vispanel background vertical';
+    this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
+    this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
+    this.dom.centerContainer.className      = 'vispanel center';
+    this.dom.leftContainer.className        = 'vispanel left';
+    this.dom.rightContainer.className       = 'vispanel right';
+    this.dom.top.className                  = 'vispanel top';
+    this.dom.bottom.className               = 'vispanel bottom';
+    this.dom.left.className                 = 'content';
+    this.dom.center.className               = 'content';
+    this.dom.right.className                = 'content';
+    this.dom.shadowTop.className            = 'shadow top';
+    this.dom.shadowBottom.className         = 'shadow bottom';
+    this.dom.shadowTopLeft.className        = 'shadow top';
+    this.dom.shadowBottomLeft.className     = 'shadow bottom';
+    this.dom.shadowTopRight.className       = 'shadow top';
+    this.dom.shadowBottomRight.className    = 'shadow bottom';
 
-      var via;
-      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
-        via = this.via;
-      }
-      else if (this.smoothCurves.enabled == true) {
-        via = this._getViaCoordinates();
-      }
+    this.dom.root.appendChild(this.dom.background);
+    this.dom.root.appendChild(this.dom.backgroundVertical);
+    this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
+    this.dom.root.appendChild(this.dom.centerContainer);
+    this.dom.root.appendChild(this.dom.leftContainer);
+    this.dom.root.appendChild(this.dom.rightContainer);
+    this.dom.root.appendChild(this.dom.top);
+    this.dom.root.appendChild(this.dom.bottom);
 
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-        dx = (this.to.x - via.x);
-        dy = (this.to.y - via.y);
-        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-      }
-      var toBorderDist = this.to.distanceToBorder(ctx, angle);
-      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+    this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
+    this.dom.centerContainer.appendChild(this.dom.center);
+    this.dom.leftContainer.appendChild(this.dom.left);
+    this.dom.rightContainer.appendChild(this.dom.right);
 
-      var xTo,yTo;
-      if (this.smoothCurves.enabled == true && via.x != null) {
-       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
-      }
-      else {
-        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
-      }
+    this.dom.centerContainer.appendChild(this.dom.shadowTop);
+    this.dom.centerContainer.appendChild(this.dom.shadowBottom);
+    this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
+    this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
+    this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
+    this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-      ctx.beginPath();
-      ctx.moveTo(xFrom,yFrom);
-      if (this.smoothCurves.enabled == true && via.x != null) {
-        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
-      }
-      else {
-        ctx.lineTo(xTo, yTo);
-      }
-      ctx.stroke();
+    this.on('rangechange', this.redraw.bind(this));
+    this.on('change', this.redraw.bind(this));
+    this.on('touch', this._onTouch.bind(this));
+    this.on('pinch', this._onPinch.bind(this));
+    this.on('dragstart', this._onDragStart.bind(this));
+    this.on('drag', this._onDrag.bind(this));
 
-      // draw arrow at the end of the line
-      length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(xTo, yTo, angle, length);
-      ctx.fill();
-      ctx.stroke();
+    // create event listeners for all interesting events, these events will be
+    // emitted via emitter
+    this.hammer = Hammer(this.dom.root, {
+      prevent_default: true
+    });
+    this.listeners = {};
 
-      // draw label
-      if (this.label) {
-        var point;
-        if (this.smoothCurves.enabled == true && via != null) {
-          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
-          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
-          point = {x:midpointX, y:midpointY};
-        }
-        else {
-          point = this._pointOnLine(0.5);
-        }
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
-    else {
-      // draw circle
-      var node = this.from;
-      var x, y, arrow;
-      var radius = 0.25 * Math.max(100,this.length);
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width * 0.5;
-        y = node.y - radius;
-        arrow = {
-          x: x,
-          y: node.y,
-          angle: 0.9 * Math.PI
-        };
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height * 0.5;
-        arrow = {
-          x: node.x,
-          y: y,
-          angle: 0.6 * Math.PI
-        };
-      }
-      ctx.beginPath();
-      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-      ctx.stroke();
+    var me = this;
+    var events = [
+      'touch', 'pinch',
+      'tap', 'doubletap', 'hold',
+      'dragstart', 'drag', 'dragend',
+      'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    ];
+    events.forEach(function (event) {
+      var listener = function () {
+        var args = [event].concat(Array.prototype.slice.call(arguments, 0));
+        me.emit.apply(me, args);
+      };
+      me.hammer.on(event, listener);
+      me.listeners[event] = listener;
+    });
 
-      // draw all arrows
-      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
-      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-      ctx.fill();
-      ctx.stroke();
+    // size properties of each of the panels
+    this.props = {
+      root: {},
+      background: {},
+      centerContainer: {},
+      leftContainer: {},
+      rightContainer: {},
+      center: {},
+      left: {},
+      right: {},
+      top: {},
+      bottom: {},
+      border: {},
+      scrollTop: 0,
+      scrollTopMin: 0
+    };
+    this.touch = {}; // store state information needed for touch events
 
-      // draw label
-      if (this.label) {
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._label(ctx, this.label, point.x, point.y);
-      }
-    }
+    // attach the root panel to the provided container
+    if (!container) throw new Error('No container provided');
+    container.appendChild(this.dom.root);
   };
 
-
-
   /**
-   * Calculate the distance between a point (x3,y3) and a line segment from
-   * (x1,y1) to (x2,y2).
-   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
-   * @param {number} x1
-   * @param {number} y1
-   * @param {number} x2
-   * @param {number} y2
-   * @param {number} x3
-   * @param {number} y3
-   * @private
+   * Destroy the Graph2d, clean up all DOM elements and event listeners.
    */
-  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    if (this.from != this.to) {
-      if (this.smoothCurves.enabled == true) {
-        var xVia, yVia;
-        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
-          xVia = this.via.x;
-          yVia = this.via.y;
-        }
-        else {
-          var via = this._getViaCoordinates();
-          xVia = via.x;
-          yVia = via.y;
-        }
-        var minDistance = 1e9;
-        var distance;
-        var i,t,x,y, lastX, lastY;
-        for (i = 0; i < 10; i++) {
-          t = 0.1*i;
-          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
-          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
-          if (i > 0) {
-            distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
-            minDistance = distance < minDistance ? distance : minDistance;
-          }
-          lastX = x; lastY = y;
-        }
-        return minDistance
-      }
-      else {
-        return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
-      }
-    }
-    else {
-      var x, y, dx, dy;
-      var radius = this.length / 4;
-      var node = this.from;
-      if (!node.width) {
-        node.resize(ctx);
-      }
-      if (node.width > node.height) {
-        x = node.x + node.width / 2;
-        y = node.y - radius;
-      }
-      else {
-        x = node.x + radius;
-        y = node.y - node.height / 2;
-      }
-      dx = x - x3;
-      dy = y - y3;
-      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
-    }
-  };
+  Graph2d.prototype.destroy = function () {
+    // unbind datasets
+    this.clear();
 
-  Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
-    var px = x2-x1,
-      py = y2-y1,
-      something = px*px + py*py,
-      u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+    // remove all event listeners
+    this.off();
 
-    if (u > 1) {
-      u = 1;
-    }
-    else if (u < 0) {
-      u = 0;
+    // stop checking for changed size
+    this._stopAutoResize();
+
+    // remove from DOM
+    if (this.dom.root.parentNode) {
+      this.dom.root.parentNode.removeChild(this.dom.root);
     }
+    this.dom = null;
 
-    var x = x1 + u * px,
-      y = y1 + u * py,
-      dx = x - x3,
-      dy = y - y3;
+    // cleanup hammer touch events
+    for (var event in this.listeners) {
+      if (this.listeners.hasOwnProperty(event)) {
+        delete this.listeners[event];
+      }
+    }
+    this.listeners = null;
+    this.hammer = null;
 
-    //# Note: If the actual distance does not matter,
-    //# if you only want to compare what this function
-    //# returns to other results of this function, you
-    //# can just return the squared distance instead
-    //# (i.e. remove the sqrt) to gain a little performance
+    // give all components the opportunity to cleanup
+    this.components.forEach(function (component) {
+      component.destroy();
+    });
 
-    return Math.sqrt(dx*dx + dy*dy);
-  }
+    this.body = null;
+  };
 
   /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
+   * Set options. Options will be passed to all components loaded in the Graph2d.
+   * @param {Object} [options]
+   *                           {String} orientation
+   *                              Vertical orientation for the Graph2d,
+   *                              can be 'bottom' (default) or 'top'.
+   *                           {String | Number} width
+   *                              Width for the timeline, a number in pixels or
+   *                              a css string like '1000px' or '75%'. '100%' by default.
+   *                           {String | Number} height
+   *                              Fixed height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'. If undefined,
+   *                              The Graph2d will automatically size such that
+   *                              its contents fit.
+   *                           {String | Number} minHeight
+   *                              Minimum height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {String | Number} maxHeight
+   *                              Maximum height for the Graph2d, a number in pixels or
+   *                              a css string like '400px' or '75%'.
+   *                           {Number | Date | String} start
+   *                              Start date for the visible window
+   *                           {Number | Date | String} end
+   *                              End date for the visible window
    */
-  Edge.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-  };
-
+  Graph2d.prototype.setOptions = function (options) {
+    if (options) {
+      // copy the known options
+      var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
+      util.selectiveExtend(fields, this.options, options);
 
-  Edge.prototype.select = function() {
-    this.selected = true;
-  };
+      // enable/disable autoResize
+      this._initAutoResize();
+    }
 
-  Edge.prototype.unselect = function() {
-    this.selected = false;
-  };
+    // propagate options to all components
+    this.components.forEach(function (component) {
+      component.setOptions(options);
+    });
 
-  Edge.prototype.positionBezierNode = function() {
-    if (this.via !== null) {
-      this.via.x = 0.5 * (this.from.x + this.to.x);
-      this.via.y = 0.5 * (this.from.y + this.to.y);
+    // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+    if (options && options.order) {
+      throw new Error('Option order is deprecated. There is no replacement for this feature.');
     }
+
+    // redraw everything
+    this.redraw();
   };
 
   /**
-   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
-   * @param ctx
+   * Set a custom time bar
+   * @param {Date} time
    */
-  Edge.prototype._drawControlNodes = function(ctx) {
-    if (this.controlNodesEnabled == true) {
-      if (this.controlNodes.from === null && this.controlNodes.to === null) {
-        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
-        var nodeIdTo = "edgeIdTo:".concat(this.id);
-        var constants = {
-                        nodes:{group:'', radius:8},
-                        physics:{damping:0},
-                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
-                        };
-        this.controlNodes.from = new Node(
-          {id:nodeIdFrom,
-            shape:'dot',
-              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-        this.controlNodes.to = new Node(
-          {id:nodeIdTo,
-            shape:'dot',
-            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
-          },{},{},constants);
-      }
-
-      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
-        this.controlNodes.positions = this.getControlNodePositions(ctx);
-        this.controlNodes.from.x = this.controlNodes.positions.from.x;
-        this.controlNodes.from.y = this.controlNodes.positions.from.y;
-        this.controlNodes.to.x = this.controlNodes.positions.to.x;
-        this.controlNodes.to.y = this.controlNodes.positions.to.y;
-      }
-
-      this.controlNodes.from.draw(ctx);
-      this.controlNodes.to.draw(ctx);
-    }
-    else {
-      this.controlNodes = {from:null, to:null, positions:{}};
+  Graph2d.prototype.setCustomTime = function (time) {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
     }
-  };
 
-  /**
-   * Enable control nodes.
-   * @private
-   */
-  Edge.prototype._enableControlNodes = function() {
-    this.controlNodesEnabled = true;
+    this.customTime.setCustomTime(time);
   };
 
   /**
-   * disable control nodes
-   * @private
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  Edge.prototype._disableControlNodes = function() {
-    this.controlNodesEnabled = false;
+  Graph2d.prototype.getCustomTime = function() {
+    if (!this.customTime) {
+      throw new Error('Cannot get custom time: Custom time bar is not enabled');
+    }
+
+    return this.customTime.getCustomTime();
   };
 
   /**
-   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
-   * @param x
-   * @param y
-   * @returns {null}
-   * @private
+   * Set items
+   * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
    */
-  Edge.prototype._getSelectedControlNode = function(x,y) {
-    var positions = this.controlNodes.positions;
-    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
-    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
+  Graph2d.prototype.setItems = function(items) {
+    var initialLoad = (this.itemsData == null);
 
-    if (fromDistance < 15) {
-      this.connectedNode = this.from;
-      this.from = this.controlNodes.from;
-      return this.controlNodes.from;
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!items) {
+      newDataSet = null;
     }
-    else if (toDistance < 15) {
-      this.connectedNode = this.to;
-      this.to = this.controlNodes.to;
-      return this.controlNodes.to;
+    else if (items instanceof DataSet || items instanceof DataView) {
+      newDataSet = items;
     }
     else {
-      return null;
+      // turn an array into a dataset
+      newDataSet = new DataSet(items, {
+        type: {
+          start: 'Date',
+          end: 'Date'
+        }
+      });
     }
-  };
 
+    // set items
+    this.itemsData = newDataSet;
+    this.linegraph && this.linegraph.setItems(newDataSet);
 
-  /**
-   * this resets the control nodes to their original position.
-   * @private
-   */
-  Edge.prototype._restoreControlNodes = function() {
-    if (this.controlNodes.from.selected == true) {
-      this.from = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.from.unselect();
-    }
-    if (this.controlNodes.to.selected == true) {
-      this.to = this.connectedNode;
-      this.connectedNode = null;
-      this.controlNodes.to.unselect();
+    if (initialLoad && ('start' in this.options || 'end' in this.options)) {
+      this.fit();
+
+      var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
+      var end   = ('end' in this.options)   ? util.convert(this.options.end, 'Date') : null;
+
+      this.setWindow(start, end);
     }
   };
 
   /**
-   * this calculates the position of the control nodes on the edges of the parent nodes.
-   *
-   * @param ctx
-   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
+   * Set groups
+   * @param {vis.DataSet | Array | google.visualization.DataTable} groups
    */
-  Edge.prototype.getControlNodePositions = function(ctx) {
-    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-    var dx = (this.to.x - this.from.x);
-    var dy = (this.to.y - this.from.y);
-    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
-    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
-    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
-    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
-    var via;
-    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
-      via = this.via;
-    }
-    else if (this.smoothCurves.enabled == true) {
-      via = this._getViaCoordinates();
-    }
-
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
-      dx = (this.to.x - via.x);
-      dy = (this.to.y - via.y);
-      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+  Graph2d.prototype.setGroups = function(groups) {
+    // convert to type DataSet when needed
+    var newDataSet;
+    if (!groups) {
+      newDataSet = null;
     }
-    var toBorderDist = this.to.distanceToBorder(ctx, angle);
-    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
-
-    var xTo,yTo;
-    if (this.smoothCurves.enabled == true && via.x != null) {
-      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      newDataSet = groups;
     }
     else {
-      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
-      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+      // turn an array into a dataset
+      newDataSet = new DataSet(groups);
     }
 
-    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+    this.groupsData = newDataSet;
+    this.linegraph.setGroups(newDataSet);
   };
 
-  module.exports = Edge;
-
-/***/ },
-/* 28 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-
   /**
-   * @class Groups
-   * This class can store groups and properties specific for groups.
+   * Clear the Graph2d. By Default, items, groups and options are cleared.
+   * Example usage:
+   *
+   *     timeline.clear();                // clear items, groups, and options
+   *     timeline.clear({options: true}); // clear options only
+   *
+   * @param {Object} [what]      Optionally specify what to clear. By default:
+   *                             {items: true, groups: true, options: true}
    */
-  function Groups() {
-    this.clear();
-    this.defaultIndex = 0;
-  }
-
+  Graph2d.prototype.clear = function(what) {
+    // clear items
+    if (!what || what.items) {
+      this.setItems(null);
+    }
 
-  /**
-   * default constants for group colors
-   */
-  Groups.DEFAULT = [
-    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
-    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
-    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
-    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
-    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
-    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
-    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
-    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
-    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
-    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
-  ];
+    // clear groups
+    if (!what || what.groups) {
+      this.setGroups(null);
+    }
 
+    // clear options of timeline and of each of the components
+    if (!what || what.options) {
+      this.components.forEach(function (component) {
+        component.setOptions(component.defaultOptions);
+      });
 
-  /**
-   * Clear all groups
-   */
-  Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-      var i = 0;
-      for ( var p in this ) {
-        if (this.hasOwnProperty(p)) {
-          i++;
-        }
-      }
-      return i;
+      this.setOptions(this.defaultOptions); // this will also do a redraw
     }
   };
 
-
   /**
-   * get group properties of a groupname. If groupname is not found, a new group
-   * is added.
-   * @param {*} groupname        Can be a number, string, Date, etc.
-   * @return {Object} group      The created group, containing all group properties
+   * Set Graph2d window such that it fits all items
    */
-  Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
+  Graph2d.prototype.fit = function() {
+    // apply the data range as range
+    var dataRange = this.getItemRange();
 
-    if (group == undefined) {
-      // create new group
-      var index = this.defaultIndex % Groups.DEFAULT.length;
-      this.defaultIndex++;
-      group = {};
-      group.color = Groups.DEFAULT[index];
-      this.groups[groupname] = group;
+    // add 5% space on both sides
+    var start = dataRange.min;
+    var end = dataRange.max;
+    if (start != null && end != null) {
+      var interval = (end.valueOf() - start.valueOf());
+      if (interval <= 0) {
+        // prevent an empty interval
+        interval = 24 * 60 * 60 * 1000; // 1 day
+      }
+      start = new Date(start.valueOf() - interval * 0.05);
+      end = new Date(end.valueOf() + interval * 0.05);
     }
 
-    return group;
+    // skip range set if there is no start and end date
+    if (start === null && end === null) {
+      return;
+    }
+
+    this.range.setRange(start, end);
   };
 
   /**
-   * Add a custom group style
-   * @param {String} groupname
-   * @param {Object} style       An object containing borderColor,
-   *                             backgroundColor, etc.
-   * @return {Object} group      The created group object
+   * Get the data range of the item set.
+   * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
+   *                                          When no minimum is found, min==null
+   *                                          When no maximum is found, max==null
    */
-  Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    if (style.color) {
-      style.color = util.parseColor(style.color);
-    }
-    return style;
-  };
+  Graph2d.prototype.getItemRange = function() {
+    // calculate min from start filed
+    var itemsData = this.itemsData,
+      min = null,
+      max = null;
 
-  module.exports = Groups;
+    if (itemsData) {
+      // calculate the minimum value of the field 'start'
+      var minItem = itemsData.min('start');
+      min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
+      // Note: we convert first to Date and then to number because else
+      // a conversion from ISODate to Number will fail
 
+      // calculate maximum value of fields 'start' and 'end'
+      var maxStartItem = itemsData.max('start');
+      if (maxStartItem) {
+        max = util.convert(maxStartItem.start, 'Date').valueOf();
+      }
+      var maxEndItem = itemsData.max('end');
+      if (maxEndItem) {
+        if (max == null) {
+          max = util.convert(maxEndItem.end, 'Date').valueOf();
+        }
+        else {
+          max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+        }
+      }
+    }
 
-/***/ },
-/* 29 */
-/***/ function(module, exports, __webpack_require__) {
+    return {
+      min: (min != null) ? new Date(min) : null,
+      max: (max != null) ? new Date(max) : null
+    };
+  };
 
   /**
-   * @class Images
-   * This class loads images and keeps them stored.
+   * Set the visible window. Both parameters are optional, you can change only
+   * start or only end. Syntax:
+   *
+   *     TimeLine.setWindow(start, end)
+   *     TimeLine.setWindow(range)
+   *
+   * Where start and end can be a Date, number, or string, and range is an
+   * object with properties start and end.
+   *
+   * @param {Date | Number | String | Object} [start] Start date of visible window
+   * @param {Date | Number | String} [end]   End date of visible window
    */
-  function Images() {
-    this.images = {};
-
-    this.callback = undefined;
-  }
+  Graph2d.prototype.setWindow = function(start, end) {
+    if (arguments.length == 1) {
+      var range = arguments[0];
+      this.range.setRange(range.start, range.end);
+    }
+    else {
+      this.range.setRange(start, end);
+    }
+  };
 
   /**
-   * Set an onload callback function. This will be called each time an image
-   * is loaded
-   * @param {function} callback
+   * Get the visible window
+   * @return {{start: Date, end: Date}}   Visible range
    */
-  Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
+  Graph2d.prototype.getWindow = function() {
+    var range = this.range.getRange();
+    return {
+      start: new Date(range.start),
+      end: new Date(range.end)
+    };
   };
 
   /**
-   *
-   * @param {string} url          Url of the image
-   * @return {Image} img          The image object
+   * Force a redraw of the Graph2d. Can be useful to manually redraw when
+   * option autoResize=false
    */
-  Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-      // create the image
-      var images = this;
-      img = new Image();
-      this.images[url] = img;
-      img.onload = function() {
-        if (images.callback) {
-          images.callback(this);
-        }
-      };
-      img.src = url;
-    }
-
-    return img;
-  };
+  Graph2d.prototype.redraw = function() {
+    var resized = false,
+      options = this.options,
+      props = this.props,
+      dom = this.dom;
 
-  module.exports = Images;
+    if (!dom) return; // when destroyed
 
+    // update class names
+    dom.root.className = 'vis timeline root ' + options.orientation;
 
-/***/ },
-/* 30 */
-/***/ function(module, exports, __webpack_require__) {
+    // update root width and height options
+    dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
+    dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
+    dom.root.style.width = util.option.asSize(options.width, '');
 
-  var util = __webpack_require__(1);
+    // calculate border widths
+    props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
+    props.border.right  = props.border.left;
+    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.bottom = props.border.top;
+    var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+    var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
-  /**
-   * @class Node
-   * A node. A node can be connected to other nodes via one or multiple edges.
-   * @param {object} properties An object containing properties for the node. All
-   *                            properties are optional, except for the id.
-   *                              {number} id     Id of the node. Required
-   *                              {string} label  Text label for the node
-   *                              {number} x      Horizontal position of the node
-   *                              {number} y      Vertical position of the node
-   *                              {string} shape  Node shape, available:
-   *                                              "database", "circle", "ellipse",
-   *                                              "box", "image", "text", "dot",
-   *                                              "star", "triangle", "triangleDown",
-   *                                              "square"
-   *                              {string} image  An image url
-   *                              {string} title  An title text, can be HTML
-   *                              {anytype} group A group name or number
-   * @param {Network.Images} imagelist    A list with images. Only needed
-   *                                            when the node has an image
-   * @param {Network.Groups} grouplist    A list with groups. Needed for
-   *                                            retrieving group properties
-   * @param {Object}               constants    An object with default values for
-   *                                            example for the color
-   *
-   */
-  function Node(properties, imagelist, grouplist, constants) {
-    this.selected = false;
-    this.hover = false;
+    // calculate the heights. If any of the side panels is empty, we set the height to
+    // minus the border width, such that the border will be invisible
+    props.center.height = dom.center.offsetHeight;
+    props.left.height   = dom.left.offsetHeight;
+    props.right.height  = dom.right.offsetHeight;
+    props.top.height    = dom.top.clientHeight    || -props.border.top;
+    props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
 
-    this.edges = []; // all edges connected to this node
-    this.dynamicEdges = [];
-    this.reroutedEdges = {};
+    // TODO: compensate borders when any of the panels is empty.
 
-    this.group = constants.nodes.group;
-    this.fontSize = Number(constants.nodes.fontSize);
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-    this.fontDrawThreshold = 3;
+    // apply auto height
+    // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
+    var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
+    var autoHeight = props.top.height + contentHeight + props.bottom.height +
+      borderRootHeight + props.border.top + props.border.bottom;
+    dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
-    this.color = constants.nodes.color;
+    // calculate heights of the content panels
+    props.root.height = dom.root.offsetHeight;
+    props.background.height = props.root.height - borderRootHeight;
+    var containerHeight = props.root.height - props.top.height - props.bottom.height -
+      borderRootHeight;
+    props.centerContainer.height  = containerHeight;
+    props.leftContainer.height    = containerHeight;
+    props.rightContainer.height   = props.leftContainer.height;
 
-    // set defaults for the properties
-    this.id = undefined;
-    this.shape = constants.nodes.shape;
-    this.image = constants.nodes.image;
-    this.x = null;
-    this.y = null;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.horizontalAlignLeft = true; // these are for the navigation controls
-    this.verticalAlignTop    = true; // these are for the navigation controls
-    this.radius = constants.nodes.radius;
-    this.baseRadiusValue = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
-    this.level = -1;
-    this.preassignedLevel = false;
+    // calculate the widths of the panels
+    props.root.width = dom.root.offsetWidth;
+    props.background.width = props.root.width - borderRootWidth;
+    props.left.width = dom.leftContainer.clientWidth   || -props.border.left;
+    props.leftContainer.width = props.left.width;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    props.rightContainer.width = props.right.width;
+    var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
+    props.center.width          = centerWidth;
+    props.centerContainer.width = centerWidth;
+    props.top.width             = centerWidth;
+    props.bottom.width          = centerWidth;
 
+    // resize the panels
+    dom.background.style.height           = props.background.height + 'px';
+    dom.backgroundVertical.style.height   = props.background.height + 'px';
+    dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
+    dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+    dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+    dom.rightContainer.style.height       = props.rightContainer.height + 'px';
 
-    this.imagelist = imagelist;
-    this.grouplist = grouplist;
+    dom.background.style.width            = props.background.width + 'px';
+    dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+    dom.backgroundHorizontalContainer.style.width  = props.background.width + 'px';
+    dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+    dom.centerContainer.style.width       = props.center.width + 'px';
+    dom.top.style.width                   = props.top.width + 'px';
+    dom.bottom.style.width                = props.bottom.width + 'px';
 
-    // physics properties
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = constants.physics.damping;
-    this.mass = 1;  // kg
-    this.fixedData = {x:null,y:null};
+    // reposition the panels
+    dom.background.style.left           = '0';
+    dom.background.style.top            = '0';
+    dom.backgroundVertical.style.left   = props.left.width + 'px';
+    dom.backgroundVertical.style.top    = '0';
+    dom.backgroundHorizontalContainer.style.left = '0';
+    dom.backgroundHorizontalContainer.style.top  = props.top.height + 'px';
+    dom.centerContainer.style.left      = props.left.width + 'px';
+    dom.centerContainer.style.top       = props.top.height + 'px';
+    dom.leftContainer.style.left        = '0';
+    dom.leftContainer.style.top         = props.top.height + 'px';
+    dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+    dom.rightContainer.style.top        = props.top.height + 'px';
+    dom.top.style.left                  = props.left.width + 'px';
+    dom.top.style.top                   = '0';
+    dom.bottom.style.left               = props.left.width + 'px';
+    dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
 
-    this.setProperties(properties, constants);
+    // update the scrollTop, feasible range for the offset can be changed
+    // when the height of the Graph2d or of the contents of the center changed
+    this._updateScrollTop();
 
-    // creating the variables for clustering
-    this.resetCluster();
-    this.dynamicEdgesLength = 0;
-    this.clusterSession = 0;
-    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
-    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
-    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
-    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
-    this.growthIndicator = 0;
+    // reposition the scrollable contents
+    var offset = this.props.scrollTop;
+    if (options.orientation == 'bottom') {
+      offset += Math.max(this.props.centerContainer.height - this.props.center.height -
+          this.props.border.top - this.props.border.bottom, 0);
+    }
+    dom.center.style.left = '0';
+    dom.center.style.top  = offset + 'px';
+    dom.backgroundHorizontal.style.left = '0';
+    dom.backgroundHorizontal.style.top  = offset + 'px';
+    dom.left.style.left   = '0';
+    dom.left.style.top    = offset + 'px';
+    dom.right.style.left  = '0';
+    dom.right.style.top   = offset + 'px';
 
-    // variables to tell the node about the network.
-    this.networkScaleInv = 1;
-    this.networkScale = 1;
-    this.canvasTopLeft = {"x": -300, "y": -300};
-    this.canvasBottomRight = {"x":  300, "y":  300};
-    this.parentEdgeId = null;
-  }
+    // show shadows when vertical scrolling is available
+    var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
+    var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+    dom.shadowTop.style.visibility          = visibilityTop;
+    dom.shadowBottom.style.visibility       = visibilityBottom;
+    dom.shadowTopLeft.style.visibility      = visibilityTop;
+    dom.shadowBottomLeft.style.visibility   = visibilityBottom;
+    dom.shadowTopRight.style.visibility     = visibilityTop;
+    dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
-  /**
-   * (re)setting the clustering variables and objects
-   */
-  Node.prototype.resetCluster = function() {
-    // clustering variables
-    this.formationScale = undefined; // this is used to determine when to open the cluster
-    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
-    this.containedNodes = {};
-    this.containedEdges = {};
-    this.clusterSessions = [];
+    // redraw all components
+    this.components.forEach(function (component) {
+      resized = component.redraw() || resized;
+    });
+    if (resized) {
+      // keep redrawing until all sizes are settled
+      this.redraw();
+    }
   };
 
   /**
-   * Attach a edge to the node
-   * @param {Edge} edge
+   * Convert a position on screen (pixels) to a datetime
+   * @param {int}     x    Position on the screen in pixels
+   * @return {Date}   time The datetime the corresponds with given position x
+   * @private
    */
-  Node.prototype.attachEdge = function(edge) {
-    if (this.edges.indexOf(edge) == -1) {
-      this.edges.push(edge);
-    }
-    if (this.dynamicEdges.indexOf(edge) == -1) {
-      this.dynamicEdges.push(edge);
-    }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
+  // TODO: move this function to Range
+  Graph2d.prototype._toTime = function(x) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return new Date(x / conversion.scale + conversion.offset);
   };
 
   /**
-   * Detach a edge from the node
-   * @param {Edge} edge
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
+   * @private
    */
-  Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-      this.edges.splice(index, 1);
-      this.dynamicEdges.splice(index, 1);
-    }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
+  // TODO: move this function to Range
+  Graph2d.prototype._toGlobalTime = function(x) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return new Date(x / conversion.scale + conversion.offset);
   };
 
-
   /**
-   * Set or overwrite properties for the node
-   * @param {Object} properties an object with properties
-   * @param {Object} constants  and object with default, global properties
-   */
-  Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-      return;
-    }
-    this.originalLabel = undefined;
-    // basic properties
-    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.group !== undefined)     {this.group = properties.group;}
-    if (properties.x !== undefined)         {this.x = properties.x;}
-    if (properties.y !== undefined)         {this.y = properties.y;}
-    if (properties.value !== undefined)     {this.value = properties.value;}
-    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
-
-
-    // physics
-    if (properties.mass !== undefined)                {this.mass = properties.mass;}
-
-    // navigation controls properties
-    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
-    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
-    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
-
-    if (this.id === undefined) {
-      throw "Node must have an id";
-    }
-
-    // copy group properties
-    if (this.group) {
-      var groupObj = this.grouplist.get(this.group);
-      for (var prop in groupObj) {
-        if (groupObj.hasOwnProperty(prop)) {
-          this[prop] = groupObj[prop];
-        }
-      }
-    }
-
-    // individual shape properties
-    if (properties.shape !== undefined)          {this.shape = properties.shape;}
-    if (properties.image !== undefined)          {this.image = properties.image;}
-    if (properties.radius !== undefined)         {this.radius = properties.radius; this.baseRadiusValue = this.radius;}
-    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
-
-    if (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
-
-    if (this.image !== undefined && this.image != "") {
-      if (this.imagelist) {
-        this.imageObj = this.imagelist.load(this.image);
-      }
-      else {
-        throw "No imagelist provided";
-      }
-    }
-
-    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
-    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
-    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
-
-    if (this.shape == 'image') {
-      this.radiusMin = constants.nodes.widthMin;
-      this.radiusMax = constants.nodes.widthMax;
-    }
-
-    // choose draw method depending on the shape
-    switch (this.shape) {
-      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
-      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-      // TODO: add diamond shape
-      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
-    }
-    // reset the size of the node, this can be changed
-    this._reset();
-  };
-
-  /**
-   * select this node
-   */
-  Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
-  };
-
-  /**
-   * unselect this node
+   * Convert a datetime (Date object) into a position on the screen
+   * @param {Date}   time A date
+   * @return {int}   x    The position on the screen in pixels which corresponds
+   *                      with the given date.
+   * @private
    */
-  Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
+  // TODO: move this function to Range
+  Graph2d.prototype._toScreen = function(time) {
+    var conversion = this.range.conversion(this.props.center.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
   };
 
 
   /**
-   * Reset the calculated size of the node, forces it to recalculate its size
-   */
-  Node.prototype.clearSizeCache = function() {
-    this._reset();
-  };
-
-  /**
-   * Reset the calculated size of the node, forces it to recalculate its size
+   * Convert a datetime (Date object) into a position on the root
+   * This is used to get the pixel density estimate for the screen, not the center panel
+   * @param {Date}   time A date
+   * @return {int}   x    The position on root in pixels which corresponds
+   *                      with the given date.
    * @private
    */
-  Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
+  // TODO: move this function to Range
+  Graph2d.prototype._toGlobalScreen = function(time) {
+    var conversion = this.range.conversion(this.props.root.width);
+    return (time.valueOf() - conversion.offset) * conversion.scale;
   };
 
   /**
-   * get the title of this node.
-   * @return {string} title    The title of the node, or undefined when no title
-   *                           has been set.
+   * Initialize watching when option autoResize is true
+   * @private
    */
-  Node.prototype.getTitle = function() {
-    return typeof this.title === "function" ? this.title() : this.title;
+  Graph2d.prototype._initAutoResize = function () {
+    if (this.options.autoResize == true) {
+      this._startAutoResize();
+    }
+    else {
+      this._stopAutoResize();
+    }
   };
 
   /**
-   * Calculate the distance to the border of the Node
-   * @param {CanvasRenderingContext2D}   ctx
-   * @param {Number} angle        Angle in radians
-   * @returns {number} distance   Distance to the border in pixels
+   * Watch for changes in the size of the container. On resize, the Panel will
+   * automatically redraw itself.
+   * @private
    */
-  Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
-
-    if (!this.width) {
-      this.resize(ctx);
-    }
+  Graph2d.prototype._startAutoResize = function () {
+    var me = this;
 
-    switch (this.shape) {
-      case 'circle':
-      case 'dot':
-        return this.radius + borderWidth;
+    this._stopAutoResize();
 
-      case 'ellipse':
-        var a = this.width / 2;
-        var b = this.height / 2;
-        var w = (Math.sin(angle) * a);
-        var h = (Math.cos(angle) * b);
-        return a * b / Math.sqrt(w * w + h * h);
+    this._onResize = function() {
+      if (me.options.autoResize != true) {
+        // stop watching when the option autoResize is changed to false
+        me._stopAutoResize();
+        return;
+      }
 
-      // TODO: implement distanceToBorder for database
-      // TODO: implement distanceToBorder for triangle
-      // TODO: implement distanceToBorder for triangleDown
+      if (me.dom.root) {
+        // check whether the frame is resized
+        if ((me.dom.root.clientWidth != me.props.lastWidth) ||
+          (me.dom.root.clientHeight != me.props.lastHeight)) {
+          me.props.lastWidth = me.dom.root.clientWidth;
+          me.props.lastHeight = me.dom.root.clientHeight;
 
-      case 'box':
-      case 'image':
-      case 'text':
-      default:
-        if (this.width) {
-          return Math.min(
-              Math.abs(this.width / 2 / Math.cos(angle)),
-              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-          // TODO: reckon with border radius too in case of box
-        }
-        else {
-          return 0;
+          me.emit('change');
         }
+      }
+    };
 
-    }
-    // TODO: implement calculation of distance to border for all shapes
-  };
+    // add event listener to window resize
+    util.addEventListener(window, 'resize', this._onResize);
 
-  /**
-   * Set forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
-   */
-  Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
+    this.watchTimer = setInterval(this._onResize, 1000);
   };
 
   /**
-   * Add forces acting on the node
-   * @param {number} fx   Force in horizontal direction
-   * @param {number} fy   Force in vertical direction
+   * Stop watching for a resize of the frame.
    * @private
    */
-  Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
-  };
-
-  /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   */
-  Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.x  += this.vx * interval;          // position
+  Graph2d.prototype._stopAutoResize = function () {
+    if (this.watchTimer) {
+      clearInterval(this.watchTimer);
+      this.watchTimer = undefined;
     }
 
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.y  += this.vy * interval;          // position
-    }
+    // remove event listener on window.resize
+    util.removeEventListener(window, 'resize', this._onResize);
+    this._onResize = null;
   };
 
-
-
   /**
-   * Perform one discrete step for the node
-   * @param {number} interval    Time interval in seconds
-   * @param {number} maxVelocity The speed limit imposed on the velocity
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
-    if (!this.xFixed) {
-      var dx   = this.damping * this.vx;     // damping force
-      var ax   = (this.fx - dx) / this.mass;  // acceleration
-      this.vx += ax * interval;               // velocity
-      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
-      this.x  += this.vx * interval;          // position
-    }
-    else {
-      this.fx = 0;
-    }
-
-    if (!this.yFixed) {
-      var dy   = this.damping * this.vy;     // damping force
-      var ay   = (this.fy - dy) / this.mass;  // acceleration
-      this.vy += ay * interval;               // velocity
-      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
-      this.y  += this.vy * interval;          // position
-    }
-    else {
-      this.fy = 0;
-    }
+  Graph2d.prototype._onTouch = function (event) {
+    this.touch.allowDragging = true;
   };
 
   /**
-   * Check if this node has a fixed x and y position
-   * @return {boolean}      true if fixed, false if not
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
+  Graph2d.prototype._onPinch = function (event) {
+    this.touch.allowDragging = false;
   };
 
   /**
-   * Check if this node is moving
-   * @param {number} vmin   the minimum velocity considered as "moving"
-   * @return {boolean}      true if moving, false if it has no velocity
+   * Start moving the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  // TODO: replace this method with calculating the kinetic energy
-  Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  Graph2d.prototype._onDragStart = function (event) {
+    this.touch.initialScrollTop = this.props.scrollTop;
   };
 
   /**
-   * check if this node is selecte
-   * @return {boolean} selected   True if node is selected, else false
+   * Move the timeline vertically
+   * @param {Event} event
+   * @private
    */
-  Node.prototype.isSelected = function() {
-    return this.selected;
-  };
+  Graph2d.prototype._onDrag = function (event) {
+    // refuse to drag when we where pinching to prevent the timeline make a jump
+    // when releasing the fingers in opposite order from the touch screen
+    if (!this.touch.allowDragging) return;
 
-  /**
-   * Retrieve the value of the node. Can be undefined
-   * @return {Number} value
-   */
-  Node.prototype.getValue = function() {
-    return this.value;
+    var delta = event.gesture.deltaY;
+
+    var oldScrollTop = this._getScrollTop();
+    var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+
+    if (newScrollTop != oldScrollTop) {
+      this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
+    }
   };
 
   /**
-   * Calculate the distance from the nodes location to the given location (x,y)
-   * @param {Number} x
-   * @param {Number} y
-   * @return {Number} value
+   * Apply a scrollTop
+   * @param {Number} scrollTop
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
    */
-  Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
+  Graph2d.prototype._setScrollTop = function (scrollTop) {
+    this.props.scrollTop = scrollTop;
+    this._updateScrollTop();
+    return this.props.scrollTop;
   };
 
-
   /**
-   * Adjust the value range of the node. The node will adjust it's radius
-   * based on its value.
-   * @param {Number} min
-   * @param {Number} max
+   * Update the current scrollTop when the height of  the containers has been changed
+   * @returns {Number} scrollTop  Returns the applied scrollTop
+   * @private
    */
-  Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-      if (max == min) {
-        this.radius = (this.radiusMin + this.radiusMax) / 2;
-      }
-      else {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
+  Graph2d.prototype._updateScrollTop = function () {
+    // recalculate the scrollTopMin
+    var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
+    if (scrollTopMin != this.props.scrollTopMin) {
+      // in case of bottom orientation, change the scrollTop such that the contents
+      // do not move relative to the time axis at the bottom
+      if (this.options.orientation == 'bottom') {
+        this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
       }
+      this.props.scrollTopMin = scrollTopMin;
     }
-    this.baseRadiusValue = this.radius;
-  };
 
-  /**
-   * Draw this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
-  };
+    // limit the scrollTop to the feasible scroll range
+    if (this.props.scrollTop > 0) this.props.scrollTop = 0;
+    if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
 
-  /**
-   * Recalculate the size of this node in the given canvas
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   * @param {CanvasRenderingContext2D}   ctx
-   */
-  Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
+    return this.props.scrollTop;
   };
 
   /**
-   * Check if this object is overlapping with the provided object
-   * @param {Object} obj   an object with parameters left, top, right, bottom
-   * @return {boolean}     True if location is located on node
+   * Get the current scrollTop
+   * @returns {number} scrollTop
+   * @private
    */
-  Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left              < obj.right  &&
-            this.left + this.width > obj.left   &&
-            this.top               < obj.bottom &&
-            this.top + this.height > obj.top);
+  Graph2d.prototype._getScrollTop = function () {
+    return this.props.scrollTop;
   };
 
-  Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
-
-    if (!this.width || !this.height) {  // undefined or 0
-      var width, height;
-      if (this.value) {
-        this.radius = this.baseRadiusValue;
-        var scale = this.imageObj.height / this.imageObj.width;
-        if (scale !== undefined) {
-          width = this.radius || this.imageObj.width;
-          height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-          width = 0;
-          height = 0;
-        }
-      }
-      else {
-        width = this.imageObj.width;
-        height = this.imageObj.height;
-      }
-      this.width  = width;
-      this.height = height;
+  module.exports = Graph2d;
 
-      this.growthIndicator = 0;
-      if (this.width > 0 && this.height > 0) {
-        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
-        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-        this.growthIndicator = this.width - width;
-      }
-    }
 
-  };
+/***/ },
+/* 32 */
+/***/ function(module, exports, __webpack_require__) {
 
-  Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var Component = __webpack_require__(19);
+  var DataAxis = __webpack_require__(33);
+  var GraphGroup = __webpack_require__(35);
+  var Legend = __webpack_require__(36);
 
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
-    var yLabel;
-    if (this.imageObj.width != 0 ) {
-      // draw the shade
-      if (this.clusterSize > 1) {
-        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
-        lineWidth *= this.networkScaleInv;
-        lineWidth = Math.min(0.2 * this.width,lineWidth);
+  /**
+   * 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;
 
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+    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,
+        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
+      },
+      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
+        }
       }
+    };
 
-      // draw the image
-      ctx.globalAlpha = 1.0;
-      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-      yLabel = this.y + this.height / 2;
-    }
-    else {
-      // image still loading... just draw the label for now
-      yLabel = this.y;
-    }
-
-    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
-  };
-
-
-  Node.prototype._resizeBox = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
+    // 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.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+    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);
+      }
+    };
 
-  Node.prototype._drawBox = function (ctx) {
-    this._resizeBox(ctx);
+    // 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);
+      }
+    };
 
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    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
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+    this.svgElements = {};
+    this.setOptions(options);
+    this.groupsUsingDefaultStyles = [0];
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+    this.body.emitter.on("rangechange",function() {
+        if (me.lastStart != 0) {
+          var offset = me.body.range.start - me.lastStart;
+          var range = me.body.range.end - me.body.range.start;
+          if (me.width != 0) {
+            var rangePerPixelInv = me.width/range;
+            var xOffset = offset * rangePerPixelInv;
+            me.svg.style.left = (-me.width - xOffset) + "px";
+          }
+        }
+      });
+    this.body.emitter.on("rangechanged", function() {
+      me.lastStart = me.body.range.start;
+      me.svg.style.left = util.option.asSize(-me.width);
+      me._updateGraph.apply(me);
+    });
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    // create the HTML DOM
+    this._create();
+    this.body.emitter.emit("change");
+  }
 
-      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
-      ctx.stroke();
-    }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  LineGraph.prototype = new Component();
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  /**
+   * Create the HTML DOM for the ItemSet
+   */
+  LineGraph.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'LineGraph';
+    this.dom.frame = frame;
 
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
+    // 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);
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    // data axis
+    this.options.dataAxis.orientation = 'left';
+    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
 
+    this.options.dataAxis.orientation = 'right';
+    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
+    delete this.options.dataAxis.orientation;
 
-  Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var size = textSize.width + 2 * margin;
-      this.width = size;
-      this.height = size;
+    // legends
+    this.legendLeft = new Legend(this.body, this.options.legend, 'left');
+    this.legendRight = new Legend(this.body, this.options.legend, 'right');
 
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
-    }
+    this.show();
   };
 
-  Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+  /**
+   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
+   * @param options
+   */
+  LineGraph.prototype.setOptions = function(options) {
+    if (options) {
+      var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
+      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');
 
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+      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;
+            }
+          }
+        }
+      }
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+      if (this.yAxisLeft) {
+        if (options.dataAxis !== undefined) {
+          this.yAxisLeft.setOptions(this.options.dataAxis);
+          this.yAxisRight.setOptions(this.options.dataAxis);
+        }
+      }
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+      if (this.legendLeft) {
+        if (options.legend !== undefined) {
+          this.legendLeft.setOptions(this.options.legend);
+          this.legendRight.setOptions(this.options.legend);
+        }
+      }
 
-      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
-      ctx.stroke();
+      if (this.groups.hasOwnProperty(UNGROUPED)) {
+        this.groups[UNGROUPED].setOptions(options);
+      }
+    }
+    if (this.dom.frame) {
+      this._updateGraph();
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-
-    this._label(ctx, this.label, this.x, this.y);
   };
 
-
-  Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-      this.radius = diameter / 2;
-
-      this.width = diameter;
-      this.height = diameter;
-
-      // scaling used for clustering
-  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.radius - 0.5*diameter;
+  /**
+   * Hide the component from the DOM
+   */
+  LineGraph.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
   };
 
-  Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
+  /**
+   * 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);
+    }
+  };
 
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  /**
+   * Set items
+   * @param {vis.DataSet | null} items
+   */
+  LineGraph.prototype.setItems = function(items) {
+    var me = this,
+      ids,
+      oldItemsData = this.itemsData;
 
-      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
-      ctx.stroke();
+    // 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');
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
 
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-  Node.prototype._resizeEllipse = function (ctx) {
-    if (!this.width) {
-      var textSize = this.getTextSize(ctx);
+      // remove all drawn items
+      ids = oldItemsData.getIds();
+      this._onRemove(ids);
+    }
 
-      this.width = textSize.width * 1.5;
-      this.height = textSize.height * 2;
-      if (this.width < this.height) {
-        this.width = this.height;
-      }
-      var defaultSize = this.width;
+    if (this.itemsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.itemListeners, function (callback, event) {
+        me.itemsData.on(event, callback, id);
+      });
 
-        // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - defaultSize;
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
     }
+    this._updateUngrouped();
+    this._updateGraph();
+    this.redraw();
   };
 
-  Node.prototype._drawEllipse = function (ctx) {
-    this._resizeEllipse(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+  /**
+   * Set groups
+   * @param {vis.DataSet} groups
+   */
+  LineGraph.prototype.setGroups = function(groups) {
+    var me = this,
+      ids;
 
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
 
-      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
-      ctx.stroke();
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
+    }
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
+    }
+    else {
+      throw new TypeError('Data must be an instance of DataSet or DataView');
+    }
 
-    ctx.ellipse(this.left, this.top, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-    this._label(ctx, this.label, this.x, this.y);
-  };
+    if (this.groupsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.on(event, callback, id);
+      });
 
-  Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
+    }
+    this._onUpdate();
   };
 
-  Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
-  };
 
-  Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-  };
 
-  Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
+  LineGraph.prototype._onUpdate = function(ids) {
+    this._updateUngrouped();
+    this._updateAllGroupData();
+    this._updateGraph();
+    this.redraw();
   };
+  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]);
+    }
 
-  Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
+    this._updateGraph();
+    this.redraw();
   };
+  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
 
-  Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-      this.radius = this.baseRadiusValue;
-      var size = 2 * this.radius;
-      this.width = size;
-      this.height = size;
-
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - size;
+  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();
   };
 
-  Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    var clusterLineWidth = 2.5;
-    var selectionLineWidth = 2;
-    var radiusMultiplier = 2;
-
-    // choose draw method depending on the shape
-    switch (shape) {
-      case 'dot':           radiusMultiplier = 2; break;
-      case 'square':        radiusMultiplier = 2; break;
-      case 'triangle':      radiusMultiplier = 3; break;
-      case 'triangleDown':  radiusMultiplier = 3; break;
-      case 'star':          radiusMultiplier = 4; break;
-    }
-
-    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
-    // draw the outer border
-    if (this.clusterSize > 1) {
-      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-      ctx.lineWidth *= this.networkScaleInv;
-      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
-      ctx.stroke();
+  /**
+   * update a group object
+   *
+   * @param group
+   * @param groupId
+   * @private
+   */
+  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]);
+      }
     }
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
-    ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
-    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    if (this.label) {
-      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
+    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();
   };
 
-  Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-      var margin = 5;
-      var textSize = this.getTextSize(ctx);
-      this.width = textSize.width + 2 * margin;
-      this.height = textSize.height + 2 * margin;
-
-      // scaling used for clustering
-      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
-      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
-      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
-      this.growthIndicator = this.width - (textSize.width + 2 * margin);
-    }
-  };
-
-  Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    this._label(ctx, this.label, this.x, this.y);
-  };
-
-
-  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-      ctx.fillStyle = this.fontColor || "black";
-      ctx.textAlign = align || "center";
-      ctx.textBaseline = baseline || "middle";
+  LineGraph.prototype._updateAllGroupData = function () {
+    if (this.itemsData != null) {
+      // ~450 ms @ 500k
 
-      var lines = text.split('\n');
-      var lineCount = lines.length;
-      var fontSize = (this.fontSize + 4);
-      var yLine = y + (1 - lineCount) / 2 * fontSize;
-      if (labelUnderNode == true) {
-        yLine = y + (1 - lineCount) / (2 * fontSize);
+      var groupsContent = {};
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          groupsContent[groupId] = [];
+        }
       }
-
-      for (var i = 0; i < lineCount; i++) {
-        ctx.fillText(lines[i], x, yLine);
-        yLine += fontSize;
+      for (var itemId in this.itemsData._data) {
+        if (this.itemsData._data.hasOwnProperty(itemId)) {
+          var item = this.itemsData._data[itemId];
+          item.x = util.convert(item.x,"Date");
+          groupsContent[item.group].push(item);
+        }
       }
-    }
-  };
-
-
-  Node.prototype.getTextSize = function(ctx) {
-    if (this.label !== undefined) {
-      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-
-      var lines = this.label.split('\n'),
-          height = (this.fontSize + 4) * lines.length,
-          width = 0;
-
-      for (var i = 0, iMax = lines.length; i < iMax; i++) {
-        width = Math.max(width, ctx.measureText(lines[i]).width);
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].setItems(groupsContent[groupId]);
+        }
       }
-
-      return {"width": width, "height": height};
-    }
-    else {
-      return {"width": 0, "height": 0};
+  //    // ~4500ms @ 500k
+  //    for (var groupId in this.groups) {
+  //      if (this.groups.hasOwnProperty(groupId)) {
+  //        this.groups[groupId].setItems(this.itemsData.get({filter:
+  //            function (item) {
+  //              return (item.group == groupId);
+  //            }, type:{x:"Date"}}
+  //        ));
+  //      }
+  //    }
     }
   };
 
   /**
-   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
-   * there is a safety margin of 0.3 * width;
-   *
-   * @returns {boolean}
+   * 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
    */
-  Node.prototype.inArea = function() {
-    if (this.width !== undefined) {
-    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
-            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
-            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
-            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+  LineGraph.prototype._updateUngrouped = function() {
+    if (this.itemsData != null) {
+  //    var t0 = new Date();
+      var group = {id: UNGROUPED, content: this.options.defaultGroup};
+      this._updateGroup(group, UNGROUPED);
+      var ungroupedCounter = 0;
+      if (this.itemsData) {
+        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;
+            }
+          }
+        }
+      }
+
+      // much much slower
+  //    var datapoints = this.itemsData.get({
+  //      filter: function (item) {return item.group === undefined;},
+  //      showInternalIds:true
+  //    });
+  //    if (datapoints.length > 0) {
+  //      var updateQuery = [];
+  //      for (var i = 0; i < datapoints.length; i++) {
+  //        updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
+  //      }
+  //      this.itemsData.update(updateQuery, true);
+  //    }
+  //    var t1 = new Date();
+  //    var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
+      if (ungroupedCounter == 0) {
+        delete this.groups[UNGROUPED];
+        this.legendLeft.removeGroup(UNGROUPED);
+        this.legendRight.removeGroup(UNGROUPED);
+        this.yAxisLeft.removeGroup(UNGROUPED);
+        this.yAxisRight.removeGroup(UNGROUPED);
+      }
+  //    console.log("getting amount ungrouped",new Date() - t1);
+  //    console.log("putting in ungrouped",new Date() - t0);
     }
     else {
-      return true;
+      delete this.groups[UNGROUPED];
+      this.legendLeft.removeGroup(UNGROUPED);
+      this.legendRight.removeGroup(UNGROUPED);
+      this.yAxisLeft.removeGroup(UNGROUPED);
+      this.yAxisRight.removeGroup(UNGROUPED);
     }
-  };
 
-  /**
-   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
-   * @returns {boolean}
-   */
-  Node.prototype.inView = function() {
-    return (this.x >= this.canvasTopLeft.x    &&
-            this.x < this.canvasBottomRight.x &&
-            this.y >= this.canvasTopLeft.y    &&
-            this.y < this.canvasBottomRight.y);
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
   };
 
+
   /**
-   * This allows the zoom level of the network to influence the rendering
-   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
-   *
-   * @param scale
-   * @param canvasTopLeft
-   * @param canvasBottomRight
+   * Redraw the component, mandatory function
+   * @return {boolean} Returns true if the component is resized
    */
-  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-    this.canvasTopLeft = canvasTopLeft;
-    this.canvasBottomRight = canvasBottomRight;
-  };
+  LineGraph.prototype.redraw = function() {
+    var resized = false;
 
+    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+    if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
+      resized = true;
+    }
+    // check if this component is resized
+    resized = this._isResized() || resized;
+    // 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.width != this.lastWidth);
+    this.lastVisibleInterval = visibleInterval;
+    this.lastWidth = this.width;
 
-  /**
-   * This allows the zoom level of the network to influence the rendering
-   *
-   * @param scale
-   */
-  Node.prototype.setScale = function(scale) {
-    this.networkScaleInv = 1.0/scale;
-    this.networkScale = scale;
-  };
+    // calculate actual size and position
+    this.width = this.dom.frame.offsetWidth;
 
+    // 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.width);
+      this.svg.style.left = util.option.asSize(-this.width);
+    }
+    if (zoomed == true) {
+      this._updateGraph();
+    }
 
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
 
-  /**
-   * set the velocity at 0. Is called when this node is contained in another during clustering
-   */
-  Node.prototype.clearVelocity = function() {
-    this.vx = 0;
-    this.vy = 0;
+    return resized;
   };
 
-
   /**
-   * Basic preservation of (kinectic) energy
+   * Update and redraw the graph.
    *
-   * @param massBeforeClustering
    */
-  Node.prototype.updateVelocity = function(massBeforeClustering) {
-    var energyBefore = this.vx * this.vx * massBeforeClustering;
-    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vx = Math.sqrt(energyBefore/this.mass);
-    energyBefore = this.vy * this.vy * massBeforeClustering;
-    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
-    this.vy = Math.sqrt(energyBefore/this.mass);
-  };
+  LineGraph.prototype._updateGraph = function () {
+    // reset the svg elements
+    DOMutil.prepareElements(this.svgElements);
+  //        // very slow...
+  //        groupData = group.itemsData.get({filter:
+  //          function (item) {
+  //            return (item.x > minDate && item.x < maxDate);
+  //          }}
+  //        );
 
-  module.exports = Node;
 
+    if (this.width != 0 && this.itemsData != null) {
+      var group, groupData, preprocessedGroup, i;
+      var preprocessedGroupData = [];
+      var processedGroupData = [];
+      var groupRanges = [];
+      var changeCalled = false;
 
-/***/ },
-/* 31 */
-/***/ function(module, exports, __webpack_require__) {
+      // getting group Ids
+      var groupIds = [];
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          groupIds.push(groupId);
+        }
+      }
 
-  /**
-   * Popup is a class to create a popup window with some text
-   * @param {Element}  container     The container object.
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {String} [text]
-   * @param {Object} [style]     An object containing borderColor,
-   *                             backgroundColor, etc.
-   */
-  function Popup(container, x, y, text, style) {
-    if (container) {
-      this.container = container;
-    }
-    else {
-      this.container = document.body;
-    }
+      // 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);
 
-    // x, y and text are optional, see if a style object was passed in their place
-    if (style === undefined) {
-      if (typeof x === "object") {
-        style = x;
-        x = undefined;
-      } else if (typeof text === "object") {
-        style = text;
-        text = undefined;
-      } else {
-        // for backwards compatibility, in case clients other than Network are creating Popup directly
-        style = {
-          fontColor: 'black',
-          fontSize: 14, // px
-          fontFace: 'verdana',
-          color: {
-            border: '#666',
-            background: '#FFFFC6'
+      // 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.
+      if (groupIds.length > 0) {
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          groupData = [];
+          // optimization for sorted data
+          if (group.options.sort == true) {
+            var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
+
+            for (var j = guess; j < group.itemsData.length; j++) {
+              var item = group.itemsData[j];
+              if (item !== undefined) {
+                if (item.x > maxDate) {
+                 groupData.push(item);
+                 break;
+                }
+                else {
+                  groupData.push(item);
+                }
+              }
+            }
           }
+          else {
+            for (var j = 0; j < group.itemsData.length; j++) {
+              var item = group.itemsData[j];
+              if (item !== undefined) {
+                if (item.x > minDate && item.x < maxDate) {
+                  groupData.push(item);
+                }
+              }
+            }
+          }
+          // preprocess, split into ranges and data
+          preprocessedGroup = this._preprocessData(groupData, group);
+          groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
+          preprocessedGroupData.push(preprocessedGroup.data);
         }
-      }
-    }
 
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
+        // 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);
+        if (changeCalled == true) {
+          DOMutil.cleanupElements(this.svgElements);
+          this.body.emitter.emit("change");
+          return;
+        }
 
-    if (x !== undefined && y !== undefined ) {
-      this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-      this.setText(text);
-    }
+        // 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.push(this._convertYvalues(preprocessedGroupData[i],group))
+        }
 
-    // create the frame
-    this.frame = document.createElement("div");
-    var styleAttr = this.frame.style;
-    styleAttr.position = "absolute";
-    styleAttr.visibility = "hidden";
-    styleAttr.border = "1px solid " + style.color.border;
-    styleAttr.color = style.fontColor;
-    styleAttr.fontSize = style.fontSize + "px";
-    styleAttr.fontFamily = style.fontFace;
-    styleAttr.padding = this.padding + "px";
-    styleAttr.backgroundColor = style.color.background;
-    styleAttr.borderRadius = "3px";
-    styleAttr.MozBorderRadius = "3px";
-    styleAttr.WebkitBorderRadius = "3px";
-    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    styleAttr.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
-  }
+        // draw the groups
+        for (i = 0; i < groupIds.length; i++) {
+          group = this.groups[groupIds[i]];
+          if (group.options.style == 'line') {
+            this._drawLineGraph(processedGroupData[i], group);
+          }
+          else {
+            this._drawBarGraph (processedGroupData[i], group);
+          }
+        }
+      }
+    }
 
-  /**
-   * @param {number} x   Horizontal position of the popup window
-   * @param {number} y   Vertical position of the popup window
-   */
-  Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
+    // cleanup unused svg elements
+    DOMutil.cleanupElements(this.svgElements);
   };
 
   /**
-   * Set the text for the popup window. This can be HTML code
-   * @param {string} text
+   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
+   * @param {array} groupIds
+   * @private
    */
-  Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
-  };
+  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
+    var changeCalled = false;
+    var yAxisLeftUsed = false;
+    var yAxisRightUsed = false;
+    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
+    var orientation = 'left';
 
-  /**
-   * Show the popup window
-   * @param {boolean} show    Optional. Show or hide the window
-   */
-  Popup.prototype.show = function (show) {
-    if (show === undefined) {
-      show = true;
-    }
+    // if groups are present
+    if (groupIds.length > 0) {
+      for (var i = 0; i < groupIds.length; i++) {
+        orientation = 'left';
+        var group = this.groups[groupIds[i]];
+        if (group.options.yAxisOrientation == 'right') {
+          orientation = 'right';
+        }
 
-    if (show) {
-      var height = this.frame.clientHeight;
-      var width =  this.frame.clientWidth;
-      var maxHeight = this.frame.parentNode.clientHeight;
-      var maxWidth = this.frame.parentNode.clientWidth;
+        minVal = groupRanges[i].min;
+        maxVal = groupRanges[i].max;
 
-      var top = (this.y - height);
-      if (top + height + this.padding > maxHeight) {
-        top = maxHeight - height - this.padding;
-      }
-      if (top < this.padding) {
-        top = this.padding;
+        if (orientation == 'left') {
+          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;
+        }
       }
-
-      var left = this.x;
-      if (left + width + this.padding > maxWidth) {
-        left = maxWidth - width - this.padding;
+      if (yAxisLeftUsed == true) {
+        this.yAxisLeft.setRange(minLeft, maxLeft);
       }
-      if (left < this.padding) {
-        left = this.padding;
+      if (yAxisRightUsed == true) {
+        this.yAxisRight.setRange(minRight, maxRight);
       }
+    }
 
-      this.frame.style.left = left + "px";
-      this.frame.style.top = top + "px";
-      this.frame.style.visibility = "visible";
+    changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
+    changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
+
+    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
+      this.yAxisLeft.drawIcons = true;
+      this.yAxisRight.drawIcons = true;
     }
     else {
-      this.hide();
+      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;
+      }
+      changeCalled = this.yAxisLeft.redraw() || changeCalled;
+      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+      changeCalled = this.yAxisRight.redraw() || changeCalled;
     }
+    else {
+      changeCalled = this.yAxisRight.redraw() || changeCalled;
+    }
+    return changeCalled;
   };
 
   /**
-   * Hide the popup window
+   * 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
    */
-  Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
+  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
+    var changed = false;
+    if (axisUsed == false) {
+      if (axis.dom.frame.parentNode) {
+        axis.hide();
+        changed = true;
+      }
+    }
+    else {
+      if (!axis.dom.frame.parentNode) {
+        axis.show();
+        changed = true;
+      }
+    }
+    return changed;
   };
 
-  module.exports = Popup;
-
-
-/***/ },
-/* 32 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Parse a text source containing data in DOT language into a JSON object.
-   * The object contains two lists: one with nodes and one with edges.
-   *
-   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
-   *
-   * @param {String} data     Text containing a graph in DOT-notation
-   * @return {Object} graph   An object containing two parameters:
-   *                          {Object[]} nodes
-   *                          {Object[]} edges
+   * draw a bar graph
+   * @param datapoints
+   * @param group
    */
-  function parseDOT (data) {
-    dot = data;
-    return parseGraph();
-  }
-
-  // token types enumeration
-  var TOKENTYPE = {
-    NULL : 0,
-    DELIMITER : 1,
-    IDENTIFIER: 2,
-    UNKNOWN : 3
-  };
+  LineGraph.prototype._drawBarGraph = function (dataset, group) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var coreDistance;
+        var minWidth = 0.1 * group.options.barChart.width;
+        var offset = 0;
+        var width = group.options.barChart.width;
 
-  // map with all delimiters
-  var DELIMITERS = {
-    '{': true,
-    '}': true,
-    '[': true,
-    ']': true,
-    ';': true,
-    '=': true,
-    ',': true,
+        if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
+        else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
 
-    '->': true,
-    '--': true
-  };
+        for (var i = 0; i < dataset.length; i++) {
+          // dynammically downscale the width so there is no overlap up to 1/10th the original width
+          if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
+          if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
+          if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
 
-  var dot = '';                   // current dot file
-  var index = 0;                  // current index in dot file
-  var c = '';                     // current token character in expr
-  var token = '';                 // current token
-  var tokenType = TOKENTYPE.NULL; // type of the token
+          DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
+        }
 
-  /**
-   * Get the first character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
-   */
-  function first() {
-    index = 0;
-    c = dot.charAt(0);
-  }
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
+        }
+      }
+    }
+  };
 
-  /**
-   * Get the next character from the dot file.
-   * The character is stored into the char c. If the end of the dot file is
-   * reached, the function puts an empty string in c.
-   */
-  function next() {
-    index++;
-    c = dot.charAt(index);
-  }
 
   /**
-   * Preview the next character from the dot file.
-   * @return {String} cNext
+   * draw a line graph
+   *
+   * @param datapoints
+   * @param group
    */
-  function nextPreview() {
-    return dot.charAt(index + 1);
-  }
+  LineGraph.prototype._drawLineGraph = function (dataset, group) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var path, d;
+        var svgHeight = Number(this.svg.style.height.replace("px",""));
+        path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
+        path.setAttributeNS(null, "class", group.className);
 
-  /**
-   * Test whether given character is alphabetic or numeric
-   * @param {String} c
-   * @return {Boolean} isAlphaNumeric
-   */
-  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
-  function isAlphaNumeric(c) {
-    return regexAlphaNumeric.test(c);
-  }
+        // construct path from dataset
+        if (group.options.catmullRom.enabled == true) {
+          d = this._catmullRom(dataset, group);
+        }
+        else {
+          d = this._linear(dataset);
+        }
 
-  /**
-   * Merge all properties of object b into object b
-   * @param {Object} a
-   * @param {Object} b
-   * @return {Object} a
-   */
-  function merge (a, b) {
-    if (!a) {
-      a = {};
-    }
+        // append with points for fill and finalize the path
+        if (group.options.shaded.enabled == true) {
+          var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.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");
+          fillPath.setAttributeNS(null, "d", dFill);
+        }
+        // copy properties to path for drawing.
+        path.setAttributeNS(null, "d", "M" + d);
 
-    if (b) {
-      for (var name in b) {
-        if (b.hasOwnProperty(name)) {
-          a[name] = b[name];
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          this._drawPoints(dataset, group, this.svgElements, this.svg);
         }
       }
     }
-    return a;
-  }
+  };
 
   /**
-   * Set a value in an object, where the provided parameter name can be a
-   * path with nested parameters. For example:
-   *
-   *     var obj = {a: 2};
-   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   * draw the data points
    *
-   * @param {Object} obj
-   * @param {String} path  A parameter name or dot-separated parameter path,
-   *                      like "color.highlight.border".
-   * @param {*} value
+   * @param dataset
+   * @param JSONcontainer
+   * @param svg
+   * @param group
    */
-  function setValue(obj, path, value) {
-    var keys = path.split('.');
-    var o = obj;
-    while (keys.length) {
-      var key = keys.shift();
-      if (keys.length) {
-        // this isn't the end point
-        if (!o[key]) {
-          o[key] = {};
-        }
-        o = o[key];
-      }
-      else {
-        // this is the end point
-        o[key] = value;
-      }
+  LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
+    if (offset === undefined) {offset = 0;}
+    for (var i = 0; i < dataset.length; i++) {
+      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
     }
-  }
+  };
+
+
 
   /**
-   * Add a node to a graph object. If there is already a node with
-   * the same id, their attributes will be merged.
-   * @param {Object} graph
-   * @param {Object} node
+   * 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
    */
-  function addNode(graph, node) {
-    var i, len;
-    var current = null;
+  LineGraph.prototype._preprocessData = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var toScreen = this.body.util.toScreen;
 
-    // find root graph (in case of subgraph)
-    var graphs = [graph]; // list with all graphs from current graph to root graph
-    var root = graph;
-    while (root.parent) {
-      graphs.push(root.parent);
-      root = root.parent;
-    }
+    var increment = 1;
+    var amountOfPoints = datapoints.length;
 
-    // find existing node (at root level) by its id
-    if (root.nodes) {
-      for (i = 0, len = root.nodes.length; i < len; i++) {
-        if (node.id === root.nodes[i].id) {
-          current = root.nodes[i];
-          break;
-        }
-      }
-    }
+    var yMin = datapoints[0].y;
+    var yMax = datapoints[0].y;
 
-    if (!current) {
-      // this is a new node
-      current = {
-        id: node.id
-      };
-      if (graph.node) {
-        // clone default attributes
-        current.attr = merge(current.attr, graph.node);
-      }
+    // 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.
+    if (group.options.sampling == true) {
+      var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
+      var pointsPerPixel = amountOfPoints/xDistance;
+      increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
     }
 
-    // add node to this (sub)graph and all its parent graphs
-    for (i = graphs.length - 1; i >= 0; i--) {
-      var g = graphs[i];
-
-      if (!g.nodes) {
-        g.nodes = [];
-      }
-      if (g.nodes.indexOf(current) == -1) {
-        g.nodes.push(current);
-      }
+    for (var i = 0; i < amountOfPoints; i += increment) {
+      xValue = toScreen(datapoints[i].x) + this.width - 1;
+      yValue = datapoints[i].y;
+      extractedData.push({x: xValue, y: yValue});
+      yMin = yMin > yValue ? yValue : yMin;
+      yMax = yMax < yValue ? yValue : yMax;
     }
 
-    // merge attributes
-    if (node.attr) {
-      current.attr = merge(current.attr, node.attr);
-    }
-  }
+    // extractedData.sort(function (a,b) {return a.x - b.x;});
+    return {min: yMin, max: yMax, data: extractedData};
+  };
 
   /**
-   * Add an edge to a graph object
-   * @param {Object} graph
-   * @param {Object} edge
+   * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
+   * util function toScreen to get the x coordinate from the timestamp.
+   *
+   * @param datapoints
+   * @param options
+   * @returns {Array}
+   * @private
    */
-  function addEdge(graph, edge) {
-    if (!graph.edges) {
-      graph.edges = [];
+  LineGraph.prototype._convertYvalues = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var axis = this.yAxisLeft;
+    var svgHeight = Number(this.svg.style.height.replace("px",""));
+
+    if (group.options.yAxisOrientation == 'right') {
+      axis = this.yAxisRight;
     }
-    graph.edges.push(edge);
-    if (graph.edge) {
-      var attr = merge({}, graph.edge);     // clone default attributes
-      edge.attr = merge(attr, edge.attr); // merge attributes
+
+    for (var i = 0; i < datapoints.length; i++) {
+      xValue = datapoints[i].x;
+      yValue = Math.round(axis.convertValue(datapoints[i].y));
+      extractedData.push({x: xValue, y: yValue});
     }
-  }
 
-  /**
-   * Create an edge to a graph object
-   * @param {Object} graph
-   * @param {String | Number | Object} from
-   * @param {String | Number | Object} to
-   * @param {String} type
-   * @param {Object | null} attr
-   * @return {Object} edge
-   */
-  function createEdge(graph, from, to, type, attr) {
-    var edge = {
-      from: from,
-      to: to,
-      type: type
-    };
+    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
 
-    if (graph.edge) {
-      edge.attr = merge({}, graph.edge);  // clone default attributes
-    }
-    edge.attr = merge(edge.attr || {}, attr); // merge attributes
+    // extractedData.sort(function (a,b) {return a.x - b.x;});
+    return extractedData;
+  };
 
-    return edge;
-  }
 
   /**
-   * Get next token in the current dot file.
-   * The token and token type are available as token and tokenType
+   * 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
    */
-  function getToken() {
-    tokenType = TOKENTYPE.NULL;
-    token = '';
+  LineGraph.prototype._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++) {
 
-    // skip over whitespaces
-    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-      next();
-    }
+      p0 = (i == 0) ? data[0] : data[i-1];
+      p1 = data[i];
+      p2 = data[i+1];
+      p3 = (i + 2 < length) ? data[i+2] : p2;
 
-    do {
-      var isComment = false;
 
-      // skip comment
-      if (c == '#') {
-        // find the previous non-space character
-        var i = index - 1;
-        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
-          i--;
-        }
-        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
-          // the # is at the start of a line, this is indeed a line comment
-          while (c != '' && c != '\n') {
-            next();
-          }
-          isComment = true;
-        }
-      }
-      if (c == '/' && nextPreview() == '/') {
-        // skip line comment
-        while (c != '' && c != '\n') {
-          next();
-        }
-        isComment = true;
-      }
-      if (c == '/' && nextPreview() == '*') {
-        // skip block comment
-        while (c != '') {
-          if (c == '*' && nextPreview() == '/') {
-            // end of block comment found. skip these last two characters
-            next();
-            next();
-            break;
-          }
-          else {
-            next();
-          }
-        }
-        isComment = true;
-      }
+      // 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
 
-      // skip over whitespaces
-      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
-        next();
-      }
-    }
-    while (isComment);
+      //    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 };
 
-    // check for end of dot file
-    if (c == '') {
-      // token is still empty
-      tokenType = TOKENTYPE.DELIMITER;
-      return;
+      d += "C" +
+        bp1.x + "," +
+        bp1.y + " " +
+        bp2.x + "," +
+        bp2.y + " " +
+        p2.x + "," +
+        p2.y + " ";
     }
 
-    // check for delimiters consisting of 2 characters
-    var c2 = c + nextPreview();
-    if (DELIMITERS[c2]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c2;
-      next();
-      next();
-      return;
-    }
+    return d;
+  };
 
-    // check for delimiters consisting of 1 character
-    if (DELIMITERS[c]) {
-      tokenType = TOKENTYPE.DELIMITER;
-      token = c;
-      next();
-      return;
+  /**
+   * 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
+   * @returns {string}
+   * @private
+   */
+  LineGraph.prototype._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++) {
 
-    // check for an identifier (number or string)
-    // TODO: more precise parsing of numbers/strings (and the port separator ':')
-    if (isAlphaNumeric(c) || c == '-') {
-      token += c;
-      next();
+        p0 = (i == 0) ? data[0] : data[i-1];
+        p1 = data[i];
+        p2 = data[i+1];
+        p3 = (i + 2 < length) ? data[i+2] : p2;
 
-      while (isAlphaNumeric(c)) {
-        token += c;
-        next();
-      }
-      if (token == 'false') {
-        token = false;   // convert to boolean
-      }
-      else if (token == 'true') {
-        token = true;   // convert to boolean
-      }
-      else if (!isNaN(Number(token))) {
-        token = Number(token); // convert to number
-      }
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+        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));
 
-    // check for a string enclosed by double quotes
-    if (c == '"') {
-      next();
-      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
-        token += c;
-        if (c == '"') { // skip the escape character
-          next();
-        }
-        next();
-      }
-      if (c != '"') {
-        throw newSyntaxError('End of string " expected');
-      }
-      next();
-      tokenType = TOKENTYPE.IDENTIFIER;
-      return;
-    }
+        // 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          ]
 
-    // something unknown is found, wrong characters, a syntax error
-    tokenType = TOKENTYPE.UNKNOWN;
-    while (c != '') {
-      token += c;
-      next();
-    }
-    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
-  }
+        // [   0             1            0          0          ]
+        // [   -d2pow2a/N    A/N          d1pow2a/N  0          ]
+        // [   0             d3pow2a/M    B/M        -d2pow2a/M ]
+        // [   0             0            1          0          ]
 
-  /**
-   * Parse a graph.
-   * @returns {Object} graph
-   */
-  function parseGraph() {
-    var graph = {};
+        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);
 
-    first();
-    getToken();
+        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;}
 
-    // optional strict keyword
-    if (token == 'strict') {
-      graph.strict = true;
-      getToken();
-    }
+        bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
+          y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
 
-    // graph or digraph keyword
-    if (token == 'graph' || token == 'digraph') {
-      graph.type = token;
-      getToken();
-    }
+        bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
+          y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
 
-    // optional graph id
-    if (tokenType == TOKENTYPE.IDENTIFIER) {
-      graph.id = token;
-      getToken();
-    }
+        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 + " ";
+      }
 
-    // open angle bracket
-    if (token != '{') {
-      throw newSyntaxError('Angle bracket { expected');
+      return d;
     }
-    getToken();
-
-    // statements
-    parseStatements(graph);
+  };
 
-    // close angle bracket
-    if (token != '}') {
-      throw newSyntaxError('Angle bracket } expected');
+  /**
+   * this generates the SVG path for a linear drawing between datapoints.
+   * @param data
+   * @returns {string}
+   * @private
+   */
+  LineGraph.prototype._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;
+      }
     }
-    getToken();
+    return d;
+  };
 
-    // end of file
-    if (token !== '') {
-      throw newSyntaxError('End of file expected');
-    }
-    getToken();
+  module.exports = LineGraph;
 
-    // remove temporary default properties
-    delete graph.node;
-    delete graph.edge;
-    delete graph.graph;
 
-    return graph;
-  }
+/***/ },
+/* 33 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Parse a list with statements.
-   * @param {Object} graph
-   */
-  function parseStatements (graph) {
-    while (token !== '' && token != '}') {
-      parseStatement(graph);
-      if (token == ';') {
-        getToken();
-      }
-    }
-  }
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+  var Component = __webpack_require__(19);
+  var DataStep = __webpack_require__(34);
 
   /**
-   * Parse a single statement. Can be a an attribute statement, node
-   * statement, a series of node statements and edge statements, or a
-   * parameter.
-   * @param {Object} graph
+   * A horizontal time axis
+   * @param {Object} [options]        See DataAxis.setOptions for the available
+   *                                  options.
+   * @constructor DataAxis
+   * @extends Component
+   * @param body
    */
-  function parseStatement(graph) {
-    // parse subgraph
-    var subgraph = parseSubgraph(graph);
-    if (subgraph) {
-      // edge statements
-      parseEdge(graph, subgraph);
+  function DataAxis (body, options, svg) {
+    this.id = util.randomUUID();
+    this.body = body;
 
-      return;
-    }
+    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
+    };
 
-    // parse an attribute statement
-    var attr = parseAttributeStatement(graph);
-    if (attr) {
-      return;
-    }
+    this.linegraphSVG = svg;
+    this.props = {};
+    this.DOMelements = { // dynamic elements
+      lines: {},
+      labels: {}
+    };
 
-    // parse node
-    if (tokenType != TOKENTYPE.IDENTIFIER) {
-      throw newSyntaxError('Identifier expected');
-    }
-    var id = token; // id can be a string or a number
-    getToken();
+    this.dom = {};
 
-    if (token == '=') {
-      // id statement
-      getToken();
-      if (tokenType != TOKENTYPE.IDENTIFIER) {
-        throw newSyntaxError('Identifier expected');
-      }
-      graph[id] = token;
-      getToken();
-      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
-    }
-    else {
-      parseNodeStatement(graph, id);
-    }
+    this.range = {start:0, end:0};
+
+    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.stepPixels = 25;
+    this.stepPixelsForced = 25;
+    this.lineOffset = 0;
+    this.master = true;
+    this.svgElements = {};
+
+
+    this.groups = {};
+    this.amountOfGroups = 0;
+
+    // create the HTML DOM
+    this._create();
   }
 
-  /**
-   * Parse a subgraph
-   * @param {Object} graph    parent graph object
-   * @return {Object | null} subgraph
-   */
-  function parseSubgraph (graph) {
-    var subgraph = null;
+  DataAxis.prototype = new Component();
 
-    // optional subgraph keyword
-    if (token == 'subgraph') {
-      subgraph = {};
-      subgraph.type = 'subgraph';
-      getToken();
 
-      // optional graph id
-      if (tokenType == TOKENTYPE.IDENTIFIER) {
-        subgraph.id = token;
-        getToken();
-      }
+
+  DataAxis.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
     }
+    this.amountOfGroups += 1;
+  };
 
-    // open angle bracket
-    if (token == '{') {
-      getToken();
+  DataAxis.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
+  };
 
-      if (!subgraph) {
-        subgraph = {};
-      }
-      subgraph.parent = graph;
-      subgraph.node = graph.node;
-      subgraph.edge = graph.edge;
-      subgraph.graph = graph.graph;
+  DataAxis.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
+  };
 
-      // statements
-      parseStatements(subgraph);
 
-      // close angle bracket
-      if (token != '}') {
-        throw newSyntaxError('Angle bracket } expected');
+  DataAxis.prototype.setOptions = function (options) {
+    if (options) {
+      var redraw = false;
+      if (this.options.orientation != options.orientation && options.orientation !== undefined) {
+        redraw = true;
       }
-      getToken();
+      var fields = [
+        'orientation',
+        'showMinorLabels',
+        'showMajorLabels',
+        'icons',
+        'majorLinesOffset',
+        'minorLinesOffset',
+        'labelOffsetX',
+        'labelOffsetY',
+        'iconWidth',
+        'width',
+        'visible'];
+      util.selectiveExtend(fields, this.options, options);
 
-      // remove temporary default properties
-      delete subgraph.node;
-      delete subgraph.edge;
-      delete subgraph.graph;
-      delete subgraph.parent;
+      this.minWidth = Number(('' + this.options.width).replace("px",""));
 
-      // register at the parent graph
-      if (!graph.subgraphs) {
-        graph.subgraphs = [];
+      if (redraw == true && this.dom.frame) {
+        this.hide();
+        this.show();
       }
-      graph.subgraphs.push(subgraph);
     }
+  };
 
-    return subgraph;
-  }
 
   /**
-   * parse an attribute statement like "node [shape=circle fontSize=16]".
-   * Available keywords are 'node', 'edge', 'graph'.
-   * The previous list with default attributes will be replaced
-   * @param {Object} graph
-   * @returns {String | null} keyword Returns the name of the parsed attribute
-   *                                  (node, edge, graph), or null if nothing
-   *                                  is parsed.
+   * Create the HTML DOM for the DataAxis
    */
-  function parseAttributeStatement (graph) {
-    // attribute statements
-    if (token == 'node') {
-      getToken();
+  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;
 
-      // node attributes
-      graph.node = parseAttributeList();
-      return 'node';
-    }
-    else if (token == 'edge') {
-      getToken();
+    this.dom.lineContainer = document.createElement('div');
+    this.dom.lineContainer.style.width = '100%';
+    this.dom.lineContainer.style.height = this.height;
 
-      // edge attributes
-      graph.edge = parseAttributeList();
-      return 'edge';
-    }
-    else if (token == 'graph') {
-      getToken();
+    // 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);
+  };
 
-      // graph attributes
-      graph.graph = parseAttributeList();
-      return 'graph';
-    }
+  DataAxis.prototype._redrawGroupIcons = function () {
+    DOMutil.prepareElements(this.svgElements);
 
-    return null;
-  }
+    var x;
+    var iconWidth = this.options.iconWidth;
+    var iconHeight = 15;
+    var iconOffset = 4;
+    var y = iconOffset + 0.5 * iconHeight;
 
-  /**
-   * parse a node statement
-   * @param {Object} graph
-   * @param {String | Number} id
-   */
-  function parseNodeStatement(graph, id) {
-    // node statement
-    var node = {
-      id: id
-    };
-    var attr = parseAttributeList();
-    if (attr) {
-      node.attr = attr;
+    if (this.options.orientation == 'left') {
+      x = iconOffset;
+    }
+    else {
+      x = this.width - iconWidth - iconOffset;
     }
-    addNode(graph, node);
 
-    // edge statements
-    parseEdge(graph, id);
-  }
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+        y += iconHeight + iconOffset;
+      }
+    }
+
+    DOMutil.cleanupElements(this.svgElements);
+  };
 
   /**
-   * Parse an edge or a series of edges
-   * @param {Object} graph
-   * @param {String | Number} from        Id of the from node
+   * Create the HTML DOM for the DataAxis
    */
-  function parseEdge(graph, from) {
-    while (token == '->' || token == '--') {
-      var to;
-      var type = token;
-      getToken();
-
-      var subgraph = parseSubgraph(graph);
-      if (subgraph) {
-        to = subgraph;
+  DataAxis.prototype.show = function() {
+    if (!this.dom.frame.parentNode) {
+      if (this.options.orientation == 'left') {
+        this.body.dom.left.appendChild(this.dom.frame);
       }
       else {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Identifier or subgraph expected');
-        }
-        to = token;
-        addNode(graph, {
-          id: to
-        });
-        getToken();
+        this.body.dom.right.appendChild(this.dom.frame);
       }
+    }
 
-      // parse edge attributes
-      var attr = parseAttributeList();
+    if (!this.dom.lineContainer.parentNode) {
+      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
+    }
+  };
 
-      // create edge
-      var edge = createEdge(graph, from, to, type, attr);
-      addEdge(graph, edge);
+  /**
+   * Create the HTML DOM for the DataAxis
+   */
+  DataAxis.prototype.hide = function() {
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
 
-      from = to;
+    if (this.dom.lineContainer.parentNode) {
+      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
     }
-  }
+  };
 
   /**
-   * Parse a set with attributes,
-   * for example [label="1.000", shape=solid]
-   * @return {Object | null} attr
+   * Set a range (start and end)
+   * @param end
+   * @param start
+   * @param end
    */
-  function parseAttributeList() {
-    var attr = null;
+  DataAxis.prototype.setRange = function (start, end) {
+    this.range.start = start;
+    this.range.end = end;
+  };
 
-    while (token == '[') {
-      getToken();
-      attr = {};
-      while (token !== '' && token != ']') {
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute name expected');
-        }
-        var name = token;
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  DataAxis.prototype.redraw = function () {
+    var changeCalled = false;
+    if (this.amountOfGroups == 0) {
+      this.hide();
+    }
+    else {
+      this.show();
+      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
+      // svg offsetheight did not work in firefox and explorer...
 
-        getToken();
-        if (token != '=') {
-          throw newSyntaxError('Equal sign = expected');
-        }
-        getToken();
+      this.dom.lineContainer.style.height = this.height + 'px';
+      this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
 
-        if (tokenType != TOKENTYPE.IDENTIFIER) {
-          throw newSyntaxError('Attribute value expected');
-        }
-        var value = token;
-        setValue(attr, name, value); // name can be a path
+      var props = this.props;
+      var frame = this.dom.frame;
 
-        getToken();
-        if (token ==',') {
-          getToken();
-        }
-      }
+      // update classname
+      frame.className = 'dataaxis';
 
-      if (token != ']') {
-        throw newSyntaxError('Bracket ] expected');
-      }
-      getToken();
-    }
+      // calculate character width and height
+      this._calculateCharSize();
 
-    return attr;
-  }
+      var orientation = this.options.orientation;
+      var showMinorLabels = this.options.showMinorLabels;
+      var showMajorLabels = this.options.showMajorLabels;
 
-  /**
-   * Create a syntax error with extra information on current token and index.
-   * @param {String} message
-   * @returns {SyntaxError} err
-   */
-  function newSyntaxError(message) {
-    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
-  }
+      // determine the width and height of the elemens for the axis
+      props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+      props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
 
-  /**
-   * Chop off text after a maximum length
-   * @param {String} text
-   * @param {Number} maxLength
-   * @returns {String}
-   */
-  function chop (text, maxLength) {
-    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
-  }
+      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;
 
-  /**
-   * Execute a function fn for each pair of elements in two arrays
-   * @param {Array | *} array1
-   * @param {Array | *} array2
-   * @param {function} fn
-   */
-  function forEach2(array1, array2, fn) {
-    if (array1 instanceof Array) {
-      array1.forEach(function (elem1) {
-        if (array2 instanceof Array) {
-          array2.forEach(function (elem2)  {
-            fn(elem1, elem2);
-          });
-        }
-        else {
-          fn(elem1, array2);
-        }
-      });
-    }
-    else {
-      if (array2 instanceof Array) {
-        array2.forEach(function (elem2)  {
-          fn(array1, elem2);
-        });
+      //  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";
       }
-      else {
-        fn(array1, array2);
+      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";
+      }
+      changeCalled = this._redrawLabels();
+      if (this.options.icons == true) {
+        this._redrawGroupIcons();
       }
     }
-  }
+    return changeCalled;
+  };
 
   /**
-   * Convert a string containing a graph in DOT language into a map containing
-   * with nodes and edges in the format of graph.
-   * @param {String} data         Text containing a graph in DOT-notation
-   * @return {Object} graphData
+   * Repaint major and minor text labels and vertical grid lines
+   * @private
    */
-  function DOTToGraph (data) {
-    // parse the DOT file
-    var dotData = parseDOT(data);
-    var graphData = {
-      nodes: [],
-      edges: [],
-      options: {}
-    };
+  DataAxis.prototype._redrawLabels = function () {
+    DOMutil.prepareElements(this.DOMelements);
 
-    // copy the nodes
-    if (dotData.nodes) {
-      dotData.nodes.forEach(function (dotNode) {
-        var graphNode = {
-          id: dotNode.id,
-          label: String(dotNode.label || dotNode.id)
-        };
-        merge(graphNode, dotNode.attr);
-        if (graphNode.image) {
-          graphNode.shape = 'image';
-        }
-        graphData.nodes.push(graphNode);
-      });
-    }
+    var orientation = this.options['orientation'];
 
-    // copy the edges
-    if (dotData.edges) {
-      /**
-       * Convert an edge in DOT format to an edge with VisGraph format
-       * @param {Object} dotEdge
-       * @returns {Object} graphEdge
-       */
-      function convertEdge(dotEdge) {
-        var graphEdge = {
-          from: dotEdge.from,
-          to: dotEdge.to
-        };
-        merge(graphEdge, dotEdge.attr);
-        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
-        return graphEdge;
+    // 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.step = step;
+    step.first();
+
+    // get the distance in pixels for a step
+    var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
+    this.stepPixels = stepPixels;
+
+    var amountOfSteps = this.height / stepPixels;
+    var stepDifference = 0;
+
+    if (this.master == false) {
+      stepPixels = this.stepPixelsForced;
+      stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
+      for (var i = 0; i < 0.5 * stepDifference; i++) {
+        step.previous();
       }
+      amountOfSteps = this.height / stepPixels;
+    }
 
-      dotData.edges.forEach(function (dotEdge) {
-        var from, to;
-        if (dotEdge.from instanceof Object) {
-          from = dotEdge.from.nodes;
-        }
-        else {
-          from = {
-            id: dotEdge.from
-          }
-        }
 
-        if (dotEdge.to instanceof Object) {
-          to = dotEdge.to.nodes;
-        }
-        else {
-          to = {
-            id: dotEdge.to
-          }
-        }
+    this.valueAtZero = step.marginEnd;
+    var marginStartPos = 0;
 
-        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
-          dotEdge.from.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
+    // do not draw the first label
+    var max = 1;
+    step.next();
 
-        forEach2(from, to, function (from, to) {
-          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
-          var graphEdge = convertEdge(subEdge);
-          graphData.edges.push(graphEdge);
-        });
+    this.maxLabelSize = 0;
+    var y = 0;
+    while (max < Math.round(amountOfSteps)) {
 
-        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
-          dotEdge.to.edges.forEach(function (subEdge) {
-            var graphEdge = convertEdge(subEdge);
-            graphData.edges.push(graphEdge);
-          });
-        }
-      });
-    }
+      y = Math.round(max * stepPixels);
+      marginStartPos = max * stepPixels;
+      var isMajor = step.isMajor();
 
-    // copy the options
-    if (dotData.attr) {
-      graphData.options = dotData.attr;
-    }
+      if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
+        this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
+      }
 
-    return graphData;
-  }
+      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
+          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
 
-  // exports
-  exports.parseDOT = parseDOT;
-  exports.DOTToGraph = DOTToGraph;
+        if (y >= 0) {
+          this._redrawLabel(y - 2, step.getCurrent(), 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);
+      }
 
+      step.next();
+      max++;
+    }
 
-/***/ },
-/* 33 */
-/***/ function(module, exports, __webpack_require__) {
+    this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
 
-  /**
-   * @prototype Point3d
-   * @param {Number} [x]
-   * @param {Number} [y]
-   * @param {Number} [z]
-   */
-  function Point3d(x, y, z) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
-    this.z = z !== undefined ? z : 0;
+    var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
+    // this will resize the yAxis to accomodate 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);
+      this.redraw();
+      return 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);
+      this.redraw();
+      return true;
+    }
+    else {
+      DOMutil.cleanupElements(this.DOMelements);
+      return false;
+    }
   };
 
   /**
-   * Subtract the two provided points, returns a-b
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} a-b
+   * Create a label for the axis at position x
+   * @private
+   * @param y
+   * @param text
+   * @param orientation
+   * @param className
+   * @param characterHeight
    */
-  Point3d.subtract = function(a, b) {
-    var sub = new Point3d();
-    sub.x = a.x - b.x;
-    sub.y = a.y - b.y;
-    sub.z = a.z - b.z;
-    return sub;
-  };
+  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
+    // reuse redundant label
+    var label = DOMutil.getDOMElement('div',this.DOMelements, this.dom.frame); //this.dom.redundant.labels.shift();
+    label.className = className;
+    label.innerHTML = text;
 
-  /**
-   * Add the two provided points, returns a+b
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} a+b
-   */
-  Point3d.add = function(a, b) {
-    var sum = new Point3d();
-    sum.x = a.x + b.x;
-    sum.y = a.y + b.y;
-    sum.z = a.z + b.z;
-    return sum;
-  };
+    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";
+    }
 
-  /**
-   * Calculate the average of two 3d points
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} The average, (a+b)/2
-   */
-  Point3d.avg = function(a, b) {
-    return new Point3d(
-            (a.x + b.x) / 2,
-            (a.y + b.y) / 2,
-            (a.z + b.z) / 2
-    );
+    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;
+    }
   };
 
   /**
-   * Calculate the cross product of the two provided points, returns axb
-   * Documentation: http://en.wikipedia.org/wiki/Cross_product
-   * @param {Point3d} a
-   * @param {Point3d} b
-   * @return {Point3d} cross product axb
+   * Create a minor line for the axis at position y
+   * @param y
+   * @param orientation
+   * @param className
+   * @param offset
+   * @param width
    */
-  Point3d.crossProduct = function(a, b) {
-    var crossproduct = new Point3d();
+  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
+    if (this.master == true) {
+      var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
+      line.className = className;
+      line.innerHTML = '';
 
-    crossproduct.x = a.y * b.z - a.z * b.y;
-    crossproduct.y = a.z * b.x - a.x * b.z;
-    crossproduct.z = a.x * b.y - a.y * b.x;
+      if (orientation == 'left') {
+        line.style.left = (this.width - offset) + 'px';
+      }
+      else {
+        line.style.right = (this.width - offset) + 'px';
+      }
 
-    return crossproduct;
+      line.style.width = width + 'px';
+      line.style.top = y + 'px';
+    }
+  };
+
+
+  DataAxis.prototype.convertValue = function (value) {
+    var invertedValue = this.valueAtZero - value;
+    var convertedValue = invertedValue * this.conversionFactor;
+    return convertedValue; // the -2 is to compensate for the borders
   };
 
 
   /**
-   * Rtrieve the length of the vector (or the distance from this point to the origin
-   * @return {Number}  length
+   * 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
    */
-  Point3d.prototype.length = function() {
-    return Math.sqrt(
-            this.x * this.x +
-            this.y * this.y +
-            this.z * this.z
-    );
-  };
+  DataAxis.prototype._calculateCharSize = function () {
+    // determine the char width and height on the minor axis
+    if (!('minorCharHeight' in this.props)) {
 
-  module.exports = Point3d;
+      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;
 
-/***/ },
-/* 34 */
-/***/ function(module, exports, __webpack_require__) {
+      this.dom.frame.removeChild(measureCharMinor);
+    }
+
+    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);
+
+      this.props.majorCharHeight = measureCharMajor.clientHeight;
+      this.props.majorCharWidth = measureCharMajor.clientWidth;
+
+      this.dom.frame.removeChild(measureCharMajor);
+    }
+  };
 
   /**
-   * @prototype Point2d
-   * @param {Number} [x]
-   * @param {Number} [y]
+   * 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
    */
-  Point2d = function (x, y) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
+  DataAxis.prototype.snap = function(date) {
+    return this.step.snap(date);
   };
 
-  module.exports = Point2d;
+  module.exports = DataAxis;
 
 
 /***/ },
-/* 35 */
+/* 34 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var DataView = __webpack_require__(4);
-
   /**
-   * @class Filter
+   * @constructor  DataStep
+   * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
+   * end data point. The class itself determines the best scale (step size) based on the
+   * provided start Date, end Date, and minimumStep.
    *
-   * @param {DataSet} data The google data table
-   * @param {Number}  column             The index of the column to be filtered
-   * @param {Graph} graph           The graph
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   *
+   * Alternatively, you can set a scale by hand.
+   * After creation, you can initialize the class by executing first(). Then you
+   * can iterate from the start date to the end date via next(). You can check if
+   * the end date is reached with the function hasNext(). After each step, you can
+   * retrieve the current date via getCurrent().
+   * The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
+   * days, to years.
+   *
+   * Version: 1.2
+   *
+   * @param {Date} [start]         The start date, for example new Date(2010, 9, 21)
+   *                               or new Date(2010, 9, 21, 23, 45, 00)
+   * @param {Date} [end]           The end date
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  function Filter (data, column, graph) {
-    this.data = data;
-    this.column = column;
-    this.graph = graph; // the parent graph
-
-    this.index = undefined;
-    this.value = undefined;
-
-    // read all distinct values and select the first one
-    this.values = graph.getDistinctValues(data.get(), this.column);
+  function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
+    // variables
+    this.current = 0;
 
-    // sort both numeric and string values correctly
-    this.values.sort(function (a, b) {
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
+    this.autoScale = true;
+    this.stepIndex = 0;
+    this.step = 1;
+    this.scale = 1;
 
-    if (this.values.length > 0) {
-      this.selectValue(0);
-    }
+    this.marginStart;
+    this.marginEnd;
 
-    // create an array with the filtered datapoints. this will be loaded afterwards
-    this.dataPoints = [];
+    this.majorSteps = [1,     2,    5,  10];
+    this.minorSteps = [0.25,  0.5,  1,  2];
 
-    this.loaded = false;
-    this.onLoadCallback = undefined;
+    this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
+  }
 
-    if (graph.animationPreload) {
-      this.loaded = false;
-      this.loadInBackground();
-    }
-    else {
-      this.loaded = true;
-    }
-  };
 
 
   /**
-   * Return the label
-   * @return {string} label
+   * Set a new range
+   * If minimumStep is provided, the step size is chosen as close as possible
+   * to the minimumStep but larger than minimumStep. If minimumStep is not
+   * provided, the scale is set to 1 DAY.
+   * The minimumStep should correspond with the onscreen size of about 6 characters
+   * @param {Number} [start]      The start date and time.
+   * @param {Number} [end]        The end date and time.
+   * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
    */
-  Filter.prototype.isLoaded = function() {
-    return this.loaded;
-  };
+  DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
+    this._start = start;
+    this._end = end;
 
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
+    }
+    this.setFirst();
+  };
 
   /**
-   * Return the loaded progress
-   * @return {Number} percentage between 0 and 100
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
    */
-  Filter.prototype.getLoadedProgress = function() {
-    var len = this.values.length;
+  DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
+    // round to floor
+    var size = this._end - this._start;
+    var safeSize = size * 1.1;
+    var minimumStepValue = minimumStep * (safeSize / containerHeight);
+    var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
 
-    var i = 0;
-    while (this.dataPoints[i]) {
-      i++;
+    var minorStepIdx = -1;
+    var magnitudefactor = Math.pow(10,orderOfMagnitude);
+
+    var start = 0;
+    if (orderOfMagnitude < 0) {
+      start = orderOfMagnitude;
     }
 
-    return Math.round(i / len * 100);
+    var solutionFound = false;
+    for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
+      magnitudefactor = Math.pow(10,i);
+      for (var j = 0; j < this.minorSteps.length; j++) {
+        var stepSize = magnitudefactor * this.minorSteps[j];
+        if (stepSize >= minimumStepValue) {
+          solutionFound = true;
+          minorStepIdx = j;
+          break;
+        }
+      }
+      if (solutionFound == true) {
+        break;
+      }
+    }
+    this.stepIndex = minorStepIdx;
+    this.scale = magnitudefactor;
+    this.step = magnitudefactor * this.minorSteps[minorStepIdx];
   };
 
 
   /**
-   * Return the label
-   * @return {string} label
+   * Set the range iterator to the start date.
    */
-  Filter.prototype.getLabel = function() {
-    return this.graph.filterLabel;
+  DataStep.prototype.first = function() {
+    this.setFirst();
+  };
+
+  /**
+   * Round the current date to the first minor date value
+   * This must be executed once when the current date is set to start Date
+   */
+  DataStep.prototype.setFirst = function() {
+    var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
+    var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
+
+    this.marginEnd = this.roundToMinor(niceEnd);
+    this.marginStart = this.roundToMinor(niceStart);
+    this.marginRange = this.marginEnd - this.marginStart;
+
+    this.current = this.marginEnd;
+
   };
 
+  DataStep.prototype.roundToMinor = function(value) {
+    var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
+    if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
+      return rounded + (this.scale * this.minorSteps[this.stepIndex]);
+    }
+    else {
+      return rounded;
+    }
+  }
+
 
   /**
-   * Return the columnIndex of the filter
-   * @return {Number} columnIndex
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
    */
-  Filter.prototype.getColumn = function() {
-    return this.column;
+  DataStep.prototype.hasNext = function () {
+    return (this.current >= this.marginStart);
   };
 
   /**
-   * Return the currently selected value. Returns undefined if there is no selection
-   * @return {*} value
+   * Do the next step
    */
-  Filter.prototype.getSelectedValue = function() {
-    if (this.index === undefined)
-      return undefined;
+  DataStep.prototype.next = function() {
+    var prev = this.current;
+    this.current -= this.step;
 
-    return this.values[this.index];
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current == prev) {
+      this.current = this._end;
+    }
   };
 
   /**
-   * Retrieve all values of the filter
-   * @return {Array} values
+   * Do the next step
    */
-  Filter.prototype.getValues = function() {
-    return this.values;
+  DataStep.prototype.previous = function() {
+    this.current += this.step;
+    this.marginEnd += this.step;
+    this.marginRange = this.marginEnd - this.marginStart;
   };
 
+
+
   /**
-   * Retrieve one value of the filter
-   * @param {Number}  index
-   * @return {*} value
+   * Get the current datetime
+   * @return {String}  current The current date
    */
-  Filter.prototype.getValue = function(index) {
-    if (index >= this.values.length)
-      throw 'Error: index out of range';
+  DataStep.prototype.getCurrent = function() {
+    var toPrecision = '' + Number(this.current).toPrecision(5);
+    for (var i = toPrecision.length-1; i > 0; i--) {
+      if (toPrecision[i] == "0") {
+        toPrecision = toPrecision.slice(0,i);
+      }
+      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+        toPrecision = toPrecision.slice(0,i);
+        break;
+      }
+      else{
+        break;
+      }
+    }
 
-    return this.values[index];
+    return toPrecision;
   };
 
 
+
   /**
-   * Retrieve the (filtered) dataPoints for the currently selected filter index
-   * @param {Number} [index] (optional)
-   * @return {Array} dataPoints
+   * 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
    */
-  Filter.prototype._getDataPoints = function(index) {
-    if (index === undefined)
-      index = this.index;
-
-    if (index === undefined)
-      return [];
+  DataStep.prototype.snap = function(date) {
 
-    var dataPoints;
-    if (this.dataPoints[index]) {
-      dataPoints = this.dataPoints[index];
-    }
-    else {
-      var f = {};
-      f.column = this.column;
-      f.value = this.values[index];
+  };
 
-      var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
-      dataPoints = this.graph._getDataPoints(dataView);
+  /**
+   * Check if the current value is a major value (for example when the step
+   * is DAY, a major value is each first day of the MONTH)
+   * @return {boolean} true if current date is major, else false.
+   */
+  DataStep.prototype.isMajor = function() {
+    return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+  };
 
-      this.dataPoints[index] = dataPoints;
-    }
+  module.exports = DataStep;
 
-    return dataPoints;
-  };
 
+/***/ },
+/* 35 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
 
   /**
-   * Set a callback function when the filter is fully loaded.
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  Filter.prototype.setOnLoadCallback = function(callback) {
-    this.onLoadCallback = callback;
+  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 = [];
+  }
+
+  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 = [];
+    }
   };
 
+  GraphGroup.prototype.setZeroPosition = function(pos) {
+    this.zeroPosition = pos;
+  };
 
-  /**
-   * Add a value to the list with available values for this filter
-   * No double entries will be created.
-   * @param {Number} index
-   */
-  Filter.prototype.selectValue = function(index) {
-    if (index >= this.values.length)
-      throw 'Error: index out of range';
+  GraphGroup.prototype.setOptions = function(options) {
+    if (options !== undefined) {
+      var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
+      util.selectiveDeepExtend(fields, this.options, options);
 
-    this.index = index;
-    this.value = this.values[index];
+      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;
+            }
+          }
+        }
+      }
+    }
   };
 
-  /**
-   * Load all filtered rows in the background one by one
-   * Start this method without providing an index!
-   */
-  Filter.prototype.loadInBackground = function(index) {
-    if (index === undefined)
-      index = 0;
+  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.setOptions(group.options);
+  };
 
-    var frame = this.graph.frame;
+  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
+    var fillHeight = iconHeight * 0.5;
+    var path, fillPath;
 
-    if (index < this.values.length) {
-      var dataPointsTemp = this._getDataPoints(index);
-      //this.graph.redrawInfo(); // TODO: not neat
+    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");
 
-      // create a progress box
-      if (frame.progress === undefined) {
-        frame.progress = document.createElement('DIV');
-        frame.progress.style.position = 'absolute';
-        frame.progress.style.color = 'gray';
-        frame.appendChild(frame.progress);
+    if (this.options.style == 'line') {
+      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+      path.setAttributeNS(null, "class", this.className);
+      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");
       }
-      var progress = this.getLoadedProgress();
-      frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
-      // TODO: this is no nice solution...
-      frame.progress.style.bottom = 60 + 'px'; // TODO: use height of slider
-      frame.progress.style.left = 10 + 'px';
 
-      var me = this;
-      setTimeout(function() {me.loadInBackground(index+1);}, 10);
-      this.loaded = false;
+      if (this.options.drawPoints.enabled == true) {
+        DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
+      }
     }
     else {
-      this.loaded = true;
+      var barWidth = Math.round(0.3 * iconWidth);
+      var bar1Height = Math.round(0.4 * iconHeight);
+      var bar2Height = Math.round(0.75 * iconHeight);
 
-      // remove the progress box
-      if (frame.progress !== undefined) {
-        frame.removeChild(frame.progress);
-        frame.progress = undefined;
-      }
+      var offset = Math.round((iconWidth - (2 * barWidth))/3);
 
-      if (this.onLoadCallback)
-        this.onLoadCallback();
+      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 = Filter;
+  module.exports = GraphGroup;
 
 
 /***/ },
 /* 36 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * @prototype StepNumber
-   * The class StepNumber is an iterator for Numbers. You provide a start and end
-   * value, and a best step size. StepNumber itself rounds to fixed values and
-   * a finds the step that best fits the provided step.
-   *
-   * If prettyStep is true, the step size is chosen as close as possible to the
-   * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
-   *
-   * Example usage:
-   *   var step = new StepNumber(0, 10, 2.5, true);
-   *   step.start();
-   *   while (!step.end()) {
-   *   alert(step.getCurrent());
-   *   step.next();
-   *   }
-   *
-   * Version: 1.0
-   *
-   * @param {Number} start     The start value
-   * @param {Number} end     The end value
-   * @param {Number} step    Optional. Step size. Must be a positive value.
-   * @param {boolean} prettyStep Optional. If true, the step size is rounded
-   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
-   */
-  function StepNumber(start, end, step, prettyStep) {
-    // set default values
-    this._start = 0;
-    this._end = 0;
-    this._step = 1;
-    this.prettyStep = true;
-    this.precision = 5;
-
-    this._current = 0;
-    this.setRange(start, end, step, prettyStep);
-  };
-
-  /**
-   * Set a new range: start, end and step.
-   *
-   * @param {Number} start     The start value
-   * @param {Number} end     The end value
-   * @param {Number} step    Optional. Step size. Must be a positive value.
-   * @param {boolean} prettyStep Optional. If true, the step size is rounded
-   *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
-   */
-  StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
-    this._start = start ? start : 0;
-    this._end = end ? end : 0;
-
-    this.setStep(step, prettyStep);
-  };
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(8);
+  var Component = __webpack_require__(19);
 
   /**
-   * Set a new step size
-   * @param {Number} step    New step size. Must be a positive value
-   * @param {boolean} prettyStep Optional. If true, the provided step is rounded
-   *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
+   * Legend for Graph2d
    */
-  StepNumber.prototype.setStep = function(step, prettyStep) {
-    if (step === undefined || step <= 0)
-      return;
-
-    if (prettyStep !== undefined)
-      this.prettyStep = prettyStep;
+  function Legend(body, options, side) {
+    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);
 
-    if (this.prettyStep === true)
-      this._step = StepNumber.calculatePrettyStep(step);
-    else
-      this._step = step;
-  };
+    this.svgElements = {};
+    this.dom = {};
+    this.groups = {};
+    this.amountOfGroups = 0;
+    this._create();
 
-  /**
-   * Calculate a nice step size, closest to the desired step size.
-   * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
-   * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
-   * @param {Number}  step  Desired step size
-   * @return {Number}     Nice step size
-   */
-  StepNumber.calculatePrettyStep = function (step) {
-    var log10 = function (x) {return Math.log(x) / Math.LN10;};
+    this.setOptions(options);
+  }
 
-    // try three steps (multiple of 1, 2, or 5
-    var step1 = Math.pow(10, Math.round(log10(step))),
-        step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
-        step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
+  Legend.prototype = new Component();
 
-    // choose the best step (closest to minimum step)
-    var prettyStep = step1;
-    if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
-    if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
 
-    // for safety
-    if (prettyStep <= 0) {
-      prettyStep = 1;
+  Legend.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
     }
+    this.amountOfGroups += 1;
+  };
 
-    return prettyStep;
+  Legend.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
   };
 
-  /**
-   * returns the current value of the step
-   * @return {Number} current value
-   */
-  StepNumber.prototype.getCurrent = function () {
-    return parseFloat(this._current.toPrecision(this.precision));
+  Legend.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
   };
 
-  /**
-   * returns the current step size
-   * @return {Number} current step size
-   */
-  StepNumber.prototype.getStep = function () {
-    return this._step;
+  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";
+
+    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.dom.frame.appendChild(this.svg);
+    this.dom.frame.appendChild(this.dom.textArea);
   };
 
   /**
-   * Set the current value to the largest value smaller than start, which
-   * is a multiple of the step size
+   * Hide the component from the DOM
    */
-  StepNumber.prototype.start = function() {
-    this._current = this._start - this._start % this._step;
+  Legend.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
   };
 
   /**
-   * Do a step, add the step size to the current value
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
    */
-  StepNumber.prototype.next = function () {
-    this._current += this._step;
+  Legend.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
+    }
   };
 
-  /**
-   * Returns true whether the end is reached
-   * @return {boolean}  True if the current value has passed the end value.
-   */
-  StepNumber.prototype.end = function () {
-    return (this._current > this._end);
+  Legend.prototype.setOptions = function(options) {
+    var fields = ['enabled','orientation','icons','left','right'];
+    util.selectiveDeepExtend(fields, this.options, options);
   };
 
-  module.exports = StepNumber;
+  Legend.prototype.redraw = function() {
+    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
+      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 (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 {
+        this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+        this.dom.frame.style.top = '';
+      }
 
-/***/ },
-/* 37 */
-/***/ function(module, exports, __webpack_require__) {
+      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();
+      }
 
-  /**
-   * Canvas shapes used by Network
-   */
-  if (typeof CanvasRenderingContext2D !== 'undefined') {
-
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-      this.beginPath();
-      this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
-
-    /**
-     * 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();
-
-      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
+      var content = '';
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          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';
+    }
+  };
 
-      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();
-    };
+  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;
 
-    /**
-     * 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();
+      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
 
-      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
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+          y += iconHeight + this.options.iconSpacing;
+        }
+      }
 
-      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();
-    };
+      DOMutil.cleanupElements(this.svgElements);
+    }
+  };
 
-    /**
-     * 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();
+  module.exports = Legend;
 
-      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)
-        );
-      }
 
-      this.closePath();
-    };
+/***/ },
+/* 37 */
+/***/ function(module, exports, __webpack_require__) {
 
-    /**
-     * 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);
-    };
+  var Emitter = __webpack_require__(12);
+  var Hammer = __webpack_require__(3);
+  var mousetrap = __webpack_require__(118);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(9);
+  var DataView = __webpack_require__(10);
+  var dotparser = __webpack_require__(43);
+  var Groups = __webpack_require__(40);
+  var Images = __webpack_require__(41);
+  var Node = __webpack_require__(39);
+  var Edge = __webpack_require__(38);
+  var Popup = __webpack_require__(42);
+  var MixinLoader = __webpack_require__(119);
 
-    /**
-     * 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
+  // Load custom shapes into CanvasRenderingContext2D
+  __webpack_require__(130);
 
-      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);
-    };
+  /**
+   * @constructor Network
+   * Create a network visualization, displaying nodes and edges.
+   *
+   * @param {Element} container   The DOM element in which the Network will
+   *                                  be created. Normally a div element.
+   * @param {Object} data         An object containing parameters
+   *                              {Array} nodes
+   *                              {Array} edges
+   * @param {Object} options      Options
+   */
+  function Network (container, data, options) {
+    if (!(this instanceof Network)) {
+      throw new SyntaxError('Constructor must be called with the new operator');
+    }
 
+    this._initializeMixinLoaders();
 
+    // create variables and set default values
+    this.containerElement = container;
+    this.width = '100%';
+    this.height = '100%';
 
-    /**
-     * 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;
+    // render and calculation settings
+    this.renderRefreshRate = 60;                         // hz (fps)
+    this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
+    this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
+    this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
+    this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
 
-      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.stabilize = true;  // stabilize before displaying the network
+    this.selectable = true;
+    this.initializing = true;
 
-      this.beginPath();
-      this.moveTo(xe, ym);
+    // these functions are triggered when the dataset is edited
+    this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
 
-      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);
+    // set constant values
+    this.constants = {
+      nodes: {
+        radiusMin: 10,
+        radiusMax: 30,
+        radius: 10,
+        shape: 'ellipse',
+        image: undefined,
+        widthMin: 16, // px
+        widthMax: 64, // px
+        fixed: false,
+        fontColor: 'black',
+        fontSize: 14, // px
+        fontFace: 'verdana',
+        level: -1,
+        color: {
+            border: '#2B7CE9',
+            background: '#97C2FC',
+          highlight: {
+            border: '#2B7CE9',
+            background: '#D2E5FF'
+          },
+          hover: {
+            border: '#2B7CE9',
+            background: '#D2E5FF'
+          }
+        },
+        borderColor: '#2B7CE9',
+        backgroundColor: '#97C2FC',
+        highlightColor: '#D2E5FF',
+        group: undefined
+      },
+      edges: {
+        widthMin: 1,
+        widthMax: 15,
+        width: 1,
+        widthSelectionMultiplier: 2,
+        hoverWidth: 1.5,
+        style: 'line',
+        color: {
+          color:'#848484',
+          highlight:'#848484',
+          hover: '#848484'
+        },
+        fontColor: '#343434',
+        fontSize: 14, // px
+        fontFace: 'arial',
+        fontFill: 'white',
+        arrowScaleFactor: 1,
+        dash: {
+          length: 10,
+          gap: 5,
+          altLength: undefined
+        },
+        inheritColor: "from" // to, from, false, true (== from)
+      },
+      configurePhysics:false,
+      physics: {
+        barnesHut: {
+          enabled: true,
+          theta: 1 / 0.6, // inverted to save time during calculation
+          gravitationalConstant: -2000,
+          centralGravity: 0.3,
+          springLength: 95,
+          springConstant: 0.04,
+          damping: 0.09
+        },
+        repulsion: {
+          centralGravity: 0.1,
+          springLength: 200,
+          springConstant: 0.05,
+          nodeDistance: 100,
+          damping: 0.09
+        },
+        hierarchicalRepulsion: {
+          enabled: false,
+          centralGravity: 0.5,
+          springLength: 150,
+          springConstant: 0.01,
+          nodeDistance: 60,
+          damping: 0.09
+        },
+        damping: null,
+        centralGravity: null,
+        springLength: null,
+        springConstant: null
+      },
+      clustering: {                   // Per Node in Cluster = PNiC
+        enabled: false,               // (Boolean)             | global on/off switch for clustering.
+        initialMaxNodes: 100,         // (# nodes)             | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
+        clusterThreshold:500,         // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
+        reduceToNodes:300,            // (# nodes)             | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
+        chainThreshold: 0.4,          // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
+        clusterEdgeThreshold: 20,     // (px)                  | edge length threshold. if smaller, this node is clustered.
+        sectorThreshold: 100,         // (# nodes in cluster)  | cluster size threshold. If larger, expanding in own sector.
+        screenSizeThreshold: 0.2,     // (% of canvas)         | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
+        fontSizeMultiplier: 4.0,      // (px PNiC)             | how much the cluster font size grows per node in cluster (in px).
+        maxFontSize: 1000,
+        forceAmplification: 0.1,      // (multiplier PNiC)     | factor of increase fo the repulsion force of a cluster (per node in cluster).
+        distanceAmplification: 0.1,   // (multiplier PNiC)     | factor how much the repulsion distance of a cluster increases (per node in cluster).
+        edgeGrowth: 20,               // (px PNiC)             | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
+        nodeScaling: {width:  1,      // (px PNiC)             | growth of the width  per node in cluster.
+                      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
+      },
+      navigation: {
+        enabled: false
+      },
+      keyboard: {
+        enabled: false,
+        speed: {x: 10, y: 10, zoom: 0.02}
+      },
+      dataManipulation: {
+        enabled: false,
+        initiallyVisible: false
+      },
+      hierarchicalLayout: {
+        enabled:false,
+        levelSeparation: 150,
+        nodeSpacing: 100,
+        direction: "UD"   // UD, DU, LR, RL
+      },
+      freezeForStabilization: false,
+      smoothCurves: {
+        enabled: true,
+        dynamic: true,
+        type: "continuous",
+        roundness: 0.5
+      },
+      dynamicSmoothCurves: true,
+      maxVelocity:  30,
+      minVelocity:  0.1,   // px/s
+      stabilizationIterations: 1000,  // maximum number of iteration to stabilize
+      labels:{
+        add:"Add Node",
+        edit:"Edit",
+        link:"Add Link",
+        del:"Delete selected",
+        editNode:"Edit Node",
+        editEdge:"Edit Edge",
+        back:"Back",
+        addDescription:"Click in an empty space to place a new node.",
+        linkDescription:"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.",
+        addError:"The function for add does not support two arguments (data,callback).",
+        linkError:"The function for connect does not support two arguments (data,callback).",
+        editError:"The function for edit does not support two arguments (data, callback).",
+        editBoundError:"No edit function has been bound to this button.",
+        deleteError:"The function for delete does not support two arguments (data, callback).",
+        deleteClusterError:"Clusters cannot be deleted."
+      },
+      tooltip: {
+        delay: 300,
+        fontColor: 'black',
+        fontSize: 14, // px
+        fontFace: 'verdana',
+        color: {
+          border: '#666',
+          background: '#FFFFC6'
+        }
+      },
+      dragNetwork: true,
+      dragNodes: true,
+      zoomable: true,
+      hover: false,
+      hideEdgesOnDrag: false,
+      hideNodesOnDrag: false
+    };
+    this.hoverObj = {nodes:{},edges:{}};
+    this.controlNodesActive = false;
 
-      this.lineTo(xe, ymb);
+    // Node variables
+    var network = this;
+    this.groups = new Groups(); // object with groups
+    this.images = new Images(); // object with images
+    this.images.setOnloadCallback(function () {
+      network._redraw();
+    });
 
-      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+    // keyboard navigation variables
+    this.xIncrement = 0;
+    this.yIncrement = 0;
+    this.zoomIncrement = 0;
 
-      this.lineTo(x, ym);
-    };
+    // loading all the mixins:
+    // load the force calculation functions, grouped under the physics system.
+    this._loadPhysicsSystem();
+    // create a frame and canvas
+    this._create();
+    // load the sector system.    (mandatory, fully integrated with Network)
+    this._loadSectorSystem();
+    // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
+    this._loadClusterSystem();
+    // load the selection system. (mandatory, required by Network)
+    this._loadSelectionSystem();
+    // load the selection system. (mandatory, required by Network)
+    this._loadHierarchySystem();
 
+    // apply options
+    this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
+    this._setScale(1);
+    this.setOptions(options);
 
-    /**
-     * 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);
+    // other vars
+    this.freezeSimulation = false;// freeze the simulation
+    this.cachedFunctions = {};
 
-      // 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);
+    // containers for nodes and edges
+    this.calculationNodes = {};
+    this.calculationNodeIndices = [];
+    this.nodeIndices = [];        // array with all the indices of the nodes. Used to speed up forces calculation
+    this.nodes = {};              // object with Node objects
+    this.edges = {};              // object with Edge objects
 
-      // 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);
+    // position and scale variables and objects
+    this.canvasTopLeft     = {"x": 0,"y": 0};   // coordinates of the top left of the canvas.     they will be set during _redraw.
+    this.canvasBottomRight = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
+    this.pointerPosition = {"x": 0,"y": 0};   // coordinates of the bottom right of the canvas. they will be set during _redraw
+    this.areaCenter = {};               // object with x and y elements used for determining the center of the zoom action
+    this.scale = 1;                     // defining the global scale variable in the constructor
+    this.previousScale = this.scale;    // this is used to check if the zoom operation is zooming in or out
 
-      // 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);
+    // datasets or dataviews
+    this.nodesData = null;      // A DataSet or DataView
+    this.edgesData = null;      // A DataSet or DataView
 
-      this.beginPath();
-      this.moveTo(x, y);
-      this.lineTo(xl, yl);
-      this.lineTo(xi, yi);
-      this.lineTo(xr, yr);
-      this.closePath();
+    // create event listeners used to subscribe on the DataSets of the nodes and edges
+    this.nodesListeners = {
+      'add': function (event, params) {
+        network._addNodes(params.items);
+        network.start();
+      },
+      'update': function (event, params) {
+        network._updateNodes(params.items);
+        network.start();
+      },
+      'remove': function (event, params) {
+        network._removeNodes(params.items);
+        network.start();
+      }
     };
-
-    /**
-     * 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;
+    this.edgesListeners = {
+      'add': function (event, params) {
+        network._addEdges(params.items);
+        network.start();
+      },
+      'update': function (event, params) {
+        network._updateEdges(params.items);
+        network.start();
+      },
+      'remove': function (event, params) {
+        network._removeEdges(params.items);
+        network.start();
       }
     };
 
-    // TODO: add diamond shape
-  }
-
+    // properties for the animation
+    this.moving = true;
+    this.timer = undefined; // Scheduling function. Is definded in this.start();
 
-/***/ },
-/* 38 */
-/***/ function(module, exports, __webpack_require__) {
+    // load data (the disable start variable will be the same as the enabled clustering)
+    this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
 
-  // 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__(51);
-
-
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
+    // hierarchical layout
+    this.initializing = false;
+    if (this.constants.hierarchicalLayout.enabled == true) {
+      this._setupHierarchicalLayout();
+    }
+    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.stabilize == false) {
+        this.zoomExtent(true,this.constants.clustering.enabled);
+      }
+    }
 
-  // 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__(49);
-    // TODO: throw an error when hammerjs is not available?
-  }
-  else {
-    module.exports = function () {
-      throw Error('hammer.js is only available in a browser, not in node.js.');
+    // if clustering is disabled, the simulation will have started in the setData function
+    if (this.constants.clustering.enabled) {
+      this.startWithClustering();
     }
   }
 
-
-/***/ },
-/* 40 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var PhysicsMixin = __webpack_require__(50);
-  var ClusterMixin = __webpack_require__(43);
-  var SectorsMixin = __webpack_require__(44);
-  var SelectionMixin = __webpack_require__(45);
-  var ManipulationMixin = __webpack_require__(46);
-  var NavigationMixin = __webpack_require__(47);
-  var HierarchicalLayoutMixin = __webpack_require__(48);
+  // Extend Network with an Emitter mixin
+  Emitter(Network.prototype);
 
   /**
-   * Load a mixin into the network object
+   * Get the script path where the vis.js library is located
    *
-   * @param {Object} sourceVariable | this object has to contain functions.
+   * @returns {string | null} path   Path or null when not found. Path does not
+   *                                 end with a slash.
    * @private
    */
-  exports._loadMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = sourceVariable[mixinFunction];
+  Network.prototype._getScriptPath = function() {
+    var scripts = document.getElementsByTagName( 'script' );
+
+    // find script named vis.js or vis.min.js
+    for (var i = 0; i < scripts.length; i++) {
+      var src = scripts[i].src;
+      var match = src && /\/?vis(.min)?\.js$/.exec(src);
+      if (match) {
+        // return path without the script name
+        return src.substring(0, src.length - match[0].length);
       }
     }
+
+    return null;
   };
 
 
   /**
-   * removes a mixin from the network object.
-   *
-   * @param {Object} sourceVariable | this object has to contain functions.
+   * Find the center position of the network
    * @private
    */
-  exports._clearMixin = function (sourceVariable) {
-    for (var mixinFunction in sourceVariable) {
-      if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        this[mixinFunction] = undefined;
+  Network.prototype._getRange = function() {
+    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.x)) {minX = node.x;}
+        if (maxX < (node.x)) {maxX = node.x;}
+        if (minY > (node.y)) {minY = node.y;}
+        if (maxY < (node.y)) {maxY = node.y;}
       }
     }
-  };
-
-
-  /**
-   * Mixin the physics system and initialize the parameters required.
-   *
-   * @private
-   */
-  exports._loadPhysicsSystem = function () {
-    this._loadMixin(PhysicsMixin);
-    this._loadSelectedForceSolver();
-    if (this.constants.configurePhysics == true) {
-      this._loadPhysicsConfiguration();
+    if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
+      minY = 0, maxY = 0, minX = 0, maxX = 0;
     }
+    return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
   };
 
 
   /**
-   * Mixin the cluster system and initialize the parameters required.
-   *
+   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+   * @returns {{x: number, y: number}}
    * @private
    */
-  exports._loadClusterSystem = function () {
-    this.clusterSession = 0;
-    this.hubThreshold = 5;
-    this._loadMixin(ClusterMixin);
+  Network.prototype._findCenter = function(range) {
+    return {x: (0.5 * (range.maxX + range.minX)),
+            y: (0.5 * (range.maxY + range.minY))};
   };
 
 
   /**
-   * Mixin the sector system and initialize the parameters required
+   * center the network
    *
-   * @private
+   * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
    */
-  exports._loadSectorSystem = function () {
-    this.sectors = {};
-    this.activeSector = ["default"];
-    this.sectors["active"] = {};
-    this.sectors["active"]["default"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
-    this.sectors["frozen"] = {};
-    this.sectors["support"] = {"nodes": {},
-      "edges": {},
-      "nodeIndices": [],
-      "formationScale": 1.0,
-      "drawingNode": undefined };
+  Network.prototype._centerNetwork = function(range) {
+    var center = this._findCenter(range);
 
-    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
+    center.x *= this.scale;
+    center.y *= this.scale;
+    center.x -= 0.5 * this.frame.canvas.clientWidth;
+    center.y -= 0.5 * this.frame.canvas.clientHeight;
 
-    this._loadMixin(SectorsMixin);
+    this._setTranslation(-center.x,-center.y); // set at 0,0
   };
 
 
   /**
-   * Mixin the selection system and initialize the parameters required
+   * This function zooms out to fit all data on screen based on amount of nodes
    *
-   * @private
+   * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
+   * @param {Boolean} [disableStart] | If true, start is not called.
    */
-  exports._loadSelectionSystem = function () {
-    this.selectionObj = {nodes: {}, edges: {}};
-
-    this._loadMixin(SelectionMixin);
-  };
-
+  Network.prototype.zoomExtent = function(initialZoom, disableStart) {
+    if (initialZoom === undefined) {
+      initialZoom = false;
+    }
+    if (disableStart === undefined) {
+      disableStart = false;
+    }
 
-  /**
-   * Mixin the navigationUI (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadManipulationSystem = function () {
-    // reset global variables -- these are used by the selection of nodes and edges.
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
+    var range = this._getRange();
+    var zoomLevel;
 
-    if (this.constants.dataManipulation.enabled == true) {
-      // load the manipulator HTML elements. All styling done in css.
-      if (this.manipulationDiv === undefined) {
-        this.manipulationDiv = document.createElement('div');
-        this.manipulationDiv.className = 'network-manipulationDiv';
-        this.manipulationDiv.id = 'network-manipulationDiv';
-        if (this.editMode == true) {
-          this.manipulationDiv.style.display = "block";
+    if (initialZoom == true) {
+      var numberOfNodes = this.nodeIndices.length;
+      if (this.constants.smoothCurves == true) {
+        if (this.constants.clustering.enabled == true &&
+          numberOfNodes >= this.constants.clustering.initialMaxNodes) {
+          zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
         else {
-          this.manipulationDiv.style.display = "none";
+          zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
-        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
       }
-
-      if (this.editModeDiv === undefined) {
-        this.editModeDiv = document.createElement('div');
-        this.editModeDiv.className = 'network-manipulation-editMode';
-        this.editModeDiv.id = 'network-manipulation-editMode';
-        if (this.editMode == true) {
-          this.editModeDiv.style.display = "none";
+      else {
+        if (this.constants.clustering.enabled == true &&
+            numberOfNodes >= this.constants.clustering.initialMaxNodes) {
+          zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
         else {
-          this.editModeDiv.style.display = "block";
+          zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
         }
-        this.containerElement.insertBefore(this.editModeDiv, this.frame);
-      }
-
-      if (this.closeDiv === undefined) {
-        this.closeDiv = document.createElement('div');
-        this.closeDiv.className = 'network-manipulation-closeDiv';
-        this.closeDiv.id = 'network-manipulation-closeDiv';
-        this.closeDiv.style.display = this.manipulationDiv.style.display;
-        this.containerElement.insertBefore(this.closeDiv, this.frame);
       }
 
-      // load the manipulation functions
-      this._loadMixin(ManipulationMixin);
-
-      // create the manipulator toolbar
-      this._createManipulatorBar();
+      // correct for larger canvasses.
+      var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
+      zoomLevel *= factor;
     }
     else {
-      if (this.manipulationDiv !== undefined) {
-        // removes all the bindings and overloads
-        this._createManipulatorBar();
-        // remove the manipulation divs
-        this.containerElement.removeChild(this.manipulationDiv);
-        this.containerElement.removeChild(this.editModeDiv);
-        this.containerElement.removeChild(this.closeDiv);
+      var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
+      var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
 
-        this.manipulationDiv = undefined;
-        this.editModeDiv = undefined;
-        this.closeDiv = undefined;
-        // remove the mixin functions
-        this._clearMixin(ManipulationMixin);
-      }
+      var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
+      var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
+
+      zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
     }
-  };
 
+    if (zoomLevel > 1.0) {
+      zoomLevel = 1.0;
+    }
 
-  /**
-   * Mixin the navigation (User Interface) system and initialize the parameters required
-   *
-   * @private
-   */
-  exports._loadNavigationControls = function () {
-    this._loadMixin(NavigationMixin);
 
-    // the clean function removes the button divs, this is done to remove the bindings.
-    this._cleanNavigation();
-    if (this.constants.navigation.enabled == true) {
-      this._loadNavigationElements();
+    this._setScale(zoomLevel);
+    this._centerNetwork(range);
+    if (disableStart == false) {
+      this.moving = true;
+      this.start();
     }
   };
 
 
   /**
-   * Mixin the hierarchical layout system.
-   *
+   * Update the this.nodeIndices with the most recent node index list
    * @private
    */
-  exports._loadHierarchySystem = function () {
-    this._loadMixin(HierarchicalLayoutMixin);
+  Network.prototype._updateNodeIndexList = function() {
+    this._clearNodeIndexList();
+    for (var idx in this.nodes) {
+      if (this.nodes.hasOwnProperty(idx)) {
+        this.nodeIndices.push(idx);
+      }
+    }
   };
 
 
-/***/ },
-/* 41 */
-/***/ 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.
+   * Set nodes and edges, and optionally options as well.
    *
-   * @param {Object} obj
-   * @return {Object}
-   * @api private
+   * @param {Object} data              Object containing parameters:
+   *                                   {Array | DataSet | DataView} [nodes] Array with nodes
+   *                                   {Array | DataSet | DataView} [edges] Array with edges
+   *                                   {String} [dot] String containing data in DOT format
+   *                                   {Options} [options] Object with options
+   * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
    */
-
-  function mixin(obj) {
-    for (var key in Emitter.prototype) {
-      obj[key] = Emitter.prototype[key];
+  Network.prototype.setData = function(data, disableStart) {
+    if (disableStart === undefined) {
+      disableStart = false;
     }
-    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);
+    if (data && data.dot && (data.nodes || data.edges)) {
+      throw new SyntaxError('Data must contain either parameter "dot" or ' +
+          ' parameter pair "nodes" and "edges", but not both.');
     }
 
-    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 || {};
+    // set options
+    this.setOptions(data && data.options);
 
-    // all
-    if (0 == arguments.length) {
-      this._callbacks = {};
-      return this;
+    // set all data
+    if (data && data.dot) {
+      // parse DOT file
+      if(data && data.dot) {
+        var dotData = dotparser.DOTToGraph(data.dot);
+        this.setData(dotData);
+        return;
+      }
     }
-
-    // specific event
-    var callbacks = this._callbacks[event];
-    if (!callbacks) return this;
-
-    // remove all handlers
-    if (1 == arguments.length) {
-      delete this._callbacks[event];
-      return this;
+    else {
+      this._setNodes(data && data.nodes);
+      this._setEdges(data && data.edges);
     }
 
-    // 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;
+    this._putDataInSector();
+    if (!disableStart) {
+      // find a stable position or start animating to a stable position
+      if (this.stabilize) {
+        var me = this;
+        setTimeout(function() {me._stabilize(); me.start();},0)
+      }
+      else {
+        this.start();
       }
     }
-    return this;
   };
 
   /**
-   * Emit `event` with the given args.
-   *
-   * @param {String} event
-   * @param {Mixed} ...
-   * @return {Emitter}
+   * Set options
+   * @param {Object} options
+   * @param {Boolean} [initializeView] | set zoom and translation to default.
    */
+  Network.prototype.setOptions = function (options) {
+    if (options) {
+      var prop;
+      // retrieve parameter values
+      if (options.width !== undefined)           {this.width = options.width;}
+      if (options.height !== undefined)          {this.height = options.height;}
+      if (options.stabilize !== undefined)       {this.stabilize = options.stabilize;}
+      if (options.selectable !== undefined)      {this.selectable = options.selectable;}
+      if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
+      if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
+      if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
+      if (options.dragNetwork !== undefined)     {this.constants.dragNetwork = options.dragNetwork;}
+      if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
+      if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
+      if (options.hover !== undefined)           {this.constants.hover = options.hover;}
+      if (options.hideEdgesOnDrag !== undefined) {this.constants.hideEdgesOnDrag = options.hideEdgesOnDrag;}
+      if (options.hideNodesOnDrag !== undefined) {this.constants.hideNodesOnDrag = options.hideNodesOnDrag;}
 
-  Emitter.prototype.emit = function(event){
-    this._callbacks = this._callbacks || {};
-    var args = [].slice.call(arguments, 1)
-      , callbacks = this._callbacks[event];
+      // TODO: deprecated since version 3.0.0. Cleanup some day
+      if (options.dragGraph !== undefined) {
+        throw new Error('Option dragGraph is renamed to dragNetwork');
+      }
 
-    if (callbacks) {
-      callbacks = callbacks.slice(0);
-      for (var i = 0, len = callbacks.length; i < len; ++i) {
-        callbacks[i].apply(this, args);
+      if (options.labels !== undefined)  {
+        for (prop in options.labels) {
+          if (options.labels.hasOwnProperty(prop)) {
+            this.constants.labels[prop] = options.labels[prop];
+          }
+        }
       }
-    }
 
-    return this;
-  };
+      if (options.onAdd) {
+          this.triggerFunctions.add = options.onAdd;
+        }
 
-  /**
-   * Return array of callbacks for `event`.
-   *
-   * @param {String} event
-   * @return {Array}
-   * @api public
-   */
+      if (options.onEdit) {
+        this.triggerFunctions.edit = options.onEdit;
+      }
 
-  Emitter.prototype.listeners = function(event){
-    this._callbacks = this._callbacks || {};
-    return this._callbacks[event] || [];
-  };
+      if (options.onEditEdge) {
+        this.triggerFunctions.editEdge = options.onEditEdge;
+      }
 
-  /**
-   * Check if this emitter has `event` handlers.
-   *
-   * @param {String} event
-   * @return {Boolean}
-   * @api public
-   */
+      if (options.onConnect) {
+        this.triggerFunctions.connect = options.onConnect;
+      }
 
-  Emitter.prototype.hasListeners = function(event){
-    return !! this.listeners(event).length;
-  };
+      if (options.onDelete) {
+        this.triggerFunctions.del = options.onDelete;
+      }
 
+      if (options.physics) {
+        if (options.physics.barnesHut) {
+          this.constants.physics.barnesHut.enabled = true;
+          for (prop in options.physics.barnesHut) {
+            if (options.physics.barnesHut.hasOwnProperty(prop)) {
+              this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
+            }
+          }
+        }
 
-/***/ },
-/* 42 */
-/***/ function(module, exports, __webpack_require__) {
+        if (options.physics.repulsion) {
+          this.constants.physics.barnesHut.enabled = false;
+          for (prop in options.physics.repulsion) {
+            if (options.physics.repulsion.hasOwnProperty(prop)) {
+              this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
+            }
+          }
+        }
 
-  /**
-   * Copyright 2012 Craig Campbell
-   *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   * http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Mousetrap is a simple keyboard shortcut library for Javascript with
-   * no external dependencies
-   *
-   * @version 1.1.2
-   * @url craig.is/killing/mice
-   */
-
-    /**
-     * mapping of special keycodes to their corresponding keys
-     *
-     * everything in this dictionary cannot use keypress events
-     * so it has to be here to map to the correct keycodes for
-     * keyup/keydown events
-     *
-     * @type {Object}
-     */
-    var _MAP = {
-            8: 'backspace',
-            9: 'tab',
-            13: 'enter',
-            16: 'shift',
-            17: 'ctrl',
-            18: 'alt',
-            20: 'capslock',
-            27: 'esc',
-            32: 'space',
-            33: 'pageup',
-            34: 'pagedown',
-            35: 'end',
-            36: 'home',
-            37: 'left',
-            38: 'up',
-            39: 'right',
-            40: 'down',
-            45: 'ins',
-            46: 'del',
-            91: 'meta',
-            93: 'meta',
-            224: 'meta'
-        },
-
-        /**
-         * mapping for special characters so they can support
-         *
-         * this dictionary is only used incase you want to bind a
-         * keyup or keydown event to one of these keys
-         *
-         * @type {Object}
-         */
-        _KEYCODE_MAP = {
-            106: '*',
-            107: '+',
-            109: '-',
-            110: '.',
-            111 : '/',
-            186: ';',
-            187: '=',
-            188: ',',
-            189: '-',
-            190: '.',
-            191: '/',
-            192: '`',
-            219: '[',
-            220: '\\',
-            221: ']',
-            222: '\''
-        },
-
-        /**
-         * this is a mapping of keys that require shift on a US keypad
-         * back to the non shift equivelents
-         *
-         * this is so you can use keyup events with these keys
-         *
-         * note that this will only work reliably on US keyboards
-         *
-         * @type {Object}
-         */
-        _SHIFT_MAP = {
-            '~': '`',
-            '!': '1',
-            '@': '2',
-            '#': '3',
-            '$': '4',
-            '%': '5',
-            '^': '6',
-            '&': '7',
-            '*': '8',
-            '(': '9',
-            ')': '0',
-            '_': '-',
-            '+': '=',
-            ':': ';',
-            '\"': '\'',
-            '<': ',',
-            '>': '.',
-            '?': '/',
-            '|': '\\'
-        },
-
-        /**
-         * this is a list of special strings you can use to map
-         * to modifier keys when you specify your keyboard shortcuts
-         *
-         * @type {Object}
-         */
-        _SPECIAL_ALIASES = {
-            'option': 'alt',
-            'command': 'meta',
-            'return': 'enter',
-            'escape': 'esc'
-        },
-
-        /**
-         * variable to store the flipped version of _MAP from above
-         * needed to check if we should use keypress or not when no action
-         * is specified
-         *
-         * @type {Object|undefined}
-         */
-        _REVERSE_MAP,
-
-        /**
-         * a list of all the callbacks setup via Mousetrap.bind()
-         *
-         * @type {Object}
-         */
-        _callbacks = {},
+        if (options.physics.hierarchicalRepulsion) {
+          this.constants.hierarchicalLayout.enabled = true;
+          this.constants.physics.hierarchicalRepulsion.enabled = true;
+          this.constants.physics.barnesHut.enabled = false;
+          for (prop in options.physics.hierarchicalRepulsion) {
+            if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
+              this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
+            }
+          }
+        }
+      }
 
-        /**
-         * direct map of string combinations to callbacks used for trigger()
-         *
-         * @type {Object}
-         */
-        _direct_map = {},
+      if (options.smoothCurves !== undefined) {
+        if (typeof options.smoothCurves == 'boolean') {
+          this.constants.smoothCurves.enabled = options.smoothCurves;
+        }
+        else {
+          this.constants.smoothCurves.enabled = true;
+          for (prop in options.smoothCurves) {
+            if (options.smoothCurves.hasOwnProperty(prop)) {
+              this.constants.smoothCurves[prop] = options.smoothCurves[prop];
+            }
+          }
+        }
+      }
 
-        /**
-         * keeps track of what level each sequence is at since multiple
-         * sequences can start out with the same sequence
-         *
-         * @type {Object}
-         */
-        _sequence_levels = {},
+      if (options.hierarchicalLayout) {
+        this.constants.hierarchicalLayout.enabled = true;
+        for (prop in options.hierarchicalLayout) {
+          if (options.hierarchicalLayout.hasOwnProperty(prop)) {
+            this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
+          }
+        }
+      }
+      else if (options.hierarchicalLayout !== undefined)  {
+        this.constants.hierarchicalLayout.enabled = false;
+      }
 
-        /**
-         * variable to store the setTimeout call
-         *
-         * @type {null|number}
-         */
-        _reset_timer,
+      if (options.clustering) {
+        this.constants.clustering.enabled = true;
+        for (prop in options.clustering) {
+          if (options.clustering.hasOwnProperty(prop)) {
+            this.constants.clustering[prop] = options.clustering[prop];
+          }
+        }
+      }
+      else if (options.clustering !== undefined)  {
+        this.constants.clustering.enabled = false;
+      }
 
-        /**
-         * temporary state where we will ignore the next keyup
-         *
-         * @type {boolean|string}
-         */
-        _ignore_next_keyup = false,
+      if (options.navigation) {
+        this.constants.navigation.enabled = true;
+        for (prop in options.navigation) {
+          if (options.navigation.hasOwnProperty(prop)) {
+            this.constants.navigation[prop] = options.navigation[prop];
+          }
+        }
+      }
+      else if (options.navigation !== undefined) {
+        this.constants.navigation.enabled = false;
+      }
 
-        /**
-         * are we currently inside of a sequence?
-         * type of action ("keyup" or "keydown" or "keypress") or false
-         *
-         * @type {boolean|string}
-         */
-        _inside_sequence = false;
+      if (options.keyboard) {
+        this.constants.keyboard.enabled = true;
+        for (prop in options.keyboard) {
+          if (options.keyboard.hasOwnProperty(prop)) {
+            this.constants.keyboard[prop] = options.keyboard[prop];
+          }
+        }
+      }
+      else if (options.keyboard !== undefined)  {
+        this.constants.keyboard.enabled = false;
+      }
 
-    /**
-     * loop through the f keys, f1 to f19 and add them to the map
-     * programatically
-     */
-    for (var i = 1; i < 20; ++i) {
-        _MAP[111 + i] = 'f' + i;
-    }
+      if (options.dataManipulation) {
+        this.constants.dataManipulation.enabled = true;
+        for (prop in options.dataManipulation) {
+          if (options.dataManipulation.hasOwnProperty(prop)) {
+            this.constants.dataManipulation[prop] = options.dataManipulation[prop];
+          }
+        }
+        this.editMode = this.constants.dataManipulation.initiallyVisible;
+      }
+      else if (options.dataManipulation !== undefined)  {
+        this.constants.dataManipulation.enabled = false;
+      }
 
-    /**
-     * loop through to map numbers on the numeric keypad
-     */
-    for (i = 0; i <= 9; ++i) {
-        _MAP[i + 96] = i;
-    }
+      // TODO: work out these options and document them
+      if (options.edges) {
+        for (prop in options.edges) {
+          if (options.edges.hasOwnProperty(prop)) {
+            if (typeof options.edges[prop] != "object") {
+              this.constants.edges[prop] = options.edges[prop];
+            }
+          }
+        }
 
-    /**
-     * cross browser add event method
-     *
-     * @param {Element|HTMLDocument} object
-     * @param {string} type
-     * @param {Function} callback
-     * @returns void
-     */
-    function _addEvent(object, type, callback) {
-        if (object.addEventListener) {
-            return object.addEventListener(type, callback, false);
+        if (options.edges.color !== undefined) {
+          if (util.isString(options.edges.color)) {
+            this.constants.edges.color = {};
+            this.constants.edges.color.color = options.edges.color;
+            this.constants.edges.color.highlight = options.edges.color;
+            this.constants.edges.color.hover = options.edges.color;
+          }
+          else {
+            if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
+            if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
+            if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
+          }
         }
 
-        object.attachEvent('on' + type, callback);
-    }
+        if (!options.edges.fontColor) {
+          if (options.edges.color !== undefined) {
+            if (util.isString(options.edges.color))           {this.constants.edges.fontColor = options.edges.color;}
+            else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.color;}
+          }
+        }
 
-    /**
-     * takes the event and returns the key character
-     *
-     * @param {Event} e
-     * @return {string}
-     */
-    function _characterFromEvent(e) {
+        // Added to support dashed lines
+        // David Jordan
+        // 2012-08-08
+        if (options.edges.dash) {
+          if (options.edges.dash.length !== undefined) {
+            this.constants.edges.dash.length = options.edges.dash.length;
+          }
+          if (options.edges.dash.gap !== undefined) {
+            this.constants.edges.dash.gap = options.edges.dash.gap;
+          }
+          if (options.edges.dash.altLength !== undefined) {
+            this.constants.edges.dash.altLength = options.edges.dash.altLength;
+          }
+        }
+      }
 
-        // for keypress events we should return the character as is
-        if (e.type == 'keypress') {
-            return String.fromCharCode(e.which);
+      if (options.nodes) {
+        for (prop in options.nodes) {
+          if (options.nodes.hasOwnProperty(prop)) {
+            this.constants.nodes[prop] = options.nodes[prop];
+          }
         }
 
-        // for non keypress events the special maps are needed
-        if (_MAP[e.which]) {
-            return _MAP[e.which];
+        if (options.nodes.color) {
+          this.constants.nodes.color = util.parseColor(options.nodes.color);
         }
 
-        if (_KEYCODE_MAP[e.which]) {
-            return _KEYCODE_MAP[e.which];
+        /*
+         if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
+         if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
+         */
+      }
+      if (options.groups) {
+        for (var groupname in options.groups) {
+          if (options.groups.hasOwnProperty(groupname)) {
+            var group = options.groups[groupname];
+            this.groups.add(groupname, group);
+          }
         }
+      }
 
-        // if it is not in the special map
-        return String.fromCharCode(e.which).toLowerCase();
+      if (options.tooltip) {
+        for (prop in options.tooltip) {
+          if (options.tooltip.hasOwnProperty(prop)) {
+            this.constants.tooltip[prop] = options.tooltip[prop];
+          }
+        }
+        if (options.tooltip.color) {
+          this.constants.tooltip.color = util.parseColor(options.tooltip.color);
+        }
+      }
     }
 
-    /**
-     * should we stop this event before firing off callbacks
-     *
-     * @param {Event} e
-     * @return {boolean}
-     */
-    function _stop(e) {
-        var element = e.target || e.srcElement,
-            tag_name = element.tagName;
 
-        // if the element has the class "mousetrap" then no need to stop
-        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
-            return false;
-        }
+    // (Re)loading the mixins that can be enabled or disabled in the options.
+    // load the force calculation functions, grouped under the physics system.
+    this._loadPhysicsSystem();
+    // load the navigation system.
+    this._loadNavigationControls();
+    // load the data manipulation system
+    this._loadManipulationSystem();
+    // configure the smooth curves
+    this._configureSmoothCurves();
 
-        // stop for input, select, and textarea
-        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
-    }
 
-    /**
-     * checks if two arrays are equal
-     *
-     * @param {Array} modifiers1
-     * @param {Array} modifiers2
-     * @returns {boolean}
-     */
-    function _modifiersMatch(modifiers1, modifiers2) {
-        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
-    }
+    // bind keys. If disabled, this will not do anything;
+    this._createKeyBinds();
+    this.setSize(this.width, this.height);
+    this.moving = true;
+    this.start();
 
-    /**
-     * resets all sequence counters except for the ones passed in
-     *
-     * @param {Object} do_not_reset
-     * @returns void
-     */
-    function _resetSequences(do_not_reset) {
-        do_not_reset = do_not_reset || {};
+  };
 
-        var active_sequences = false,
-            key;
+  /**
+   * Create the main frame for the Network.
+   * This function is executed once when a Network object is created. The frame
+   * contains a canvas, and this canvas contains all objects like the axis and
+   * nodes.
+   * @private
+   */
+  Network.prototype._create = function () {
+    // remove all elements from the container element.
+    while (this.containerElement.hasChildNodes()) {
+      this.containerElement.removeChild(this.containerElement.firstChild);
+    }
 
-        for (key in _sequence_levels) {
-            if (do_not_reset[key]) {
-                active_sequences = true;
-                continue;
-            }
-            _sequence_levels[key] = 0;
-        }
+    this.frame = document.createElement('div');
+    this.frame.className = 'network-frame';
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
-        if (!active_sequences) {
-            _inside_sequence = false;
-        }
+    // create the network canvas (HTML canvas element)
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
+    this.frame.appendChild(this.frame.canvas);
+    if (!this.frame.canvas.getContext) {
+      var noCanvas = document.createElement( 'DIV' );
+      noCanvas.style.color = 'red';
+      noCanvas.style.fontWeight =  'bold' ;
+      noCanvas.style.padding =  '10px';
+      noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
+      this.frame.canvas.appendChild(noCanvas);
     }
 
-    /**
-     * finds all callbacks that match based on the keycode, modifiers,
-     * and action
-     *
-     * @param {string} character
-     * @param {Array} modifiers
-     * @param {string} action
-     * @param {boolean=} remove - should we remove any matches
-     * @param {string=} combination
-     * @returns {Array}
-     */
-    function _getMatches(character, modifiers, action, remove, combination) {
-        var i,
-            callback,
-            matches = [];
+    var me = this;
+    this.drag = {};
+    this.pinch = {};
+    this.hammer = Hammer(this.frame.canvas, {
+      prevent_default: true
+    });
+    this.hammer.on('tap',       me._onTap.bind(me) );
+    this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
+    this.hammer.on('hold',      me._onHold.bind(me) );
+    this.hammer.on('pinch',     me._onPinch.bind(me) );
+    this.hammer.on('touch',     me._onTouch.bind(me) );
+    this.hammer.on('dragstart', me._onDragStart.bind(me) );
+    this.hammer.on('drag',      me._onDrag.bind(me) );
+    this.hammer.on('dragend',   me._onDragEnd.bind(me) );
+    this.hammer.on('release',   me._onRelease.bind(me) );
+    this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
+    this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
+    this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
 
-        // if there are no events related to this keycode
-        if (!_callbacks[character]) {
-            return [];
-        }
+    // add the frame to the container element
+    this.containerElement.appendChild(this.frame);
 
-        // if a modifier key is coming up on its own we should allow it
-        if (action == 'keyup' && _isModifier(character)) {
-            modifiers = [character];
-        }
+  };
 
-        // loop through all callbacks for the key that was pressed
-        // and see if any of them match
-        for (i = 0; i < _callbacks[character].length; ++i) {
-            callback = _callbacks[character][i];
 
-            // if this is a sequence but it is not at the right level
-            // then move onto the next match
-            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
-                continue;
-            }
+  /**
+   * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
+   * @private
+   */
+  Network.prototype._createKeyBinds = function() {
+    var me = this;
+    this.mousetrap = mousetrap;
 
-            // if the action we are looking for doesn't match the action we got
-            // then we should keep going
-            if (action != callback.action) {
-                continue;
-            }
+    this.mousetrap.reset();
 
-            // if this is a keypress event that means that we need to only
-            // look at the character, otherwise check the modifiers as
-            // well
-            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
-
-                // remove is used so if you change your mind and call bind a
-                // second time with a new function the first one is overwritten
-                if (remove && callback.combo == combination) {
-                    _callbacks[character].splice(i, 1);
-                }
-
-                matches.push(callback);
-            }
-        }
-
-        return matches;
+    if (this.constants.keyboard.enabled == true) {
+      this.mousetrap.bind("up",   this._moveUp.bind(me)   , "keydown");
+      this.mousetrap.bind("up",   this._yStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
+      this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
+      this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
+      this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
+      this.mousetrap.bind("=",    this._zoomIn.bind(me),    "keydown");
+      this.mousetrap.bind("=",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("-",    this._zoomOut.bind(me),   "keydown");
+      this.mousetrap.bind("-",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("[",    this._zoomIn.bind(me),    "keydown");
+      this.mousetrap.bind("[",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("]",    this._zoomOut.bind(me),   "keydown");
+      this.mousetrap.bind("]",    this._stopZoom.bind(me),    "keyup");
+      this.mousetrap.bind("pageup",this._zoomIn.bind(me),   "keydown");
+      this.mousetrap.bind("pageup",this._stopZoom.bind(me),   "keyup");
+      this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
+      this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
     }
 
-    /**
-     * takes a key event and figures out what the modifiers are
-     *
-     * @param {Event} e
-     * @returns {Array}
-     */
-    function _eventModifiers(e) {
-        var modifiers = [];
+    if (this.constants.dataManipulation.enabled == true) {
+      this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
+      this.mousetrap.bind("del",this._deleteSelected.bind(me));
+    }
+  };
 
-        if (e.shiftKey) {
-            modifiers.push('shift');
-        }
+  /**
+   * Get the pointer location from a touch location
+   * @param {{pageX: Number, pageY: Number}} touch
+   * @return {{x: Number, y: Number}} pointer
+   * @private
+   */
+  Network.prototype._getPointer = function (touch) {
+    return {
+      x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
+      y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
+    };
+  };
 
-        if (e.altKey) {
-            modifiers.push('alt');
-        }
+  /**
+   * On start of a touch gesture, store the pointer
+   * @param event
+   * @private
+   */
+  Network.prototype._onTouch = function (event) {
+    this.drag.pointer = this._getPointer(event.gesture.center);
+    this.drag.pinched = false;
+    this.pinch.scale = this._getScale();
 
-        if (e.ctrlKey) {
-            modifiers.push('ctrl');
-        }
+    this._handleTouch(this.drag.pointer);
+  };
 
-        if (e.metaKey) {
-            modifiers.push('meta');
-        }
+  /**
+   * handle drag start event
+   * @private
+   */
+  Network.prototype._onDragStart = function () {
+    this._handleDragStart();
+  };
 
-        return modifiers;
-    }
 
-    /**
-     * actually calls the callback function
-     *
-     * if your callback function returns false this will use the jquery
-     * convention - prevent default and stop propogation on the event
-     *
-     * @param {Function} callback
-     * @param {Event} e
-     * @returns void
-     */
-    function _fireCallback(callback, e) {
-        if (callback(e) === false) {
-            if (e.preventDefault) {
-                e.preventDefault();
-            }
+  /**
+   * This function is called by _onDragStart.
+   * It is separated out because we can then overload it for the datamanipulation system.
+   *
+   * @private
+   */
+  Network.prototype._handleDragStart = function() {
+    var drag = this.drag;
+    var node = this._getNodeAt(drag.pointer);
+    // note: drag.pointer is set in _onTouch to get the initial touch location
 
-            if (e.stopPropagation) {
-                e.stopPropagation();
-            }
+    drag.dragging = true;
+    drag.selection = [];
+    drag.translation = this._getTranslation();
+    drag.nodeId = null;
 
-            e.returnValue = false;
-            e.cancelBubble = true;
-        }
-    }
+    if (node != null) {
+      drag.nodeId = node.id;
+      // select the clicked node if not yet selected
+      if (!node.isSelected()) {
+        this._selectObject(node,false);
+      }
 
-    /**
-     * handles a character key event
-     *
-     * @param {string} character
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleCharacter(character, e) {
+      // create an array with the selected nodes and their original location and status
+      for (var objectId in this.selectionObj.nodes) {
+        if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
+          var object = this.selectionObj.nodes[objectId];
+          var s = {
+            id: object.id,
+            node: object,
 
-        // if this event should not happen stop here
-        if (_stop(e)) {
-            return;
-        }
+            // store original x, y, xFixed and yFixed, make the node temporarily Fixed
+            x: object.x,
+            y: object.y,
+            xFixed: object.xFixed,
+            yFixed: object.yFixed
+          };
 
-        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
-            i,
-            do_not_reset = {},
-            processed_sequence_callback = false;
+          object.xFixed = true;
+          object.yFixed = true;
 
-        // loop through matching callbacks for this key event
-        for (i = 0; i < callbacks.length; ++i) {
+          drag.selection.push(s);
+        }
+      }
+    }
+  };
 
-            // fire for all sequence callbacks
-            // this is because if for example you have multiple sequences
-            // bound such as "g i" and "g t" they both need to fire the
-            // callback for matching g cause otherwise you can only ever
-            // match the first one
-            if (callbacks[i].seq) {
-                processed_sequence_callback = true;
 
-                // keep a list of which sequences were matches for later
-                do_not_reset[callbacks[i].seq] = 1;
-                _fireCallback(callbacks[i].callback, e);
-                continue;
-            }
+  /**
+   * handle drag event
+   * @private
+   */
+  Network.prototype._onDrag = function (event) {
+    this._handleOnDrag(event)
+  };
 
-            // if there were no sequence matches but we are still here
-            // that means this is a regular match so we should fire that
-            if (!processed_sequence_callback && !_inside_sequence) {
-                _fireCallback(callbacks[i].callback, e);
-            }
-        }
 
-        // if you are inside of a sequence and the key you are pressing
-        // is not a modifier key then we should reset all sequences
-        // that were not matched by this key event
-        if (e.type == _inside_sequence && !_isModifier(character)) {
-            _resetSequences(do_not_reset);
-        }
+  /**
+   * This function is called by _onDrag.
+   * It is separated out because we can then overload it for the datamanipulation system.
+   *
+   * @private
+   */
+  Network.prototype._handleOnDrag = function(event) {
+    if (this.drag.pinched) {
+      return;
     }
 
-    /**
-     * handles a keydown event
-     *
-     * @param {Event} e
-     * @returns void
-     */
-    function _handleKey(e) {
+    var pointer = this._getPointer(event.gesture.center);
 
-        // normalize e.which for key events
-        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
-        e.which = typeof e.which == "number" ? e.which : e.keyCode;
+    var me = this,
+      drag = this.drag,
+      selection = drag.selection;
+    if (selection && selection.length && this.constants.dragNodes == true) {
+      // calculate delta's and new location
+      var deltaX = pointer.x - drag.pointer.x,
+        deltaY = pointer.y - drag.pointer.y;
 
-        var character = _characterFromEvent(e);
+      // update position of all selected nodes
+      selection.forEach(function (s) {
+        var node = s.node;
 
-        // no character found then stop
-        if (!character) {
-            return;
+        if (!s.xFixed) {
+          node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
         }
 
-        if (e.type == 'keyup' && _ignore_next_keyup == character) {
-            _ignore_next_keyup = false;
-            return;
+        if (!s.yFixed) {
+          node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
         }
+      });
 
-        _handleCharacter(character, e);
+      // start _animationStep if not yet running
+      if (!this.moving) {
+        this.moving = true;
+        this.start();
+      }
     }
+    else {
+      if (this.constants.dragNetwork == true) {
+        // move the network
+        var diffX = pointer.x - this.drag.pointer.x;
+        var diffY = pointer.y - this.drag.pointer.y;
 
-    /**
-     * determines if the keycode specified is a modifier key or not
-     *
-     * @param {string} key
-     * @returns {boolean}
-     */
-    function _isModifier(key) {
-        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
+        this._setTranslation(
+          this.drag.translation.x + diffX,
+          this.drag.translation.y + diffY
+        );
+        this._redraw();
+  //      this.moving = true;
+  //      this.start();
+      }
     }
+  };
 
-    /**
-     * called to set a 1 second timeout on the specified sequence
-     *
-     * this is so after each key press in the sequence you have 1 second
-     * to press the next key before you have to start over
-     *
-     * @returns void
-     */
-    function _resetSequenceTimer() {
-        clearTimeout(_reset_timer);
-        _reset_timer = setTimeout(_resetSequences, 1000);
+  /**
+   * handle drag start event
+   * @private
+   */
+  Network.prototype._onDragEnd = function () {
+    this.drag.dragging = false;
+    var selection = this.drag.selection;
+    if (selection) {
+      selection.forEach(function (s) {
+        // restore original xFixed and yFixed
+        s.node.xFixed = s.xFixed;
+        s.node.yFixed = s.yFixed;
+      });
     }
+    this._redraw();
+  };
 
-    /**
-     * reverses the map lookup so that we can look for specific keys
-     * to see what can and can't use keypress
-     *
-     * @return {Object}
-     */
-    function _getReverseMap() {
-        if (!_REVERSE_MAP) {
-            _REVERSE_MAP = {};
-            for (var key in _MAP) {
-
-                // pull out the numeric keypad from here cause keypress should
-                // be able to detect the keys from the character
-                if (key > 95 && key < 112) {
-                    continue;
-                }
-
-                if (_MAP.hasOwnProperty(key)) {
-                    _REVERSE_MAP[_MAP[key]] = key;
-                }
-            }
-        }
-        return _REVERSE_MAP;
-    }
+  /**
+   * handle tap/click event: select/unselect a node
+   * @private
+   */
+  Network.prototype._onTap = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this.pointerPosition = pointer;
+    this._handleTap(pointer);
 
-    /**
-     * picks the best action based on the key combination
-     *
-     * @param {string} key - character for key
-     * @param {Array} modifiers
-     * @param {string=} action passed in
-     */
-    function _pickBestAction(key, modifiers, action) {
+  };
 
-        // if no action was picked in we should try to pick the one
-        // that we think would work best for this key
-        if (!action) {
-            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
-        }
 
-        // modifier keys don't work as expected with keypress,
-        // switch to keydown
-        if (action == 'keypress' && modifiers.length) {
-            action = 'keydown';
-        }
+  /**
+   * handle doubletap event
+   * @private
+   */
+  Network.prototype._onDoubleTap = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this._handleDoubleTap(pointer);
+  };
 
-        return action;
-    }
 
-    /**
-     * binds a key sequence to an event
-     *
-     * @param {string} combo - combo specified in bind call
-     * @param {Array} keys
-     * @param {Function} callback
-     * @param {string=} action
-     * @returns void
-     */
-    function _bindSequence(combo, keys, callback, action) {
+  /**
+   * handle long tap event: multi select nodes
+   * @private
+   */
+  Network.prototype._onHold = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this.pointerPosition = pointer;
+    this._handleOnHold(pointer);
+  };
 
-        // start off by adding a sequence level record for this combination
-        // and setting the level to 0
-        _sequence_levels[combo] = 0;
+  /**
+   * handle the release of the screen
+   *
+   * @private
+   */
+  Network.prototype._onRelease = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
+    this._handleOnRelease(pointer);
+  };
 
-        // if there is no action pick the best one for the first key
-        // in the sequence
-        if (!action) {
-            action = _pickBestAction(keys[0], []);
-        }
+  /**
+   * Handle pinch event
+   * @param event
+   * @private
+   */
+  Network.prototype._onPinch = function (event) {
+    var pointer = this._getPointer(event.gesture.center);
 
-        /**
-         * callback to increase the sequence level for this sequence and reset
-         * all other sequences that were active
-         *
-         * @param {Event} e
-         * @returns void
-         */
-        var _increaseSequence = function(e) {
-                _inside_sequence = action;
-                ++_sequence_levels[combo];
-                _resetSequenceTimer();
-            },
+    this.drag.pinched = true;
+    if (!('scale' in this.pinch)) {
+      this.pinch.scale = 1;
+    }
 
-            /**
-             * wraps the specified callback inside of another function in order
-             * to reset all sequence counters as soon as this sequence is done
-             *
-             * @param {Event} e
-             * @returns void
-             */
-            _callbackAndReset = function(e) {
-                _fireCallback(callback, e);
+    // TODO: enabled moving while pinching?
+    var scale = this.pinch.scale * event.gesture.scale;
+    this._zoom(scale, pointer)
+  };
 
-                // we should ignore the next key up if the action is key down
-                // or keypress.  this is so if you finish a sequence and
-                // release the key the final key will not trigger a keyup
-                if (action !== 'keyup') {
-                    _ignore_next_keyup = _characterFromEvent(e);
-                }
+  /**
+   * Zoom the network in or out
+   * @param {Number} scale a number around 1, and between 0.01 and 10
+   * @param {{x: Number, y: Number}} pointer    Position on screen
+   * @return {Number} appliedScale    scale is limited within the boundaries
+   * @private
+   */
+  Network.prototype._zoom = function(scale, pointer) {
+    if (this.constants.zoomable == true) {
+      var scaleOld = this._getScale();
+      if (scale < 0.00001) {
+        scale = 0.00001;
+      }
+      if (scale > 10) {
+        scale = 10;
+      }
+    // + this.frame.canvas.clientHeight / 2
+      var translation = this._getTranslation();
 
-                // weird race condition if a sequence ends with the key
-                // another sequence begins with
-                setTimeout(_resetSequences, 10);
-            },
-            i;
+      var scaleFrac = scale / scaleOld;
+      var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
+      var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
 
-        // loop through keys one at a time and bind the appropriate callback
-        // function.  for any key leading up to the final one it should
-        // increase the sequence. after the final, it should reset all sequences
-        for (i = 0; i < keys.length; ++i) {
-            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
-        }
-    }
+      this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
+                         "y" : this._YconvertDOMtoCanvas(pointer.y)};
 
-    /**
-     * binds a single keyboard combination
-     *
-     * @param {string} combination
-     * @param {Function} callback
-     * @param {string=} action
-     * @param {string=} sequence_name - name of sequence if part of sequence
-     * @param {number=} level - what part of the sequence the command is
-     * @returns void
-     */
-    function _bindSingle(combination, callback, action, sequence_name, level) {
+      this._setScale(scale);
+      this._setTranslation(tx, ty);
+      this.updateClustersDefault();
+      this._redraw();
 
-        // make sure multiple spaces in a row become a single space
-        combination = combination.replace(/\s+/g, ' ');
+      if (scaleOld < scale) {
+        this.emit("zoom", {direction:"+"});
+      }
+      else {
+        this.emit("zoom", {direction:"-"});
+      }
 
-        var sequence = combination.split(' '),
-            i,
-            key,
-            keys,
-            modifiers = [];
+      return scale;
+    }
+  };
 
-        // if this pattern is a sequence of keys then run through this method
-        // to reprocess each pattern one key at a time
-        if (sequence.length > 1) {
-            return _bindSequence(combination, sequence, callback, action);
-        }
 
-        // take the keys from this pattern and figure out what the actual
-        // pattern is all about
-        keys = combination === '+' ? ['+'] : combination.split('+');
+  /**
+   * Event handler for mouse wheel event, used to zoom the timeline
+   * See http://adomas.org/javascript-mouse-wheel/
+   *     https://github.com/EightMedia/hammer.js/issues/256
+   * @param {MouseEvent}  event
+   * @private
+   */
+  Network.prototype._onMouseWheel = function(event) {
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail/3;
+    }
 
-        for (i = 0; i < keys.length; ++i) {
-            key = keys[i];
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
 
-            // normalize key names
-            if (_SPECIAL_ALIASES[key]) {
-                key = _SPECIAL_ALIASES[key];
-            }
+      // calculate the new scale
+      var scale = this._getScale();
+      var zoom = delta / 10;
+      if (delta < 0) {
+        zoom = zoom / (1 - zoom);
+      }
+      scale *= (1 + zoom);
 
-            // if this is not a keypress event then we should
-            // be smart about using shift keys
-            // this will only work for US keyboards however
-            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
-                key = _SHIFT_MAP[key];
-                modifiers.push('shift');
-            }
+      // calculate the pointer location
+      var gesture = util.fakeGesture(this, event);
+      var pointer = this._getPointer(gesture.center);
 
-            // if this key is a modifier then add it to the list of modifiers
-            if (_isModifier(key)) {
-                modifiers.push(key);
-            }
-        }
+      // apply the new scale
+      this._zoom(scale, pointer);
+    }
 
-        // depending on what the key combination is
-        // we will try to pick the best event for it
-        action = _pickBestAction(key, modifiers, action);
+    // Prevent default actions caused by mouse wheel.
+    event.preventDefault();
+  };
 
-        // make sure to initialize array if this is the first time
-        // a callback is added for this key
-        if (!_callbacks[key]) {
-            _callbacks[key] = [];
-        }
 
-        // remove an existing match if there is one
-        _getMatches(key, modifiers, action, !sequence_name, combination);
+  /**
+   * Mouse move handler for checking whether the title moves over a node with a title.
+   * @param  {Event} event
+   * @private
+   */
+  Network.prototype._onMouseMoveTitle = function (event) {
+    var gesture = util.fakeGesture(this, event);
+    var pointer = this._getPointer(gesture.center);
 
-        // add this call back to the array
-        // if it is a sequence put it at the beginning
-        // if not put it at the end
-        //
-        // this is important because the way these are processed expects
-        // the sequence ones to come first
-        _callbacks[key][sequence_name ? 'unshift' : 'push']({
-            callback: callback,
-            modifiers: modifiers,
-            action: action,
-            seq: sequence_name,
-            level: level,
-            combo: combination
-        });
+    // check if the previously selected node is still selected
+    if (this.popupObj) {
+      this._checkHidePopup(pointer);
     }
 
-    /**
-     * binds multiple combinations to the same callback
-     *
-     * @param {Array} combinations
-     * @param {Function} callback
-     * @param {string|undefined} action
-     * @returns void
-     */
-    function _bindMultiple(combinations, callback, action) {
-        for (var i = 0; i < combinations.length; ++i) {
-            _bindSingle(combinations[i], callback, action);
-        }
+    // start a timeout that will check if the mouse is positioned above
+    // an element
+    var me = this;
+    var checkShow = function() {
+      me._checkShowPopup(pointer);
+    };
+    if (this.popupTimer) {
+      clearInterval(this.popupTimer); // stop any running calculationTimer
+    }
+    if (!this.drag.dragging) {
+      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
     }
 
-    // start!
-    _addEvent(document, 'keypress', _handleKey);
-    _addEvent(document, 'keydown', _handleKey);
-    _addEvent(document, 'keyup', _handleKey);
-
-    var mousetrap = {
-
-        /**
-         * binds an event to mousetrap
-         *
-         * can be a single key, a combination of keys separated with +,
-         * a comma separated list of keys, an array of keys, or
-         * a sequence of keys separated by spaces
-         *
-         * be sure to list the modifier keys first to make sure that the
-         * correct key ends up getting bound (the last key in the pattern)
-         *
-         * @param {string|Array} keys
-         * @param {Function} callback
-         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
-         * @returns void
-         */
-        bind: function(keys, callback, action) {
-            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
-            _direct_map[keys + ':' + action] = callback;
-            return this;
-        },
-
-        /**
-         * unbinds an event to mousetrap
-         *
-         * the unbinding sets the callback function of the specified key combo
-         * to an empty function and deletes the corresponding key in the
-         * _direct_map dict.
-         *
-         * the keycombo+action has to be exactly the same as
-         * it was defined in the bind method
-         *
-         * TODO: actually remove this from the _callbacks dictionary instead
-         * of binding an empty function
-         *
-         * @param {string|Array} keys
-         * @param {string} action
-         * @returns void
-         */
-        unbind: function(keys, action) {
-            if (_direct_map[keys + ':' + action]) {
-                delete _direct_map[keys + ':' + action];
-                this.bind(keys, function() {}, action);
-            }
-            return this;
-        },
-
-        /**
-         * triggers an event that has already been bound
-         *
-         * @param {string} keys
-         * @param {string=} action
-         * @returns void
-         */
-        trigger: function(keys, action) {
-            _direct_map[keys + ':' + action]();
-            return this;
-        },
 
-        /**
-         * resets the library back to its initial state.  this is useful
-         * if you want to clear out the current keyboard shortcuts and bind
-         * new ones - for example if you switch to another page
-         *
-         * @returns void
-         */
-        reset: function() {
-            _callbacks = {};
-            _direct_map = {};
-            return this;
+    /**
+     * Adding hover highlights
+     */
+    if (this.constants.hover == true) {
+      // removing all hover highlights
+      for (var edgeId in this.hoverObj.edges) {
+        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
+          this.hoverObj.edges[edgeId].hover = false;
+          delete this.hoverObj.edges[edgeId];
         }
-    };
-
-  module.exports = mousetrap;
-
-
-
-/***/ },
-/* 43 */
-/***/ function(module, exports, __webpack_require__) {
-
-  /**
-   * Creation of the ClusterMixin var.
-   *
-   * This contains all the functions the Network object can use to employ clustering
-   */
-
-  /**
-  * 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);
+      }
 
-   // updates the lables after clustering
-   this.updateLabels();
+      // adding hover highlights
+      var obj = this._getNodeAt(pointer);
+      if (obj == null) {
+        obj = this._getEdgeAt(pointer);
+      }
+      if (obj != null) {
+        this._hoverObject(obj);
+      }
 
-   // 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();
+      // removing all node hover highlights except for the selected one.
+      for (var nodeId in this.hoverObj.nodes) {
+        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+            this._blurObject(this.hoverObj.nodes[nodeId]);
+            delete this.hoverObj.nodes[nodeId];
+          }
+        }
+      }
+      this.redraw();
+    }
   };
 
   /**
-   * This function clusters until the initialMaxNodes has been reached
+   * Check if there is an element on the given position in the network
+   * (a node or edge). If so, and if this element has a title,
+   * show a popup window with its title.
    *
-   * @param {Number}  maxNumberOfNodes
-   * @param {Boolean} reposition
+   * @param {{x:Number, y:Number}} pointer
+   * @private
    */
-  exports.clusterToFit = function(maxNumberOfNodes, reposition) {
-    var numberOfNodes = this.nodeIndices.length;
+  Network.prototype._checkShowPopup = function (pointer) {
+    var obj = {
+      left:   this._XconvertDOMtoCanvas(pointer.x),
+      top:    this._YconvertDOMtoCanvas(pointer.y),
+      right:  this._XconvertDOMtoCanvas(pointer.x),
+      bottom: this._YconvertDOMtoCanvas(pointer.y)
+    };
 
-    var maxLevels = 50;
-    var level = 0;
+    var id;
+    var lastPopupNode = this.popupObj;
 
-    // we first cluster the hubs, then we pull in the outliers, repeat
-    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-      if (level % 3 == 0) {
-        this.forceAggregateHubs(true);
-        this.normalizeClusterLevels();
-      }
-      else {
-        this.increaseClusterLevel(); // this also includes a cluster normalization
+    if (this.popupObj == undefined) {
+      // search the nodes for overlap, select the top one in case of multiple nodes
+      var nodes = this.nodes;
+      for (id in nodes) {
+        if (nodes.hasOwnProperty(id)) {
+          var node = nodes[id];
+          if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
+            this.popupObj = node;
+            break;
+          }
+        }
       }
-
-      numberOfNodes = this.nodeIndices.length;
-      level += 1;
     }
 
-    // after the clustering we reposition the nodes to reduce the initial chaos
-    if (level > 0 && reposition == true) {
-      this.repositionNodes();
+    if (this.popupObj === undefined) {
+      // search the edges for overlap
+      var edges = this.edges;
+      for (id in edges) {
+        if (edges.hasOwnProperty(id)) {
+          var edge = edges[id];
+          if (edge.connected && (edge.getTitle() !== undefined) &&
+              edge.isOverlappingWith(obj)) {
+            this.popupObj = edge;
+            break;
+          }
+        }
+      }
     }
-    this._updateCalculationNodes();
-  };
 
-  /**
-   * 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;
+    if (this.popupObj) {
+      // show popup message window
+      if (this.popupObj != lastPopupNode) {
+        var me = this;
+        if (!me.popup) {
+          me.popup = new Popup(me.frame, me.constants.tooltip);
+        }
 
-      // we decluster until we reach a decent number of nodes
-      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
-        this.decreaseClusterLevel();
-        level += 1;
+        // adjust a small offset such that the mouse cursor is located in the
+        // bottom left location of the popup, and you can easily move over the
+        // popup area
+        me.popup.setPosition(pointer.x - 3, pointer.y - 3);
+        me.popup.setText(me.popupObj.getTitle());
+        me.popup.show();
       }
-
     }
     else {
-      this._expandClusterNode(node,false,true);
-
-      // update the index list, dynamic edges and labels
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      this._updateCalculationNodes();
-      this.updateLabels();
-    }
-
-    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-    if (this.moving != isMovingBeforeClustering) {
-      this.start();
+      if (this.popup) {
+        this.popup.hide();
+      }
     }
   };
 
 
   /**
-   * This calls the updateClustes with default arguments
+   * Check if the popup must be hided, which is the case when the mouse is no
+   * longer hovering on the object
+   * @param {{x:Number, y:Number}} pointer
+   * @private
    */
-  exports.updateClustersDefault = function() {
-    if (this.constants.clustering.enabled == true) {
-      this.updateClusters(0,false,false);
+  Network.prototype._checkHidePopup = function (pointer) {
+    if (!this.popupObj || !this._getNodeAt(pointer) ) {
+      this.popupObj = undefined;
+      if (this.popup) {
+        this.popup.hide();
+      }
     }
   };
 
 
   /**
-   * 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.
+   * Set a new size for the network
+   * @param {string} width   Width in pixels or percentage (for example '800px'
+   *                         or '50%')
+   * @param {string} height  Height in pixels or percentage  (for example '400px'
+   *                         or '30%')
    */
-  exports.increaseClusterLevel = function() {
-    this.updateClusters(-1,false,true);
-  };
+  Network.prototype.setSize = function(width, height) {
+    this.frame.style.width = width;
+    this.frame.style.height = height;
+
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
+    this.frame.canvas.width = this.frame.canvas.clientWidth;
+    this.frame.canvas.height = this.frame.canvas.clientHeight;
 
-  /**
-   * 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);
-  };
+    if (this.manipulationDiv !== undefined) {
+      this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
+    }
+    if (this.navigationDivs !== undefined) {
+      if (this.navigationDivs['wrapper'] !== undefined) {
+        this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+        this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+      }
+    }
 
+    this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
+  };
 
   /**
-   * 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
-   *
+   * Set a data set with nodes for the network
+   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
+   * @private
    */
-  exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
+  Network.prototype._setNodes = function(nodes) {
+    var oldNodesData = this.nodesData;
 
-    // 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();
+    if (nodes instanceof DataSet || nodes instanceof DataView) {
+      this.nodesData = nodes;
     }
-
-    // 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 (nodes instanceof Array) {
+      this.nodesData = new DataSet();
+      this.nodesData.add(nodes);
     }
-    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();
-      }
+    else if (!nodes) {
+      this.nodesData = new DataSet();
     }
-    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();
+    else {
+      throw new TypeError('Array or DataSet expected');
     }
 
-    // we now reduce chains.
-    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
-      this.handleChains();
-      this._updateNodeIndexList();
+    if (oldNodesData) {
+      // unsubscribe from old dataset
+      util.forEach(this.nodesListeners, function (callback, event) {
+        oldNodesData.off(event, callback);
+      });
     }
 
-    this.previousScale = this.scale;
-
-    // rest of the update the index list, dynamic edges and labels
-    this._updateDynamicEdges();
-    this.updateLabels();
+    // remove drawn nodes
+    this.nodes = {};
 
-    // 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();
-    }
+    if (this.nodesData) {
+      // subscribe to new dataset
+      var me = this;
+      util.forEach(this.nodesListeners, function (callback, event) {
+        me.nodesData.on(event, callback);
+      });
 
-    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();
-      }
+      // draw all new nodes
+      var ids = this.nodesData.getIds();
+      this._addNodes(ids);
     }
-
-    this._updateCalculationNodes();
+    this._updateSelection();
   };
 
   /**
-   * This function handles the chains. It is called on every updateClusters().
+   * Add nodes
+   * @param {Number[] | String[]} ids
+   * @private
    */
-  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)
-
-    }
-  };
-
-  /**
-   * this functions starts clustering by hubs
-   * The minimum hub threshold is set globally
-   *
-   * @private
-   */
-  exports._aggregateHubs = function(force) {
-    this._getHubSize();
-    this._formClustersByHub(force,false);
-  };
-
-
-  /**
-   * This function is fired by keypress. It forces hubs to form.
-   *
-   */
-  exports.forceAggregateHubs = function(doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
-
-    this._aggregateHubs(true);
-
-    // update the index list, dynamic edges and labels
-    this._updateNodeIndexList();
-    this._updateDynamicEdges();
-    this.updateLabels();
-
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length != amountOfNodes) {
-      this.clusterSession += 1;
-    }
+  Network.prototype._addNodes = function(ids) {
+    var id;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      id = ids[i];
+      var data = this.nodesData.get(id);
+      var node = new Node(data, this.images, this.groups, this.constants);
+      this.nodes[id] = node; // note: this may replace an existing node
 
-    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();
+      if ((node.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
+        var radius = 10 * 0.1*ids.length;
+        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.moving = true;
+    }
+    this._updateNodeIndexList();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateCalculationNodes();
+    this._reconnectEdges();
+    this._updateValueRange(this.nodes);
+    this.updateLabels();
   };
 
   /**
-   * If a cluster takes up more than a set percentage of the screen, open the cluster
-   *
+   * Update existing nodes, or create them when not yet existing
+   * @param {Number[] | String[]} ids
    * @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);
-          }
-        }
+  Network.prototype._updateNodes = function(ids) {
+    var nodes = this.nodes,
+        nodesData = this.nodesData;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      var node = nodes[id];
+      var data = nodesData.get(id);
+      if (node) {
+        // update node
+        node.setProperties(data, this.constants);
+      }
+      else {
+        // create node
+        node = new Node(properties, this.images, this.groups, this.constants);
+        nodes[id] = node;
       }
     }
-  };
-
-
-  /**
-   * 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.moving = true;
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateNodeIndexList();
+    this._reconnectEdges();
+    this._updateValueRange(nodes);
   };
 
   /**
-   * 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
+   * Remove existing nodes. If nodes do not exist, the method will just ignore it.
+   * @param {Number[] | String[]} ids
    * @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;
-      }
-      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];
-
-            // 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);
-              }
-            }
-          }
-        }
-      }
+  Network.prototype._removeNodes = function(ids) {
+    var nodes = this.nodes;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      delete nodes[id];
+    }
+    this._updateNodeIndexList();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateCalculationNodes();
+    this._reconnectEdges();
+    this._updateSelection();
+    this._updateValueRange(nodes);
   };
 
   /**
-   * 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
+   * Load edges by reading the data table
+   * @param {Array | DataSet | DataView} edges    The data containing the edges.
+   * @private
    * @private
    */
-  exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
-    var childNode = parentNode.containedNodes[containedNodeId];
+  Network.prototype._setEdges = function(edges) {
+    var oldEdgesData = this.edgesData;
 
-    // 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 (edges instanceof DataSet || edges instanceof DataView) {
+      this.edgesData = edges;
+    }
+    else if (edges instanceof Array) {
+      this.edgesData = new DataSet();
+      this.edgesData.add(edges);
+    }
+    else if (!edges) {
+      this.edgesData = new DataSet();
+    }
+    else {
+      throw new TypeError('Array or DataSet expected');
+    }
 
-      // put the child node back in the global nodes object
-      this.nodes[containedNodeId] = childNode;
+    if (oldEdgesData) {
+      // unsubscribe from old dataset
+      util.forEach(this.edgesListeners, function (callback, event) {
+        oldEdgesData.off(event, callback);
+      });
+    }
 
-      // release the contained edges from this childNode back into the global edges
-      this._releaseContainedEdges(parentNode,childNode);
+    // remove drawn edges
+    this.edges = {};
 
-      // reconnect rerouted edges to the childNode
-      this._connectEdgeBackToChild(parentNode,childNode);
+    if (this.edgesData) {
+      // subscribe to new dataset
+      var me = this;
+      util.forEach(this.edgesListeners, function (callback, event) {
+        me.edgesData.on(event, callback);
+      });
 
-      // validate all edges in dynamicEdges
-      this._validateEdges(parentNode);
+      // draw all new nodes
+      var ids = this.edgesData.getIds();
+      this._addEdges(ids);
+    }
 
-      // undo the changes from the clustering operation on the parent node
-      parentNode.mass -= childNode.mass;
-      parentNode.clusterSize -= childNode.clusterSize;
-      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
+    this._reconnectEdges();
+  };
 
-      // 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());
+  /**
+   * Add edges
+   * @param {Number[] | String[]} ids
+   * @private
+   */
+  Network.prototype._addEdges = function (ids) {
+    var edges = this.edges,
+        edgesData = this.edgesData;
 
-      // remove node from the list
-      delete parentNode.containedNodes[containedNodeId];
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
 
-      // 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;
-          }
-        }
-      }
-      // if there are no others, remove the cluster session from the list
-      if (othersPresent == false) {
-        parentNode.clusterSessions.pop();
+      var oldEdge = edges[id];
+      if (oldEdge) {
+        oldEdge.disconnect();
       }
 
-      this._repositionBezierNodes(childNode);
-  //      this._repositionBezierNodes(parentNode);
-
-      // remove the clusterSession from the child node
-      childNode.clusterSession = 0;
-
-      // recalculate the size of the node on the next time the node is rendered
-      parentNode.clearSizeCache();
-
-      // restart the simulation to reorganise all nodes
-      this.moving = true;
+      var data = edgesData.get(id, {"showInternalIds" : true});
+      edges[id] = new Edge(data, this, this.constants);
     }
 
-    // check if a further expansion step is possible if recursivity is enabled
-    if (recursive == true) {
-      this._expandClusterNode(childNode,recursive,force,openAll);
+    this.moving = true;
+    this._updateValueRange(edges);
+    this._createBezierNodes();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this._updateCalculationNodes();
   };
 
-
   /**
-   * position the bezier nodes at the center of the edges
-   *
-   * @param node
+   * Update existing edges, or create them when not yet existing
+   * @param {Number[] | String[]} ids
    * @private
    */
-  exports._repositionBezierNodes = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      node.dynamicEdges[i].positionBezierNode();
-    }
-  };
-
+  Network.prototype._updateEdges = function (ids) {
+    var edges = this.edges,
+        edgesData = this.edgesData;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
 
-  /**
-   * 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();
+      var data = edgesData.get(id);
+      var edge = edges[id];
+      if (edge) {
+        // update edge
+        edge.disconnect();
+        edge.setProperties(data, this.constants);
+        edge.connect();
+      }
+      else {
+        // create edge
+        edge = new Edge(data, this, this.constants);
+        this.edges[id] = edge;
+      }
     }
-    else {
-      this._forceClustersByZoom();
+
+    this._createBezierNodes();
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
     }
+    this.moving = true;
+    this._updateValueRange(edges);
   };
 
-
   /**
-   * This function handles the clustering by zooming out, this is based on a minimum edge distance
-   *
+   * Remove existing edges. Non existing ids will be ignored
+   * @param {Number[] | String[]} ids
    * @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 (length < minLength) {
-              // first check which node is larger
-              var parentNode = edge.from;
-              var childNode = edge.to;
-              if (edge.to.mass > edge.from.mass) {
-                parentNode = edge.to;
-                childNode = edge.from;
-              }
-
-              if (childNode.dynamicEdgesLength == 1) {
-                this._addToCluster(parentNode,childNode,false);
-              }
-              else if (parentNode.dynamicEdgesLength == 1) {
-                this._addToCluster(childNode,parentNode,false);
-              }
-            }
-          }
+  Network.prototype._removeEdges = function (ids) {
+    var edges = this.edges;
+    for (var i = 0, len = ids.length; i < len; i++) {
+      var id = ids[i];
+      var edge = edges[id];
+      if (edge) {
+        if (edge.via != null) {
+          delete this.sectors['support']['nodes'][edge.via.id];
         }
+        edge.disconnect();
+        delete edges[id];
       }
     }
+
+    this.moving = true;
+    this._updateValueRange(edges);
+    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
+      this._resetLevels();
+      this._setupHierarchicalLayout();
+    }
+    this._updateCalculationNodes();
   };
 
   /**
-   * This function forces the network to cluster all nodes with only one connecting edge to their
-   * connected node.
-   *
+   * Reconnect all edges
    * @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];
-
-        // the edges can be swallowed by another decrease
-        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];
+  Network.prototype._reconnectEdges = function() {
+    var id,
+        nodes = this.nodes,
+        edges = this.edges;
+    for (id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        nodes[id].edges = [];
+      }
+    }
 
-          // group to the largest node
-          if (childNode.id != parentNode.id) {
-            if (parentNode.mass > childNode.mass) {
-              this._addToCluster(parentNode,childNode,true);
-            }
-            else {
-              this._addToCluster(childNode,parentNode,true);
-            }
-          }
-        }
+    for (id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        var edge = edges[id];
+        edge.from = null;
+        edge.to = null;
+        edge.connect();
       }
     }
   };
 
-
   /**
-   * 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
+   * Update the values of all object in the given array according to the current
+   * value range of the objects in the array.
+   * @param {Object} obj    An object containing a set of Edges or Nodes
+   *                        The objects must have a method getValue() and
+   *                        setValueRange(min, max).
    * @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;
-        }
-
+  Network.prototype._updateValueRange = function(obj) {
+    var id;
 
-        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
-          smallestNeighbour = neighbour.clusterSessions.length;
-          smallestNeighbourNode = neighbour;
+    // determine the range of the objects
+    var valueMin = undefined;
+    var valueMax = undefined;
+    for (id in obj) {
+      if (obj.hasOwnProperty(id)) {
+        var value = obj[id].getValue();
+        if (value !== undefined) {
+          valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
+          valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
         }
       }
     }
 
-    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
-      this._addToCluster(neighbour, node, true);
+    // adjust the range of all objects
+    if (valueMin !== undefined && valueMax !== undefined) {
+      for (id in obj) {
+        if (obj.hasOwnProperty(id)) {
+          obj[id].setValueRange(valueMin, valueMax);
+        }
+      }
     }
   };
 
-
   /**
-   * 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
+   * Redraw the network with the current data
+   * chart will be resized too.
    */
-  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);
-      }
-    }
+  Network.prototype.redraw = function() {
+    this.setSize(this.width, this.height);
+    this._redraw();
   };
 
   /**
-   * 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] |
+   * Redraw the network with the current data
    * @private
    */
-  exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
-    if (absorptionSizeOffset === undefined) {
-      absorptionSizeOffset = 0;
-    }
-    // we decide if the node is a hub
-    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
-      // initialize variables
-      var dx,dy,length;
-      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-      var allowCluster = false;
+  Network.prototype._redraw = function() {
+    var ctx = this.frame.canvas.getContext('2d');
+    // clear the canvas
+    var w = this.frame.canvas.width;
+    var h = this.frame.canvas.height;
+    ctx.clearRect(0, 0, w, h);
 
-      // 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);
-      }
+    // set scaling and translation
+    ctx.save();
+    ctx.translate(this.translation.x, this.translation.y);
+    ctx.scale(this.scale, this.scale);
 
-      // if the hub clustering is not forces, 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);
+    this.canvasTopLeft = {
+      "x": this._XconvertDOMtoCanvas(0),
+      "y": this._YconvertDOMtoCanvas(0)
+    };
+    this.canvasBottomRight = {
+      "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
+      "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
+    };
 
-                if (length < minLength) {
-                  allowCluster = true;
-                  break;
-                }
-              }
-            }
-          }
-        }
-      }
 
-      // start the clustering if allowed
-      if ((!force && allowCluster) || force) {
-        // we loop over all edges INITIALLY connected to this hub
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          edge = this.edges[edgesIdarray[j]];
-          // the edge can be clustered by this function in a previous loop
-          if (edge !== undefined) {
-            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
-            // 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);
-            }
-          }
-        }
-      }
+    this._doInAllSectors("_drawAllSectorNodes",ctx);
+    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
+      this._doInAllSectors("_drawEdges",ctx);
     }
-  };
-
-
-
-  /**
-   * 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;
 
-    // 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
-        this._addToContainedEdges(parentNode,childNode,edge);
-      }
-      else {
-        this._connectEdgeToCluster(parentNode,childNode,edge);
-      }
+    if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
+      this._doInAllSectors("_drawNodes",ctx,false);
     }
-    // a contained node has no dynamic edges.
-    childNode.dynamicEdges = [];
-
-    // remove circular edges from clusters
-    this._containCircularEdgesFromNode(parentNode,childNode);
 
+    if (this.controlNodesActive == true) {
+      this._doInAllSectors("_drawControlNodes",ctx);
+    }
 
-    // remove the childNode from the global nodes object
-    delete this.nodes[childNode.id];
+    this._doInSupportSector("_drawNodes",ctx,true);
+  //  this._drawTree(ctx,"#F00F0F");
 
-    // update the properties of the child and parent
-    var massBefore = parentNode.mass;
-    childNode.clusterSession = this.clusterSession;
-    parentNode.mass += childNode.mass;
-    parentNode.clusterSize += childNode.clusterSize;
-    parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+    // restore original scaling and translation
+    ctx.restore();
+  };
 
-    // 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 the translation of the network
+   * @param {Number} offsetX    Horizontal offset
+   * @param {Number} offsetY    Vertical offset
+   * @private
+   */
+  Network.prototype._setTranslation = function(offsetX, offsetY) {
+    if (this.translation === undefined) {
+      this.translation = {
+        x: 0,
+        y: 0
+      };
     }
 
-    // forced clusters only open from screen size and double tap
-    if (force == true) {
-      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
-      parentNode.formationScale = 0;
+    if (offsetX !== undefined) {
+      this.translation.x = offsetX;
     }
-    else {
-      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+    if (offsetY !== undefined) {
+      this.translation.y = offsetY;
     }
 
-    // recalculate the size of the node on the next time the node is rendered
-    parentNode.clearSizeCache();
+    this.emit('viewChanged');
+  };
 
-    // set the pop-out scale for the childnode
-    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+  /**
+   * Get the translation of the network
+   * @return {Object} translation    An object with parameters x and y, both a number
+   * @private
+   */
+  Network.prototype._getTranslation = function() {
+    return {
+      x: this.translation.x,
+      y: this.translation.y
+    };
+  };
 
-    // nullify the movement velocity of the child, this is to avoid hectic behaviour
-    childNode.clearVelocity();
+  /**
+   * Scale the network
+   * @param {Number} scale   Scaling factor 1.0 is unscaled
+   * @private
+   */
+  Network.prototype._setScale = function(scale) {
+    this.scale = scale;
+  };
 
-    // the mass has altered, preservation of energy dictates the velocity to be updated
-    parentNode.updateVelocity(massBefore);
+  /**
+   * Get the current scale of  the network
+   * @return {Number} scale   Scaling factor 1.0 is unscaled
+   * @private
+   */
+  Network.prototype._getScale = function() {
+    return this.scale;
+  };
 
-    // restart the simulation to reorganise all nodes
-    this.moving = true;
+  /**
+   * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
+   * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+   * @param {number} x
+   * @returns {number}
+   * @private
+   */
+  Network.prototype._XconvertDOMtoCanvas = function(x) {
+    return (x - this.translation.x) / this.scale;
   };
 
+  /**
+   * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+   * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
+   * @param {number} x
+   * @returns {number}
+   * @private
+   */
+  Network.prototype._XconvertCanvasToDOM = function(x) {
+    return x * this.scale + this.translation.x;
+  };
 
   /**
-   * 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().
+   * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
+   * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+   * @param {number} y
+   * @returns {number}
    * @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;
+  Network.prototype._YconvertDOMtoCanvas = function(y) {
+    return (y - this.translation.y) / this.scale;
+  };
 
-      // 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;
-            }
-          }
-        }
-      }
-      node.dynamicEdgesLength -= correction;
-    }
+  /**
+   * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+   * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
+   * @param {number} y
+   * @returns {number}
+   * @private
+   */
+  Network.prototype._YconvertCanvasToDOM = function(y) {
+    return y * this.scale + this.translation.y ;
   };
 
 
   /**
-   * 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
+   * @param {object} pos   = {x: number, y: number}
+   * @returns {{x: number, y: number}}
+   * @constructor
+   */
+  Network.prototype.canvasToDOM = function(pos) {
+    return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
+  }
+
+  /**
+   *
+   * @param {object} pos   = {x: number, y: number}
+   * @returns {{x: number, y: number}}
+   * @constructor
+   */
+  Network.prototype.DOMtoCanvas = function(pos) {
+    return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
+  }
+
+  /**
+   * Redraw all nodes
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Boolean} [alwaysShow]
    * @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] = []
+  Network.prototype._drawNodes = function(ctx,alwaysShow) {
+    if (alwaysShow === undefined) {
+      alwaysShow = false;
     }
-    // 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];
+    // first draw the unselected nodes
+    var nodes = this.nodes;
+    var selected = [];
 
-    // 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;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
+        if (nodes[id].isSelected()) {
+          selected.push(id);
+        }
+        else {
+          if (nodes[id].inArea() || alwaysShow) {
+            nodes[id].draw(ctx);
+          }
+        }
+      }
+    }
+
+    // draw the selected nodes on top
+    for (var s = 0, sMax = selected.length; s < sMax; s++) {
+      if (nodes[selected[s]].inArea() || alwaysShow) {
+        nodes[selected[s]].draw(ctx);
       }
     }
   };
 
   /**
-   * 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
+   * Redraw all edges
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
    * @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;
+  Network.prototype._drawEdges = function(ctx) {
+    var edges = this.edges;
+    for (var id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        var edge = edges[id];
+        edge.setScale(this.scale);
+        if (edge.connected) {
+          edges[id].draw(ctx);
+        }
       }
-
-      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
+   * Redraw all edges
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+   * @param {CanvasRenderingContext2D}   ctx
    * @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);
+  Network.prototype._drawControlNodes = function(ctx) {
+    var edges = this.edges;
+    for (var id in edges) {
+      if (edges.hasOwnProperty(id)) {
+        edges[id]._drawControlNodes(ctx);
       }
     }
   };
 
-
   /**
-   * 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
+   * Find a stable position for all nodes
    * @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] = [];
+  Network.prototype._stabilize = function() {
+    if (this.constants.freezeForStabilization == true) {
+      this._freezeDefinedNodes();
     }
-    parentNode.reroutedEdges[childNode.id].push(edge);
-
-    // this edge becomes part of the dynamicEdges of the cluster node
-    parentNode.dynamicEdges.push(edge);
-   };
-
 
+    // find stable position
+    var count = 0;
+    while (this.moving && count < this.constants.stabilizationIterations) {
+      this._physicsTick();
+      count++;
+    }
+    this.zoomExtent(false,true);
+    if (this.constants.freezeForStabilization == true) {
+      this._restoreFrozenNodes();
+    }
+    this.emit("stabilized",{iterations:count});
+  };
 
   /**
-   * This function connects an edge that was connected to a cluster node back to the child node.
+   * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
+   * because only the supportnodes for the smoothCurves have to settle.
    *
-   * @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;
-        }
-
-        // append this edge to the list of edges connecting to the childnode
-        childNode.dynamicEdges.push(edge);
-
-        // 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;
-          }
+  Network.prototype._freezeDefinedNodes = function() {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        if (nodes[id].x != null && nodes[id].y != null) {
+          nodes[id].fixedData.x = nodes[id].xFixed;
+          nodes[id].fixedData.y = nodes[id].yFixed;
+          nodes[id].xFixed = true;
+          nodes[id].yFixed = true;
         }
       }
-      // remove the entry from the rerouted edges
-      delete parentNode.reroutedEdges[childNode.id];
     }
   };
 
-
   /**
-   * 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
+   * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
    *
-   * @param parentNode    | Node object
    * @private
    */
-  exports._validateEdges = function(parentNode) {
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
-        parentNode.dynamicEdges.splice(i,1);
+  Network.prototype._restoreFrozenNodes = function() {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id)) {
+        if (nodes[id].fixedData.x != null) {
+          nodes[id].xFixed = nodes[id].fixedData.x;
+          nodes[id].yFixed = nodes[id].fixedData.y;
+        }
       }
     }
   };
 
 
   /**
-   * 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     |
+   * Check if any of the nodes is still moving
+   * @param {number} vmin   the minimum velocity considered as 'moving'
+   * @return {boolean}      true if moving, false if non of the nodes is moving
    * @private
    */
-  exports._releaseContainedEdges = function(parentNode, childNode) {
-    for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
-      var edge = parentNode.containedEdges[childNode.id][i];
-
-      // put the edge back in the global edges object
-      this.edges[edge.id] = edge;
-
-      // put the edge back in the dynamic edges of the child and parent
-      childNode.dynamicEdges.push(edge);
-      parentNode.dynamicEdges.push(edge);
+  Network.prototype._isMoving = function(vmin) {
+    var nodes = this.nodes;
+    for (var id in nodes) {
+      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
+        return true;
+      }
     }
-    // remove the entry from the contained edges
-    delete parentNode.containedEdges[childNode.id];
-
+    return false;
   };
 
 
-
-
-  // ------------------- UTILITY FUNCTIONS ---------------------------- //
-
-
   /**
-   * This updates the node labels for all nodes (for debugging purposes)
+   * /**
+   * Perform one discrete step for all nodes
+   *
+   * @private
    */
-  exports.updateLabels = function() {
+  Network.prototype._discreteStepNodes = function() {
+    var interval = this.physicsDiscreteStepsize;
+    var nodes = this.nodes;
     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),"]");
+    var nodesPresent = false;
+
+    if (this.constants.maxVelocity > 0) {
+      for (nodeId in nodes) {
+        if (nodes.hasOwnProperty(nodeId)) {
+          nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
+          nodesPresent = true;
+        }
+      }
+    }
+    else {
+      for (nodeId in nodes) {
+        if (nodes.hasOwnProperty(nodeId)) {
+          nodes[nodeId].discreteStep(interval);
+          nodesPresent = true;
         }
       }
     }
 
-    // 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);
-          }
-        }
-      }
-    }
-
-  //    /* 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;
-
-    // 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]);
-          }
-        }
+    if (nodesPresent == true) {
+      var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
+      if (vminCorrected > 0.5*this.constants.maxVelocity) {
+        this.moving = true;
       }
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      // if a cluster was formed, we increase the clusterSession
-      if (this.nodeIndices.length != amountOfNodes) {
-        this.clusterSession += 1;
+      else {
+        this.moving = this._isMoving(vminCorrected) || this.constants.configurePhysics;
       }
     }
   };
 
-
-
   /**
-   * This function determines if the cluster we want to decluster is in the active area
-   * this means around the zoom center
+   * A single simulation step (or "tick") in the physics simulation
    *
-   * @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
-      )
-  };
-
-
-  /**
-   * 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.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);
+  Network.prototype._physicsTick = function() {
+    if (!this.freezeSimulation) {
+      if (this.moving) {
+        this._doInAllActiveSectors("_initializeForceCalculation");
+        this._doInAllActiveSectors("_discreteStepNodes");
+        if (this.constants.smoothCurves) {
+          this._doInSupportSector("_discreteStepNodes");
+        }
+        this._findCenter(this._getRange())
       }
     }
   };
 
 
   /**
-   * 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%)
+   * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
+   * It reschedules itself at the beginning of the function
    *
    * @private
    */
-  exports._getHubSize = function() {
-    var average = 0;
-    var averageSquared = 0;
-    var hubCounter = 0;
-    var largestHub = 0;
+  Network.prototype._animationStep = function() {
+    // reset the timer so a new scheduled animation step can be set
+    this.timer = undefined;
+    // handle the keyboad movement
+    this._handleNavigation();
 
-    for (var i = 0; i < this.nodeIndices.length; i++) {
+    // this schedules a new animation step
+    this.start();
 
-      var node = this.nodes[this.nodeIndices[i]];
-      if (node.dynamicEdgesLength > largestHub) {
-        largestHub = node.dynamicEdgesLength;
-      }
-      average += node.dynamicEdgesLength;
-      averageSquared += Math.pow(node.dynamicEdgesLength,2);
-      hubCounter += 1;
+    // start the physics simulation
+    var calculationTime = Date.now();
+    var maxSteps = 1;
+    this._physicsTick();
+    var timeRequired = Date.now() - calculationTime;
+    while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
+      this._physicsTick();
+      timeRequired = Date.now() - calculationTime;
+      maxSteps++;
     }
-    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;
-    }
+    // start the rendering process
+    var renderTime = Date.now();
+    this._redraw();
+    this.renderTime = Date.now() - renderTime;
 
-  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
-  //  console.log("hubThreshold:",this.hubThreshold);
   };
 
+  if (typeof window !== 'undefined') {
+    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                                   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  }
 
   /**
-   * 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
+   * Schedule a animation step with the refreshrate interval.
    */
-  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;
+  Network.prototype.start = function() {
+    if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
+      if (!this.timer) {
+        var ua = navigator.userAgent.toLowerCase();
+
+        var requiresTimeout = false;
+        if (ua.indexOf('msie 9.0') != -1) { // IE 9
+          requiresTimeout = true;
+        }
+        else if (ua.indexOf('safari') != -1) {  // safari
+          if (ua.indexOf('chrome') <= -1) {
+            requiresTimeout = true;
           }
         }
-      }
-    }
-  };
 
-  /**
-   * 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;
+        if (requiresTimeout == true) {
+          this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
+        }
+        else{
+          this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
         }
-        total += 1;
       }
     }
-    return chains/total;
+    else {
+      this._redraw();
+    }
   };
 
 
-/***/ },
-/* 44 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-
-  /**
-   * 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.
+   * Move the network according to the keyboard presses.
    *
    * @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;
+  Network.prototype._handleNavigation = function() {
+    if (this.xIncrement != 0 || this.yIncrement != 0) {
+      var translation = this._getTranslation();
+      this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
+    }
+    if (this.zoomIncrement != 0) {
+      var center = {
+        x: this.frame.canvas.clientWidth / 2,
+        y: this.frame.canvas.clientHeight / 2
+      };
+      this._zoom(this.scale*(1 + this.zoomIncrement), center);
+    }
   };
 
 
   /**
-   *  /**
-   * 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
+   *  Freeze the _animationStep
    */
-  exports._switchToSector = function(sectorId, sectorType) {
-    if (sectorType === undefined || sectorType == "active") {
-      this._switchToActiveSector(sectorId);
+  Network.prototype.toggleFreeze = function() {
+    if (this.freezeSimulation == false) {
+      this.freezeSimulation = true;
     }
     else {
-      this._switchToFrozenSector(sectorId);
+      this.freezeSimulation = false;
+      this.start();
     }
   };
 
 
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied active sector.
+   * This function cleans the support nodes if they are not needed and adds them when they are.
    *
-   * @param sectorId
+   * @param {boolean} [disableStart]
    * @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"];
-  };
+  Network.prototype._configureSmoothCurves = function(disableStart) {
+    if (disableStart === undefined) {
+      disableStart = true;
+    }
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      this._createBezierNodes();
+      // cleanup unused support nodes
+      for (var nodeId in this.sectors['support']['nodes']) {
+        if (this.sectors['support']['nodes'].hasOwnProperty(nodeId)) {
+          if (this.edges[this.sectors['support']['nodes'][nodeId]] === undefined) {
+            delete this.sectors['support']['nodes'][nodeId];
+          }
+        }
+      }
+    }
+    else {
+      // delete the support nodes
+      this.sectors['support']['nodes'] = {};
+      for (var edgeId in this.edges) {
+        if (this.edges.hasOwnProperty(edgeId)) {
+          this.edges[edgeId].smooth = false;
+          this.edges[edgeId].via = null;
+        }
+      }
+    }
 
 
-  /**
-   * 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._updateCalculationNodes();
+    if (!disableStart) {
+      this.moving = true;
+      this.start();
+    }
   };
 
 
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied frozen sector.
+   * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
+   * are used for the force calculation.
    *
-   * @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"];
+  Network.prototype._createBezierNodes = function() {
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      for (var edgeId in this.edges) {
+        if (this.edges.hasOwnProperty(edgeId)) {
+          var edge = this.edges[edgeId];
+          if (edge.via == null) {
+            edge.smooth = true;
+            var nodeId = "edgeId:".concat(edge.id);
+            this.sectors['support']['nodes'][nodeId] = new Node(
+                    {id:nodeId,
+                      mass:1,
+                      shape:'circle',
+                      image:"",
+                      internalMultiplier:1
+                    },{},{},this.constants);
+            edge.via = this.sectors['support']['nodes'][nodeId];
+            edge.via.parentEdgeId = edge.id;
+            edge.positionBezierNode();
+          }
+        }
+      }
+    }
   };
 
-
   /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the currently active sector.
+   * load the functions that load the mixins into the prototype.
    *
    * @private
    */
-  exports._loadLatestSector = function() {
-    this._switchToSector(this._sector());
+  Network.prototype._initializeMixinLoaders = function () {
+    for (var mixin in MixinLoader) {
+      if (MixinLoader.hasOwnProperty(mixin)) {
+        Network.prototype[mixin] = MixinLoader[mixin];
+      }
+    }
   };
 
-
   /**
-   * This function returns the currently active sector Id
-   *
-   * @returns {String}
-   * @private
+   * Load the XY positions of the nodes into the dataset.
    */
-  exports._sector = function() {
-    return this.activeSector[this.activeSector.length-1];
+  Network.prototype.storePosition = function() {
+    var dataArray = [];
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        var allowedToMoveX = !this.nodes.xFixed;
+        var allowedToMoveY = !this.nodes.yFixed;
+        if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
+          dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
+        }
+      }
+    }
+    this.nodesData.update(dataArray);
   };
 
 
   /**
-   * This function returns the previously active sector Id
+   * Center a node in view.
    *
-   * @returns {String}
-   * @private
+   * @param {Number} nodeId
+   * @param {Number} [zoomLevel]
    */
-  exports._previousSector = function() {
-    if (this.activeSector.length > 1) {
-      return this.activeSector[this.activeSector.length-2];
+  Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
+    if (this.nodes.hasOwnProperty(nodeId)) {
+      if (zoomLevel === undefined) {
+        zoomLevel = this._getScale();
+      }
+      var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
+
+      var requiredScale = zoomLevel;
+      this._setScale(requiredScale);
+
+      var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
+      var translation = this._getTranslation();
+
+      var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
+                                y:canvasCenter.y - nodePosition.y};
+
+      this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
+                           translation.y + requiredScale * distanceFromCenter.y);
+      this.redraw();
     }
     else {
-      throw new TypeError('there are not enough sectors in the this.activeSector array.');
+      console.log("This nodeId cannot be found.")
     }
   };
 
+  module.exports = Network;
 
-  /**
-   * 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);
-  };
 
+/***/ },
+/* 38 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(39);
 
   /**
-   * We remove the currently active sector id from the active sector stack. This happens when
-   * we reactivate the previously active sector
+   * @class Edge
    *
-   * @private
+   * A edge connects two nodes
+   * @param {Object} properties     Object with properties. Must contain
+   *                                At least properties from and to.
+   *                                Available properties: from (number),
+   *                                to (number), label (string, color (string),
+   *                                width (number), style (string),
+   *                                length (number), title (string)
+   * @param {Network} network       A Network object, used to find and edge to
+   *                                nodes.
+   * @param {Object} constants      An object with default values for
+   *                                example for the color
    */
-  exports._forgetLastSector = function() {
-    this.activeSector.pop();
-  };
+  function Edge (properties, network, constants) {
+    if (!network) {
+      throw "No network provided";
+    }
+    this.network = network;
 
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
 
-  /**
-   * 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};
+    // initialize variables
+    this.id     = undefined;
+    this.fromId = undefined;
+    this.toId   = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
+    this.hoverWidth = constants.edges.hoverWidth;
+    this.value  = undefined;
+    this.length = constants.physics.springLength;
+    this.customLength = false;
+    this.selected = false;
+    this.hover = false;
+    this.smoothCurves = constants.smoothCurves;
+    this.dynamicSmoothCurves = constants.dynamicSmoothCurves;
+    this.arrowScaleFactor = constants.edges.arrowScaleFactor;
+    this.inheritColor = constants.edges.inheritColor;
 
-    // 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;
-  };
+    this.from = null;   // a node
+    this.to = null;     // a node
+    this.via = null;    // a temp node
 
+    // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+    // by storing the original information we can revert to the original connection when the cluser is opened.
+    this.originalFromId = [];
+    this.originalToId = [];
 
-  /**
-   * 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.connected = false;
 
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-  /**
-   * 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];
-  };
+    this.color       = {color:constants.edges.color.color,
+                        highlight:constants.edges.color.highlight,
+                        hover:constants.edges.color.hover};
+    this.widthFixed  = false;
+    this.lengthFixed = false;
+
+    this.setProperties(properties, constants);
 
+    this.controlNodesEnabled = false;
+    this.controlNodes = {from:null, to:null, positions:{}};
+    this.connectedNode = null;
+  }
 
   /**
-   * 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
+   * Set or overwrite properties for the edge
+   * @param {Object} properties  an object with properties
+   * @param {Object} constants   and object with default, global properties
    */
-  exports._freezeSector = function(sectorId) {
-    // we move the set references from the active to the frozen stack.
-    this.sectors["frozen"][sectorId] = this.sectors["active"][sectorId];
+  Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
+    }
 
-    // we have moved the sector data into the frozen set, we now remove it from the active set
-    this._deleteActiveSector(sectorId);
-  };
+    if (properties.from !== undefined)           {this.fromId = properties.from;}
+    if (properties.to !== undefined)             {this.toId = properties.to;}
 
+    if (properties.id !== undefined)             {this.id = properties.id;}
+    if (properties.style !== undefined)          {this.style = properties.style;}
+    if (properties.label !== undefined)          {this.label = properties.label;}
 
-  /**
-   * 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];
+    if (this.label) {
+      this.fontSize = constants.edges.fontSize;
+      this.fontFace = constants.edges.fontFace;
+      this.fontColor = constants.edges.fontColor;
+      this.fontFill = constants.edges.fontFill;
 
-    // we have moved the sector data into the active set, we now remove it from the frozen stack
-    this._deleteFrozenSector(sectorId);
-  };
+      if (properties.fontColor !== undefined)  {this.fontColor = properties.fontColor;}
+      if (properties.fontSize !== undefined)   {this.fontSize = properties.fontSize;}
+      if (properties.fontFace !== undefined)   {this.fontFace = properties.fontFace;}
+      if (properties.fontFill !== undefined)   {this.fontFill = properties.fontFill;}
+    }
 
+    if (properties.title !== undefined)        {this.title = properties.title;}
+    if (properties.width !== undefined)        {this.width = properties.width;}
+    if (properties.widthSelectionMultiplier !== undefined)
+                                               {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
+    if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
+    if (properties.value !== undefined)        {this.value = properties.value;}
+    if (properties.length !== undefined)       {this.length = properties.length;
+                                                this.customLength = true;}
 
-  /**
-   * 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];
-      }
+    // scale the arrow
+    if (properties.arrowScaleFactor !== undefined)       {this.arrowScaleFactor = properties.arrowScaleFactor;}
+
+    if (properties.inheritColor !== undefined)       {this.inheritColor = properties.inheritColor;}
+
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dash) {
+      if (properties.dash.length !== undefined)    {this.dash.length = properties.dash.length;}
+      if (properties.dash.gap !== undefined)       {this.dash.gap = properties.dash.gap;}
+      if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
     }
 
-    // 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];
+    if (properties.color !== undefined) {
+      if (util.isString(properties.color)) {
+        this.color.color = properties.color;
+        this.color.highlight = properties.color;
+      }
+      else {
+        if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+        if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+        if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
       }
     }
 
-    // merge the nodeIndices
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
-    }
-  };
+    // A node is connected when it has a from and to node.
+    this.connect();
 
+    this.widthFixed = this.widthFixed || (properties.width !== undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
 
-  /**
-   * 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);
-  };
+    this.widthSelected = this.width * this.widthSelectionMultiplier;
 
+    // set draw method based on style
+    switch (this.style) {
+      case 'line':          this.draw = this._drawLine; break;
+      case 'arrow':         this.draw = this._drawArrow; break;
+      case 'arrow-center':  this.draw = this._drawArrowCenter; break;
+      case 'dash-line':     this.draw = this._drawDashLine; break;
+      default:              this.draw = this._drawLine; break;
+    }
+  };
 
   /**
-   * We create a new active sector from the node that we want to open.
-   *
-   * @param node
-   * @private
+   * Connect an edge to its nodes
    */
-  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);
+  Edge.prototype.connect = function () {
+    this.disconnect();
 
-    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
-    this._switchToSector(this._sector());
+    this.from = this.network.nodes[this.fromId] || null;
+    this.to = this.network.nodes[this.toId] || null;
+    this.connected = (this.from && this.to);
 
-    // finally we add the node we removed from our previous active sector to the new active sector
-    this.nodes[node.id] = node;
+    if (this.connected) {
+      this.from.attachEdge(this);
+      this.to.attachEdge(this);
+    }
+    else {
+      if (this.from) {
+        this.from.detachEdge(this);
+      }
+      if (this.to) {
+        this.to.detachEdge(this);
+      }
+    }
   };
 
-
   /**
-   * 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
+   * Disconnect an edge from its nodes
    */
-  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);
+  Edge.prototype.disconnect = function () {
+    if (this.from) {
+      this.from.detachEdge(this);
+      this.from = null;
+    }
+    if (this.to) {
+      this.to.detachEdge(this);
+      this.to = null;
+    }
 
-        // we load the references from the newly active sector into the global references
-        this._switchToSector(previousSector);
+    this.connected = false;
+  };
 
-        // we forget the previously active sector because we reverted to the one before
-        this._forgetLastSector();
+  /**
+   * get the title of this edge.
+   * @return {string} title    The title of the edge, or undefined when no title
+   *                           has been set.
+   */
+  Edge.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
+  };
 
-        // finally, we update the node index list.
-        this._updateNodeIndexList();
 
-        // we refresh the list with calulation nodes and calculation node indices.
-        this._updateCalculationNodes();
-      }
-    }
+  /**
+   * Retrieve the value of the edge. Can be undefined
+   * @return {Number} value
+   */
+  Edge.prototype.getValue = function() {
+    return this.value;
   };
 
-
   /**
-   * 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
+   * Adjust the value range of the edge. The edge will adjust it's width
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
    */
-  exports._doInAllActiveSectors = function(runFunction,argument) {
-    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);
-          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) {
-            this[runFunction](args[0],args[1]);
-          }
-          else {
-            this[runFunction](argument);
-          }
-        }
-      }
+  Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+      var scale = (this.widthMax - this.widthMin) / (max - min);
+      this.width = (this.value - min) * scale + this.widthMin;
     }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
   };
 
+  /**
+   * Redraw a edge
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
+  };
 
   /**
-   * 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
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top
+   * @return {boolean}     True if location is located on the edge
    */
-  exports._doInSupportSector = function(runFunction,argument) {
-    if (argument === undefined) {
-      this._switchToSupportSector();
-      this[runFunction]();
+  Edge.prototype.isOverlappingWith = function(obj) {
+    if (this.connected) {
+      var distMax = 10;
+      var xFrom = this.from.x;
+      var yFrom = this.from.y;
+      var xTo = this.to.x;
+      var yTo = this.to.y;
+      var xObj = obj.left;
+      var yObj = obj.top;
+
+      var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+      return (dist < distMax);
     }
     else {
-      this._switchToSupportSector();
-      var args = Array.prototype.splice.call(arguments, 1);
-      if (args.length > 1) {
-        this[runFunction](args[0],args[1]);
-      }
-      else {
-        this[runFunction](argument);
-      }
+      return false
     }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
   };
 
+  Edge.prototype._getColor = function() {
+    var colorObj = this.color;
+    if (this.inheritColor == "to") {
+      colorObj = {
+        highlight: this.to.color.highlight.border,
+        hover: this.to.color.hover.border,
+        color: this.to.color.border
+      };
+    }
+    else if (this.inheritColor == "from" || this.inheritColor == true) {
+      colorObj = {
+        highlight: this.from.color.highlight.border,
+        hover: this.from.color.hover.border,
+        color: this.from.color.border
+      };
+    }
+
+    if (this.selected == true)   {return colorObj.highlight;}
+    else if (this.hover == true) {return colorObj.hover;}
+    else                         {return colorObj.color;}
+  }
+
 
   /**
-   * 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
+   * Redraw a edge as a line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    * @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]();
+  Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this._getColor();
+    ctx.lineWidth   = this._getLineWidth();
+
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
+
+      // draw label
+      var point;
+      if (this.label) {
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
         }
+        this._label(ctx, this.label, point.x, point.y);
       }
     }
     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);
-          }
-        }
+      var x, y;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
       }
+      this._circle(ctx, x, y, radius);
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      this._label(ctx, this.label, point.x, point.y);
     }
-    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
+   * Get the line width of the edge. Depends on width and whether one of the
+   * connected nodes is selected.
+   * @return {Number} width
    * @private
    */
-  exports._doInAllSectors = function(runFunction,argument) {
-    var args = Array.prototype.splice.call(arguments, 1);
-    if (argument === undefined) {
-      this._doInAllActiveSectors(runFunction);
-      this._doInAllFrozenSectors(runFunction);
+  Edge.prototype._getLineWidth = function() {
+    if (this.selected == true) {
+      return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
     }
     else {
-      if (args.length > 1) {
-        this._doInAllActiveSectors(runFunction,args[0],args[1]);
-        this._doInAllFrozenSectors(runFunction,args[0],args[1]);
+      if (this.hover == true) {
+        return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
       }
       else {
-        this._doInAllActiveSectors(runFunction,argument);
-        this._doInAllFrozenSectors(runFunction,argument);
+        return this.width*this.networkScaleInv;
       }
     }
   };
 
+  Edge.prototype._getViaCoordinates = function () {
+    var xVia = null;
+    var yVia = null;
+    var factor = this.smoothCurves.roundness;
+    var type = this.smoothCurves.type;
+    if (factor == 0) {
+      return {x:null,y:null};
+    }
 
-  /**
-   * 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"];
-  };
-
-
-  /**
-   * 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) {
-
-          this._switchToSector(sector,sectorType);
-
-          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.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
-          node.setScale(this.scale);
-          node._drawCircle(ctx);
+    var dx = Math.abs(this.from.x - this.to.x);
+    var dy = Math.abs(this.from.y - this.to.y);
+    if (type == 'discrete' || type == 'diagonalCross') {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+          }
+        }
+        if (type == "discrete") {
+          xVia = dx < factor * dy ? this.from.x : xVia;
         }
       }
-    }
-  };
-
-  exports._drawAllSectorNodes = function(ctx) {
-    this._drawSectorNodes(ctx,"frozen");
-    this._drawSectorNodes(ctx,"active");
-    this._loadLatestSector();
-  };
-
-
-/***/ },
-/* 45 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Node = __webpack_require__(30);
-
-  /**
-   * 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);
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
+          else if (this.from.x > this.to.x) {
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+          }
+        }
+        if (type == "discrete") {
+          yVia = dy < factor * dx ? this.from.y : yVia;
         }
       }
     }
-  };
-
-  /**
-   * 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
-    };
-  };
-
-
-  /**
-   * 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 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 if (type == "straightCross") {
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        xVia = this.from.x;
+        yVia = this.to.y
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        xVia = this.to.x;
+        yVia = this.from.y;
+      }
     }
-    else {
-      return null;
+    else if (type == 'horizontal') {
+      xVia = this.to.x;
+      yVia = this.from.y;
     }
-  };
-
-
-  /**
-   * 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);
+    else if (type == 'vertical') {
+      xVia = this.from.x;
+      yVia = this.to.y;
+    }
+    else { // continuous
+      if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(1)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(2)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y - factor * dy;
+            xVia = this.to.x > xVia ? this.to.x :xVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(3)
+            xVia = this.from.x + factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x < xVia ? this.to.x : xVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(4, this.from.x, this.to.x)
+            xVia = this.from.x - factor * dy;
+            yVia = this.from.y + factor * dy;
+            xVia = this.to.x > xVia ? this.to.x : xVia;
+          }
+        }
+      }
+      else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+        if (this.from.y > this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(5)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(6)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y - factor * dx;
+            yVia = this.to.y > yVia ? this.to.y : yVia;
+          }
+        }
+        else if (this.from.y < this.to.y) {
+          if (this.from.x < this.to.x) {
+  //          console.log(7)
+            xVia = this.from.x + factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
+          else if (this.from.x > this.to.x) {
+  //          console.log(8)
+            xVia = this.from.x - factor * dx;
+            yVia = this.from.y + factor * dx;
+            yVia = this.to.y < yVia ? this.to.y : yVia;
+          }
         }
       }
     }
-  };
 
 
-  /**
-   * 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;
-  };
+    return {x:xVia, y:yVia};
+  }
 
   /**
-   * 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}
+   * Draw a line between two nodes
+   * @param {CanvasRenderingContext2D} ctx
    * @private
    */
-  exports._getEdgeAt = function(pointer) {
-    var positionObject = this._pointerToPositionObject(pointer);
-    var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
-
-    if (overlappingEdges.length > 0) {
-      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
+  Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    if (this.smoothCurves.enabled == true) {
+      if (this.smoothCurves.dynamic == false) {
+        var via = this._getViaCoordinates();
+        if (via.x == null) {
+          ctx.lineTo(this.to.x, this.to.y);
+          ctx.stroke();
+          return null;
+        }
+        else {
+  //        this.via.x = via.x;
+  //        this.via.y = via.y;
+          ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+          ctx.stroke();
+          return via;
+        }
+      }
+      else {
+        ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+        ctx.stroke();
+        return this.via;
+      }
     }
     else {
+      ctx.lineTo(this.to.x, this.to.y);
+      ctx.stroke();
       return null;
     }
   };
 
-
   /**
-   * Add object to the selection array.
-   *
-   * @param obj
+   * Draw a line from a node to itself, a circle
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
    * @private
    */
-  exports._addToSelection = function(obj) {
-    if (obj instanceof Node) {
-      this.selectionObj.nodes[obj.id] = obj;
-    }
-    else {
-      this.selectionObj.edges[obj.id] = obj;
-    }
+  Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
   };
 
   /**
-   * Add object to the selection array.
-   *
-   * @param obj
+   * Draw label with white background and with the middle at (x, y)
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {Number} x
+   * @param {Number} y
    * @private
    */
-  exports._addToHover = function(obj) {
-    if (obj instanceof Node) {
-      this.hoverObj.nodes[obj.id] = obj;
-    }
-    else {
-      this.hoverObj.edges[obj.id] = obj;
-    }
-  };
+  Edge.prototype._label = function (ctx, text, x, y) {
+    if (text) {
+      // TODO: cache the calculated size
+      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+          this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontFill;
+      var width = ctx.measureText(text).width;
+      var height = this.fontSize;
+      var left = x - width / 2;
+      var top = y - height / 2;
 
+      ctx.fillRect(left, top, width, height);
 
-  /**
-   * 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];
+      // draw text
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillText(text, left, top);
     }
   };
 
   /**
-   * Unselect all. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * Redraw a edge as a dashed line
+   * Draw this edge in the given canvas
+   * @author David Jordan
+   * @date 2012-08-08
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    * @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();
+  Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;}
+
+    ctx.lineWidth = this._getLineWidth();
+
+    var via = null;
+    // only firefox and chrome support this method, else we use the legacy one.
+    if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+      // configure the dash pattern
+      var pattern = [0];
+      if (this.dash.length !== undefined && this.dash.gap !== undefined) {
+        pattern = [this.dash.length,this.dash.gap];
       }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        this.selectionObj.edges[edgeId].unselect();
+      else {
+        pattern = [5,5];
       }
-    }
 
-    this.selectionObj = {nodes:{},edges:{}};
+      // set dash settings for chrome or firefox
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash(pattern);
+        ctx.lineDashOffset = 0;
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+      } else { //Firefox
+        ctx.mozDash = pattern;
+        ctx.mozDashOffset = 0;
+      }
 
-  /**
-   * Unselect all clusters. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectClusters = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
+      // draw the line
+      via = this._line(ctx);
 
-    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]);
-        }
+      // restore the dash settings.
+      if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+        ctx.setLineDash([0]);
+        ctx.lineDashOffset = 0;
+
+      } else { //Firefox
+        ctx.mozDash = [0];
+        ctx.mozDashOffset = 0;
       }
     }
-
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
+    else { // unsupporting smooth lines
+      // draw dashed line
+      ctx.beginPath();
+      ctx.lineCap = 'round';
+      if (this.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
+      }
+      else if (this.dash.length !== undefined && this.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+      {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+            [this.dash.length,this.dash.gap]);
+      }
+      else //If all else fails draw a line
+      {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+      }
+      ctx.stroke();
     }
-  };
-
 
-  /**
-   * 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;
+    // draw label
+    if (this.label) {
+      var point;
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
       }
+      this._label(ctx, this.label, point.x, point.y);
     }
-    return count;
   };
 
   /**
-   * return the selected node
-   *
-   * @returns {number}
+   * Get a point on a line
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
    * @private
    */
-  exports._getSelectedNode = function() {
-    for (var nodeId in this.selectionObj.nodes) {
-      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        return this.selectionObj.nodes[nodeId];
-      }
+  Edge.prototype._pointOnLine = function (percentage) {
+    return {
+      x: (1 - percentage) * this.from.x + percentage * this.to.x,
+      y: (1 - percentage) * this.from.y + percentage * this.to.y
     }
-    return null;
   };
 
   /**
-   * return the selected edge
-   *
-   * @returns {number}
+   * Get a point on a circle
+   * @param {Number} x
+   * @param {Number} y
+   * @param {Number} radius
+   * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+   * @return {Object} point
    * @private
    */
-  exports._getSelectedEdge = function() {
-    for (var edgeId in this.selectionObj.edges) {
-      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        return this.selectionObj.edges[edgeId];
-      }
+  Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+      x: x + radius * Math.cos(angle),
+      y: y - radius * Math.sin(angle)
     }
-    return null;
   };
 
-
   /**
-   * return the number of selected edges
-   *
-   * @returns {number}
+   * Redraw a edge as a line with an arrow halfway the line
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    * @private
    */
-  exports._getSelectedEdgeCount = function() {
-    var count = 0;
-    for (var edgeId in this.selectionObj.edges) {
-      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        count += 1;
+  Edge.prototype._drawArrowCenter = function(ctx) {
+    var point;
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+    ctx.lineWidth = this._getLineWidth();
+
+    if (this.from != this.to) {
+      // draw line
+      var via = this._line(ctx);
+
+      var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      // draw an arrow halfway the line
+      if (this.smoothCurves.enabled == true && via != null) {
+        var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+        var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+        point = {x:midpointX, y:midpointY};
+      }
+      else {
+        point = this._pointOnLine(0.5);
       }
-    }
-    return count;
-  };
 
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
 
-  /**
-   * 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;
+      // draw label
+      if (this.label) {
+        this._label(ctx, this.label, point.x, point.y);
       }
     }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        count += 1;
+    else {
+      // draw circle
+      var x, y;
+      var radius = 0.25 * Math.max(100,this.length);
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+      }
+      this._circle(ctx, x, y, radius);
+
+      // draw all arrows
+      var angle = 0.2 * Math.PI;
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      point = this._pointOnCircle(x, y, radius, 0.5);
+      ctx.arrow(point.x, point.y, angle, length);
+      ctx.fill();
+      ctx.stroke();
+
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
       }
     }
-    return count;
   };
 
+
+
   /**
-   * Check if anything is selected
-   *
-   * @returns {boolean}
+   * Redraw a edge as a line with an arrow
+   * Draw this edge in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
    * @private
    */
-  exports._selectionIsEmpty = function() {
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        return false;
+  Edge.prototype._drawArrow = function(ctx) {
+    // set style
+    if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+    else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+    else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+
+    ctx.lineWidth = this._getLineWidth();
+
+    var angle, length;
+    //draw a line
+    if (this.from != this.to) {
+      angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+      var dx = (this.to.x - this.from.x);
+      var dy = (this.to.y - this.from.y);
+      var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+
+      var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+      var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+      var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+      var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+      var via;
+      if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true ) {
+        via = this.via;
+      }
+      else if (this.smoothCurves.enabled == true) {
+        via = this._getViaCoordinates();
+      }
+
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+        dx = (this.to.x - via.x);
+        dy = (this.to.y - via.y);
+        edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+      }
+      var toBorderDist = this.to.distanceToBorder(ctx, angle);
+      var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+
+      var xTo,yTo;
+      if (this.smoothCurves.enabled == true && via.x != null) {
+       xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+       yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+      }
+      else {
+        xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+        yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+      }
+
+      ctx.beginPath();
+      ctx.moveTo(xFrom,yFrom);
+      if (this.smoothCurves.enabled == true && via.x != null) {
+        ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+      }
+      else {
+        ctx.lineTo(xTo, yTo);
+      }
+      ctx.stroke();
+
+      // draw arrow at the end of the line
+      length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(xTo, yTo, angle, length);
+      ctx.fill();
+      ctx.stroke();
+
+      // draw label
+      if (this.label) {
+        var point;
+        if (this.smoothCurves.enabled == true && via != null) {
+          var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+          var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+          point = {x:midpointX, y:midpointY};
+        }
+        else {
+          point = this._pointOnLine(0.5);
+        }
+        this._label(ctx, this.label, point.x, point.y);
       }
     }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        return false;
+    else {
+      // draw circle
+      var node = this.from;
+      var x, y, arrow;
+      var radius = 0.25 * Math.max(100,this.length);
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width * 0.5;
+        y = node.y - radius;
+        arrow = {
+          x: x,
+          y: node.y,
+          angle: 0.9 * Math.PI
+        };
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height * 0.5;
+        arrow = {
+          x: node.x,
+          y: y,
+          angle: 0.6 * Math.PI
+        };
+      }
+      ctx.beginPath();
+      // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+      ctx.stroke();
+
+      // draw all arrows
+      var length = (10 + 5 * this.width) * this.arrowScaleFactor;
+      ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+      ctx.fill();
+      ctx.stroke();
+
+      // draw label
+      if (this.label) {
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._label(ctx, this.label, point.x, point.y);
       }
     }
-    return true;
   };
 
 
+
   /**
-   * check if one of the selected nodes is a cluster.
-   *
-   * @returns {boolean}
+   * Calculate the distance between a point (x3,y3) and a line segment from
+   * (x1,y1) to (x2,y2).
+   * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+   * @param {number} x1
+   * @param {number} y1
+   * @param {number} x2
+   * @param {number} y2
+   * @param {number} x3
+   * @param {number} y3
    * @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;
+  Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    if (this.from != this.to) {
+      if (this.smoothCurves.enabled == true) {
+        var xVia, yVia;
+        if (this.smoothCurves.enabled == true && this.smoothCurves.dynamic == true) {
+          xVia = this.via.x;
+          yVia = this.via.y;
+        }
+        else {
+          var via = this._getViaCoordinates();
+          xVia = via.x;
+          yVia = via.y;
+        }
+        var minDistance = 1e9;
+        var distance;
+        var i,t,x,y, lastX, lastY;
+        for (i = 0; i < 10; i++) {
+          t = 0.1*i;
+          x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+          y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+          if (i > 0) {
+            distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
+            minDistance = distance < minDistance ? distance : minDistance;
+          }
+          lastX = x; lastY = y;
         }
+        return minDistance
+      }
+      else {
+        return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
       }
     }
-    return false;
-  };
-
-  /**
-   * 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);
+    else {
+      var x, y, dx, dy;
+      var radius = this.length / 4;
+      var node = this.from;
+      if (!node.width) {
+        node.resize(ctx);
+      }
+      if (node.width > node.height) {
+        x = node.x + node.width / 2;
+        y = node.y - radius;
+      }
+      else {
+        x = node.x + radius;
+        y = node.y - node.height / 2;
+      }
+      dx = x - x3;
+      dy = y - y3;
+      return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
     }
   };
 
-  /**
-   * 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);
+  Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
+    var px = x2-x1,
+      py = y2-y1,
+      something = px*px + py*py,
+      u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+    if (u > 1) {
+      u = 1;
     }
-  };
+    else if (u < 0) {
+      u = 0;
+    }
+
+    var x = x1 + u * px,
+      y = y1 + u * py,
+      dx = x - x3,
+      dy = y - y3;
+
+    //# Note: If the actual distance does not matter,
+    //# if you only want to compare what this function
+    //# returns to other results of this function, you
+    //# can just return the squared distance instead
+    //# (i.e. remove the sqrt) to gain a little performance
 
+    return Math.sqrt(dx*dx + dy*dy);
+  }
 
   /**
-   * unselect the edges connected to the node that is being selected
+   * This allows the zoom level of the network to influence the rendering
    *
-   * @param {Node} node
-   * @private
+   * @param scale
    */
-  exports._unselectConnectedEdges = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      var edge = node.dynamicEdges[i];
-      edge.unselect();
-      this._removeFromSelection(edge);
-    }
+  Edge.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
   };
 
 
+  Edge.prototype.select = function() {
+    this.selected = true;
+  };
 
+  Edge.prototype.unselect = function() {
+    this.selected = false;
+  };
 
-  /**
-   * 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) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    if (highlightEdges === undefined) {
-      highlightEdges = true;
+  Edge.prototype.positionBezierNode = function() {
+    if (this.via !== null) {
+      this.via.x = 0.5 * (this.from.x + this.to.x);
+      this.via.y = 0.5 * (this.from.y + this.to.y);
     }
+  };
 
-    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
-      this._unselectAll(true);
-    }
+  /**
+   * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
+   * @param ctx
+   */
+  Edge.prototype._drawControlNodes = function(ctx) {
+    if (this.controlNodesEnabled == true) {
+      if (this.controlNodes.from === null && this.controlNodes.to === null) {
+        var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+        var nodeIdTo = "edgeIdTo:".concat(this.id);
+        var constants = {
+                        nodes:{group:'', radius:8},
+                        physics:{damping:0},
+                        clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+                        };
+        this.controlNodes.from = new Node(
+          {id:nodeIdFrom,
+            shape:'dot',
+              color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+        this.controlNodes.to = new Node(
+          {id:nodeIdTo,
+            shape:'dot',
+            color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+          },{},{},constants);
+      }
 
-    if (object.selected == false) {
-      object.select();
-      this._addToSelection(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
-        this._selectConnectedEdges(object);
+      if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+        this.controlNodes.positions = this.getControlNodePositions(ctx);
+        this.controlNodes.from.x = this.controlNodes.positions.from.x;
+        this.controlNodes.from.y = this.controlNodes.positions.from.y;
+        this.controlNodes.to.x = this.controlNodes.positions.to.x;
+        this.controlNodes.to.y = this.controlNodes.positions.to.y;
       }
+
+      this.controlNodes.from.draw(ctx);
+      this.controlNodes.to.draw(ctx);
     }
     else {
-      object.unselect();
-      this._removeFromSelection(object);
-    }
-
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
+      this.controlNodes = {from:null, to:null, positions:{}};
     }
   };
 
-
   /**
-   * 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
+   * Enable control nodes.
    * @private
    */
-  exports._blurObject = function(object) {
-    if (object.hover == true) {
-      object.hover = false;
-      this.emit("blurNode",{node:object.id});
-    }
+  Edge.prototype._enableControlNodes = function() {
+    this.controlNodesEnabled = true;
   };
 
   /**
-   * 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
+   * disable control nodes
    * @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);
-    }
+  Edge.prototype._disableControlNodes = function() {
+    this.controlNodesEnabled = false;
   };
 
-
   /**
-   * 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
+   * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+   * @param x
+   * @param y
+   * @returns {null}
    * @private
    */
-  exports._handleTouch = function(pointer) {
+  Edge.prototype._getSelectedControlNode = function(x,y) {
+    var positions = this.controlNodes.positions;
+    var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+    var toDistance =   Math.sqrt(Math.pow(x - positions.to.x  ,2) + Math.pow(y - positions.to.y  ,2));
+
+    if (fromDistance < 15) {
+      this.connectedNode = this.from;
+      this.from = this.controlNodes.from;
+      return this.controlNodes.from;
+    }
+    else if (toDistance < 15) {
+      this.connectedNode = this.to;
+      this.to = this.controlNodes.to;
+      return this.controlNodes.to;
+    }
+    else {
+      return null;
+    }
   };
 
 
   /**
-   * handles the selection part of the tap;
-   *
-   * @param {Object} pointer
+   * this resets the control nodes to their original position.
    * @private
    */
-  exports._handleTap = function(pointer) {
-    var node = this._getNodeAt(pointer);
-    if (node != null) {
-      this._selectObject(node,false);
+  Edge.prototype._restoreControlNodes = function() {
+    if (this.controlNodes.from.selected == true) {
+      this.from = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.from.unselect();
     }
-    else {
-      var edge = this._getEdgeAt(pointer);
-      if (edge != null) {
-        this._selectObject(edge,false);
-      }
-      else {
-        this._unselectAll();
-      }
+    if (this.controlNodes.to.selected == true) {
+      this.to = this.connectedNode;
+      this.connectedNode = null;
+      this.controlNodes.to.unselect();
     }
-    this.emit("click", this.getSelection());
-    this._redraw();
   };
 
-
   /**
-   * handles the selection part of the double tap and opens a cluster if needed
+   * this calculates the position of the control nodes on the edges of the parent nodes.
    *
-   * @param {Object} pointer
-   * @private
+   * @param ctx
+   * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
    */
-  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);
+  Edge.prototype.getControlNodePositions = function(ctx) {
+    var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+    var dx = (this.to.x - this.from.x);
+    var dy = (this.to.y - this.from.y);
+    var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+    var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+    var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+    var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+    var via;
+    if (this.smoothCurves.dynamic == true && this.smoothCurves.enabled == true) {
+      via = this.via;
+    }
+    else if (this.smoothCurves.enabled == true) {
+      via = this._getViaCoordinates();
     }
-    this.emit("doubleClick", this.getSelection());
-  };
 
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+      dx = (this.to.x - via.x);
+      dy = (this.to.y - via.y);
+      edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+    }
+    var toBorderDist = this.to.distanceToBorder(ctx, angle);
+    var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
 
-  /**
-   * Handle the onHold selection part
-   *
-   * @param pointer
-   * @private
-   */
-  exports._handleOnHold = function(pointer) {
-    var node = this._getNodeAt(pointer);
-    if (node != null) {
-      this._selectObject(node,true);
+    var xTo,yTo;
+    if (this.smoothCurves.enabled == true && via.x != null) {
+      xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
     }
     else {
-      var edge = this._getEdgeAt(pointer);
-      if (edge != null) {
-        this._selectObject(edge,true);
-      }
+      xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+      yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
     }
-    this._redraw();
+
+    return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
   };
 
+  module.exports = Edge;
+
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
 
   /**
-   * handle the onRelease event. These functions are here for the navigation controls module.
+   * @class Node
+   * A node. A node can be connected to other nodes via one or multiple edges.
+   * @param {object} properties An object containing properties for the node. All
+   *                            properties are optional, except for the id.
+   *                              {number} id     Id of the node. Required
+   *                              {string} label  Text label for the node
+   *                              {number} x      Horizontal position of the node
+   *                              {number} y      Vertical position of the node
+   *                              {string} shape  Node shape, available:
+   *                                              "database", "circle", "ellipse",
+   *                                              "box", "image", "text", "dot",
+   *                                              "star", "triangle", "triangleDown",
+   *                                              "square"
+   *                              {string} image  An image url
+   *                              {string} title  An title text, can be HTML
+   *                              {anytype} group A group name or number
+   * @param {Network.Images} imagelist    A list with images. Only needed
+   *                                            when the node has an image
+   * @param {Network.Groups} grouplist    A list with groups. Needed for
+   *                                            retrieving group properties
+   * @param {Object}               constants    An object with default values for
+   *                                            example for the color
    *
-    * @private
    */
-  exports._handleOnRelease = function(pointer) {
+  function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
+    this.hover = false;
 
-  };
+    this.edges = []; // all edges connected to this node
+    this.dynamicEdges = [];
+    this.reroutedEdges = {};
+
+    this.group = constants.nodes.group;
+    this.fontSize = Number(constants.nodes.fontSize);
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
+    this.fontDrawThreshold = 3;
+
+    this.color = constants.nodes.color;
+
+    // set defaults for the properties
+    this.id = undefined;
+    this.shape = constants.nodes.shape;
+    this.image = constants.nodes.image;
+    this.x = null;
+    this.y = null;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.horizontalAlignLeft = true; // these are for the navigation controls
+    this.verticalAlignTop    = true; // these are for the navigation controls
+    this.radius = constants.nodes.radius;
+    this.baseRadiusValue = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+    this.level = -1;
+    this.preassignedLevel = false;
+
+
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
+
+    // physics properties
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = constants.physics.damping;
+    this.mass = 1;  // kg
+    this.fixedData = {x:null,y:null};
+
+    this.setProperties(properties, constants);
 
+    // creating the variables for clustering
+    this.resetCluster();
+    this.dynamicEdgesLength = 0;
+    this.clusterSession = 0;
+    this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
+    this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
+    this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
+    this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
+    this.growthIndicator = 0;
 
+    // variables to tell the node about the network.
+    this.networkScaleInv = 1;
+    this.networkScale = 1;
+    this.canvasTopLeft = {"x": -300, "y": -300};
+    this.canvasBottomRight = {"x":  300, "y":  300};
+    this.parentEdgeId = null;
+  }
 
   /**
-   *
-   * retrieve the currently selected objects
-   * @return {{nodes: Array.<String>, edges: Array.<String>}} selection
+   * (re)setting the clustering variables and objects
    */
-  exports.getSelection = function() {
-    var nodeIds = this.getSelectedNodes();
-    var edgeIds = this.getSelectedEdges();
-    return {nodes:nodeIds, edges:edgeIds};
+  Node.prototype.resetCluster = function() {
+    // clustering variables
+    this.formationScale = undefined; // this is used to determine when to open the cluster
+    this.clusterSize = 1;            // this signifies the total amount of nodes in this cluster
+    this.containedNodes = {};
+    this.containedEdges = {};
+    this.clusterSessions = [];
   };
 
   /**
-   *
-   * retrieve the currently selected nodes
-   * @return {String[]} selection    An array with the ids of the
-   *                                            selected nodes.
+   * Attach a edge to the node
+   * @param {Edge} edge
    */
-  exports.getSelectedNodes = function() {
-    var idArray = [];
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        idArray.push(nodeId);
-      }
+  Node.prototype.attachEdge = function(edge) {
+    if (this.edges.indexOf(edge) == -1) {
+      this.edges.push(edge);
     }
-    return idArray
+    if (this.dynamicEdges.indexOf(edge) == -1) {
+      this.dynamicEdges.push(edge);
+    }
+    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
   /**
-   *
-   * retrieve the currently selected edges
-   * @return {Array} selection    An array with the ids of the
-   *                                            selected nodes.
+   * Detach a edge from the node
+   * @param {Edge} edge
    */
-  exports.getSelectedEdges = function() {
-    var idArray = [];
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        idArray.push(edgeId);
-      }
+  Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+      this.edges.splice(index, 1);
+      this.dynamicEdges.splice(index, 1);
     }
-    return idArray;
+    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
 
   /**
-   * select zero or more nodes
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
+   * Set or overwrite properties for the node
+   * @param {Object} properties an object with properties
+   * @param {Object} constants  and object with default, global properties
    */
-  exports.setSelection = function(selection) {
-    var i, iMax, id;
+  Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+      return;
+    }
+    this.originalLabel = undefined;
+    // basic properties
+    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.group !== undefined)     {this.group = properties.group;}
+    if (properties.x !== undefined)         {this.x = properties.x;}
+    if (properties.y !== undefined)         {this.y = properties.y;}
+    if (properties.value !== undefined)     {this.value = properties.value;}
+    if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
 
-    // first unselect any selected node
-    this._unselectAll(true);
+    // physics
+    if (properties.mass !== undefined)                {this.mass = properties.mass;}
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+    // navigation controls properties
+    if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+    if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+    if (properties.triggerFunction     !== undefined) {this.triggerFunction     = properties.triggerFunction;}
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true);
+    if (this.id === undefined) {
+      throw "Node must have an id";
     }
 
-    console.log("setSelection is deprecated. Please use selectNodes instead.")
-
-    this.redraw();
-  };
+    // copy group properties
+    if (this.group) {
+      var groupObj = this.grouplist.get(this.group);
+      for (var prop in groupObj) {
+        if (groupObj.hasOwnProperty(prop)) {
+          this[prop] = groupObj[prop];
+        }
+      }
+    }
 
+    // individual shape properties
+    if (properties.shape !== undefined)          {this.shape = properties.shape;}
+    if (properties.image !== undefined)          {this.image = properties.image;}
+    if (properties.radius !== undefined)         {this.radius = properties.radius; this.baseRadiusValue = this.radius;}
+    if (properties.color !== undefined)          {this.color = util.parseColor(properties.color);}
 
-  /**
-   * 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 (properties.fontColor !== undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize !== undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace !== undefined)       {this.fontFace = properties.fontFace;}
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+    if (this.image !== undefined && this.image != "") {
+      if (this.imagelist) {
+        this.imageObj = this.imagelist.load(this.image);
+      }
+      else {
+        throw "No imagelist provided";
+      }
+    }
 
-    // first unselect any selected node
-    this._unselectAll(true);
+    this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
+    this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
+    this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+    if (this.shape == 'image') {
+      this.radiusMin = constants.nodes.widthMin;
+      this.radiusMax = constants.nodes.widthMax;
+    }
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
-      }
-      this._selectObject(node,true,true,highlightEdges);
+    // choose draw method depending on the shape
+    switch (this.shape) {
+      case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+      case 'box':           this.draw = this._drawBox; this.resize = this._resizeBox; break;
+      case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+      case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+      // TODO: add diamond shape
+      case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+      case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+      case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+      case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+      case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+      case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+      case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+      default:              this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
     }
-    this.redraw();
+    // reset the size of the node, this can be changed
+    this._reset();
   };
 
+  /**
+   * select this node
+   */
+  Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
+  };
 
   /**
-   * select zero or more edges
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
+   * unselect this node
    */
-  exports.selectEdges = function(selection) {
-    var i, iMax, id;
+  Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
+  };
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
 
-    // first unselect any selected node
-    this._unselectAll(true);
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   */
+  Node.prototype.clearSizeCache = function() {
+    this._reset();
+  };
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+  /**
+   * Reset the calculated size of the node, forces it to recalculate its size
+   * @private
+   */
+  Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
+  };
 
-      var edge = this.edges[id];
-      if (!edge) {
-        throw new RangeError('Edge with id "' + id + '" not found');
-      }
-      this._selectObject(edge,true,true,highlightEdges);
-    }
-    this.redraw();
+  /**
+   * get the title of this node.
+   * @return {string} title    The title of the node, or undefined when no title
+   *                           has been set.
+   */
+  Node.prototype.getTitle = function() {
+    return typeof this.title === "function" ? this.title() : this.title;
   };
 
   /**
-   * Validate the selection: remove ids of nodes which no longer exist
-   * @private
+   * Calculate the distance to the border of the Node
+   * @param {CanvasRenderingContext2D}   ctx
+   * @param {Number} angle        Angle in radians
+   * @returns {number} distance   Distance to the border in pixels
    */
-  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];
-        }
-      }
+  Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
+
+    if (!this.width) {
+      this.resize(ctx);
     }
-  };
 
+    switch (this.shape) {
+      case 'circle':
+      case 'dot':
+        return this.radius + borderWidth;
 
-/***/ },
-/* 46 */
-/***/ function(module, exports, __webpack_require__) {
+      case 'ellipse':
+        var a = this.width / 2;
+        var b = this.height / 2;
+        var w = (Math.sin(angle) * a);
+        var h = (Math.cos(angle) * b);
+        return a * b / Math.sqrt(w * w + h * h);
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(30);
-  var Edge = __webpack_require__(27);
+      // TODO: implement distanceToBorder for database
+      // TODO: implement distanceToBorder for triangle
+      // TODO: implement distanceToBorder for triangleDown
+
+      case 'box':
+      case 'image':
+      case 'text':
+      default:
+        if (this.width) {
+          return Math.min(
+              Math.abs(this.width / 2 / Math.cos(angle)),
+              Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+          // TODO: reckon with border radius too in case of box
+        }
+        else {
+          return 0;
+        }
 
-  /**
-   * clears the toolbar div element of children
-   *
-   * @private
-   */
-  exports._clearManipulatorBar = function() {
-    while (this.manipulationDiv.hasChildNodes()) {
-      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
     }
+    // TODO: implement calculation of distance to border for all shapes
   };
 
   /**
-   * 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
+   * Set forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
    */
-  exports._restoreOverloadedFunctions = function() {
-    for (var functionName in this.cachedFunctions) {
-      if (this.cachedFunctions.hasOwnProperty(functionName)) {
-        this[functionName] = this.cachedFunctions[functionName];
-      }
-    }
+  Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
   };
 
   /**
-   * Enable or disable edit-mode.
-   *
+   * Add forces acting on the node
+   * @param {number} fx   Force in horizontal direction
+   * @param {number} fy   Force in vertical direction
    * @private
    */
-  exports._toggleEditMode = function() {
-    this.editMode = !this.editMode;
-    var toolbar = document.getElementById("network-manipulationDiv");
-    var closeDiv = document.getElementById("network-manipulation-closeDiv");
-    var editModeDiv = document.getElementById("network-manipulation-editMode");
-    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()
+  Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
   };
 
   /**
-   * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
-   *
-   * @private
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
    */
-  exports._createManipulatorBar = function() {
-    // remove bound functions
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
+  Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.x  += this.vx * interval;          // position
     }
 
-    if (this.edgeBeingEdited !== undefined) {
-      this.edgeBeingEdited._disableControlNodes();
-      this.edgeBeingEdited = undefined;
-      this.selectedControlNode = null;
-      this.controlNodesActive = false;
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.y  += this.vy * interval;          // position
     }
+  };
 
-    // restore overloaded functions
-    this._restoreOverloadedFunctions();
 
-    // resume calculation
-    this.freezeSimulation = false;
 
-    // reset global variables
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
-
-    if (this.editMode == true) {
-      while (this.manipulationDiv.hasChildNodes()) {
-        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-      }
-      // add the icons to the manipulator div
-      this.manipulationDiv.innerHTML = "" +
-        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
-        "<div class='network-seperatorLine'></div>" +
-        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
-          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDiv.innerHTML += "" +
-          "<div class='network-seperatorLine'></div>" +
-          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
-            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
-      }
-
-
-      // bind the icons
-      var addNodeButton = document.getElementById("network-manipulate-addNode");
-      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
-      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
-      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        var editButton = document.getElementById("network-manipulate-editNode");
-        editButton.onclick = this._editNode.bind(this);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        var editButton = document.getElementById("network-manipulate-editEdge");
-        editButton.onclick = this._createEditEdgeToolbar.bind(this);
-      }
-      if (this._selectionIsEmpty() == false) {
-        var deleteButton = document.getElementById("network-manipulate-delete");
-        deleteButton.onclick = this._deleteSelected.bind(this);
-      }
-      var closeDiv = document.getElementById("network-manipulation-closeDiv");
-      closeDiv.onclick = this._toggleEditMode.bind(this);
+  /**
+   * Perform one discrete step for the node
+   * @param {number} interval    Time interval in seconds
+   * @param {number} maxVelocity The speed limit imposed on the velocity
+   */
+  Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+    if (!this.xFixed) {
+      var dx   = this.damping * this.vx;     // damping force
+      var ax   = (this.fx - dx) / this.mass;  // acceleration
+      this.vx += ax * interval;               // velocity
+      this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
+      this.x  += this.vx * interval;          // position
+    }
+    else {
+      this.fx = 0;
+    }
 
-      this.boundFunction = this._createManipulatorBar.bind(this);
-      this.on('select', this.boundFunction);
+    if (!this.yFixed) {
+      var dy   = this.damping * this.vy;     // damping force
+      var ay   = (this.fy - dy) / this.mass;  // acceleration
+      this.vy += ay * interval;               // velocity
+      this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
+      this.y  += this.vy * interval;          // position
     }
     else {
-      this.editModeDiv.innerHTML = "" +
-        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
-      var editModeButton = document.getElementById("network-manipulate-editModeButton");
-      editModeButton.onclick = this._toggleEditMode.bind(this);
+      this.fy = 0;
     }
   };
 
-
+  /**
+   * Check if this node has a fixed x and y position
+   * @return {boolean}      true if fixed, false if not
+   */
+  Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
+  };
 
   /**
-   * Create the toolbar for adding Nodes
-   *
-   * @private
+   * Check if this node is moving
+   * @param {number} vmin   the minimum velocity considered as "moving"
+   * @return {boolean}      true if moving, false if it has no velocity
    */
-  exports._createAddNodeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+  // TODO: replace this method with calculating the kinetic energy
+  Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  };
 
-    // create the toolbar contents
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
+  /**
+   * check if this node is selecte
+   * @return {boolean} selected   True if node is selected, else false
+   */
+  Node.prototype.isSelected = function() {
+    return this.selected;
+  };
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  /**
+   * Retrieve the value of the node. Can be undefined
+   * @return {Number} value
+   */
+  Node.prototype.getValue = function() {
+    return this.value;
+  };
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._addNode.bind(this);
-    this.on('select', this.boundFunction);
+  /**
+   * Calculate the distance from the nodes location to the given location (x,y)
+   * @param {Number} x
+   * @param {Number} y
+   * @return {Number} value
+   */
+  Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
   };
 
 
   /**
-   * create the toolbar to connect nodes
-   *
-   * @private
+   * Adjust the value range of the node. The node will adjust it's radius
+   * based on its value.
+   * @param {Number} min
+   * @param {Number} max
    */
-  exports._createAddEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this._unselectAll(true);
-    this.freezeSimulation = true;
-
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
+  Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+      if (max == min) {
+        this.radius = (this.radiusMin + this.radiusMax) / 2;
+      }
+      else {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
+      }
     }
+    this.baseRadiusValue = this.radius;
+  };
 
-    this._unselectAll();
-    this.forceAppendSelection = false;
-    this.blockConnectingEdgeSelection = true;
+  /**
+   * Draw this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
+  };
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
+  /**
+   * Recalculate the size of this node in the given canvas
+   * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+   * @param {CanvasRenderingContext2D}   ctx
+   */
+  Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
+  };
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  /**
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top, right, bottom
+   * @return {boolean}     True if location is located on node
+   */
+  Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left              < obj.right  &&
+            this.left + this.width > obj.left   &&
+            this.top               < obj.bottom &&
+            this.top + this.height > obj.top);
+  };
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    this.boundFunction = this._handleConnect.bind(this);
-    this.on('select', this.boundFunction);
+  Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"] = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
-    this._handleTouch = this._handleConnect;
-    this._handleOnRelease = this._finishConnect;
+    if (!this.width || !this.height) {  // undefined or 0
+      var width, height;
+      if (this.value) {
+        this.radius = this.baseRadiusValue;
+        var scale = this.imageObj.height / this.imageObj.width;
+        if (scale !== undefined) {
+          width = this.radius || this.imageObj.width;
+          height = this.radius * scale || this.imageObj.height;
+        }
+        else {
+          width = 0;
+          height = 0;
+        }
+      }
+      else {
+        width = this.imageObj.width;
+        height = this.imageObj.height;
+      }
+      this.width  = width;
+      this.height = height;
+
+      this.growthIndicator = 0;
+      if (this.width > 0 && this.height > 0) {
+        this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
+        this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+        this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+        this.growthIndicator = this.width - width;
+      }
+    }
 
-    // redraw to show the unselect
-    this._redraw();
   };
 
-  /**
-   * create the toolbar to edit edges
-   *
-   * @private
-   */
-  exports._createEditEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this.controlNodesActive = true;
+  Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
+
+    var yLabel;
+    if (this.imageObj.width != 0 ) {
+      // draw the shade
+      if (this.clusterSize > 1) {
+        var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
+        lineWidth *= this.networkScaleInv;
+        lineWidth = Math.min(0.2 * this.width,lineWidth);
+
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
+      }
+
+      // draw the image
+      ctx.globalAlpha = 1.0;
+      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      yLabel = this.y + this.height / 2;
+    }
+    else {
+      // image still loading... just draw the label for now
+      yLabel = this.y;
     }
 
-    this.edgeBeingEdited = this._getSelectedEdge();
-    this.edgeBeingEdited._enableControlNodes();
+    this._label(ctx, this.label, this.x, yLabel, undefined, "top");
+  };
 
-    this.manipulationDiv.innerHTML = "" +
-      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
-      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
-      "<div class='network-seperatorLine'></div>" +
-      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
-      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
-    // bind the icon
-    var backButton = document.getElementById("network-manipulate-back");
-    backButton.onclick = this._createManipulatorBar.bind(this);
+  Node.prototype._resizeBox = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
-    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._handleOnRelease = this._releaseControlNode;
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+  //    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
 
-    // redraw to show the unselect
-    this._redraw();
+    }
   };
 
+  Node.prototype._drawBox = function (ctx) {
+    this._resizeBox(ctx);
 
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-  /**
-   * 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();
-  };
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  /**
-   * 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);
+      ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
+      ctx.stroke();
     }
-    this._redraw();
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  exports._releaseControlNode = function(pointer) {
-    var newNode = this._getNodeAt(pointer);
-    if (newNode != null) {
-      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
-        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
-        this.edgeBeingEdited.controlNodes.from.unselect();
-      }
-      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
-        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
-        this.edgeBeingEdited.controlNodes.to.unselect();
-      }
-    }
-    else {
-      this.edgeBeingEdited._restoreControlNodes();
+
+  Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var size = textSize.width + 2 * margin;
+      this.width = size;
+      this.height = size;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
-    this.freezeSimulation = false;
-    this._redraw();
   };
 
-  /**
-   * 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("Cannot create edges to a cluster.")
-        }
-        else {
-          this._selectObject(node,false);
-          // create a node the temporary line can look at
-          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetNode'].x = node.x;
-          this.sectors['support']['nodes']['targetNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
-          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
-          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
-          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
+  Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-          // create a temporary edge
-          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
-          this.edges['connectionEdge'].from = node;
-          this.edges['connectionEdge'].connected = true;
-          this.edges['connectionEdge'].smooth = true;
-          this.edges['connectionEdge'].selected = true;
-          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
-          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
 
-          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
-          this._handleOnDrag = function(event) {
-            var pointer = this._getPointer(event.gesture.center);
-            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-          };
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-          this.moving = true;
-          this.start();
-        }
-      }
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
+      ctx.stroke();
     }
-  };
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  exports._finishConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 1) {
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
 
-      // restore the drag function
-      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
-      delete this.cachedFunctions["_handleOnDrag"];
+    this._label(ctx, this.label, this.x, this.y);
+  };
 
-      // remember the edge id
-      var connectFromId = this.edges['connectionEdge'].fromId;
 
-      // remove the temporary nodes and edge
-      delete this.edges['connectionEdge'];
-      delete this.sectors['support']['nodes']['targetNode'];
-      delete this.sectors['support']['nodes']['targetViaNode'];
+  Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+      this.radius = diameter / 2;
 
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert("Cannot create edges to a cluster.")
-        }
-        else {
-          this._createEdge(connectFromId,node.id);
-          this._createManipulatorBar();
-        }
-      }
-      this._unselectAll();
+      this.width = diameter;
+      this.height = diameter;
+
+      // scaling used for clustering
+  //    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+  //    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.radius - 0.5*diameter;
     }
   };
 
-
-  /**
-   * 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 {
-          alert(this.constants.labels['addError']);
-          this._createManipulatorBar();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.nodesData.add(defaultData);
-        this._createManipulatorBar();
-        this.moving = true;
-        this.start();
-      }
+  Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._label(ctx, this.label, this.x, this.y);
   };
 
+  Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+      var textSize = this.getTextSize(ctx);
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.add(defaultData);
-        this.moving = true;
-        this.start();
+      this.width = textSize.width * 1.5;
+      this.height = textSize.height * 2;
+      if (this.width < this.height) {
+        this.width = this.height;
       }
+      var defaultSize = this.width;
+
+        // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - defaultSize;
     }
   };
 
-  /**
-   * 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 {
-          alert(this.constants.labels["linkError"]);
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.update(defaultData);
-        this.moving = true;
-        this.start();
-      }
+  Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
+
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+      ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
+      ctx.stroke();
     }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+    this._label(ctx, this.label, this.x, this.y);
   };
 
-  /**
-   * 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.group,
-        shape: node.shape,
-        color: {
-          background:node.color.background,
-          border:node.color.border,
-          highlight: {
-            background:node.color.highlight.background,
-            border:node.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 {
-        alert(this.constants.labels["editError"]);
-      }
-    }
-    else {
-      alert(this.constants.labels["editBoundError"]);
-    }
+  Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+  };
+
+  Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
   };
 
+  Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
+  };
 
+  Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
+  };
 
+  Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+  };
 
-  /**
-   * 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 {
-            alert(this.constants.labels["deleteError"])
-          }
-        }
-        else {
-          this.edgesData.remove(selectedEdges);
-          this.nodesData.remove(selectedNodes);
-          this._unselectAll();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        alert(this.constants.labels["deleteClusterError"]);
-      }
+  Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+      this.radius = this.baseRadiusValue;
+      var size = 2 * this.radius;
+      this.width = size;
+      this.height = size;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - size;
     }
   };
 
+  Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
 
-/***/ },
-/* 47 */
-/***/ function(module, exports, __webpack_require__) {
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-  exports._cleanNavigation = function() {
-    // clean up previous navigation items
-    var wrapper = document.getElementById('network-navigation_wrapper');
-    if (wrapper != null) {
-      this.containerElement.removeChild(wrapper);
+    var clusterLineWidth = 2.5;
+    var selectionLineWidth = 2;
+    var radiusMultiplier = 2;
+
+    // choose draw method depending on the shape
+    switch (shape) {
+      case 'dot':           radiusMultiplier = 2; break;
+      case 'square':        radiusMultiplier = 2; break;
+      case 'triangle':      radiusMultiplier = 3; break;
+      case 'triangleDown':  radiusMultiplier = 3; break;
+      case 'star':          radiusMultiplier = 4; break;
     }
-    document.onmouseup = null;
-  };
 
-  /**
-   * 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();
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
-    this.navigationDivs = {};
-    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
-    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
+    // draw the outer border
+    if (this.clusterSize > 1) {
+      ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+      ctx.lineWidth *= this.networkScaleInv;
+      ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    this.navigationDivs['wrapper'] = document.createElement('div');
-    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
-    this.navigationDivs['wrapper'].style.position = "absolute";
-    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
+      ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
+      ctx.stroke();
+    }
+    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth *= this.networkScaleInv;
+    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-    for (var i = 0; i < navigationDivs.length; i++) {
-      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
-      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
-      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
-      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    if (this.label) {
+      this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top',true);
     }
+  };
 
-    document.onmouseup = this._stopMovement.bind(this);
+  Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+      var margin = 5;
+      var textSize = this.getTextSize(ctx);
+      this.width = textSize.width + 2 * margin;
+      this.height = textSize.height + 2 * margin;
+
+      // scaling used for clustering
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - (textSize.width + 2 * margin);
+    }
   };
 
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._stopMovement = function() {
-    this._xStopMoving();
-    this._yStopMoving();
-    this._stopZoom();
+  Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    this._label(ctx, this.label, this.x, this.y);
   };
 
 
-  /**
-   * stops the actions performed by page up and down etc.
-   *
-   * @param event
-   * @private
-   */
-  exports._preventDefault = function(event) {
-    if (event !== undefined) {
-      if (event.preventDefault) {
-        event.preventDefault();
-      } else {
-        event.returnValue = false;
+  Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
+    if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+      ctx.fillStyle = this.fontColor || "black";
+      ctx.textAlign = align || "center";
+      ctx.textBaseline = baseline || "middle";
+
+      var lines = text.split('\n');
+      var lineCount = lines.length;
+      var fontSize = (this.fontSize + 4);
+      var yLine = y + (1 - lineCount) / 2 * fontSize;
+      if (labelUnderNode == true) {
+        yLine = y + (1 - lineCount) / (2 * fontSize);
+      }
+
+      for (var i = 0; i < lineCount; i++) {
+        ctx.fillText(lines[i], x, yLine);
+        yLine += fontSize;
       }
     }
   };
 
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className += " active";
-    }
-  };
+  Node.prototype.getTextSize = function(ctx) {
+    if (this.label !== undefined) {
+      ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
 
+      var lines = this.label.split('\n'),
+          height = (this.fontSize + 4) * lines.length,
+          width = 0;
 
-  /**
-   * 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
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['down'].className += " active";
+      for (var i = 0, iMax = lines.length; i < iMax; i++) {
+        width = Math.max(width, ctx.measureText(lines[i]).width);
+      }
+
+      return {"width": width, "height": height};
+    }
+    else {
+      return {"width": 0, "height": 0};
     }
   };
 
-
   /**
-   * move the screen left
-   * @private
+   * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+   * there is a safety margin of 0.3 * width;
+   *
+   * @returns {boolean}
    */
-  exports._moveLeft = function(event) {
-    this.xIncrement = this.constants.keyboard.speed.x;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className += " active";
+  Node.prototype.inArea = function() {
+    if (this.width !== undefined) {
+    return (this.x + this.width *this.networkScaleInv  >= this.canvasTopLeft.x     &&
+            this.x - this.width *this.networkScaleInv  <  this.canvasBottomRight.x &&
+            this.y + this.height*this.networkScaleInv  >= this.canvasTopLeft.y     &&
+            this.y - this.height*this.networkScaleInv  <  this.canvasBottomRight.y);
+    }
+    else {
+      return true;
     }
   };
 
-
   /**
-   * move the screen right
-   * @private
+   * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+   * @returns {boolean}
    */
-  exports._moveRight = function(event) {
-    this.xIncrement = -this.constants.keyboard.speed.y;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['right'].className += " active";
-    }
+  Node.prototype.inView = function() {
+    return (this.x >= this.canvasTopLeft.x    &&
+            this.x < this.canvasBottomRight.x &&
+            this.y >= this.canvasTopLeft.y    &&
+            this.y < this.canvasBottomRight.y);
   };
 
-
   /**
-   * Zoom in, using the same method as the movement.
-   * @private
+   * This allows the zoom level of the network to influence the rendering
+   * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+   *
+   * @param scale
+   * @param canvasTopLeft
+   * @param canvasBottomRight
    */
-  exports._zoomIn = function(event) {
-    this.zoomIncrement = this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className += " active";
-    }
+  Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
+    this.canvasTopLeft = canvasTopLeft;
+    this.canvasBottomRight = canvasBottomRight;
   };
 
 
   /**
-   * Zoom out
-   * @private
+   * This allows the zoom level of the network to influence the rendering
+   *
+   * @param scale
    */
-  exports._zoomOut = function() {
-    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    this._preventDefault(event);
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomOut'].className += " active";
-    }
+  Node.prototype.setScale = function(scale) {
+    this.networkScaleInv = 1.0/scale;
+    this.networkScale = scale;
   };
 
 
+
   /**
-   * Stop zooming and unhighlight the zoom controls
-   * @private
+   * set the velocity at 0. Is called when this node is contained in another during clustering
    */
-  exports._stopZoom = function() {
-    this.zoomIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
-      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
-    }
+  Node.prototype.clearVelocity = function() {
+    this.vx = 0;
+    this.vy = 0;
   };
 
 
   /**
-   * Stop moving in the Y direction and unHighlight the up and down
-   * @private
+   * Basic preservation of (kinectic) energy
+   *
+   * @param massBeforeClustering
    */
-  exports._yStopMoving = function() {
-    this.yIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
-      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
-    }
+  Node.prototype.updateVelocity = function(massBeforeClustering) {
+    var energyBefore = this.vx * this.vx * massBeforeClustering;
+    //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vx = Math.sqrt(energyBefore/this.mass);
+    energyBefore = this.vy * this.vy * massBeforeClustering;
+    //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
+    this.vy = Math.sqrt(energyBefore/this.mass);
   };
 
-
-  /**
-   * Stop moving in the X direction and unHighlight left and right.
-   * @private
-   */
-  exports._xStopMoving = function() {
-    this.xIncrement = 0;
-    if (this.navigationDivs) {
-      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
-      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
-    }
-  };
+  module.exports = Node;
 
 
 /***/ },
-/* 48 */
+/* 40 */
 /***/ 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;
-        }
-      }
-    }
-  };
+  var util = __webpack_require__(1);
 
   /**
-   * This is the main function to layout the nodes in a hierarchical way.
-   * It checks if the node details are supplied correctly
-   *
-   * @private
+   * @class Groups
+   * This class can store groups and properties specific for groups.
    */
-  exports._setupHierarchicalLayout = function() {
-    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
-        this.constants.hierarchicalLayout.levelSeparation *= -1;
-      }
-      else {
-        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
-      }
+  function Groups() {
+    this.clear();
+    this.defaultIndex = 0;
+  }
 
-      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
-        }
-      }
-      // 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;
-          }
-        }
-      }
+  /**
+   * default constants for group colors
+   */
+  Groups.DEFAULT = [
+    {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+    {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+    {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+    {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+    {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+    {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+    {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+    {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+    {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+    {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}  // mint
+  ];
 
-      // if the user defined some levels but not all, alert and run without hierarchical layout
-      if (undefinedLevel == true && definedLevel == true) {
-        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-        this.zoomExtent(true,this.constants.clustering.enabled);
-        if (!this.constants.clustering.enabled) {
-          this.start();
-        }
-      }
-      else {
-        // setup the system to use hierarchical method.
-        this._changeConstants();
 
-        // define levels if undefined by the users. Based on hubsize
-        if (undefinedLevel == true) {
-          this._determineLevels(hubsize);
+  /**
+   * Clear all groups
+   */
+  Groups.prototype.clear = function () {
+    this.groups = {};
+    this.groups.length = function()
+    {
+      var i = 0;
+      for ( var p in this ) {
+        if (this.hasOwnProperty(p)) {
+          i++;
         }
-        // check the distribution of the nodes per level.
-        var distribution = this._getDistribution();
-
-        // place the nodes on the canvas. This also stablilizes the system.
-        this._placeNodesByHierarchy(distribution);
-
-        // start the simulation.
-        this.start();
       }
+      return i;
     }
   };
 
 
   /**
-   * This function places the nodes on the canvas based on the hierarchial distribution.
-   *
-   * @param {Object} distribution | obtained by the function this._getDistribution()
-   * @private
+   * get group properties of a groupname. If groupname is not found, a new group
+   * is added.
+   * @param {*} groupname        Can be a number, string, Date, etc.
+   * @return {Object} group      The created group, containing all group properties
    */
-  exports._placeNodesByHierarchy = function(distribution) {
-    var nodeId, node;
+  Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
 
-    // start placing all the level 0 nodes first. Then recursively position their branches.
-    for (nodeId in distribution[0].nodes) {
-      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
-        node = distribution[0].nodes[nodeId];
-        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-          if (node.xFixed) {
-            node.x = distribution[0].minPos;
-            node.xFixed = false;
+    if (group == undefined) {
+      // create new group
+      var index = this.defaultIndex % Groups.DEFAULT.length;
+      this.defaultIndex++;
+      group = {};
+      group.color = Groups.DEFAULT[index];
+      this.groups[groupname] = group;
+    }
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        else {
-          if (node.yFixed) {
-            node.y = distribution[0].minPos;
-            node.yFixed = false;
+    return group;
+  };
 
-            distribution[0].minPos += distribution[0].nodeSpacing;
-          }
-        }
-        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
-      }
+  /**
+   * Add a custom group style
+   * @param {String} groupname
+   * @param {Object} style       An object containing borderColor,
+   *                             backgroundColor, etc.
+   * @return {Object} group      The created group object
+   */
+  Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    if (style.color) {
+      style.color = util.parseColor(style.color);
     }
-
-    // stabilize the system after positioning. This function calls zoomExtent.
-    this._stabilize();
+    return style;
   };
 
+  module.exports = Groups;
+
+
+/***/ },
+/* 41 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This function get the distribution of levels based on hubsize
-   *
-   * @returns {Object}
-   * @private
+   * @class Images
+   * This class loads images and keeps them stored.
    */
-  exports._getDistribution = function() {
-    var distribution = {};
-    var nodeId, node, level;
+  function Images() {
+    this.images = {};
 
-    // 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.hasOwnProperty(node.level)) {
-          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
-        }
-        distribution[node.level].amount += 1;
-        distribution[node.level].nodes[node.id] = node;
-      }
-    }
+    this.callback = undefined;
+  }
 
-    // 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;
-        }
-      }
-    }
+  /**
+   * Set an onload callback function. This will be called each time an image
+   * is loaded
+   * @param {function} callback
+   */
+  Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
+  };
 
-    // 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);
-      }
+  /**
+   *
+   * @param {string} url          Url of the image
+   * @return {Image} img          The image object
+   */
+  Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+      // create the image
+      var images = this;
+      img = new Image();
+      this.images[url] = img;
+      img.onload = function() {
+        if (images.callback) {
+          images.callback(this);
+        }
+      };
+      img.src = url;
     }
 
-    return distribution;
+    return img;
   };
 
+  module.exports = Images;
+
+
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
-   *
-   * @param hubsize
-   * @private
+   * Popup is a class to create a popup window with some text
+   * @param {Element}  container     The container object.
+   * @param {Number} [x]
+   * @param {Number} [y]
+   * @param {String} [text]
+   * @param {Object} [style]     An object containing borderColor,
+   *                             backgroundColor, etc.
    */
-  exports._determineLevels = function(hubsize) {
-    var nodeId, node;
+  function Popup(container, x, y, text, style) {
+    if (container) {
+      this.container = container;
+    }
+    else {
+      this.container = document.body;
+    }
 
-    // determine hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.edges.length == hubsize) {
-          node.level = 0;
+    // x, y and text are optional, see if a style object was passed in their place
+    if (style === undefined) {
+      if (typeof x === "object") {
+        style = x;
+        x = undefined;
+      } else if (typeof text === "object") {
+        style = text;
+        text = undefined;
+      } else {
+        // for backwards compatibility, in case clients other than Network are creating Popup directly
+        style = {
+          fontColor: 'black',
+          fontSize: 14, // px
+          fontFace: 'verdana',
+          color: {
+            border: '#666',
+            background: '#FFFFC6'
+          }
         }
       }
     }
 
-    // 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);
-        }
-      }
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
+
+    if (x !== undefined && y !== undefined ) {
+      this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+      this.setText(text);
     }
-  };
 
+    // create the frame
+    this.frame = document.createElement("div");
+    var styleAttr = this.frame.style;
+    styleAttr.position = "absolute";
+    styleAttr.visibility = "hidden";
+    styleAttr.border = "1px solid " + style.color.border;
+    styleAttr.color = style.fontColor;
+    styleAttr.fontSize = style.fontSize + "px";
+    styleAttr.fontFamily = style.fontFace;
+    styleAttr.padding = this.padding + "px";
+    styleAttr.backgroundColor = style.color.background;
+    styleAttr.borderRadius = "3px";
+    styleAttr.MozBorderRadius = "3px";
+    styleAttr.WebkitBorderRadius = "3px";
+    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    styleAttr.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+  }
 
   /**
-   * 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
+   * @param {number} x   Horizontal position of the popup window
+   * @param {number} y   Vertical position of the popup window
    */
-  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();
+  Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
   };
 
+  /**
+   * Set the text for the popup window. This can be HTML code
+   * @param {string} text
+   */
+  Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
+  };
 
   /**
-   * 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
+   * Show the popup window
+   * @param {boolean} show    Optional. Show or hide the window
    */
-  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;
+  Popup.prototype.show = function (show) {
+    if (show === undefined) {
+      show = true;
+    }
+
+    if (show) {
+      var height = this.frame.clientHeight;
+      var width =  this.frame.clientWidth;
+      var maxHeight = this.frame.parentNode.clientHeight;
+      var maxWidth = this.frame.parentNode.clientWidth;
+
+      var top = (this.y - height);
+      if (top + height + this.padding > maxHeight) {
+        top = maxHeight - height - this.padding;
       }
-      else {
-        childNode = edges[i].to;
+      if (top < this.padding) {
+        top = this.padding;
       }
 
-      // 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;
-        }
+      var left = this.x;
+      if (left + width + this.padding > maxWidth) {
+        left = maxWidth - width - this.padding;
       }
-      else {
-        if (childNode.yFixed && childNode.level > parentLevel) {
-          childNode.yFixed = false;
-          childNode.y = distribution[childNode.level].minPos;
-          nodeMoved = true;
-        }
+      if (left < this.padding) {
+        left = this.padding;
       }
 
-      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);
-        }
-      }
+      this.frame.style.left = left + "px";
+      this.frame.style.top = top + "px";
+      this.frame.style.visibility = "visible";
     }
-  };
-
-
-  /**
-   * 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 (edges.length > 1) {
-          this._setLevel(level+1, childNode.edges, childNode.id);
-        }
-      }
+    else {
+      this.hide();
     }
   };
 
-
   /**
-   * Unfix nodes
-   *
-   * @private
+   * Hide the popup window
    */
-  exports._restoreNodes = function() {
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        this.nodes[nodeId].xFixed = false;
-        this.nodes[nodeId].yFixed = false;
-      }
-    }
+  Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
   };
 
+  module.exports = Popup;
+
 
 /***/ },
-/* 49 */
+/* 43 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /*! Hammer.JS - v1.0.5 - 2013-04-07
-   * http://eightmedia.github.com/hammer.js
-   *
-   * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
-   * Licensed under the MIT license */
-
-  (function(window, undefined) {
-      'use strict';
-
   /**
-   * Hammer
-   * use this to create instances
-   * @param   {HTMLElement}   element
-   * @param   {Object}        options
-   * @returns {Hammer.Instance}
-   * @constructor
+   * Parse a text source containing data in DOT language into a JSON object.
+   * The object contains two lists: one with nodes and one with edges.
+   *
+   * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+   *
+   * @param {String} data     Text containing a graph in DOT-notation
+   * @return {Object} graph   An object containing two parameters:
+   *                          {Object[]} nodes
+   *                          {Object[]} edges
    */
-  var Hammer = function(element, options) {
-      return new Hammer.Instance(element, options || {});
+  function parseDOT (data) {
+    dot = data;
+    return parseGraph();
+  }
+
+  // token types enumeration
+  var TOKENTYPE = {
+    NULL : 0,
+    DELIMITER : 1,
+    IDENTIFIER: 2,
+    UNKNOWN : 3
   };
 
-  // default settings
-  Hammer.defaults = {
-      // add styles and attributes to the element to prevent the browser from doing
-      // its native behavior. this doesnt prevent the scrolling, but cancels
-      // the contextmenu, tap highlighting etc
-      // set to false to disable this
-      stop_browser_behavior: {
-  		// this also triggers onselectstart=false for IE
-          userSelect: 'none',
-  		// this makes the element blocking in IE10 >, you could experiment with the value
-  		// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
-          touchAction: 'none',
-  		touchCallout: 'none',
-          contentZooming: 'none',
-          userDrag: 'none',
-          tapHighlightColor: 'rgba(0,0,0,0)'
-      }
+  // map with all delimiters
+  var DELIMITERS = {
+    '{': true,
+    '}': true,
+    '[': true,
+    ']': true,
+    ';': true,
+    '=': true,
+    ',': true,
 
-      // more settings are defined per gesture at gestures.js
+    '->': true,
+    '--': true
   };
 
-  // detect touchevents
-  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
-  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
-
-  // dont use mouseevents on mobile devices
-  Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
-  Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
+  var dot = '';                   // current dot file
+  var index = 0;                  // current index in dot file
+  var c = '';                     // current token character in expr
+  var token = '';                 // current token
+  var tokenType = TOKENTYPE.NULL; // type of the token
 
-  // eventtypes per touchevent (start, move, end)
-  // are filled by Hammer.event.determineEventTypes on setup
-  Hammer.EVENT_TYPES = {};
+  /**
+   * Get the first character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
+   */
+  function first() {
+    index = 0;
+    c = dot.charAt(0);
+  }
 
-  // direction defines
-  Hammer.DIRECTION_DOWN = 'down';
-  Hammer.DIRECTION_LEFT = 'left';
-  Hammer.DIRECTION_UP = 'up';
-  Hammer.DIRECTION_RIGHT = 'right';
+  /**
+   * Get the next character from the dot file.
+   * The character is stored into the char c. If the end of the dot file is
+   * reached, the function puts an empty string in c.
+   */
+  function next() {
+    index++;
+    c = dot.charAt(index);
+  }
 
-  // pointer type
-  Hammer.POINTER_MOUSE = 'mouse';
-  Hammer.POINTER_TOUCH = 'touch';
-  Hammer.POINTER_PEN = 'pen';
+  /**
+   * Preview the next character from the dot file.
+   * @return {String} cNext
+   */
+  function nextPreview() {
+    return dot.charAt(index + 1);
+  }
 
-  // touch event defines
-  Hammer.EVENT_START = 'start';
-  Hammer.EVENT_MOVE = 'move';
-  Hammer.EVENT_END = 'end';
+  /**
+   * Test whether given character is alphabetic or numeric
+   * @param {String} c
+   * @return {Boolean} isAlphaNumeric
+   */
+  var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+  function isAlphaNumeric(c) {
+    return regexAlphaNumeric.test(c);
+  }
 
-  // hammer document where the base events are added at
-  Hammer.DOCUMENT = document;
+  /**
+   * Merge all properties of object b into object b
+   * @param {Object} a
+   * @param {Object} b
+   * @return {Object} a
+   */
+  function merge (a, b) {
+    if (!a) {
+      a = {};
+    }
 
-  // plugins namespace
-  Hammer.plugins = {};
+    if (b) {
+      for (var name in b) {
+        if (b.hasOwnProperty(name)) {
+          a[name] = b[name];
+        }
+      }
+    }
+    return a;
+  }
 
-  // if the window events are set...
-  Hammer.READY = false;
+  /**
+   * Set a value in an object, where the provided parameter name can be a
+   * path with nested parameters. For example:
+   *
+   *     var obj = {a: 2};
+   *     setValue(obj, 'b.c', 3);     // obj = {a: 2, b: {c: 3}}
+   *
+   * @param {Object} obj
+   * @param {String} path  A parameter name or dot-separated parameter path,
+   *                      like "color.highlight.border".
+   * @param {*} value
+   */
+  function setValue(obj, path, value) {
+    var keys = path.split('.');
+    var o = obj;
+    while (keys.length) {
+      var key = keys.shift();
+      if (keys.length) {
+        // this isn't the end point
+        if (!o[key]) {
+          o[key] = {};
+        }
+        o = o[key];
+      }
+      else {
+        // this is the end point
+        o[key] = value;
+      }
+    }
+  }
 
   /**
-   * setup events to detect gestures on the document
+   * Add a node to a graph object. If there is already a node with
+   * the same id, their attributes will be merged.
+   * @param {Object} graph
+   * @param {Object} node
    */
-  function setup() {
-      if(Hammer.READY) {
-          return;
+  function addNode(graph, node) {
+    var i, len;
+    var current = null;
+
+    // find root graph (in case of subgraph)
+    var graphs = [graph]; // list with all graphs from current graph to root graph
+    var root = graph;
+    while (root.parent) {
+      graphs.push(root.parent);
+      root = root.parent;
+    }
+
+    // find existing node (at root level) by its id
+    if (root.nodes) {
+      for (i = 0, len = root.nodes.length; i < len; i++) {
+        if (node.id === root.nodes[i].id) {
+          current = root.nodes[i];
+          break;
+        }
       }
+    }
 
-      // find what eventtypes we add listeners to
-      Hammer.event.determineEventTypes();
+    if (!current) {
+      // this is a new node
+      current = {
+        id: node.id
+      };
+      if (graph.node) {
+        // clone default attributes
+        current.attr = merge(current.attr, graph.node);
+      }
+    }
 
-      // Register all gestures inside Hammer.gestures
-      for(var name in Hammer.gestures) {
-          if(Hammer.gestures.hasOwnProperty(name)) {
-              Hammer.detection.register(Hammer.gestures[name]);
-          }
+    // add node to this (sub)graph and all its parent graphs
+    for (i = graphs.length - 1; i >= 0; i--) {
+      var g = graphs[i];
+
+      if (!g.nodes) {
+        g.nodes = [];
+      }
+      if (g.nodes.indexOf(current) == -1) {
+        g.nodes.push(current);
       }
+    }
 
-      // Add touch events on the document
-      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
-      Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
+    // merge attributes
+    if (node.attr) {
+      current.attr = merge(current.attr, node.attr);
+    }
+  }
 
-      // Hammer is ready...!
-      Hammer.READY = true;
+  /**
+   * Add an edge to a graph object
+   * @param {Object} graph
+   * @param {Object} edge
+   */
+  function addEdge(graph, edge) {
+    if (!graph.edges) {
+      graph.edges = [];
+    }
+    graph.edges.push(edge);
+    if (graph.edge) {
+      var attr = merge({}, graph.edge);     // clone default attributes
+      edge.attr = merge(attr, edge.attr); // merge attributes
+    }
   }
 
   /**
-   * create new hammer instance
-   * all methods should return the instance itself, so it is chainable.
-   * @param   {HTMLElement}       element
-   * @param   {Object}            [options={}]
-   * @returns {Hammer.Instance}
-   * @constructor
+   * Create an edge to a graph object
+   * @param {Object} graph
+   * @param {String | Number | Object} from
+   * @param {String | Number | Object} to
+   * @param {String} type
+   * @param {Object | null} attr
+   * @return {Object} edge
    */
-  Hammer.Instance = function(element, options) {
-      var self = this;
+  function createEdge(graph, from, to, type, attr) {
+    var edge = {
+      from: from,
+      to: to,
+      type: type
+    };
 
-      // setup HammerJS window events and register all gestures
-      // this also sets up the default options
-      setup();
+    if (graph.edge) {
+      edge.attr = merge({}, graph.edge);  // clone default attributes
+    }
+    edge.attr = merge(edge.attr || {}, attr); // merge attributes
 
-      this.element = element;
+    return edge;
+  }
 
-      // start/stop detection option
-      this.enabled = true;
+  /**
+   * Get next token in the current dot file.
+   * The token and token type are available as token and tokenType
+   */
+  function getToken() {
+    tokenType = TOKENTYPE.NULL;
+    token = '';
 
-      // merge options
-      this.options = Hammer.utils.extend(
-          Hammer.utils.extend({}, Hammer.defaults),
-          options || {});
+    // skip over whitespaces
+    while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+      next();
+    }
 
-      // add some css to the element to prevent the browser from doing its native behavoir
-      if(this.options.stop_browser_behavior) {
-          Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
-      }
+    do {
+      var isComment = false;
 
-      // start detection on touchstart
-      Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
-          if(self.enabled) {
-              Hammer.detection.startDetect(self, ev);
+      // skip comment
+      if (c == '#') {
+        // find the previous non-space character
+        var i = index - 1;
+        while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+          i--;
+        }
+        if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+          // the # is at the start of a line, this is indeed a line comment
+          while (c != '' && c != '\n') {
+            next();
           }
-      });
-
-      // return instance
-      return this;
-  };
-
-
-  Hammer.Instance.prototype = {
-      /**
-       * bind events to the instance
-       * @param   {String}      gesture
-       * @param   {Function}    handler
-       * @returns {Hammer.Instance}
-       */
-      on: function onEvent(gesture, handler){
-          var gestures = gesture.split(' ');
-          for(var t=0; t<gestures.length; t++) {
-              this.element.addEventListener(gestures[t], handler, false);
+          isComment = true;
+        }
+      }
+      if (c == '/' && nextPreview() == '/') {
+        // skip line comment
+        while (c != '' && c != '\n') {
+          next();
+        }
+        isComment = true;
+      }
+      if (c == '/' && nextPreview() == '*') {
+        // skip block comment
+        while (c != '') {
+          if (c == '*' && nextPreview() == '/') {
+            // end of block comment found. skip these last two characters
+            next();
+            next();
+            break;
           }
-          return this;
-      },
-
-
-      /**
-       * unbind events to the instance
-       * @param   {String}      gesture
-       * @param   {Function}    handler
-       * @returns {Hammer.Instance}
-       */
-      off: function offEvent(gesture, handler){
-          var gestures = gesture.split(' ');
-          for(var t=0; t<gestures.length; t++) {
-              this.element.removeEventListener(gestures[t], handler, false);
+          else {
+            next();
           }
-          return this;
-      },
+        }
+        isComment = true;
+      }
 
+      // skip over whitespaces
+      while (c == ' ' || c == '\t' || c == '\n' || c == '\r') {  // space, tab, enter
+        next();
+      }
+    }
+    while (isComment);
 
-      /**
-       * trigger gesture event
-       * @param   {String}      gesture
-       * @param   {Object}      eventData
-       * @returns {Hammer.Instance}
-       */
-      trigger: function triggerEvent(gesture, eventData){
-          // create DOM event
-          var event = Hammer.DOCUMENT.createEvent('Event');
-  		event.initEvent(gesture, true, true);
-  		event.gesture = eventData;
+    // check for end of dot file
+    if (c == '') {
+      // token is still empty
+      tokenType = TOKENTYPE.DELIMITER;
+      return;
+    }
 
-          // trigger on the target if it is in the instance element,
-          // this is for event delegation tricks
-          var element = this.element;
-          if(Hammer.utils.hasParent(eventData.target, element)) {
-              element = eventData.target;
-          }
+    // check for delimiters consisting of 2 characters
+    var c2 = c + nextPreview();
+    if (DELIMITERS[c2]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c2;
+      next();
+      next();
+      return;
+    }
 
-          element.dispatchEvent(event);
-          return this;
-      },
+    // check for delimiters consisting of 1 character
+    if (DELIMITERS[c]) {
+      tokenType = TOKENTYPE.DELIMITER;
+      token = c;
+      next();
+      return;
+    }
 
+    // check for an identifier (number or string)
+    // TODO: more precise parsing of numbers/strings (and the port separator ':')
+    if (isAlphaNumeric(c) || c == '-') {
+      token += c;
+      next();
 
-      /**
-       * enable of disable hammer.js detection
-       * @param   {Boolean}   state
-       * @returns {Hammer.Instance}
-       */
-      enable: function enable(state) {
-          this.enabled = state;
-          return this;
+      while (isAlphaNumeric(c)) {
+        token += c;
+        next();
       }
-  };
+      if (token == 'false') {
+        token = false;   // convert to boolean
+      }
+      else if (token == 'true') {
+        token = true;   // convert to boolean
+      }
+      else if (!isNaN(Number(token))) {
+        token = Number(token); // convert to number
+      }
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
+    }
 
-  /**
-   * this holds the last move event,
-   * used to fix empty touchend issue
-   * see the onTouch event for an explanation
-   * @type {Object}
-   */
-  var last_move_event = null;
+    // check for a string enclosed by double quotes
+    if (c == '"') {
+      next();
+      while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+        token += c;
+        if (c == '"') { // skip the escape character
+          next();
+        }
+        next();
+      }
+      if (c != '"') {
+        throw newSyntaxError('End of string " expected');
+      }
+      next();
+      tokenType = TOKENTYPE.IDENTIFIER;
+      return;
+    }
 
+    // something unknown is found, wrong characters, a syntax error
+    tokenType = TOKENTYPE.UNKNOWN;
+    while (c != '') {
+      token += c;
+      next();
+    }
+    throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+  }
 
   /**
-   * when the mouse is hold down, this is true
-   * @type {Boolean}
+   * Parse a graph.
+   * @returns {Object} graph
    */
-  var enable_detect = false;
+  function parseGraph() {
+    var graph = {};
 
+    first();
+    getToken();
 
-  /**
-   * when touch events have been fired, this is true
-   * @type {Boolean}
-   */
-  var touch_triggered = false;
+    // optional strict keyword
+    if (token == 'strict') {
+      graph.strict = true;
+      getToken();
+    }
 
+    // graph or digraph keyword
+    if (token == 'graph' || token == 'digraph') {
+      graph.type = token;
+      getToken();
+    }
 
-  Hammer.event = {
-      /**
-       * simple addEventListener
-       * @param   {HTMLElement}   element
-       * @param   {String}        type
-       * @param   {Function}      handler
-       */
-      bindDom: function(element, type, handler) {
-          var types = type.split(' ');
-          for(var t=0; t<types.length; t++) {
-              element.addEventListener(types[t], handler, false);
-          }
-      },
+    // optional graph id
+    if (tokenType == TOKENTYPE.IDENTIFIER) {
+      graph.id = token;
+      getToken();
+    }
 
+    // open angle bracket
+    if (token != '{') {
+      throw newSyntaxError('Angle bracket { expected');
+    }
+    getToken();
 
-      /**
-       * touch events with mouse fallback
-       * @param   {HTMLElement}   element
-       * @param   {String}        eventType        like Hammer.EVENT_MOVE
-       * @param   {Function}      handler
-       */
-      onTouch: function onTouch(element, eventType, handler) {
-  		var self = this;
+    // statements
+    parseStatements(graph);
 
-          this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
-              var sourceEventType = ev.type.toLowerCase();
+    // close angle bracket
+    if (token != '}') {
+      throw newSyntaxError('Angle bracket } expected');
+    }
+    getToken();
 
-              // onmouseup, but when touchend has been fired we do nothing.
-              // this is for touchdevices which also fire a mouseup on touchend
-              if(sourceEventType.match(/mouse/) && touch_triggered) {
-                  return;
-              }
+    // end of file
+    if (token !== '') {
+      throw newSyntaxError('End of file expected');
+    }
+    getToken();
 
-              // mousebutton must be down or a touch event
-              else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
-                  sourceEventType.match(/pointerdown/) || // pointerevents touch
-                  (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
-              ){
-                  enable_detect = true;
-              }
+    // remove temporary default properties
+    delete graph.node;
+    delete graph.edge;
+    delete graph.graph;
 
-              // we are in a touch event, set the touch triggered bool to true,
-              // this for the conflicts that may occur on ios and android
-              if(sourceEventType.match(/touch|pointer/)) {
-                  touch_triggered = true;
-              }
+    return graph;
+  }
 
-              // count the total touches on the screen
-              var count_touches = 0;
+  /**
+   * Parse a list with statements.
+   * @param {Object} graph
+   */
+  function parseStatements (graph) {
+    while (token !== '' && token != '}') {
+      parseStatement(graph);
+      if (token == ';') {
+        getToken();
+      }
+    }
+  }
 
-              // when touch has been triggered in this detection session
-              // and we are now handling a mouse event, we stop that to prevent conflicts
-              if(enable_detect) {
-                  // update pointerevent
-                  if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
-                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
-                  }
-                  // touch
-                  else if(sourceEventType.match(/touch/)) {
-                      count_touches = ev.touches.length;
-                  }
-                  // mouse
-                  else if(!touch_triggered) {
-                      count_touches = sourceEventType.match(/up/) ? 0 : 1;
-                  }
+  /**
+   * Parse a single statement. Can be a an attribute statement, node
+   * statement, a series of node statements and edge statements, or a
+   * parameter.
+   * @param {Object} graph
+   */
+  function parseStatement(graph) {
+    // parse subgraph
+    var subgraph = parseSubgraph(graph);
+    if (subgraph) {
+      // edge statements
+      parseEdge(graph, subgraph);
 
-                  // if we are in a end event, but when we remove one touch and
-                  // we still have enough, set eventType to move
-                  if(count_touches > 0 && eventType == Hammer.EVENT_END) {
-                      eventType = Hammer.EVENT_MOVE;
-                  }
-                  // no touches, force the end event
-                  else if(!count_touches) {
-                      eventType = Hammer.EVENT_END;
-                  }
+      return;
+    }
 
-                  // because touchend has no touches, and we often want to use these in our gestures,
-                  // we send the last move event as our eventData in touchend
-                  if(!count_touches && last_move_event !== null) {
-                      ev = last_move_event;
-                  }
-                  // store the last move event
-                  else {
-                      last_move_event = ev;
-                  }
+    // parse an attribute statement
+    var attr = parseAttributeStatement(graph);
+    if (attr) {
+      return;
+    }
 
-                  // trigger the handler
-                  handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
+    // parse node
+    if (tokenType != TOKENTYPE.IDENTIFIER) {
+      throw newSyntaxError('Identifier expected');
+    }
+    var id = token; // id can be a string or a number
+    getToken();
 
-                  // remove pointerevent from list
-                  if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
-                      count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
-                  }
-              }
+    if (token == '=') {
+      // id statement
+      getToken();
+      if (tokenType != TOKENTYPE.IDENTIFIER) {
+        throw newSyntaxError('Identifier expected');
+      }
+      graph[id] = token;
+      getToken();
+      // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
+    }
+    else {
+      parseNodeStatement(graph, id);
+    }
+  }
 
-              //debug(sourceEventType +" "+ eventType);
+  /**
+   * Parse a subgraph
+   * @param {Object} graph    parent graph object
+   * @return {Object | null} subgraph
+   */
+  function parseSubgraph (graph) {
+    var subgraph = null;
 
-              // on the end we reset everything
-              if(!count_touches) {
-                  last_move_event = null;
-                  enable_detect = false;
-                  touch_triggered = false;
-                  Hammer.PointerEvent.reset();
-              }
-          });
-      },
+    // optional subgraph keyword
+    if (token == 'subgraph') {
+      subgraph = {};
+      subgraph.type = 'subgraph';
+      getToken();
 
+      // optional graph id
+      if (tokenType == TOKENTYPE.IDENTIFIER) {
+        subgraph.id = token;
+        getToken();
+      }
+    }
 
-      /**
-       * we have different events for each device/browser
-       * determine what we need and set them in the Hammer.EVENT_TYPES constant
-       */
-      determineEventTypes: function determineEventTypes() {
-          // determine the eventtype we want to set
-          var types;
+    // open angle bracket
+    if (token == '{') {
+      getToken();
 
-          // pointerEvents magic
-          if(Hammer.HAS_POINTEREVENTS) {
-              types = Hammer.PointerEvent.getEvents();
-          }
-          // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
-          else if(Hammer.NO_MOUSEEVENTS) {
-              types = [
-                  'touchstart',
-                  'touchmove',
-                  'touchend touchcancel'];
-          }
-          // for non pointer events browsers and mixed browsers,
-          // like chrome on windows8 touch laptop
-          else {
-              types = [
-                  'touchstart mousedown',
-                  'touchmove mousemove',
-                  'touchend touchcancel mouseup'];
-          }
+      if (!subgraph) {
+        subgraph = {};
+      }
+      subgraph.parent = graph;
+      subgraph.node = graph.node;
+      subgraph.edge = graph.edge;
+      subgraph.graph = graph.graph;
 
-          Hammer.EVENT_TYPES[Hammer.EVENT_START]  = types[0];
-          Hammer.EVENT_TYPES[Hammer.EVENT_MOVE]   = types[1];
-          Hammer.EVENT_TYPES[Hammer.EVENT_END]    = types[2];
-      },
+      // statements
+      parseStatements(subgraph);
 
+      // close angle bracket
+      if (token != '}') {
+        throw newSyntaxError('Angle bracket } expected');
+      }
+      getToken();
 
-      /**
-       * create touchlist depending on the event
-       * @param   {Object}    ev
-       * @param   {String}    eventType   used by the fakemultitouch plugin
-       */
-      getTouchList: function getTouchList(ev/*, eventType*/) {
-          // get the fake pointerEvent touchlist
-          if(Hammer.HAS_POINTEREVENTS) {
-              return Hammer.PointerEvent.getTouchList();
-          }
-          // get the touchlist
-          else if(ev.touches) {
-              return ev.touches;
-          }
-          // make fake touchlist from mouse position
-          else {
-              return [{
-                  identifier: 1,
-                  pageX: ev.pageX,
-                  pageY: ev.pageY,
-                  target: ev.target
-              }];
-          }
-      },
+      // remove temporary default properties
+      delete subgraph.node;
+      delete subgraph.edge;
+      delete subgraph.graph;
+      delete subgraph.parent;
 
+      // register at the parent graph
+      if (!graph.subgraphs) {
+        graph.subgraphs = [];
+      }
+      graph.subgraphs.push(subgraph);
+    }
 
-      /**
-       * collect event data for Hammer js
-       * @param   {HTMLElement}   element
-       * @param   {String}        eventType        like Hammer.EVENT_MOVE
-       * @param   {Object}        eventData
-       */
-      collectEventData: function collectEventData(element, eventType, ev) {
-          var touches = this.getTouchList(ev, eventType);
+    return subgraph;
+  }
 
-          // find out pointerType
-          var pointerType = Hammer.POINTER_TOUCH;
-          if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
-              pointerType = Hammer.POINTER_MOUSE;
-          }
+  /**
+   * parse an attribute statement like "node [shape=circle fontSize=16]".
+   * Available keywords are 'node', 'edge', 'graph'.
+   * The previous list with default attributes will be replaced
+   * @param {Object} graph
+   * @returns {String | null} keyword Returns the name of the parsed attribute
+   *                                  (node, edge, graph), or null if nothing
+   *                                  is parsed.
+   */
+  function parseAttributeStatement (graph) {
+    // attribute statements
+    if (token == 'node') {
+      getToken();
 
-          return {
-              center      : Hammer.utils.getCenter(touches),
-              timeStamp   : new Date().getTime(),
-              target      : ev.target,
-              touches     : touches,
-              eventType   : eventType,
-              pointerType : pointerType,
-              srcEvent    : ev,
+      // node attributes
+      graph.node = parseAttributeList();
+      return 'node';
+    }
+    else if (token == 'edge') {
+      getToken();
 
-              /**
-               * prevent the browser default actions
-               * mostly used to disable scrolling of the browser
-               */
-              preventDefault: function() {
-                  if(this.srcEvent.preventManipulation) {
-                      this.srcEvent.preventManipulation();
-                  }
+      // edge attributes
+      graph.edge = parseAttributeList();
+      return 'edge';
+    }
+    else if (token == 'graph') {
+      getToken();
 
-                  if(this.srcEvent.preventDefault) {
-                      this.srcEvent.preventDefault();
-                  }
-              },
+      // graph attributes
+      graph.graph = parseAttributeList();
+      return 'graph';
+    }
 
-              /**
-               * stop bubbling the event up to its parents
-               */
-              stopPropagation: function() {
-                  this.srcEvent.stopPropagation();
-              },
+    return null;
+  }
 
-              /**
-               * immediately stop gesture detection
-               * might be useful after a swipe was detected
-               * @return {*}
-               */
-              stopDetect: function() {
-                  return Hammer.detection.stopDetect();
-              }
-          };
-      }
-  };
+  /**
+   * parse a node statement
+   * @param {Object} graph
+   * @param {String | Number} id
+   */
+  function parseNodeStatement(graph, id) {
+    // node statement
+    var node = {
+      id: id
+    };
+    var attr = parseAttributeList();
+    if (attr) {
+      node.attr = attr;
+    }
+    addNode(graph, node);
 
-  Hammer.PointerEvent = {
-      /**
-       * holds all pointers
-       * @type {Object}
-       */
-      pointers: {},
+    // edge statements
+    parseEdge(graph, id);
+  }
 
-      /**
-       * get a list of pointers
-       * @returns {Array}     touchlist
-       */
-      getTouchList: function() {
-          var self = this;
-          var touchlist = [];
+  /**
+   * Parse an edge or a series of edges
+   * @param {Object} graph
+   * @param {String | Number} from        Id of the from node
+   */
+  function parseEdge(graph, from) {
+    while (token == '->' || token == '--') {
+      var to;
+      var type = token;
+      getToken();
 
-          // we can use forEach since pointerEvents only is in IE10
-          Object.keys(self.pointers).sort().forEach(function(id) {
-              touchlist.push(self.pointers[id]);
-          });
-          return touchlist;
-      },
+      var subgraph = parseSubgraph(graph);
+      if (subgraph) {
+        to = subgraph;
+      }
+      else {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Identifier or subgraph expected');
+        }
+        to = token;
+        addNode(graph, {
+          id: to
+        });
+        getToken();
+      }
 
-      /**
-       * update the position of a pointer
-       * @param   {String}   type             Hammer.EVENT_END
-       * @param   {Object}   pointerEvent
-       */
-      updatePointer: function(type, pointerEvent) {
-          if(type == Hammer.EVENT_END) {
-              this.pointers = {};
-          }
-          else {
-              pointerEvent.identifier = pointerEvent.pointerId;
-              this.pointers[pointerEvent.pointerId] = pointerEvent;
-          }
+      // parse edge attributes
+      var attr = parseAttributeList();
 
-          return Object.keys(this.pointers).length;
-      },
+      // create edge
+      var edge = createEdge(graph, from, to, type, attr);
+      addEdge(graph, edge);
 
-      /**
-       * check if ev matches pointertype
-       * @param   {String}        pointerType     Hammer.POINTER_MOUSE
-       * @param   {PointerEvent}  ev
-       */
-      matchType: function(pointerType, ev) {
-          if(!ev.pointerType) {
-              return false;
-          }
+      from = to;
+    }
+  }
 
-          var types = {};
-          types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
-          types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
-          types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
-          return types[pointerType];
-      },
+  /**
+   * Parse a set with attributes,
+   * for example [label="1.000", shape=solid]
+   * @return {Object | null} attr
+   */
+  function parseAttributeList() {
+    var attr = null;
 
+    while (token == '[') {
+      getToken();
+      attr = {};
+      while (token !== '' && token != ']') {
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute name expected');
+        }
+        var name = token;
 
-      /**
-       * get events
-       */
-      getEvents: function() {
-          return [
-              'pointerdown MSPointerDown',
-              'pointermove MSPointerMove',
-              'pointerup pointercancel MSPointerUp MSPointerCancel'
-          ];
-      },
+        getToken();
+        if (token != '=') {
+          throw newSyntaxError('Equal sign = expected');
+        }
+        getToken();
 
-      /**
-       * reset the list
-       */
-      reset: function() {
-          this.pointers = {};
+        if (tokenType != TOKENTYPE.IDENTIFIER) {
+          throw newSyntaxError('Attribute value expected');
+        }
+        var value = token;
+        setValue(attr, name, value); // name can be a path
+
+        getToken();
+        if (token ==',') {
+          getToken();
+        }
       }
-  };
 
+      if (token != ']') {
+        throw newSyntaxError('Bracket ] expected');
+      }
+      getToken();
+    }
 
-  Hammer.utils = {
-      /**
-       * extend method,
-       * also used for cloning when dest is an empty object
-       * @param   {Object}    dest
-       * @param   {Object}    src
-  	 * @parm	{Boolean}	merge		do a merge
-       * @returns {Object}    dest
-       */
-      extend: function extend(dest, src, merge) {
-          for (var key in src) {
-  			if(dest[key] !== undefined && merge) {
-  				continue;
-  			}
-              dest[key] = src[key];
-          }
-          return dest;
-      },
-
-
-      /**
-       * find if a node is in the given parent
-       * used for event delegation tricks
-       * @param   {HTMLElement}   node
-       * @param   {HTMLElement}   parent
-       * @returns {boolean}       has_parent
-       */
-      hasParent: function(node, parent) {
-          while(node){
-              if(node == parent) {
-                  return true;
-              }
-              node = node.parentNode;
-          }
-          return false;
-      },
-
-
-      /**
-       * get the center of all the touches
-       * @param   {Array}     touches
-       * @returns {Object}    center
-       */
-      getCenter: function getCenter(touches) {
-          var valuesX = [], valuesY = [];
-
-          for(var t= 0,len=touches.length; t<len; t++) {
-              valuesX.push(touches[t].pageX);
-              valuesY.push(touches[t].pageY);
-          }
-
-          return {
-              pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
-              pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
-          };
-      },
+    return attr;
+  }
 
+  /**
+   * Create a syntax error with extra information on current token and index.
+   * @param {String} message
+   * @returns {SyntaxError} err
+   */
+  function newSyntaxError(message) {
+    return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+  }
 
-      /**
-       * calculate the velocity between two points
-       * @param   {Number}    delta_time
-       * @param   {Number}    delta_x
-       * @param   {Number}    delta_y
-       * @returns {Object}    velocity
-       */
-      getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
-          return {
-              x: Math.abs(delta_x / delta_time) || 0,
-              y: Math.abs(delta_y / delta_time) || 0
-          };
-      },
+  /**
+   * Chop off text after a maximum length
+   * @param {String} text
+   * @param {Number} maxLength
+   * @returns {String}
+   */
+  function chop (text, maxLength) {
+    return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+  }
 
+  /**
+   * Execute a function fn for each pair of elements in two arrays
+   * @param {Array | *} array1
+   * @param {Array | *} array2
+   * @param {function} fn
+   */
+  function forEach2(array1, array2, fn) {
+    if (array1 instanceof Array) {
+      array1.forEach(function (elem1) {
+        if (array2 instanceof Array) {
+          array2.forEach(function (elem2)  {
+            fn(elem1, elem2);
+          });
+        }
+        else {
+          fn(elem1, array2);
+        }
+      });
+    }
+    else {
+      if (array2 instanceof Array) {
+        array2.forEach(function (elem2)  {
+          fn(array1, elem2);
+        });
+      }
+      else {
+        fn(array1, array2);
+      }
+    }
+  }
 
-      /**
-       * calculate the angle between two coordinates
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {Number}    angle
-       */
-      getAngle: function getAngle(touch1, touch2) {
-          var y = touch2.pageY - touch1.pageY,
-              x = touch2.pageX - touch1.pageX;
-          return Math.atan2(y, x) * 180 / Math.PI;
-      },
+  /**
+   * Convert a string containing a graph in DOT language into a map containing
+   * with nodes and edges in the format of graph.
+   * @param {String} data         Text containing a graph in DOT-notation
+   * @return {Object} graphData
+   */
+  function DOTToGraph (data) {
+    // parse the DOT file
+    var dotData = parseDOT(data);
+    var graphData = {
+      nodes: [],
+      edges: [],
+      options: {}
+    };
 
+    // copy the nodes
+    if (dotData.nodes) {
+      dotData.nodes.forEach(function (dotNode) {
+        var graphNode = {
+          id: dotNode.id,
+          label: String(dotNode.label || dotNode.id)
+        };
+        merge(graphNode, dotNode.attr);
+        if (graphNode.image) {
+          graphNode.shape = 'image';
+        }
+        graphData.nodes.push(graphNode);
+      });
+    }
 
+    // copy the edges
+    if (dotData.edges) {
       /**
-       * angle to direction define
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {String}    direction constant, like Hammer.DIRECTION_LEFT
+       * Convert an edge in DOT format to an edge with VisGraph format
+       * @param {Object} dotEdge
+       * @returns {Object} graphEdge
        */
-      getDirection: function getDirection(touch1, touch2) {
-          var x = Math.abs(touch1.pageX - touch2.pageX),
-              y = Math.abs(touch1.pageY - touch2.pageY);
+      function convertEdge(dotEdge) {
+        var graphEdge = {
+          from: dotEdge.from,
+          to: dotEdge.to
+        };
+        merge(graphEdge, dotEdge.attr);
+        graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+        return graphEdge;
+      }
 
-          if(x >= y) {
-              return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
-          }
-          else {
-              return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+      dotData.edges.forEach(function (dotEdge) {
+        var from, to;
+        if (dotEdge.from instanceof Object) {
+          from = dotEdge.from.nodes;
+        }
+        else {
+          from = {
+            id: dotEdge.from
           }
-      },
-
-
-      /**
-       * calculate the distance between two touches
-       * @param   {Touch}     touch1
-       * @param   {Touch}     touch2
-       * @returns {Number}    distance
-       */
-      getDistance: function getDistance(touch1, touch2) {
-          var x = touch2.pageX - touch1.pageX,
-              y = touch2.pageY - touch1.pageY;
-          return Math.sqrt((x*x) + (y*y));
-      },
-
+        }
 
-      /**
-       * calculate the scale factor between two touchLists (fingers)
-       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
-       * @param   {Array}     start
-       * @param   {Array}     end
-       * @returns {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]);
+        if (dotEdge.to instanceof Object) {
+          to = dotEdge.to.nodes;
+        }
+        else {
+          to = {
+            id: dotEdge.to
           }
-          return 1;
-      },
-
+        }
 
-      /**
-       * calculate the rotation degrees between two touchLists (fingers)
-       * @param   {Array}     start
-       * @param   {Array}     end
-       * @returns {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;
-      },
+        if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+          dotEdge.from.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
 
+        forEach2(from, to, function (from, to) {
+          var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+          var graphEdge = convertEdge(subEdge);
+          graphData.edges.push(graphEdge);
+        });
 
-      /**
-       * boolean if the direction is vertical
-       * @param    {String}    direction
-       * @returns  {Boolean}   is_vertical
-       */
-      isVertical: function isVertical(direction) {
-          return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
-      },
+        if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+          dotEdge.to.edges.forEach(function (subEdge) {
+            var graphEdge = convertEdge(subEdge);
+            graphData.edges.push(graphEdge);
+          });
+        }
+      });
+    }
 
+    // copy the options
+    if (dotData.attr) {
+      graphData.options = dotData.attr;
+    }
 
-      /**
-       * stop browser default behavior with css props
-       * @param   {HtmlElement}   element
-       * @param   {Object}        css_props
-       */
-      stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
-          var prop,
-              vendors = ['webkit','khtml','moz','ms','o',''];
+    return graphData;
+  }
 
-          if(!css_props || !element.style) {
-              return;
-          }
+  // exports
+  exports.parseDOT = parseDOT;
+  exports.DOTToGraph = DOTToGraph;
 
-          // with css properties for modern browsers
-          for(var i = 0; i < vendors.length; i++) {
-              for(var p in css_props) {
-                  if(css_props.hasOwnProperty(p)) {
-                      prop = p;
 
-                      // vender prefix at the property
-                      if(vendors[i]) {
-                          prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
-                      }
+/***/ },
+/* 44 */
+/***/ function(module, exports, __webpack_require__) {
 
-                      // set the style
-                      element.style[prop] = css_props[p];
-                  }
-              }
-          }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Moroccan Arabic (ar-ma)
+  // author : ElFadili Yassine : https://github.com/ElFadiliY
+  // author : Abdel Said : https://github.com/abdelsaid
 
-          // also the disable onselectstart
-          if(css_props.userSelect == 'none') {
-              element.onselectstart = function() {
-                  return false;
-              };
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-  };
-
-  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
-       * @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;
+  }(function (moment) {
+      return moment.lang('ar-ma', {
+          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
+          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          this.stopped = false;
 
-          this.current = {
-              inst        : inst, // reference to HammerInstance we're working for
-              startEvent  : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
-              lastEvent   : false, // last eventData
-              name        : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
-          };
+/***/ },
+/* 45 */
+/***/ function(module, exports, __webpack_require__) {
 
-          this.detect(eventData);
-      },
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic Saudi Arabia (ar-sa)
+  // author : Suhail Alkowaileet : https://github.com/xsoh
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
 
-      /**
-       * Hammer.gesture detection
-       * @param   {Object}    eventData
-       * @param   {Object}    eventData
-       */
-      detect: function detect(eventData) {
-          if(!this.current || this.stopped) {
-              return;
+      return moment.lang('ar-sa', {
+          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
+              }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          // extend event data with calculations about scale, distance etc
-          eventData = this.extendEventData(eventData);
 
-          // instance options
-          var inst_options = this.current.inst.options;
+/***/ },
+/* 46 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // call Hammer.gesture handlers
-          for(var g=0,len=this.gestures.length; g<len; g++) {
-              var gesture = this.gestures[g];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Arabic (ar)
+  // author : Abdel Said : https://github.com/abdelsaid
+  // changes in months, weekdays : Ahmed Elkhatib
 
-              // only when the instance options have enabled this gesture
-              if(!this.stopped && inst_options[gesture.name] !== false) {
-                  // if a handler returns false, we stop with the detection
-                  if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
-                      this.stopDetect();
-                      break;
-                  }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '١',
+          '2': '٢',
+          '3': '٣',
+          '4': '٤',
+          '5': '٥',
+          '6': '٦',
+          '7': '٧',
+          '8': '٨',
+          '9': '٩',
+          '0': '٠'
+      }, numberMap = {
+          '١': '1',
+          '٢': '2',
+          '٣': '3',
+          '٤': '4',
+          '٥': '5',
+          '٦': '6',
+          '٧': '7',
+          '٨': '8',
+          '٩': '9',
+          '٠': '0'
+      };
+
+      return moment.lang('ar', {
+          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
+          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
+          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
+          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ص";
+              } else {
+                  return "م";
               }
+          },
+          calendar : {
+              sameDay: "[اليوم على الساعة] LT",
+              nextDay: '[غدا على الساعة] LT',
+              nextWeek: 'dddd [على الساعة] LT',
+              lastDay: '[أمس على الساعة] LT',
+              lastWeek: 'dddd [على الساعة] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "في %s",
+              past : "منذ %s",
+              s : "ثوان",
+              m : "دقيقة",
+              mm : "%d دقائق",
+              h : "ساعة",
+              hh : "%d ساعات",
+              d : "يوم",
+              dd : "%d أيام",
+              M : "شهر",
+              MM : "%d أشهر",
+              y : "سنة",
+              yy : "%d سنوات"
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          // store as previous event event
-          if(this.current) {
-              this.current.lastEvent = eventData;
-          }
 
-          // endevent, but not the last touch, so dont stop
-          if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
-              this.stopDetect();
-          }
+/***/ },
+/* 47 */
+/***/ function(module, exports, __webpack_require__) {
 
-          return eventData;
-      },
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : azerbaijani (az)
+  // author : topchiyev : https://github.com/topchiyev
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-      /**
-       * 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
-       */
-      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 = Hammer.utils.extend({}, this.current);
+      var suffixes = {
+          1: "-inci",
+          5: "-inci",
+          8: "-inci",
+          70: "-inci",
+          80: "-inci",
 
-          // reset the current
-          this.current = null;
+          2: "-nci",
+          7: "-nci",
+          20: "-nci",
+          50: "-nci",
 
-          // stopped!
-          this.stopped = true;
-      },
+          3: "-üncü",
+          4: "-üncü",
+          100: "-üncü",
 
+          6: "-ncı",
 
-      /**
-       * extend eventData for Hammer.gestures
-       * @param   {Object}   ev
-       * @returns {Object}   ev
-       */
-      extendEventData: function extendEventData(ev) {
-          var startEv = this.current.startEvent;
+          9: "-uncu",
+          10: "-uncu",
+          30: "-uncu",
 
-          // if the touches change, set the new touches over the startEvent touches
-          // this because touchevents don't have all the touches on touchstart, or the
-          // user must place his fingers at the EXACT same time on the screen, which is not realistic
-          // but, sometimes it happens that both fingers are touching at the EXACT same time
-          if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
-              // extend 1 level deep to get the touchlist with the touch objects
-              startEv.touches = [];
-              for(var i=0,len=ev.touches.length; i<len; i++) {
-                  startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
+          60: "-ıncı",
+          90: "-ıncı"
+      };
+      return moment.lang('az', {
+          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
+          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
+          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
+          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
+          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[sabah saat] LT',
+              nextWeek : '[gələn həftə] dddd [saat] LT',
+              lastDay : '[dünən] LT',
+              lastWeek : '[keçən həftə] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s əvvəl",
+              s : "birneçə saniyyə",
+              m : "bir dəqiqə",
+              mm : "%d dəqiqə",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir il",
+              yy : "%d il"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "gecə";
+              } else if (hour < 12) {
+                  return "səhər";
+              } else if (hour < 17) {
+                  return "gündüz";
+              } else {
+                  return "axşam";
               }
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "-ıncı";
+              }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
+
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          var delta_time = ev.timeStamp - startEv.timeStamp,
-              delta_x = ev.center.pageX - startEv.center.pageX,
-              delta_y = ev.center.pageY - startEv.center.pageY,
-              velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
 
-          Hammer.utils.extend(ev, {
-              deltaTime   : delta_time,
+/***/ },
+/* 48 */
+/***/ function(module, exports, __webpack_require__) {
 
-              deltaX      : delta_x,
-              deltaY      : delta_y,
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bulgarian (bg)
+  // author : Krasen Borisov : https://github.com/kraz
 
-              velocityX   : velocity.x,
-              velocityY   : velocity.y,
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('bg', {
+          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
+          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Днес в] LT',
+              nextDay : '[Утре в] LT',
+              nextWeek : 'dddd [в] LT',
+              lastDay : '[Вчера в] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[В изминалата] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[В изминалия] dddd [в] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "след %s",
+              past : "преди %s",
+              s : "няколко секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дни",
+              M : "месец",
+              MM : "%d месеца",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
+              }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-              distance    : Hammer.utils.getDistance(startEv.center, ev.center),
-              angle       : Hammer.utils.getAngle(startEv.center, ev.center),
-              direction   : Hammer.utils.getDirection(startEv.center, ev.center),
 
-              scale       : Hammer.utils.getScale(startEv.touches, ev.touches),
-              rotation    : Hammer.utils.getRotation(startEv.touches, ev.touches),
+/***/ },
+/* 49 */
+/***/ function(module, exports, __webpack_require__) {
 
-              startEvent  : startEv
-          });
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bengali (bn)
+  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
 
-          return ev;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '১',
+          '2': '২',
+          '3': '৩',
+          '4': '৪',
+          '5': '৫',
+          '6': '৬',
+          '7': '৭',
+          '8': '৮',
+          '9': '৯',
+          '0': '০'
       },
+      numberMap = {
+          '১': '1',
+          '২': '2',
+          '৩': '3',
+          '৪': '4',
+          '৫': '5',
+          '৬': '6',
+          '৭': '7',
+          '৮': '8',
+          '৯': '9',
+          '০': '0'
+      };
 
-
-      /**
-       * register new gesture
-       * @param   {Object}    gesture object, see gestures.js for documentation
-       * @returns {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;
+      return moment.lang('bn', {
+          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
+          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
+          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
+          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
+          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm সময়",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[আজ] LT',
+              nextDay : '[আগামীকাল] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[গতকাল] LT',
+              lastWeek : '[গত] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s পরে",
+              past : "%s আগে",
+              s : "কএক সেকেন্ড",
+              m : "এক মিনিট",
+              mm : "%d মিনিট",
+              h : "এক ঘন্টা",
+              hh : "%d ঘন্টা",
+              d : "এক দিন",
+              dd : "%d দিন",
+              M : "এক মাস",
+              MM : "%d মাস",
+              y : "এক বছর",
+              yy : "%d বছর"
+          },
+          preparse: function (string) {
+              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          //Bengali is a vast language its spoken 
+          //in different forms in various parts of the world.
+          //I have just generalized with most common one used
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "রাত";
+              } else if (hour < 10) {
+                  return "শকাল";
+              } else if (hour < 17) {
+                  return "দুপুর";
+              } else if (hour < 20) {
+                  return "বিকেল";
+              } else {
+                  return "রাত";
+              }
+          },
+          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.
           }
+      });
+  }));
 
-          // extend Hammer default options with the Hammer.gesture options
-          Hammer.utils.extend(Hammer.defaults, options, true);
 
-          // set its index
-          gesture.index = gesture.index || 1000;
+/***/ },
+/* 50 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // add Hammer.gesture to the list
-          this.gestures.push(gesture);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : breton (br)
+  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
 
-          // 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;
-          });
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function relativeTimeWithMutation(number, withoutSuffix, key) {
+          var format = {
+              'mm': "munutenn",
+              'MM': "miz",
+              'dd': "devezh"
+          };
+          return number + ' ' + mutation(format[key], number);
+      }
 
-          return this.gestures;
+      function specialMutationForYears(number) {
+          switch (lastNumber(number)) {
+          case 1:
+          case 3:
+          case 4:
+          case 5:
+          case 9:
+              return number + ' bloaz';
+          default:
+              return number + ' vloaz';
+          }
       }
-  };
 
+      function lastNumber(number) {
+          if (number > 9) {
+              return lastNumber(number % 10);
+          }
+          return number;
+      }
 
-  Hammer.gestures = Hammer.gestures || {};
+      function mutation(text, number) {
+          if (number === 2) {
+              return softMutation(text);
+          }
+          return text;
+      }
 
-  /**
-   * Custom gestures
-   * ==============================
-   *
-   * Gesture object
-   * --------------------
-   * The object structure of a gesture:
-   *
-   * { name: 'mygesture',
-   *   index: 1337,
-   *   defaults: {
-   *     mygesture_option: true
-   *   }
-   *   handler: function(type, ev, inst) {
-   *     // trigger gesture event
-   *     inst.trigger(this.name, ev);
-   *   }
-   * }
-
-   * @param   {String}    name
-   * this should be the name of the gesture, lowercase
-   * it is also being used to disable/enable the gesture per instance config.
-   *
-   * @param   {Number}    [index=1000]
-   * the index of the gesture, where it is going to be in the stack of gestures detection
-   * like when you build an gesture that depends on the drag gesture, it is a good
-   * idea to place it after the index of the drag gesture.
-   *
-   * @param   {Object}    [defaults={}]
-   * the default settings of the gesture. these are added to the instance settings,
-   * and can be overruled per instance. you can also add the name of the gesture,
-   * but this is also added by default (and set to true).
-   *
-   * @param   {Function}  handler
-   * this handles the gesture detection of your custom gesture and receives the
-   * following arguments:
-   *
-   *      @param  {Object}    eventData
-   *      event data containing the following properties:
-   *          timeStamp   {Number}        time the event occurred
-   *          target      {HTMLElement}   target element
-   *          touches     {Array}         touches (fingers, pointers, mouse) on the screen
-   *          pointerType {String}        kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
-   *          center      {Object}        center position of the touches. contains pageX and pageY
-   *          deltaTime   {Number}        the total time of the touches in the screen
-   *          deltaX      {Number}        the delta on x axis we haved moved
-   *          deltaY      {Number}        the delta on y axis we haved moved
-   *          velocityX   {Number}        the velocity on the x
-   *          velocityY   {Number}        the velocity on y
-   *          angle       {Number}        the angle we are moving
-   *          direction   {String}        the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
-   *          distance    {Number}        the distance we haved moved
-   *          scale       {Number}        scaling of the touches, needs 2 touches
-   *          rotation    {Number}        rotation of the touches, needs 2 touches *
-   *          eventType   {String}        matches Hammer.EVENT_START|MOVE|END
-   *          srcEvent    {Object}        the source event, like TouchStart or MouseDown *
-   *          startEvent  {Object}        contains the same properties as above,
-   *                                      but from the first touch. this is used to calculate
-   *                                      distances, deltaTime, scaling etc
-   *
-   *      @param  {Hammer.Instance}    inst
-   *      the instance we are doing the detection for. you can get the options from
-   *      the inst.options object and trigger the gesture event by calling inst.trigger
-   *
-   *
-   * Handle gestures
-   * --------------------
-   * inside the handler you can get/set Hammer.detection.current. This is the current
-   * detection session. It has the following properties
-   *      @param  {String}    name
-   *      contains the name of the gesture we have detected. it has not a real function,
-   *      only to check in other gestures if something is detected.
-   *      like in the drag gesture we set it to 'drag' and in the swipe gesture we can
-   *      check if the current gesture is 'drag' by accessing Hammer.detection.current.name
-   *
-   *      @readonly
-   *      @param  {Hammer.Instance}    inst
-   *      the instance we do the detection for
-   *
-   *      @readonly
-   *      @param  {Object}    startEvent
-   *      contains the properties of the first gesture detection in this session.
-   *      Used for calculations about timing, distance, etc.
-   *
-   *      @readonly
-   *      @param  {Object}    lastEvent
-   *      contains all the properties of the last gesture detect in this session.
-   *
-   * after the gesture detection session has been completed (user has released the screen)
-   * the Hammer.detection.current object is copied into Hammer.detection.previous,
-   * this is usefull for gestures like doubletap, where you need to know if the
-   * previous gesture was a tap
-   *
-   * options that have been set by the instance can be received by calling inst.options
-   *
-   * You can trigger a gesture event by calling inst.trigger("mygesture", event).
-   * The first param is the name of your gesture, the second the event argument
-   *
-   *
-   * Register gestures
-   * --------------------
-   * When an gesture is added to the Hammer.gestures object, it is auto registered
-   * at the setup of the first Hammer instance. You can also call Hammer.detection.register
-   * manually and pass your gesture object as a param
-   *
-   */
-
-  /**
-   * Hold
-   * Touch stays at the same place for x time
-   * @events  hold
-   */
-  Hammer.gestures.Hold = {
-      name: 'hold',
-      index: 10,
-      defaults: {
-          hold_timeout	: 500,
-          hold_threshold	: 1
-      },
-      timer: null,
-      handler: function holdGesture(ev, inst) {
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  // clear any running timers
-                  clearTimeout(this.timer);
-
-                  // set the gesture so we can check in the timeout if it still is
-                  Hammer.detection.current.name = this.name;
-
-                  // set timer and if after the timeout it still is hold,
-                  // we trigger the hold event
-                  this.timer = setTimeout(function() {
-                      if(Hammer.detection.current.name == 'hold') {
-                          inst.trigger('hold', ev);
-                      }
-                  }, inst.options.hold_timeout);
-                  break;
-
-              // when you move or end we clear the timer
-              case Hammer.EVENT_MOVE:
-                  if(ev.distance > inst.options.hold_threshold) {
-                      clearTimeout(this.timer);
-                  }
-                  break;
-
-              case Hammer.EVENT_END:
-                  clearTimeout(this.timer);
-                  break;
+      function softMutation(text) {
+          var mutationTable = {
+              'm': 'v',
+              'b': 'v',
+              'd': 'z'
+          };
+          if (mutationTable[text.charAt(0)] === undefined) {
+              return text;
           }
+          return mutationTable[text.charAt(0)] + text.substring(1);
       }
-  };
 
+      return moment.lang('br', {
+          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
+          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
+          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
+          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
+          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
+          longDateFormat : {
+              LT : "h[e]mm A",
+              L : "DD/MM/YYYY",
+              LL : "D [a viz] MMMM YYYY",
+              LLL : "D [a viz] MMMM YYYY LT",
+              LLLL : "dddd, D [a viz] MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Hiziv da] LT',
+              nextDay : '[Warc\'hoazh da] LT',
+              nextWeek : 'dddd [da] LT',
+              lastDay : '[Dec\'h da] LT',
+              lastWeek : 'dddd [paset da] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "a-benn %s",
+              past : "%s 'zo",
+              s : "un nebeud segondennoù",
+              m : "ur vunutenn",
+              mm : relativeTimeWithMutation,
+              h : "un eur",
+              hh : "%d eur",
+              d : "un devezh",
+              dd : relativeTimeWithMutation,
+              M : "ur miz",
+              MM : relativeTimeWithMutation,
+              y : "ur bloaz",
+              yy : specialMutationForYears
+          },
+          ordinal : function (number) {
+              var output = (number === 1) ? 'añ' : 'vet';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-  /**
-   * Tap/DoubleTap
-   * Quick touch at a place or double at the same place
-   * @events  tap, doubletap
-   */
-  Hammer.gestures.Tap = {
-      name: 'tap',
-      index: 100,
-      defaults: {
-          tap_max_touchtime	: 250,
-          tap_max_distance	: 10,
-  		tap_always			: true,
-          doubletap_distance	: 20,
-          doubletap_interval	: 300
-      },
-      handler: function tapGesture(ev, inst) {
-          if(ev.eventType == Hammer.EVENT_END) {
-              // previous gesture, for the double tap since these are two different gesture detections
-              var prev = Hammer.detection.previous,
-  				did_doubletap = false;
 
-              // when the touchtime is higher then the max touch time
-              // or when the moving distance is too much
-              if(ev.deltaTime > inst.options.tap_max_touchtime ||
-                  ev.distance > inst.options.tap_max_distance) {
-                  return;
-              }
+/***/ },
+/* 51 */
+/***/ function(module, exports, __webpack_require__) {
 
-              // check if double tap
-              if(prev && prev.name == 'tap' &&
-                  (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
-                  ev.distance < inst.options.doubletap_distance) {
-  				inst.trigger('doubletap', ev);
-  				did_doubletap = true;
-              }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : bosnian (bs)
+  // author : Nedim Cholich : https://github.com/frontyard
+  // based on (hr) translation by Bojan Marković
 
-  			// do a single tap
-  			if(!did_doubletap || inst.options.tap_always) {
-  				Hammer.detection.current.name = 'tap';
-  				inst.trigger(Hammer.detection.current.name, ev);
-  			}
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-  };
-
+  }(function (moment) {
 
-  /**
-   * Swipe
-   * triggers swipe events when the end velocity is above the threshold
-   * @events  swipe, swipeleft, swiperight, swipeup, swipedown
-   */
-  Hammer.gestures.Swipe = {
-      name: 'swipe',
-      index: 40,
-      defaults: {
-          // set 0 for unlimited, but this can conflict with transform
-          swipe_max_touches  : 1,
-          swipe_velocity     : 0.7
-      },
-      handler: function swipeGesture(ev, inst) {
-          if(ev.eventType == Hammer.EVENT_END) {
-              // max touches
-              if(inst.options.swipe_max_touches > 0 &&
-                  ev.touches.length > inst.options.swipe_max_touches) {
-                  return;
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
               }
-
-              // when the distance we moved is too small we skip this gesture
-              // or we can be already in dragging
-              if(ev.velocityX > inst.options.swipe_velocity ||
-                  ev.velocityY > inst.options.swipe_velocity) {
-                  // trigger swipe events
-                  inst.trigger(this.name, ev);
-                  inst.trigger(this.name + ev.direction, ev);
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
               }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
           }
       }
-  };
-
-
-  /**
-   * Drag
-   * Move with x fingers (default 1) around on the page. Blocking the scrolling when
-   * moving left and right is a good practice. When all the drag events are blocking
-   * you disable scrolling on that area.
-   * @events  drag, drapleft, dragright, dragup, dragdown
-   */
-  Hammer.gestures.Drag = {
-      name: 'drag',
-      index: 50,
-      defaults: {
-          drag_min_distance : 10,
-          // set 0 for unlimited, but this can conflict with transform
-          drag_max_touches  : 1,
-          // 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
-          drag_block_horizontal   : false,
-          drag_block_vertical     : false,
-          // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
-          // It disallows vertical directions if the initial direction was horizontal, and vice versa.
-          drag_lock_to_axis       : false,
-          // drag lock only kicks in when distance > drag_lock_min_distance
-          // This way, locking occurs only when the distance has become large enough to reliably determine the direction
-          drag_lock_min_distance : 25
-      },
-      triggered: false,
-      handler: function dragGesture(ev, inst) {
-          // current gesture isnt drag, but dragged is true
-          // this means an other gesture is busy. now call dragend
-          if(Hammer.detection.current.name != this.name && this.triggered) {
-              inst.trigger(this.name +'end', ev);
-              this.triggered = false;
-              return;
-          }
-
-          // max touches
-          if(inst.options.drag_max_touches > 0 &&
-              ev.touches.length > inst.options.drag_max_touches) {
-              return;
-          }
-
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  this.triggered = false;
-                  break;
-
-              case Hammer.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.drag_min_distance &&
-                      Hammer.detection.current.name != this.name) {
-                      return;
-                  }
 
-                  // we are dragging!
-                  Hammer.detection.current.name = this.name;
+      return moment.lang('bs', {
+  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
+  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
 
-                  // lock drag to axis?
-                  if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
-                      ev.drag_locked_to_axis = true;
-                  }
-                  var last_direction = Hammer.detection.current.lastEvent.direction;
-                  if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
-                      // keep direction on the axis that the drag gesture started on
-                      if(Hammer.utils.isVertical(last_direction)) {
-                          ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
-                      }
-                      else {
-                          ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
-                      }
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
                   }
-
-                  // first time, trigger dragstart event
-                  if(!this.triggered) {
-                      inst.trigger(this.name +'start', ev);
-                      this.triggered = true;
+              },
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
                   }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-                  // trigger normal event
-                  inst.trigger(this.name, ev);
-
-                  // direction event, like dragdown
-                  inst.trigger(this.name + ev.direction, ev);
 
-                  // block the browser events
-                  if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
-                      (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
-                      ev.preventDefault();
-                  }
-                  break;
+/***/ },
+/* 52 */
+/***/ function(module, exports, __webpack_require__) {
 
-              case Hammer.EVENT_END:
-                  // trigger dragend
-                  if(this.triggered) {
-                      inst.trigger(this.name +'end', ev);
-                  }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : catalan (ca)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
-                  this.triggered = false;
-                  break;
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-  };
-
-
-  /**
-   * Transform
-   * User want to scale or rotate with 2 fingers
-   * @events  transform, pinch, pinchin, pinchout, rotate
-   */
-  Hammer.gestures.Transform = {
-      name: 'transform',
-      index: 45,
-      defaults: {
-          // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
-          transform_min_scale     : 0.01,
-          // rotation in degrees
-          transform_min_rotation  : 1,
-          // prevent default browser behavior when two touches are on the screen
-          // but it makes the element a blocking element
-          // when you are using the transform gesture, it is a good practice to set this true
-          transform_always_block  : false
-      },
-      triggered: false,
-      handler: function transformGesture(ev, inst) {
-          // current gesture isnt drag, but dragged is true
-          // this means an other gesture is busy. now call dragend
-          if(Hammer.detection.current.name != this.name && this.triggered) {
-              inst.trigger(this.name +'end', ev);
-              this.triggered = false;
-              return;
-          }
-
-          // atleast multitouch
-          if(ev.touches.length < 2) {
-              return;
-          }
-
-          // prevent default when two fingers are on the screen
-          if(inst.options.transform_always_block) {
-              ev.preventDefault();
+  }(function (moment) {
+      return moment.lang('ca', {
+          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
+          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
+          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
+          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
+          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextDay : function () {
+                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "en %s",
+              past : "fa %s",
+              s : "uns segons",
+              m : "un minut",
+              mm : "%d minuts",
+              h : "una hora",
+              hh : "%d hores",
+              d : "un dia",
+              dd : "%d dies",
+              M : "un mes",
+              MM : "%d mesos",
+              y : "un any",
+              yy : "%d anys"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
+      });
+  }));
 
-          switch(ev.eventType) {
-              case Hammer.EVENT_START:
-                  this.triggered = false;
-                  break;
-
-              case Hammer.EVENT_MOVE:
-                  var scale_threshold = Math.abs(1-ev.scale);
-                  var rotation_threshold = Math.abs(ev.rotation);
 
-                  // when the distance we moved is too small we skip this gesture
-                  // or we can be already in dragging
-                  if(scale_threshold < inst.options.transform_min_scale &&
-                      rotation_threshold < inst.options.transform_min_rotation) {
-                      return;
-                  }
+/***/ },
+/* 53 */
+/***/ function(module, exports, __webpack_require__) {
 
-                  // we are transforming!
-                  Hammer.detection.current.name = this.name;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : czech (cs)
+  // author : petrbela : https://github.com/petrbela
 
-                  // first time, trigger dragstart event
-                  if(!this.triggered) {
-                      inst.trigger(this.name +'start', ev);
-                      this.triggered = true;
-                  }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
+          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
 
-                  inst.trigger(this.name, ev); // basic transform event
+      function plural(n) {
+          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
+      }
 
-                  // trigger rotate event
-                  if(rotation_threshold > inst.options.transform_min_rotation) {
-                      inst.trigger('rotate', ev);
-                  }
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minuty' : 'minut');
+              } else {
+                  return result + 'minutami';
+              }
+              break;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodin');
+              } else {
+                  return result + 'hodinami';
+              }
+              break;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dny' : 'dní');
+              } else {
+                  return result + 'dny';
+              }
+              break;
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'měsíce' : 'měsíců');
+              } else {
+                  return result + 'měsíci';
+              }
+              break;
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'let');
+              } else {
+                  return result + 'lety';
+              }
+              break;
+          }
+      }
 
-                  // trigger pinch event
-                  if(scale_threshold > inst.options.transform_min_scale) {
-                      inst.trigger('pinch', ev);
-                      inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
+      return moment.lang('cs', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
+              }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
+          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
+          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
+          longDateFormat : {
+              LT: "H.mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes v] LT",
+              nextDay: '[zítra v] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [v] LT';
+                  case 3:
+                      return '[ve středu v] LT';
+                  case 4:
+                      return '[ve čtvrtek v] LT';
+                  case 5:
+                      return '[v pátek v] LT';
+                  case 6:
+                      return '[v sobotu v] LT';
                   }
-                  break;
-
-              case Hammer.EVENT_END:
-                  // trigger dragend
-                  if(this.triggered) {
-                      inst.trigger(this.name +'end', ev);
+              },
+              lastDay: '[včera v] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulou neděli v] LT';
+                  case 1:
+                  case 2:
+                      return '[minulé] dddd [v] LT';
+                  case 3:
+                      return '[minulou středu v] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [v] LT';
+                  case 6:
+                      return '[minulou sobotu v] LT';
                   }
-
-                  this.triggered = false;
-                  break;
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "před %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-      }
-  };
-
+      });
+  }));
 
-  /**
-   * Touch
-   * Called as first, tells the user has touched the screen
-   * @events  touch
-   */
-  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
-          prevent_default: false,
 
-          // disable mouse events, so only touch (or pen!) input triggers events
-          prevent_mouseevents: false
-      },
-      handler: function touchGesture(ev, inst) {
-          if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
-              ev.stopDetect();
-              return;
-          }
+/***/ },
+/* 54 */
+/***/ function(module, exports, __webpack_require__) {
 
-          if(inst.options.prevent_default) {
-              ev.preventDefault();
-          }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chuvash (cv)
+  // author : Anatoly Mironov : https://github.com/mirontoli
 
-          if(ev.eventType ==  Hammer.EVENT_START) {
-              inst.trigger(this.name, ev);
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-  };
-
-
-  /**
-   * Release
-   * Called as last, tells the user has released the screen
-   * @events  release
-   */
-  Hammer.gestures.Release = {
-      name: 'release',
-      index: Infinity,
-      handler: function releaseGesture(ev, inst) {
-          if(ev.eventType ==  Hammer.EVENT_END) {
-              inst.trigger(this.name, ev);
+  }(function (moment) {
+      return moment.lang('cv', {
+          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
+          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
+          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
+          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
+          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
+              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
+              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
+          },
+          calendar : {
+              sameDay: '[Паян] LT [сехетре]',
+              nextDay: '[Ыран] LT [сехетре]',
+              lastDay: '[Ĕнер] LT [сехетре]',
+              nextWeek: '[Çитес] dddd LT [сехетре]',
+              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : function (output) {
+                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
+                  return output + affix;
+              },
+              past : "%s каялла",
+              s : "пĕр-ик çеккунт",
+              m : "пĕр минут",
+              mm : "%d минут",
+              h : "пĕр сехет",
+              hh : "%d сехет",
+              d : "пĕр кун",
+              dd : "%d кун",
+              M : "пĕр уйăх",
+              MM : "%d уйăх",
+              y : "пĕр çул",
+              yy : "%d çул"
+          },
+          ordinal : '%d-мĕш',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-      }
-  };
-
-  // node export
-  if(typeof module === 'object' && typeof module.exports === 'object'){
-      module.exports = Hammer;
-  }
-  // just window export
-  else {
-      window.Hammer = Hammer;
+      });
+  }));
 
-      // requireJS module definition
-      if(typeof window.define === 'function' && window.define.amd) {
-          window.define('hammer', [], function() {
-              return Hammer;
-          });
-      }
-  }
-  })(this);
 
 /***/ },
-/* 50 */
+/* 55 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var RepulsionMixin = __webpack_require__(52);
-  var HierarchialRepulsionMixin = __webpack_require__(53);
-  var BarnesHutMixin = __webpack_require__(54);
-
-  /**
-   * 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();
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Welsh (cy)
+  // author : Robert Allen
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang("cy", {
+          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
+          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
+          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
+          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
+          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
+          // time formats are the same as en-gb
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[Heddiw am] LT',
+              nextDay: '[Yfory am] LT',
+              nextWeek: 'dddd [am] LT',
+              lastDay: '[Ddoe am] LT',
+              lastWeek: 'dddd [diwethaf am] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "mewn %s",
+              past: "%s yn ôl",
+              s: "ychydig eiliadau",
+              m: "munud",
+              mm: "%d munud",
+              h: "awr",
+              hh: "%d awr",
+              d: "diwrnod",
+              dd: "%d diwrnod",
+              M: "mis",
+              MM: "%d mis",
+              y: "blwyddyn",
+              yy: "%d flynedd"
+          },
+          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
+          ordinal: function (number) {
+              var b = number,
+                  output = '',
+                  lookup = [
+                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
+                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
+                  ];
 
-  /**
-   * 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);
+              if (b > 20) {
+                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
+                      output = 'fed'; // not 30ain, 70ain or 90ain
+                  } else {
+                      output = 'ain';
+                  }
+              } else if (b > 0) {
+                  output = lookup[b];
+              }
 
-      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;
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      this._loadMixin(BarnesHutMixin);
-    }
-    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(RepulsionMixin);
 
-      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;
+/***/ },
+/* 56 */
+/***/ function(module, exports, __webpack_require__) {
 
-      this._loadMixin(HierarchialRepulsionMixin);
-    }
-    else {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
-      this.barnesHutTree = undefined;
-
-      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;
-
-      this._loadMixin(RepulsionMixin);
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : danish (da)
+  // author : Ulrik Nielsen : https://github.com/mrbase
 
-  /**
-   * 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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      // we now start the force calculation
-      this._calculateForces();
-    }
-  };
+  }(function (moment) {
+      return moment.lang('da', {
+          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd [d.] D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[I dag kl.] LT',
+              nextDay : '[I morgen kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[I går kl.] LT',
+              lastWeek : '[sidste] dddd [kl] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "%s siden",
+              s : "få sekunder",
+              m : "et minut",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dage",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "et år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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
+/***/ },
+/* 57 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this._calculateGravitationalForces();
-    this._calculateNodeForces();
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : austrian german (de-at)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
+  // author : Martin Groller : https://github.com/MadMG
 
-    if (this.constants.physics.springConstant > 0) {
-      if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-        this._calculateSpringForcesWithSupport();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      else {
-        if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-          this._calculateHierarchicalSpringForces();
-        }
-        else {
-          this._calculateSpringForces();
-        }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
       }
-    }
-  };
-
-
-  /**
-   * 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.
-   *
-   * @private
-   */
-  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);
+      return moment.lang('de-at', {
+          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
+          },
+          relativeTime : {
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-        }
-      }
-
-      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
-   */
-  exports._calculateGravitationalForces = function () {
-    var dx, dy, distance, node, i;
-    var nodes = this.calculationNodes;
-    var gravity = this.constants.physics.centralGravity;
-    var gravityForce = 0;
+/***/ },
+/* 58 */
+/***/ function(module, exports, __webpack_require__) {
 
-    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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : german (de)
+  // author : lluchs : https://github.com/lluchs
+  // author: Menelion Elensúle: https://github.com/Oire
 
-        gravityForce = (distance == 0) ? 0 : (gravity / distance);
-        node.fx = dx * gravityForce;
-        node.fy = dy * gravityForce;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      else {
-        node.fx = 0;
-        node.fy = 0;
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eine Minute', 'einer Minute'],
+              'h': ['eine Stunde', 'einer Stunde'],
+              'd': ['ein Tag', 'einem Tag'],
+              'dd': [number + ' Tage', number + ' Tagen'],
+              'M': ['ein Monat', 'einem Monat'],
+              'MM': [number + ' Monate', number + ' Monaten'],
+              'y': ['ein Jahr', 'einem Jahr'],
+              'yy': [number + ' Jahre', number + ' Jahren']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
       }
-    }
-  };
 
+      return moment.lang('de', {
+          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
+          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
+          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT: "HH:mm [Uhr]",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Heute um] LT",
+              sameElse: "L",
+              nextDay: '[Morgen um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gestern um] LT',
+              lastWeek: '[letzten] dddd [um] LT'
+          },
+          relativeTime : {
+              future : "in %s",
+              past : "vor %s",
+              s : "ein paar Sekunden",
+              m : processRelativeTime,
+              mm : "%d Minuten",
+              h : processRelativeTime,
+              hh : "%d Stunden",
+              d : processRelativeTime,
+              dd : processRelativeTime,
+              M : processRelativeTime,
+              MM : processRelativeTime,
+              y : processRelativeTime,
+              yy : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
+/***/ },
+/* 59 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
-   *
-   * @private
-   */
-  exports._calculateSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : modern greek (el)
+  // author : Aggelos Karalias : https://github.com/mehiel
 
-    // 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.customLength ? edge.length : this.constants.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('el', {
+          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
+          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
+          months : function (momentToFormat, format) {
+              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
+                  return this._monthsGenitiveEl[momentToFormat.month()];
+              } else {
+                  return this._monthsNominativeEl[momentToFormat.month()];
+              }
+          },
+          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
+          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
+          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
+          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'μμ' : 'ΜΜ';
+              } else {
+                  return isLower ? 'πμ' : 'ΠΜ';
+              }
+          },
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendarEl : {
+              sameDay : '[Σήμερα {}] LT',
+              nextDay : '[Αύριο {}] LT',
+              nextWeek : 'dddd [{}] LT',
+              lastDay : '[Χθες {}] LT',
+              lastWeek : function() {
+                  switch (this.day()) {
+                      case 6:
+                          return '[το προηγούμενο] dddd [{}] LT';
+                      default:
+                          return '[την προηγούμενη] dddd [{}] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          calendar : function (key, mom) {
+              var output = this._calendarEl[key],
+                  hours = mom && mom.hours();
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+              if (typeof output === 'function') {
+                  output = output.apply(mom);
+              }
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
+              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
+          },
+          relativeTime : {
+              future : "σε %s",
+              past : "%s πριν",
+              s : "δευτερόλεπτα",
+              m : "ένα λεπτό",
+              mm : "%d λεπτά",
+              h : "μία ώρα",
+              hh : "%d ώρες",
+              d : "μία μέρα",
+              dd : "%d μέρες",
+              M : "ένας μήνας",
+              MM : "%d μήνες",
+              y : "ένας χρόνος",
+              yy : "%d χρόνια"
+          },
+          ordinal : function (number) {
+              return number + 'η';
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4st is the first week of the year.
+          }
+      });
+  }));
 
-            // 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;
+/***/ },
+/* 60 */
+/***/ function(module, exports, __webpack_require__) {
 
-            edge.from.fx += fx;
-            edge.from.fy += fy;
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
-          }
-        }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : australian english (en-au)
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('en-au', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : canadian english (en-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
 
-  /**
-   * 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('en-ca', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM, YYYY",
+              LLL : "D MMMM, YYYY LT",
+              LLLL : "dddd, D MMMM, YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          }
+      });
+  }));
+
+
+/***/ },
+/* 62 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : great britain english (en-gb)
+  // author : Chris Gedrim : https://github.com/chrisgedrim
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('en-gb', {
+          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          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"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 63 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : esperanto (eo)
+  // author : Colin Dean : https://github.com/colindean
+  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
+  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('eo', {
+          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
+          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
+          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D[-an de] MMMM, YYYY",
+              LLL : "D[-an de] MMMM, YYYY LT",
+              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'p.t.m.' : 'P.T.M.';
+              } else {
+                  return isLower ? 'a.t.m.' : 'A.T.M.';
+              }
+          },
+          calendar : {
+              sameDay : '[Hodiaŭ je] LT',
+              nextDay : '[Morgaŭ je] LT',
+              nextWeek : 'dddd [je] LT',
+              lastDay : '[Hieraŭ je] LT',
+              lastWeek : '[pasinta] dddd [je] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "je %s",
+              past : "antaŭ %s",
+              s : "sekundoj",
+              m : "minuto",
+              mm : "%d minutoj",
+              h : "horo",
+              hh : "%d horoj",
+              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
+              dd : "%d tagoj",
+              M : "monato",
+              MM : "%d monatoj",
+              y : "jaro",
+              yy : "%d jaroj"
+          },
+          ordinal : "%da",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : spanish (es)
+  // author : Julio Napurí : https://github.com/julionc
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
+          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_");
+
+      return moment.lang('es', {
+          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShort[m.month()];
+              } else {
+                  return monthsShortDot[m.month()];
+              }
+          },
+          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
+          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [del] YYYY",
+              LLL : "D [de] MMMM [del] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastDay : function () {
+                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "en %s",
+              past : "hace %s",
+              s : "unos segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "una hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un año",
+              yy : "%d años"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : estonian (et)
+  // author : Henry Kehlmann : https://github.com/madhenry
+  // improvements : Illimar Tambek : https://github.com/ragulka
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
+              'm' : ['ühe minuti', 'üks minut'],
+              'mm': [number + ' minuti', number + ' minutit'],
+              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
+              'hh': [number + ' tunni', number + ' tundi'],
+              'd' : ['ühe päeva', 'üks päev'],
+              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
+              'MM': [number + ' kuu', number + ' kuud'],
+              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
+              'yy': [number + ' aasta', number + ' aastat']
+          };
+          if (withoutSuffix) {
+              return format[key][2] ? format[key][2] : format[key][1];
+          }
+          return isFuture ? format[key][0] : format[key][1];
+      }
+
+      return moment.lang('et', {
+          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
+          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
+          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
+          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
+          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
+          longDateFormat : {
+              LT   : "H:mm",
+              L    : "DD.MM.YYYY",
+              LL   : "D. MMMM YYYY",
+              LLL  : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[Täna,] LT',
+              nextDay  : '[Homme,] LT',
+              nextWeek : '[Järgmine] dddd LT',
+              lastDay  : '[Eile,] LT',
+              lastWeek : '[Eelmine] dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s pärast",
+              past   : "%s tagasi",
+              s      : processRelativeTime,
+              m      : processRelativeTime,
+              mm     : processRelativeTime,
+              h      : processRelativeTime,
+              hh     : processRelativeTime,
+              d      : processRelativeTime,
+              dd     : '%d päeva',
+              M      : processRelativeTime,
+              MM     : processRelativeTime,
+              y      : processRelativeTime,
+              yy     : processRelativeTime
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 66 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : euskara (eu)
+  // author : Eneko Illarramendi : https://github.com/eillarra
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('eu', {
+          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
+          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
+          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
+          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
+          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY[ko] MMMM[ren] D[a]",
+              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
+              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
+              l : "YYYY-M-D",
+              ll : "YYYY[ko] MMM D[a]",
+              lll : "YYYY[ko] MMM D[a] LT",
+              llll : "ddd, YYYY[ko] MMM D[a] LT"
+          },
+          calendar : {
+              sameDay : '[gaur] LT[etan]',
+              nextDay : '[bihar] LT[etan]',
+              nextWeek : 'dddd LT[etan]',
+              lastDay : '[atzo] LT[etan]',
+              lastWeek : '[aurreko] dddd LT[etan]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s barru",
+              past : "duela %s",
+              s : "segundo batzuk",
+              m : "minutu bat",
+              mm : "%d minutu",
+              h : "ordu bat",
+              hh : "%d ordu",
+              d : "egun bat",
+              dd : "%d egun",
+              M : "hilabete bat",
+              MM : "%d hilabete",
+              y : "urte bat",
+              yy : "%d urte"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 67 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Persian Language
+  // author : Ebrahim Byagowi : https://github.com/ebraminio
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '۱',
+          '2': '۲',
+          '3': '۳',
+          '4': '۴',
+          '5': '۵',
+          '6': '۶',
+          '7': '۷',
+          '8': '۸',
+          '9': '۹',
+          '0': '۰'
+      }, numberMap = {
+          '۱': '1',
+          '۲': '2',
+          '۳': '3',
+          '۴': '4',
+          '۵': '5',
+          '۶': '6',
+          '۷': '7',
+          '۸': '8',
+          '۹': '9',
+          '۰': '0'
+      };
+
+      return moment.lang('fa', {
+          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
+          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
+          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
+          longDateFormat : {
+              LT : 'HH:mm',
+              L : 'DD/MM/YYYY',
+              LL : 'D MMMM YYYY',
+              LLL : 'D MMMM YYYY LT',
+              LLLL : 'dddd, D MMMM YYYY LT'
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "قبل از ظهر";
+              } else {
+                  return "بعد از ظهر";
+              }
+          },
+          calendar : {
+              sameDay : '[امروز ساعت] LT',
+              nextDay : '[فردا ساعت] LT',
+              nextWeek : 'dddd [ساعت] LT',
+              lastDay : '[دیروز ساعت] LT',
+              lastWeek : 'dddd [پیش] [ساعت] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : 'در %s',
+              past : '%s پیش',
+              s : 'چندین ثانیه',
+              m : 'یک دقیقه',
+              mm : '%d دقیقه',
+              h : 'یک ساعت',
+              hh : '%d ساعت',
+              d : 'یک روز',
+              dd : '%d روز',
+              M : 'یک ماه',
+              MM : '%d ماه',
+              y : 'یک سال',
+              yy : '%d سال'
+          },
+          preparse: function (string) {
+              return string.replace(/[۰-۹]/g, function (match) {
+                  return numberMap[match];
+              }).replace(/،/g, ',');
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              }).replace(/,/g, '،');
+          },
+          ordinal : '%dم',
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12 // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 68 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : finnish (fi)
+  // author : Tarmo Aidantausta : https://github.com/bleadof
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
+          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
+                            numbersPast[7], numbersPast[8], numbersPast[9]];
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = "";
+          switch (key) {
+          case 's':
+              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
+          case 'm':
+              return isFuture ? 'minuutin' : 'minuutti';
+          case 'mm':
+              result = isFuture ? 'minuutin' : 'minuuttia';
+              break;
+          case 'h':
+              return isFuture ? 'tunnin' : 'tunti';
+          case 'hh':
+              result = isFuture ? 'tunnin' : 'tuntia';
+              break;
+          case 'd':
+              return isFuture ? 'päivän' : 'päivä';
+          case 'dd':
+              result = isFuture ? 'päivän' : 'päivää';
+              break;
+          case 'M':
+              return isFuture ? 'kuukauden' : 'kuukausi';
+          case 'MM':
+              result = isFuture ? 'kuukauden' : 'kuukautta';
+              break;
+          case 'y':
+              return isFuture ? 'vuoden' : 'vuosi';
+          case 'yy':
+              result = isFuture ? 'vuoden' : 'vuotta';
+              break;
+          }
+          result = verbalNumber(number, isFuture) + " " + result;
+          return result;
+      }
+
+      function verbalNumber(number, isFuture) {
+          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
+      }
+
+      return moment.lang('fi', {
+          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
+          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
+          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
+          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
+          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD.MM.YYYY",
+              LL : "Do MMMM[ta] YYYY",
+              LLL : "Do MMMM[ta] YYYY, [klo] LT",
+              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
+              l : "D.M.YYYY",
+              ll : "Do MMM YYYY",
+              lll : "Do MMM YYYY, [klo] LT",
+              llll : "ddd, Do MMM YYYY, [klo] LT"
+          },
+          calendar : {
+              sameDay : '[tänään] [klo] LT',
+              nextDay : '[huomenna] [klo] LT',
+              nextWeek : 'dddd [klo] LT',
+              lastDay : '[eilen] [klo] LT',
+              lastWeek : '[viime] dddd[na] [klo] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s päästä",
+              past : "%s sitten",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : "%d.",
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 69 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : faroese (fo)
+  // author : Ragnar Johannesen : https://github.com/ragnar123
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fo', {
+          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
+          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
+          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D. MMMM, YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Í dag kl.] LT',
+              nextDay : '[Í morgin kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[Í gjár kl.] LT',
+              lastWeek : '[síðstu] dddd [kl] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "um %s",
+              past : "%s síðani",
+              s : "fá sekund",
+              m : "ein minutt",
+              mm : "%d minuttir",
+              h : "ein tími",
+              hh : "%d tímar",
+              d : "ein dagur",
+              dd : "%d dagar",
+              M : "ein mánaði",
+              MM : "%d mánaðir",
+              y : "eitt ár",
+              yy : "%d ár"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 70 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : canadian french (fr-ca)
+  // author : Jonathan Abourbih : https://github.com/jonbca
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fr-ca', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
+          },
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
+          }
+      });
+  }));
+
+
+/***/ },
+/* 71 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : french (fr)
+  // author : John Fischer : https://github.com/jfroffice
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('fr', {
+          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
+          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
+          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
+          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
+          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Aujourd'hui à] LT",
+              nextDay: '[Demain à] LT',
+              nextWeek: 'dddd [à] LT',
+              lastDay: '[Hier à] LT',
+              lastWeek: 'dddd [dernier à] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dans %s",
+              past : "il y a %s",
+              s : "quelques secondes",
+              m : "une minute",
+              mm : "%d minutes",
+              h : "une heure",
+              hh : "%d heures",
+              d : "un jour",
+              dd : "%d jours",
+              M : "un mois",
+              MM : "%d mois",
+              y : "un an",
+              yy : "%d ans"
+          },
+          ordinal : function (number) {
+              return number + (number === 1 ? 'er' : '');
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    // 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;
 
-              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
+/***/ },
+/* 72 */
+/***/ function(module, exports, __webpack_require__) {
 
-              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : galician (gl)
+  // author : Juan G. Hurtado : https://github.com/juanghurtado
 
-              // 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);
-            }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('gl', {
+          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
+          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
+          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
+          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
+          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : function () {
+                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextDay : function () {
+                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
+              },
+              nextWeek : function () {
+                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              lastDay : function () {
+                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
+              },
+              lastWeek : function () {
+                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : function (str) {
+                  if (str === "uns segundos") {
+                      return "nuns segundos";
+                  }
+                  return "en " + str;
+              },
+              past : "hai %s",
+              s : "uns segundos",
+              m : "un minuto",
+              mm : "%d minutos",
+              h : "unha hora",
+              hh : "%d horas",
+              d : "un día",
+              dd : "%d días",
+              M : "un mes",
+              MM : "%d meses",
+              y : "un ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
+      });
+  }));
+
+
+/***/ },
+/* 73 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Hebrew (he)
+  // author : Tomer Cohen : https://github.com/tomer
+  // author : Moshe Simantov : https://github.com/DevelopmentIL
+  // author : Tal Ater : https://github.com/TalAter
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-  };
+  }(function (moment) {
+      return moment.lang('he', {
+          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
+          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
+          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
+          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
+          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [ב]MMMM YYYY",
+              LLL : "D [ב]MMMM YYYY LT",
+              LLLL : "dddd, D [ב]MMMM YYYY LT",
+              l : "D/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[היום ב־]LT',
+              nextDay : '[מחר ב־]LT',
+              nextWeek : 'dddd [בשעה] LT',
+              lastDay : '[אתמול ב־]LT',
+              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "בעוד %s",
+              past : "לפני %s",
+              s : "מספר שניות",
+              m : "דקה",
+              mm : "%d דקות",
+              h : "שעה",
+              hh : function (number) {
+                  if (number === 2) {
+                      return "שעתיים";
+                  }
+                  return number + " שעות";
+              },
+              d : "יום",
+              dd : function (number) {
+                  if (number === 2) {
+                      return "יומיים";
+                  }
+                  return number + " ימים";
+              },
+              M : "חודש",
+              MM : function (number) {
+                  if (number === 2) {
+                      return "חודשיים";
+                  }
+                  return number + " חודשים";
+              },
+              y : "שנה",
+              yy : function (number) {
+                  if (number === 2) {
+                      return "שנתיים";
+                  }
+                  return number + " שנים";
+              }
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 74 */
+/***/ function(module, exports, __webpack_require__) {
 
-    dx = (node1.x - node2.x);
-    dy = (node1.y - node2.y);
-    distance = Math.sqrt(dx * dx + dy * dy);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hindi (hi)
+  // author : Mayank Singhal : https://github.com/mayanksinghal
 
-    if (distance == 0) {
-      distance = 0.01;
-    }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+      return moment.lang('hi', {
+          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
+          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[कल] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[कल] LT',
+              lastWeek : '[पिछले] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s में",
+              past : "%s पहले",
+              s : "कुछ ही क्षण",
+              m : "एक मिनट",
+              mm : "%d मिनट",
+              h : "एक घंटा",
+              hh : "%d घंटे",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महीने",
+              MM : "%d महीने",
+              y : "एक वर्ष",
+              yy : "%d वर्ष"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
+          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "रात";
+              } else if (hour < 10) {
+                  return "सुबह";
+              } else if (hour < 17) {
+                  return "दोपहर";
+              } else if (hour < 20) {
+                  return "शाम";
+              } else {
+                  return "रात";
+              }
+          },
+          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.
+          }
+      });
+  }));
 
-    fx = dx * springForce;
-    fy = dy * springForce;
 
-    node1.fx += fx;
-    node1.fy += fy;
-    node2.fx -= fx;
-    node2.fy -= fy;
-  };
+/***/ },
+/* 75 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hrvatski (hr)
+  // author : Bojan Marković : https://github.com/bmarkovic
 
-  /**
-   * 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);
+  // based on (sl) translation by Robert Sedovšek
 
-      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 (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minuta';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'jedan sat' : 'jednog sata';
+          case 'hh':
+              if (number === 1) {
+                  result += 'sat';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'sata';
+              } else {
+                  result += 'sati';
+              }
+              return result;
+          case 'dd':
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dana';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mjesec';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'mjeseca';
+              } else {
+                  result += 'mjeseci';
+              }
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'godina';
+              } else if (number === 2 || number === 3 || number === 4) {
+                  result += 'godine';
+              } else {
+                  result += 'godina';
+              }
+              return result;
+          }
+      }
+
+      return moment.lang('hr', {
+          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
+          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
+          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
+          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
+          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danas u] LT',
+              nextDay  : '[sutra u] LT',
+
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedjelju] [u] LT';
+                  case 3:
+                      return '[u] [srijedu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[jučer u] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                      return '[prošlu] dddd [u] LT';
+                  case 6:
+                      return '[prošle] [subote] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prošli] dddd [u] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "prije %s",
+              s      : "par sekundi",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "dan",
+              dd     : translate,
+              M      : "mjesec",
+              MM     : translate,
+              y      : "godinu",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      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");
 
-      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");
+/***/ },
+/* 76 */
+/***/ function(module, exports, __webpack_require__) {
 
-      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");
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : hungarian (hu)
+  // author : Adam Brunner : https://github.com/adambrunner
 
-      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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
 
-      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
-      var graph_generateOptions = document.getElementById("graph_generateOptions");
+      function translate(number, withoutSuffix, key, isFuture) {
+          var num = number,
+              suffix;
 
-      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";
+          switch (key) {
+          case 's':
+              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
+          case 'm':
+              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'mm':
+              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
+          case 'h':
+              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'hh':
+              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
+          case 'd':
+              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'dd':
+              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
+          case 'M':
+              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'MM':
+              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
+          case 'y':
+              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
+          case 'yy':
+              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
+          }
+
+          return '';
       }
-      else {
-        graph_toggleSmooth.style.background = "#FF8532";
+
+      function week(isFuture) {
+          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
       }
 
+      return moment.lang('hu', {
+          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
+          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
+          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
+          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
+          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "YYYY.MM.DD.",
+              LL : "YYYY. MMMM D.",
+              LLL : "YYYY. MMMM D., LT",
+              LLLL : "YYYY. MMMM D., dddd LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 12) {
+                  return isLower === true ? 'de' : 'DE';
+              } else {
+                  return isLower === true ? 'du' : 'DU';
+              }
+          },
+          calendar : {
+              sameDay : '[ma] LT[-kor]',
+              nextDay : '[holnap] LT[-kor]',
+              nextWeek : function () {
+                  return week.call(this, true);
+              },
+              lastDay : '[tegnap] LT[-kor]',
+              lastWeek : function () {
+                  return week.call(this, false);
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s múlva",
+              past : "%s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-      switchConfigurations.apply(this);
 
-      radioButton1.onchange = switchConfigurations.bind(this);
-      radioButton2.onchange = switchConfigurations.bind(this);
-      radioButton3.onchange = switchConfigurations.bind(this);
-    }
-  };
+/***/ },
+/* 77 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * 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;
-    }
-  };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Armenian (hy-am)
+  // author : Armendarabyan : https://github.com/armendarabyan
 
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-  /**
-   * 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";}
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
+              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
+          },
 
-    this._configureSmoothCurves(false);
-  }
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-  /**
-   * 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;
+          return months[nounCase][m.month()];
       }
-    }
-    if (this.constants.hierarchicalLayout.enabled == true) {
-      this._setupHierarchicalLayout();
-    }
-    else {
-      this.repositionNodes();
-    }
-    this.moving = true;
-    this.start();
-  }
 
-  /**
-   *  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;
+      function monthsShortCaseReplace(m, format) {
+          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
+
+          return monthsShort[m.month()];
       }
-      if (options != "No options are required, default values used.") {
-        options += '};'
+
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
+
+          return weekdays[m.day()];
       }
-    }
-    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 += ", "
+
+      return moment.lang('hy-am', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY թ.",
+              LLL : "D MMMM YYYY թ., LT",
+              LLLL : "dddd, D MMMM YYYY թ., LT"
+          },
+          calendar : {
+              sameDay: '[այսօր] LT',
+              nextDay: '[վաղը] LT',
+              lastDay: '[երեկ] LT',
+              nextWeek: function () {
+                  return 'dddd [օրը ժամը] LT';
+              },
+              lastWeek: function () {
+                  return '[անցած] dddd [օրը ժամը] LT';
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s հետո",
+              past : "%s առաջ",
+              s : "մի քանի վայրկյան",
+              m : "րոպե",
+              mm : "%d րոպե",
+              h : "ժամ",
+              hh : "%d ժամ",
+              d : "օր",
+              dd : "%d օր",
+              M : "ամիս",
+              MM : "%d ամիս",
+              y : "տարի",
+              yy : "%d տարի"
+          },
+
+          meridiem : function (hour) {
+              if (hour < 4) {
+                  return "գիշերվա";
+              } else if (hour < 12) {
+                  return "առավոտվա";
+              } else if (hour < 17) {
+                  return "ցերեկվա";
+              } else {
+                  return "երեկոյան";
+              }
+          },
+
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'DDD':
+              case 'w':
+              case 'W':
+              case 'DDDo':
+                  if (number === 1) {
+                      return number + '-ին';
+                  }
+                  return number + '-րդ';
+              default:
+                  return number;
+              }
+          },
+
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
-        options += '}}'
-      }
-      if (optionsSpecific.length == 0) {options += "}"}
-      if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
-        options += ", smoothCurves: " + this.constants.smoothCurves;
+      });
+  }));
+
+
+/***/ },
+/* 78 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bahasa Indonesia (id)
+  // author : Mohammad Satrio Utomo : https://github.com/tyok
+  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      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 += ", ";
+  }(function (moment) {
+      return moment.lang('id', {
+          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
+          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
+          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
+          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
+          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'siang';
+              } else if (hours < 19) {
+                  return 'sore';
+              } else {
+                  return 'malam';
+              }
+          },
+          calendar : {
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Besok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kemarin pukul] LT',
+              lastWeek : 'dddd [lalu pukul] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "dalam %s",
+              past : "%s yang lalu",
+              s : "beberapa detik",
+              m : "semenit",
+              mm : "%d menit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-        }
-        options += '}},';
+      });
+  }));
+
+
+/***/ },
+/* 79 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : icelandic (is)
+  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      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 += ", "
+  }(function (moment) {
+      function plural(n) {
+          if (n % 100 === 11) {
+              return true;
+          } else if (n % 10 === 1) {
+              return false;
           }
-        }
-        options += '}'
+          return true;
       }
-      else {
-        options += "enabled:true}";
+
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':
+              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
+          case 'm':
+              return withoutSuffix ? 'mínúta' : 'mínútu';
+          case 'mm':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
+              } else if (withoutSuffix) {
+                  return result + 'mínúta';
+              }
+              return result + 'mínútu';
+          case 'hh':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
+              }
+              return result + 'klukkustund';
+          case 'd':
+              if (withoutSuffix) {
+                  return 'dagur';
+              }
+              return isFuture ? 'dag' : 'degi';
+          case 'dd':
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'dagar';
+                  }
+                  return result + (isFuture ? 'daga' : 'dögum');
+              } else if (withoutSuffix) {
+                  return result + 'dagur';
+              }
+              return result + (isFuture ? 'dag' : 'degi');
+          case 'M':
+              if (withoutSuffix) {
+                  return 'mánuður';
+              }
+              return isFuture ? 'mánuð' : 'mánuði';
+          case 'MM':
+              if (plural(number)) {
+                  if (withoutSuffix) {
+                      return result + 'mánuðir';
+                  }
+                  return result + (isFuture ? 'mánuði' : 'mánuðum');
+              } else if (withoutSuffix) {
+                  return result + 'mánuður';
+              }
+              return result + (isFuture ? 'mánuð' : 'mánuði');
+          case 'y':
+              return withoutSuffix || isFuture ? 'ár' : 'ári';
+          case 'yy':
+              if (plural(number)) {
+                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
+              }
+              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
+          }
       }
-      options += '};'
-    }
 
+      return moment.lang('is', {
+          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
+          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
+          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
+          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD/MM/YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
+          },
+          calendar : {
+              sameDay : '[í dag kl.] LT',
+              nextDay : '[á morgun kl.] LT',
+              nextWeek : 'dddd [kl.] LT',
+              lastDay : '[í gær kl.] LT',
+              lastWeek : '[síðasta] dddd [kl.] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "eftir %s",
+              past : "fyrir %s síðan",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : "klukkustund",
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-    this.optionsDiv.innerHTML = options;
-  }
 
-  /**
-   * 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();
+/***/ },
+/* 80 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : italian (it)
+  // author : Lorenzo : https://github.com/aliem
+  // author: Mattia Larentis: https://github.com/nostalgiaz
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-    }
-    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();
-  }
+  }(function (moment) {
+      return moment.lang('it', {
+          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
+          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
+          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
+          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
+          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Oggi alle] LT',
+              nextDay: '[Domani alle] LT',
+              nextWeek: 'dddd [alle] LT',
+              lastDay: '[Ieri alle] LT',
+              lastWeek: '[lo scorso] dddd [alle] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : function (s) {
+                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
+              },
+              past : "%s fa",
+              s : "alcuni secondi",
+              m : "un minuto",
+              mm : "%d minuti",
+              h : "un'ora",
+              hh : "%d ore",
+              d : "un giorno",
+              dd : "%d giorni",
+              M : "un mese",
+              MM : "%d mesi",
+              y : "un anno",
+              yy : "%d anni"
+          },
+          ordinal: '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
 
-  /**
-   * 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;
+/***/ },
+/* 81 */
+/***/ function(module, exports, __webpack_require__) {
 
-    if (map instanceof Array) {
-      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));
-    }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : japanese (ja)
+  // author : LI Long : https://github.com/baryon
 
-    if (constantsVariableName == "hierarchicalLayout_direction" ||
-      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
-      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
-      this._setupHierarchicalLayout();
-    }
-    this.moving = true;
-    this.start();
-  }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ja', {
+          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
+          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
+          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
+          longDateFormat : {
+              LT : "Ah時m分",
+              L : "YYYY/MM/DD",
+              LL : "YYYY年M月D日",
+              LLL : "YYYY年M月D日LT",
+              LLLL : "YYYY年M月D日LT dddd"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "午前";
+              } else {
+                  return "午後";
+              }
+          },
+          calendar : {
+              sameDay : '[今日] LT',
+              nextDay : '[明日] LT',
+              nextWeek : '[来週]dddd LT',
+              lastDay : '[昨日] LT',
+              lastWeek : '[前週]dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s後",
+              past : "%s前",
+              s : "数秒",
+              m : "1分",
+              mm : "%d分",
+              h : "1時間",
+              hh : "%d時間",
+              d : "1日",
+              dd : "%d日",
+              M : "1ヶ月",
+              MM : "%dヶ月",
+              y : "1年",
+              yy : "%d年"
+          }
+      });
+  }));
 
 
 /***/ },
-/* 51 */
+/* 82 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
-  //! version : 2.7.0
-  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
-  //! license : MIT
-  //! momentjs.com
-
-  (function (undefined) {
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Georgian (ka)
+  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
 
-      /************************************
-          Constants
-      ************************************/
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-      var moment,
-          VERSION = "2.7.0",
-          // the global-scope this is NOT the global object in Node.js
-          globalScope = typeof global !== 'undefined' ? global : this,
-          oldGlobalMoment,
-          round = Math.round,
-          i,
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
+              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
+          },
 
-          YEAR = 0,
-          MONTH = 1,
-          DATE = 2,
-          HOUR = 3,
-          MINUTE = 4,
-          SECOND = 5,
-          MILLISECOND = 6,
+          nounCase = (/D[oD] *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-          // internal storage for language config files
-          languages = {},
+          return months[nounCase][m.month()];
+      }
 
-          // moment internal properties
-          momentProperties = {
-              _isAMomentObject: null,
-              _i : null,
-              _f : null,
-              _l : null,
-              _strict : null,
-              _tzm : null,
-              _isUTC : null,
-              _offset : null,  // optional. Combine with _isUTC
-              _pf : null,
-              _lang : null  // optional
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
+              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
           },
 
-          // check for nodeJS
-          hasModule = (typeof module !== 'undefined' && module.exports),
+          nounCase = (/(წინა|შემდეგ)/).test(format) ?
+              'accusative' :
+              'nominative';
 
-          // ASP.NET json date format regex
-          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
-          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
+          return weekdays[nounCase][m.day()];
+      }
 
-          // 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)$/,
+      return moment.lang('ka', {
+          months : monthsCaseReplace,
+          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
+          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
+          longDateFormat : {
+              LT : "h:mm A",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[დღეს] LT[-ზე]',
+              nextDay : '[ხვალ] LT[-ზე]',
+              lastDay : '[გუშინ] LT[-ზე]',
+              nextWeek : '[შემდეგ] dddd LT[-ზე]',
+              lastWeek : '[წინა] dddd LT-ზე',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : function (s) {
+                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
+                      s.replace(/ი$/, "ში") :
+                      s + "ში";
+              },
+              past : function (s) {
+                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
+                      return s.replace(/(ი|ე)$/, "ის წინ");
+                  }
+                  if ((/წელი/).test(s)) {
+                      return s.replace(/წელი$/, "წლის წინ");
+                  }
+              },
+              s : "რამდენიმე წამი",
+              m : "წუთი",
+              mm : "%d წუთი",
+              h : "საათი",
+              hh : "%d საათი",
+              d : "დღე",
+              dd : "%d დღე",
+              M : "თვე",
+              MM : "%d თვე",
+              y : "წელი",
+              yy : "%d წელი"
+          },
+          ordinal : function (number) {
+              if (number === 0) {
+                  return number;
+              }
 
-          // 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|zz?|ZZ?|.)/g,
-          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
+              if (number === 1) {
+                  return number + "-ლი";
+              }
 
-          // 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)
-          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
-          parseTokenOrdinal = /\d{1,2}/,
+              if ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
+                  return "მე-" + number;
+              }
 
-          //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
+              return number + "-ე";
+          },
+          week : {
+              dow : 1,
+              doy : 7
+          }
+      });
+  }));
 
-          // 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)?)?$/,
 
-          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
+/***/ },
+/* 83 */
+/***/ function(module, exports, __webpack_require__) {
 
-          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}/]
-          ],
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : khmer (km)
+  // author : Kruy Vanna : https://github.com/kruyvanna
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('km', {
+          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
+          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
+          longDateFormat: {
+              LT: "HH:mm",
+              L: "DD/MM/YYYY",
+              LL: "D MMMM YYYY",
+              LLL: "D MMMM YYYY LT",
+              LLLL: "dddd, D MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
+              nextDay: '[ស្អែក ម៉ោង] LT',
+              nextWeek: 'dddd [ម៉ោង] LT',
+              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
+              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
+              sameElse: 'L'
+          },
+          relativeTime: {
+              future: "%sទៀត",
+              past: "%sមុន",
+              s: "ប៉ុន្មានវិនាទី",
+              m: "មួយនាទី",
+              mm: "%d នាទី",
+              h: "មួយម៉ោង",
+              hh: "%d ម៉ោង",
+              d: "មួយថ្ងៃ",
+              dd: "%d ថ្ងៃ",
+              M: "មួយខែ",
+              MM: "%d ខែ",
+              y: "មួយឆ្នាំ",
+              yy: "%d ឆ្នាំ"
+          },
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4 // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-          // 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/]
-          ],
 
-          // timezone chunker "+10:00" > ["10", "00"] or "-1530" > ["-15", "30"]
-          parseTimezoneChunker = /([\+\-]|\d\d)/gi,
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // 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
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : korean (ko)
+  //
+  // authors 
+  //
+  // - Kyungwook, Park : https://github.com/kyungw00k
+  // - Jeeeyul Lee <jeeeyul@gmail.com>
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('ko', {
+          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
+          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
+          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
+          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
+          longDateFormat : {
+              LT : "A h시 mm분",
+              L : "YYYY.MM.DD",
+              LL : "YYYY년 MMMM D일",
+              LLL : "YYYY년 MMMM D일 LT",
+              LLLL : "YYYY년 MMMM D일 dddd LT"
           },
-
-          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'
+          meridiem : function (hour, minute, isUpper) {
+              return hour < 12 ? '오전' : '오후';
           },
-
-          camelFunctions = {
-              dayofyear : 'dayOfYear',
-              isoweekday : 'isoWeekday',
-              isoweek : 'isoWeek',
-              weekyear : 'weekYear',
-              isoweekyear : 'isoWeekYear'
+          calendar : {
+              sameDay : '오늘 LT',
+              nextDay : '내일 LT',
+              nextWeek : 'dddd LT',
+              lastDay : '어제 LT',
+              lastWeek : '지난주 dddd LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s 후",
+              past : "%s 전",
+              s : "몇초",
+              ss : "%d초",
+              m : "일분",
+              mm : "%d분",
+              h : "한시간",
+              hh : "%d시간",
+              d : "하루",
+              dd : "%d일",
+              M : "한달",
+              MM : "%d달",
+              y : "일년",
+              yy : "%d년"
           },
+          ordinal : '%d일',
+          meridiemParse : /(오전|오후)/,
+          isPM : function (token) {
+              return token === "오후";
+          }
+      });
+  }));
 
-          // format function strings
-          formatFunctions = {},
 
-          // default relative time thresholds
-          relativeTimeThresholds = {
-            s: 45,   //seconds to minutes
-            m: 45,   //minutes to hours
-            h: 22,   //hours to days
-            dd: 25,  //days to month (month == 1)
-            dm: 45,  //days to months (months > 1)
-            dy: 345  //days to year
-          },
+/***/ },
+/* 85 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // tokens to ordinalize and pad
-          ordinalizeTokens = 'DDD w W M D d'.split(' '),
-          paddedTokens = 'M D H h m s w W'.split(' '),
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Luxembourgish (lb)
+  // author : mweimerskirch : https://github.com/mweimerskirch
 
-          formatTokenFunctions = {
-              M    : function () {
-                  return this.month() + 1;
-              },
-              MMM  : function (format) {
-                  return this.lang().monthsShort(this, format);
-              },
-              MMMM : function (format) {
-                  return this.lang().months(this, format);
-              },
-              D    : function () {
-                  return this.date();
-              },
-              DDD  : function () {
-                  return this.dayOfYear();
-              },
-              d    : function () {
-                  return this.day();
-              },
-              dd   : function (format) {
-                  return this.lang().weekdaysMin(this, format);
-              },
-              ddd  : function (format) {
-                  return this.lang().weekdaysShort(this, format);
-              },
-              dddd : function (format) {
-                  return this.lang().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.lang().meridiem(this.hours(), this.minutes(), true);
-              },
-              A    : function () {
-                  return this.lang().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.zone(),
-                      b = "+";
-                  if (a < 0) {
-                      a = -a;
-                      b = "-";
-                  }
-                  return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
-              },
-              ZZ   : function () {
-                  var a = -this.zone(),
-                      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.unix();
-              },
-              Q : function () {
-                  return this.quarter();
-              }
-          },
+  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
+  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
+  // and "eifelerRegelAppliesToNumber" methods are meant for
 
-          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function processRelativeTime(number, withoutSuffix, key, isFuture) {
+          var format = {
+              'm': ['eng Minutt', 'enger Minutt'],
+              'h': ['eng Stonn', 'enger Stonn'],
+              'd': ['een Dag', 'engem Dag'],
+              'dd': [number + ' Deeg', number + ' Deeg'],
+              'M': ['ee Mount', 'engem Mount'],
+              'MM': [number + ' Méint', number + ' Méint'],
+              'y': ['ee Joer', 'engem Joer'],
+              'yy': [number + ' Joer', number + ' Joer']
+          };
+          return withoutSuffix ? format[key][0] : format[key][1];
+      }
 
-      // 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 processFutureTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "a " + string;
           }
+          return "an " + string;
       }
 
-      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
-          };
+      function processPastTime(string) {
+          var number = string.substr(0, string.indexOf(' '));
+          if (eifelerRegelAppliesToNumber(number)) {
+              return "viru " + string;
+          }
+          return "virun " + string;
       }
 
-      function deprecate(msg, fn) {
-          var firstTime = true;
-          function printMsg() {
-              if (moment.suppressDeprecationWarnings === false &&
-                      typeof console !== 'undefined' && console.warn) {
-                  console.warn("Deprecation warning: " + msg);
-              }
+      function processLastWeek(string1) {
+          var weekday = this.format('d');
+          if (eifelerRegelAppliesToWeekday(weekday)) {
+              return '[Leschte] dddd [um] LT';
           }
-          return extend(function () {
-              if (firstTime) {
-                  printMsg();
-                  firstTime = false;
+          return '[Leschten] dddd [um] LT';
+      }
+
+      /**
+       * Returns true if the word before the given week day loses the "-n" ending.
+       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
+       *
+       * @param weekday {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToWeekday(weekday) {
+          weekday = parseInt(weekday, 10);
+          switch (weekday) {
+          case 0: // Sonndeg
+          case 1: // Méindeg
+          case 3: // Mëttwoch
+          case 5: // Freideg
+          case 6: // Samschdeg
+              return true;
+          default: // 2 Dënschdeg, 4 Donneschdeg
+              return false;
+          }
+      }
+
+      /**
+       * Returns true if the word before the given number loses the "-n" ending.
+       * e.g. "an 10 Deeg" but "a 5 Deeg"
+       *
+       * @param number {integer}
+       * @returns {boolean}
+       */
+      function eifelerRegelAppliesToNumber(number) {
+          number = parseInt(number, 10);
+          if (isNaN(number)) {
+              return false;
+          }
+          if (number < 0) {
+              // Negative Number --> always true
+              return true;
+          } else if (number < 10) {
+              // Only 1 digit
+              if (4 <= number && number <= 7) {
+                  return true;
               }
-              return fn.apply(this, arguments);
-          }, fn);
+              return false;
+          } else if (number < 100) {
+              // 2 digits
+              var lastDigit = number % 10, firstDigit = number / 10;
+              if (lastDigit === 0) {
+                  return eifelerRegelAppliesToNumber(firstDigit);
+              }
+              return eifelerRegelAppliesToNumber(lastDigit);
+          } else if (number < 10000) {
+              // 3 or 4 digits --> recursively check first digit
+              while (number >= 10) {
+                  number = number / 10;
+              }
+              return eifelerRegelAppliesToNumber(number);
+          } else {
+              // Anything larger than 4 digits: recursively check first n-3 digits
+              number = number / 1000;
+              return eifelerRegelAppliesToNumber(number);
+          }
       }
 
-      function padToken(func, count) {
-          return function (a) {
-              return leftZeroFill(func.call(this, a), count);
-          };
+      return moment.lang('lb', {
+          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
+          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
+          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
+          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
+          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
+          longDateFormat: {
+              LT: "H:mm [Auer]",
+              L: "DD.MM.YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: "[Haut um] LT",
+              sameElse: "L",
+              nextDay: '[Muer um] LT',
+              nextWeek: 'dddd [um] LT',
+              lastDay: '[Gëschter um] LT',
+              lastWeek: processLastWeek
+          },
+          relativeTime: {
+              future: processFutureTime,
+              past: processPastTime,
+              s: "e puer Sekonnen",
+              m: processRelativeTime,
+              mm: "%d Minutten",
+              h: processRelativeTime,
+              hh: "%d Stonnen",
+              d: processRelativeTime,
+              dd: processRelativeTime,
+              M: processRelativeTime,
+              MM: processRelativeTime,
+              y: processRelativeTime,
+              yy: processRelativeTime
+          },
+          ordinal: '%d.',
+          week: {
+              dow: 1, // Monday is the first day of the week.
+              doy: 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
+
+
+/***/ },
+/* 86 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Lithuanian (lt)
+  // author : Mindaugas Mozūras : https://github.com/mmozuras
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-      function ordinalizeToken(func, period) {
-          return function (a) {
-              return this.lang().ordinal(func.call(this, a), period);
-          };
+  }(function (moment) {
+      var units = {
+          "m" : "minutė_minutės_minutę",
+          "mm": "minutės_minučių_minutes",
+          "h" : "valanda_valandos_valandą",
+          "hh": "valandos_valandų_valandas",
+          "d" : "diena_dienos_dieną",
+          "dd": "dienos_dienų_dienas",
+          "M" : "mėnuo_mėnesio_mėnesį",
+          "MM": "mėnesiai_mėnesių_mėnesius",
+          "y" : "metai_metų_metus",
+          "yy": "metai_metų_metus"
+      },
+      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
+
+      function translateSeconds(number, withoutSuffix, key, isFuture) {
+          if (withoutSuffix) {
+              return "kelios sekundės";
+          } else {
+              return isFuture ? "kelių sekundžių" : "kelias sekundes";
+          }
       }
 
-      while (ordinalizeTokens.length) {
-          i = ordinalizeTokens.pop();
-          formatTokenFunctions[i + 'o'] = ordinalizeToken(formatTokenFunctions[i], i);
+      function translateSingular(number, withoutSuffix, key, isFuture) {
+          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
       }
-      while (paddedTokens.length) {
-          i = paddedTokens.pop();
-          formatTokenFunctions[i + i] = padToken(formatTokenFunctions[i], 2);
+
+      function special(number) {
+          return number % 10 === 0 || (number > 10 && number < 20);
       }
-      formatTokenFunctions.DDDD = padToken(formatTokenFunctions.DDD, 3);
 
+      function forms(key) {
+          return units[key].split("_");
+      }
 
-      /************************************
-          Constructors
-      ************************************/
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          if (number === 1) {
+              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
+          } else if (withoutSuffix) {
+              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
+          } else {
+              if (isFuture) {
+                  return result + forms(key)[1];
+              } else {
+                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
+              }
+          }
+      }
 
-      function Language() {
+      function relativeWeekDay(moment, format) {
+          var nominative = format.indexOf('dddd HH:mm') === -1,
+              weekDay = weekDays[moment.day()];
 
+          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
       }
 
-      // Moment prototype object
-      function Moment(config) {
-          checkOverflow(config);
-          extend(this, config);
-      }
+      return moment.lang("lt", {
+          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
+          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
+          weekdays : relativeWeekDay,
+          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
+          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY [m.] MMMM D [d.]",
+              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
+              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
+              l : "YYYY-MM-DD",
+              ll : "YYYY [m.] MMMM D [d.]",
+              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
+              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
+          },
+          calendar : {
+              sameDay : "[Šiandien] LT",
+              nextDay : "[Rytoj] LT",
+              nextWeek : "dddd LT",
+              lastDay : "[Vakar] LT",
+              lastWeek : "[Praėjusį] dddd LT",
+              sameElse : "L"
+          },
+          relativeTime : {
+              future : "po %s",
+              past : "prieš %s",
+              s : translateSeconds,
+              m : translateSingular,
+              mm : translate,
+              h : translateSingular,
+              hh : translate,
+              d : translateSingular,
+              dd : translate,
+              M : translateSingular,
+              MM : translate,
+              y : translateSingular,
+              yy : translate
+          },
+          ordinal : function (number) {
+              return number + '-oji';
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      // 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;
+/***/ },
+/* 87 */
+/***/ function(module, exports, __webpack_require__) {
 
-          this._data = {};
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : latvian (lv)
+  // author : Kristaps Karlsons : https://github.com/skakri
 
-          this._bubble();
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var units = {
+          'mm': 'minūti_minūtes_minūte_minūtes',
+          'hh': 'stundu_stundas_stunda_stundas',
+          'dd': 'dienu_dienas_diena_dienas',
+          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
+          'yy': 'gadu_gadus_gads_gadi'
+      };
 
-      /************************************
-          Helpers
-      ************************************/
+      function format(word, number, withoutSuffix) {
+          var forms = word.split('_');
+          if (withoutSuffix) {
+              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
+          } else {
+              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
+          }
+      }
 
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          return number + ' ' + format(units[key], number, withoutSuffix);
+      }
 
-      function extend(a, b) {
-          for (var i in b) {
-              if (b.hasOwnProperty(i)) {
-                  a[i] = b[i];
-              }
+      return moment.lang('lv', {
+          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
+          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
+          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "YYYY. [gada] D. MMMM",
+              LLL : "YYYY. [gada] D. MMMM, LT",
+              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
+          },
+          calendar : {
+              sameDay : '[Šodien pulksten] LT',
+              nextDay : '[Rīt pulksten] LT',
+              nextWeek : 'dddd [pulksten] LT',
+              lastDay : '[Vakar pulksten] LT',
+              lastWeek : '[Pagājušā] dddd [pulksten] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s vēlāk",
+              past : "%s agrāk",
+              s : "dažas sekundes",
+              m : "minūti",
+              mm : relativeTimeWithPlural,
+              h : "stundu",
+              hh : relativeTimeWithPlural,
+              d : "dienu",
+              dd : relativeTimeWithPlural,
+              M : "mēnesi",
+              MM : relativeTimeWithPlural,
+              y : "gadu",
+              yy : relativeTimeWithPlural
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
+      });
+  }));
 
-          if (b.hasOwnProperty("toString")) {
-              a.toString = b.toString;
-          }
 
-          if (b.hasOwnProperty("valueOf")) {
-              a.valueOf = b.valueOf;
-          }
+/***/ },
+/* 88 */
+/***/ function(module, exports, __webpack_require__) {
 
-          return a;
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : macedonian (mk)
+  // author : Borislav Mickov : https://github.com/B0k0
 
-      function cloneMoment(m) {
-          var result = {}, i;
-          for (i in m) {
-              if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
-                  result[i] = m[i];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('mk', {
+          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
+          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
+          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
+          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
+          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "D.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Денес во] LT',
+              nextDay : '[Утре во] LT',
+              nextWeek : 'dddd [во] LT',
+              lastDay : '[Вчера во] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[Во изминатата] dddd [во] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[Во изминатиот] dddd [во] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "после %s",
+              past : "пред %s",
+              s : "неколку секунди",
+              m : "минута",
+              mm : "%d минути",
+              h : "час",
+              hh : "%d часа",
+              d : "ден",
+              dd : "%d дена",
+              M : "месец",
+              MM : "%d месеци",
+              y : "година",
+              yy : "%d години"
+          },
+          ordinal : function (number) {
+              var lastDigit = number % 10,
+                  last2Digits = number % 100;
+              if (number === 0) {
+                  return number + '-ев';
+              } else if (last2Digits === 0) {
+                  return number + '-ен';
+              } else if (last2Digits > 10 && last2Digits < 20) {
+                  return number + '-ти';
+              } else if (lastDigit === 1) {
+                  return number + '-ви';
+              } else if (lastDigit === 2) {
+                  return number + '-ри';
+              } else if (lastDigit === 7 || lastDigit === 8) {
+                  return number + '-ми';
+              } else {
+                  return number + '-ти';
               }
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          return result;
-      }
 
-      function absRound(number) {
-          if (number < 0) {
-              return Math.ceil(number);
-          } else {
-              return Math.floor(number);
-          }
-      }
+/***/ },
+/* 89 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // 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;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : malayalam (ml)
+  // author : Floyd Pink : https://github.com/floydpink
 
-          while (output.length < targetLength) {
-              output = '0' + output;
-          }
-          return (sign ? (forceSign ? '+' : '') : '-') + output;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      // helper function for _.addTime and _.subtractTime
-      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);
+  }(function (moment) {
+      return moment.lang('ml', {
+          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
+          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
+          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
+          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
+          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm -നു",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[ഇന്ന്] LT',
+              nextDay : '[നാളെ] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[ഇന്നലെ] LT',
+              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s കഴിഞ്ഞ്",
+              past : "%s മുൻപ്",
+              s : "അൽപ നിമിഷങ്ങൾ",
+              m : "ഒരു മിനിറ്റ്",
+              mm : "%d മിനിറ്റ്",
+              h : "ഒരു മണിക്കൂർ",
+              hh : "%d മണിക്കൂർ",
+              d : "ഒരു ദിവസം",
+              dd : "%d ദിവസം",
+              M : "ഒരു മാസം",
+              MM : "%d മാസം",
+              y : "ഒരു വർഷം",
+              yy : "%d വർഷം"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "രാത്രി";
+              } else if (hour < 12) {
+                  return "രാവിലെ";
+              } else if (hour < 17) {
+                  return "ഉച്ച കഴിഞ്ഞ്";
+              } else if (hour < 20) {
+                  return "വൈകുന്നേരം";
+              } else {
+                  return "രാത്രി";
+              }
           }
-      }
+      });
+  }));
 
-      // 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;
-      }
+/***/ },
+/* 90 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // 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;
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Marathi (mr)
+  // author : Harshad Kale : https://github.com/kalehv
 
-      function normalizeUnits(units) {
-          if (units) {
-              var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
-              units = unitAliases[units] || camelFunctions[lowered] || lowered;
-          }
-          return units;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-      function normalizeObjectUnits(inputObject) {
-          var normalizedInput = {},
-              normalizedProp,
-              prop;
-
-          for (prop in inputObject) {
-              if (inputObject.hasOwnProperty(prop)) {
-                  normalizedProp = normalizeUnits(prop);
-                  if (normalizedProp) {
-                      normalizedInput[normalizedProp] = inputObject[prop];
-                  }
+      return moment.lang('mr', {
+          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
+          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
+          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
+          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
+          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
+          longDateFormat : {
+              LT : "A h:mm वाजता",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[उद्या] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[काल] LT',
+              lastWeek: '[मागील] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s नंतर",
+              past : "%s पूर्वी",
+              s : "सेकंद",
+              m: "एक मिनिट",
+              mm: "%d मिनिटे",
+              h : "एक तास",
+              hh : "%d तास",
+              d : "एक दिवस",
+              dd : "%d दिवस",
+              M : "एक महिना",
+              MM : "%d महिने",
+              y : "एक वर्ष",
+              yy : "%d वर्षे"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem: function (hour, minute, isLower)
+          {
+              if (hour < 4) {
+                  return "रात्री";
+              } else if (hour < 10) {
+                  return "सकाळी";
+              } else if (hour < 17) {
+                  return "दुपारी";
+              } else if (hour < 20) {
+                  return "सायंकाळी";
+              } else {
+                  return "रात्री";
               }
+          },
+          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.
           }
+      });
+  }));
 
-          return normalizedInput;
-      }
-
-      function makeList(field) {
-          var count, setter;
-
-          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.fn._lang[field],
-                  results = [];
 
-              if (typeof format === 'number') {
-                  index = format;
-                  format = undefined;
-              }
+/***/ },
+/* 91 */
+/***/ function(module, exports, __webpack_require__) {
 
-              getter = function (i) {
-                  var m = moment().utc().set(setter, i);
-                  return method.call(moment.fn._lang, m, format || '');
-              };
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Bahasa Malaysia (ms-MY)
+  // author : Weldan Jamili : https://github.com/weldan
 
-              if (index != null) {
-                  return getter(index);
-              }
-              else {
-                  for (i = 0; i < count; i++) {
-                      results.push(getter(i));
-                  }
-                  return results;
-              }
-          };
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      function toInt(argumentForCoercion) {
-          var coercedNumber = +argumentForCoercion,
-              value = 0;
-
-          if (coercedNumber !== 0 && isFinite(coercedNumber)) {
-              if (coercedNumber >= 0) {
-                  value = Math.floor(coercedNumber);
+  }(function (moment) {
+      return moment.lang('ms-my', {
+          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
+          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
+          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
+          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
+          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
+          longDateFormat : {
+              LT : "HH.mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY [pukul] LT",
+              LLLL : "dddd, D MMMM YYYY [pukul] LT"
+          },
+          meridiem : function (hours, minutes, isLower) {
+              if (hours < 11) {
+                  return 'pagi';
+              } else if (hours < 15) {
+                  return 'tengahari';
+              } else if (hours < 19) {
+                  return 'petang';
               } else {
-                  value = Math.ceil(coercedNumber);
+                  return 'malam';
               }
+          },
+          calendar : {
+              sameDay : '[Hari ini pukul] LT',
+              nextDay : '[Esok pukul] LT',
+              nextWeek : 'dddd [pukul] LT',
+              lastDay : '[Kelmarin pukul] LT',
+              lastWeek : 'dddd [lepas pukul] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "dalam %s",
+              past : "%s yang lepas",
+              s : "beberapa saat",
+              m : "seminit",
+              mm : "%d minit",
+              h : "sejam",
+              hh : "%d jam",
+              d : "sehari",
+              dd : "%d hari",
+              M : "sebulan",
+              MM : "%d bulan",
+              y : "setahun",
+              yy : "%d tahun"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          return value;
-      }
 
-      function daysInMonth(year, month) {
-          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
-      }
+/***/ },
+/* 92 */
+/***/ function(module, exports, __webpack_require__) {
 
-      function weeksInYear(year, dow, doy) {
-          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : norwegian bokmål (nb)
+  // authors : Espen Hovlandsdal : https://github.com/rexxars
+  //           Sigurd Gartmann : https://github.com/sigurdga
 
-      function daysInYear(year) {
-          return isLeapYear(year) ? 366 : 365;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('nb', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
+          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
+          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "H.mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY [kl.] LT",
+              LLLL : "dddd D. MMMM YYYY [kl.] LT"
+          },
+          calendar : {
+              sameDay: '[i dag kl.] LT',
+              nextDay: '[i morgen kl.] LT',
+              nextWeek: 'dddd [kl.] LT',
+              lastDay: '[i går kl.] LT',
+              lastWeek: '[forrige] dddd [kl.] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s siden",
+              s : "noen sekunder",
+              m : "ett minutt",
+              mm : "%d minutter",
+              h : "en time",
+              hh : "%d timer",
+              d : "en dag",
+              dd : "%d dager",
+              M : "en måned",
+              MM : "%d måneder",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      function isLeapYear(year) {
-          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
-      }
 
-      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] > 23 ? 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;
+/***/ },
+/* 93 */
+/***/ function(module, exports, __webpack_require__) {
 
-              if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
-                  overflow = DATE;
-              }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : nepali/nepalese
+  // author : suvash : https://github.com/suvash
 
-              m._pf.overflow = overflow;
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var symbolMap = {
+          '1': '१',
+          '2': '२',
+          '3': '३',
+          '4': '४',
+          '5': '५',
+          '6': '६',
+          '7': '७',
+          '8': '८',
+          '9': '९',
+          '0': '०'
+      },
+      numberMap = {
+          '१': '1',
+          '२': '2',
+          '३': '3',
+          '४': '4',
+          '५': '5',
+          '६': '6',
+          '७': '7',
+          '८': '8',
+          '९': '9',
+          '०': '0'
+      };
 
-      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;
+      return moment.lang('ne', {
+          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
+          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
+          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
+          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
+          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
+          longDateFormat : {
+              LT : "Aको h:mm बजे",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          preparse: function (string) {
+              return string.replace(/[१२३४५६७८९०]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 3) {
+                  return "राती";
+              } else if (hour < 10) {
+                  return "बिहान";
+              } else if (hour < 15) {
+                  return "दिउँसो";
+              } else if (hour < 18) {
+                  return "बेलुका";
+              } else if (hour < 20) {
+                  return "साँझ";
+              } else {
+                  return "राती";
               }
+          },
+          calendar : {
+              sameDay : '[आज] LT',
+              nextDay : '[भोली] LT',
+              nextWeek : '[आउँदो] dddd[,] LT',
+              lastDay : '[हिजो] LT',
+              lastWeek : '[गएको] dddd[,] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%sमा",
+              past : "%s अगाडी",
+              s : "केही समय",
+              m : "एक मिनेट",
+              mm : "%d मिनेट",
+              h : "एक घण्टा",
+              hh : "%d घण्टा",
+              d : "एक दिन",
+              dd : "%d दिन",
+              M : "एक महिना",
+              MM : "%d महिना",
+              y : "एक बर्ष",
+              yy : "%d बर्ष"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-          return m._isValid;
-      }
-
-      function normalizeLanguage(key) {
-          return key ? key.toLowerCase().replace('_', '-') : key;
-      }
+      });
+  }));
 
-      // Return a moment from input, that is local/utc/zone equivalent to model.
-      function makeAs(input, model) {
-          return model._isUTC ? moment(input).zone(model._offset || 0) :
-              moment(input).local();
-      }
 
-      /************************************
-          Languages
-      ************************************/
+/***/ },
+/* 94 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : dutch (nl)
+  // author : Joris Röling : https://github.com/jjupiter
 
-      extend(Language.prototype, {
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
+          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
 
-          set : function (config) {
-              var prop, i;
-              for (i in config) {
-                  prop = config[i];
-                  if (typeof prop === 'function') {
-                      this[i] = prop;
-                  } else {
-                      this['_' + i] = prop;
-                  }
+      return moment.lang('nl', {
+          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
+          monthsShort : function (m, format) {
+              if (/-MMM-/.test(format)) {
+                  return monthsShortWithoutDots[m.month()];
+              } else {
+                  return monthsShortWithDots[m.month()];
               }
           },
-
-          _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          months : function (m) {
-              return this._months[m.month()];
+          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
+          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
+          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD-MM-YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
           },
-
-          _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          monthsShort : function (m) {
-              return this._monthsShort[m.month()];
+          calendar : {
+              sameDay: '[vandaag om] LT',
+              nextDay: '[morgen om] LT',
+              nextWeek: 'dddd [om] LT',
+              lastDay: '[gisteren om] LT',
+              lastWeek: '[afgelopen] dddd [om] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "over %s",
+              past : "%s geleden",
+              s : "een paar seconden",
+              m : "één minuut",
+              mm : "%d minuten",
+              h : "één uur",
+              hh : "%d uur",
+              d : "één dag",
+              dd : "%d dagen",
+              M : "één maand",
+              MM : "%d maanden",
+              y : "één jaar",
+              yy : "%d jaar"
+          },
+          ordinal : function (number) {
+              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
           },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-          monthsParse : function (monthName) {
-              var i, mom, regex;
 
-              if (!this._monthsParse) {
-                  this._monthsParse = [];
-              }
+/***/ },
+/* 95 */
+/***/ function(module, exports, __webpack_require__) {
 
-              for (i = 0; i < 12; i++) {
-                  // make the regex if we don't have it already
-                  if (!this._monthsParse[i]) {
-                      mom = moment.utc([2000, i]);
-                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
-                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
-                  }
-                  // test the regex
-                  if (this._monthsParse[i].test(monthName)) {
-                      return i;
-                  }
-              }
-          },
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : norwegian nynorsk (nn)
+  // author : https://github.com/mechuwind
 
-          _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdays : function (m) {
-              return this._weekdays[m.day()];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('nn', {
+          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
+          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
+          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
+          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
+          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
           },
-
-          _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysShort : function (m) {
-              return this._weekdaysShort[m.day()];
+          calendar : {
+              sameDay: '[I dag klokka] LT',
+              nextDay: '[I morgon klokka] LT',
+              nextWeek: 'dddd [klokka] LT',
+              lastDay: '[I går klokka] LT',
+              lastWeek: '[Føregåande] dddd [klokka] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "for %s sidan",
+              s : "nokre sekund",
+              m : "eit minutt",
+              mm : "%d minutt",
+              h : "ein time",
+              hh : "%d timar",
+              d : "ein dag",
+              dd : "%d dagar",
+              M : "ein månad",
+              MM : "%d månader",
+              y : "eit år",
+              yy : "%d år"
           },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-          _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          weekdaysMin : function (m) {
-              return this._weekdaysMin[m.day()];
-          },
 
-          weekdaysParse : function (weekdayName) {
-              var i, mom, regex;
+/***/ },
+/* 96 */
+/***/ function(module, exports, __webpack_require__) {
 
-              if (!this._weekdaysParse) {
-                  this._weekdaysParse = [];
-              }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : polish (pl)
+  // author : Rafal Hirsz : https://github.com/evoL
 
-              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;
-                  }
-              }
-          },
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
+          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
 
-          _longDateFormat : {
-              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;
-          },
+      function plural(n) {
+          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
+      }
 
-          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');
-          },
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'minuta' : 'minutę';
+          case 'mm':
+              return result + (plural(number) ? 'minuty' : 'minut');
+          case 'h':
+              return withoutSuffix  ? 'godzina'  : 'godzinę';
+          case 'hh':
+              return result + (plural(number) ? 'godziny' : 'godzin');
+          case 'MM':
+              return result + (plural(number) ? 'miesiące' : 'miesięcy');
+          case 'yy':
+              return result + (plural(number) ? 'lata' : 'lat');
+          }
+      }
 
-          _meridiemParse : /[ap]\.?m?\.?/i,
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'pm' : 'PM';
+      return moment.lang('pl', {
+          months : function (momentToFormat, format) {
+              if (/D MMMM/.test(format)) {
+                  return monthsSubjective[momentToFormat.month()];
               } else {
-                  return isLower ? 'am' : 'AM';
+                  return monthsNominative[momentToFormat.month()];
               }
           },
-
-          _calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
+          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
+          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
+          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
+          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
           },
-          calendar : function (key, mom) {
-              var output = this._calendar[key];
-              return typeof output === 'function' ? output.apply(mom) : output;
+          calendar : {
+              sameDay: '[Dziś o] LT',
+              nextDay: '[Jutro o] LT',
+              nextWeek: '[W] dddd [o] LT',
+              lastDay: '[Wczoraj o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[W zeszłą niedzielę o] LT';
+                  case 3:
+                      return '[W zeszłą środę o] LT';
+                  case 6:
+                      return '[W zeszłą sobotę o] LT';
+                  default:
+                      return '[W zeszły] dddd [o] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "%s temu",
+              s : "kilka sekund",
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : "1 dzień",
+              dd : '%d dni',
+              M : "miesiąc",
+              MM : translate,
+              y : "rok",
+              yy : translate
           },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-          _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"
+
+/***/ },
+/* 97 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : brazilian portuguese (pt-br)
+  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt-br', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY [às] LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
           },
-          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);
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
           },
-          pastFuture : function (diff, output) {
-              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
-              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+          relativeTime : {
+              future : "em %s",
+              past : "%s atrás",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
           },
+          ordinal : '%dº'
+      });
+  }));
 
-          ordinal : function (number) {
-              return this._ordinal.replace("%d", number);
-          },
-          _ordinal : "%d",
 
-          preparse : function (string) {
-              return string;
-          },
+/***/ },
+/* 98 */
+/***/ function(module, exports, __webpack_require__) {
 
-          postformat : function (string) {
-              return string;
-          },
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : portuguese (pt)
+  // author : Jefferson : https://github.com/jalex79
 
-          week : function (mom) {
-              return weekOfYear(mom, this._week.dow, this._week.doy).week;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('pt', {
+          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
+          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
+          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
+          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
+          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D [de] MMMM [de] YYYY",
+              LLL : "D [de] MMMM [de] YYYY LT",
+              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
           },
-
-          _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.
+          calendar : {
+              sameDay: '[Hoje às] LT',
+              nextDay: '[Amanhã às] LT',
+              nextWeek: 'dddd [às] LT',
+              lastDay: '[Ontem às] LT',
+              lastWeek: function () {
+                  return (this.day() === 0 || this.day() === 6) ?
+                      '[Último] dddd [às] LT' : // Saturday + Sunday
+                      '[Última] dddd [às] LT'; // Monday - Friday
+              },
+              sameElse: 'L'
           },
-
-          _invalidDate: 'Invalid date',
-          invalidDate: function () {
-              return this._invalidDate;
+          relativeTime : {
+              future : "em %s",
+              past : "há %s",
+              s : "segundos",
+              m : "um minuto",
+              mm : "%d minutos",
+              h : "uma hora",
+              hh : "%d horas",
+              d : "um dia",
+              dd : "%d dias",
+              M : "um mês",
+              MM : "%d meses",
+              y : "um ano",
+              yy : "%d anos"
+          },
+          ordinal : '%dº',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
       });
+  }));
 
-      // Loads a language definition into the `languages` cache.  The function
-      // takes a key and optionally values.  If not in the browser and no values
-      // are provided, it will load the language file module.  As a convenience,
-      // this function also returns the language values.
-      function loadLang(key, values) {
-          values.abbr = key;
-          if (!languages[key]) {
-              languages[key] = new Language();
-          }
-          languages[key].set(values);
-          return languages[key];
-      }
-
-      // Remove a language from the `languages` cache. Mostly useful in tests.
-      function unloadLang(key) {
-          delete languages[key];
-      }
 
-      // Determines which language definition to use and returns it.
-      //
-      // With no parameters, it will return the global language.  If you
-      // pass in a language key, such as 'en', it will return the
-      // definition for 'en', so long as 'en' has already been loaded using
-      // moment.lang.
-      function getLangDefinition(key) {
-          var i = 0, j, lang, next, split,
-              get = function (k) {
-                  if (!languages[k] && hasModule) {
-                      try {
-                          __webpack_require__(55)("./" + k);
-                      } catch (e) { }
-                  }
-                  return languages[k];
-              };
+/***/ },
+/* 99 */
+/***/ function(module, exports, __webpack_require__) {
 
-          if (!key) {
-              return moment.fn._lang;
-          }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : romanian (ro)
+  // author : Vlad Gurdiga : https://github.com/gurdiga
+  // author : Valentin Agachi : https://github.com/avaly
 
-          if (!isArray(key)) {
-              //short-circuit everything else
-              lang = get(key);
-              if (lang) {
-                  return lang;
-              }
-              key = [key];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'minute',
+              'hh': 'ore',
+              'dd': 'zile',
+              'MM': 'luni',
+              'yy': 'ani'
+          },
+              separator = ' ';
+          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
+              separator = ' de ';
           }
 
-          //pick the language 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
-          while (i < key.length) {
-              split = normalizeLanguage(key[i]).split('-');
-              j = split.length;
-              next = normalizeLanguage(key[i + 1]);
-              next = next ? next.split('-') : null;
-              while (j > 0) {
-                  lang = get(split.slice(0, j).join('-'));
-                  if (lang) {
-                      return lang;
-                  }
-                  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 moment.fn._lang;
+          return number + separator + format[key];
       }
 
-      /************************************
-          Formatting
-      ************************************/
+      return moment.lang('ro', {
+          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
+          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
+          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
+          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
+          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY H:mm",
+              LLLL : "dddd, D MMMM YYYY H:mm"
+          },
+          calendar : {
+              sameDay: "[azi la] LT",
+              nextDay: '[mâine la] LT',
+              nextWeek: 'dddd [la] LT',
+              lastDay: '[ieri la] LT',
+              lastWeek: '[fosta] dddd [la] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "peste %s",
+              past : "%s în urmă",
+              s : "câteva secunde",
+              m : "un minut",
+              mm : relativeTimeWithPlural,
+              h : "o oră",
+              hh : relativeTimeWithPlural,
+              d : "o zi",
+              dd : relativeTimeWithPlural,
+              M : "o lună",
+              MM : relativeTimeWithPlural,
+              y : "un an",
+              yy : relativeTimeWithPlural
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
 
-      function removeFormattingTokens(input) {
-          if (input.match(/\[[\s\S]/)) {
-              return input.replace(/^\[|\]$/g, "");
-          }
-          return input.replace(/\\/g, "");
-      }
+/***/ },
+/* 100 */
+/***/ function(module, exports, __webpack_require__) {
 
-      function makeFormatFunction(format) {
-          var array = format.match(formattingTokens), i, length;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : russian (ru)
+  // author : Viktorminator : https://github.com/Viktorminator
+  // Author : Menelion Elensúle : https://github.com/Oire
 
-          for (i = 0, length = array.length; i < length; i++) {
-              if (formatTokenFunctions[array[i]]) {
-                  array[i] = formatTokenFunctions[array[i]];
-              } else {
-                  array[i] = removeFormattingTokens(array[i]);
-              }
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      }
 
-          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;
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
+              'hh': 'час_часа_часов',
+              'dd': 'день_дня_дней',
+              'MM': 'месяц_месяца_месяцев',
+              'yy': 'год_года_лет'
           };
+          if (key === 'm') {
+              return withoutSuffix ? 'минута' : 'минуту';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
       }
 
-      // format date using native date object
-      function formatMoment(m, format) {
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
+              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
+          },
+
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-          if (!m.isValid()) {
-              return m.lang().invalidDate();
-          }
+          return months[nounCase][m.month()];
+      }
 
-          format = expandFormat(format, m.lang());
+      function monthsShortCaseReplace(m, format) {
+          var monthsShort = {
+              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
+              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
+          },
 
-          if (!formatFunctions[format]) {
-              formatFunctions[format] = makeFormatFunction(format);
-          }
+          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-          return formatFunctions[format](m);
+          return monthsShort[nounCase][m.month()];
       }
 
-      function expandFormat(format, lang) {
-          var i = 5;
-
-          function replaceLongDateFormatTokens(input) {
-              return lang.longDateFormat(input) || input;
-          }
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
+              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
+          },
 
-          localFormattingTokens.lastIndex = 0;
-          while (i >= 0 && localFormattingTokens.test(format)) {
-              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
-              localFormattingTokens.lastIndex = 0;
-              i -= 1;
-          }
+          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
+              'accusative' :
+              'nominative';
 
-          return format;
+          return weekdays[nounCase][m.day()];
       }
 
+      return moment.lang('ru', {
+          months : monthsCaseReplace,
+          monthsShort : monthsShortCaseReplace,
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
+          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY г.",
+              LLL : "D MMMM YYYY г., LT",
+              LLLL : "dddd, D MMMM YYYY г., LT"
+          },
+          calendar : {
+              sameDay: '[Сегодня в] LT',
+              nextDay: '[Завтра в] LT',
+              lastDay: '[Вчера в] LT',
+              nextWeek: function () {
+                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
+              },
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[В прошлое] dddd [в] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                      return '[В прошлый] dddd [в] LT';
+                  case 3:
+                  case 5:
+                  case 6:
+                      return '[В прошлую] dddd [в] LT';
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "через %s",
+              past : "%s назад",
+              s : "несколько секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "час",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "месяц",
+              MM : relativeTimeWithPlural,
+              y : "год",
+              yy : relativeTimeWithPlural
+          },
 
-      /************************************
-          Parsing
-      ************************************/
+          meridiemParse: /ночи|утра|дня|вечера/i,
+          isPM : function (input) {
+              return /^(дня|вечера)$/.test(input);
+          },
 
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночи";
+              } else if (hour < 12) {
+                  return "утра";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечера";
+              }
+          },
 
-      // 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 getLangDefinition(config._l)._meridiemParse;
-          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 parseTokenOrdinal;
-          default :
-              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
-              return a;
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              case 'w':
+              case 'W':
+                  return number + '-я';
+              default:
+                  return number;
+              }
+          },
+
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
-      }
+      });
+  }));
 
-      function timezoneMinutesFromString(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;
+/***/ },
+/* 101 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovak (sk)
+  // author : Martin Minka : https://github.com/k2s
+  // based on work of petrbela : https://github.com/petrbela
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
+          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
 
-      // function to convert string input to date
-      function addTimeToArrayFromToken(token, input, config) {
-          var a, datePartArray = config._a;
+      function plural(n) {
+          return (n > 1) && (n < 5);
+      }
 
-          switch (token) {
-          // QUARTER
-          case 'Q':
-              if (input != null) {
-                  datePartArray[MONTH] = (toInt(input) - 1) * 3;
+      function translate(number, withoutSuffix, key, isFuture) {
+          var result = number + " ";
+          switch (key) {
+          case 's':  // a few seconds / in a few seconds / a few seconds ago
+              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
+          case 'm':  // a minute / in a minute / a minute ago
+              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
+          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'minúty' : 'minút');
+              } else {
+                  return result + 'minútami';
               }
               break;
-          // MONTH
-          case 'M' : // fall through to MM
-          case 'MM' :
-              if (input != null) {
-                  datePartArray[MONTH] = toInt(input) - 1;
+          case 'h':  // an hour / in an hour / an hour ago
+              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
+          case 'hh': // 9 hours / in 9 hours / 9 hours ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'hodiny' : 'hodín');
+              } else {
+                  return result + 'hodinami';
               }
               break;
-          case 'MMM' : // fall through to MMMM
-          case 'MMMM' :
-              a = getLangDefinition(config._l).monthsParse(input);
-              // if we didn't find a month name, mark the date as invalid.
-              if (a != null) {
-                  datePartArray[MONTH] = a;
+          case 'd':  // a day / in a day / a day ago
+              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
+          case 'dd': // 9 days / in 9 days / 9 days ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'dni' : 'dní');
               } else {
-                  config._pf.invalidMonth = input;
+                  return result + 'dňami';
               }
               break;
-          // DAY OF MONTH
-          case 'D' : // fall through to DD
-          case 'DD' :
-              if (input != null) {
-                  datePartArray[DATE] = toInt(input);
+          case 'M':  // a month / in a month / a month ago
+              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
+          case 'MM': // 9 months / in 9 months / 9 months ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
+              } else {
+                  return result + 'mesiacmi';
               }
               break;
-          case 'Do' :
-              if (input != null) {
-                  datePartArray[DATE] = toInt(parseInt(input, 10));
+          case 'y':  // a year / in a year / a year ago
+              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
+          case 'yy': // 9 years / in 9 years / 9 years ago
+              if (withoutSuffix || isFuture) {
+                  return result + (plural(number) ? 'roky' : 'rokov');
+              } else {
+                  return result + 'rokmi';
               }
               break;
-          // DAY OF YEAR
-          case 'DDD' : // fall through to DDDD
-          case 'DDDD' :
-              if (input != null) {
-                  config._dayOfYear = toInt(input);
+          }
+      }
+
+      return moment.lang('sk', {
+          months : months,
+          monthsShort : monthsShort,
+          monthsParse : (function (months, monthsShort) {
+              var i, _monthsParse = [];
+              for (i = 0; i < 12; i++) {
+                  // use custom parser to solve problem with July (červenec)
+                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
               }
+              return _monthsParse;
+          }(months, monthsShort)),
+          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
+          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
+          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
+          longDateFormat : {
+              LT: "H:mm",
+              L : "DD.MM.YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[dnes o] LT",
+              nextDay: '[zajtra o] LT',
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[v] dddd [o] LT';
+                  case 3:
+                      return '[v stredu o] LT';
+                  case 4:
+                      return '[vo štvrtok o] LT';
+                  case 5:
+                      return '[v piatok o] LT';
+                  case 6:
+                      return '[v sobotu o] LT';
+                  }
+              },
+              lastDay: '[včera o] LT',
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[minulú nedeľu o] LT';
+                  case 1:
+                  case 2:
+                      return '[minulý] dddd [o] LT';
+                  case 3:
+                      return '[minulú stredu o] LT';
+                  case 4:
+                  case 5:
+                      return '[minulý] dddd [o] LT';
+                  case 6:
+                      return '[minulú sobotu o] LT';
+                  }
+              },
+              sameElse: "L"
+          },
+          relativeTime : {
+              future : "za %s",
+              past : "pred %s",
+              s : translate,
+              m : translate,
+              mm : translate,
+              h : translate,
+              hh : translate,
+              d : translate,
+              dd : translate,
+              M : translate,
+              MM : translate,
+              y : translate,
+              yy : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-              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._isPm = getLangDefinition(config._l).isPM(input);
-              break;
-          // 24 HOUR
-          case 'H' : // fall through to hh
-          case 'HH' : // fall through to hh
-          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 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 = timezoneMinutesFromString(input);
-              break;
-          // WEEKDAY - human
+
+/***/ },
+/* 102 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : slovenian (sl)
+  // author : Robert Sedovšek : https://github.com/sedovsek
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      function translate(number, withoutSuffix, key) {
+          var result = number + " ";
+          switch (key) {
+          case 'm':
+              return withoutSuffix ? 'ena minuta' : 'eno minuto';
+          case 'mm':
+              if (number === 1) {
+                  result += 'minuta';
+              } else if (number === 2) {
+                  result += 'minuti';
+              } else if (number === 3 || number === 4) {
+                  result += 'minute';
+              } else {
+                  result += 'minut';
+              }
+              return result;
+          case 'h':
+              return withoutSuffix ? 'ena ura' : 'eno uro';
+          case 'hh':
+              if (number === 1) {
+                  result += 'ura';
+              } else if (number === 2) {
+                  result += 'uri';
+              } else if (number === 3 || number === 4) {
+                  result += 'ure';
+              } else {
+                  result += 'ur';
+              }
+              return result;
           case 'dd':
-          case 'ddd':
-          case 'dddd':
-              a = getLangDefinition(config._l).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;
+              if (number === 1) {
+                  result += 'dan';
+              } else {
+                  result += 'dni';
+              }
+              return result;
+          case 'MM':
+              if (number === 1) {
+                  result += 'mesec';
+              } else if (number === 2) {
+                  result += 'meseca';
+              } else if (number === 3 || number === 4) {
+                  result += 'mesece';
               } else {
-                  config._pf.invalidWeekday = input;
+                  result += 'mesecev';
               }
-              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);
+              return result;
+          case 'yy':
+              if (number === 1) {
+                  result += 'leto';
+              } else if (number === 2) {
+                  result += 'leti';
+              } else if (number === 3 || number === 4) {
+                  result += 'leta';
+              } else {
+                  result += 'let';
               }
-              break;
-          case 'gg':
-          case 'GG':
-              config._w = config._w || {};
-              config._w[token] = moment.parseTwoDigitYear(input);
+              return result;
           }
       }
 
-      function dayOfYearFromWeekInfo(config) {
-          var w, weekYear, week, weekday, dow, doy, temp, lang;
+      return moment.lang('sl', {
+          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
+          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
+          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
+          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
+          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
+          longDateFormat : {
+              LT : "H:mm",
+              L : "DD. MM. YYYY",
+              LL : "D. MMMM YYYY",
+              LLL : "D. MMMM YYYY LT",
+              LLLL : "dddd, D. MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay  : '[danes ob] LT',
+              nextDay  : '[jutri ob] LT',
 
-          w = config._w;
-          if (w.GG != null || w.W != null || w.E != null) {
-              dow = 1;
-              doy = 4;
+              nextWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[v] [nedeljo] [ob] LT';
+                  case 3:
+                      return '[v] [sredo] [ob] LT';
+                  case 6:
+                      return '[v] [soboto] [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[v] dddd [ob] LT';
+                  }
+              },
+              lastDay  : '[včeraj ob] LT',
+              lastWeek : function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 6:
+                      return '[prejšnja] dddd [ob] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[prejšnji] dddd [ob] LT';
+                  }
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "čez %s",
+              past   : "%s nazaj",
+              s      : "nekaj sekund",
+              m      : translate,
+              mm     : translate,
+              h      : translate,
+              hh     : translate,
+              d      : "en dan",
+              dd     : translate,
+              M      : "en mesec",
+              MM     : translate,
+              y      : "eno leto",
+              yy     : translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
+          }
+      });
+  }));
 
-              // 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 {
-              lang = getLangDefinition(config._l);
-              dow = lang._week.dow;
-              doy = lang._week.doy;
 
-              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
-              week = dfl(w.w, 1);
+/***/ },
+/* 103 */
+/***/ function(module, exports, __webpack_require__) {
 
-              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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Albanian (sq)
+  // author : Flakërim Ismani : https://github.com/flakerimi
+  // author: Menelion Elensúle: https://github.com/Oire (tests)
+  // author : Oerd Cukalla : https://github.com/oerd (fixes)
 
-          config._a[YEAR] = temp.year;
-          config._dayOfYear = temp.dayOfYear;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('sq', {
+          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
+          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
+          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
+          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
+          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
+          meridiem : function (hours, minutes, isLower) {
+              return hours < 12 ? 'PD' : 'MD';
+          },
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[Sot në] LT',
+              nextDay : '[Nesër në] LT',
+              nextWeek : 'dddd [në] LT',
+              lastDay : '[Dje në] LT',
+              lastWeek : 'dddd [e kaluar në] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "në %s",
+              past : "%s më parë",
+              s : "disa sekonda",
+              m : "një minutë",
+              mm : "%d minuta",
+              h : "një orë",
+              hh : "%d orë",
+              d : "një ditë",
+              dd : "%d ditë",
+              M : "një muaj",
+              MM : "%d muaj",
+              y : "një vit",
+              yy : "%d vite"
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      // 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 (config._d) {
-              return;
+/***/ },
+/* 104 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-cyrillic (sr-cyrl)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['један минут', 'једне минуте'],
+              mm: ['минут', 'минуте', 'минута'],
+              h: ['један сат', 'једног сата'],
+              hh: ['сат', 'сата', 'сати'],
+              dd: ['дан', 'дана', 'дана'],
+              MM: ['месец', 'месеца', 'месеци'],
+              yy: ['година', 'године', 'година']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
           }
+      };
 
-          currentDate = currentDateArray(config);
+      return moment.lang('sr-cyrl', {
+          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
+          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
+          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
+          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
+          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[данас у] LT',
+              nextDay: '[сутра у] LT',
 
-          //compute day of the year from weeks and weekdays
-          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
-              dayOfYearFromWeekInfo(config);
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[у] [недељу] [у] LT';
+                  case 3:
+                      return '[у] [среду] [у] LT';
+                  case 6:
+                      return '[у] [суботу] [у] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[у] dddd [у] LT';
+                  }
+              },
+              lastDay  : '[јуче у] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[прошле] [недеље] [у] LT',
+                      '[прошлог] [понедељка] [у] LT',
+                      '[прошлог] [уторка] [у] LT',
+                      '[прошле] [среде] [у] LT',
+                      '[прошлог] [четвртка] [у] LT',
+                      '[прошлог] [петка] [у] LT',
+                      '[прошле] [суботе] [у] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past   : "пре %s",
+              s      : "неколико секунди",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "дан",
+              dd     : translator.translate,
+              M      : "месец",
+              MM     : translator.translate,
+              y      : "годину",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          //if the day of the year is set, figure out what it is
-          if (config._dayOfYear) {
-              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
 
-              if (config._dayOfYear > daysInYear(yearToUse)) {
-                  config._pf._overflowDayOfYear = true;
-              }
+/***/ },
+/* 105 */
+/***/ function(module, exports, __webpack_require__) {
 
-              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
-              config._a[MONTH] = date.getUTCMonth();
-              config._a[DATE] = date.getUTCDate();
-          }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Serbian-latin (sr)
+  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-          // 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];
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+
+      var translator = {
+          words: { //Different grammatical cases
+              m: ['jedan minut', 'jedne minute'],
+              mm: ['minut', 'minute', 'minuta'],
+              h: ['jedan sat', 'jednog sata'],
+              hh: ['sat', 'sata', 'sati'],
+              dd: ['dan', 'dana', 'dana'],
+              MM: ['mesec', 'meseca', 'meseci'],
+              yy: ['godina', 'godine', 'godina']
+          },
+          correctGrammaticalCase: function (number, wordKey) {
+              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
+          },
+          translate: function (number, withoutSuffix, key) {
+              var wordKey = translator.words[key];
+              if (key.length === 1) {
+                  return withoutSuffix ? wordKey[0] : wordKey[1];
+              } else {
+                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
+              }
           }
+      };
 
-          // 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];
+      return moment.lang('sr', {
+          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
+          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
+          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
+          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
+          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
+          longDateFormat: {
+              LT: "H:mm",
+              L: "DD. MM. YYYY",
+              LL: "D. MMMM YYYY",
+              LLL: "D. MMMM YYYY LT",
+              LLLL: "dddd, D. MMMM YYYY LT"
+          },
+          calendar: {
+              sameDay: '[danas u] LT',
+              nextDay: '[sutra u] LT',
+
+              nextWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                      return '[u] [nedelju] [u] LT';
+                  case 3:
+                      return '[u] [sredu] [u] LT';
+                  case 6:
+                      return '[u] [subotu] [u] LT';
+                  case 1:
+                  case 2:
+                  case 4:
+                  case 5:
+                      return '[u] dddd [u] LT';
+                  }
+              },
+              lastDay  : '[juče u] LT',
+              lastWeek : function () {
+                  var lastWeekDays = [
+                      '[prošle] [nedelje] [u] LT',
+                      '[prošlog] [ponedeljka] [u] LT',
+                      '[prošlog] [utorka] [u] LT',
+                      '[prošle] [srede] [u] LT',
+                      '[prošlog] [četvrtka] [u] LT',
+                      '[prošlog] [petka] [u] LT',
+                      '[prošle] [subote] [u] LT'
+                  ];
+                  return lastWeekDays[this.day()];
+              },
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "za %s",
+              past   : "pre %s",
+              s      : "nekoliko sekundi",
+              m      : translator.translate,
+              mm     : translator.translate,
+              h      : translator.translate,
+              hh     : translator.translate,
+              d      : "dan",
+              dd     : translator.translate,
+              M      : "mesec",
+              MM     : translator.translate,
+              y      : "godinu",
+              yy     : translator.translate
+          },
+          ordinal : '%d.',
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
-          // Apply timezone offset from input. The actual zone can be changed
-          // with parseZone.
-          if (config._tzm != null) {
-              config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
+
+/***/ },
+/* 106 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : swedish (sv)
+  // author : Jens Alm : https://github.com/ulmus
+
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('sv', {
+          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
+          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
+          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
+          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
+          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "YYYY-MM-DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: '[Idag] LT',
+              nextDay: '[Imorgon] LT',
+              lastDay: '[Igår] LT',
+              nextWeek: 'dddd LT',
+              lastWeek: '[Förra] dddd[en] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "om %s",
+              past : "för %s sedan",
+              s : "några sekunder",
+              m : "en minut",
+              mm : "%d minuter",
+              h : "en timme",
+              hh : "%d timmar",
+              d : "en dag",
+              dd : "%d dagar",
+              M : "en månad",
+              MM : "%d månader",
+              y : "ett år",
+              yy : "%d år"
+          },
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
+                  (b === 1) ? 'a' :
+                  (b === 2) ? 'a' :
+                  (b === 3) ? 'e' : 'e';
+              return number + output;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-      }
+      });
+  }));
 
-      function dateFromObject(config) {
-          var normalizedInput;
 
-          if (config._d) {
-              return;
-          }
+/***/ },
+/* 107 */
+/***/ function(module, exports, __webpack_require__) {
 
-          normalizedInput = normalizeObjectUnits(config._i);
-          config._a = [
-              normalizedInput.year,
-              normalizedInput.month,
-              normalizedInput.day,
-              normalizedInput.hour,
-              normalizedInput.minute,
-              normalizedInput.second,
-              normalizedInput.millisecond
-          ];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : tamil (ta)
+  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
 
-          dateFromConfig(config);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      /*var symbolMap = {
+              '1': '௧',
+              '2': '௨',
+              '3': '௩',
+              '4': '௪',
+              '5': '௫',
+              '6': '௬',
+              '7': '௭',
+              '8': '௮',
+              '9': '௯',
+              '0': '௦'
+          },
+          numberMap = {
+              '௧': '1',
+              '௨': '2',
+              '௩': '3',
+              '௪': '4',
+              '௫': '5',
+              '௬': '6',
+              '௭': '7',
+              '௮': '8',
+              '௯': '9',
+              '௦': '0'
+          }; */
 
-      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()];
-          }
-      }
+      return moment.lang('ta', {
+          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
+          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
+          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
+          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY, LT",
+              LLLL : "dddd, D MMMM YYYY, LT"
+          },
+          calendar : {
+              sameDay : '[இன்று] LT',
+              nextDay : '[நாளை] LT',
+              nextWeek : 'dddd, LT',
+              lastDay : '[நேற்று] LT',
+              lastWeek : '[கடந்த வாரம்] dddd, LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s இல்",
+              past : "%s முன்",
+              s : "ஒரு சில விநாடிகள்",
+              m : "ஒரு நிமிடம்",
+              mm : "%d நிமிடங்கள்",
+              h : "ஒரு மணி நேரம்",
+              hh : "%d மணி நேரம்",
+              d : "ஒரு நாள்",
+              dd : "%d நாட்கள்",
+              M : "ஒரு மாதம்",
+              MM : "%d மாதங்கள்",
+              y : "ஒரு வருடம்",
+              yy : "%d ஆண்டுகள்"
+          },
+  /*        preparse: function (string) {
+              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
+                  return numberMap[match];
+              });
+          },
+          postformat: function (string) {
+              return string.replace(/\d/g, function (match) {
+                  return symbolMap[match];
+              });
+          },*/
+          ordinal : function (number) {
+              return number + 'வது';
+          },
 
-      // date from string and format string
-      function makeDateFromStringAndFormat(config) {
 
-          if (config._f === moment.ISO_8601) {
-              parseISO(config);
-              return;
+  // refer http://ta.wikipedia.org/s/1er1      
+
+          meridiem : function (hour, minute, isLower) {
+              if (hour >= 6 && hour <= 10) {
+                  return " காலை";
+              } else   if (hour >= 10 && hour <= 14) {
+                  return " நண்பகல்";
+              } else    if (hour >= 14 && hour <= 18) {
+                  return " எற்பாடு";
+              } else   if (hour >= 18 && hour <= 20) {
+                  return " மாலை";
+              } else  if (hour >= 20 && hour <= 24) {
+                  return " இரவு";
+              } else  if (hour >= 0 && hour <= 6) {
+                  return " வைகறை";
+              }
+          },
+          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.
           }
+      });
+  }));
 
-          config._a = [];
-          config._pf.empty = true;
 
-          // This array is used to make a Date, either with `new Date` or `Date.UTC`
-          var lang = getLangDefinition(config._l),
-              string = '' + config._i,
-              i, parsedInput, tokens, token, skipped,
-              stringLength = string.length,
-              totalParsedInputLength = 0;
+/***/ },
+/* 108 */
+/***/ function(module, exports, __webpack_require__) {
 
-          tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : thai (th)
+  // author : Kridsada Thanabulpong : https://github.com/sirn
 
-          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);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('th', {
+          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
+          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
+          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
+          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
+          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
+          longDateFormat : {
+              LT : "H นาฬิกา m นาที",
+              L : "YYYY/MM/DD",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY เวลา LT",
+              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 12) {
+                  return "ก่อนเที่ยง";
+              } else {
+                  return "หลังเที่ยง";
               }
+          },
+          calendar : {
+              sameDay : '[วันนี้ เวลา] LT',
+              nextDay : '[พรุ่งนี้ เวลา] LT',
+              nextWeek : 'dddd[หน้า เวลา] LT',
+              lastDay : '[เมื่อวานนี้ เวลา] LT',
+              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "อีก %s",
+              past : "%sที่แล้ว",
+              s : "ไม่กี่วินาที",
+              m : "1 นาที",
+              mm : "%d นาที",
+              h : "1 ชั่วโมง",
+              hh : "%d ชั่วโมง",
+              d : "1 วัน",
+              dd : "%d วัน",
+              M : "1 เดือน",
+              MM : "%d เดือน",
+              y : "1 ปี",
+              yy : "%d ปี"
           }
+      });
+  }));
 
-          // add remaining unparsed input length to the string
-          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
-          if (string.length > 0) {
-              config._pf.unusedInput.push(string);
-          }
 
-          // handle am pm
-          if (config._isPm && config._a[HOUR] < 12) {
-              config._a[HOUR] += 12;
-          }
-          // if is 12 am, change hours to 0
-          if (config._isPm === false && config._a[HOUR] === 12) {
-              config._a[HOUR] = 0;
-          }
+/***/ },
+/* 109 */
+/***/ function(module, exports, __webpack_require__) {
 
-          dateFromConfig(config);
-          checkOverflow(config);
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Tagalog/Filipino (tl-ph)
+  // author : Dan Hagman
 
-      function unescapeFormat(s) {
-          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
-              return p1 || p2 || p3 || p4;
-          });
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('tl-ph', {
+          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
+          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
+          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
+          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
+          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "MM/D/YYYY",
+              LL : "MMMM D, YYYY",
+              LLL : "MMMM D, YYYY LT",
+              LLLL : "dddd, MMMM DD, YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Ngayon sa] LT",
+              nextDay: '[Bukas sa] LT',
+              nextWeek: 'dddd [sa] LT',
+              lastDay: '[Kahapon sa] LT',
+              lastWeek: 'dddd [huling linggo] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "sa loob ng %s",
+              past : "%s ang nakalipas",
+              s : "ilang segundo",
+              m : "isang minuto",
+              mm : "%d minuto",
+              h : "isang oras",
+              hh : "%d oras",
+              d : "isang araw",
+              dd : "%d araw",
+              M : "isang buwan",
+              MM : "%d buwan",
+              y : "isang taon",
+              yy : "%d taon"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
-      function regexpEscape(s) {
-          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-      }
 
-      // date from string and array of format strings
-      function makeDateFromStringAndArray(config) {
-          var tempConfig,
-              bestMoment,
+/***/ },
+/* 110 */
+/***/ function(module, exports, __webpack_require__) {
 
-              scoreToBeat,
-              i,
-              currentScore;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : turkish (tr)
+  // authors : Erhan Gundogan : https://github.com/erhangundogan,
+  //           Burak Yiğit Kaya: https://github.com/BYK
 
-          if (config._f.length === 0) {
-              config._pf.invalidFormat = true;
-              config._d = new Date(NaN);
-              return;
-          }
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
 
-          for (i = 0; i < config._f.length; i++) {
-              currentScore = 0;
-              tempConfig = extend({}, config);
-              tempConfig._pf = defaultParsingFlags();
-              tempConfig._f = config._f[i];
-              makeDateFromStringAndFormat(tempConfig);
+      var suffixes = {
+          1: "'inci",
+          5: "'inci",
+          8: "'inci",
+          70: "'inci",
+          80: "'inci",
 
-              if (!isValid(tempConfig)) {
-                  continue;
-              }
+          2: "'nci",
+          7: "'nci",
+          20: "'nci",
+          50: "'nci",
 
-              // if there is any input that was not parsed add a penalty for that format
-              currentScore += tempConfig._pf.charsLeftOver;
+          3: "'üncü",
+          4: "'üncü",
+          100: "'üncü",
 
-              //or tokens
-              currentScore += tempConfig._pf.unusedTokens.length * 10;
+          6: "'ncı",
 
-              tempConfig._pf.score = currentScore;
+          9: "'uncu",
+          10: "'uncu",
+          30: "'uncu",
 
-              if (scoreToBeat == null || currentScore < scoreToBeat) {
-                  scoreToBeat = currentScore;
-                  bestMoment = tempConfig;
+          60: "'ıncı",
+          90: "'ıncı"
+      };
+
+      return moment.lang('tr', {
+          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
+          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
+          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
+          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
+          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd, D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay : '[bugün saat] LT',
+              nextDay : '[yarın saat] LT',
+              nextWeek : '[haftaya] dddd [saat] LT',
+              lastDay : '[dün] LT',
+              lastWeek : '[geçen hafta] dddd [saat] LT',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "%s sonra",
+              past : "%s önce",
+              s : "birkaç saniye",
+              m : "bir dakika",
+              mm : "%d dakika",
+              h : "bir saat",
+              hh : "%d saat",
+              d : "bir gün",
+              dd : "%d gün",
+              M : "bir ay",
+              MM : "%d ay",
+              y : "bir yıl",
+              yy : "%d yıl"
+          },
+          ordinal : function (number) {
+              if (number === 0) {  // special case for zero
+                  return number + "'ıncı";
               }
+              var a = number % 10,
+                  b = number % 100 - a,
+                  c = number >= 100 ? 100 : null;
+
+              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          extend(config, bestMoment || tempConfig);
-      }
 
-      // date from iso format
-      function parseISO(config) {
-          var i, l,
-              string = config._i,
-              match = isoRegex.exec(string);
+/***/ },
+/* 111 */
+/***/ function(module, exports, __webpack_require__) {
 
-          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;
-          }
-      }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
+  // author : Abdel Said : https://github.com/abdelsaid
 
-      // date from iso format or fallback
-      function makeDateFromString(config) {
-          parseISO(config);
-          if (config._isValid === false) {
-              delete config._isValid;
-              moment.createFromInputFallback(config);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('tzm-latn', {
+          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
+          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[asdkh g] LT",
+              nextDay: '[aska g] LT',
+              nextWeek: 'dddd [g] LT',
+              lastDay: '[assant g] LT',
+              lastWeek: 'dddd [g] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "dadkh s yan %s",
+              past : "yan %s",
+              s : "imik",
+              m : "minuḍ",
+              mm : "%d minuḍ",
+              h : "saɛa",
+              hh : "%d tassaɛin",
+              d : "ass",
+              dd : "%d ossan",
+              M : "ayowr",
+              MM : "%d iyyirn",
+              y : "asgas",
+              yy : "%d isgasn"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
-      }
+      });
+  }));
 
-      function makeDateFromInput(config) {
-          var input = config._i,
-              matched = aspNetJsonRegex.exec(input);
 
-          if (input === undefined) {
-              config._d = new Date();
-          } else if (matched) {
-              config._d = new Date(+matched[1]);
-          } else if (typeof input === 'string') {
-              makeDateFromString(config);
-          } else if (isArray(input)) {
-              config._a = input.slice(0);
-              dateFromConfig(config);
-          } else if (isDate(input)) {
-              config._d = new Date(+input);
-          } else if (typeof(input) === 'object') {
-              dateFromObject(config);
-          } else if (typeof(input) === 'number') {
-              // from milliseconds
-              config._d = new Date(input);
-          } else {
-              moment.createFromInputFallback(config);
-          }
-      }
+/***/ },
+/* 112 */
+/***/ function(module, exports, __webpack_require__) {
 
-      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);
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : Morocco Central Atlas Tamaziɣt (tzm)
+  // author : Abdel Said : https://github.com/abdelsaid
 
-          //the date constructor doesn't accept years < 1970
-          if (y < 1970) {
-              date.setFullYear(y);
-          }
-          return date;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      function makeUTCDate(y) {
-          var date = new Date(Date.UTC.apply(null, arguments));
-          if (y < 1970) {
-              date.setUTCFullYear(y);
+  }(function (moment) {
+      return moment.lang('tzm', {
+          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
+          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "dddd D MMMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
+              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
+              nextWeek: 'dddd [ⴴ] LT',
+              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
+              lastWeek: 'dddd [ⴴ] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
+              past : "ⵢⴰⵏ %s",
+              s : "ⵉⵎⵉⴽ",
+              m : "ⵎⵉⵏⵓⴺ",
+              mm : "%d ⵎⵉⵏⵓⴺ",
+              h : "ⵙⴰⵄⴰ",
+              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
+              d : "ⴰⵙⵙ",
+              dd : "%d oⵙⵙⴰⵏ",
+              M : "ⴰⵢoⵓⵔ",
+              MM : "%d ⵉⵢⵢⵉⵔⵏ",
+              y : "ⴰⵙⴳⴰⵙ",
+              yy : "%d ⵉⵙⴳⴰⵙⵏ"
+          },
+          week : {
+              dow : 6, // Saturday is the first day of the week.
+              doy : 12  // The week that contains Jan 1st is the first week of the year.
           }
-          return date;
-      }
+      });
+  }));
 
-      function parseWeekday(input, language) {
-          if (typeof input === 'string') {
-              if (!isNaN(input)) {
-                  input = parseInt(input, 10);
-              }
-              else {
-                  input = language.weekdaysParse(input);
-                  if (typeof input !== 'number') {
-                      return null;
-                  }
-              }
-          }
-          return input;
-      }
 
-      /************************************
-          Relative Time
-      ************************************/
+/***/ },
+/* 113 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : ukrainian (uk)
+  // author : zemlanin : https://github.com/zemlanin
+  // Author : Menelion Elensúle : https://github.com/Oire
 
-      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
-      function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
-          return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      function relativeTime(milliseconds, withoutSuffix, lang) {
-          var seconds = round(Math.abs(milliseconds) / 1000),
-              minutes = round(seconds / 60),
-              hours = round(minutes / 60),
-              days = round(hours / 24),
-              years = round(days / 365),
-              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.dd && ['dd', days] ||
-                  days <= relativeTimeThresholds.dm && ['M'] ||
-                  days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
-                  years === 1 && ['y'] || ['yy', years];
-          args[2] = withoutSuffix;
-          args[3] = milliseconds > 0;
-          args[4] = lang;
-          return substituteTimeAgo.apply({}, args);
+  }(function (moment) {
+      function plural(word, num) {
+          var forms = word.split('_');
+          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
       }
 
+      function relativeTimeWithPlural(number, withoutSuffix, key) {
+          var format = {
+              'mm': 'хвилина_хвилини_хвилин',
+              'hh': 'година_години_годин',
+              'dd': 'день_дні_днів',
+              'MM': 'місяць_місяці_місяців',
+              'yy': 'рік_роки_років'
+          };
+          if (key === 'm') {
+              return withoutSuffix ? 'хвилина' : 'хвилину';
+          }
+          else if (key === 'h') {
+              return withoutSuffix ? 'година' : 'годину';
+          }
+          else {
+              return number + ' ' + plural(format[key], +number);
+          }
+      }
 
-      /************************************
-          Week of Year
-      ************************************/
+      function monthsCaseReplace(m, format) {
+          var months = {
+              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
+              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
+          },
 
+          nounCase = (/D[oD]? *MMMM?/).test(format) ?
+              'accusative' :
+              'nominative';
 
-      // 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;
+          return months[nounCase][m.month()];
+      }
 
+      function weekdaysCaseReplace(m, format) {
+          var weekdays = {
+              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
+              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
+              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
+          },
 
-          if (daysToDayOfWeek > end) {
-              daysToDayOfWeek -= 7;
-          }
+          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
+              'accusative' :
+              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
+                  'genitive' :
+                  'nominative');
 
-          if (daysToDayOfWeek < end - 7) {
-              daysToDayOfWeek += 7;
-          }
+          return weekdays[nounCase][m.day()];
+      }
 
-          adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
-          return {
-              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
-              year: adjustedMoment.year()
+      function processHoursFunction(str) {
+          return function () {
+              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
           };
       }
 
-      //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 moment.lang('uk', {
+          months : monthsCaseReplace,
+          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
+          weekdays : weekdaysCaseReplace,
+          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD.MM.YYYY",
+              LL : "D MMMM YYYY р.",
+              LLL : "D MMMM YYYY р., LT",
+              LLLL : "dddd, D MMMM YYYY р., LT"
+          },
+          calendar : {
+              sameDay: processHoursFunction('[Сьогодні '),
+              nextDay: processHoursFunction('[Завтра '),
+              lastDay: processHoursFunction('[Вчора '),
+              nextWeek: processHoursFunction('[У] dddd ['),
+              lastWeek: function () {
+                  switch (this.day()) {
+                  case 0:
+                  case 3:
+                  case 5:
+                  case 6:
+                      return processHoursFunction('[Минулої] dddd [').call(this);
+                  case 1:
+                  case 2:
+                  case 4:
+                      return processHoursFunction('[Минулого] dddd [').call(this);
+                  }
+              },
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "за %s",
+              past : "%s тому",
+              s : "декілька секунд",
+              m : relativeTimeWithPlural,
+              mm : relativeTimeWithPlural,
+              h : "годину",
+              hh : relativeTimeWithPlural,
+              d : "день",
+              dd : relativeTimeWithPlural,
+              M : "місяць",
+              MM : relativeTimeWithPlural,
+              y : "рік",
+              yy : relativeTimeWithPlural
+          },
 
-          return {
-              year: dayOfYear > 0 ? year : year - 1,
-              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
-          };
-      }
+          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
 
-      /************************************
-          Top Level Functions
-      ************************************/
+          meridiem : function (hour, minute, isLower) {
+              if (hour < 4) {
+                  return "ночі";
+              } else if (hour < 12) {
+                  return "ранку";
+              } else if (hour < 17) {
+                  return "дня";
+              } else {
+                  return "вечора";
+              }
+          },
 
-      function makeMoment(config) {
-          var input = config._i,
-              format = config._f;
+          ordinal: function (number, period) {
+              switch (period) {
+              case 'M':
+              case 'd':
+              case 'DDD':
+              case 'w':
+              case 'W':
+                  return number + '-й';
+              case 'D':
+                  return number + '-го';
+              default:
+                  return number;
+              }
+          },
 
-          if (input === null || (format === undefined && input === '')) {
-              return moment.invalid({nullInput: true});
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 1st is the first week of the year.
           }
+      });
+  }));
 
-          if (typeof input === 'string') {
-              config._i = input = getLangDefinition().preparse(input);
-          }
 
-          if (moment.isMoment(input)) {
-              config = cloneMoment(input);
+/***/ },
+/* 114 */
+/***/ function(module, exports, __webpack_require__) {
 
-              config._d = new Date(+input._d);
-          } else if (format) {
-              if (isArray(format)) {
-                  makeDateFromStringAndArray(config);
-              } else {
-                  makeDateFromStringAndFormat(config);
-              }
-          } else {
-              makeDateFromInput(config);
-          }
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : uzbek
+  // author : Sardor Muminov : https://github.com/muminoff
 
-          return new Moment(config);
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
-
-      moment = function (input, format, lang, strict) {
-          var c;
-
-          if (typeof(lang) === "boolean") {
-              strict = lang;
-              lang = undefined;
+  }(function (moment) {
+      return moment.lang('uz', {
+          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
+          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
+          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
+          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
+          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM YYYY",
+              LLL : "D MMMM YYYY LT",
+              LLLL : "D MMMM YYYY, dddd LT"
+          },
+          calendar : {
+              sameDay : '[Бугун соат] LT [да]',
+              nextDay : '[Эртага] LT [да]',
+              nextWeek : 'dddd [куни соат] LT [да]',
+              lastDay : '[Кеча соат] LT [да]',
+              lastWeek : '[Утган] dddd [куни соат] LT [да]',
+              sameElse : 'L'
+          },
+          relativeTime : {
+              future : "Якин %s ичида",
+              past : "Бир неча %s олдин",
+              s : "фурсат",
+              m : "бир дакика",
+              mm : "%d дакика",
+              h : "бир соат",
+              hh : "%d соат",
+              d : "бир кун",
+              dd : "%d кун",
+              M : "бир ой",
+              MM : "%d ой",
+              y : "бир йил",
+              yy : "%d йил"
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 7  // The week that contains Jan 4th is the first week of the year.
           }
-          // 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 = lang;
-          c._strict = strict;
-          c._isUTC = false;
-          c._pf = defaultParsingFlags();
+      });
+  }));
 
-          return makeMoment(c);
-      };
 
-      moment.suppressDeprecationWarnings = false;
+/***/ },
+/* 115 */
+/***/ function(module, exports, __webpack_require__) {
 
-      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);
-      });
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : vietnamese (vi)
+  // author : Bang Nguyen : https://github.com/bangnk
 
-      // 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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
       }
+  }(function (moment) {
+      return moment.lang('vi', {
+          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
+          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
+          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
+          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
+          longDateFormat : {
+              LT : "HH:mm",
+              L : "DD/MM/YYYY",
+              LL : "D MMMM [năm] YYYY",
+              LLL : "D MMMM [năm] YYYY LT",
+              LLLL : "dddd, D MMMM [năm] YYYY LT",
+              l : "DD/M/YYYY",
+              ll : "D MMM YYYY",
+              lll : "D MMM YYYY LT",
+              llll : "ddd, D MMM YYYY LT"
+          },
+          calendar : {
+              sameDay: "[Hôm nay lúc] LT",
+              nextDay: '[Ngày mai lúc] LT',
+              nextWeek: 'dddd [tuần tới lúc] LT',
+              lastDay: '[Hôm qua lúc] LT',
+              lastWeek: 'dddd [tuần rồi lúc] LT',
+              sameElse: 'L'
+          },
+          relativeTime : {
+              future : "%s tới",
+              past : "%s trước",
+              s : "vài giây",
+              m : "một phút",
+              mm : "%d phút",
+              h : "một giờ",
+              hh : "%d giờ",
+              d : "một ngày",
+              dd : "%d ngày",
+              M : "một tháng",
+              MM : "%d tháng",
+              y : "một năm",
+              yy : "%d năm"
+          },
+          ordinal : function (number) {
+              return number;
+          },
+          week : {
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
+          }
+      });
+  }));
 
-      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);
-      };
+/***/ },
+/* 116 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // creating with utc
-      moment.utc = function (input, format, lang, strict) {
-          var c;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : chinese
+  // author : suupic : https://github.com/suupic
+  // author : Zeno Zeng : https://github.com/zenozeng
 
-          if (typeof(lang) === "boolean") {
-              strict = lang;
-              lang = undefined;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-cn', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah点mm",
+              L : "YYYY-MM-DD",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY-MM-DD",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 600) {
+                  return "凌晨";
+              } else if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
+              } else {
+                  return "晚上";
+              }
+          },
+          calendar : {
+              sameDay : function () {
+                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
+              },
+              nextDay : function () {
+                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
+              },
+              lastDay : function () {
+                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
+              },
+              nextWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              lastWeek : function () {
+                  var startOfWeek, prefix;
+                  startOfWeek = moment().startOf('week');
+                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
+                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
+              },
+              sameElse : 'LL'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d":
+              case "D":
+              case "DDD":
+                  return number + "日";
+              case "M":
+                  return number + "月";
+              case "w":
+              case "W":
+                  return number + "周";
+              default:
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s内",
+              past : "%s前",
+              s : "几秒",
+              m : "1分钟",
+              mm : "%d分钟",
+              h : "1小时",
+              hh : "%d小时",
+              d : "1天",
+              dd : "%d天",
+              M : "1个月",
+              MM : "%d个月",
+              y : "1年",
+              yy : "%d年"
+          },
+          week : {
+              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+              dow : 1, // Monday is the first day of the week.
+              doy : 4  // The week that contains Jan 4th is the first week of the year.
           }
-          // 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 = lang;
-          c._i = input;
-          c._f = format;
-          c._strict = strict;
-          c._pf = defaultParsingFlags();
+      });
+  }));
 
-          return makeMoment(c).utc();
-      };
 
-      // creating with unix timestamp (in seconds)
-      moment.unix = function (input) {
-          return moment(input * 1000);
-      };
+/***/ },
+/* 117 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // duration
-      moment.duration = function (input, key) {
-          var duration = input,
-              // matching against regexp is expensive, do it on demand
-              match = null,
-              sign,
-              ret,
-              parseIso;
+  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
+  // language : traditional chinese (zh-tw)
+  // author : Ben : https://github.com/ben-lin
 
-          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;
+  (function (factory) {
+      if (true) {
+          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
+      } else if (typeof exports === 'object') {
+          module.exports = factory(require('../moment')); // Node
+      } else {
+          factory(window.moment); // Browser global
+      }
+  }(function (moment) {
+      return moment.lang('zh-tw', {
+          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
+          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
+          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
+          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
+          longDateFormat : {
+              LT : "Ah點mm",
+              L : "YYYY年MMMD日",
+              LL : "YYYY年MMMD日",
+              LLL : "YYYY年MMMD日LT",
+              LLLL : "YYYY年MMMD日ddddLT",
+              l : "YYYY年MMMD日",
+              ll : "YYYY年MMMD日",
+              lll : "YYYY年MMMD日LT",
+              llll : "YYYY年MMMD日ddddLT"
+          },
+          meridiem : function (hour, minute, isLower) {
+              var hm = hour * 100 + minute;
+              if (hm < 900) {
+                  return "早上";
+              } else if (hm < 1130) {
+                  return "上午";
+              } else if (hm < 1230) {
+                  return "中午";
+              } else if (hm < 1800) {
+                  return "下午";
               } else {
-                  duration.milliseconds = input;
+                  return "晚上";
               }
-          } 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])
-              };
-          }
-
-          ret = new Duration(duration);
-
-          if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
-              ret._lang = input._lang;
+          },
+          calendar : {
+              sameDay : '[今天]LT',
+              nextDay : '[明天]LT',
+              nextWeek : '[下]ddddLT',
+              lastDay : '[昨天]LT',
+              lastWeek : '[上]ddddLT',
+              sameElse : 'L'
+          },
+          ordinal : function (number, period) {
+              switch (period) {
+              case "d" :
+              case "D" :
+              case "DDD" :
+                  return number + "日";
+              case "M" :
+                  return number + "月";
+              case "w" :
+              case "W" :
+                  return number + "週";
+              default :
+                  return number;
+              }
+          },
+          relativeTime : {
+              future : "%s內",
+              past : "%s前",
+              s : "幾秒",
+              m : "一分鐘",
+              mm : "%d分鐘",
+              h : "一小時",
+              hh : "%d小時",
+              d : "一天",
+              dd : "%d天",
+              M : "一個月",
+              MM : "%d個月",
+              y : "一年",
+              yy : "%d年"
           }
+      });
+  }));
 
-          return ret;
-      };
-
-      // version number
-      moment.version = VERSION;
 
-      // default format
-      moment.defaultFormat = isoFormat;
+/***/ },
+/* 118 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // constant that refers to the ISO standard
-      moment.ISO_8601 = function () {};
+  /**
+   * Copyright 2012 Craig Campbell
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   * http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Mousetrap is a simple keyboard shortcut library for Javascript with
+   * no external dependencies
+   *
+   * @version 1.1.2
+   * @url craig.is/killing/mice
+   */
 
-      // Plugins that add properties should also add the key here (null value),
-      // so we can properly clone ourselves.
-      moment.momentProperties = momentProperties;
+    /**
+     * mapping of special keycodes to their corresponding keys
+     *
+     * everything in this dictionary cannot use keypress events
+     * so it has to be here to map to the correct keycodes for
+     * keyup/keydown events
+     *
+     * @type {Object}
+     */
+    var _MAP = {
+            8: 'backspace',
+            9: 'tab',
+            13: 'enter',
+            16: 'shift',
+            17: 'ctrl',
+            18: 'alt',
+            20: 'capslock',
+            27: 'esc',
+            32: 'space',
+            33: 'pageup',
+            34: 'pagedown',
+            35: 'end',
+            36: 'home',
+            37: 'left',
+            38: 'up',
+            39: 'right',
+            40: 'down',
+            45: 'ins',
+            46: 'del',
+            91: 'meta',
+            93: 'meta',
+            224: 'meta'
+        },
 
-      // 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 () {};
+        /**
+         * mapping for special characters so they can support
+         *
+         * this dictionary is only used incase you want to bind a
+         * keyup or keydown event to one of these keys
+         *
+         * @type {Object}
+         */
+        _KEYCODE_MAP = {
+            106: '*',
+            107: '+',
+            109: '-',
+            110: '.',
+            111 : '/',
+            186: ';',
+            187: '=',
+            188: ',',
+            189: '-',
+            190: '.',
+            191: '/',
+            192: '`',
+            219: '[',
+            220: '\\',
+            221: ']',
+            222: '\''
+        },
 
-      // This function allows you to set a threshold for relative time strings
-      moment.relativeTimeThreshold = function(threshold, limit) {
-        if (relativeTimeThresholds[threshold] === undefined) {
-          return false;
-        }
-        relativeTimeThresholds[threshold] = limit;
-        return true;
-      };
+        /**
+         * this is a mapping of keys that require shift on a US keypad
+         * back to the non shift equivelents
+         *
+         * this is so you can use keyup events with these keys
+         *
+         * note that this will only work reliably on US keyboards
+         *
+         * @type {Object}
+         */
+        _SHIFT_MAP = {
+            '~': '`',
+            '!': '1',
+            '@': '2',
+            '#': '3',
+            '$': '4',
+            '%': '5',
+            '^': '6',
+            '&': '7',
+            '*': '8',
+            '(': '9',
+            ')': '0',
+            '_': '-',
+            '+': '=',
+            ':': ';',
+            '\"': '\'',
+            '<': ',',
+            '>': '.',
+            '?': '/',
+            '|': '\\'
+        },
 
-      // This function will load languages and then set the global language.  If
-      // no arguments are passed in, it will simply return the current global
-      // language key.
-      moment.lang = function (key, values) {
-          var r;
-          if (!key) {
-              return moment.fn._lang._abbr;
-          }
-          if (values) {
-              loadLang(normalizeLanguage(key), values);
-          } else if (values === null) {
-              unloadLang(key);
-              key = 'en';
-          } else if (!languages[key]) {
-              getLangDefinition(key);
-          }
-          r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
-          return r._abbr;
-      };
+        /**
+         * this is a list of special strings you can use to map
+         * to modifier keys when you specify your keyboard shortcuts
+         *
+         * @type {Object}
+         */
+        _SPECIAL_ALIASES = {
+            'option': 'alt',
+            'command': 'meta',
+            'return': 'enter',
+            'escape': 'esc'
+        },
 
-      // returns language data
-      moment.langData = function (key) {
-          if (key && key._lang && key._lang._abbr) {
-              key = key._lang._abbr;
-          }
-          return getLangDefinition(key);
-      };
+        /**
+         * variable to store the flipped version of _MAP from above
+         * needed to check if we should use keypress or not when no action
+         * is specified
+         *
+         * @type {Object|undefined}
+         */
+        _REVERSE_MAP,
 
-      // compare moment object
-      moment.isMoment = function (obj) {
-          return obj instanceof Moment ||
-              (obj != null &&  obj.hasOwnProperty('_isAMomentObject'));
-      };
+        /**
+         * a list of all the callbacks setup via Mousetrap.bind()
+         *
+         * @type {Object}
+         */
+        _callbacks = {},
 
-      // for typechecking Duration objects
-      moment.isDuration = function (obj) {
-          return obj instanceof Duration;
-      };
+        /**
+         * direct map of string combinations to callbacks used for trigger()
+         *
+         * @type {Object}
+         */
+        _direct_map = {},
 
-      for (i = lists.length - 1; i >= 0; --i) {
-          makeList(lists[i]);
-      }
+        /**
+         * keeps track of what level each sequence is at since multiple
+         * sequences can start out with the same sequence
+         *
+         * @type {Object}
+         */
+        _sequence_levels = {},
 
-      moment.normalizeUnits = function (units) {
-          return normalizeUnits(units);
-      };
+        /**
+         * variable to store the setTimeout call
+         *
+         * @type {null|number}
+         */
+        _reset_timer,
 
-      moment.invalid = function (flags) {
-          var m = moment.utc(NaN);
-          if (flags != null) {
-              extend(m._pf, flags);
-          }
-          else {
-              m._pf.userInvalidated = true;
-          }
+        /**
+         * temporary state where we will ignore the next keyup
+         *
+         * @type {boolean|string}
+         */
+        _ignore_next_keyup = false,
 
-          return m;
-      };
+        /**
+         * are we currently inside of a sequence?
+         * type of action ("keyup" or "keydown" or "keypress") or false
+         *
+         * @type {boolean|string}
+         */
+        _inside_sequence = false;
 
-      moment.parseZone = function () {
-          return moment.apply(null, arguments).parseZone();
-      };
+    /**
+     * loop through the f keys, f1 to f19 and add them to the map
+     * programatically
+     */
+    for (var i = 1; i < 20; ++i) {
+        _MAP[111 + i] = 'f' + i;
+    }
 
-      moment.parseTwoDigitYear = function (input) {
-          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
-      };
+    /**
+     * loop through to map numbers on the numeric keypad
+     */
+    for (i = 0; i <= 9; ++i) {
+        _MAP[i + 96] = i;
+    }
 
-      /************************************
-          Moment Prototype
-      ************************************/
+    /**
+     * cross browser add event method
+     *
+     * @param {Element|HTMLDocument} object
+     * @param {string} type
+     * @param {Function} callback
+     * @returns void
+     */
+    function _addEvent(object, type, callback) {
+        if (object.addEventListener) {
+            return object.addEventListener(type, callback, false);
+        }
 
+        object.attachEvent('on' + type, callback);
+    }
 
-      extend(moment.fn = Moment.prototype, {
+    /**
+     * takes the event and returns the key character
+     *
+     * @param {Event} e
+     * @return {string}
+     */
+    function _characterFromEvent(e) {
 
-          clone : function () {
-              return moment(this);
-          },
+        // for keypress events we should return the character as is
+        if (e.type == 'keypress') {
+            return String.fromCharCode(e.which);
+        }
 
-          valueOf : function () {
-              return +this._d + ((this._offset || 0) * 60000);
-          },
+        // for non keypress events the special maps are needed
+        if (_MAP[e.which]) {
+            return _MAP[e.which];
+        }
 
-          unix : function () {
-              return Math.floor(+this / 1000);
-          },
+        if (_KEYCODE_MAP[e.which]) {
+            return _KEYCODE_MAP[e.which];
+        }
 
-          toString : function () {
-              return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
-          },
+        // if it is not in the special map
+        return String.fromCharCode(e.which).toLowerCase();
+    }
 
-          toDate : function () {
-              return this._offset ? new Date(+this) : this._d;
-          },
+    /**
+     * should we stop this event before firing off callbacks
+     *
+     * @param {Event} e
+     * @return {boolean}
+     */
+    function _stop(e) {
+        var element = e.target || e.srcElement,
+            tag_name = element.tagName;
 
-          toISOString : function () {
-              var m = moment(this).utc();
-              if (0 < m.year() && m.year() <= 9999) {
-                  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]');
-              }
-          },
+        // if the element has the class "mousetrap" then no need to stop
+        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
+            return false;
+        }
 
-          toArray : function () {
-              var m = this;
-              return [
-                  m.year(),
-                  m.month(),
-                  m.date(),
-                  m.hours(),
-                  m.minutes(),
-                  m.seconds(),
-                  m.milliseconds()
-              ];
-          },
+        // stop for input, select, and textarea
+        return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
+    }
 
-          isValid : function () {
-              return isValid(this);
-          },
+    /**
+     * checks if two arrays are equal
+     *
+     * @param {Array} modifiers1
+     * @param {Array} modifiers2
+     * @returns {boolean}
+     */
+    function _modifiersMatch(modifiers1, modifiers2) {
+        return modifiers1.sort().join(',') === modifiers2.sort().join(',');
+    }
 
-          isDSTShifted : function () {
+    /**
+     * resets all sequence counters except for the ones passed in
+     *
+     * @param {Object} do_not_reset
+     * @returns void
+     */
+    function _resetSequences(do_not_reset) {
+        do_not_reset = do_not_reset || {};
 
-              if (this._a) {
-                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
-              }
+        var active_sequences = false,
+            key;
 
-              return false;
-          },
+        for (key in _sequence_levels) {
+            if (do_not_reset[key]) {
+                active_sequences = true;
+                continue;
+            }
+            _sequence_levels[key] = 0;
+        }
 
-          parsingFlags : function () {
-              return extend({}, this._pf);
-          },
+        if (!active_sequences) {
+            _inside_sequence = false;
+        }
+    }
 
-          invalidAt: function () {
-              return this._pf.overflow;
-          },
+    /**
+     * finds all callbacks that match based on the keycode, modifiers,
+     * and action
+     *
+     * @param {string} character
+     * @param {Array} modifiers
+     * @param {string} action
+     * @param {boolean=} remove - should we remove any matches
+     * @param {string=} combination
+     * @returns {Array}
+     */
+    function _getMatches(character, modifiers, action, remove, combination) {
+        var i,
+            callback,
+            matches = [];
 
-          utc : function () {
-              return this.zone(0);
-          },
+        // if there are no events related to this keycode
+        if (!_callbacks[character]) {
+            return [];
+        }
 
-          local : function () {
-              this.zone(0);
-              this._isUTC = false;
-              return this;
-          },
+        // if a modifier key is coming up on its own we should allow it
+        if (action == 'keyup' && _isModifier(character)) {
+            modifiers = [character];
+        }
 
-          format : function (inputString) {
-              var output = formatMoment(this, inputString || moment.defaultFormat);
-              return this.lang().postformat(output);
-          },
+        // loop through all callbacks for the key that was pressed
+        // and see if any of them match
+        for (i = 0; i < _callbacks[character].length; ++i) {
+            callback = _callbacks[character][i];
 
-          add : function (input, val) {
-              var dur;
-              // switch args to support add('s', 1) and add(1, 's')
-              if (typeof input === 'string' && typeof val === 'string') {
-                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
-              } else if (typeof input === 'string') {
-                  dur = moment.duration(+val, input);
-              } else {
-                  dur = moment.duration(input, val);
-              }
-              addOrSubtractDurationFromMoment(this, dur, 1);
-              return this;
-          },
+            // if this is a sequence but it is not at the right level
+            // then move onto the next match
+            if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
+                continue;
+            }
 
-          subtract : function (input, val) {
-              var dur;
-              // switch args to support subtract('s', 1) and subtract(1, 's')
-              if (typeof input === 'string' && typeof val === 'string') {
-                  dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
-              } else if (typeof input === 'string') {
-                  dur = moment.duration(+val, input);
-              } else {
-                  dur = moment.duration(input, val);
-              }
-              addOrSubtractDurationFromMoment(this, dur, -1);
-              return this;
-          },
+            // if the action we are looking for doesn't match the action we got
+            // then we should keep going
+            if (action != callback.action) {
+                continue;
+            }
 
-          diff : function (input, units, asFloat) {
-              var that = makeAs(input, this),
-                  zoneDiff = (this.zone() - that.zone()) * 6e4,
-                  diff, output;
+            // if this is a keypress event that means that we need to only
+            // look at the character, otherwise check the modifiers as
+            // well
+            if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
 
-              units = normalizeUnits(units);
+                // remove is used so if you change your mind and call bind a
+                // second time with a new function the first one is overwritten
+                if (remove && callback.combo == combination) {
+                    _callbacks[character].splice(i, 1);
+                }
 
-              if (units === 'year' || units === 'month') {
-                  // average number of days in the months in the given dates
-                  diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
-                  // difference in months
-                  output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
-                  // adjust by taking difference in days, average number of days
-                  // and dst in the given months.
-                  output += ((this - moment(this).startOf('month')) -
-                          (that - moment(that).startOf('month'))) / diff;
-                  // same as above but with zones, to negate all dst
-                  output -= ((this.zone() - moment(this).startOf('month').zone()) -
-                          (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
-                  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);
-          },
+                matches.push(callback);
+            }
+        }
 
-          from : function (time, withoutSuffix) {
-              return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
-          },
+        return matches;
+    }
 
-          fromNow : function (withoutSuffix) {
-              return this.from(moment(), withoutSuffix);
-          },
+    /**
+     * takes a key event and figures out what the modifiers are
+     *
+     * @param {Event} e
+     * @returns {Array}
+     */
+    function _eventModifiers(e) {
+        var modifiers = [];
 
-          calendar : function (time) {
-              // We want to compare the start of today, vs this.
-              // Getting start-of-today depends on whether we're zone'd 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.lang().calendar(format, this));
-          },
+        if (e.shiftKey) {
+            modifiers.push('shift');
+        }
 
-          isLeapYear : function () {
-              return isLeapYear(this.year());
-          },
+        if (e.altKey) {
+            modifiers.push('alt');
+        }
 
-          isDST : function () {
-              return (this.zone() < this.clone().month(0).zone() ||
-                  this.zone() < this.clone().month(5).zone());
-          },
+        if (e.ctrlKey) {
+            modifiers.push('ctrl');
+        }
 
-          day : function (input) {
-              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
-              if (input != null) {
-                  input = parseWeekday(input, this.lang());
-                  return this.add({ d : input - day });
-              } else {
-                  return day;
-              }
-          },
+        if (e.metaKey) {
+            modifiers.push('meta');
+        }
 
-          month : makeAccessor('Month', true),
+        return modifiers;
+    }
 
-          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 */
-              }
+    /**
+     * actually calls the callback function
+     *
+     * if your callback function returns false this will use the jquery
+     * convention - prevent default and stop propogation on the event
+     *
+     * @param {Function} callback
+     * @param {Event} e
+     * @returns void
+     */
+    function _fireCallback(callback, e) {
+        if (callback(e) === false) {
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
 
-              // weeks are a special case
-              if (units === 'week') {
-                  this.weekday(0);
-              } else if (units === 'isoWeek') {
-                  this.isoWeekday(1);
-              }
+            if (e.stopPropagation) {
+                e.stopPropagation();
+            }
 
-              // quarters are also special
-              if (units === 'quarter') {
-                  this.month(Math.floor(this.month() / 3) * 3);
-              }
+            e.returnValue = false;
+            e.cancelBubble = true;
+        }
+    }
 
-              return this;
-          },
+    /**
+     * handles a character key event
+     *
+     * @param {string} character
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleCharacter(character, e) {
 
-          endOf: function (units) {
-              units = normalizeUnits(units);
-              return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
-          },
+        // if this event should not happen stop here
+        if (_stop(e)) {
+            return;
+        }
 
-          isAfter: function (input, units) {
-              units = typeof units !== 'undefined' ? units : 'millisecond';
-              return +this.clone().startOf(units) > +moment(input).startOf(units);
-          },
+        var callbacks = _getMatches(character, _eventModifiers(e), e.type),
+            i,
+            do_not_reset = {},
+            processed_sequence_callback = false;
 
-          isBefore: function (input, units) {
-              units = typeof units !== 'undefined' ? units : 'millisecond';
-              return +this.clone().startOf(units) < +moment(input).startOf(units);
-          },
+        // loop through matching callbacks for this key event
+        for (i = 0; i < callbacks.length; ++i) {
 
-          isSame: function (input, units) {
-              units = units || 'ms';
-              return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
-          },
+            // fire for all sequence callbacks
+            // this is because if for example you have multiple sequences
+            // bound such as "g i" and "g t" they both need to fire the
+            // callback for matching g cause otherwise you can only ever
+            // match the first one
+            if (callbacks[i].seq) {
+                processed_sequence_callback = true;
 
-          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;
-                   }
-           ),
+                // keep a list of which sequences were matches for later
+                do_not_reset[callbacks[i].seq] = 1;
+                _fireCallback(callbacks[i].callback, e);
+                continue;
+            }
 
-          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;
-                  }
-          ),
+            // if there were no sequence matches but we are still here
+            // that means this is a regular match so we should fire that
+            if (!processed_sequence_callback && !_inside_sequence) {
+                _fireCallback(callbacks[i].callback, e);
+            }
+        }
 
-          // keepTime = true means only change the timezone, without affecting
-          // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
-          // It is possible that 5:31:26 doesn't exist int zone +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.
-          zone : function (input, keepTime) {
-              var offset = this._offset || 0;
-              if (input != null) {
-                  if (typeof input === "string") {
-                      input = timezoneMinutesFromString(input);
-                  }
-                  if (Math.abs(input) < 16) {
-                      input = input * 60;
-                  }
-                  this._offset = input;
-                  this._isUTC = true;
-                  if (offset !== input) {
-                      if (!keepTime || this._changeInProgress) {
-                          addOrSubtractDurationFromMoment(this,
-                                  moment.duration(offset - input, 'm'), 1, false);
-                      } else if (!this._changeInProgress) {
-                          this._changeInProgress = true;
-                          moment.updateOffset(this, true);
-                          this._changeInProgress = null;
-                      }
-                  }
-              } else {
-                  return this._isUTC ? offset : this._d.getTimezoneOffset();
-              }
-              return this;
-          },
+        // if you are inside of a sequence and the key you are pressing
+        // is not a modifier key then we should reset all sequences
+        // that were not matched by this key event
+        if (e.type == _inside_sequence && !_isModifier(character)) {
+            _resetSequences(do_not_reset);
+        }
+    }
 
-          zoneAbbr : function () {
-              return this._isUTC ? "UTC" : "";
-          },
+    /**
+     * handles a keydown event
+     *
+     * @param {Event} e
+     * @returns void
+     */
+    function _handleKey(e) {
 
-          zoneName : function () {
-              return this._isUTC ? "Coordinated Universal Time" : "";
-          },
+        // normalize e.which for key events
+        // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
+        e.which = typeof e.which == "number" ? e.which : e.keyCode;
 
-          parseZone : function () {
-              if (this._tzm) {
-                  this.zone(this._tzm);
-              } else if (typeof this._i === 'string') {
-                  this.zone(this._i);
-              }
-              return this;
-          },
+        var character = _characterFromEvent(e);
 
-          hasAlignedHourOffset : function (input) {
-              if (!input) {
-                  input = 0;
-              }
-              else {
-                  input = moment(input).zone();
-              }
+        // no character found then stop
+        if (!character) {
+            return;
+        }
 
-              return (this.zone() - input) % 60 === 0;
-          },
+        if (e.type == 'keyup' && _ignore_next_keyup == character) {
+            _ignore_next_keyup = false;
+            return;
+        }
 
-          daysInMonth : function () {
-              return daysInMonth(this.year(), this.month());
-          },
+        _handleCharacter(character, e);
+    }
 
-          dayOfYear : function (input) {
-              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
-              return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
-          },
+    /**
+     * determines if the keycode specified is a modifier key or not
+     *
+     * @param {string} key
+     * @returns {boolean}
+     */
+    function _isModifier(key) {
+        return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
+    }
 
-          quarter : function (input) {
-              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
-          },
+    /**
+     * called to set a 1 second timeout on the specified sequence
+     *
+     * this is so after each key press in the sequence you have 1 second
+     * to press the next key before you have to start over
+     *
+     * @returns void
+     */
+    function _resetSequenceTimer() {
+        clearTimeout(_reset_timer);
+        _reset_timer = setTimeout(_resetSequences, 1000);
+    }
 
-          weekYear : function (input) {
-              var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
-              return input == null ? year : this.add("y", (input - year));
-          },
+    /**
+     * reverses the map lookup so that we can look for specific keys
+     * to see what can and can't use keypress
+     *
+     * @return {Object}
+     */
+    function _getReverseMap() {
+        if (!_REVERSE_MAP) {
+            _REVERSE_MAP = {};
+            for (var key in _MAP) {
 
-          isoWeekYear : function (input) {
-              var year = weekOfYear(this, 1, 4).year;
-              return input == null ? year : this.add("y", (input - year));
-          },
+                // pull out the numeric keypad from here cause keypress should
+                // be able to detect the keys from the character
+                if (key > 95 && key < 112) {
+                    continue;
+                }
 
-          week : function (input) {
-              var week = this.lang().week(this);
-              return input == null ? week : this.add("d", (input - week) * 7);
-          },
+                if (_MAP.hasOwnProperty(key)) {
+                    _REVERSE_MAP[_MAP[key]] = key;
+                }
+            }
+        }
+        return _REVERSE_MAP;
+    }
 
-          isoWeek : function (input) {
-              var week = weekOfYear(this, 1, 4).week;
-              return input == null ? week : this.add("d", (input - week) * 7);
-          },
+    /**
+     * picks the best action based on the key combination
+     *
+     * @param {string} key - character for key
+     * @param {Array} modifiers
+     * @param {string=} action passed in
+     */
+    function _pickBestAction(key, modifiers, action) {
 
-          weekday : function (input) {
-              var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
-              return input == null ? weekday : this.add("d", input - weekday);
-          },
+        // if no action was picked in we should try to pick the one
+        // that we think would work best for this key
+        if (!action) {
+            action = _getReverseMap()[key] ? 'keydown' : 'keypress';
+        }
 
-          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);
-          },
+        // modifier keys don't work as expected with keypress,
+        // switch to keydown
+        if (action == 'keypress' && modifiers.length) {
+            action = 'keydown';
+        }
 
-          isoWeeksInYear : function () {
-              return weeksInYear(this.year(), 1, 4);
-          },
+        return action;
+    }
 
-          weeksInYear : function () {
-              var weekInfo = this._lang._week;
-              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
-          },
+    /**
+     * binds a key sequence to an event
+     *
+     * @param {string} combo - combo specified in bind call
+     * @param {Array} keys
+     * @param {Function} callback
+     * @param {string=} action
+     * @returns void
+     */
+    function _bindSequence(combo, keys, callback, action) {
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units]();
-          },
+        // start off by adding a sequence level record for this combination
+        // and setting the level to 0
+        _sequence_levels[combo] = 0;
 
-          set : function (units, value) {
-              units = normalizeUnits(units);
-              if (typeof this[units] === 'function') {
-                  this[units](value);
-              }
-              return this;
-          },
+        // if there is no action pick the best one for the first key
+        // in the sequence
+        if (!action) {
+            action = _pickBestAction(keys[0], []);
+        }
 
-          // If passed a language key, it will set the language for this
-          // instance.  Otherwise, it will return the language configuration
-          // variables for this instance.
-          lang : function (key) {
-              if (key === undefined) {
-                  return this._lang;
-              } else {
-                  this._lang = getLangDefinition(key);
-                  return this;
-              }
-          }
-      });
+        /**
+         * callback to increase the sequence level for this sequence and reset
+         * all other sequences that were active
+         *
+         * @param {Event} e
+         * @returns void
+         */
+        var _increaseSequence = function(e) {
+                _inside_sequence = action;
+                ++_sequence_levels[combo];
+                _resetSequenceTimer();
+            },
 
-      function rawMonthSetter(mom, value) {
-          var dayOfMonth;
+            /**
+             * wraps the specified callback inside of another function in order
+             * to reset all sequence counters as soon as this sequence is done
+             *
+             * @param {Event} e
+             * @returns void
+             */
+            _callbackAndReset = function(e) {
+                _fireCallback(callback, e);
 
-          // TODO: Move this out of here!
-          if (typeof value === 'string') {
-              value = mom.lang().monthsParse(value);
-              // TODO: Another silent failure?
-              if (typeof value !== 'number') {
-                  return mom;
-              }
-          }
+                // we should ignore the next key up if the action is key down
+                // or keypress.  this is so if you finish a sequence and
+                // release the key the final key will not trigger a keyup
+                if (action !== 'keyup') {
+                    _ignore_next_keyup = _characterFromEvent(e);
+                }
 
-          dayOfMonth = Math.min(mom.date(),
-                  daysInMonth(mom.year(), value));
-          mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
-          return mom;
-      }
+                // weird race condition if a sequence ends with the key
+                // another sequence begins with
+                setTimeout(_resetSequences, 10);
+            },
+            i;
 
-      function rawGetter(mom, unit) {
-          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
-      }
+        // loop through keys one at a time and bind the appropriate callback
+        // function.  for any key leading up to the final one it should
+        // increase the sequence. after the final, it should reset all sequences
+        for (i = 0; i < keys.length; ++i) {
+            _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
+        }
+    }
 
-      function rawSetter(mom, unit, value) {
-          if (unit === 'Month') {
-              return rawMonthSetter(mom, value);
-          } else {
-              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
-          }
-      }
+    /**
+     * binds a single keyboard combination
+     *
+     * @param {string} combination
+     * @param {Function} callback
+     * @param {string=} action
+     * @param {string=} sequence_name - name of sequence if part of sequence
+     * @param {number=} level - what part of the sequence the command is
+     * @returns void
+     */
+    function _bindSingle(combination, callback, action, sequence_name, level) {
 
-      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);
-              }
-          };
-      }
+        // make sure multiple spaces in a row become a single space
+        combination = combination.replace(/\s+/g, ' ');
 
-      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));
+        var sequence = combination.split(' '),
+            i,
+            key,
+            keys,
+            modifiers = [];
 
-      // 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;
+        // if this pattern is a sequence of keys then run through this method
+        // to reprocess each pattern one key at a time
+        if (sequence.length > 1) {
+            return _bindSequence(combination, sequence, callback, action);
+        }
 
-      // add aliased format methods
-      moment.fn.toJSON = moment.fn.toISOString;
+        // take the keys from this pattern and figure out what the actual
+        // pattern is all about
+        keys = combination === '+' ? ['+'] : combination.split('+');
 
-      /************************************
-          Duration Prototype
-      ************************************/
+        for (i = 0; i < keys.length; ++i) {
+            key = keys[i];
 
+            // normalize key names
+            if (_SPECIAL_ALIASES[key]) {
+                key = _SPECIAL_ALIASES[key];
+            }
 
-      extend(moment.duration.fn = Duration.prototype, {
+            // if this is not a keypress event then we should
+            // be smart about using shift keys
+            // this will only work for US keyboards however
+            if (action && action != 'keypress' && _SHIFT_MAP[key]) {
+                key = _SHIFT_MAP[key];
+                modifiers.push('shift');
+            }
 
-          _bubble : function () {
-              var milliseconds = this._milliseconds,
-                  days = this._days,
-                  months = this._months,
-                  data = this._data,
-                  seconds, minutes, hours, years;
+            // if this key is a modifier then add it to the list of modifiers
+            if (_isModifier(key)) {
+                modifiers.push(key);
+            }
+        }
 
-              // The following code bubbles up values, see the tests for
-              // examples of what that means.
-              data.milliseconds = milliseconds % 1000;
+        // depending on what the key combination is
+        // we will try to pick the best event for it
+        action = _pickBestAction(key, modifiers, action);
 
-              seconds = absRound(milliseconds / 1000);
-              data.seconds = seconds % 60;
+        // make sure to initialize array if this is the first time
+        // a callback is added for this key
+        if (!_callbacks[key]) {
+            _callbacks[key] = [];
+        }
 
-              minutes = absRound(seconds / 60);
-              data.minutes = minutes % 60;
+        // remove an existing match if there is one
+        _getMatches(key, modifiers, action, !sequence_name, combination);
 
-              hours = absRound(minutes / 60);
-              data.hours = hours % 24;
+        // add this call back to the array
+        // if it is a sequence put it at the beginning
+        // if not put it at the end
+        //
+        // this is important because the way these are processed expects
+        // the sequence ones to come first
+        _callbacks[key][sequence_name ? 'unshift' : 'push']({
+            callback: callback,
+            modifiers: modifiers,
+            action: action,
+            seq: sequence_name,
+            level: level,
+            combo: combination
+        });
+    }
 
-              days += absRound(hours / 24);
-              data.days = days % 30;
+    /**
+     * binds multiple combinations to the same callback
+     *
+     * @param {Array} combinations
+     * @param {Function} callback
+     * @param {string|undefined} action
+     * @returns void
+     */
+    function _bindMultiple(combinations, callback, action) {
+        for (var i = 0; i < combinations.length; ++i) {
+            _bindSingle(combinations[i], callback, action);
+        }
+    }
 
-              months += absRound(days / 30);
-              data.months = months % 12;
+    // start!
+    _addEvent(document, 'keypress', _handleKey);
+    _addEvent(document, 'keydown', _handleKey);
+    _addEvent(document, 'keyup', _handleKey);
 
-              years = absRound(months / 12);
-              data.years = years;
-          },
+    var mousetrap = {
 
-          weeks : function () {
-              return absRound(this.days() / 7);
-          },
+        /**
+         * binds an event to mousetrap
+         *
+         * can be a single key, a combination of keys separated with +,
+         * a comma separated list of keys, an array of keys, or
+         * a sequence of keys separated by spaces
+         *
+         * be sure to list the modifier keys first to make sure that the
+         * correct key ends up getting bound (the last key in the pattern)
+         *
+         * @param {string|Array} keys
+         * @param {Function} callback
+         * @param {string=} action - 'keypress', 'keydown', or 'keyup'
+         * @returns void
+         */
+        bind: function(keys, callback, action) {
+            _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
+            _direct_map[keys + ':' + action] = callback;
+            return this;
+        },
 
-          valueOf : function () {
-              return this._milliseconds +
-                this._days * 864e5 +
-                (this._months % 12) * 2592e6 +
-                toInt(this._months / 12) * 31536e6;
-          },
+        /**
+         * unbinds an event to mousetrap
+         *
+         * the unbinding sets the callback function of the specified key combo
+         * to an empty function and deletes the corresponding key in the
+         * _direct_map dict.
+         *
+         * the keycombo+action has to be exactly the same as
+         * it was defined in the bind method
+         *
+         * TODO: actually remove this from the _callbacks dictionary instead
+         * of binding an empty function
+         *
+         * @param {string|Array} keys
+         * @param {string} action
+         * @returns void
+         */
+        unbind: function(keys, action) {
+            if (_direct_map[keys + ':' + action]) {
+                delete _direct_map[keys + ':' + action];
+                this.bind(keys, function() {}, action);
+            }
+            return this;
+        },
 
-          humanize : function (withSuffix) {
-              var difference = +this,
-                  output = relativeTime(difference, !withSuffix, this.lang());
+        /**
+         * triggers an event that has already been bound
+         *
+         * @param {string} keys
+         * @param {string=} action
+         * @returns void
+         */
+        trigger: function(keys, action) {
+            _direct_map[keys + ':' + action]();
+            return this;
+        },
 
-              if (withSuffix) {
-                  output = this.lang().pastFuture(difference, output);
-              }
+        /**
+         * resets the library back to its initial state.  this is useful
+         * if you want to clear out the current keyboard shortcuts and bind
+         * new ones - for example if you switch to another page
+         *
+         * @returns void
+         */
+        reset: function() {
+            _callbacks = {};
+            _direct_map = {};
+            return this;
+        }
+    };
+
+  module.exports = mousetrap;
+
+
+
+/***/ },
+/* 119 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var PhysicsMixin = __webpack_require__(120);
+  var ClusterMixin = __webpack_require__(124);
+  var SectorsMixin = __webpack_require__(125);
+  var SelectionMixin = __webpack_require__(126);
+  var ManipulationMixin = __webpack_require__(127);
+  var NavigationMixin = __webpack_require__(128);
+  var HierarchicalLayoutMixin = __webpack_require__(129);
+
+  /**
+   * Load a mixin into the network object
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
+   * @private
+   */
+  exports._loadMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = sourceVariable[mixinFunction];
+      }
+    }
+  };
 
-              return this.lang().postformat(output);
-          },
 
-          add : function (input, val) {
-              // supports only 2.0-style add(1, 's') or add(moment)
-              var dur = moment.duration(input, val);
+  /**
+   * removes a mixin from the network object.
+   *
+   * @param {Object} sourceVariable | this object has to contain functions.
+   * @private
+   */
+  exports._clearMixin = function (sourceVariable) {
+    for (var mixinFunction in sourceVariable) {
+      if (sourceVariable.hasOwnProperty(mixinFunction)) {
+        this[mixinFunction] = undefined;
+      }
+    }
+  };
 
-              this._milliseconds += dur._milliseconds;
-              this._days += dur._days;
-              this._months += dur._months;
 
-              this._bubble();
+  /**
+   * Mixin the physics system and initialize the parameters required.
+   *
+   * @private
+   */
+  exports._loadPhysicsSystem = function () {
+    this._loadMixin(PhysicsMixin);
+    this._loadSelectedForceSolver();
+    if (this.constants.configurePhysics == true) {
+      this._loadPhysicsConfiguration();
+    }
+  };
 
-              return this;
-          },
 
-          subtract : function (input, val) {
-              var dur = moment.duration(input, val);
+  /**
+   * Mixin the cluster system and initialize the parameters required.
+   *
+   * @private
+   */
+  exports._loadClusterSystem = function () {
+    this.clusterSession = 0;
+    this.hubThreshold = 5;
+    this._loadMixin(ClusterMixin);
+  };
 
-              this._milliseconds -= dur._milliseconds;
-              this._days -= dur._days;
-              this._months -= dur._months;
 
-              this._bubble();
+  /**
+   * Mixin the sector system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadSectorSystem = function () {
+    this.sectors = {};
+    this.activeSector = ["default"];
+    this.sectors["active"] = {};
+    this.sectors["active"]["default"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
+    this.sectors["frozen"] = {};
+    this.sectors["support"] = {"nodes": {},
+      "edges": {},
+      "nodeIndices": [],
+      "formationScale": 1.0,
+      "drawingNode": undefined };
 
-              return this;
-          },
+    this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units.toLowerCase() + 's']();
-          },
+    this._loadMixin(SectorsMixin);
+  };
 
-          as : function (units) {
-              units = normalizeUnits(units);
-              return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
-          },
 
-          lang : moment.fn.lang,
+  /**
+   * Mixin the selection system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadSelectionSystem = function () {
+    this.selectionObj = {nodes: {}, edges: {}};
 
-          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);
+    this._loadMixin(SelectionMixin);
+  };
 
-              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' : '');
-          }
-      });
+  /**
+   * Mixin the navigationUI (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadManipulationSystem = function () {
+    // reset global variables -- these are used by the selection of nodes and edges.
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
 
-      function makeDurationGetter(name) {
-          moment.duration.fn[name] = function () {
-              return this._data[name];
-          };
+    if (this.constants.dataManipulation.enabled == true) {
+      // load the manipulator HTML elements. All styling done in css.
+      if (this.manipulationDiv === undefined) {
+        this.manipulationDiv = document.createElement('div');
+        this.manipulationDiv.className = 'network-manipulationDiv';
+        this.manipulationDiv.id = 'network-manipulationDiv';
+        if (this.editMode == true) {
+          this.manipulationDiv.style.display = "block";
+        }
+        else {
+          this.manipulationDiv.style.display = "none";
+        }
+        this.containerElement.insertBefore(this.manipulationDiv, this.frame);
       }
 
-      function makeDurationAsGetter(name, factor) {
-          moment.duration.fn['as' + name] = function () {
-              return +this / factor;
-          };
+      if (this.editModeDiv === undefined) {
+        this.editModeDiv = document.createElement('div');
+        this.editModeDiv.className = 'network-manipulation-editMode';
+        this.editModeDiv.id = 'network-manipulation-editMode';
+        if (this.editMode == true) {
+          this.editModeDiv.style.display = "none";
+        }
+        else {
+          this.editModeDiv.style.display = "block";
+        }
+        this.containerElement.insertBefore(this.editModeDiv, this.frame);
       }
 
-      for (i in unitMillisecondFactors) {
-          if (unitMillisecondFactors.hasOwnProperty(i)) {
-              makeDurationAsGetter(i, unitMillisecondFactors[i]);
-              makeDurationGetter(i.toLowerCase());
-          }
+      if (this.closeDiv === undefined) {
+        this.closeDiv = document.createElement('div');
+        this.closeDiv.className = 'network-manipulation-closeDiv';
+        this.closeDiv.id = 'network-manipulation-closeDiv';
+        this.closeDiv.style.display = this.manipulationDiv.style.display;
+        this.containerElement.insertBefore(this.closeDiv, this.frame);
       }
 
-      makeDurationAsGetter('Weeks', 6048e5);
-      moment.duration.fn.asMonths = function () {
-          return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
-      };
-
+      // load the manipulation functions
+      this._loadMixin(ManipulationMixin);
 
-      /************************************
-          Default Lang
-      ************************************/
+      // create the manipulator toolbar
+      this._createManipulatorBar();
+    }
+    else {
+      if (this.manipulationDiv !== undefined) {
+        // removes all the bindings and overloads
+        this._createManipulatorBar();
+        // remove the manipulation divs
+        this.containerElement.removeChild(this.manipulationDiv);
+        this.containerElement.removeChild(this.editModeDiv);
+        this.containerElement.removeChild(this.closeDiv);
 
+        this.manipulationDiv = undefined;
+        this.editModeDiv = undefined;
+        this.closeDiv = undefined;
+        // remove the mixin functions
+        this._clearMixin(ManipulationMixin);
+      }
+    }
+  };
 
-      // Set default language, other languages will inherit from English.
-      moment.lang('en', {
-          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;
-          }
-      });
 
-      /* EMBED_LANGUAGES */
+  /**
+   * Mixin the navigation (User Interface) system and initialize the parameters required
+   *
+   * @private
+   */
+  exports._loadNavigationControls = function () {
+    this._loadMixin(NavigationMixin);
 
-      /************************************
-          Exposing Moment
-      ************************************/
+    // the clean function removes the button divs, this is done to remove the bindings.
+    this._cleanNavigation();
+    if (this.constants.navigation.enabled == true) {
+      this._loadNavigationElements();
+    }
+  };
 
-      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;
-              }
+  /**
+   * Mixin the hierarchical layout system.
+   *
+   * @private
+   */
+  exports._loadHierarchySystem = function () {
+    this._loadMixin(HierarchicalLayoutMixin);
+  };
 
-              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__(130)(module)))
 
 /***/ },
-/* 52 */
+/* 120 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+  var RepulsionMixin = __webpack_require__(121);
+  var HierarchialRepulsionMixin = __webpack_require__(122);
+  var BarnesHutMixin = __webpack_require__(123);
+
   /**
-   * Calculate the forces the nodes apply on each other based on a repulsion field.
-   * This field is linearly approximated.
+   * Toggling barnes Hut calculation on and off.
    *
    * @private
    */
-  exports._calculateNodeForces = function () {
-    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
+  exports._toggleBarnesHut = function () {
+    this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
+    this._loadSelectedForceSolver();
+    this.moving = true;
+    this.start();
+  };
 
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
 
-    // approximation constants
-    var a_base = -2 / 3;
-    var b = 4 / 3;
+  /**
+   * 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);
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
+      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;
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+      this._loadMixin(BarnesHutMixin);
+    }
+    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(RepulsionMixin);
 
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
+      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;
 
-        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
-        var a = a_base / minimumDistance;
-        if (distance < 2 * minimumDistance) {
-          if (distance < 0.5 * minimumDistance) {
-            repulsingForce = 1.0;
-          }
-          else {
-            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
-          }
+      this._loadMixin(HierarchialRepulsionMixin);
+    }
+    else {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
+      this.barnesHutTree = undefined;
 
-          // amplify the repulsion for clusters.
-          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
-          repulsingForce = repulsingForce / distance;
+      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;
 
-          fx = dx * repulsingForce;
-          fy = dy * repulsingForce;
+      this._loadMixin(RepulsionMixin);
+    }
+  };
 
-          node1.fx -= fx;
-          node1.fy -= fy;
-          node2.fx += fx;
-          node2.fy += fy;
-        }
+  /**
+   * 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);
       }
+
+      // we now start the force calculation
+      this._calculateForces();
     }
   };
 
 
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
-
   /**
-   * Calculate the forces the nodes apply on eachother based on a repulsion field.
-   * This field is linearly approximated.
-   *
+   * Calculate the external forces acting on the nodes
+   * Forces are caused by: edges, repulsing forces between nodes, gravity
    * @private
    */
-  exports._calculateNodeForces = function () {
-    var dx, dy, distance, fx, fy, combinedClusterSize,
-      repulsingForce, node1, node2, i, j;
-
-    var nodes = this.calculationNodes;
-    var nodeIndices = this.calculationNodeIndices;
+  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
 
-    // approximation constants
-    var b = 5;
-    var a_base = 0.5 * -b;
+    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();
+        }
+      }
+    }
+  };
 
-    // repulsing forces between nodes
-    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
-    var minimumDistance = nodeDistance;
-    var a = a_base / minimumDistance;
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length - 1; i++) {
+  /**
+   * 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.
+   *
+   * @private
+   */
+  exports._updateCalculationNodes = function () {
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      this.calculationNodes = {};
+      this.calculationNodeIndices = [];
 
-      node1 = nodes[nodeIndices[i]];
-      for (j = i + 1; j < nodeIndices.length; j++) {
-        node2 = nodes[nodeIndices[j]];
-        if (node1.level == node2.level) {
+      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);
+          }
+        }
+      }
 
-          dx = node2.x - node1.x;
-          dy = node2.y - node1.y;
-          distance = Math.sqrt(dx * dx + dy * dy);
+      for (var idx in this.calculationNodes) {
+        if (this.calculationNodes.hasOwnProperty(idx)) {
+          this.calculationNodeIndices.push(idx);
+        }
+      }
+    }
+    else {
+      this.calculationNodes = this.nodes;
+      this.calculationNodeIndices = this.nodeIndices;
+    }
+  };
 
 
-          if (distance < 2 * minimumDistance) {
-            repulsingForce = a * distance + b;
-            var c = 0.05;
-            var d = 2 * minimumDistance * 2 * c;
-            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
+  /**
+   * 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;
 
-            // normalize force with
-            if (distance == 0) {
-              distance = 0.01;
-            }
-            else {
-              repulsingForce = repulsingForce / distance;
-            }
-            fx = dx * repulsingForce;
-            fy = dy * repulsingForce;
+    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);
 
-            node1.fx -= fx;
-            node1.fy -= fy;
-            node2.fx += fx;
-            node2.fy += fy;
-          }
-        }
+        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.
    *
    * @private
    */
-  exports._calculateHierarchicalSpringForces = function () {
+  exports._calculateSpringForces = function () {
     var edgeLength, edge, edgeId;
     var dx, dy, fx, fy, springForce, distance;
     var edges = this.edges;
@@ -30139,7415 +32735,4828 @@ return /******/ (function(modules) { // webpackBootstrap
               distance = 0.01;
             }
 
-            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
-
             // 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.to.fx -= fx;
-            edge.to.fy -= fy;
             edge.from.fx += fx;
             edge.from.fy += fy;
-
-
-            var factor = 5;
-            if (distance > edgeLength) {
-              factor = 25;
-            }
-
-            if (edge.from.level > edge.to.level) {
-              edge.to.fx -= factor*fx;
-              edge.to.fy -= factor*fy;
-            }
-            else if (edge.from.level < edge.to.level) {
-              edge.from.fx += factor*fx;
-              edge.from.fy += factor*fy;
-            }
+            edge.to.fx -= fx;
+            edge.to.fy -= fy;
           }
         }
       }
     }
   };
 
-/***/ },
-/* 54 */
-/***/ function(module, exports, __webpack_require__) {
+
+
 
   /**
-   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
-   * The Barnes Hut method is used to speed up this N-body simulation.
+   * This function calculates the springforces on the nodes, accounting for the support nodes.
    *
    * @private
    */
-  exports._calculateNodeForces = function() {
-    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
-      var node;
-      var nodes = this.calculationNodes;
-      var nodeIndices = this.calculationNodeIndices;
-      var nodeCount = nodeIndices.length;
+  exports._calculateSpringForcesWithSupport = function () {
+    var edgeLength, edge, edgeId, combinedClusterSize;
+    var edges = this.edges;
 
-      this._formBarnesHutTree(nodes,nodeIndices);
+    // 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;
 
-      var barnesHutTree = this.barnesHutTree;
+              edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
 
-      // place the nodes one by one recursively
-      for (var i = 0; i < nodeCount; i++) {
-        node = nodes[nodeIndices[i]];
-        // starting with root is irrelevant, it never passes the BarnesHut condition
-        this._getForceContribution(barnesHutTree.root.children.NW,node);
-        this._getForceContribution(barnesHutTree.root.children.NE,node);
-        this._getForceContribution(barnesHutTree.root.children.SW,node);
-        this._getForceContribution(barnesHutTree.root.children.SE,node);
+              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+
+              // 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);
+            }
+          }
+        }
       }
     }
   };
 
 
   /**
-   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
-   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
    *
-   * @param parentBranch
-   * @param node
+   * @param node1
+   * @param node2
+   * @param edgeLength
    * @private
    */
-  exports._getForceContribution = function(parentBranch,node) {
-    // we get no force contribution from an empty region
-    if (parentBranch.childrenCount > 0) {
-      var dx,dy,distance;
+  exports._calculateSpringForce = function (node1, node2, edgeLength) {
+    var dx, dy, fx, fy, springForce, distance;
 
-      // get the distance from the center of mass to the node.
-      dx = parentBranch.centerOfMass.x - node.x;
-      dy = parentBranch.centerOfMass.y - node.y;
-      distance = Math.sqrt(dx * dx + dy * dy);
+    dx = (node1.x - node2.x);
+    dy = (node1.y - node2.y);
+    distance = Math.sqrt(dx * dx + dy * dy);
 
-      // BarnesHut condition
-      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
-      // calcSize = 1/s --> d * 1/s > 1/theta = passed
-      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
-        // duplicate code to reduce function calls to speed up program
-        if (distance == 0) {
-          distance = 0.1*Math.random();
-          dx = distance;
-        }
-        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-        var fx = dx * gravityForce;
-        var fy = dy * gravityForce;
-        node.fx += fx;
-        node.fy += fy;
-      }
-      else {
-        // Did not pass the condition, go into children if available
-        if (parentBranch.childrenCount == 4) {
-          this._getForceContribution(parentBranch.children.NW,node);
-          this._getForceContribution(parentBranch.children.NE,node);
-          this._getForceContribution(parentBranch.children.SW,node);
-          this._getForceContribution(parentBranch.children.SE,node);
-        }
-        else { // parentBranch must have only one node, if it was empty we wouldnt be here
-          if (parentBranch.children.data.id != node.id) { // if it is not self
-            // duplicate code to reduce function calls to speed up program
-            if (distance == 0) {
-              distance = 0.5*Math.random();
-              dx = distance;
-            }
-            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
-            var fx = dx * gravityForce;
-            var fy = dy * gravityForce;
-            node.fx += fx;
-            node.fy += fy;
-          }
-        }
-      }
+    if (distance == 0) {
+      distance = 0.01;
     }
+
+    // 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;
+
+    node1.fx += fx;
+    node1.fy += fy;
+    node2.fx -= fx;
+    node2.fy -= fy;
   };
 
+
   /**
-   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
-   *
-   * @param nodes
-   * @param nodeIndices
+   * Load the HTML for the physics config and bind it
    * @private
    */
-  exports._formBarnesHutTree = function(nodes,nodeIndices) {
-    var node;
-    var nodeCount = nodeIndices.length;
+  exports._loadPhysicsConfiguration = function () {
+    if (this.physicsConfiguration === undefined) {
+      this.backupConstants = {};
+      util.deepExtend(this.backupConstants,this.constants);
 
-    var minX = Number.MAX_VALUE,
-      minY = Number.MAX_VALUE,
-      maxX =-Number.MAX_VALUE,
-      maxY =-Number.MAX_VALUE;
+      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);
 
-    // get the range of the nodes
-    for (var i = 0; i < nodeCount; i++) {
-      var x = nodes[nodeIndices[i]].x;
-      var y = nodes[nodeIndices[i]].y;
-      if (x < minX) { minX = x; }
-      if (x > maxX) { maxX = x; }
-      if (y < minY) { minY = y; }
-      if (y > maxY) { maxY = y; }
-    }
-    // make the range a square
-    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
-    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
-    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
+      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");
 
+      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 minimumTreeSize = 1e-5;
-    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
-    var halfRootSize = 0.5 * rootSize;
-    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+      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");
 
-    // construct the barnesHutTree
-    var barnesHutTree = {
-      root:{
-        centerOfMass: {x:0, y:0},
-        mass:0,
-        range: {
-          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
-          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
-        },
-        size: rootSize,
-        calcSize: 1 / rootSize,
-        children: { data:null},
-        maxWidth: 0,
-        level: 0,
-        childrenCount: 4
+      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;
       }
-    };
-    this._splitBranch(barnesHutTree.root);
 
-    // place the nodes one by one recursively
-    for (i = 0; i < nodeCount; i++) {
-      node = nodes[nodeIndices[i]];
-      this._placeInTree(barnesHutTree.root,node);
-    }
+      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
+      var graph_generateOptions = document.getElementById("graph_generateOptions");
 
-    // make global
-    this.barnesHutTree = barnesHutTree
-  };
+      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";
+      }
 
 
+      switchConfigurations.apply(this);
+
+      radioButton1.onchange = switchConfigurations.bind(this);
+      radioButton2.onchange = switchConfigurations.bind(this);
+      radioButton3.onchange = switchConfigurations.bind(this);
+    }
+  };
+
   /**
-   * this updates the mass of a branch. this is increased by adding a node.
+   * This overwrites the this.constants.
    *
-   * @param parentBranch
-   * @param node
+   * @param constantsVariableName
+   * @param value
    * @private
    */
-  exports._updateBranchMass = function(parentBranch, node) {
-    var totalMass = parentBranch.mass + node.mass;
-    var totalMassInv = 1/totalMass;
-
-    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
-    parentBranch.centerOfMass.x *= totalMassInv;
-
-    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
-    parentBranch.centerOfMass.y *= totalMassInv;
+  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;
+    }
+  };
 
-    parentBranch.mass = totalMass;
-    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
-    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
 
-  };
+  /**
+   * 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);
+  }
 
   /**
-   * determine in which branch the node will be placed.
+   * this function is used to scramble the nodes
    *
-   * @param parentBranch
-   * @param node
-   * @param skipMassUpdate
-   * @private
    */
-  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
-    if (skipMassUpdate != true || skipMassUpdate === undefined) {
-      // update the mass of the branch.
-      this._updateBranchMass(parentBranch,node);
+  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();
     }
+    else {
+      this.repositionNodes();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
-        this._placeInRegion(parentBranch,node,"NW");
+  /**
+   *  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 += '}}'
       }
-      else { // in SW
-        this._placeInRegion(parentBranch,node,"SW");
+      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 { // in NE or SE
-      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
-        this._placeInRegion(parentBranch,node,"NE");
+    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 { // in SE
-        this._placeInRegion(parentBranch,node,"SE");
+      else {
+        options += "enabled:true}";
       }
+      options += '};'
     }
-  };
 
 
+    this.optionsDiv.innerHTML = options;
+  }
+
   /**
-   * actually place the node in a region (or branch)
+   * this is used to switch between barnesHut, repulsion and hierarchical.
    *
-   * @param parentBranch
-   * @param node
-   * @param region
-   * @private
    */
-  exports._placeInRegion = function(parentBranch,node,region) {
-    switch (parentBranch.children[region].childrenCount) {
-      case 0: // place node here
-        parentBranch.children[region].children.data = node;
-        parentBranch.children[region].childrenCount = 1;
-        this._updateBranchMass(parentBranch.children[region],node);
-        break;
-      case 1: // convert into children
-        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
-        // we move one node a pixel and we do not put it in the tree.
-        if (parentBranch.children[region].children.data.x == node.x &&
-            parentBranch.children[region].children.data.y == node.y) {
-          node.x += Math.random();
-          node.y += Math.random();
-        }
-        else {
-          this._splitBranch(parentBranch.children[region]);
-          this._placeInTree(parentBranch.children[region],node);
-        }
-        break;
-      case 4: // place in branch
-        this._placeInTree(parentBranch.children[region],node);
-        break;
+  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();
+  }
 
 
   /**
-   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
-   * after the split is complete.
+   * this generates the ranges depending on the iniital values.
    *
-   * @param parentBranch
-   * @private
+   * @param id
+   * @param map
+   * @param constantsVariableName
    */
-  exports._splitBranch = function(parentBranch) {
-    // if the branch is shaded with a node, replace the node in the new subset.
-    var containedNode = null;
-    if (parentBranch.childrenCount == 1) {
-      containedNode = parentBranch.children.data;
-      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+  function showValueOfRange (id,map,constantsVariableName) {
+    var valueId = id + "_value";
+    var rangeValue = document.getElementById(id).value;
+
+    if (map instanceof Array) {
+      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));
     }
-    parentBranch.childrenCount = 4;
-    parentBranch.children.data = null;
-    this._insertRegion(parentBranch,"NW");
-    this._insertRegion(parentBranch,"NE");
-    this._insertRegion(parentBranch,"SW");
-    this._insertRegion(parentBranch,"SE");
 
-    if (containedNode != null) {
-      this._placeInTree(parentBranch,containedNode);
+    if (constantsVariableName == "hierarchicalLayout_direction" ||
+      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
+      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
+      this._setupHierarchicalLayout();
     }
-  };
+    this.moving = true;
+    this.start();
+  }
+
 
+/***/ },
+/* 121 */
+/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * This function subdivides the region into four new segments.
-   * Specifically, this inserts a single new segment.
-   * It fills the children section of the parentBranch
+   * Calculate the forces the nodes apply on each other based on a repulsion field.
+   * This field is linearly approximated.
    *
-   * @param parentBranch
-   * @param region
-   * @param parentRange
    * @private
    */
-  exports._insertRegion = function(parentBranch, region) {
-    var minX,maxX,minY,maxY;
-    var childSize = 0.5 * parentBranch.size;
-    switch (region) {
-      case "NW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "NE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY;
-        maxY = parentBranch.range.minY + childSize;
-        break;
-      case "SW":
-        minX = parentBranch.range.minX;
-        maxX = parentBranch.range.minX + childSize;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-      case "SE":
-        minX = parentBranch.range.minX + childSize;
-        maxX = parentBranch.range.maxX;
-        minY = parentBranch.range.minY + childSize;
-        maxY = parentBranch.range.maxY;
-        break;
-    }
+  exports._calculateNodeForces = function () {
+    var dx, dy, angle, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
 
-    parentBranch.children[region] = {
-      centerOfMass:{x:0,y:0},
-      mass:0,
-      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
-      size: 0.5 * parentBranch.size,
-      calcSize: 2 * parentBranch.calcSize,
-      children: {data:null},
-      maxWidth: 0,
-      level: parentBranch.level+1,
-      childrenCount: 0
-    };
-  };
+    // approximation constants
+    var a_base = -2 / 3;
+    var b = 4 / 3;
 
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.repulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
 
-  /**
-   * This function is for debugging purposed, it draws the tree.
-   *
-   * @param ctx
-   * @param color
-   * @private
-   */
-  exports._drawTree = function(ctx,color) {
-    if (this.barnesHutTree !== undefined) {
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
 
-      ctx.lineWidth = 1;
+        dx = node2.x - node1.x;
+        dy = node2.y - node1.y;
+        distance = Math.sqrt(dx * dx + dy * dy);
 
-      this._drawBranch(this.barnesHutTree.root,ctx,color);
+        minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
+        var a = a_base / minimumDistance;
+        if (distance < 2 * minimumDistance) {
+          if (distance < 0.5 * minimumDistance) {
+            repulsingForce = 1.0;
+          }
+          else {
+            repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+          }
+
+          // amplify the repulsion for clusters.
+          repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
+          repulsingForce = repulsingForce / distance;
+
+          fx = dx * repulsingForce;
+          fy = dy * repulsingForce;
+
+          node1.fx -= fx;
+          node1.fy -= fy;
+          node2.fx += fx;
+          node2.fy += fy;
+        }
+      }
     }
   };
 
 
+/***/ },
+/* 122 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * This function is for debugging purposes. It draws the branches recursively.
+   * Calculate the forces the nodes apply on eachother based on a repulsion field.
+   * This field is linearly approximated.
    *
-   * @param branch
-   * @param ctx
-   * @param color
    * @private
    */
-  exports._drawBranch = function(branch,ctx,color) {
-    if (color === undefined) {
-      color = "#FF0000";
-    }
-
-    if (branch.childrenCount == 4) {
-      this._drawBranch(branch.children.NW,ctx);
-      this._drawBranch(branch.children.NE,ctx);
-      this._drawBranch(branch.children.SE,ctx);
-      this._drawBranch(branch.children.SW,ctx);
-    }
-    ctx.strokeStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.minY);
-    ctx.stroke();
+  exports._calculateNodeForces = function () {
+    var dx, dy, distance, fx, fy, combinedClusterSize,
+      repulsingForce, node1, node2, i, j;
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.minY);
-    ctx.lineTo(branch.range.maxX,branch.range.maxY);
-    ctx.stroke();
+    var nodes = this.calculationNodes;
+    var nodeIndices = this.calculationNodeIndices;
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.maxX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.maxY);
-    ctx.stroke();
+    // approximation constants
+    var b = 5;
+    var a_base = 0.5 * -b;
 
-    ctx.beginPath();
-    ctx.moveTo(branch.range.minX,branch.range.maxY);
-    ctx.lineTo(branch.range.minX,branch.range.minY);
-    ctx.stroke();
 
-    /*
-     if (branch.mass > 0) {
-     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
-     ctx.stroke();
-     }
-     */
-  };
+    // repulsing forces between nodes
+    var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+    var minimumDistance = nodeDistance;
+    var a = a_base / minimumDistance;
 
+    // we loop from i over all but the last entree in the array
+    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+    for (i = 0; i < nodeIndices.length - 1; i++) {
 
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
+      node1 = nodes[nodeIndices[i]];
+      for (j = i + 1; j < nodeIndices.length; j++) {
+        node2 = nodes[nodeIndices[j]];
+        if (node1.level == node2.level) {
 
-  var map = {
-  	"./ar": 58,
-  	"./ar-ma": 56,
-  	"./ar-ma.js": 56,
-  	"./ar-sa": 57,
-  	"./ar-sa.js": 57,
-  	"./ar.js": 58,
-  	"./az": 59,
-  	"./az.js": 59,
-  	"./bg": 60,
-  	"./bg.js": 60,
-  	"./bn": 61,
-  	"./bn.js": 61,
-  	"./br": 62,
-  	"./br.js": 62,
-  	"./bs": 63,
-  	"./bs.js": 63,
-  	"./ca": 64,
-  	"./ca.js": 64,
-  	"./cs": 65,
-  	"./cs.js": 65,
-  	"./cv": 66,
-  	"./cv.js": 66,
-  	"./cy": 67,
-  	"./cy.js": 67,
-  	"./da": 68,
-  	"./da.js": 68,
-  	"./de": 70,
-  	"./de-at": 69,
-  	"./de-at.js": 69,
-  	"./de.js": 70,
-  	"./el": 71,
-  	"./el.js": 71,
-  	"./en-au": 72,
-  	"./en-au.js": 72,
-  	"./en-ca": 73,
-  	"./en-ca.js": 73,
-  	"./en-gb": 74,
-  	"./en-gb.js": 74,
-  	"./eo": 75,
-  	"./eo.js": 75,
-  	"./es": 76,
-  	"./es.js": 76,
-  	"./et": 77,
-  	"./et.js": 77,
-  	"./eu": 78,
-  	"./eu.js": 78,
-  	"./fa": 79,
-  	"./fa.js": 79,
-  	"./fi": 80,
-  	"./fi.js": 80,
-  	"./fo": 81,
-  	"./fo.js": 81,
-  	"./fr": 83,
-  	"./fr-ca": 82,
-  	"./fr-ca.js": 82,
-  	"./fr.js": 83,
-  	"./gl": 84,
-  	"./gl.js": 84,
-  	"./he": 85,
-  	"./he.js": 85,
-  	"./hi": 86,
-  	"./hi.js": 86,
-  	"./hr": 87,
-  	"./hr.js": 87,
-  	"./hu": 88,
-  	"./hu.js": 88,
-  	"./hy-am": 89,
-  	"./hy-am.js": 89,
-  	"./id": 90,
-  	"./id.js": 90,
-  	"./is": 91,
-  	"./is.js": 91,
-  	"./it": 92,
-  	"./it.js": 92,
-  	"./ja": 93,
-  	"./ja.js": 93,
-  	"./ka": 94,
-  	"./ka.js": 94,
-  	"./km": 95,
-  	"./km.js": 95,
-  	"./ko": 96,
-  	"./ko.js": 96,
-  	"./lb": 97,
-  	"./lb.js": 97,
-  	"./lt": 98,
-  	"./lt.js": 98,
-  	"./lv": 99,
-  	"./lv.js": 99,
-  	"./mk": 100,
-  	"./mk.js": 100,
-  	"./ml": 101,
-  	"./ml.js": 101,
-  	"./mr": 102,
-  	"./mr.js": 102,
-  	"./ms-my": 103,
-  	"./ms-my.js": 103,
-  	"./nb": 104,
-  	"./nb.js": 104,
-  	"./ne": 105,
-  	"./ne.js": 105,
-  	"./nl": 106,
-  	"./nl.js": 106,
-  	"./nn": 107,
-  	"./nn.js": 107,
-  	"./pl": 108,
-  	"./pl.js": 108,
-  	"./pt": 110,
-  	"./pt-br": 109,
-  	"./pt-br.js": 109,
-  	"./pt.js": 110,
-  	"./ro": 111,
-  	"./ro.js": 111,
-  	"./ru": 112,
-  	"./ru.js": 112,
-  	"./sk": 113,
-  	"./sk.js": 113,
-  	"./sl": 114,
-  	"./sl.js": 114,
-  	"./sq": 115,
-  	"./sq.js": 115,
-  	"./sr": 117,
-  	"./sr-cyrl": 116,
-  	"./sr-cyrl.js": 116,
-  	"./sr.js": 117,
-  	"./sv": 118,
-  	"./sv.js": 118,
-  	"./ta": 119,
-  	"./ta.js": 119,
-  	"./th": 120,
-  	"./th.js": 120,
-  	"./tl-ph": 121,
-  	"./tl-ph.js": 121,
-  	"./tr": 122,
-  	"./tr.js": 122,
-  	"./tzm": 124,
-  	"./tzm-latn": 123,
-  	"./tzm-latn.js": 123,
-  	"./tzm.js": 124,
-  	"./uk": 125,
-  	"./uk.js": 125,
-  	"./uz": 126,
-  	"./uz.js": 126,
-  	"./vi": 127,
-  	"./vi.js": 127,
-  	"./zh-cn": 128,
-  	"./zh-cn.js": 128,
-  	"./zh-tw": 129,
-  	"./zh-tw.js": 129
-  };
-  function webpackContext(req) {
-  	return __webpack_require__(webpackContextResolve(req));
-  };
-  function webpackContextResolve(req) {
-  	return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
-  };
-  webpackContext.keys = function webpackContextKeys() {
-  	return Object.keys(map);
-  };
-  webpackContext.resolve = webpackContextResolve;
-  module.exports = webpackContext;
+          dx = node2.x - node1.x;
+          dy = node2.y - node1.y;
+          distance = Math.sqrt(dx * dx + dy * dy);
 
 
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
+          if (distance < 2 * minimumDistance) {
+            repulsingForce = a * distance + b;
+            var c = 0.05;
+            var d = 2 * minimumDistance * 2 * c;
+            repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Moroccan Arabic (ar-ma)
-  // author : ElFadili Yassine : https://github.com/ElFadiliY
-  // author : Abdel Said : https://github.com/abdelsaid
+            // normalize force with
+            if (distance == 0) {
+              distance = 0.01;
+            }
+            else {
+              repulsingForce = repulsingForce / distance;
+            }
+            fx = dx * repulsingForce;
+            fy = dy * repulsingForce;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ar-ma', {
-          months : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_ماي_يونيو_يوليوز_غشت_شتنبر_أكتوبر_نونبر_دجنبر".split("_"),
-          weekdays : "الأحد_الإتنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "احد_اتنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
+            node1.fx -= fx;
+            node1.fy -= fy;
+            node2.fx += fx;
+            node2.fy += fy;
           }
-      });
-  }));
+        }
+      }
+    }
+  };
 
 
-/***/ },
-/* 57 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * this function calculates the effects of the springs in the case of unsmooth curves.
+   *
+   * @private
+   */
+  exports._calculateHierarchicalSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    var edges = this.edges;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic Saudi Arabia (ar-sa)
-  // author : Suhail Alkowaileet : https://github.com/xsoh
+    // 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.customLength ? edge.length : this.constants.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
-      return moment.lang('ar-sa', {
-          months : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          monthsShort : "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+            if (distance == 0) {
+              distance = 0.01;
+            }
+
+            distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
+
+            // 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.to.fx -= fx;
+            edge.to.fy -= fy;
+            edge.from.fx += fx;
+            edge.from.fy += fy;
+
+
+            var factor = 5;
+            if (distance > edgeLength) {
+              factor = 25;
+            }
 
+            if (edge.from.level > edge.to.level) {
+              edge.to.fx -= factor*fx;
+              edge.to.fy -= factor*fy;
+            }
+            else if (edge.from.level < edge.to.level) {
+              edge.from.fx += factor*fx;
+              edge.from.fy += factor*fy;
+            }
+          }
+        }
+      }
+    }
+  };
 
 /***/ },
-/* 58 */
+/* 123 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Arabic (ar)
-  // author : Abdel Said : https://github.com/abdelsaid
-  // changes in months, weekdays : Ahmed Elkhatib
+  /**
+   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+   * The Barnes Hut method is used to speed up this N-body simulation.
+   *
+   * @private
+   */
+  exports._calculateNodeForces = function() {
+    if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
+      var node;
+      var nodes = this.calculationNodes;
+      var nodeIndices = this.calculationNodeIndices;
+      var nodeCount = nodeIndices.length;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      this._formBarnesHutTree(nodes,nodeIndices);
+
+      var barnesHutTree = this.barnesHutTree;
+
+      // place the nodes one by one recursively
+      for (var i = 0; i < nodeCount; i++) {
+        node = nodes[nodeIndices[i]];
+        // starting with root is irrelevant, it never passes the BarnesHut condition
+        this._getForceContribution(barnesHutTree.root.children.NW,node);
+        this._getForceContribution(barnesHutTree.root.children.NE,node);
+        this._getForceContribution(barnesHutTree.root.children.SW,node);
+        this._getForceContribution(barnesHutTree.root.children.SE,node);
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '١',
-          '2': '٢',
-          '3': '٣',
-          '4': '٤',
-          '5': '٥',
-          '6': '٦',
-          '7': '٧',
-          '8': '٨',
-          '9': '٩',
-          '0': '٠'
-      }, numberMap = {
-          '١': '1',
-          '٢': '2',
-          '٣': '3',
-          '٤': '4',
-          '٥': '5',
-          '٦': '6',
-          '٧': '7',
-          '٨': '8',
-          '٩': '9',
-          '٠': '0'
-      };
+    }
+  };
 
-      return moment.lang('ar', {
-          months : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          monthsShort : "يناير/ كانون الثاني_فبراير/ شباط_مارس/ آذار_أبريل/ نيسان_مايو/ أيار_يونيو/ حزيران_يوليو/ تموز_أغسطس/ آب_سبتمبر/ أيلول_أكتوبر/ تشرين الأول_نوفمبر/ تشرين الثاني_ديسمبر/ كانون الأول".split("_"),
-          weekdays : "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
-          weekdaysShort : "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
-          weekdaysMin : "ح_ن_ث_ر_خ_ج_س".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ص";
-              } else {
-                  return "م";
-              }
-          },
-          calendar : {
-              sameDay: "[اليوم على الساعة] LT",
-              nextDay: '[غدا على الساعة] LT',
-              nextWeek: 'dddd [على الساعة] LT',
-              lastDay: '[أمس على الساعة] LT',
-              lastWeek: 'dddd [على الساعة] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "في %s",
-              past : "منذ %s",
-              s : "ثوان",
-              m : "دقيقة",
-              mm : "%d دقائق",
-              h : "ساعة",
-              hh : "%d ساعات",
-              d : "يوم",
-              dd : "%d أيام",
-              M : "شهر",
-              MM : "%d أشهر",
-              y : "سنة",
-              yy : "%d سنوات"
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
+
+  /**
+   * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+   * If a region contains a single node, we check if it is not itself, then we apply the force.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._getForceContribution = function(parentBranch,node) {
+    // we get no force contribution from an empty region
+    if (parentBranch.childrenCount > 0) {
+      var dx,dy,distance;
+
+      // get the distance from the center of mass to the node.
+      dx = parentBranch.centerOfMass.x - node.x;
+      dy = parentBranch.centerOfMass.y - node.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
+
+      // BarnesHut condition
+      // original condition : s/d < theta = passed  ===  d/s > 1/theta = passed
+      // calcSize = 1/s --> d * 1/s > 1/theta = passed
+      if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
+        // duplicate code to reduce function calls to speed up program
+        if (distance == 0) {
+          distance = 0.1*Math.random();
+          dx = distance;
+        }
+        var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+        var fx = dx * gravityForce;
+        var fy = dy * gravityForce;
+        node.fx += fx;
+        node.fy += fy;
+      }
+      else {
+        // Did not pass the condition, go into children if available
+        if (parentBranch.childrenCount == 4) {
+          this._getForceContribution(parentBranch.children.NW,node);
+          this._getForceContribution(parentBranch.children.NE,node);
+          this._getForceContribution(parentBranch.children.SW,node);
+          this._getForceContribution(parentBranch.children.SE,node);
+        }
+        else { // parentBranch must have only one node, if it was empty we wouldnt be here
+          if (parentBranch.children.data.id != node.id) { // if it is not self
+            // duplicate code to reduce function calls to speed up program
+            if (distance == 0) {
+              distance = 0.5*Math.random();
+              dx = distance;
+            }
+            var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
+            var fx = dx * gravityForce;
+            var fy = dy * gravityForce;
+            node.fx += fx;
+            node.fy += fy;
           }
-      });
-  }));
+        }
+      }
+    }
+  };
 
+  /**
+   * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+   *
+   * @param nodes
+   * @param nodeIndices
+   * @private
+   */
+  exports._formBarnesHutTree = function(nodes,nodeIndices) {
+    var node;
+    var nodeCount = nodeIndices.length;
 
-/***/ },
-/* 59 */
-/***/ function(module, exports, __webpack_require__) {
+    var minX = Number.MAX_VALUE,
+      minY = Number.MAX_VALUE,
+      maxX =-Number.MAX_VALUE,
+      maxY =-Number.MAX_VALUE;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : azerbaijani (az)
-  // author : topchiyev : https://github.com/topchiyev
+    // get the range of the nodes
+    for (var i = 0; i < nodeCount; i++) {
+      var x = nodes[nodeIndices[i]].x;
+      var y = nodes[nodeIndices[i]].y;
+      if (x < minX) { minX = x; }
+      if (x > maxX) { maxX = x; }
+      if (y < minY) { minY = y; }
+      if (y > maxY) { maxY = y; }
+    }
+    // make the range a square
+    var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+    if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
+    else              {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+    var minimumTreeSize = 1e-5;
+    var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
+    var halfRootSize = 0.5 * rootSize;
+    var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+    // construct the barnesHutTree
+    var barnesHutTree = {
+      root:{
+        centerOfMass: {x:0, y:0},
+        mass:0,
+        range: {
+          minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
+          minY: centerY-halfRootSize,maxY:centerY+halfRootSize
+        },
+        size: rootSize,
+        calcSize: 1 / rootSize,
+        children: { data:null},
+        maxWidth: 0,
+        level: 0,
+        childrenCount: 4
       }
-  }(function (moment) {
+    };
+    this._splitBranch(barnesHutTree.root);
 
-      var suffixes = {
-          1: "-inci",
-          5: "-inci",
-          8: "-inci",
-          70: "-inci",
-          80: "-inci",
+    // place the nodes one by one recursively
+    for (i = 0; i < nodeCount; i++) {
+      node = nodes[nodeIndices[i]];
+      this._placeInTree(barnesHutTree.root,node);
+    }
 
-          2: "-nci",
-          7: "-nci",
-          20: "-nci",
-          50: "-nci",
+    // make global
+    this.barnesHutTree = barnesHutTree
+  };
 
-          3: "-üncü",
-          4: "-üncü",
-          100: "-üncü",
 
-          6: "-ncı",
+  /**
+   * this updates the mass of a branch. this is increased by adding a node.
+   *
+   * @param parentBranch
+   * @param node
+   * @private
+   */
+  exports._updateBranchMass = function(parentBranch, node) {
+    var totalMass = parentBranch.mass + node.mass;
+    var totalMassInv = 1/totalMass;
 
-          9: "-uncu",
-          10: "-uncu",
-          30: "-uncu",
+    parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
+    parentBranch.centerOfMass.x *= totalMassInv;
 
-          60: "-ıncı",
-          90: "-ıncı"
-      };
-      return moment.lang('az', {
-          months : "yanvar_fevral_mart_aprel_may_iyun_iyul_avqust_sentyabr_oktyabr_noyabr_dekabr".split("_"),
-          monthsShort : "yan_fev_mar_apr_may_iyn_iyl_avq_sen_okt_noy_dek".split("_"),
-          weekdays : "Bazar_Bazar ertəsi_Çərşənbə axşamı_Çərşənbə_Cümə axşamı_Cümə_Şənbə".split("_"),
-          weekdaysShort : "Baz_BzE_ÇAx_Çər_CAx_Cüm_Şən".split("_"),
-          weekdaysMin : "Bz_BE_ÇA_Çə_CA_Cü_Şə".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[sabah saat] LT',
-              nextWeek : '[gələn həftə] dddd [saat] LT',
-              lastDay : '[dünən] LT',
-              lastWeek : '[keçən həftə] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s əvvəl",
-              s : "birneçə saniyyə",
-              m : "bir dəqiqə",
-              mm : "%d dəqiqə",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir il",
-              yy : "%d il"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "gecə";
-              } else if (hour < 12) {
-                  return "səhər";
-              } else if (hour < 17) {
-                  return "gündüz";
-              } else {
-                  return "axşam";
-              }
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "-ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+    parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
+    parentBranch.centerOfMass.y *= totalMassInv;
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    parentBranch.mass = totalMass;
+    var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
+    parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
 
+  };
 
-/***/ },
-/* 60 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bulgarian (bg)
-  // author : Krasen Borisov : https://github.com/kraz
+  /**
+   * determine in which branch the node will be placed.
+   *
+   * @param parentBranch
+   * @param node
+   * @param skipMassUpdate
+   * @private
+   */
+  exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
+    if (skipMassUpdate != true || skipMassUpdate === undefined) {
+      // update the mass of the branch.
+      this._updateBranchMass(parentBranch,node);
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+        this._placeInRegion(parentBranch,node,"NW");
       }
-  }(function (moment) {
-      return moment.lang('bg', {
-          months : "януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "неделя_понеделник_вторник_сряда_четвъртък_петък_събота".split("_"),
-          weekdaysShort : "нед_пон_вто_сря_чет_пет_съб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Днес в] LT',
-              nextDay : '[Утре в] LT',
-              nextWeek : 'dddd [в] LT',
-              lastDay : '[Вчера в] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[В изминалата] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[В изминалия] dddd [в] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "след %s",
-              past : "преди %s",
-              s : "няколко секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дни",
-              M : "месец",
-              MM : "%d месеца",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      else { // in SW
+        this._placeInRegion(parentBranch,node,"SW");
+      }
+    }
+    else { // in NE or SE
+      if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+        this._placeInRegion(parentBranch,node,"NE");
+      }
+      else { // in SE
+        this._placeInRegion(parentBranch,node,"SE");
+      }
+    }
+  };
+
+
+  /**
+   * actually place the node in a region (or branch)
+   *
+   * @param parentBranch
+   * @param node
+   * @param region
+   * @private
+   */
+  exports._placeInRegion = function(parentBranch,node,region) {
+    switch (parentBranch.children[region].childrenCount) {
+      case 0: // place node here
+        parentBranch.children[region].children.data = node;
+        parentBranch.children[region].childrenCount = 1;
+        this._updateBranchMass(parentBranch.children[region],node);
+        break;
+      case 1: // convert into children
+        // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+        // we move one node a pixel and we do not put it in the tree.
+        if (parentBranch.children[region].children.data.x == node.x &&
+            parentBranch.children[region].children.data.y == node.y) {
+          node.x += Math.random();
+          node.y += Math.random();
+        }
+        else {
+          this._splitBranch(parentBranch.children[region]);
+          this._placeInTree(parentBranch.children[region],node);
+        }
+        break;
+      case 4: // place in branch
+        this._placeInTree(parentBranch.children[region],node);
+        break;
+    }
+  };
 
 
-/***/ },
-/* 61 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+   * after the split is complete.
+   *
+   * @param parentBranch
+   * @private
+   */
+  exports._splitBranch = function(parentBranch) {
+    // if the branch is shaded with a node, replace the node in the new subset.
+    var containedNode = null;
+    if (parentBranch.childrenCount == 1) {
+      containedNode = parentBranch.children.data;
+      parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+    }
+    parentBranch.childrenCount = 4;
+    parentBranch.children.data = null;
+    this._insertRegion(parentBranch,"NW");
+    this._insertRegion(parentBranch,"NE");
+    this._insertRegion(parentBranch,"SW");
+    this._insertRegion(parentBranch,"SE");
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bengali (bn)
-  // author : Kaushik Gandhi : https://github.com/kaushikgandhi
+    if (containedNode != null) {
+      this._placeInTree(parentBranch,containedNode);
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '১',
-          '2': '২',
-          '3': '৩',
-          '4': '৪',
-          '5': '৫',
-          '6': '৬',
-          '7': '৭',
-          '8': '৮',
-          '9': '৯',
-          '0': '০'
-      },
-      numberMap = {
-          '১': '1',
-          '২': '2',
-          '৩': '3',
-          '৪': '4',
-          '৫': '5',
-          '৬': '6',
-          '৭': '7',
-          '৮': '8',
-          '৯': '9',
-          '০': '0'
-      };
 
-      return moment.lang('bn', {
-          months : 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split("_"),
-          monthsShort : 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split("_"),
-          weekdays : 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রুবার_শনিবার'.split("_"),
-          weekdaysShort : 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্রু_শনি'.split("_"),
-          weekdaysMin : 'রব_সম_মঙ্গ_বু_ব্রিহ_শু_শনি'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm সময়",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[আজ] LT',
-              nextDay : '[আগামীকাল] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[গতকাল] LT',
-              lastWeek : '[গত] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s পরে",
-              past : "%s আগে",
-              s : "কএক সেকেন্ড",
-              m : "এক মিনিট",
-              mm : "%d মিনিট",
-              h : "এক ঘন্টা",
-              hh : "%d ঘন্টা",
-              d : "এক দিন",
-              dd : "%d দিন",
-              M : "এক মাস",
-              MM : "%d মাস",
-              y : "এক বছর",
-              yy : "%d বছর"
-          },
-          preparse: function (string) {
-              return string.replace(/[১২৩৪৫৬৭৮৯০]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          //Bengali is a vast language its spoken 
-          //in different forms in various parts of the world.
-          //I have just generalized with most common one used
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "রাত";
-              } else if (hour < 10) {
-                  return "শকাল";
-              } else if (hour < 17) {
-                  return "দুপুর";
-              } else if (hour < 20) {
-                  return "বিকেল";
-              } else {
-                  return "রাত";
-              }
-          },
-          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 subdivides the region into four new segments.
+   * Specifically, this inserts a single new segment.
+   * It fills the children section of the parentBranch
+   *
+   * @param parentBranch
+   * @param region
+   * @param parentRange
+   * @private
+   */
+  exports._insertRegion = function(parentBranch, region) {
+    var minX,maxX,minY,maxY;
+    var childSize = 0.5 * parentBranch.size;
+    switch (region) {
+      case "NW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "NE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY;
+        maxY = parentBranch.range.minY + childSize;
+        break;
+      case "SW":
+        minX = parentBranch.range.minX;
+        maxX = parentBranch.range.minX + childSize;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+      case "SE":
+        minX = parentBranch.range.minX + childSize;
+        maxX = parentBranch.range.maxX;
+        minY = parentBranch.range.minY + childSize;
+        maxY = parentBranch.range.maxY;
+        break;
+    }
 
 
-/***/ },
-/* 62 */
-/***/ function(module, exports, __webpack_require__) {
+    parentBranch.children[region] = {
+      centerOfMass:{x:0,y:0},
+      mass:0,
+      range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
+      size: 0.5 * parentBranch.size,
+      calcSize: 2 * parentBranch.calcSize,
+      children: {data:null},
+      maxWidth: 0,
+      level: parentBranch.level+1,
+      childrenCount: 0
+    };
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : breton (br)
-  // author : Jean-Baptiste Le Duigou : https://github.com/jbleduigou
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function relativeTimeWithMutation(number, withoutSuffix, key) {
-          var format = {
-              'mm': "munutenn",
-              'MM': "miz",
-              'dd': "devezh"
-          };
-          return number + ' ' + mutation(format[key], number);
-      }
+  /**
+   * This function is for debugging purposed, it draws the tree.
+   *
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawTree = function(ctx,color) {
+    if (this.barnesHutTree !== undefined) {
 
-      function specialMutationForYears(number) {
-          switch (lastNumber(number)) {
-          case 1:
-          case 3:
-          case 4:
-          case 5:
-          case 9:
-              return number + ' bloaz';
-          default:
-              return number + ' vloaz';
-          }
-      }
+      ctx.lineWidth = 1;
 
-      function lastNumber(number) {
-          if (number > 9) {
-              return lastNumber(number % 10);
-          }
-          return number;
-      }
+      this._drawBranch(this.barnesHutTree.root,ctx,color);
+    }
+  };
 
-      function mutation(text, number) {
-          if (number === 2) {
-              return softMutation(text);
-          }
-          return text;
-      }
 
-      function softMutation(text) {
-          var mutationTable = {
-              'm': 'v',
-              'b': 'v',
-              'd': 'z'
-          };
-          if (mutationTable[text.charAt(0)] === undefined) {
-              return text;
-          }
-          return mutationTable[text.charAt(0)] + text.substring(1);
-      }
+  /**
+   * This function is for debugging purposes. It draws the branches recursively.
+   *
+   * @param branch
+   * @param ctx
+   * @param color
+   * @private
+   */
+  exports._drawBranch = function(branch,ctx,color) {
+    if (color === undefined) {
+      color = "#FF0000";
+    }
 
-      return moment.lang('br', {
-          months : "Genver_C'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu".split("_"),
-          monthsShort : "Gen_C'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker".split("_"),
-          weekdays : "Sul_Lun_Meurzh_Merc'her_Yaou_Gwener_Sadorn".split("_"),
-          weekdaysShort : "Sul_Lun_Meu_Mer_Yao_Gwe_Sad".split("_"),
-          weekdaysMin : "Su_Lu_Me_Mer_Ya_Gw_Sa".split("_"),
-          longDateFormat : {
-              LT : "h[e]mm A",
-              L : "DD/MM/YYYY",
-              LL : "D [a viz] MMMM YYYY",
-              LLL : "D [a viz] MMMM YYYY LT",
-              LLLL : "dddd, D [a viz] MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Hiziv da] LT',
-              nextDay : '[Warc\'hoazh da] LT',
-              nextWeek : 'dddd [da] LT',
-              lastDay : '[Dec\'h da] LT',
-              lastWeek : 'dddd [paset da] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "a-benn %s",
-              past : "%s 'zo",
-              s : "un nebeud segondennoù",
-              m : "ur vunutenn",
-              mm : relativeTimeWithMutation,
-              h : "un eur",
-              hh : "%d eur",
-              d : "un devezh",
-              dd : relativeTimeWithMutation,
-              M : "ur miz",
-              MM : relativeTimeWithMutation,
-              y : "ur bloaz",
-              yy : specialMutationForYears
-          },
-          ordinal : function (number) {
-              var output = (number === 1) ? 'añ' : 'vet';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    if (branch.childrenCount == 4) {
+      this._drawBranch(branch.children.NW,ctx);
+      this._drawBranch(branch.children.NE,ctx);
+      this._drawBranch(branch.children.SE,ctx);
+      this._drawBranch(branch.children.SW,ctx);
+    }
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.minY);
+    ctx.stroke();
 
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.minY);
+    ctx.lineTo(branch.range.maxX,branch.range.maxY);
+    ctx.stroke();
 
-/***/ },
-/* 63 */
-/***/ function(module, exports, __webpack_require__) {
+    ctx.beginPath();
+    ctx.moveTo(branch.range.maxX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.maxY);
+    ctx.stroke();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : bosnian (bs)
-  // author : Nedim Cholich : https://github.com/frontyard
-  // based on (hr) translation by Bojan Marković
+    ctx.beginPath();
+    ctx.moveTo(branch.range.minX,branch.range.maxY);
+    ctx.lineTo(branch.range.minX,branch.range.minY);
+    ctx.stroke();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+    /*
+     if (branch.mass > 0) {
+     ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+     ctx.stroke();
+     }
+     */
+  };
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
-          }
-      }
 
-      return moment.lang('bs', {
-  		months : "januar_februar_mart_april_maj_juni_juli_avgust_septembar_oktobar_novembar_decembar".split("_"),
-  		monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
+/***/ },
+/* 124 */
+/***/ function(module, exports, __webpack_require__) {
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * Creation of the ClusterMixin var.
+   *
+   * This contains all the functions the Network object can use to employ clustering
+   */
+
+  /**
+  * 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);
+
+   // updates the lables after clustering
+   this.updateLabels();
 
+   // 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();
+  };
 
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : catalan (ca)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+    var maxLevels = 50;
+    var level = 0;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // we first cluster the hubs, then we pull in the outliers, repeat
+    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+      if (level % 3 == 0) {
+        this.forceAggregateHubs(true);
+        this.normalizeClusterLevels();
+      }
+      else {
+        this.increaseClusterLevel(); // this also includes a cluster normalization
       }
-  }(function (moment) {
-      return moment.lang('ca', {
-          months : "gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre".split("_"),
-          monthsShort : "gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.".split("_"),
-          weekdays : "diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte".split("_"),
-          weekdaysShort : "dg._dl._dt._dc._dj._dv._ds.".split("_"),
-          weekdaysMin : "Dg_Dl_Dt_Dc_Dj_Dv_Ds".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[avui a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextDay : function () {
-                  return '[demà a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ahir a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [passat a ' + ((this.hours() !== 1) ? 'les' : 'la') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "fa %s",
-              s : "uns segons",
-              m : "un minut",
-              mm : "%d minuts",
-              h : "una hora",
-              hh : "%d hores",
-              d : "un dia",
-              dd : "%d dies",
-              M : "un mes",
-              MM : "%d mesos",
-              y : "un any",
-              yy : "%d anys"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+      numberOfNodes = this.nodeIndices.length;
+      level += 1;
+    }
 
-/***/ },
-/* 65 */
-/***/ function(module, exports, __webpack_require__) {
+    // after the clustering we reposition the nodes to reduce the initial chaos
+    if (level > 0 && reposition == true) {
+      this.repositionNodes();
+    }
+    this._updateCalculationNodes();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : czech (cs)
-  // author : petrbela : https://github.com/petrbela
+  /**
+   * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // we decluster until we reach a decent number of nodes
+      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+        this.decreaseClusterLevel();
+        level += 1;
       }
-  }(function (moment) {
-      var months = "leden_únor_březen_duben_květen_červen_červenec_srpen_září_říjen_listopad_prosinec".split("_"),
-          monthsShort = "led_úno_bře_dub_kvě_čvn_čvc_srp_zář_říj_lis_pro".split("_");
 
-      function plural(n) {
-          return (n > 1) && (n < 5) && (~~(n / 10) !== 1);
-      }
+    }
+    else {
+      this._expandClusterNode(node,false,true);
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekund' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minuta' : (isFuture ? 'minutu' : 'minutou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minuty' : 'minut');
-              } else {
-                  return result + 'minutami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodin');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'den' : 'dnem';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dny' : 'dní');
-              } else {
-                  return result + 'dny';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'měsíc' : 'měsícem';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'měsíce' : 'měsíců');
-              } else {
-                  return result + 'měsíci';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokem';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'let');
-              } else {
-                  return result + 'lety';
-              }
-              break;
-          }
-      }
+      // update the index list, dynamic edges and labels
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      this._updateCalculationNodes();
+      this.updateLabels();
+    }
 
-      return moment.lang('cs', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "neděle_pondělí_úterý_středa_čtvrtek_pátek_sobota".split("_"),
-          weekdaysShort : "ne_po_út_st_čt_pá_so".split("_"),
-          weekdaysMin : "ne_po_út_st_čt_pá_so".split("_"),
-          longDateFormat : {
-              LT: "H.mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes v] LT",
-              nextDay: '[zítra v] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [v] LT';
-                  case 3:
-                      return '[ve středu v] LT';
-                  case 4:
-                      return '[ve čtvrtek v] LT';
-                  case 5:
-                      return '[v pátek v] LT';
-                  case 6:
-                      return '[v sobotu v] LT';
-                  }
-              },
-              lastDay: '[včera v] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulou neděli v] LT';
-                  case 1:
-                  case 2:
-                      return '[minulé] dddd [v] LT';
-                  case 3:
-                      return '[minulou středu v] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [v] LT';
-                  case 6:
-                      return '[minulou sobotu v] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "před %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+    if (this.moving != isMovingBeforeClustering) {
+      this.start();
+    }
+  };
 
 
-/***/ },
-/* 66 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * This calls the updateClustes with default arguments
+   */
+  exports.updateClustersDefault = function() {
+    if (this.constants.clustering.enabled == true) {
+      this.updateClusters(0,false,false);
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chuvash (cv)
-  // author : Anatoly Mironov : https://github.com/mirontoli
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
+  };
+
+
+  /**
+   * 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);
+  };
+
+
+  /**
+   * 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);
       }
-  }(function (moment) {
-      return moment.lang('cv', {
-          months : "кăрлач_нарăс_пуш_ака_май_çĕртме_утă_çурла_авăн_юпа_чӳк_раштав".split("_"),
-          monthsShort : "кăр_нар_пуш_ака_май_çĕр_утă_çур_ав_юпа_чӳк_раш".split("_"),
-          weekdays : "вырсарникун_тунтикун_ытларикун_юнкун_кĕçнерникун_эрнекун_шăматкун".split("_"),
-          weekdaysShort : "выр_тун_ытл_юн_кĕç_эрн_шăм".split("_"),
-          weekdaysMin : "вр_тн_ыт_юн_кç_эр_шм".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ]",
-              LLL : "YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT",
-              LLLL : "dddd, YYYY [çулхи] MMMM [уйăхĕн] D[-мĕшĕ], LT"
-          },
-          calendar : {
-              sameDay: '[Паян] LT [сехетре]',
-              nextDay: '[Ыран] LT [сехетре]',
-              lastDay: '[Ĕнер] LT [сехетре]',
-              nextWeek: '[Çитес] dddd LT [сехетре]',
-              lastWeek: '[Иртнĕ] dddd LT [сехетре]',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (output) {
-                  var affix = /сехет$/i.exec(output) ? "рен" : /çул$/i.exec(output) ? "тан" : "ран";
-                  return output + affix;
-              },
-              past : "%s каялла",
-              s : "пĕр-ик çеккунт",
-              m : "пĕр минут",
-              mm : "%d минут",
-              h : "пĕр сехет",
-              hh : "%d сехет",
-              d : "пĕр кун",
-              dd : "%d кун",
-              M : "пĕр уйăх",
-              MM : "%d уйăх",
-              y : "пĕр çул",
-              yy : "%d çул"
-          },
-          ordinal : '%d-мĕш',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      else {
+        // if a cluster takes up a set percentage of the active window
+        this._openClustersBySize();
+      }
+    }
+    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();
+    }
 
-/***/ },
-/* 67 */
-/***/ function(module, exports, __webpack_require__) {
+    // we now reduce chains.
+    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
+      this.handleChains();
+      this._updateNodeIndexList();
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Welsh (cy)
-  // author : Robert Allen
+    this.previousScale = this.scale;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // rest of the update the index list, dynamic edges and labels
+    this._updateDynamicEdges();
+    this.updateLabels();
+
+    // 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();
+    }
+
+    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 (moment) {
-      return moment.lang("cy", {
-          months: "Ionawr_Chwefror_Mawrth_Ebrill_Mai_Mehefin_Gorffennaf_Awst_Medi_Hydref_Tachwedd_Rhagfyr".split("_"),
-          monthsShort: "Ion_Chwe_Maw_Ebr_Mai_Meh_Gor_Aws_Med_Hyd_Tach_Rhag".split("_"),
-          weekdays: "Dydd Sul_Dydd Llun_Dydd Mawrth_Dydd Mercher_Dydd Iau_Dydd Gwener_Dydd Sadwrn".split("_"),
-          weekdaysShort: "Sul_Llun_Maw_Mer_Iau_Gwe_Sad".split("_"),
-          weekdaysMin: "Su_Ll_Ma_Me_Ia_Gw_Sa".split("_"),
-          // time formats are the same as en-gb
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[Heddiw am] LT',
-              nextDay: '[Yfory am] LT',
-              nextWeek: 'dddd [am] LT',
-              lastDay: '[Ddoe am] LT',
-              lastWeek: 'dddd [diwethaf am] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "mewn %s",
-              past: "%s yn ôl",
-              s: "ychydig eiliadau",
-              m: "munud",
-              mm: "%d munud",
-              h: "awr",
-              hh: "%d awr",
-              d: "diwrnod",
-              dd: "%d diwrnod",
-              M: "mis",
-              MM: "%d mis",
-              y: "blwyddyn",
-              yy: "%d flynedd"
-          },
-          // traditional ordinal numbers above 31 are not commonly used in colloquial Welsh
-          ordinal: function (number) {
-              var b = number,
-                  output = '',
-                  lookup = [
-                      '', 'af', 'il', 'ydd', 'ydd', 'ed', 'ed', 'ed', 'fed', 'fed', 'fed', // 1af to 10fed
-                      'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'eg', 'fed', 'eg', 'fed' // 11eg to 20fed
-                  ];
+    }
+
+    this._updateCalculationNodes();
+  };
+
+  /**
+   * 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)
+
+    }
+  };
+
+  /**
+   * this functions starts clustering by hubs
+   * The minimum hub threshold is set globally
+   *
+   * @private
+   */
+  exports._aggregateHubs = function(force) {
+    this._getHubSize();
+    this._formClustersByHub(force,false);
+  };
 
-              if (b > 20) {
-                  if (b === 40 || b === 50 || b === 60 || b === 80 || b === 100) {
-                      output = 'fed'; // not 30ain, 70ain or 90ain
-                  } else {
-                      output = 'ain';
-                  }
-              } else if (b > 0) {
-                  output = lookup[b];
-              }
 
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * This function is fired by keypress. It forces hubs to form.
+   *
+   */
+  exports.forceAggregateHubs = function(doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
 
+    this._aggregateHubs(true);
 
-/***/ },
-/* 68 */
-/***/ function(module, exports, __webpack_require__) {
+    // update the index list, dynamic edges and labels
+    this._updateNodeIndexList();
+    this._updateDynamicEdges();
+    this.updateLabels();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : danish (da)
-  // author : Ulrik Nielsen : https://github.com/mrbase
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length != amountOfNodes) {
+      this.clusterSession += 1;
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    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 (moment) {
-      return moment.lang('da', {
-          months : "januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "søn_man_tir_ons_tor_fre_lør".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd [d.] D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[I dag kl.] LT',
-              nextDay : '[I morgen kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[I går kl.] LT',
-              lastWeek : '[sidste] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "%s siden",
-              s : "få sekunder",
-              m : "et minut",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dage",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "et år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
+  /**
+   * 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);
+          }
+        }
+      }
+    }
+  };
 
-/***/ },
-/* 69 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : austrian german (de-at)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
-  // author : Martin Groller : https://github.com/MadMG
+  /**
+   * 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();
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+  /**
+   * 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;
       }
+      recursive = openAll ? true : recursive;
 
-      return moment.lang('de-at', {
-          months : "Jänner_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jän._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+      // 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];
+
+            // 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);
+              }
+            }
           }
-      });
-  }));
+        }
+      }
+    }
+  };
+
+  /**
+   * 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 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();
 
-/***/ },
-/* 70 */
-/***/ function(module, exports, __webpack_require__) {
+      // put the child node back in the global nodes object
+      this.nodes[containedNodeId] = childNode;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : german (de)
-  // author : lluchs : https://github.com/lluchs
-  // author: Menelion Elensúle: https://github.com/Oire
+      // release the contained edges from this childNode back into the global edges
+      this._releaseContainedEdges(parentNode,childNode);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      // reconnect rerouted edges to the childNode
+      this._connectEdgeBackToChild(parentNode,childNode);
+
+      // validate all edges in dynamicEdges
+      this._validateEdges(parentNode);
+
+      // undo the changes from the clustering operation on the parent node
+      parentNode.mass -= childNode.mass;
+      parentNode.clusterSize -= childNode.clusterSize;
+      parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      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());
+      childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
+
+      // remove node from the list
+      delete parentNode.containedNodes[containedNodeId];
+
+      // 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;
+          }
+        }
       }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eine Minute', 'einer Minute'],
-              'h': ['eine Stunde', 'einer Stunde'],
-              'd': ['ein Tag', 'einem Tag'],
-              'dd': [number + ' Tage', number + ' Tagen'],
-              'M': ['ein Monat', 'einem Monat'],
-              'MM': [number + ' Monate', number + ' Monaten'],
-              'y': ['ein Jahr', 'einem Jahr'],
-              'yy': [number + ' Jahre', number + ' Jahren']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
+      // if there are no others, remove the cluster session from the list
+      if (othersPresent == false) {
+        parentNode.clusterSessions.pop();
       }
 
-      return moment.lang('de', {
-          months : "Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort : "Jan._Febr._Mrz._Apr._Mai_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays : "Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag".split("_"),
-          weekdaysShort : "So._Mo._Di._Mi._Do._Fr._Sa.".split("_"),
-          weekdaysMin : "So_Mo_Di_Mi_Do_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT: "HH:mm [Uhr]",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Heute um] LT",
-              sameElse: "L",
-              nextDay: '[Morgen um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gestern um] LT',
-              lastWeek: '[letzten] dddd [um] LT'
-          },
-          relativeTime : {
-              future : "in %s",
-              past : "vor %s",
-              s : "ein paar Sekunden",
-              m : processRelativeTime,
-              mm : "%d Minuten",
-              h : processRelativeTime,
-              hh : "%d Stunden",
-              d : processRelativeTime,
-              dd : processRelativeTime,
-              M : processRelativeTime,
-              MM : processRelativeTime,
-              y : processRelativeTime,
-              yy : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      this._repositionBezierNodes(childNode);
+  //      this._repositionBezierNodes(parentNode);
 
+      // remove the clusterSession from the child node
+      childNode.clusterSession = 0;
 
-/***/ },
-/* 71 */
-/***/ function(module, exports, __webpack_require__) {
+      // recalculate the size of the node on the next time the node is rendered
+      parentNode.clearSizeCache();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : modern greek (el)
-  // author : Aggelos Karalias : https://github.com/mehiel
+      // restart the simulation to reorganise all nodes
+      this.moving = true;
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('el', {
-          monthsNominativeEl : "Ιανουάριος_Φεβρουάριος_Μάρτιος_Απρίλιος_Μάιος_Ιούνιος_Ιούλιος_Αύγουστος_Σεπτέμβριος_Οκτώβριος_Νοέμβριος_Δεκέμβριος".split("_"),
-          monthsGenitiveEl : "Ιανουαρίου_Φεβρουαρίου_Μαρτίου_Απριλίου_Μαΐου_Ιουνίου_Ιουλίου_Αυγούστου_Σεπτεμβρίου_Οκτωβρίου_Νοεμβρίου_Δεκεμβρίου".split("_"),
-          months : function (momentToFormat, format) {
-              if (/D/.test(format.substring(0, format.indexOf("MMMM")))) { // if there is a day number before 'MMMM'
-                  return this._monthsGenitiveEl[momentToFormat.month()];
-              } else {
-                  return this._monthsNominativeEl[momentToFormat.month()];
-              }
-          },
-          monthsShort : "Ιαν_Φεβ_Μαρ_Απρ_Μαϊ_Ιουν_Ιουλ_Αυγ_Σεπ_Οκτ_Νοε_Δεκ".split("_"),
-          weekdays : "Κυριακή_Δευτέρα_Τρίτη_Τετάρτη_Πέμπτη_Παρασκευή_Σάββατο".split("_"),
-          weekdaysShort : "Κυρ_Δευ_Τρι_Τετ_Πεμ_Παρ_Σαβ".split("_"),
-          weekdaysMin : "Κυ_Δε_Τρ_Τε_Πε_Πα_Σα".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'μμ' : 'ΜΜ';
-              } else {
-                  return isLower ? 'πμ' : 'ΠΜ';
-              }
-          },
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendarEl : {
-              sameDay : '[Σήμερα {}] LT',
-              nextDay : '[Αύριο {}] LT',
-              nextWeek : 'dddd [{}] LT',
-              lastDay : '[Χθες {}] LT',
-              lastWeek : function() {
-                  switch (this.day()) {
-                      case 6:
-                          return '[το προηγούμενο] dddd [{}] LT';
-                      default:
-                          return '[την προηγούμενη] dddd [{}] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          calendar : function (key, mom) {
-              var output = this._calendarEl[key],
-                  hours = mom && mom.hours();
+    // check if a further expansion step is possible if recursivity is enabled
+    if (recursive == true) {
+      this._expandClusterNode(childNode,recursive,force,openAll);
+    }
+  };
 
-              if (typeof output === 'function') {
-                  output = output.apply(mom);
-              }
 
-              return output.replace("{}", (hours % 12 === 1 ? "στη" : "στις"));
-          },
-          relativeTime : {
-              future : "σε %s",
-              past : "%s πριν",
-              s : "δευτερόλεπτα",
-              m : "ένα λεπτό",
-              mm : "%d λεπτά",
-              h : "μία ώρα",
-              hh : "%d ώρες",
-              d : "μία μέρα",
-              dd : "%d μέρες",
-              M : "ένας μήνας",
-              MM : "%d μήνες",
-              y : "ένας χρόνος",
-              yy : "%d χρόνια"
-          },
-          ordinal : function (number) {
-              return number + 'η';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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();
+    }
+  };
+
+
+  /**
+   * 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();
+    }
+  };
+
+
+  /**
+   * 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);
 
-/***/ },
-/* 72 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : australian english (en-au)
+            if (length < minLength) {
+              // first check which node is larger
+              var parentNode = edge.from;
+              var childNode = edge.to;
+              if (edge.to.mass > edge.from.mass) {
+                parentNode = edge.to;
+                childNode = edge.from;
+              }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('en-au', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+              if (childNode.dynamicEdgesLength == 1) {
+                this._addToCluster(parentNode,childNode,false);
+              }
+              else if (parentNode.dynamicEdgesLength == 1) {
+                this._addToCluster(childNode,parentNode,false);
+              }
+            }
           }
-      });
-  }));
-
+        }
+      }
+    }
+  };
 
-/***/ },
-/* 73 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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];
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian english (en-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
+        // the edges can be swallowed by another decrease
+        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];
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('en-ca', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM, YYYY",
-              LLL : "D MMMM, YYYY LT",
-              LLLL : "dddd, D MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
+          // group to the largest node
+          if (childNode.id != parentNode.id) {
+            if (parentNode.mass > childNode.mass) {
+              this._addToCluster(parentNode,childNode,true);
+            }
+            else {
+              this._addToCluster(childNode,parentNode,true);
+            }
           }
-      });
-  }));
+        }
+      }
+    }
+  };
 
 
-/***/ },
-/* 74 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
+        }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : great britain english (en-gb)
-  // author : Chris Gedrim : https://github.com/chrisgedrim
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+          smallestNeighbour = neighbour.clusterSessions.length;
+          smallestNeighbourNode = neighbour;
+        }
       }
-  }(function (moment) {
-      return moment.lang('en-gb', {
-          months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
-          weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
-          weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
-          weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          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"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
 
+    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+      this._addToCluster(neighbour, node, true);
+    }
+  };
 
-/***/ },
-/* 75 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : esperanto (eo)
-  // author : Colin Dean : https://github.com/colindean
-  // komento: Mi estas malcerta se mi korekte traktis akuzativojn en tiu traduko.
-  //          Se ne, bonvolu korekti kaj avizi min por ke mi povas lerni!
+  /**
+   * 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
+    }
+    // we decide if the node is a hub
+    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
+      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+      // initialize variables
+      var dx,dy,length;
+      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+      var allowCluster = false;
+
+      // 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 (moment) {
-      return moment.lang('eo', {
-          months : "januaro_februaro_marto_aprilo_majo_junio_julio_aŭgusto_septembro_oktobro_novembro_decembro".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aŭg_sep_okt_nov_dec".split("_"),
-          weekdays : "Dimanĉo_Lundo_Mardo_Merkredo_Ĵaŭdo_Vendredo_Sabato".split("_"),
-          weekdaysShort : "Dim_Lun_Mard_Merk_Ĵaŭ_Ven_Sab".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Ĵa_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D[-an de] MMMM, YYYY",
-              LLL : "D[-an de] MMMM, YYYY LT",
-              LLLL : "dddd, [la] D[-an de] MMMM, YYYY LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'p.t.m.' : 'P.T.M.';
-              } else {
-                  return isLower ? 'a.t.m.' : 'A.T.M.';
+
+      // if the hub clustering is not forces, 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);
+
+                if (length < minLength) {
+                  allowCluster = true;
+                  break;
+                }
               }
-          },
-          calendar : {
-              sameDay : '[Hodiaŭ je] LT',
-              nextDay : '[Morgaŭ je] LT',
-              nextWeek : 'dddd [je] LT',
-              lastDay : '[Hieraŭ je] LT',
-              lastWeek : '[pasinta] dddd [je] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "je %s",
-              past : "antaŭ %s",
-              s : "sekundoj",
-              m : "minuto",
-              mm : "%d minutoj",
-              h : "horo",
-              hh : "%d horoj",
-              d : "tago",//ne 'diurno', ĉar estas uzita por proksimumo
-              dd : "%d tagoj",
-              M : "monato",
-              MM : "%d monatoj",
-              y : "jaro",
-              yy : "%d jaroj"
-          },
-          ordinal : "%da",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+            }
           }
-      });
-  }));
+        }
+      }
 
+      // start the clustering if allowed
+      if ((!force && allowCluster) || force) {
+        // we loop over all edges INITIALLY connected to this hub
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          edge = this.edges[edgesIdarray[j]];
+          // the edge can be clustered by this function in a previous loop
+          if (edge !== undefined) {
+            var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+            // 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);
+            }
+          }
+        }
+      }
+    }
+  };
 
-/***/ },
-/* 76 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : spanish (es)
-  // author : Julio Napurí : https://github.com/julionc
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"),
-          monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".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;
 
-      return moment.lang('es', {
-          months : "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShort[m.month()];
-              } else {
-                  return monthsShortDot[m.month()];
-              }
-          },
-          weekdays : "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
-          weekdaysShort : "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mi_Ju_Vi_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [del] YYYY",
-              LLL : "D [de] MMMM [del] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [del] YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastDay : function () {
-                  return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "en %s",
-              past : "hace %s",
-              s : "unos segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "una hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un año",
-              yy : "%d años"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // 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
+        this._addToContainedEdges(parentNode,childNode,edge);
+      }
+      else {
+        this._connectEdgeToCluster(parentNode,childNode,edge);
+      }
+    }
+    // a contained node has no dynamic edges.
+    childNode.dynamicEdges = [];
 
+    // remove circular edges from clusters
+    this._containCircularEdgesFromNode(parentNode,childNode);
 
-/***/ },
-/* 77 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : estonian (et)
-  // author : Henry Kehlmann : https://github.com/madhenry
-  // improvements : Illimar Tambek : https://github.com/ragulka
+    // remove the childNode from the global nodes object
+    delete this.nodes[childNode.id];
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              's' : ['mõne sekundi', 'mõni sekund', 'paar sekundit'],
-              'm' : ['ühe minuti', 'üks minut'],
-              'mm': [number + ' minuti', number + ' minutit'],
-              'h' : ['ühe tunni', 'tund aega', 'üks tund'],
-              'hh': [number + ' tunni', number + ' tundi'],
-              'd' : ['ühe päeva', 'üks päev'],
-              'M' : ['kuu aja', 'kuu aega', 'üks kuu'],
-              'MM': [number + ' kuu', number + ' kuud'],
-              'y' : ['ühe aasta', 'aasta', 'üks aasta'],
-              'yy': [number + ' aasta', number + ' aastat']
-          };
-          if (withoutSuffix) {
-              return format[key][2] ? format[key][2] : format[key][1];
+    // update the properties of the child and parent
+    var massBefore = parentNode.mass;
+    childNode.clusterSession = this.clusterSession;
+    parentNode.mass += childNode.mass;
+    parentNode.clusterSize += childNode.clusterSize;
+    parentNode.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);
+    }
+
+    // forced clusters only open from screen size and double tap
+    if (force == true) {
+      // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
+      parentNode.formationScale = 0;
+    }
+    else {
+      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+    }
+
+    // recalculate the size of the node on the next time the node is rendered
+    parentNode.clearSizeCache();
+
+    // set the pop-out scale for the childnode
+    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+
+    // nullify the movement velocity of the child, this is to avoid hectic behaviour
+    childNode.clearVelocity();
+
+    // the mass has altered, preservation of energy dictates the velocity to be updated
+    parentNode.updateVelocity(massBefore);
+
+    // restart the simulation to reorganise all nodes
+    this.moving = true;
+  };
+
+
+  /**
+   * 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;
+            }
           }
-          return isFuture ? format[key][0] : format[key][1];
+        }
       }
+      node.dynamicEdgesLength -= correction;
+    }
+  };
 
-      return moment.lang('et', {
-          months        : "jaanuar_veebruar_märts_aprill_mai_juuni_juuli_august_september_oktoober_november_detsember".split("_"),
-          monthsShort   : "jaan_veebr_märts_apr_mai_juuni_juuli_aug_sept_okt_nov_dets".split("_"),
-          weekdays      : "pühapäev_esmaspäev_teisipäev_kolmapäev_neljapäev_reede_laupäev".split("_"),
-          weekdaysShort : "P_E_T_K_N_R_L".split("_"),
-          weekdaysMin   : "P_E_T_K_N_R_L".split("_"),
-          longDateFormat : {
-              LT   : "H:mm",
-              L    : "DD.MM.YYYY",
-              LL   : "D. MMMM YYYY",
-              LLL  : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[Täna,] LT',
-              nextDay  : '[Homme,] LT',
-              nextWeek : '[Järgmine] dddd LT',
-              lastDay  : '[Eile,] LT',
-              lastWeek : '[Eelmine] dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s pärast",
-              past   : "%s tagasi",
-              s      : processRelativeTime,
-              m      : processRelativeTime,
-              mm     : processRelativeTime,
-              h      : processRelativeTime,
-              hh     : processRelativeTime,
-              d      : processRelativeTime,
-              dd     : '%d päeva',
-              M      : processRelativeTime,
-              MM     : processRelativeTime,
-              y      : processRelativeTime,
-              yy     : processRelativeTime
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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);
 
-/***/ },
-/* 78 */
-/***/ function(module, exports, __webpack_require__) {
+    // remove the edge from the global edges object
+    delete this.edges[edge.id];
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : euskara (eu)
-  // author : Eneko Illarramendi : https://github.com/eillarra
+    // 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;
+      }
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
       }
-  }(function (moment) {
-      return moment.lang('eu', {
-          months : "urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua".split("_"),
-          monthsShort : "urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.".split("_"),
-          weekdays : "igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata".split("_"),
-          weekdaysShort : "ig._al._ar._az._og._ol._lr.".split("_"),
-          weekdaysMin : "ig_al_ar_az_og_ol_lr".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY[ko] MMMM[ren] D[a]",
-              LLL : "YYYY[ko] MMMM[ren] D[a] LT",
-              LLLL : "dddd, YYYY[ko] MMMM[ren] D[a] LT",
-              l : "YYYY-M-D",
-              ll : "YYYY[ko] MMM D[a]",
-              lll : "YYYY[ko] MMM D[a] LT",
-              llll : "ddd, YYYY[ko] MMM D[a] LT"
-          },
-          calendar : {
-              sameDay : '[gaur] LT[etan]',
-              nextDay : '[bihar] LT[etan]',
-              nextWeek : 'dddd LT[etan]',
-              lastDay : '[atzo] LT[etan]',
-              lastWeek : '[aurreko] dddd LT[etan]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s barru",
-              past : "duela %s",
-              s : "segundo batzuk",
-              m : "minutu bat",
-              mm : "%d minutu",
-              h : "ordu bat",
-              hh : "%d ordu",
-              d : "egun bat",
-              dd : "%d egun",
-              M : "hilabete bat",
-              MM : "%d hilabete",
-              y : "urte bat",
-              yy : "%d urte"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      else {          // edge connected to other node with the "from" side
 
+        edge.originalFromId.push(childNode.id);
+        edge.from = parentNode;
+        edge.fromId = parentNode.id;
+      }
 
-/***/ },
-/* 79 */
-/***/ function(module, exports, __webpack_require__) {
+      this._addToReroutedEdges(parentNode,childNode,edge);
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Persian Language
-  // author : Ebrahim Byagowi : https://github.com/ebraminio
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '۱',
-          '2': '۲',
-          '3': '۳',
-          '4': '۴',
-          '5': '۵',
-          '6': '۶',
-          '7': '۷',
-          '8': '۸',
-          '9': '۹',
-          '0': '۰'
-      }, numberMap = {
-          '۱': '1',
-          '۲': '2',
-          '۳': '3',
-          '۴': '4',
-          '۵': '5',
-          '۶': '6',
-          '۷': '7',
-          '۸': '8',
-          '۹': '9',
-          '۰': '0'
-      };
+    }
+  };
 
-      return moment.lang('fa', {
-          months : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          monthsShort : 'ژانویه_فوریه_مارس_آوریل_مه_ژوئن_ژوئیه_اوت_سپتامبر_اکتبر_نوامبر_دسامبر'.split('_'),
-          weekdays : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysShort : 'یک\u200cشنبه_دوشنبه_سه\u200cشنبه_چهارشنبه_پنج\u200cشنبه_جمعه_شنبه'.split('_'),
-          weekdaysMin : 'ی_د_س_چ_پ_ج_ش'.split('_'),
-          longDateFormat : {
-              LT : 'HH:mm',
-              L : 'DD/MM/YYYY',
-              LL : 'D MMMM YYYY',
-              LLL : 'D MMMM YYYY LT',
-              LLLL : 'dddd, D MMMM YYYY LT'
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "قبل از ظهر";
-              } else {
-                  return "بعد از ظهر";
-              }
-          },
-          calendar : {
-              sameDay : '[امروز ساعت] LT',
-              nextDay : '[فردا ساعت] LT',
-              nextWeek : 'dddd [ساعت] LT',
-              lastDay : '[دیروز ساعت] LT',
-              lastWeek : 'dddd [پیش] [ساعت] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : 'در %s',
-              past : '%s پیش',
-              s : 'چندین ثانیه',
-              m : 'یک دقیقه',
-              mm : '%d دقیقه',
-              h : 'یک ساعت',
-              hh : '%d ساعت',
-              d : 'یک روز',
-              dd : '%d روز',
-              M : 'یک ماه',
-              MM : '%d ماه',
-              y : 'یک سال',
-              yy : '%d سال'
-          },
-          preparse: function (string) {
-              return string.replace(/[۰-۹]/g, function (match) {
-                  return numberMap[match];
-              }).replace(/،/g, ',');
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              }).replace(/,/g, '،');
-          },
-          ordinal : '%dم',
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12 // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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);
+   };
 
-/***/ },
-/* 80 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : finnish (fi)
-  // author : Tarmo Aidantausta : https://github.com/bleadof
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var numbersPast = 'nolla yksi kaksi kolme neljä viisi kuusi seitsemän kahdeksan yhdeksän'.split(' '),
-          numbersFuture = ['nolla', 'yhden', 'kahden', 'kolmen', 'neljän', 'viiden', 'kuuden',
-                            numbersPast[7], numbersPast[8], numbersPast[9]];
+  /**
+   * 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;
+        }
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = "";
-          switch (key) {
-          case 's':
-              return isFuture ? 'muutaman sekunnin' : 'muutama sekunti';
-          case 'm':
-              return isFuture ? 'minuutin' : 'minuutti';
-          case 'mm':
-              result = isFuture ? 'minuutin' : 'minuuttia';
-              break;
-          case 'h':
-              return isFuture ? 'tunnin' : 'tunti';
-          case 'hh':
-              result = isFuture ? 'tunnin' : 'tuntia';
-              break;
-          case 'd':
-              return isFuture ? 'päivän' : 'päivä';
-          case 'dd':
-              result = isFuture ? 'päivän' : 'päivää';
-              break;
-          case 'M':
-              return isFuture ? 'kuukauden' : 'kuukausi';
-          case 'MM':
-              result = isFuture ? 'kuukauden' : 'kuukautta';
-              break;
-          case 'y':
-              return isFuture ? 'vuoden' : 'vuosi';
-          case 'yy':
-              result = isFuture ? 'vuoden' : 'vuotta';
-              break;
+        // append this edge to the list of edges connecting to the childnode
+        childNode.dynamicEdges.push(edge);
+
+        // 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;
           }
-          result = verbalNumber(number, isFuture) + " " + result;
-          return result;
+        }
+      }
+      // remove the entry from the rerouted edges
+      delete parentNode.reroutedEdges[childNode.id];
+    }
+  };
+
+
+  /**
+   * 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) {
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
+        parentNode.dynamicEdges.splice(i,1);
       }
+    }
+  };
+
+
+  /**
+   * 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];
+
+      // put the edge back in the global edges object
+      this.edges[edge.id] = edge;
+
+      // 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];
 
-      function verbalNumber(number, isFuture) {
-          return number < 10 ? (isFuture ? numbersFuture[number] : numbersPast[number]) : number;
-      }
+  };
 
-      return moment.lang('fi', {
-          months : "tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),
-          monthsShort : "tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),
-          weekdays : "sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),
-          weekdaysShort : "su_ma_ti_ke_to_pe_la".split("_"),
-          weekdaysMin : "su_ma_ti_ke_to_pe_la".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD.MM.YYYY",
-              LL : "Do MMMM[ta] YYYY",
-              LLL : "Do MMMM[ta] YYYY, [klo] LT",
-              LLLL : "dddd, Do MMMM[ta] YYYY, [klo] LT",
-              l : "D.M.YYYY",
-              ll : "Do MMM YYYY",
-              lll : "Do MMM YYYY, [klo] LT",
-              llll : "ddd, Do MMM YYYY, [klo] LT"
-          },
-          calendar : {
-              sameDay : '[tänään] [klo] LT',
-              nextDay : '[huomenna] [klo] LT',
-              nextWeek : 'dddd [klo] LT',
-              lastDay : '[eilen] [klo] LT',
-              lastWeek : '[viime] dddd[na] [klo] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s päästä",
-              past : "%s sitten",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : "%d.",
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
 
-/***/ },
-/* 81 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : faroese (fo)
-  // author : Ragnar Johannesen : https://github.com/ragnar123
+  // ------------------- UTILITY FUNCTIONS ---------------------------- //
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+  /**
+   * 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),"]");
+        }
       }
-  }(function (moment) {
-      return moment.lang('fo', {
-          months : "januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur".split("_"),
-          weekdaysShort : "sun_mán_týs_mik_hós_frí_ley".split("_"),
-          weekdaysMin : "su_má_tý_mi_hó_fr_le".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D. MMMM, YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Í dag kl.] LT',
-              nextDay : '[Í morgin kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[Í gjár kl.] LT',
-              lastWeek : '[síðstu] dddd [kl] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "um %s",
-              past : "%s síðani",
-              s : "fá sekund",
-              m : "ein minutt",
-              mm : "%d minuttir",
-              h : "ein tími",
-              hh : "%d tímar",
-              d : "ein dagur",
-              dd : "%d dagar",
-              M : "ein mánaði",
-              MM : "%d mánaðir",
-              y : "eitt ár",
-              yy : "%d ár"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+    }
+
+    // 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);
+          }
+        }
+      }
+    }
 
+  //    /* Debug Override */
+  //    for (nodeId in this.nodes) {
+  //      if (this.nodes.hasOwnProperty(nodeId)) {
+  //        node = this.nodes[nodeId];
+  //        node.label = String(node.level);
+  //      }
+  //    }
 
-/***/ },
-/* 82 */
-/***/ function(module, exports, __webpack_require__) {
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : canadian french (fr-ca)
-  // author : Jonathan Abourbih : https://github.com/jonbca
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
+
+    // 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;}
       }
-  }(function (moment) {
-      return moment.lang('fr-ca', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
-          },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
+    }
+
+    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]);
           }
-      });
-  }));
+        }
+      }
+      this._updateNodeIndexList();
+      this._updateDynamicEdges();
+      // if a cluster was formed, we increase the clusterSession
+      if (this.nodeIndices.length != amountOfNodes) {
+        this.clusterSession += 1;
+      }
+    }
+  };
 
 
-/***/ },
-/* 83 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : french (fr)
-  // author : John Fischer : https://github.com/jfroffice
+  /**
+   * 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 (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+  /**
+   * 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.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);
       }
-  }(function (moment) {
-      return moment.lang('fr', {
-          months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
-          monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
-          weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
-          weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
-          weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Aujourd'hui à] LT",
-              nextDay: '[Demain à] LT',
-              nextWeek: 'dddd [à] LT',
-              lastDay: '[Hier à] LT',
-              lastWeek: 'dddd [dernier à] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dans %s",
-              past : "il y a %s",
-              s : "quelques secondes",
-              m : "une minute",
-              mm : "%d minutes",
-              h : "une heure",
-              hh : "%d heures",
-              d : "un jour",
-              dd : "%d jours",
-              M : "un mois",
-              MM : "%d mois",
-              y : "un an",
-              yy : "%d ans"
-          },
-          ordinal : function (number) {
-              return number + (number === 1 ? 'er' : '');
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 84 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : galician (gl)
-  // author : Juan G. Hurtado : https://github.com/juanghurtado
+    for (var i = 0; i < this.nodeIndices.length; i++) {
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var node = this.nodes[this.nodeIndices[i]];
+      if (node.dynamicEdgesLength > largestHub) {
+        largestHub = node.dynamicEdgesLength;
       }
-  }(function (moment) {
-      return moment.lang('gl', {
-          months : "Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro".split("_"),
-          monthsShort : "Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.".split("_"),
-          weekdays : "Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado".split("_"),
-          weekdaysShort : "Dom._Lun._Mar._Mér._Xov._Ven._Sáb.".split("_"),
-          weekdaysMin : "Do_Lu_Ma_Mé_Xo_Ve_Sá".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : function () {
-                  return '[hoxe ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextDay : function () {
-                  return '[mañá ' + ((this.hours() !== 1) ? 'ás' : 'á') + '] LT';
-              },
-              nextWeek : function () {
-                  return 'dddd [' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              lastDay : function () {
-                  return '[onte ' + ((this.hours() !== 1) ? 'á' : 'a') + '] LT';
-              },
-              lastWeek : function () {
-                  return '[o] dddd [pasado ' + ((this.hours() !== 1) ? 'ás' : 'a') + '] LT';
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : function (str) {
-                  if (str === "uns segundos") {
-                      return "nuns segundos";
-                  }
-                  return "en " + str;
-              },
-              past : "hai %s",
-              s : "uns segundos",
-              m : "un minuto",
-              mm : "%d minutos",
-              h : "unha hora",
-              hh : "%d horas",
-              d : "un día",
-              dd : "%d días",
-              M : "un mes",
-              MM : "%d meses",
-              y : "un ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      average += node.dynamicEdgesLength;
+      averageSquared += Math.pow(node.dynamicEdgesLength,2);
+      hubCounter += 1;
+    }
+    average = average / hubCounter;
+    averageSquared = averageSquared / hubCounter;
 
+    var variance = averageSquared - Math.pow(average,2);
 
-/***/ },
-/* 85 */
-/***/ function(module, exports, __webpack_require__) {
+    var standardDeviation = Math.sqrt(variance);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Hebrew (he)
-  // author : Tomer Cohen : https://github.com/tomer
-  // author : Moshe Simantov : https://github.com/DevelopmentIL
-  // author : Tal Ater : https://github.com/TalAter
+    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('he', {
-          months : "ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר".split("_"),
-          monthsShort : "ינו׳_פבר׳_מרץ_אפר׳_מאי_יוני_יולי_אוג׳_ספט׳_אוק׳_נוב׳_דצמ׳".split("_"),
-          weekdays : "ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת".split("_"),
-          weekdaysShort : "א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳".split("_"),
-          weekdaysMin : "א_ב_ג_ד_ה_ו_ש".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [ב]MMMM YYYY",
-              LLL : "D [ב]MMMM YYYY LT",
-              LLLL : "dddd, D [ב]MMMM YYYY LT",
-              l : "D/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[היום ב־]LT',
-              nextDay : '[מחר ב־]LT',
-              nextWeek : 'dddd [בשעה] LT',
-              lastDay : '[אתמול ב־]LT',
-              lastWeek : '[ביום] dddd [האחרון בשעה] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "בעוד %s",
-              past : "לפני %s",
-              s : "מספר שניות",
-              m : "דקה",
-              mm : "%d דקות",
-              h : "שעה",
-              hh : function (number) {
-                  if (number === 2) {
-                      return "שעתיים";
-                  }
-                  return number + " שעות";
-              },
-              d : "יום",
-              dd : function (number) {
-                  if (number === 2) {
-                      return "יומיים";
-                  }
-                  return number + " ימים";
-              },
-              M : "חודש",
-              MM : function (number) {
-                  if (number === 2) {
-                      return "חודשיים";
-                  }
-                  return number + " חודשים";
-              },
-              y : "שנה",
-              yy : function (number) {
-                  if (number === 2) {
-                      return "שנתיים";
-                  }
-                  return number + " שנים";
-              }
+    // 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);
+  };
+
+
+  /**
+   * 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;
           }
-      });
-  }));
+        }
+      }
+    }
+  };
+
+  /**
+   * 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 chains/total;
+  };
 
 
 /***/ },
-/* 86 */
+/* 125 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hindi (hi)
-  // author : Mayank Singhal : https://github.com/mayanksinghal
+  var util = __webpack_require__(1);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+  /**
+   * 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.
+   */
 
-      return moment.lang('hi', {
-          months : 'जनवरी_फ़रवरी_मार्च_अप्रैल_मई_जून_जुलाई_अगस्त_सितम्बर_अक्टूबर_नवम्बर_दिसम्बर'.split("_"),
-          monthsShort : 'जन._फ़र._मार्च_अप्रै._मई_जून_जुल._अग._सित._अक्टू._नव._दिस.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगलवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगल_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm बजे",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[कल] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[कल] LT',
-              lastWeek : '[पिछले] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s में",
-              past : "%s पहले",
-              s : "कुछ ही क्षण",
-              m : "एक मिनट",
-              mm : "%d मिनट",
-              h : "एक घंटा",
-              hh : "%d घंटे",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महीने",
-              MM : "%d महीने",
-              y : "एक वर्ष",
-              yy : "%d वर्ष"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          // Hindi notation for meridiems are quite fuzzy in practice. While there exists
-          // a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "रात";
-              } else if (hour < 10) {
-                  return "सुबह";
-              } else if (hour < 17) {
-                  return "दोपहर";
-              } else if (hour < 20) {
-                  return "शाम";
-              } else {
-                  return "रात";
-              }
-          },
-          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 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;
+  };
 
 
-/***/ },
-/* 87 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   *  /**
+   * 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);
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hrvatski (hr)
-  // author : Bojan Marković : https://github.com/bmarkovic
 
-  // based on (sl) translation by Robert Sedovšek
+  /**
+   * 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"];
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'jedna minuta' : 'jedne minute';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minuta';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'jedan sat' : 'jednog sata';
-          case 'hh':
-              if (number === 1) {
-                  result += 'sat';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'sata';
-              } else {
-                  result += 'sati';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dana';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mjesec';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'mjeseca';
-              } else {
-                  result += 'mjeseci';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'godina';
-              } else if (number === 2 || number === 3 || number === 4) {
-                  result += 'godine';
-              } else {
-                  result += 'godina';
-              }
-              return result;
-          }
-      }
+  /**
+   * 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"];
+  };
 
-      return moment.lang('hr', {
-          months : "sječanj_veljača_ožujak_travanj_svibanj_lipanj_srpanj_kolovoz_rujan_listopad_studeni_prosinac".split("_"),
-          monthsShort : "sje._vel._ožu._tra._svi._lip._srp._kol._ruj._lis._stu._pro.".split("_"),
-          weekdays : "nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota".split("_"),
-          weekdaysShort : "ned._pon._uto._sri._čet._pet._sub.".split("_"),
-          weekdaysMin : "ne_po_ut_sr_če_pe_su".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danas u] LT',
-              nextDay  : '[sutra u] LT',
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedjelju] [u] LT';
-                  case 3:
-                      return '[u] [srijedu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[jučer u] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                      return '[prošlu] dddd [u] LT';
-                  case 6:
-                      return '[prošle] [subote] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prošli] dddd [u] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "prije %s",
-              s      : "par sekundi",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "dan",
-              dd     : translate,
-              M      : "mjesec",
-              MM     : translate,
-              y      : "godinu",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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"];
+  };
 
 
-/***/ },
-/* 88 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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());
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : hungarian (hu)
-  // author : Adam Brunner : https://github.com/adambrunner
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var weekEndings = 'vasárnap hétfőn kedden szerdán csütörtökön pénteken szombaton'.split(' ');
+  /**
+   * This function returns the currently active sector Id
+   *
+   * @returns {String}
+   * @private
+   */
+  exports._sector = function() {
+    return this.activeSector[this.activeSector.length-1];
+  };
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var num = number,
-              suffix;
 
-          switch (key) {
-          case 's':
-              return (isFuture || withoutSuffix) ? 'néhány másodperc' : 'néhány másodperce';
-          case 'm':
-              return 'egy' + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'mm':
-              return num + (isFuture || withoutSuffix ? ' perc' : ' perce');
-          case 'h':
-              return 'egy' + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'hh':
-              return num + (isFuture || withoutSuffix ? ' óra' : ' órája');
-          case 'd':
-              return 'egy' + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'dd':
-              return num + (isFuture || withoutSuffix ? ' nap' : ' napja');
-          case 'M':
-              return 'egy' + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'MM':
-              return num + (isFuture || withoutSuffix ? ' hónap' : ' hónapja');
-          case 'y':
-              return 'egy' + (isFuture || withoutSuffix ? ' év' : ' éve');
-          case 'yy':
-              return num + (isFuture || withoutSuffix ? ' év' : ' éve');
-          }
+  /**
+   * 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.');
+    }
+  };
 
-          return '';
-      }
 
-      function week(isFuture) {
-          return (isFuture ? '' : '[múlt] ') + '[' + weekEndings[this.day()] + '] LT[-kor]';
-      }
+  /**
+   * 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);
+  };
 
-      return moment.lang('hu', {
-          months : "január_február_március_április_május_június_július_augusztus_szeptember_október_november_december".split("_"),
-          monthsShort : "jan_feb_márc_ápr_máj_jún_júl_aug_szept_okt_nov_dec".split("_"),
-          weekdays : "vasárnap_hétfő_kedd_szerda_csütörtök_péntek_szombat".split("_"),
-          weekdaysShort : "vas_hét_kedd_sze_csüt_pén_szo".split("_"),
-          weekdaysMin : "v_h_k_sze_cs_p_szo".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "YYYY.MM.DD.",
-              LL : "YYYY. MMMM D.",
-              LLL : "YYYY. MMMM D., LT",
-              LLLL : "YYYY. MMMM D., dddd LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 12) {
-                  return isLower === true ? 'de' : 'DE';
-              } else {
-                  return isLower === true ? 'du' : 'DU';
-              }
-          },
-          calendar : {
-              sameDay : '[ma] LT[-kor]',
-              nextDay : '[holnap] LT[-kor]',
-              nextWeek : function () {
-                  return week.call(this, true);
-              },
-              lastDay : '[tegnap] LT[-kor]',
-              lastWeek : function () {
-                  return week.call(this, false);
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s múlva",
-              past : "%s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+
+  /**
+   * 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"
           }
-      });
-  }));
+        },{},{},this.constants);
+    this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
+  };
 
 
-/***/ },
-/* 89 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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];
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Armenian (hy-am)
-  // author : Armendarabyan : https://github.com/armendarabyan
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+  /**
+   * 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 monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'հունվար_փետրվար_մարտ_ապրիլ_մայիս_հունիս_հուլիս_օգոստոս_սեպտեմբեր_հոկտեմբեր_նոյեմբեր_դեկտեմբեր'.split('_'),
-              'accusative': 'հունվարի_փետրվարի_մարտի_ապրիլի_մայիսի_հունիսի_հուլիսի_օգոստոսի_սեպտեմբերի_հոկտեմբերի_նոյեմբերի_դեկտեմբերի'.split('_')
-          },
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+  /**
+   * 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];
 
-          return months[nounCase][m.month()];
-      }
+    // we have moved the sector data into the frozen set, we now remove it from the active set
+    this._deleteActiveSector(sectorId);
+  };
 
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = 'հնվ_փտր_մրտ_ապր_մյս_հնս_հլս_օգս_սպտ_հկտ_նմբ_դկտ'.split('_');
 
-          return monthsShort[m.month()];
-      }
+  /**
+   * 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 weekdaysCaseReplace(m, format) {
-          var weekdays = 'կիրակի_երկուշաբթի_երեքշաբթի_չորեքշաբթի_հինգշաբթի_ուրբաթ_շաբաթ'.split('_');
+    // we have moved the sector data into the active set, we now remove it from the frozen stack
+    this._deleteFrozenSector(sectorId);
+  };
 
-          return weekdays[m.day()];
+
+  /**
+   * 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];
       }
+    }
 
-      return moment.lang('hy-am', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          weekdaysMin : "կրկ_երկ_երք_չրք_հնգ_ուրբ_շբթ".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY թ.",
-              LLL : "D MMMM YYYY թ., LT",
-              LLLL : "dddd, D MMMM YYYY թ., LT"
-          },
-          calendar : {
-              sameDay: '[այսօր] LT',
-              nextDay: '[վաղը] LT',
-              lastDay: '[երեկ] LT',
-              nextWeek: function () {
-                  return 'dddd [օրը ժամը] LT';
-              },
-              lastWeek: function () {
-                  return '[անցած] dddd [օրը ժամը] LT';
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "%s հետո",
-              past : "%s առաջ",
-              s : "մի քանի վայրկյան",
-              m : "րոպե",
-              mm : "%d րոպե",
-              h : "ժամ",
-              hh : "%d ժամ",
-              d : "օր",
-              dd : "%d օր",
-              M : "ամիս",
-              MM : "%d ամիս",
-              y : "տարի",
-              yy : "%d տարի"
-          },
+    // 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];
+      }
+    }
 
-          meridiem : function (hour) {
-              if (hour < 4) {
-                  return "գիշերվա";
-              } else if (hour < 12) {
-                  return "առավոտվա";
-              } else if (hour < 17) {
-                  return "ցերեկվա";
-              } else {
-                  return "երեկոյան";
-              }
-          },
+    // merge the nodeIndices
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
+    }
+  };
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'DDD':
-              case 'w':
-              case 'W':
-              case 'DDDo':
-                  if (number === 1) {
-                      return number + '-ին';
-                  }
-                  return number + '-րդ';
-              default:
-                  return number;
-              }
-          },
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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);
+  };
 
 
-/***/ },
-/* 90 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Indonesia (id)
-  // author : Mohammad Satrio Utomo : https://github.com/tyok
-  // reference: http://id.wikisource.org/wiki/Pedoman_Umum_Ejaan_Bahasa_Indonesia_yang_Disempurnakan
+  //    // 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!!");
+  //    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('id', {
-          months : "Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember".split("_"),
-          monthsShort : "Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des".split("_"),
-          weekdays : "Minggu_Senin_Selasa_Rabu_Kamis_Jumat_Sabtu".split("_"),
-          weekdaysShort : "Min_Sen_Sel_Rab_Kam_Jum_Sab".split("_"),
-          weekdaysMin : "Mg_Sn_Sl_Rb_Km_Jm_Sb".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'siang';
-              } else if (hours < 19) {
-                  return 'sore';
-              } else {
-                  return 'malam';
-              }
-          },
-          calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Besok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kemarin pukul] LT',
-              lastWeek : 'dddd [lalu pukul] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lalu",
-              s : "beberapa detik",
-              m : "semenit",
-              mm : "%d menit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    // 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();
 
-/***/ },
-/* 91 */
-/***/ function(module, exports, __webpack_require__) {
+    // we fully freeze the currently active sector
+    this._freezeSector(sector);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : icelandic (is)
-  // author : Hinrik Örn Sigurðsson : https://github.com/hinrik
+    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
+    this._createNewSector(unqiueIdentifier);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function plural(n) {
-          if (n % 100 === 11) {
-              return true;
-          } else if (n % 10 === 1) {
-              return false;
-          }
-          return true;
-      }
+    // we add the active sector to the sectors array to be able to revert these steps later on
+    this._setActiveSector(unqiueIdentifier);
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':
-              return withoutSuffix || isFuture ? 'nokkrar sekúndur' : 'nokkrum sekúndum';
-          case 'm':
-              return withoutSuffix ? 'mínúta' : 'mínútu';
-          case 'mm':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'mínútur' : 'mínútum');
-              } else if (withoutSuffix) {
-                  return result + 'mínúta';
-              }
-              return result + 'mínútu';
-          case 'hh':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'klukkustundir' : 'klukkustundum');
-              }
-              return result + 'klukkustund';
-          case 'd':
-              if (withoutSuffix) {
-                  return 'dagur';
-              }
-              return isFuture ? 'dag' : 'degi';
-          case 'dd':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'dagar';
-                  }
-                  return result + (isFuture ? 'daga' : 'dögum');
-              } else if (withoutSuffix) {
-                  return result + 'dagur';
-              }
-              return result + (isFuture ? 'dag' : 'degi');
-          case 'M':
-              if (withoutSuffix) {
-                  return 'mánuður';
-              }
-              return isFuture ? 'mánuð' : 'mánuði';
-          case 'MM':
-              if (plural(number)) {
-                  if (withoutSuffix) {
-                      return result + 'mánuðir';
-                  }
-                  return result + (isFuture ? 'mánuði' : 'mánuðum');
-              } else if (withoutSuffix) {
-                  return result + 'mánuður';
-              }
-              return result + (isFuture ? 'mánuð' : 'mánuði');
-          case 'y':
-              return withoutSuffix || isFuture ? 'ár' : 'ári';
-          case 'yy':
-              if (plural(number)) {
-                  return result + (withoutSuffix || isFuture ? 'ár' : 'árum');
-              }
-              return result + (withoutSuffix || isFuture ? 'ár' : 'ári');
-          }
-      }
+    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
+    this._switchToSector(this._sector());
 
-      return moment.lang('is', {
-          months : "janúar_febrúar_mars_apríl_maí_júní_júlí_ágúst_september_október_nóvember_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_maí_jún_júl_ágú_sep_okt_nóv_des".split("_"),
-          weekdays : "sunnudagur_mánudagur_þriðjudagur_miðvikudagur_fimmtudagur_föstudagur_laugardagur".split("_"),
-          weekdaysShort : "sun_mán_þri_mið_fim_fös_lau".split("_"),
-          weekdaysMin : "Su_Má_Þr_Mi_Fi_Fö_La".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD/MM/YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd, D. MMMM YYYY [kl.] LT"
-          },
-          calendar : {
-              sameDay : '[í dag kl.] LT',
-              nextDay : '[á morgun kl.] LT',
-              nextWeek : 'dddd [kl.] LT',
-              lastDay : '[í gær kl.] LT',
-              lastWeek : '[síðasta] dddd [kl.] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "eftir %s",
-              past : "fyrir %s síðan",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : "klukkustund",
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    // finally we add the node we removed from our previous active sector to the new active sector
+    this.nodes[node.id] = node;
+  };
 
 
-/***/ },
-/* 92 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : italian (it)
-  // author : Lorenzo : https://github.com/aliem
-  // author: Mattia Larentis: https://github.com/nostalgiaz
+    // 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();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('it', {
-          months : "gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre".split("_"),
-          monthsShort : "gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic".split("_"),
-          weekdays : "Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato".split("_"),
-          weekdaysShort : "Dom_Lun_Mar_Mer_Gio_Ven_Sab".split("_"),
-          weekdaysMin : "D_L_Ma_Me_G_V_S".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Oggi alle] LT',
-              nextDay: '[Domani alle] LT',
-              nextWeek: 'dddd [alle] LT',
-              lastDay: '[Ieri alle] LT',
-              lastWeek: '[lo scorso] dddd [alle] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : function (s) {
-                  return ((/^[0-9].+$/).test(s) ? "tra" : "in") + " " + s;
-              },
-              past : "%s fa",
-              s : "alcuni secondi",
-              m : "un minuto",
-              mm : "%d minuti",
-              h : "un'ora",
-              hh : "%d ore",
-              d : "un giorno",
-              dd : "%d giorni",
-              M : "un mese",
-              MM : "%d mesi",
-              y : "un anno",
-              yy : "%d anni"
-          },
-          ordinal: '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+        // 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();
 
-/***/ },
-/* 93 */
-/***/ function(module, exports, __webpack_require__) {
+        // we refresh the list with calulation nodes and calculation node indices.
+        this._updateCalculationNodes();
+      }
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : japanese (ja)
-  // author : LI Long : https://github.com/baryon
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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) {
+    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);
+          this[runFunction]();
+        }
       }
-  }(function (moment) {
-      return moment.lang('ja', {
-          months : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
-          weekdaysShort : "日_月_火_水_木_金_土".split("_"),
-          weekdaysMin : "日_月_火_水_木_金_土".split("_"),
-          longDateFormat : {
-              LT : "Ah時m分",
-              L : "YYYY/MM/DD",
-              LL : "YYYY年M月D日",
-              LLL : "YYYY年M月D日LT",
-              LLLL : "YYYY年M月D日LT dddd"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "午前";
-              } else {
-                  return "午後";
-              }
-          },
-          calendar : {
-              sameDay : '[今日] LT',
-              nextDay : '[明日] LT',
-              nextWeek : '[来週]dddd LT',
-              lastDay : '[昨日] LT',
-              lastWeek : '[前週]dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s後",
-              past : "%s前",
-              s : "数秒",
-              m : "1分",
-              mm : "%d分",
-              h : "1時間",
-              hh : "%d時間",
-              d : "1日",
-              dd : "%d日",
-              M : "1ヶ月",
-              MM : "%dヶ月",
-              y : "1年",
-              yy : "%d年"
+    }
+    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) {
+            this[runFunction](args[0],args[1]);
           }
-      });
-  }));
+          else {
+            this[runFunction](argument);
+          }
+        }
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
 
-/***/ },
-/* 94 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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) {
+    if (argument === undefined) {
+      this._switchToSupportSector();
+      this[runFunction]();
+    }
+    else {
+      this._switchToSupportSector();
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
+      }
+      else {
+        this[runFunction](argument);
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Georgian (ka)
-  // author : Irakli Janiashvili : https://github.com/irakli-janiashvili
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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]();
+        }
       }
-  }(function (moment) {
-
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'იანვარი_თებერვალი_მარტი_აპრილი_მაისი_ივნისი_ივლისი_აგვისტო_სექტემბერი_ოქტომბერი_ნოემბერი_დეკემბერი'.split('_'),
-              'accusative': 'იანვარს_თებერვალს_მარტს_აპრილის_მაისს_ივნისს_ივლისს_აგვისტს_სექტემბერს_ოქტომბერს_ნოემბერს_დეკემბერს'.split('_')
-          },
+    }
+    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);
+          }
+        }
+      }
+    }
+    this._loadLatestSector();
+  };
 
-          nounCase = (/D[oD] *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return months[nounCase][m.month()];
+  /**
+   * 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);
+      }
+    }
+  };
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'კვირა_ორშაბათი_სამშაბათი_ოთხშაბათი_ხუთშაბათი_პარასკევი_შაბათი'.split('_'),
-              'accusative': 'კვირას_ორშაბათს_სამშაბათს_ოთხშაბათს_ხუთშაბათს_პარასკევს_შაბათს'.split('_')
-          },
-
-          nounCase = (/(წინა|შემდეგ)/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return weekdays[nounCase][m.day()];
-      }
+  /**
+   * 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"];
+  };
 
-      return moment.lang('ka', {
-          months : monthsCaseReplace,
-          monthsShort : "იან_თებ_მარ_აპრ_მაი_ივნ_ივლ_აგვ_სექ_ოქტ_ნოე_დეკ".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "კვი_ორშ_სამ_ოთხ_ხუთ_პარ_შაბ".split("_"),
-          weekdaysMin : "კვ_ორ_სა_ოთ_ხუ_პა_შა".split("_"),
-          longDateFormat : {
-              LT : "h:mm A",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[დღეს] LT[-ზე]',
-              nextDay : '[ხვალ] LT[-ზე]',
-              lastDay : '[გუშინ] LT[-ზე]',
-              nextWeek : '[შემდეგ] dddd LT[-ზე]',
-              lastWeek : '[წინა] dddd LT-ზე',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : function (s) {
-                  return (/(წამი|წუთი|საათი|წელი)/).test(s) ?
-                      s.replace(/ი$/, "ში") :
-                      s + "ში";
-              },
-              past : function (s) {
-                  if ((/(წამი|წუთი|საათი|დღე|თვე)/).test(s)) {
-                      return s.replace(/(ი|ე)$/, "ის წინ");
-                  }
-                  if ((/წელი/).test(s)) {
-                      return s.replace(/წელი$/, "წლის წინ");
-                  }
-              },
-              s : "რამდენიმე წამი",
-              m : "წუთი",
-              mm : "%d წუთი",
-              h : "საათი",
-              hh : "%d საათი",
-              d : "დღე",
-              dd : "%d დღე",
-              M : "თვე",
-              MM : "%d თვე",
-              y : "წელი",
-              yy : "%d წელი"
-          },
-          ordinal : function (number) {
-              if (number === 0) {
-                  return number;
-              }
 
-              if (number === 1) {
-                  return number + "-ლი";
-              }
+  /**
+   * 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 ((number < 20) || (number <= 100 && (number % 20 === 0)) || (number % 100 === 0)) {
-                  return "მე-" + number;
-              }
+          this._switchToSector(sector,sectorType);
 
-              return number + "-ე";
-          },
-          week : {
-              dow : 1,
-              doy : 7
+          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.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();
+  };
 
 
 /***/ },
-/* 95 */
+/* 126 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : khmer (km)
-  // author : Kruy Vanna : https://github.com/kruyvanna
+  var Node = __webpack_require__(39);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
+        }
       }
-  }(function (moment) {
-      return moment.lang('km', {
-          months: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          monthsShort: "មករា_កុម្ភៈ_មិនា_មេសា_ឧសភា_មិថុនា_កក្កដា_សីហា_កញ្ញា_តុលា_វិច្ឆិកា_ធ្នូ".split("_"),
-          weekdays: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysShort: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          weekdaysMin: "អាទិត្យ_ច័ន្ទ_អង្គារ_ពុធ_ព្រហស្បតិ៍_សុក្រ_សៅរ៍".split("_"),
-          longDateFormat: {
-              LT: "HH:mm",
-              L: "DD/MM/YYYY",
-              LL: "D MMMM YYYY",
-              LLL: "D MMMM YYYY LT",
-              LLLL: "dddd, D MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[ថ្ងៃនៈ ម៉ោង] LT',
-              nextDay: '[ស្អែក ម៉ោង] LT',
-              nextWeek: 'dddd [ម៉ោង] LT',
-              lastDay: '[ម្សិលមិញ ម៉ោង] LT',
-              lastWeek: 'dddd [សប្តាហ៍មុន] [ម៉ោង] LT',
-              sameElse: 'L'
-          },
-          relativeTime: {
-              future: "%sទៀត",
-              past: "%sមុន",
-              s: "ប៉ុន្មានវិនាទី",
-              m: "មួយនាទី",
-              mm: "%d នាទី",
-              h: "មួយម៉ោង",
-              hh: "%d ម៉ោង",
-              d: "មួយថ្ងៃ",
-              dd: "%d ថ្ងៃ",
-              M: "មួយខែ",
-              MM: "%d ខែ",
-              y: "មួយឆ្នាំ",
-              yy: "%d ឆ្នាំ"
-          },
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4 // The week that contains Jan 4th is the first week of the 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._getAllNodesOverlappingWith = function (object) {
+    var overlappingNodes = [];
+    this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes);
+    return overlappingNodes;
+  };
 
-/***/ },
-/* 96 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : korean (ko)
-  //
-  // authors 
-  //
-  // - Kyungwook, Park : https://github.com/kyungw00k
-  // - Jeeeyul Lee <jeeeyul@gmail.com>
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('ko', {
-          months : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          monthsShort : "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
-          weekdays : "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
-          weekdaysShort : "일_월_화_수_목_금_토".split("_"),
-          weekdaysMin : "일_월_화_수_목_금_토".split("_"),
-          longDateFormat : {
-              LT : "A h시 mm분",
-              L : "YYYY.MM.DD",
-              LL : "YYYY년 MMMM D일",
-              LLL : "YYYY년 MMMM D일 LT",
-              LLLL : "YYYY년 MMMM D일 dddd LT"
-          },
-          meridiem : function (hour, minute, isUpper) {
-              return hour < 12 ? '오전' : '오후';
-          },
-          calendar : {
-              sameDay : '오늘 LT',
-              nextDay : '내일 LT',
-              nextWeek : 'dddd LT',
-              lastDay : '어제 LT',
-              lastWeek : '지난주 dddd LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s 후",
-              past : "%s 전",
-              s : "몇초",
-              ss : "%d초",
-              m : "일분",
-              mm : "%d분",
-              h : "한시간",
-              hh : "%d시간",
-              d : "하루",
-              dd : "%d일",
-              M : "한달",
-              MM : "%d달",
-              y : "일년",
-              yy : "%d년"
-          },
-          ordinal : '%d일',
-          meridiemParse : /(오전|오후)/,
-          isPM : function (token) {
-              return token === "오후";
-          }
-      });
-  }));
+  /**
+   * 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
+    };
+  };
+
+
+  /**
+   * 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 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;
+    }
+  };
 
-/***/ },
-/* 97 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Luxembourgish (lb)
-  // author : mweimerskirch : https://github.com/mweimerskirch
+  /**
+   * 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);
+        }
+      }
+    }
+  };
 
-  // Note: Luxembourgish has a very particular phonological rule ("Eifeler Regel") that causes the
-  // deletion of the final "n" in certain contexts. That's what the "eifelerRegelAppliesToWeekday"
-  // and "eifelerRegelAppliesToNumber" methods are meant for
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function processRelativeTime(number, withoutSuffix, key, isFuture) {
-          var format = {
-              'm': ['eng Minutt', 'enger Minutt'],
-              'h': ['eng Stonn', 'enger Stonn'],
-              'd': ['een Dag', 'engem Dag'],
-              'dd': [number + ' Deeg', number + ' Deeg'],
-              'M': ['ee Mount', 'engem Mount'],
-              'MM': [number + ' Méint', number + ' Méint'],
-              'y': ['ee Joer', 'engem Joer'],
-              'yy': [number + ' Joer', number + ' Joer']
-          };
-          return withoutSuffix ? format[key][0] : format[key][1];
-      }
+  /**
+   * 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;
+  };
 
-      function processFutureTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "a " + string;
-          }
-          return "an " + string;
-      }
+  /**
+   * 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);
 
-      function processPastTime(string) {
-          var number = string.substr(0, string.indexOf(' '));
-          if (eifelerRegelAppliesToNumber(number)) {
-              return "viru " + string;
-          }
-          return "virun " + string;
-      }
+    if (overlappingEdges.length > 0) {
+      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
+    }
+    else {
+      return null;
+    }
+  };
 
-      function processLastWeek(string1) {
-          var weekday = this.format('d');
-          if (eifelerRegelAppliesToWeekday(weekday)) {
-              return '[Leschte] dddd [um] LT';
-          }
-          return '[Leschten] dddd [um] LT';
-      }
 
-      /**
-       * Returns true if the word before the given week day loses the "-n" ending.
-       * e.g. "Leschten Dënschdeg" but "Leschte Méindeg"
-       *
-       * @param weekday {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToWeekday(weekday) {
-          weekday = parseInt(weekday, 10);
-          switch (weekday) {
-          case 0: // Sonndeg
-          case 1: // Méindeg
-          case 3: // Mëttwoch
-          case 5: // Freideg
-          case 6: // Samschdeg
-              return true;
-          default: // 2 Dënschdeg, 4 Donneschdeg
-              return false;
-          }
-      }
+  /**
+   * 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;
+    }
+  };
 
-      /**
-       * Returns true if the word before the given number loses the "-n" ending.
-       * e.g. "an 10 Deeg" but "a 5 Deeg"
-       *
-       * @param number {integer}
-       * @returns {boolean}
-       */
-      function eifelerRegelAppliesToNumber(number) {
-          number = parseInt(number, 10);
-          if (isNaN(number)) {
-              return false;
-          }
-          if (number < 0) {
-              // Negative Number --> always true
-              return true;
-          } else if (number < 10) {
-              // Only 1 digit
-              if (4 <= number && number <= 7) {
-                  return true;
-              }
-              return false;
-          } else if (number < 100) {
-              // 2 digits
-              var lastDigit = number % 10, firstDigit = number / 10;
-              if (lastDigit === 0) {
-                  return eifelerRegelAppliesToNumber(firstDigit);
-              }
-              return eifelerRegelAppliesToNumber(lastDigit);
-          } else if (number < 10000) {
-              // 3 or 4 digits --> recursively check first digit
-              while (number >= 10) {
-                  number = number / 10;
-              }
-              return eifelerRegelAppliesToNumber(number);
-          } else {
-              // Anything larger than 4 digits: recursively check first n-3 digits
-              number = number / 1000;
-              return eifelerRegelAppliesToNumber(number);
-          }
+  /**
+   * 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;
+    }
+  };
+
+
+  /**
+   * 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];
+    }
+  };
+
+  /**
+   * 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();
       }
+    }
 
-      return moment.lang('lb', {
-          months: "Januar_Februar_Mäerz_Abrëll_Mee_Juni_Juli_August_September_Oktober_November_Dezember".split("_"),
-          monthsShort: "Jan._Febr._Mrz._Abr._Mee_Jun._Jul._Aug._Sept._Okt._Nov._Dez.".split("_"),
-          weekdays: "Sonndeg_Méindeg_Dënschdeg_Mëttwoch_Donneschdeg_Freideg_Samschdeg".split("_"),
-          weekdaysShort: "So._Mé._Dë._Më._Do._Fr._Sa.".split("_"),
-          weekdaysMin: "So_Mé_Dë_Më_Do_Fr_Sa".split("_"),
-          longDateFormat: {
-              LT: "H:mm [Auer]",
-              L: "DD.MM.YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: "[Haut um] LT",
-              sameElse: "L",
-              nextDay: '[Muer um] LT',
-              nextWeek: 'dddd [um] LT',
-              lastDay: '[Gëschter um] LT',
-              lastWeek: processLastWeek
-          },
-          relativeTime: {
-              future: processFutureTime,
-              past: processPastTime,
-              s: "e puer Sekonnen",
-              m: processRelativeTime,
-              mm: "%d Minutten",
-              h: processRelativeTime,
-              hh: "%d Stonnen",
-              d: processRelativeTime,
-              dd: processRelativeTime,
-              M: processRelativeTime,
-              MM: processRelativeTime,
-              y: processRelativeTime,
-              yy: processRelativeTime
-          },
-          ordinal: '%d.',
-          week: {
-              dow: 1, // Monday is the first day of the week.
-              doy: 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    this.selectionObj = {nodes:{},edges:{}};
 
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-/***/ },
-/* 98 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * Unselect all clusters. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
+   */
+  exports._unselectClusters = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Lithuanian (lt)
-  // author : Mindaugas Mozūras : https://github.com/mmozuras
+    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]);
+        }
+      }
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
+
+
+  /**
+   * 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;
       }
-  }(function (moment) {
-      var units = {
-          "m" : "minutė_minutės_minutę",
-          "mm": "minutės_minučių_minutes",
-          "h" : "valanda_valandos_valandą",
-          "hh": "valandos_valandų_valandas",
-          "d" : "diena_dienos_dieną",
-          "dd": "dienos_dienų_dienas",
-          "M" : "mėnuo_mėnesio_mėnesį",
-          "MM": "mėnesiai_mėnesių_mėnesius",
-          "y" : "metai_metų_metus",
-          "yy": "metai_metų_metus"
-      },
-      weekDays = "sekmadienis_pirmadienis_antradienis_trečiadienis_ketvirtadienis_penktadienis_šeštadienis".split("_");
+    }
+    return count;
+  };
 
-      function translateSeconds(number, withoutSuffix, key, isFuture) {
-          if (withoutSuffix) {
-              return "kelios sekundės";
-          } else {
-              return isFuture ? "kelių sekundžių" : "kelias sekundes";
-          }
+  /**
+   * 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;
+  };
 
-      function translateSingular(number, withoutSuffix, key, isFuture) {
-          return withoutSuffix ? forms(key)[0] : (isFuture ? forms(key)[1] : forms(key)[2]);
+  /**
+   * 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;
+  };
 
-      function special(number) {
-          return number % 10 === 0 || (number > 10 && number < 20);
+
+  /**
+   * 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;
+  };
 
-      function forms(key) {
-          return units[key].split("_");
+
+  /**
+   * 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;
+  };
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          if (number === 1) {
-              return result + translateSingular(number, withoutSuffix, key[0], isFuture);
-          } else if (withoutSuffix) {
-              return result + (special(number) ? forms(key)[1] : forms(key)[0]);
-          } else {
-              if (isFuture) {
-                  return result + forms(key)[1];
-              } else {
-                  return result + (special(number) ? forms(key)[1] : forms(key)[2]);
-              }
-          }
+  /**
+   * 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;
+  };
 
-      function relativeWeekDay(moment, format) {
-          var nominative = format.indexOf('dddd HH:mm') === -1,
-              weekDay = weekDays[moment.day()];
 
-          return nominative ? weekDay : weekDay.substring(0, weekDay.length - 2) + "į";
+  /**
+   * 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;
+  };
 
-      return moment.lang("lt", {
-          months : "sausio_vasario_kovo_balandžio_gegužės_biržėlio_liepos_rugpjūčio_rugsėjo_spalio_lapkričio_gruodžio".split("_"),
-          monthsShort : "sau_vas_kov_bal_geg_bir_lie_rgp_rgs_spa_lap_grd".split("_"),
-          weekdays : relativeWeekDay,
-          weekdaysShort : "Sek_Pir_Ant_Tre_Ket_Pen_Šeš".split("_"),
-          weekdaysMin : "S_P_A_T_K_Pn_Š".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY [m.] MMMM D [d.]",
-              LLL : "YYYY [m.] MMMM D [d.], LT [val.]",
-              LLLL : "YYYY [m.] MMMM D [d.], dddd, LT [val.]",
-              l : "YYYY-MM-DD",
-              ll : "YYYY [m.] MMMM D [d.]",
-              lll : "YYYY [m.] MMMM D [d.], LT [val.]",
-              llll : "YYYY [m.] MMMM D [d.], ddd, LT [val.]"
-          },
-          calendar : {
-              sameDay : "[Šiandien] LT",
-              nextDay : "[Rytoj] LT",
-              nextWeek : "dddd LT",
-              lastDay : "[Vakar] LT",
-              lastWeek : "[Praėjusį] dddd LT",
-              sameElse : "L"
-          },
-          relativeTime : {
-              future : "po %s",
-              past : "prieš %s",
-              s : translateSeconds,
-              m : translateSingular,
-              mm : translate,
-              h : translateSingular,
-              hh : translate,
-              d : translateSingular,
-              dd : translate,
-              M : translateSingular,
-              MM : translate,
-              y : translateSingular,
-              yy : translate
-          },
-          ordinal : function (number) {
-              return number + '-oji';
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
+  /**
+   * 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);
+    }
+  };
 
-/***/ },
-/* 99 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : latvian (lv)
-  // author : Kristaps Karlsons : https://github.com/skakri
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var units = {
-          'mm': 'minūti_minūtes_minūte_minūtes',
-          'hh': 'stundu_stundas_stunda_stundas',
-          'dd': 'dienu_dienas_diena_dienas',
-          'MM': 'mēnesi_mēnešus_mēnesis_mēneši',
-          'yy': 'gadu_gadus_gads_gadi'
-      };
+  /**
+   * 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);
+    }
+  };
 
-      function format(word, number, withoutSuffix) {
-          var forms = word.split('_');
-          if (withoutSuffix) {
-              return number % 10 === 1 && number !== 11 ? forms[2] : forms[3];
-          } else {
-              return number % 10 === 1 && number !== 11 ? forms[0] : forms[1];
-          }
-      }
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          return number + ' ' + format(units[key], number, withoutSuffix);
-      }
 
-      return moment.lang('lv', {
-          months : "janvāris_februāris_marts_aprīlis_maijs_jūnijs_jūlijs_augusts_septembris_oktobris_novembris_decembris".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jūn_jūl_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "svētdiena_pirmdiena_otrdiena_trešdiena_ceturtdiena_piektdiena_sestdiena".split("_"),
-          weekdaysShort : "Sv_P_O_T_C_Pk_S".split("_"),
-          weekdaysMin : "Sv_P_O_T_C_Pk_S".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "YYYY. [gada] D. MMMM",
-              LLL : "YYYY. [gada] D. MMMM, LT",
-              LLLL : "YYYY. [gada] D. MMMM, dddd, LT"
-          },
-          calendar : {
-              sameDay : '[Šodien pulksten] LT',
-              nextDay : '[Rīt pulksten] LT',
-              nextWeek : 'dddd [pulksten] LT',
-              lastDay : '[Vakar pulksten] LT',
-              lastWeek : '[Pagājušā] dddd [pulksten] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s vēlāk",
-              past : "%s agrāk",
-              s : "dažas sekundes",
-              m : "minūti",
-              mm : relativeTimeWithPlural,
-              h : "stundu",
-              hh : relativeTimeWithPlural,
-              d : "dienu",
-              dd : relativeTimeWithPlural,
-              M : "mēnesi",
-              MM : relativeTimeWithPlural,
-              y : "gadu",
-              yy : relativeTimeWithPlural
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    if (highlightEdges === undefined) {
+      highlightEdges = true;
+    }
+
+    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
+      this._unselectAll(true);
+    }
 
-/***/ },
-/* 100 */
-/***/ function(module, exports, __webpack_require__) {
+    if (object.selected == false) {
+      object.select();
+      this._addToSelection(object);
+      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
+        this._selectConnectedEdges(object);
+      }
+    }
+    else {
+      object.unselect();
+      this._removeFromSelection(object);
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : macedonian (mk)
-  // author : Borislav Mickov : https://github.com/B0k0
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+
+  /**
+   * 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});
       }
-  }(function (moment) {
-      return moment.lang('mk', {
-          months : "јануари_февруари_март_април_мај_јуни_јули_август_септември_октомври_ноември_декември".split("_"),
-          monthsShort : "јан_фев_мар_апр_мај_јун_јул_авг_сеп_окт_ное_дек".split("_"),
-          weekdays : "недела_понеделник_вторник_среда_четврток_петок_сабота".split("_"),
-          weekdaysShort : "нед_пон_вто_сре_чет_пет_саб".split("_"),
-          weekdaysMin : "нe_пo_вт_ср_че_пе_сa".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "D.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Денес во] LT',
-              nextDay : '[Утре во] LT',
-              nextWeek : 'dddd [во] LT',
-              lastDay : '[Вчера во] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[Во изминатата] dddd [во] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[Во изминатиот] dddd [во] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "после %s",
-              past : "пред %s",
-              s : "неколку секунди",
-              m : "минута",
-              mm : "%d минути",
-              h : "час",
-              hh : "%d часа",
-              d : "ден",
-              dd : "%d дена",
-              M : "месец",
-              MM : "%d месеци",
-              y : "година",
-              yy : "%d години"
-          },
-          ordinal : function (number) {
-              var lastDigit = number % 10,
-                  last2Digits = number % 100;
-              if (number === 0) {
-                  return number + '-ев';
-              } else if (last2Digits === 0) {
-                  return number + '-ен';
-              } else if (last2Digits > 10 && last2Digits < 20) {
-                  return number + '-ти';
-              } else if (lastDigit === 1) {
-                  return number + '-ви';
-              } else if (lastDigit === 2) {
-                  return number + '-ри';
-              } else if (lastDigit === 7 || lastDigit === 8) {
-                  return number + '-ми';
-              } else {
-                  return number + '-ти';
-              }
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
+    }
+  };
 
 
-/***/ },
-/* 101 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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) {
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : malayalam (ml)
-  // author : Floyd Pink : https://github.com/floydpink
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
       }
-  }(function (moment) {
-      return moment.lang('ml', {
-          months : 'ജനുവരി_ഫെബ്രുവരി_മാർച്ച്_ഏപ്രിൽ_മേയ്_ജൂൺ_ജൂലൈ_ഓഗസ്റ്റ്_സെപ്റ്റംബർ_ഒക്ടോബർ_നവംബർ_ഡിസംബർ'.split("_"),
-          monthsShort : 'ജനു._ഫെബ്രു._മാർ._ഏപ്രി._മേയ്_ജൂൺ_ജൂലൈ._ഓഗ._സെപ്റ്റ._ഒക്ടോ._നവം._ഡിസം.'.split("_"),
-          weekdays : 'ഞായറാഴ്ച_തിങ്കളാഴ്ച_ചൊവ്വാഴ്ച_ബുധനാഴ്ച_വ്യാഴാഴ്ച_വെള്ളിയാഴ്ച_ശനിയാഴ്ച'.split("_"),
-          weekdaysShort : 'ഞായർ_തിങ്കൾ_ചൊവ്വ_ബുധൻ_വ്യാഴം_വെള്ളി_ശനി'.split("_"),
-          weekdaysMin : 'ഞാ_തി_ചൊ_ബു_വ്യാ_വെ_ശ'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm -നു",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[ഇന്ന്] LT',
-              nextDay : '[നാളെ] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[ഇന്നലെ] LT',
-              lastWeek : '[കഴിഞ്ഞ] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s കഴിഞ്ഞ്",
-              past : "%s മുൻപ്",
-              s : "അൽപ നിമിഷങ്ങൾ",
-              m : "ഒരു മിനിറ്റ്",
-              mm : "%d മിനിറ്റ്",
-              h : "ഒരു മണിക്കൂർ",
-              hh : "%d മണിക്കൂർ",
-              d : "ഒരു ദിവസം",
-              dd : "%d ദിവസം",
-              M : "ഒരു മാസം",
-              MM : "%d മാസം",
-              y : "ഒരു വർഷം",
-              yy : "%d വർഷം"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "രാത്രി";
-              } else if (hour < 12) {
-                  return "രാവിലെ";
-              } else if (hour < 17) {
-                  return "ഉച്ച കഴിഞ്ഞ്";
-              } else if (hour < 20) {
-                  return "വൈകുന്നേരം";
-              } else {
-                  return "രാത്രി";
-              }
-          }
-      });
-  }));
+      else {
+        this._unselectAll();
+      }
+    }
+    this.emit("click", this.getSelection());
+    this._redraw();
+  };
 
 
-/***/ },
-/* 102 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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);
+    }
+    this.emit("doubleClick", this.getSelection());
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Marathi (mr)
-  // author : Harshad Kale : https://github.com/kalehv
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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);
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+    }
+    this._redraw();
+  };
 
-      return moment.lang('mr', {
-          months : 'जानेवारी_फेब्रुवारी_मार्च_एप्रिल_मे_जून_जुलै_ऑगस्ट_सप्टेंबर_ऑक्टोबर_नोव्हेंबर_डिसेंबर'.split("_"),
-          monthsShort: 'जाने._फेब्रु._मार्च._एप्रि._मे._जून._जुलै._ऑग._सप्टें._ऑक्टो._नोव्हें._डिसें.'.split("_"),
-          weekdays : 'रविवार_सोमवार_मंगळवार_बुधवार_गुरूवार_शुक्रवार_शनिवार'.split("_"),
-          weekdaysShort : 'रवि_सोम_मंगळ_बुध_गुरू_शुक्र_शनि'.split("_"),
-          weekdaysMin : 'र_सो_मं_बु_गु_शु_श'.split("_"),
-          longDateFormat : {
-              LT : "A h:mm वाजता",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[उद्या] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[काल] LT',
-              lastWeek: '[मागील] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s नंतर",
-              past : "%s पूर्वी",
-              s : "सेकंद",
-              m: "एक मिनिट",
-              mm: "%d मिनिटे",
-              h : "एक तास",
-              hh : "%d तास",
-              d : "एक दिवस",
-              dd : "%d दिवस",
-              M : "एक महिना",
-              MM : "%d महिने",
-              y : "एक वर्ष",
-              yy : "%d वर्षे"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem: function (hour, minute, isLower)
-          {
-              if (hour < 4) {
-                  return "रात्री";
-              } else if (hour < 10) {
-                  return "सकाळी";
-              } else if (hour < 17) {
-                  return "दुपारी";
-              } else if (hour < 20) {
-                  return "सायंकाळी";
-              } else {
-                  return "रात्री";
-              }
-          },
-          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.
-          }
-      });
-  }));
+
+  /**
+   * handle the onRelease event. These functions are here for the navigation controls module.
+   *
+    * @private
+   */
+  exports._handleOnRelease = function(pointer) {
+
+  };
 
 
-/***/ },
-/* 103 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Bahasa Malaysia (ms-MY)
-  // author : Weldan Jamili : https://github.com/weldan
+  /**
+   *
+   * 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};
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   *
+   * retrieve the currently selected nodes
+   * @return {String[]} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedNodes = function() {
+    var idArray = [];
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        idArray.push(nodeId);
       }
-  }(function (moment) {
-      return moment.lang('ms-my', {
-          months : "Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember".split("_"),
-          monthsShort : "Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogs_Sep_Okt_Nov_Dis".split("_"),
-          weekdays : "Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu".split("_"),
-          weekdaysShort : "Ahd_Isn_Sel_Rab_Kha_Jum_Sab".split("_"),
-          weekdaysMin : "Ah_Is_Sl_Rb_Km_Jm_Sb".split("_"),
-          longDateFormat : {
-              LT : "HH.mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY [pukul] LT",
-              LLLL : "dddd, D MMMM YYYY [pukul] LT"
-          },
-          meridiem : function (hours, minutes, isLower) {
-              if (hours < 11) {
-                  return 'pagi';
-              } else if (hours < 15) {
-                  return 'tengahari';
-              } else if (hours < 19) {
-                  return 'petang';
-              } else {
-                  return 'malam';
-              }
-          },
-          calendar : {
-              sameDay : '[Hari ini pukul] LT',
-              nextDay : '[Esok pukul] LT',
-              nextWeek : 'dddd [pukul] LT',
-              lastDay : '[Kelmarin pukul] LT',
-              lastWeek : 'dddd [lepas pukul] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "dalam %s",
-              past : "%s yang lepas",
-              s : "beberapa saat",
-              m : "seminit",
-              mm : "%d minit",
-              h : "sejam",
-              hh : "%d jam",
-              d : "sehari",
-              dd : "%d hari",
-              M : "sebulan",
-              MM : "%d bulan",
-              y : "setahun",
-              yy : "%d tahun"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the 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 = [];
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        idArray.push(edgeId);
+      }
+    }
+    return idArray;
+  };
 
 
-/***/ },
-/* 104 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * select zero or more nodes
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.setSelection = function(selection) {
+    var i, iMax, id;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian bokmål (nb)
-  // authors : Espen Hovlandsdal : https://github.com/rexxars
-  //           Sigurd Gartmann : https://github.com/sigurdga
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
       }
-  }(function (moment) {
-      return moment.lang('nb', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
-          weekdays : "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
-          weekdaysShort : "sø._ma._ti._on._to._fr._lø.".split("_"),
-          weekdaysMin : "sø_ma_ti_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "H.mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY [kl.] LT",
-              LLLL : "dddd D. MMMM YYYY [kl.] LT"
-          },
-          calendar : {
-              sameDay: '[i dag kl.] LT',
-              nextDay: '[i morgen kl.] LT',
-              nextWeek: 'dddd [kl.] LT',
-              lastDay: '[i går kl.] LT',
-              lastWeek: '[forrige] dddd [kl.] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "for %s siden",
-              s : "noen sekunder",
-              m : "ett minutt",
-              mm : "%d minutter",
-              h : "en time",
-              hh : "%d timer",
-              d : "en dag",
-              dd : "%d dager",
-              M : "en måned",
-              MM : "%d måneder",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      this._selectObject(node,true,true);
+    }
 
+    console.log("setSelection is deprecated. Please use selectNodes instead.")
 
-/***/ },
-/* 105 */
-/***/ function(module, exports, __webpack_require__) {
+    this.redraw();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : nepali/nepalese
-  // author : suvash : https://github.com/suvash
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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 (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
+
+    // first unselect any selected node
+    this._unselectAll(true);
+
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
+
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
       }
-  }(function (moment) {
-      var symbolMap = {
-          '1': '१',
-          '2': '२',
-          '3': '३',
-          '4': '४',
-          '5': '५',
-          '6': '६',
-          '7': '७',
-          '8': '८',
-          '9': '९',
-          '0': '०'
-      },
-      numberMap = {
-          '१': '1',
-          '२': '2',
-          '३': '3',
-          '४': '4',
-          '५': '5',
-          '६': '6',
-          '७': '7',
-          '८': '8',
-          '९': '9',
-          '०': '0'
-      };
+      this._selectObject(node,true,true,highlightEdges);
+    }
+    this.redraw();
+  };
 
-      return moment.lang('ne', {
-          months : 'जनवरी_फेब्रुवरी_मार्च_अप्रिल_मई_जुन_जुलाई_अगष्ट_सेप्टेम्बर_अक्टोबर_नोभेम्बर_डिसेम्बर'.split("_"),
-          monthsShort : 'जन._फेब्रु._मार्च_अप्रि._मई_जुन_जुलाई._अग._सेप्ट._अक्टो._नोभे._डिसे.'.split("_"),
-          weekdays : 'आइतबार_सोमबार_मङ्गलबार_बुधबार_बिहिबार_शुक्रबार_शनिबार'.split("_"),
-          weekdaysShort : 'आइत._सोम._मङ्गल._बुध._बिहि._शुक्र._शनि.'.split("_"),
-          weekdaysMin : 'आइ._सो._मङ्_बु._बि._शु._श.'.split("_"),
-          longDateFormat : {
-              LT : "Aको h:mm बजे",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          preparse: function (string) {
-              return string.replace(/[१२३४५६७८९०]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 3) {
-                  return "राती";
-              } else if (hour < 10) {
-                  return "बिहान";
-              } else if (hour < 15) {
-                  return "दिउँसो";
-              } else if (hour < 18) {
-                  return "बेलुका";
-              } else if (hour < 20) {
-                  return "साँझ";
-              } else {
-                  return "राती";
-              }
-          },
-          calendar : {
-              sameDay : '[आज] LT',
-              nextDay : '[भोली] LT',
-              nextWeek : '[आउँदो] dddd[,] LT',
-              lastDay : '[हिजो] LT',
-              lastWeek : '[गएको] dddd[,] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%sमा",
-              past : "%s अगाडी",
-              s : "केही समय",
-              m : "एक मिनेट",
-              mm : "%d मिनेट",
-              h : "एक घण्टा",
-              hh : "%d घण्टा",
-              d : "एक दिन",
-              dd : "%d दिन",
-              M : "एक महिना",
-              MM : "%d महिना",
-              y : "एक बर्ष",
-              yy : "%d बर्ष"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+  /**
+   * 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 (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-/***/ },
-/* 106 */
-/***/ function(module, exports, __webpack_require__) {
+    // first unselect any selected node
+    this._unselectAll(true);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : dutch (nl)
-  // author : Joris Röling : https://github.com/jjupiter
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var edge = this.edges[id];
+      if (!edge) {
+        throw new RangeError('Edge with id "' + id + '" not found');
       }
-  }(function (moment) {
-      var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"),
-          monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_");
+      this._selectObject(edge,true,true,highlightEdges);
+    }
+    this.redraw();
+  };
 
-      return moment.lang('nl', {
-          months : "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),
-          monthsShort : function (m, format) {
-              if (/-MMM-/.test(format)) {
-                  return monthsShortWithoutDots[m.month()];
-              } else {
-                  return monthsShortWithDots[m.month()];
-              }
-          },
-          weekdays : "zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),
-          weekdaysShort : "zo._ma._di._wo._do._vr._za.".split("_"),
-          weekdaysMin : "Zo_Ma_Di_Wo_Do_Vr_Za".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD-MM-YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[vandaag om] LT',
-              nextDay: '[morgen om] LT',
-              nextWeek: 'dddd [om] LT',
-              lastDay: '[gisteren om] LT',
-              lastWeek: '[afgelopen] dddd [om] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "over %s",
-              past : "%s geleden",
-              s : "een paar seconden",
-              m : "één minuut",
-              mm : "%d minuten",
-              h : "één uur",
-              hh : "%d uur",
-              d : "één dag",
-              dd : "%d dagen",
-              M : "één maand",
-              MM : "%d maanden",
-              y : "één jaar",
-              yy : "%d jaar"
-          },
-          ordinal : function (number) {
-              return number + ((number === 1 || number === 8 || number >= 20) ? 'ste' : 'de');
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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];
+        }
+      }
+    }
+  };
 
 
 /***/ },
-/* 107 */
+/* 127 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : norwegian nynorsk (nn)
-  // author : https://github.com/mechuwind
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(39);
+  var Edge = __webpack_require__(38);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * clears the toolbar div element of children
+   *
+   * @private
+   */
+  exports._clearManipulatorBar = function() {
+    while (this.manipulationDiv.hasChildNodes()) {
+      this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+    }
+  };
+
+  /**
+   * 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];
       }
-  }(function (moment) {
-      return moment.lang('nn', {
-          months : "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),
-          monthsShort : "jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des".split("_"),
-          weekdays : "sundag_måndag_tysdag_onsdag_torsdag_fredag_laurdag".split("_"),
-          weekdaysShort : "sun_mån_tys_ons_tor_fre_lau".split("_"),
-          weekdaysMin : "su_må_ty_on_to_fr_lø".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[I dag klokka] LT',
-              nextDay: '[I morgon klokka] LT',
-              nextWeek: 'dddd [klokka] LT',
-              lastDay: '[I går klokka] LT',
-              lastWeek: '[Føregåande] dddd [klokka] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "for %s sidan",
-              s : "nokre sekund",
-              m : "eit minutt",
-              mm : "%d minutt",
-              h : "ein time",
-              hh : "%d timar",
-              d : "ein dag",
-              dd : "%d dagar",
-              M : "ein månad",
-              MM : "%d månader",
-              y : "eit år",
-              yy : "%d år"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
+
+  /**
+   * Enable or disable edit-mode.
+   *
+   * @private
+   */
+  exports._toggleEditMode = function() {
+    this.editMode = !this.editMode;
+    var toolbar = document.getElementById("network-manipulationDiv");
+    var closeDiv = document.getElementById("network-manipulation-closeDiv");
+    var editModeDiv = document.getElementById("network-manipulation-editMode");
+    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()
+  };
 
+  /**
+   * 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);
+    }
 
-/***/ },
-/* 108 */
-/***/ function(module, exports, __webpack_require__) {
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+      this.controlNodesActive = false;
+    }
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : polish (pl)
-  // author : Rafal Hirsz : https://github.com/evoL
+    // restore overloaded functions
+    this._restoreOverloadedFunctions();
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      var monthsNominative = "styczeń_luty_marzec_kwiecień_maj_czerwiec_lipiec_sierpień_wrzesień_październik_listopad_grudzień".split("_"),
-          monthsSubjective = "stycznia_lutego_marca_kwietnia_maja_czerwca_lipca_sierpnia_września_października_listopada_grudnia".split("_");
+    // resume calculation
+    this.freezeSimulation = false;
 
-      function plural(n) {
-          return (n % 10 < 5) && (n % 10 > 1) && ((~~(n / 10) % 10) !== 1);
+    // reset global variables
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
+
+    if (this.editMode == true) {
+      while (this.manipulationDiv.hasChildNodes()) {
+        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+      }
+      // add the icons to the manipulator div
+      this.manipulationDiv.innerHTML = "" +
+        "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
+        "<div class='network-seperatorLine'></div>" +
+        "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
+          "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+      }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='network-seperatorLine'></div>" +
+          "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
+            "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
       }
 
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'minuta' : 'minutę';
-          case 'mm':
-              return result + (plural(number) ? 'minuty' : 'minut');
-          case 'h':
-              return withoutSuffix  ? 'godzina'  : 'godzinę';
-          case 'hh':
-              return result + (plural(number) ? 'godziny' : 'godzin');
-          case 'MM':
-              return result + (plural(number) ? 'miesiące' : 'miesięcy');
-          case 'yy':
-              return result + (plural(number) ? 'lata' : 'lat');
-          }
+
+      // bind the icons
+      var addNodeButton = document.getElementById("network-manipulate-addNode");
+      addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
+      var addEdgeButton = document.getElementById("network-manipulate-connectNode");
+      addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        var editButton = document.getElementById("network-manipulate-editNode");
+        editButton.onclick = this._editNode.bind(this);
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        var editButton = document.getElementById("network-manipulate-editEdge");
+        editButton.onclick = this._createEditEdgeToolbar.bind(this);
+      }
+      if (this._selectionIsEmpty() == false) {
+        var deleteButton = document.getElementById("network-manipulate-delete");
+        deleteButton.onclick = this._deleteSelected.bind(this);
       }
+      var closeDiv = document.getElementById("network-manipulation-closeDiv");
+      closeDiv.onclick = this._toggleEditMode.bind(this);
 
-      return moment.lang('pl', {
-          months : function (momentToFormat, format) {
-              if (/D MMMM/.test(format)) {
-                  return monthsSubjective[momentToFormat.month()];
-              } else {
-                  return monthsNominative[momentToFormat.month()];
-              }
-          },
-          monthsShort : "sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru".split("_"),
-          weekdays : "niedziela_poniedziałek_wtorek_środa_czwartek_piątek_sobota".split("_"),
-          weekdaysShort : "nie_pon_wt_śr_czw_pt_sb".split("_"),
-          weekdaysMin : "N_Pn_Wt_Śr_Cz_Pt_So".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Dziś o] LT',
-              nextDay: '[Jutro o] LT',
-              nextWeek: '[W] dddd [o] LT',
-              lastDay: '[Wczoraj o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[W zeszłą niedzielę o] LT';
-                  case 3:
-                      return '[W zeszłą środę o] LT';
-                  case 6:
-                      return '[W zeszłą sobotę o] LT';
-                  default:
-                      return '[W zeszły] dddd [o] LT';
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "%s temu",
-              s : "kilka sekund",
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : "1 dzień",
-              dd : '%d dni',
-              M : "miesiąc",
-              MM : translate,
-              y : "rok",
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      this.boundFunction = this._createManipulatorBar.bind(this);
+      this.on('select', this.boundFunction);
+    }
+    else {
+      this.editModeDiv.innerHTML = "" +
+        "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
+      var editModeButton = document.getElementById("network-manipulate-editModeButton");
+      editModeButton.onclick = this._toggleEditMode.bind(this);
+    }
+  };
 
 
-/***/ },
-/* 109 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : brazilian portuguese (pt-br)
-  // author : Caio Ribeiro Pereira : https://github.com/caio-ribeiro-pereira
+  /**
+   * Create the toolbar for adding Nodes
+   *
+   * @private
+   */
+  exports._createAddNodeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('pt-br', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY [às] LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY [às] LT"
-          },
-          calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "em %s",
-              past : "%s atrás",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº'
-      });
-  }));
+    // create the toolbar contents
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
 
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-/***/ },
-/* 110 */
-/***/ function(module, exports, __webpack_require__) {
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._addNode.bind(this);
+    this.on('select', this.boundFunction);
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : portuguese (pt)
-  // author : Jefferson : https://github.com/jalex79
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('pt', {
-          months : "janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro".split("_"),
-          monthsShort : "jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez".split("_"),
-          weekdays : "domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado".split("_"),
-          weekdaysShort : "dom_seg_ter_qua_qui_sex_sáb".split("_"),
-          weekdaysMin : "dom_2ª_3ª_4ª_5ª_6ª_sáb".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D [de] MMMM [de] YYYY",
-              LLL : "D [de] MMMM [de] YYYY LT",
-              LLLL : "dddd, D [de] MMMM [de] YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Hoje às] LT',
-              nextDay: '[Amanhã às] LT',
-              nextWeek: 'dddd [às] LT',
-              lastDay: '[Ontem às] LT',
-              lastWeek: function () {
-                  return (this.day() === 0 || this.day() === 6) ?
-                      '[Último] dddd [às] LT' : // Saturday + Sunday
-                      '[Última] dddd [às] LT'; // Monday - Friday
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "em %s",
-              past : "há %s",
-              s : "segundos",
-              m : "um minuto",
-              mm : "%d minutos",
-              h : "uma hora",
-              hh : "%d horas",
-              d : "um dia",
-              dd : "%d dias",
-              M : "um mês",
-              MM : "%d meses",
-              y : "um ano",
-              yy : "%d anos"
-          },
-          ordinal : '%dº',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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);
+    }
 
-/***/ },
-/* 111 */
-/***/ function(module, exports, __webpack_require__) {
+    this._unselectAll();
+    this.forceAppendSelection = false;
+    this.blockConnectingEdgeSelection = true;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : romanian (ro)
-  // author : Vlad Gurdiga : https://github.com/gurdiga
-  // author : Valentin Agachi : https://github.com/avaly
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+        "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+        "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'minute',
-              'hh': 'ore',
-              'dd': 'zile',
-              'MM': 'luni',
-              'yy': 'ani'
-          },
-              separator = ' ';
-          if (number % 100 >= 20 || (number >= 100 && number % 100 === 0)) {
-              separator = ' de ';
-          }
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
 
-          return number + separator + format[key];
-      }
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    this.boundFunction = this._handleConnect.bind(this);
+    this.on('select', this.boundFunction);
 
-      return moment.lang('ro', {
-          months : "ianuarie_februarie_martie_aprilie_mai_iunie_iulie_august_septembrie_octombrie_noiembrie_decembrie".split("_"),
-          monthsShort : "ian._febr._mart._apr._mai_iun._iul._aug._sept._oct._nov._dec.".split("_"),
-          weekdays : "duminică_luni_marți_miercuri_joi_vineri_sâmbătă".split("_"),
-          weekdaysShort : "Dum_Lun_Mar_Mie_Joi_Vin_Sâm".split("_"),
-          weekdaysMin : "Du_Lu_Ma_Mi_Jo_Vi_Sâ".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY H:mm",
-              LLLL : "dddd, D MMMM YYYY H:mm"
-          },
-          calendar : {
-              sameDay: "[azi la] LT",
-              nextDay: '[mâine la] LT',
-              nextWeek: 'dddd [la] LT',
-              lastDay: '[ieri la] LT',
-              lastWeek: '[fosta] dddd [la] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "peste %s",
-              past : "%s în urmă",
-              s : "câteva secunde",
-              m : "un minut",
-              mm : relativeTimeWithPlural,
-              h : "o oră",
-              hh : relativeTimeWithPlural,
-              d : "o zi",
-              dd : relativeTimeWithPlural,
-              M : "o lună",
-              MM : relativeTimeWithPlural,
-              y : "un an",
-              yy : relativeTimeWithPlural
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"] = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+    this._handleTouch = this._handleConnect;
+    this._handleOnRelease = this._finishConnect;
 
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-/***/ },
-/* 112 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * create the toolbar to edit edges
+   *
+   * @private
+   */
+  exports._createEditEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this.controlNodesActive = true;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : russian (ru)
-  // author : Viktorminator : https://github.com/Viktorminator
-  // Author : Menelion Elensúle : https://github.com/Oire
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
-      }
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
-              'hh': 'час_часа_часов',
-              'dd': 'день_дня_дней',
-              'MM': 'месяц_месяца_месяцев',
-              'yy': 'год_года_лет'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'минута' : 'минуту';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
-      }
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
+      "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='network-seperatorLine'></div>" +
+      "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
+      "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_'),
-              'accusative': 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_')
-          },
+    // bind the icon
+    var backButton = document.getElementById("network-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
+
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+    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._handleOnRelease = this._releaseControlNode;
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-          return months[nounCase][m.month()];
-      }
 
-      function monthsShortCaseReplace(m, format) {
-          var monthsShort = {
-              'nominative': 'янв_фев_мар_апр_май_июнь_июль_авг_сен_окт_ноя_дек'.split('_'),
-              'accusative': 'янв_фев_мар_апр_мая_июня_июля_авг_сен_окт_ноя_дек'.split('_')
-          },
 
-          nounCase = (/D[oD]?(\[[^\[\]]*\]|\s+)+MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
 
-          return monthsShort[nounCase][m.month()];
-      }
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
-              'accusative': 'воскресенье_понедельник_вторник_среду_четверг_пятницу_субботу'.split('_')
-          },
+  /**
+   * 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();
+  };
 
-          nounCase = (/\[ ?[Вв] ?(?:прошлую|следующую)? ?\] ?dddd/).test(format) ?
-              'accusative' :
-              'nominative';
+  /**
+   * 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();
+  };
 
-          return weekdays[nounCase][m.day()];
+  exports._releaseControlNode = function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode != null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
+      }
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
       }
+    }
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
+    }
+    this.freezeSimulation = false;
+    this._redraw();
+  };
 
-      return moment.lang('ru', {
-          months : monthsCaseReplace,
-          monthsShort : monthsShortCaseReplace,
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "вс_пн_вт_ср_чт_пт_сб".split("_"),
-          monthsParse : [/^янв/i, /^фев/i, /^мар/i, /^апр/i, /^ма[й|я]/i, /^июн/i, /^июл/i, /^авг/i, /^сен/i, /^окт/i, /^ноя/i, /^дек/i],
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY г.",
-              LLL : "D MMMM YYYY г., LT",
-              LLLL : "dddd, D MMMM YYYY г., LT"
-          },
-          calendar : {
-              sameDay: '[Сегодня в] LT',
-              nextDay: '[Завтра в] LT',
-              lastDay: '[Вчера в] LT',
-              nextWeek: function () {
-                  return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
-              },
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[В прошлое] dddd [в] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                      return '[В прошлый] dddd [в] LT';
-                  case 3:
-                  case 5:
-                  case 6:
-                      return '[В прошлую] dddd [в] LT';
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "через %s",
-              past : "%s назад",
-              s : "несколько секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "час",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "месяц",
-              MM : relativeTimeWithPlural,
-              y : "год",
-              yy : relativeTimeWithPlural
-          },
+  /**
+   * 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("Cannot create edges to a cluster.")
+        }
+        else {
+          this._selectObject(node,false);
+          // create a node the temporary line can look at
+          this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetNode'].x = node.x;
+          this.sectors['support']['nodes']['targetNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
+          this.sectors['support']['nodes']['targetViaNode'].x = node.x;
+          this.sectors['support']['nodes']['targetViaNode'].y = node.y;
+          this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
 
-          meridiemParse: /ночи|утра|дня|вечера/i,
-          isPM : function (input) {
-              return /^(дня|вечера)$/.test(input);
-          },
+          // create a temporary edge
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
+          this.edges['connectionEdge'].from = node;
+          this.edges['connectionEdge'].connected = true;
+          this.edges['connectionEdge'].smooth = true;
+          this.edges['connectionEdge'].selected = true;
+          this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
+          this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "ночи";
-              } else if (hour < 12) {
-                  return "утра";
-              } else if (hour < 17) {
-                  return "дня";
-              } else {
-                  return "вечера";
-              }
-          },
+          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
+          this._handleOnDrag = function(event) {
+            var pointer = this._getPointer(event.gesture.center);
+            this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
+            this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+            this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
+            this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+          };
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              case 'w':
-              case 'W':
-                  return number + '-я';
-              default:
-                  return number;
-              }
-          },
+          this.moving = true;
+          this.start();
+        }
+      }
+    }
+  };
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  exports._finishConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 1) {
 
+      // restore the drag function
+      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
+      delete this.cachedFunctions["_handleOnDrag"];
 
-/***/ },
-/* 113 */
-/***/ function(module, exports, __webpack_require__) {
+      // remember the edge id
+      var connectFromId = this.edges['connectionEdge'].fromId;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovak (sk)
-  // author : Martin Minka : https://github.com/k2s
-  // based on work of petrbela : https://github.com/petrbela
+      // remove the temporary nodes and edge
+      delete this.edges['connectionEdge'];
+      delete this.sectors['support']['nodes']['targetNode'];
+      delete this.sectors['support']['nodes']['targetViaNode'];
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert("Cannot create edges to a cluster.")
+        }
+        else {
+          this._createEdge(connectFromId,node.id);
+          this._createManipulatorBar();
+        }
       }
-  }(function (moment) {
-      var months = "január_február_marec_apríl_máj_jún_júl_august_september_október_november_december".split("_"),
-          monthsShort = "jan_feb_mar_apr_máj_jún_júl_aug_sep_okt_nov_dec".split("_");
+      this._unselectAll();
+    }
+  };
 
-      function plural(n) {
-          return (n > 1) && (n < 5);
-      }
 
-      function translate(number, withoutSuffix, key, isFuture) {
-          var result = number + " ";
-          switch (key) {
-          case 's':  // a few seconds / in a few seconds / a few seconds ago
-              return (withoutSuffix || isFuture) ? 'pár sekúnd' : 'pár sekundami';
-          case 'm':  // a minute / in a minute / a minute ago
-              return withoutSuffix ? 'minúta' : (isFuture ? 'minútu' : 'minútou');
-          case 'mm': // 9 minutes / in 9 minutes / 9 minutes ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'minúty' : 'minút');
-              } else {
-                  return result + 'minútami';
-              }
-              break;
-          case 'h':  // an hour / in an hour / an hour ago
-              return withoutSuffix ? 'hodina' : (isFuture ? 'hodinu' : 'hodinou');
-          case 'hh': // 9 hours / in 9 hours / 9 hours ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'hodiny' : 'hodín');
-              } else {
-                  return result + 'hodinami';
-              }
-              break;
-          case 'd':  // a day / in a day / a day ago
-              return (withoutSuffix || isFuture) ? 'deň' : 'dňom';
-          case 'dd': // 9 days / in 9 days / 9 days ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'dni' : 'dní');
-              } else {
-                  return result + 'dňami';
-              }
-              break;
-          case 'M':  // a month / in a month / a month ago
-              return (withoutSuffix || isFuture) ? 'mesiac' : 'mesiacom';
-          case 'MM': // 9 months / in 9 months / 9 months ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'mesiace' : 'mesiacov');
-              } else {
-                  return result + 'mesiacmi';
-              }
-              break;
-          case 'y':  // a year / in a year / a year ago
-              return (withoutSuffix || isFuture) ? 'rok' : 'rokom';
-          case 'yy': // 9 years / in 9 years / 9 years ago
-              if (withoutSuffix || isFuture) {
-                  return result + (plural(number) ? 'roky' : 'rokov');
-              } else {
-                  return result + 'rokmi';
-              }
-              break;
-          }
+  /**
+   * 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 {
+          alert(this.constants.labels['addError']);
+          this._createManipulatorBar();
+          this.moving = true;
+          this.start();
+        }
       }
+      else {
+        this.nodesData.add(defaultData);
+        this._createManipulatorBar();
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
 
-      return moment.lang('sk', {
-          months : months,
-          monthsShort : monthsShort,
-          monthsParse : (function (months, monthsShort) {
-              var i, _monthsParse = [];
-              for (i = 0; i < 12; i++) {
-                  // use custom parser to solve problem with July (červenec)
-                  _monthsParse[i] = new RegExp('^' + months[i] + '$|^' + monthsShort[i] + '$', 'i');
-              }
-              return _monthsParse;
-          }(months, monthsShort)),
-          weekdays : "nedeľa_pondelok_utorok_streda_štvrtok_piatok_sobota".split("_"),
-          weekdaysShort : "ne_po_ut_st_št_pi_so".split("_"),
-          weekdaysMin : "ne_po_ut_st_št_pi_so".split("_"),
-          longDateFormat : {
-              LT: "H:mm",
-              L : "DD.MM.YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[dnes o] LT",
-              nextDay: '[zajtra o] LT',
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[v] dddd [o] LT';
-                  case 3:
-                      return '[v stredu o] LT';
-                  case 4:
-                      return '[vo štvrtok o] LT';
-                  case 5:
-                      return '[v piatok o] LT';
-                  case 6:
-                      return '[v sobotu o] LT';
-                  }
-              },
-              lastDay: '[včera o] LT',
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[minulú nedeľu o] LT';
-                  case 1:
-                  case 2:
-                      return '[minulý] dddd [o] LT';
-                  case 3:
-                      return '[minulú stredu o] LT';
-                  case 4:
-                  case 5:
-                      return '[minulý] dddd [o] LT';
-                  case 6:
-                      return '[minulú sobotu o] LT';
-                  }
-              },
-              sameElse: "L"
-          },
-          relativeTime : {
-              future : "za %s",
-              past : "pred %s",
-              s : translate,
-              m : translate,
-              mm : translate,
-              h : translate,
-              hh : translate,
-              d : translate,
-              dd : translate,
-              M : translate,
-              MM : translate,
-              y : translate,
-              yy : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
-
-
-/***/ },
-/* 114 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : slovenian (sl)
-  // author : Robert Sedovšek : https://github.com/sedovsek
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      function translate(number, withoutSuffix, key) {
-          var result = number + " ";
-          switch (key) {
-          case 'm':
-              return withoutSuffix ? 'ena minuta' : 'eno minuto';
-          case 'mm':
-              if (number === 1) {
-                  result += 'minuta';
-              } else if (number === 2) {
-                  result += 'minuti';
-              } else if (number === 3 || number === 4) {
-                  result += 'minute';
-              } else {
-                  result += 'minut';
-              }
-              return result;
-          case 'h':
-              return withoutSuffix ? 'ena ura' : 'eno uro';
-          case 'hh':
-              if (number === 1) {
-                  result += 'ura';
-              } else if (number === 2) {
-                  result += 'uri';
-              } else if (number === 3 || number === 4) {
-                  result += 'ure';
-              } else {
-                  result += 'ur';
-              }
-              return result;
-          case 'dd':
-              if (number === 1) {
-                  result += 'dan';
-              } else {
-                  result += 'dni';
-              }
-              return result;
-          case 'MM':
-              if (number === 1) {
-                  result += 'mesec';
-              } else if (number === 2) {
-                  result += 'meseca';
-              } else if (number === 3 || number === 4) {
-                  result += 'mesece';
-              } else {
-                  result += 'mesecev';
-              }
-              return result;
-          case 'yy':
-              if (number === 1) {
-                  result += 'leto';
-              } else if (number === 2) {
-                  result += 'leti';
-              } else if (number === 3 || number === 4) {
-                  result += 'leta';
-              } else {
-                  result += 'let';
-              }
-              return result;
-          }
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.add(defaultData);
+        this.moving = true;
+        this.start();
       }
+    }
+  };
 
-      return moment.lang('sl', {
-          months : "januar_februar_marec_april_maj_junij_julij_avgust_september_oktober_november_december".split("_"),
-          monthsShort : "jan._feb._mar._apr._maj._jun._jul._avg._sep._okt._nov._dec.".split("_"),
-          weekdays : "nedelja_ponedeljek_torek_sreda_četrtek_petek_sobota".split("_"),
-          weekdaysShort : "ned._pon._tor._sre._čet._pet._sob.".split("_"),
-          weekdaysMin : "ne_po_to_sr_če_pe_so".split("_"),
-          longDateFormat : {
-              LT : "H:mm",
-              L : "DD. MM. YYYY",
-              LL : "D. MMMM YYYY",
-              LLL : "D. MMMM YYYY LT",
-              LLLL : "dddd, D. MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay  : '[danes ob] LT',
-              nextDay  : '[jutri ob] LT',
+  /**
+   * 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 {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
 
-              nextWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[v] [nedeljo] [ob] LT';
-                  case 3:
-                      return '[v] [sredo] [ob] LT';
-                  case 6:
-                      return '[v] [soboto] [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[v] dddd [ob] LT';
-                  }
-              },
-              lastDay  : '[včeraj ob] LT',
-              lastWeek : function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 6:
-                      return '[prejšnja] dddd [ob] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[prejšnji] dddd [ob] LT';
-                  }
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "čez %s",
-              past   : "%s nazaj",
-              s      : "nekaj sekund",
-              m      : translate,
-              mm     : translate,
-              h      : translate,
-              hh     : translate,
-              d      : "en dan",
-              dd     : translate,
-              M      : "en mesec",
-              MM     : translate,
-              y      : "eno leto",
-              yy     : translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
+  /**
+   * 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.group,
+        shape: node.shape,
+        color: {
+          background:node.color.background,
+          border:node.color.border,
+          highlight: {
+            background:node.color.highlight.background,
+            border:node.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 {
+        alert(this.constants.labels["editError"]);
+      }
+    }
+    else {
+      alert(this.constants.labels["editBoundError"]);
+    }
+  };
 
 
-/***/ },
-/* 115 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Albanian (sq)
-  // author : Flakërim Ismani : https://github.com/flakerimi
-  // author: Menelion Elensúle: https://github.com/Oire (tests)
-  // author : Oerd Cukalla : https://github.com/oerd (fixes)
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('sq', {
-          months : "Janar_Shkurt_Mars_Prill_Maj_Qershor_Korrik_Gusht_Shtator_Tetor_Nëntor_Dhjetor".split("_"),
-          monthsShort : "Jan_Shk_Mar_Pri_Maj_Qer_Kor_Gus_Sht_Tet_Nën_Dhj".split("_"),
-          weekdays : "E Diel_E Hënë_E Martë_E Mërkurë_E Enjte_E Premte_E Shtunë".split("_"),
-          weekdaysShort : "Die_Hën_Mar_Mër_Enj_Pre_Sht".split("_"),
-          weekdaysMin : "D_H_Ma_Më_E_P_Sh".split("_"),
-          meridiem : function (hours, minutes, isLower) {
-              return hours < 12 ? 'PD' : 'MD';
-          },
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[Sot në] LT',
-              nextDay : '[Nesër në] LT',
-              nextWeek : 'dddd [në] LT',
-              lastDay : '[Dje në] LT',
-              lastWeek : 'dddd [e kaluar në] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "në %s",
-              past : "%s më parë",
-              s : "disa sekonda",
-              m : "një minutë",
-              mm : "%d minuta",
-              h : "një orë",
-              hh : "%d orë",
-              d : "një ditë",
-              dd : "%d ditë",
-              M : "një muaj",
-              MM : "%d muaj",
-              y : "një vit",
-              yy : "%d vite"
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
+  /**
+   * 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 {
+            alert(this.constants.labels["deleteError"])
+          }
+        }
+        else {
+          this.edgesData.remove(selectedEdges);
+          this.nodesData.remove(selectedNodes);
+          this._unselectAll();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        alert(this.constants.labels["deleteClusterError"]);
+      }
+    }
+  };
 
 
 /***/ },
-/* 116 */
+/* 128 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-cyrillic (sr-cyrl)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
+  exports._cleanNavigation = function() {
+    // clean up previous navigation items
+    var wrapper = document.getElementById('network-navigation_wrapper');
+    if (wrapper != null) {
+      this.containerElement.removeChild(wrapper);
+    }
+    document.onmouseup = null;
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
+  /**
+   * 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();
 
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['један минут', 'једне минуте'],
-              mm: ['минут', 'минуте', 'минута'],
-              h: ['један сат', 'једног сата'],
-              hh: ['сат', 'сата', 'сати'],
-              dd: ['дан', 'дана', 'дана'],
-              MM: ['месец', 'месеца', 'месеци'],
-              yy: ['година', 'године', 'година']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
-          },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
-              }
-          }
-      };
+    this.navigationDivs = {};
+    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
+    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
-      return moment.lang('sr-cyrl', {
-          months: ['јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'],
-          monthsShort: ['јан.', 'феб.', 'мар.', 'апр.', 'мај', 'јун', 'јул', 'авг.', 'сеп.', 'окт.', 'нов.', 'дец.'],
-          weekdays: ['недеља', 'понедељак', 'уторак', 'среда', 'четвртак', 'петак', 'субота'],
-          weekdaysShort: ['нед.', 'пон.', 'уто.', 'сре.', 'чет.', 'пет.', 'суб.'],
-          weekdaysMin: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[данас у] LT',
-              nextDay: '[сутра у] LT',
+    this.navigationDivs['wrapper'] = document.createElement('div');
+    this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[у] [недељу] [у] LT';
-                  case 3:
-                      return '[у] [среду] [у] LT';
-                  case 6:
-                      return '[у] [суботу] [у] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[у] dddd [у] LT';
-                  }
-              },
-              lastDay  : '[јуче у] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[прошле] [недеље] [у] LT',
-                      '[прошлог] [понедељка] [у] LT',
-                      '[прошлог] [уторка] [у] LT',
-                      '[прошле] [среде] [у] LT',
-                      '[прошлог] [четвртка] [у] LT',
-                      '[прошлог] [петка] [у] LT',
-                      '[прошле] [суботе] [у] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "за %s",
-              past   : "пре %s",
-              s      : "неколико секунди",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "дан",
-              dd     : translator.translate,
-              M      : "месец",
-              MM     : translator.translate,
-              y      : "годину",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    for (var i = 0; i < navigationDivs.length; i++) {
+      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
+      this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
+      this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
+      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+      this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
+    }
 
+    document.onmouseup = this._stopMovement.bind(this);
+  };
 
-/***/ },
-/* 117 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * this stops all movement induced by the navigation buttons
+   *
+   * @private
+   */
+  exports._stopMovement = function() {
+    this._xStopMoving();
+    this._yStopMoving();
+    this._stopZoom();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Serbian-latin (sr)
-  // author : Milan Janačković<milanjanackovic@gmail.com> : https://github.com/milan-j
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
+  /**
+   * stops the actions performed by page up and down etc.
+   *
+   * @param event
+   * @private
+   */
+  exports._preventDefault = function(event) {
+    if (event !== undefined) {
+      if (event.preventDefault) {
+        event.preventDefault();
       } else {
-          factory(window.moment); // Browser global
+        event.returnValue = false;
       }
-  }(function (moment) {
-
-      var translator = {
-          words: { //Different grammatical cases
-              m: ['jedan minut', 'jedne minute'],
-              mm: ['minut', 'minute', 'minuta'],
-              h: ['jedan sat', 'jednog sata'],
-              hh: ['sat', 'sata', 'sati'],
-              dd: ['dan', 'dana', 'dana'],
-              MM: ['mesec', 'meseca', 'meseci'],
-              yy: ['godina', 'godine', 'godina']
-          },
-          correctGrammaticalCase: function (number, wordKey) {
-              return number === 1 ? wordKey[0] : (number >= 2 && number <= 4 ? wordKey[1] : wordKey[2]);
-          },
-          translate: function (number, withoutSuffix, key) {
-              var wordKey = translator.words[key];
-              if (key.length === 1) {
-                  return withoutSuffix ? wordKey[0] : wordKey[1];
-              } else {
-                  return number + ' ' + translator.correctGrammaticalCase(number, wordKey);
-              }
-          }
-      };
+    }
+  };
 
-      return moment.lang('sr', {
-          months: ['januar', 'februar', 'mart', 'april', 'maj', 'jun', 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'],
-          monthsShort: ['jan.', 'feb.', 'mar.', 'apr.', 'maj', 'jun', 'jul', 'avg.', 'sep.', 'okt.', 'nov.', 'dec.'],
-          weekdays: ['nedelja', 'ponedeljak', 'utorak', 'sreda', 'četvrtak', 'petak', 'subota'],
-          weekdaysShort: ['ned.', 'pon.', 'uto.', 'sre.', 'čet.', 'pet.', 'sub.'],
-          weekdaysMin: ['ne', 'po', 'ut', 'sr', 'če', 'pe', 'su'],
-          longDateFormat: {
-              LT: "H:mm",
-              L: "DD. MM. YYYY",
-              LL: "D. MMMM YYYY",
-              LLL: "D. MMMM YYYY LT",
-              LLLL: "dddd, D. MMMM YYYY LT"
-          },
-          calendar: {
-              sameDay: '[danas u] LT',
-              nextDay: '[sutra u] LT',
 
-              nextWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                      return '[u] [nedelju] [u] LT';
-                  case 3:
-                      return '[u] [sredu] [u] LT';
-                  case 6:
-                      return '[u] [subotu] [u] LT';
-                  case 1:
-                  case 2:
-                  case 4:
-                  case 5:
-                      return '[u] dddd [u] LT';
-                  }
-              },
-              lastDay  : '[juče u] LT',
-              lastWeek : function () {
-                  var lastWeekDays = [
-                      '[prošle] [nedelje] [u] LT',
-                      '[prošlog] [ponedeljka] [u] LT',
-                      '[prošlog] [utorka] [u] LT',
-                      '[prošle] [srede] [u] LT',
-                      '[prošlog] [četvrtka] [u] LT',
-                      '[prošlog] [petka] [u] LT',
-                      '[prošle] [subote] [u] LT'
-                  ];
-                  return lastWeekDays[this.day()];
-              },
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "za %s",
-              past   : "pre %s",
-              s      : "nekoliko sekundi",
-              m      : translator.translate,
-              mm     : translator.translate,
-              h      : translator.translate,
-              hh     : translator.translate,
-              d      : "dan",
-              dd     : translator.translate,
-              M      : "mesec",
-              MM     : translator.translate,
-              y      : "godinu",
-              yy     : translator.translate
-          },
-          ordinal : '%d.',
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className += " active";
+    }
+  };
 
 
-/***/ },
-/* 118 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['down'].className += " active";
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : swedish (sv)
-  // author : Jens Alm : https://github.com/ulmus
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('sv', {
-          months : "januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),
-          monthsShort : "jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),
-          weekdays : "söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),
-          weekdaysShort : "sön_mån_tis_ons_tor_fre_lör".split("_"),
-          weekdaysMin : "sö_må_ti_on_to_fr_lö".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "YYYY-MM-DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: '[Idag] LT',
-              nextDay: '[Imorgon] LT',
-              lastDay: '[Igår] LT',
-              nextWeek: 'dddd LT',
-              lastWeek: '[Förra] dddd[en] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "om %s",
-              past : "för %s sedan",
-              s : "några sekunder",
-              m : "en minut",
-              mm : "%d minuter",
-              h : "en timme",
-              hh : "%d timmar",
-              d : "en dag",
-              dd : "%d dagar",
-              M : "en månad",
-              MM : "%d månader",
-              y : "ett år",
-              yy : "%d år"
-          },
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (~~ (number % 100 / 10) === 1) ? 'e' :
-                  (b === 1) ? 'a' :
-                  (b === 2) ? 'a' :
-                  (b === 3) ? 'e' : 'e';
-              return number + output;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className += " active";
+    }
+  };
 
 
-/***/ },
-/* 119 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['right'].className += " active";
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : tamil (ta)
-  // author : Arjunkumar Krishnamoorthy : https://github.com/tk120404
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      /*var symbolMap = {
-              '1': '௧',
-              '2': '௨',
-              '3': '௩',
-              '4': '௪',
-              '5': '௫',
-              '6': '௬',
-              '7': '௭',
-              '8': '௮',
-              '9': '௯',
-              '0': '௦'
-          },
-          numberMap = {
-              '௧': '1',
-              '௨': '2',
-              '௩': '3',
-              '௪': '4',
-              '௫': '5',
-              '௬': '6',
-              '௭': '7',
-              '௮': '8',
-              '௯': '9',
-              '௦': '0'
-          }; */
+  /**
+   * 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
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className += " active";
+    }
+  };
 
-      return moment.lang('ta', {
-          months : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          monthsShort : 'ஜனவரி_பிப்ரவரி_மார்ச்_ஏப்ரல்_மே_ஜூன்_ஜூலை_ஆகஸ்ட்_செப்டெம்பர்_அக்டோபர்_நவம்பர்_டிசம்பர்'.split("_"),
-          weekdays : 'ஞாயிற்றுக்கிழமை_திங்கட்கிழமை_செவ்வாய்கிழமை_புதன்கிழமை_வியாழக்கிழமை_வெள்ளிக்கிழமை_சனிக்கிழமை'.split("_"),
-          weekdaysShort : 'ஞாயிறு_திங்கள்_செவ்வாய்_புதன்_வியாழன்_வெள்ளி_சனி'.split("_"),
-          weekdaysMin : 'ஞா_தி_செ_பு_வி_வெ_ச'.split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY, LT",
-              LLLL : "dddd, D MMMM YYYY, LT"
-          },
-          calendar : {
-              sameDay : '[இன்று] LT',
-              nextDay : '[நாளை] LT',
-              nextWeek : 'dddd, LT',
-              lastDay : '[நேற்று] LT',
-              lastWeek : '[கடந்த வாரம்] dddd, LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s இல்",
-              past : "%s முன்",
-              s : "ஒரு சில விநாடிகள்",
-              m : "ஒரு நிமிடம்",
-              mm : "%d நிமிடங்கள்",
-              h : "ஒரு மணி நேரம்",
-              hh : "%d மணி நேரம்",
-              d : "ஒரு நாள்",
-              dd : "%d நாட்கள்",
-              M : "ஒரு மாதம்",
-              MM : "%d மாதங்கள்",
-              y : "ஒரு வருடம்",
-              yy : "%d ஆண்டுகள்"
-          },
-  /*        preparse: function (string) {
-              return string.replace(/[௧௨௩௪௫௬௭௮௯௦]/g, function (match) {
-                  return numberMap[match];
-              });
-          },
-          postformat: function (string) {
-              return string.replace(/\d/g, function (match) {
-                  return symbolMap[match];
-              });
-          },*/
-          ordinal : function (number) {
-              return number + 'வது';
-          },
 
+  /**
+   * Zoom out
+   * @private
+   */
+  exports._zoomOut = function() {
+    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    this._preventDefault(event);
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomOut'].className += " active";
+    }
+  };
 
-  // refer http://ta.wikipedia.org/s/1er1      
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour >= 6 && hour <= 10) {
-                  return " காலை";
-              } else   if (hour >= 10 && hour <= 14) {
-                  return " நண்பகல்";
-              } else    if (hour >= 14 && hour <= 18) {
-                  return " எற்பாடு";
-              } else   if (hour >= 18 && hour <= 20) {
-                  return " மாலை";
-              } else  if (hour >= 20 && hour <= 24) {
-                  return " இரவு";
-              } else  if (hour >= 0 && hour <= 6) {
-                  return " வைகறை";
-              }
-          },
-          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.
-          }
-      });
-  }));
+  /**
+   * Stop zooming and unhighlight the zoom controls
+   * @private
+   */
+  exports._stopZoom = function() {
+    this.zoomIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
+      this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
+    }
+  };
+
+
+  /**
+   * Stop moving in the Y direction and unHighlight the up and down
+   * @private
+   */
+  exports._yStopMoving = function() {
+    this.yIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
+      this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
+    }
+  };
+
+
+  /**
+   * Stop moving in the X direction and unHighlight left and right.
+   * @private
+   */
+  exports._xStopMoving = function() {
+    this.xIncrement = 0;
+    if (this.navigationDivs) {
+      this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
+      this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
+    }
+  };
 
 
 /***/ },
-/* 120 */
+/* 129 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : thai (th)
-  // author : Kridsada Thanabulpong : https://github.com/sirn
+  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;
+        }
+      }
+    }
+  };
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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) {
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
+        this.constants.hierarchicalLayout.levelSeparation *= -1;
       }
-  }(function (moment) {
-      return moment.lang('th', {
-          months : "มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),
-          monthsShort : "มกรา_กุมภา_มีนา_เมษา_พฤษภา_มิถุนา_กรกฎา_สิงหา_กันยา_ตุลา_พฤศจิกา_ธันวา".split("_"),
-          weekdays : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),
-          weekdaysShort : "อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"), // yes, three characters difference
-          weekdaysMin : "อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),
-          longDateFormat : {
-              LT : "H นาฬิกา m นาที",
-              L : "YYYY/MM/DD",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY เวลา LT",
-              LLLL : "วันddddที่ D MMMM YYYY เวลา LT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 12) {
-                  return "ก่อนเที่ยง";
-              } else {
-                  return "หลังเที่ยง";
-              }
-          },
-          calendar : {
-              sameDay : '[วันนี้ เวลา] LT',
-              nextDay : '[พรุ่งนี้ เวลา] LT',
-              nextWeek : 'dddd[หน้า เวลา] LT',
-              lastDay : '[เมื่อวานนี้ เวลา] LT',
-              lastWeek : '[วัน]dddd[ที่แล้ว เวลา] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "อีก %s",
-              past : "%sที่แล้ว",
-              s : "ไม่กี่วินาที",
-              m : "1 นาที",
-              mm : "%d นาที",
-              h : "1 ชั่วโมง",
-              hh : "%d ชั่วโมง",
-              d : "1 วัน",
-              dd : "%d วัน",
-              M : "1 เดือน",
-              MM : "%d เดือน",
-              y : "1 ปี",
-              yy : "%d ปี"
+      else {
+        this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
+      }
+
+      if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.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";
+        }
+      }
+      // 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;
+          }
+        }
+      }
 
+      // if the user defined some levels but not all, alert and run without hierarchical layout
+      if (undefinedLevel == true && definedLevel == true) {
+        alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
+        this.zoomExtent(true,this.constants.clustering.enabled);
+        if (!this.constants.clustering.enabled) {
+          this.start();
+        }
+      }
+      else {
+        // setup the system to use hierarchical method.
+        this._changeConstants();
 
-/***/ },
-/* 121 */
-/***/ function(module, exports, __webpack_require__) {
+        // define levels if undefined by the users. Based on hubsize
+        if (undefinedLevel == true) {
+          this._determineLevels(hubsize);
+        }
+        // check the distribution of the nodes per level.
+        var distribution = this._getDistribution();
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Tagalog/Filipino (tl-ph)
-  // author : Dan Hagman
+        // place the nodes on the canvas. This also stablilizes the system.
+        this._placeNodesByHierarchy(distribution);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+        // start the simulation.
+        this.start();
       }
-  }(function (moment) {
-      return moment.lang('tl-ph', {
-          months : "Enero_Pebrero_Marso_Abril_Mayo_Hunyo_Hulyo_Agosto_Setyembre_Oktubre_Nobyembre_Disyembre".split("_"),
-          monthsShort : "Ene_Peb_Mar_Abr_May_Hun_Hul_Ago_Set_Okt_Nob_Dis".split("_"),
-          weekdays : "Linggo_Lunes_Martes_Miyerkules_Huwebes_Biyernes_Sabado".split("_"),
-          weekdaysShort : "Lin_Lun_Mar_Miy_Huw_Biy_Sab".split("_"),
-          weekdaysMin : "Li_Lu_Ma_Mi_Hu_Bi_Sab".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "MM/D/YYYY",
-              LL : "MMMM D, YYYY",
-              LLL : "MMMM D, YYYY LT",
-              LLLL : "dddd, MMMM DD, YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Ngayon sa] LT",
-              nextDay: '[Bukas sa] LT',
-              nextWeek: 'dddd [sa] LT',
-              lastDay: '[Kahapon sa] LT',
-              lastWeek: 'dddd [huling linggo] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "sa loob ng %s",
-              past : "%s ang nakalipas",
-              s : "ilang segundo",
-              m : "isang minuto",
-              mm : "%d minuto",
-              h : "isang oras",
-              hh : "%d oras",
-              d : "isang araw",
-              dd : "%d araw",
-              M : "isang buwan",
-              MM : "%d buwan",
-              y : "isang taon",
-              yy : "%d taon"
-          },
-          ordinal : function (number) {
-              return number;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 122 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : turkish (tr)
-  // authors : Erhan Gundogan : https://github.com/erhangundogan,
-  //           Burak Yiğit Kaya: https://github.com/BYK
+    // start placing all the level 0 nodes first. Then recursively position their branches.
+    for (nodeId in distribution[0].nodes) {
+      if (distribution[0].nodes.hasOwnProperty(nodeId)) {
+        node = distribution[0].nodes[nodeId];
+        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+          if (node.xFixed) {
+            node.x = distribution[0].minPos;
+            node.xFixed = false;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        else {
+          if (node.yFixed) {
+            node.y = distribution[0].minPos;
+            node.yFixed = false;
+
+            distribution[0].minPos += distribution[0].nodeSpacing;
+          }
+        }
+        this._placeBranchNodes(node.edges,node.id,distribution,node.level);
       }
-  }(function (moment) {
-
-      var suffixes = {
-          1: "'inci",
-          5: "'inci",
-          8: "'inci",
-          70: "'inci",
-          80: "'inci",
+    }
 
-          2: "'nci",
-          7: "'nci",
-          20: "'nci",
-          50: "'nci",
+    // stabilize the system after positioning. This function calls zoomExtent.
+    this._stabilize();
+  };
 
-          3: "'üncü",
-          4: "'üncü",
-          100: "'üncü",
 
-          6: "'ncı",
+  /**
+   * This function get the distribution of levels based on hubsize
+   *
+   * @returns {Object}
+   * @private
+   */
+  exports._getDistribution = function() {
+    var distribution = {};
+    var nodeId, node, level;
 
-          9: "'uncu",
-          10: "'uncu",
-          30: "'uncu",
+    // 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.hasOwnProperty(node.level)) {
+          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+        }
+        distribution[node.level].amount += 1;
+        distribution[node.level].nodes[node.id] = node;
+      }
+    }
 
-          60: "'ıncı",
-          90: "'ıncı"
-      };
+    // 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;
+        }
+      }
+    }
 
-      return moment.lang('tr', {
-          months : "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"),
-          monthsShort : "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"),
-          weekdays : "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"),
-          weekdaysShort : "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"),
-          weekdaysMin : "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd, D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay : '[bugün saat] LT',
-              nextDay : '[yarın saat] LT',
-              nextWeek : '[haftaya] dddd [saat] LT',
-              lastDay : '[dün] LT',
-              lastWeek : '[geçen hafta] dddd [saat] LT',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "%s sonra",
-              past : "%s önce",
-              s : "birkaç saniye",
-              m : "bir dakika",
-              mm : "%d dakika",
-              h : "bir saat",
-              hh : "%d saat",
-              d : "bir gün",
-              dd : "%d gün",
-              M : "bir ay",
-              MM : "%d ay",
-              y : "bir yıl",
-              yy : "%d yıl"
-          },
-          ordinal : function (number) {
-              if (number === 0) {  // special case for zero
-                  return number + "'ıncı";
-              }
-              var a = number % 10,
-                  b = number % 100 - a,
-                  c = number >= 100 ? 100 : null;
+    // 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);
+      }
+    }
 
-              return number + (suffixes[a] || suffixes[b] || suffixes[c]);
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    return distribution;
+  };
 
 
-/***/ },
-/* 123 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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;
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt in Latin (tzm-latn)
-  // author : Abdel Said : https://github.com/abdelsaid
+    // determine hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.edges.length == hubsize) {
+          node.level = 0;
+        }
+      }
+    }
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+    // 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);
+        }
       }
-  }(function (moment) {
-      return moment.lang('tzm-latn', {
-          months : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          monthsShort : "innayr_brˤayrˤ_marˤsˤ_ibrir_mayyw_ywnyw_ywlywz_ɣwšt_šwtanbir_ktˤwbrˤ_nwwanbir_dwjnbir".split("_"),
-          weekdays : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysShort : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          weekdaysMin : "asamas_aynas_asinas_akras_akwas_asimwas_asiḍyas".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[asdkh g] LT",
-              nextDay: '[aska g] LT',
-              nextWeek: 'dddd [g] LT',
-              lastDay: '[assant g] LT',
-              lastWeek: 'dddd [g] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "dadkh s yan %s",
-              past : "yan %s",
-              s : "imik",
-              m : "minuḍ",
-              mm : "%d minuḍ",
-              h : "saɛa",
-              hh : "%d tassaɛin",
-              d : "ass",
-              dd : "%d ossan",
-              M : "ayowr",
-              MM : "%d iyyirn",
-              y : "asgas",
-              yy : "%d isgasn"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+    }
+  };
 
 
-/***/ },
-/* 124 */
-/***/ function(module, exports, __webpack_require__) {
+  /**
+   * 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();
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : Morocco Central Atlas Tamaziɣt (tzm)
-  // author : Abdel Said : https://github.com/abdelsaid
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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 (moment) {
-      return moment.lang('tzm', {
-          months : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          monthsShort : "ⵉⵏⵏⴰⵢⵔ_ⴱⵕⴰⵢⵕ_ⵎⴰⵕⵚ_ⵉⴱⵔⵉⵔ_ⵎⴰⵢⵢⵓ_ⵢⵓⵏⵢⵓ_ⵢⵓⵍⵢⵓⵣ_ⵖⵓⵛⵜ_ⵛⵓⵜⴰⵏⴱⵉⵔ_ⴽⵟⵓⴱⵕ_ⵏⵓⵡⴰⵏⴱⵉⵔ_ⴷⵓⵊⵏⴱⵉⵔ".split("_"),
-          weekdays : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysShort : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          weekdaysMin : "ⴰⵙⴰⵎⴰⵙ_ⴰⵢⵏⴰⵙ_ⴰⵙⵉⵏⴰⵙ_ⴰⴽⵔⴰⵙ_ⴰⴽⵡⴰⵙ_ⴰⵙⵉⵎⵡⴰⵙ_ⴰⵙⵉⴹⵢⴰⵙ".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "dddd D MMMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[ⴰⵙⴷⵅ ⴴ] LT",
-              nextDay: '[ⴰⵙⴽⴰ ⴴ] LT',
-              nextWeek: 'dddd [ⴴ] LT',
-              lastDay: '[ⴰⵚⴰⵏⵜ ⴴ] LT',
-              lastWeek: 'dddd [ⴴ] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "ⴷⴰⴷⵅ ⵙ ⵢⴰⵏ %s",
-              past : "ⵢⴰⵏ %s",
-              s : "ⵉⵎⵉⴽ",
-              m : "ⵎⵉⵏⵓⴺ",
-              mm : "%d ⵎⵉⵏⵓⴺ",
-              h : "ⵙⴰⵄⴰ",
-              hh : "%d ⵜⴰⵙⵙⴰⵄⵉⵏ",
-              d : "ⴰⵙⵙ",
-              dd : "%d oⵙⵙⴰⵏ",
-              M : "ⴰⵢoⵓⵔ",
-              MM : "%d ⵉⵢⵢⵉⵔⵏ",
-              y : "ⴰⵙⴳⴰⵙ",
-              yy : "%d ⵉⵙⴳⴰⵙⵏ"
-          },
-          week : {
-              dow : 6, // Saturday is the first day of the week.
-              doy : 12  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
 
+      // 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;
+        }
+      }
 
-/***/ },
-/* 125 */
-/***/ function(module, exports, __webpack_require__) {
+      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);
+        }
+      }
+    }
+  };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : ukrainian (uk)
-  // author : zemlanin : https://github.com/zemlanin
-  // Author : Menelion Elensúle : https://github.com/Oire
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
+  /**
+   * 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;
       }
-  }(function (moment) {
-      function plural(word, num) {
-          var forms = word.split('_');
-          return num % 10 === 1 && num % 100 !== 11 ? forms[0] : (num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]);
+      else {
+        childNode = edges[i].to;
+      }
+      if (childNode.level == -1 || childNode.level > level) {
+        childNode.level = level;
+        if (edges.length > 1) {
+          this._setLevel(level+1, childNode.edges, childNode.id);
+        }
       }
+    }
+  };
 
-      function relativeTimeWithPlural(number, withoutSuffix, key) {
-          var format = {
-              'mm': 'хвилина_хвилини_хвилин',
-              'hh': 'година_години_годин',
-              'dd': 'день_дні_днів',
-              'MM': 'місяць_місяці_місяців',
-              'yy': 'рік_роки_років'
-          };
-          if (key === 'm') {
-              return withoutSuffix ? 'хвилина' : 'хвилину';
-          }
-          else if (key === 'h') {
-              return withoutSuffix ? 'година' : 'годину';
-          }
-          else {
-              return number + ' ' + plural(format[key], +number);
-          }
+
+  /**
+   * 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;
       }
+    }
+  };
 
-      function monthsCaseReplace(m, format) {
-          var months = {
-              'nominative': 'січень_лютий_березень_квітень_травень_червень_липень_серпень_вересень_жовтень_листопад_грудень'.split('_'),
-              'accusative': 'січня_лютого_березня_квітня_травня_червня_липня_серпня_вересня_жовтня_листопада_грудня'.split('_')
-          },
 
-          nounCase = (/D[oD]? *MMMM?/).test(format) ?
-              'accusative' :
-              'nominative';
+/***/ },
+/* 130 */
+/***/ function(module, exports, __webpack_require__) {
 
-          return months[nounCase][m.month()];
-      }
+  /**
+   * Canvas shapes used by Network
+   */
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
 
-      function weekdaysCaseReplace(m, format) {
-          var weekdays = {
-              'nominative': 'неділя_понеділок_вівторок_середа_четвер_п’ятниця_субота'.split('_'),
-              'accusative': 'неділю_понеділок_вівторок_середу_четвер_п’ятницю_суботу'.split('_'),
-              'genitive': 'неділі_понеділка_вівторка_середи_четверга_п’ятниці_суботи'.split('_')
-          },
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+      this.beginPath();
+      this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
 
-          nounCase = (/(\[[ВвУу]\]) ?dddd/).test(format) ?
-              'accusative' :
-              ((/\[?(?:минулої|наступної)? ?\] ?dddd/).test(format) ?
-                  'genitive' :
-                  'nominative');
+    /**
+     * 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);
+    };
 
-          return weekdays[nounCase][m.day()];
-      }
+    /**
+     * 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();
 
-      function processHoursFunction(str) {
-          return function () {
-              return str + 'о' + (this.hours() === 11 ? 'б' : '') + '] LT';
-          };
-      }
+      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
 
-      return moment.lang('uk', {
-          months : monthsCaseReplace,
-          monthsShort : "січ_лют_бер_квіт_трав_черв_лип_серп_вер_жовт_лист_груд".split("_"),
-          weekdays : weekdaysCaseReplace,
-          weekdaysShort : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          weekdaysMin : "нд_пн_вт_ср_чт_пт_сб".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD.MM.YYYY",
-              LL : "D MMMM YYYY р.",
-              LLL : "D MMMM YYYY р., LT",
-              LLLL : "dddd, D MMMM YYYY р., LT"
-          },
-          calendar : {
-              sameDay: processHoursFunction('[Сьогодні '),
-              nextDay: processHoursFunction('[Завтра '),
-              lastDay: processHoursFunction('[Вчора '),
-              nextWeek: processHoursFunction('[У] dddd ['),
-              lastWeek: function () {
-                  switch (this.day()) {
-                  case 0:
-                  case 3:
-                  case 5:
-                  case 6:
-                      return processHoursFunction('[Минулої] dddd [').call(this);
-                  case 1:
-                  case 2:
-                  case 4:
-                      return processHoursFunction('[Минулого] dddd [').call(this);
-                  }
-              },
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "за %s",
-              past : "%s тому",
-              s : "декілька секунд",
-              m : relativeTimeWithPlural,
-              mm : relativeTimeWithPlural,
-              h : "годину",
-              hh : relativeTimeWithPlural,
-              d : "день",
-              dd : relativeTimeWithPlural,
-              M : "місяць",
-              MM : relativeTimeWithPlural,
-              y : "рік",
-              yy : relativeTimeWithPlural
-          },
+      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();
 
-          // M. E.: those two are virtually unused but a user might want to implement them for his/her website for some reason
+      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
 
-          meridiem : function (hour, minute, isLower) {
-              if (hour < 4) {
-                  return "ночі";
-              } else if (hour < 12) {
-                  return "ранку";
-              } else if (hour < 17) {
-                  return "дня";
-              } else {
-                  return "вечора";
-              }
-          },
+      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();
+    };
 
-          ordinal: function (number, period) {
-              switch (period) {
-              case 'M':
-              case 'd':
-              case 'DDD':
-              case 'w':
-              case 'W':
-                  return number + '-й';
-              case 'D':
-                  return number + '-го';
-              default:
-                  return number;
-              }
-          },
+    /**
+     * 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();
 
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 1st is the first week of the year.
-          }
-      });
-  }));
+      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)
+        );
+      }
 
+      this.closePath();
+    };
 
-/***/ },
-/* 126 */
-/***/ function(module, exports, __webpack_require__) {
+    /**
+     * 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);
+    };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : uzbek
-  // author : Sardor Muminov : https://github.com/muminoff
+    /**
+     * 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
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('uz', {
-          months : "январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_"),
-          monthsShort : "янв_фев_мар_апр_май_июн_июл_авг_сен_окт_ноя_дек".split("_"),
-          weekdays : "Якшанба_Душанба_Сешанба_Чоршанба_Пайшанба_Жума_Шанба".split("_"),
-          weekdaysShort : "Якш_Душ_Сеш_Чор_Пай_Жум_Шан".split("_"),
-          weekdaysMin : "Як_Ду_Се_Чо_Па_Жу_Ша".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM YYYY",
-              LLL : "D MMMM YYYY LT",
-              LLLL : "D MMMM YYYY, dddd LT"
-          },
-          calendar : {
-              sameDay : '[Бугун соат] LT [да]',
-              nextDay : '[Эртага] LT [да]',
-              nextWeek : 'dddd [куни соат] LT [да]',
-              lastDay : '[Кеча соат] LT [да]',
-              lastWeek : '[Утган] dddd [куни соат] LT [да]',
-              sameElse : 'L'
-          },
-          relativeTime : {
-              future : "Якин %s ичида",
-              past : "Бир неча %s олдин",
-              s : "фурсат",
-              m : "бир дакика",
-              mm : "%d дакика",
-              h : "бир соат",
-              hh : "%d соат",
-              d : "бир кун",
-              dd : "%d кун",
-              M : "бир ой",
-              MM : "%d ой",
-              y : "бир йил",
-              yy : "%d йил"
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 7  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      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);
+    };
 
 
-/***/ },
-/* 127 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : vietnamese (vi)
-  // author : Bang Nguyen : https://github.com/bangnk
+    /**
+     * 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;
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('vi', {
-          months : "tháng 1_tháng 2_tháng 3_tháng 4_tháng 5_tháng 6_tháng 7_tháng 8_tháng 9_tháng 10_tháng 11_tháng 12".split("_"),
-          monthsShort : "Th01_Th02_Th03_Th04_Th05_Th06_Th07_Th08_Th09_Th10_Th11_Th12".split("_"),
-          weekdays : "chủ nhật_thứ hai_thứ ba_thứ tư_thứ năm_thứ sáu_thứ bảy".split("_"),
-          weekdaysShort : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          weekdaysMin : "CN_T2_T3_T4_T5_T6_T7".split("_"),
-          longDateFormat : {
-              LT : "HH:mm",
-              L : "DD/MM/YYYY",
-              LL : "D MMMM [năm] YYYY",
-              LLL : "D MMMM [năm] YYYY LT",
-              LLLL : "dddd, D MMMM [năm] YYYY LT",
-              l : "DD/M/YYYY",
-              ll : "D MMM YYYY",
-              lll : "D MMM YYYY LT",
-              llll : "ddd, D MMM YYYY LT"
-          },
-          calendar : {
-              sameDay: "[Hôm nay lúc] LT",
-              nextDay: '[Ngày mai lúc] LT',
-              nextWeek: 'dddd [tuần tới lúc] LT',
-              lastDay: '[Hôm qua lúc] LT',
-              lastWeek: 'dddd [tuần rồi lúc] LT',
-              sameElse: 'L'
-          },
-          relativeTime : {
-              future : "%s tới",
-              past : "%s trước",
-              s : "vài giây",
-              m : "một phút",
-              mm : "%d phút",
-              h : "một giờ",
-              hh : "%d giờ",
-              d : "một ngày",
-              dd : "%d ngày",
-              M : "một tháng",
-              MM : "%d tháng",
-              y : "một năm",
-              yy : "%d năm"
-          },
-          ordinal : function (number) {
-              return number;
-          },
-          week : {
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      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);
 
-/***/ },
-/* 128 */
-/***/ function(module, exports, __webpack_require__) {
+      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : chinese
-  // author : suupic : https://github.com/suupic
-  // author : Zeno Zeng : https://github.com/zenozeng
+      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('zh-cn', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "周日_周一_周二_周三_周四_周五_周六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
-          longDateFormat : {
-              LT : "Ah点mm",
-              L : "YYYY-MM-DD",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY-MM-DD",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 600) {
-                  return "凌晨";
-              } else if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
-              } else {
-                  return "晚上";
-              }
-          },
-          calendar : {
-              sameDay : function () {
-                  return this.minutes() === 0 ? "[今天]Ah[点整]" : "[今天]LT";
-              },
-              nextDay : function () {
-                  return this.minutes() === 0 ? "[明天]Ah[点整]" : "[明天]LT";
-              },
-              lastDay : function () {
-                  return this.minutes() === 0 ? "[昨天]Ah[点整]" : "[昨天]LT";
-              },
-              nextWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              lastWeek : function () {
-                  var startOfWeek, prefix;
-                  startOfWeek = moment().startOf('week');
-                  prefix = this.unix() < startOfWeek.unix()  ? '[上]' : '[本]';
-                  return this.minutes() === 0 ? prefix + "dddAh点整" : prefix + "dddAh点mm";
-              },
-              sameElse : 'LL'
-          },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d":
-              case "D":
-              case "DDD":
-                  return number + "日";
-              case "M":
-                  return number + "月";
-              case "w":
-              case "W":
-                  return number + "周";
-              default:
-                  return number;
-              }
-          },
-          relativeTime : {
-              future : "%s内",
-              past : "%s前",
-              s : "几秒",
-              m : "1分钟",
-              mm : "%d分钟",
-              h : "1小时",
-              hh : "%d小时",
-              d : "1天",
-              dd : "%d天",
-              M : "1个月",
-              MM : "%d个月",
-              y : "1年",
-              yy : "%d年"
-          },
-          week : {
-              // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
-              dow : 1, // Monday is the first day of the week.
-              doy : 4  // The week that contains Jan 4th is the first week of the year.
-          }
-      });
-  }));
+      this.lineTo(xe, ymb);
 
+      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
 
-/***/ },
-/* 129 */
-/***/ function(module, exports, __webpack_require__) {
+      this.lineTo(x, ym);
+    };
 
-  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// moment.js language configuration
-  // language : traditional chinese (zh-tw)
-  // author : Ben : https://github.com/ben-lin
 
-  (function (factory) {
-      if (true) {
-          !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(51)], __WEBPACK_AMD_DEFINE_RESULT__ = (factory.apply(null, __WEBPACK_AMD_DEFINE_ARRAY__)), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // AMD
-      } else if (typeof exports === 'object') {
-          module.exports = factory(require('../moment')); // Node
-      } else {
-          factory(window.moment); // Browser global
-      }
-  }(function (moment) {
-      return moment.lang('zh-tw', {
-          months : "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),
-          monthsShort : "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),
-          weekdays : "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
-          weekdaysShort : "週日_週一_週二_週三_週四_週五_週六".split("_"),
-          weekdaysMin : "日_一_二_三_四_五_六".split("_"),
-          longDateFormat : {
-              LT : "Ah點mm",
-              L : "YYYY年MMMD日",
-              LL : "YYYY年MMMD日",
-              LLL : "YYYY年MMMD日LT",
-              LLLL : "YYYY年MMMD日ddddLT",
-              l : "YYYY年MMMD日",
-              ll : "YYYY年MMMD日",
-              lll : "YYYY年MMMD日LT",
-              llll : "YYYY年MMMD日ddddLT"
-          },
-          meridiem : function (hour, minute, isLower) {
-              var hm = hour * 100 + minute;
-              if (hm < 900) {
-                  return "早上";
-              } else if (hm < 1130) {
-                  return "上午";
-              } else if (hm < 1230) {
-                  return "中午";
-              } else if (hm < 1800) {
-                  return "下午";
-              } else {
-                  return "晚上";
-              }
-          },
-          calendar : {
-              sameDay : '[今天]LT',
-              nextDay : '[明天]LT',
-              nextWeek : '[下]ddddLT',
-              lastDay : '[昨天]LT',
-              lastWeek : '[上]ddddLT',
-              sameElse : 'L'
-          },
-          ordinal : function (number, period) {
-              switch (period) {
-              case "d" :
-              case "D" :
-              case "DDD" :
-                  return number + "日";
-              case "M" :
-                  return number + "月";
-              case "w" :
-              case "W" :
-                  return number + "週";
-              default :
-                  return number;
-              }
-          },
-          relativeTime : {
-              future : "%s內",
-              past : "%s前",
-              s : "幾秒",
-              m : "一分鐘",
-              mm : "%d分鐘",
-              h : "一小時",
-              hh : "%d小時",
-              d : "一天",
-              dd : "%d天",
-              M : "一個月",
-              MM : "%d個月",
-              y : "一年",
-              yy : "%d年"
-          }
-      });
-  }));
+    /**
+     * 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);
 
-/***/ },
-/* 130 */
-/***/ function(module, exports, __webpack_require__) {
+      // 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);
 
-  module.exports = function(module) {
-  	if(!module.webpackPolyfill) {
-  		module.deprecate = function() {};
-  		module.paths = [];
-  		// module.parent = undefined by default
-  		module.children = [];
-  		module.webpackPolyfill = 1;
-  	}
-  	return module;
+      // 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;
+      }
+    };
+
+    // TODO: add diamond shape
   }
 
 
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 91e76026..b7875307 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -532,7 +532,6 @@ Network.prototype.setData = function(data, disableStart) {
   }
 
   this._putDataInSector();
-
   if (!disableStart) {
     // find a stable position or start animating to a stable position
     if (this.stabilize) {
@@ -1779,7 +1778,7 @@ Network.prototype._redraw = function() {
     this._doInAllSectors("_drawControlNodes",ctx);
   }
 
-//  this._doInSupportSector("_drawNodes",ctx,true);
+  this._doInSupportSector("_drawNodes",ctx,true);
 //  this._drawTree(ctx,"#F00F0F");
 
   // restore original scaling and translation
@@ -2229,6 +2228,14 @@ Network.prototype._configureSmoothCurves = function(disableStart) {
   }
   if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
     this._createBezierNodes();
+    // cleanup unused support nodes
+    for (var nodeId in this.sectors['support']['nodes']) {
+      if (this.sectors['support']['nodes'].hasOwnProperty(nodeId)) {
+        if (this.edges[this.sectors['support']['nodes'][nodeId]] === undefined) {
+          delete this.sectors['support']['nodes'][nodeId];
+        }
+      }
+    }
   }
   else {
     // delete the support nodes
@@ -2240,6 +2247,8 @@ Network.prototype._configureSmoothCurves = function(disableStart) {
       }
     }
   }
+
+
   this._updateCalculationNodes();
   if (!disableStart) {
     this.moving = true;